diff --git a/cypress/e2e/boardFeatures.js b/cypress/e2e/boardFeatures.js
index 058da5e8b..79e960be5 100644
--- a/cypress/e2e/boardFeatures.js
+++ b/cypress/e2e/boardFeatures.js
@@ -1,10 +1,10 @@
-import { randHash } from "../utils"
+import { randHash } from '../utils'
 const randUser = randHash()
 
-describe('Board', function () {
-    const password = 'pass123'
-    
-    before(function () {
+describe('Board', function() {
+	const password = 'pass123'
+
+	before(function() {
 		cy.nextcloudCreateUser(randUser, password)
 	})
 
@@ -12,30 +12,30 @@ describe('Board', function () {
 		cy.login(randUser, password)
 	})
 
-    it('Can create a board', function () {
-        let board = 'Test'
+	it('Can create a board', function() {
+		const board = 'Test'
 
-        cy.intercept({
-            method: 'POST',
-            url: '/index.php/apps/deck/boards',
-        }).as('createBoardRequest')
-            
-        // Click "Add board"
-        cy.openLeftSidebar()
-        cy.get('#app-navigation-vue .app-navigation__list .app-navigation-entry')
-            .eq(3).find('a').first().click({force: true})
+		cy.intercept({
+			method: 'POST',
+			url: '/index.php/apps/deck/boards',
+		}).as('createBoardRequest')
 
-        // Type the board title
-        cy.get('.board-create form input[type=text]')
-            .type(board, {force: true})
+		// Click "Add board"
+		cy.openLeftSidebar()
+		cy.get('#app-navigation-vue .app-navigation__list .app-navigation-entry')
+			.eq(3).find('a').first().click({ force: true })
 
-        // Submit
-        cy.get('.board-create form input[type=submit]')
-            .first().click({force: true})
+		// Type the board title
+		cy.get('.board-create form input[type=text]')
+			.type(board, { force: true })
 
-        cy.wait('@createBoardRequest').its('response.statusCode').should('equal', 200)
-        
-        cy.get('.app-navigation__list .app-navigation-entry__children .app-navigation-entry')
-            .contains(board).should('be.visible')
+		// Submit
+		cy.get('.board-create form input[type=submit]')
+			.first().click({ force: true })
+
+		cy.wait('@createBoardRequest').its('response.statusCode').should('equal', 200)
+
+		cy.get('.app-navigation__list .app-navigation-entry__children .app-navigation-entry')
+			.contains(board).should('be.visible')
 	})
-})
\ No newline at end of file
+})
diff --git a/cypress/e2e/cardFeatures.js b/cypress/e2e/cardFeatures.js
index 5a413e203..d5449440c 100644
--- a/cypress/e2e/cardFeatures.js
+++ b/cypress/e2e/cardFeatures.js
@@ -1,38 +1,67 @@
 import { randHash } from '../utils'
 const randUser = randHash()
 
-describe('Card', function () {
-    const board = 'TestBoard'
-    const list = 'TestList'
-    const password = 'pass123'
+const testBoardData = {
+	title: 'MyBoardTest',
+	color: '00ff00',
+	stacks: [
+		{
+			title: 'TestList',
+			cards: [
+				{
+					title: 'Hello world',
+				},
+			],
+		},
+	],
+}
 
-    before(function () {
-        cy.nextcloudCreateUser(randUser, password)
-        cy.deckCreateBoard({ user: randUser, password }, board)
-        cy.deckCreateList({ user: randUser, password }, list)
-    })
+describe('Card', function() {
+	before(function() {
+		cy.nextcloudCreateUser(randUser, randUser)
+		cy.createExampleBoard({
+			user: randUser,
+			password: randUser,
+			board: testBoardData,
+		})
+	})
 
-    beforeEach(function () {
-        cy.login(randUser, password)
-    })
+	beforeEach(function() {
+		cy.login(randUser, randUser)
+	})
 
-    it('Can add a card', function () {
-        let card = 'Card 1'
+	it('Can show card details modal', function() {
+		cy.openLeftSidebar()
+		cy.getNavigationEntry(testBoardData.title)
+			.first().click({ force: true })
 
-        cy.openLeftSidebar()
-        cy.get('#app-navigation-vue .app-navigation__list .app-navigation-entry')
-            .eq(3).find('a.app-navigation-entry-link')
-            .first().click({force: true})
+		cy.get('.board .stack').eq(0).within(() => {
+			cy.get('.card:contains("Hello world")').should('be.visible').click()
+		})
 
-        cy.get('.board .stack').eq(0).within(() => {
-            cy.get('button.action-item.action-item--single.icon-add')
-                .first().click()
+		cy.get('.modal__card').should('be.visible')
+		cy.get('.app-sidebar-header__maintitle').contains('Hello world')
+	})
 
-            cy.get('.stack__card-add form input#new-stack-input-main')
-                .type(card)
-            cy.get('.stack__card-add form input[type=submit]')
-                .first().click()
-            cy.get('.card').first().contains(card).should('be.visible')
-          })
-    })
-})
\ No newline at end of file
+	it('Can add a card', function() {
+		const newCardTitle = 'Write some cypress tests'
+
+		cy.openLeftSidebar()
+		cy.getNavigationEntry(testBoardData.title)
+			.first().click({ force: true })
+
+		cy.get('.board .stack').eq(0).within(() => {
+			cy.get('.card:contains("Hello world")').should('be.visible')
+
+			cy.get('.button-vue[aria-label*="Add card"]')
+				.first().click()
+
+			cy.get('.stack__card-add form input#new-stack-input-main')
+				.type(newCardTitle)
+			cy.get('.stack__card-add form input[type=submit]')
+				.first().click()
+			cy.get(`.card:contains("${newCardTitle}")`).should('be.visible')
+		})
+	})
+
+})
diff --git a/cypress/e2e/deckDashboard.js b/cypress/e2e/deckDashboard.js
index ce85d43cb..f61e744e3 100644
--- a/cypress/e2e/deckDashboard.js
+++ b/cypress/e2e/deckDashboard.js
@@ -4,7 +4,7 @@ const randUser = randHash()
 describe('Deck dashboard', function() {
 	const password = 'pass123'
 
-	before(function () {
+	before(function() {
 		cy.nextcloudCreateUser(randUser, password)
 	})
 
@@ -18,15 +18,14 @@ describe('Deck dashboard', function() {
         	.should('have.text', 'Upcoming cards')
 	})
 
-	it('Can see the default "Personal Board" created for user by default', function () {
+	it('Can see the default "Personal Board" created for user by default', function() {
 		const defaultBoard = 'Personal'
 
 		cy.openLeftSidebar()
-		cy.get('.app-navigation__list .app-navigation-entry')
-			.eq(1)
-			.find('ul.app-navigation-entry__children li.app-navigation-entry')
+		cy.get('.app-navigation-entry-wrapper[icon=icon-deck]')
+			.find('ul.app-navigation-entry__children .app-navigation-entry:contains(' + defaultBoard + ')')
 			.first()
 			.contains(defaultBoard)
 			.should('be.visible')
 	})
-})
\ No newline at end of file
+})
diff --git a/cypress/e2e/stackFeatures.js b/cypress/e2e/stackFeatures.js
index 3ce09fa20..7754643ec 100644
--- a/cypress/e2e/stackFeatures.js
+++ b/cypress/e2e/stackFeatures.js
@@ -1,33 +1,30 @@
-import { randHash } from "../utils";
-const randUser = randHash();
+import { randHash } from '../utils'
+const randUser = randHash()
 
-describe("Stack", function () {
-	const board = "TestBoard";
-	const password = "pass123";
-	const stack = "List 1";
+describe('Stack', function() {
+	const board = 'TestBoard'
+	const password = 'pass123'
+	const stack = 'List 1'
 
-	before(function () {
+	before(function() {
 		cy.nextcloudCreateUser(randUser, password)
 		cy.deckCreateBoard({ user: randUser, password }, board)
 	})
 
-	beforeEach(function () {
+	beforeEach(function() {
 		cy.logout()
 		cy.login(randUser, password)
 	})
 
-	it("Can create a stack", function () {
+	it('Can create a stack', function() {
 		cy.openLeftSidebar()
-		cy.get("#app-navigation-vue .app-navigation__list .app-navigation-entry")
-			.eq(3)
-			.find("a.app-navigation-entry-link")
-			.first()
+		cy.getNavigationEntry(board)
 			.click({ force: true })
 
-		cy.get("#stack-add button").first().click()
-		cy.get("#stack-add form input#new-stack-input-main").type(stack)
-		cy.get("#stack-add form input[type=submit]").first().click()
+		cy.get('#stack-add button').first().click()
+		cy.get('#stack-add form input#new-stack-input-main').type(stack)
+		cy.get('#stack-add form input[type=submit]').first().click()
 
-		cy.get(".board .stack").eq(0).contains(stack).should("be.visible")
+		cy.get('.board .stack').eq(0).contains(stack).should('be.visible')
 	})
-});
+})
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
index 59b2bab6e..96e295355 100644
--- a/cypress/plugins/index.js
+++ b/cypress/plugins/index.js
@@ -17,6 +17,6 @@
  */
 // eslint-disable-next-line no-unused-vars
 module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
+	// `on` is used to hook into various events Cypress emits
+	// `config` is the resolved Cypress config
 }
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 19815e16f..ff69e2344 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -20,94 +20,140 @@
  *
  */
 
-const url = Cypress.config("baseUrl").replace(/\/index.php\/?$/g, "");
-Cypress.env("baseUrl", url);
+const url = Cypress.config('baseUrl').replace(/\/index.php\/?$/g, '')
+Cypress.env('baseUrl', url)
 
-Cypress.Commands.add("login", (user, password, route = "/apps/deck/") => {
-	let session = `${user}-${Date.now()}`;
-	cy.session(session, function () {
-		cy.visit(route);
-		cy.get("input[name=user]").type(user);
-		cy.get("input[name=password]").type(password);
-		cy.get("form[name=login] [type=submit]").click();
-		cy.url().should("include", route);
-	});
-	// in case the session already existed but we are on a different route...
-	cy.visit(route);
-});
+Cypress.Commands.add('login', (user, password, route = '/apps/deck/') => {
+	const session = `${user}-${Date.now()}`
+	cy.session(session, function() {
+		cy.visit(route)
+		cy.get('input[name=user]').type(user)
+		cy.get('input[name=password]').type(password)
+		cy.get('form[name=login] [type=submit]').click()
+		cy.url().should('include', route)
+	})
+	cy.visit(route)
+})
 
-Cypress.Commands.add("logout", (route = "/") => {
-	cy.session("_guest", function () {});
-});
+Cypress.Commands.add('logout', (route = '/') => {
+	cy.session('_guest', function() {})
+})
 
-Cypress.Commands.add("nextcloudCreateUser", (user, password) => {
-	cy.clearCookies();
+Cypress.Commands.add('nextcloudCreateUser', (user, password) => {
+	cy.clearCookies()
 	cy.request({
-		method: "POST",
-		url: `${Cypress.env("baseUrl")}/ocs/v1.php/cloud/users?format=json`,
+		method: 'POST',
+		url: `${Cypress.env('baseUrl')}/ocs/v1.php/cloud/users?format=json`,
 		form: true,
 		body: {
 			userid: user,
-			password: password,
+			password,
 		},
-		auth: { user: "admin", pass: "admin" },
+		auth: { user: 'admin', pass: 'admin' },
 		headers: {
-			"OCS-ApiRequest": "true",
-			"Content-Type": "application/x-www-form-urlencoded",
+			'OCS-ApiRequest': 'true',
+			'Content-Type': 'application/x-www-form-urlencoded',
 		},
 	}).then((response) => {
-		cy.log(`Created user ${user}`, response.status);
-	});
-});
+		cy.log(`Created user ${user}`, response.status)
+	})
+})
 
-Cypress.Commands.add("nextcloudUpdateUser", (user, password, key, value) => {
+Cypress.Commands.add('nextcloudUpdateUser', (user, password, key, value) => {
 	cy.request({
-		method: "PUT",
-		url: `${Cypress.env("baseUrl")}/ocs/v2.php/cloud/users/${user}`,
+		method: 'PUT',
+		url: `${Cypress.env('baseUrl')}/ocs/v2.php/cloud/users/${user}`,
 		form: true,
 		body: { key, value },
 		auth: { user, pass: password },
 		headers: {
-			"OCS-ApiRequest": "true",
-			"Content-Type": "application/x-www-form-urlencoded",
+			'OCS-ApiRequest': 'true',
+			'Content-Type': 'application/x-www-form-urlencoded',
 		},
 	}).then((response) => {
-		cy.log(`Updated user ${user} ${key} to ${value}`, response.status);
-	});
-});
+		cy.log(`Updated user ${user} ${key} to ${value}`, response.status)
+	})
+})
 
-Cypress.Commands.add("openLeftSidebar", () => {
-	cy.get(".app-navigation button.app-navigation-toggle").click();
-});
+Cypress.Commands.add('openLeftSidebar', () => {
+	cy.get('.app-navigation button.app-navigation-toggle').click()
+})
 
-Cypress.Commands.add("deckCreateBoard", ({ user, password }, title) => {
-	cy.login(user, password);
+Cypress.Commands.add('deckCreateBoard', ({ user, password }, title) => {
+	cy.login(user, password)
 
-	cy.get(".app-navigation button.app-navigation-toggle").click();
-	cy.get("#app-navigation-vue .app-navigation__list .app-navigation-entry")
+	cy.get('.app-navigation button.app-navigation-toggle').click()
+	cy.get('#app-navigation-vue .app-navigation__list .app-navigation-entry')
 		.eq(3)
-		.find("a")
+		.find('a')
 		.first()
-		.click({ force: true });
+		.click({ force: true })
 
-	cy.get(".board-create form input[type=text]").type(title, { force: true });
+	cy.get('.board-create form input[type=text]').type(title, { force: true })
 
-	cy.get(".board-create form input[type=submit]")
+	cy.get('.board-create form input[type=submit]')
 		.first()
-		.click({ force: true });
-});
+		.click({ force: true })
+})
 
-Cypress.Commands.add("deckCreateList", ({ user, password }, title) => {
-	cy.login(user, password);
+Cypress.Commands.add('deckCreateList', ({ user, password }, title) => {
+	cy.login(user, password)
 
-	cy.get(".app-navigation button.app-navigation-toggle").click();
-	cy.get("#app-navigation-vue .app-navigation__list .app-navigation-entry")
+	cy.get('.app-navigation button.app-navigation-toggle').click()
+	cy.get('#app-navigation-vue .app-navigation__list .app-navigation-entry')
 		.eq(3)
-		.find("a.app-navigation-entry-link")
+		.find('a.app-navigation-entry-link')
 		.first()
-		.click({ force: true });
+		.click({ force: true })
 
-	cy.get("#stack-add button").first().click();
-	cy.get("#stack-add form input#new-stack-input-main").type(title);
-	cy.get("#stack-add form input[type=submit]").first().click();
-});
+	cy.get('#stack-add button').first().click()
+	cy.get('#stack-add form input#new-stack-input-main').type(title)
+	cy.get('#stack-add form input[type=submit]').first().click()
+})
+
+Cypress.Commands.add('createExampleBoard', ({ user, password, board }) => {
+	cy.request({
+		method: 'POST',
+		url: `${Cypress.env('baseUrl')}/index.php/apps/deck/api/v1.0/boards`,
+		auth: {
+			user,
+			password,
+		},
+		body: { title: board.title, color: board.color ?? 'ff0000' },
+	}).then((boardResponse) => {
+		expect(boardResponse.status).to.eq(200)
+		const boardData = boardResponse.body
+		for (const stackIndex in board.stacks) {
+			const stack = board.stacks[stackIndex]
+			cy.request({
+				method: 'POST',
+				url: `${Cypress.env('baseUrl')}/index.php/apps/deck/api/v1.0/boards/${boardData.id}/stacks`,
+				auth: {
+					user,
+					password,
+				},
+				body: { title: stack.title, order: 0 },
+			}).then((stackResponse) => {
+				const stackData = stackResponse.body
+				for (const cardIndex in stack.cards) {
+					const card = stack.cards[cardIndex]
+					cy.request({
+						method: 'POST',
+						url: `${Cypress.env('baseUrl')}/index.php/apps/deck/api/v1.0/boards/${boardData.id}/stacks/${stackData.id}/cards`,
+						auth: {
+							user,
+							password,
+						},
+						body: { title: card.title },
+					})
+				}
+			})
+		}
+	})
+})
+
+Cypress.Commands.add('getNavigationEntry', (boardTitle) => {
+	return cy.get('.app-navigation-entry-wrapper[icon=icon-deck]')
+		.find('ul.app-navigation-entry__children .app-navigation-entry:contains(' + boardTitle + ')')
+		.find('a.app-navigation-entry-link')
+})
diff --git a/cypress/utils/index.js b/cypress/utils/index.js
index 1ace84aaa..aa46b9f07 100644
--- a/cypress/utils/index.js
+++ b/cypress/utils/index.js
@@ -1 +1 @@
-export const randHash = () => Math.random().toString(36).replace(/[^a-z]+/g, '').slice(0, 10)
\ No newline at end of file
+export const randHash = () => Math.random().toString(36).replace(/[^a-z]+/g, '').slice(0, 10)
diff --git a/package-lock.json b/package-lock.json
index 5690dcf3b..cc33459ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "@nextcloud/l10n": "^1.6.0",
         "@nextcloud/moment": "^1.2.1",
         "@nextcloud/router": "^2.0.0",
-        "@nextcloud/vue": "^5.4.0",
+        "@nextcloud/vue": "^6.0.0-beta.4",
         "@nextcloud/vue-dashboard": "^2.0.1",
         "blueimp-md5": "^2.19.0",
         "dompurify": "^2.3.10",
@@ -33,7 +33,7 @@
         "nextcloud-vue-collections": "^0.10.0",
         "p-queue": "^7.3.0",
         "url-search-params-polyfill": "^8.1.1",
-        "vue": "^2.7.8",
+        "vue": "^2.7.9",
         "vue-at": "^2.5.0",
         "vue-click-outside": "^1.1.0",
         "vue-easymde": "^2.0.0",
@@ -56,7 +56,7 @@
         "jest": "^28.1.3",
         "jest-serializer-vue": "^2.0.2",
         "vue-jest": "^3.0.7",
-        "vue-template-compiler": "^2.7.8"
+        "vue-template-compiler": "^2.7.9"
       },
       "engines": {
         "node": "^16.0.0",
@@ -1965,6 +1965,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
+      "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
+      "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+      "dependencies": {
+        "@floating-ui/core": "^0.3.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -2955,8 +2968,9 @@
       }
     },
     "node_modules/@nextcloud/capabilities": {
-      "version": "1.0.2",
-      "license": "GPL-3.0-or-later",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@nextcloud/capabilities/-/capabilities-1.0.4.tgz",
+      "integrity": "sha512-xsmwPPUJ8NN7YfLcq0gpDTibeb9lMBvY/bffMFnHcZi8hMGOouPiEY+CWAgJ5I9W6I2vNeacHUuTanEN5Ncb2A==",
       "dependencies": {
         "@nextcloud/initial-state": "^1.1.2",
         "core-js": "^3.6.4"
@@ -3136,12 +3150,11 @@
       }
     },
     "node_modules/@nextcloud/logger": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/logger/-/logger-2.0.0.tgz",
-      "integrity": "sha512-C3vb8I1z67c5FhSWUNB21U6gzzD7RVgjyVUeK+QVz5nYQt1UWTp9yGyqE8G+R5QAyFFWfuOw1RHHkHJ/CWQ4YA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/logger/-/logger-2.2.1.tgz",
+      "integrity": "sha512-MP2/5ZdjDfcTPO5ASfqV5fVU6TYeaa2QOsi2yXBHrmlJ34+HlDdsoVzDGPrbutGCToAuBDSu7nh0WW2aLOp/9A==",
       "dependencies": {
         "@nextcloud/auth": "^1.2.2",
-        "babel-plugin-transform-class-properties": "^6.24.1",
         "core-js": "^3.6.4"
       }
     },
@@ -3166,9 +3179,9 @@
       }
     },
     "node_modules/@nextcloud/logger/node_modules/core-js": {
-      "version": "3.16.3",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.3.tgz",
-      "integrity": "sha512-lM3GftxzHNtPNUJg0v4pC2RC6puwMd6VZA7vXUczi+SKmCWSf4JwO89VJGMqbzmB7jlK7B5hr3S64PqwFL49cA==",
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.24.1.tgz",
+      "integrity": "sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -3267,43 +3280,42 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-5.4.0.tgz",
-      "integrity": "sha512-YybOMuStBKtCwbssxMNEd0A8k/Qr5+zm9vnSOaLaMxeB8iaUU+PgBNiYGo8O24UJjSS6FqFwg02V4XzI1Sd6Lw==",
+      "version": "6.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0-beta.4.tgz",
+      "integrity": "sha512-1TdzH0++/gIcBzot8iNT3AnweR/1EykpCfBwkJNhMgoiY4HlMLxBj7bpe2D4ul24XTCoXVEdGMYyB32GNVc9WA==",
       "dependencies": {
-        "@nextcloud/auth": "^1.2.3",
-        "@nextcloud/axios": "^1.3.2",
+        "@nextcloud/auth": "^2.0.0",
+        "@nextcloud/axios": "^2.0.0",
         "@nextcloud/browser-storage": "^0.1.1",
         "@nextcloud/calendar-js": "^3.0.0",
-        "@nextcloud/capabilities": "^1.0.2",
-        "@nextcloud/dialogs": "^3.0.0",
-        "@nextcloud/event-bus": "^2.0.0",
-        "@nextcloud/l10n": "^1.2.3",
-        "@nextcloud/logger": "^2.0.0",
+        "@nextcloud/capabilities": "^1.0.4",
+        "@nextcloud/dialogs": "^3.1.4",
+        "@nextcloud/event-bus": "^3.0.0",
+        "@nextcloud/l10n": "^1.6.0",
+        "@nextcloud/logger": "^2.2.1",
         "@nextcloud/router": "^2.0.0",
         "debounce": "1.2.1",
-        "emoji-mart-vue-fast": "^10.2.1",
+        "emoji-mart-vue-fast": "^11.1.1",
         "escape-html": "^1.0.3",
-        "focus-trap": "^6.8.1",
+        "floating-vue": "^1.0.0-beta.18",
+        "focus-trap": "^7.0.0",
         "hammerjs": "^2.0.8",
-        "linkify-string": "^3.0.2",
-        "md5": "^2.2.1",
-        "splitpanes": "^2.3.6",
-        "string-length": "^5.0.0",
-        "striptags": "^3.1.1",
-        "style-loader": "^3.3.1",
+        "linkify-string": "^3.0.4",
+        "md5": "^2.3.0",
+        "splitpanes": "^2.4.1",
+        "string-length": "^5.0.1",
+        "striptags": "^3.2.0",
         "tributejs": "^5.1.3",
-        "v-click-outside": "^3.0.1",
-        "v-tooltip": "^2.0.3",
-        "vue": "^2.6.14",
-        "vue-color": "^2.7.1",
-        "vue-material-design-icons": "^5.0.0",
+        "v-click-outside": "^3.2.0",
+        "vue": "^2.7.8",
+        "vue-color": "^2.8.1",
+        "vue-material-design-icons": "^5.1.2",
         "vue-multiselect": "^2.1.6",
-        "vue2-datepicker": "^3.6.3"
+        "vue2-datepicker": "^3.11.0"
       },
       "engines": {
-        "node": "^14.0.0",
-        "npm": "^7.0.0"
+        "node": "^16.0.0",
+        "npm": "^7.0.0 || ^8.0.0"
       }
     },
     "node_modules/@nextcloud/vue-dashboard": {
@@ -3474,54 +3486,10 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
-    "node_modules/@nextcloud/vue/node_modules/@nextcloud/auth": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-1.3.0.tgz",
-      "integrity": "sha512-GfwRM9W7hat4psNdAt74UHEV+drEXQ53klCVp6JpON66ZLPeK5eJ1LQuiQDkpUxZpqNeaumXjiB98h5cug/uQw==",
-      "dependencies": {
-        "@nextcloud/event-bus": "^1.1.3",
-        "@nextcloud/typings": "^0.2.2",
-        "core-js": "^3.6.4"
-      }
-    },
-    "node_modules/@nextcloud/vue/node_modules/@nextcloud/auth/node_modules/@nextcloud/event-bus": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-1.3.0.tgz",
-      "integrity": "sha512-+U5MnCvfnNWvf0lvdqJg8F+Nm8wN+s9ayuBjtiEQxTAcootv7lOnlMgfreqF3l2T0Wet2uZh4JbFVUWf8l3w7g==",
-      "dependencies": {
-        "@types/semver": "^7.3.5",
-        "core-js": "^3.11.2",
-        "semver": "^7.3.5"
-      }
-    },
-    "node_modules/@nextcloud/vue/node_modules/@nextcloud/axios": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/axios/-/axios-1.11.0.tgz",
-      "integrity": "sha512-NyaiSC2GX2CPaH/MUGGMTTTza/TW9ZqWNGWq6LJ+pLER8nqZ9BQkwJ5kXUYGo+i3cka68PO+9WhcDv4fSABpuQ==",
-      "dependencies": {
-        "@nextcloud/auth": "^1.3.0",
-        "axios": "^0.27.1",
-        "core-js": "^3.6.4"
-      },
-      "engines": {
-        "node": "^16.0.0",
-        "npm": "^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/@nextcloud/vue/node_modules/@nextcloud/event-bus": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-2.1.1.tgz",
-      "integrity": "sha512-YEui6N+23uyjBSIUZhf8rEjG9vol7UGgxcgxMddEbO0HS7M/sh1cocRqtn+ZVi/yPybeToGmt68SDPCgwHQHKw==",
-      "dependencies": {
-        "@types/semver": "^7.1.0",
-        "core-js": "^3.6.2",
-        "semver": "^7.3.2"
-      }
-    },
     "node_modules/@nextcloud/vue/node_modules/ansi-regex": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.0.tgz",
-      "integrity": "sha512-tAaOSrWCHF+1Ear1Z4wnJCXA9GGox4K6Ic85a5qalES2aeEwQGr7UC93mwef49536PkCYjzkp0zIxfFvexJ6zQ==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
       "engines": {
         "node": ">=12"
       },
@@ -3530,30 +3498,20 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/char-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.0.tgz",
-      "integrity": "sha512-oGu2QekBMXgyQNWPDRQ001bjvDnZe4/zBTz37TMbiKz1NbNiyiH5hRkobe7npRN6GfbGbxMYFck/vQ1r9c1VMA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz",
+      "integrity": "sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==",
       "engines": {
         "node": ">=12.20"
       }
     },
-    "node_modules/@nextcloud/vue/node_modules/core-js": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.24.1.tgz",
-      "integrity": "sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg==",
-      "hasInstallScript": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
     "node_modules/@nextcloud/vue/node_modules/emoji-mart-vue-fast": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-10.2.1.tgz",
-      "integrity": "sha512-PtKihhsXBEEw1jHwnoRyJAnJP1OlK4EJrEze58EbUUV7iHWGLub+yuiNSj2Uo1JBHraz4fw/pH98nFysVoe0qg==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-11.1.1.tgz",
+      "integrity": "sha512-mMN49N2lCQCjanSzLYBS1PlBO+7Do092FnrsWwogwmOo4p+L8N3L8TjcDk30ByXMCjSEcCDsjupCxIcaBpVNKg==",
       "dependencies": {
         "@babel/polyfill": "^7.12.1",
-        "@babel/runtime": "^7.16.3",
+        "@babel/runtime": "^7.18.6",
         "vue-virtual-scroller": "^1.0.10"
       },
       "peerDependencies": {
@@ -3561,51 +3519,26 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/linkify-string": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-3.0.2.tgz",
-      "integrity": "sha512-e6sa4WYslcwuNA0ciRo7KPAb4VpTIOxsGPAXeSR8XlORtKak8WMleuvrt5iRZwulHAd6dI+BO7b94lNW8lbMUQ==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-3.0.4.tgz",
+      "integrity": "sha512-OnNqqRjlYXaXipIAbBC8sDXsSumI1ftatzFg141Pw9HEXWjTVLFcMZoKbFupshqWRavtNJ6QHLa+u6AlxxgeRw==",
       "peerDependencies": {
         "linkifyjs": "^3.0.0"
       }
     },
     "node_modules/@nextcloud/vue/node_modules/linkifyjs": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.1.tgz",
-      "integrity": "sha512-HwXVwdNH1wESBfo2sH7Bkl+ywzbGA3+uJEfhquCyi/bMCa49bFUvd/re1NT1Lox/5jdnpQXzI9O/jykit71idg==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.5.tgz",
+      "integrity": "sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg==",
       "peer": true
     },
-    "node_modules/@nextcloud/vue/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@nextcloud/vue/node_modules/semver": {
-      "version": "7.3.7",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@nextcloud/vue/node_modules/string-length": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.0.tgz",
-      "integrity": "sha512-1qjpci3h1G7BUi6dt5uAVyrO2FMUdjj3XWU970/eQh0YKhlYZ8bJMC/+BUpD21YdEhmuHv2nnbUUn024+cC7YQ==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+      "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
       "dependencies": {
         "char-regex": "^2.0.0",
-        "strip-ansi": "^7.0.0"
+        "strip-ansi": "^7.0.1"
       },
       "engines": {
         "node": ">=12.20"
@@ -3615,11 +3548,11 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/strip-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.0.tgz",
-      "integrity": "sha512-UhDTSnGF1dc0DRbUqr1aXwNoY3RgVkSWG8BrpnuFIxhP57IqbS7IRta2Gfiavds4yCxc5+fEAVVOgBZWnYkvzg==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+      "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
       "dependencies": {
-        "ansi-regex": "^6.0.0"
+        "ansi-regex": "^6.0.1"
       },
       "engines": {
         "node": ">=12"
@@ -3628,11 +3561,6 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/@nextcloud/vue/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    },
     "node_modules/@nextcloud/webpack-vue-config": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-5.3.0.tgz",
@@ -4146,9 +4074,9 @@
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "2.7.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.8.tgz",
-      "integrity": "sha512-2DK4YWKfgLnW9VDR9gnju1gcYRk3flKj8UNsms7fsRmFcg35slVTZEkqwBtX+wJBXaamFfn6NxSsZh3h12Ix/Q==",
+      "version": "2.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.9.tgz",
+      "integrity": "sha512-TD2FvT0fPUezw5RVP4tfwTZnKHP0QjeEUb39y7tORvOJQTjbOuHJEk4GPHUPsRaTeQ8rjuKjntyrYcEIx+ODxg==",
       "dependencies": {
         "@babel/parser": "^7.18.4",
         "postcss": "^8.4.14",
@@ -4156,9 +4084,9 @@
       }
     },
     "node_modules/@vue/compiler-sfc/node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.16",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -4607,6 +4535,7 @@
     },
     "node_modules/ansi-regex": {
       "version": "2.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4867,6 +4796,7 @@
     },
     "node_modules/babel-code-frame": {
       "version": "6.26.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "chalk": "^1.1.3",
@@ -4876,6 +4806,7 @@
     },
     "node_modules/babel-code-frame/node_modules/ansi-styles": {
       "version": "2.2.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4883,6 +4814,7 @@
     },
     "node_modules/babel-code-frame/node_modules/chalk": {
       "version": "1.1.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^2.2.1",
@@ -4897,10 +4829,12 @@
     },
     "node_modules/babel-code-frame/node_modules/js-tokens": {
       "version": "3.0.2",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/babel-code-frame/node_modules/supports-color": {
       "version": "2.0.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.0"
@@ -4991,27 +4925,6 @@
         "jsesc": "bin/jsesc"
       }
     },
-    "node_modules/babel-helper-function-name": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz",
-      "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=",
-      "dependencies": {
-        "babel-helper-get-function-arity": "^6.24.1",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1",
-        "babel-traverse": "^6.24.1",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "node_modules/babel-helper-get-function-arity": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz",
-      "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=",
-      "dependencies": {
-        "babel-runtime": "^6.22.0",
-        "babel-types": "^6.24.1"
-      }
-    },
     "node_modules/babel-helpers": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
@@ -5155,6 +5068,7 @@
     },
     "node_modules/babel-messages": {
       "version": "6.23.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "babel-runtime": "^6.22.0"
@@ -5252,22 +5166,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-plugin-syntax-class-properties": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
-      "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
-    },
-    "node_modules/babel-plugin-transform-class-properties": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz",
-      "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=",
-      "dependencies": {
-        "babel-helper-function-name": "^6.24.1",
-        "babel-plugin-syntax-class-properties": "^6.8.0",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1"
-      }
-    },
     "node_modules/babel-plugin-transform-es2015-modules-commonjs": {
       "version": "6.26.2",
       "dev": true,
@@ -5355,6 +5253,7 @@
     },
     "node_modules/babel-runtime": {
       "version": "6.26.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "core-js": "^2.4.0",
@@ -5363,10 +5262,12 @@
     },
     "node_modules/babel-runtime/node_modules/regenerator-runtime": {
       "version": "0.11.1",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/babel-template": {
       "version": "6.26.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "babel-runtime": "^6.26.0",
@@ -5378,6 +5279,7 @@
     },
     "node_modules/babel-traverse": {
       "version": "6.26.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "babel-code-frame": "^6.26.0",
@@ -5393,6 +5295,7 @@
     },
     "node_modules/babel-traverse/node_modules/debug": {
       "version": "2.6.9",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
@@ -5400,6 +5303,7 @@
     },
     "node_modules/babel-traverse/node_modules/globals": {
       "version": "9.18.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5407,6 +5311,7 @@
     },
     "node_modules/babel-types": {
       "version": "6.26.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "babel-runtime": "^6.26.0",
@@ -5417,6 +5322,7 @@
     },
     "node_modules/babel-types/node_modules/to-fast-properties": {
       "version": "1.0.3",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5424,6 +5330,7 @@
     },
     "node_modules/babylon": {
       "version": "6.18.0",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "babylon": "bin/babylon.js"
@@ -7238,6 +7145,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/date-format-parse": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
+      "integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
+    },
     "node_modules/dayjs": {
       "version": "1.11.2",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
@@ -7989,6 +7901,7 @@
     },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.0"
@@ -8891,6 +8804,7 @@
     },
     "node_modules/esutils": {
       "version": "2.0.2",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9398,12 +9312,35 @@
       "license": "ISC",
       "peer": true
     },
-    "node_modules/focus-trap": {
-      "version": "6.9.4",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz",
-      "integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==",
+    "node_modules/floating-vue": {
+      "version": "1.0.0-beta.18",
+      "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-1.0.0-beta.18.tgz",
+      "integrity": "sha512-mRFc78szc1BTbhlCa4okb7wAGPuH/IID+yqJ+yrTMQ038H8WIAsPV/WFgWCaXqe8d1Z12LkMqiHDVorCJy8M2A==",
       "dependencies": {
-        "tabbable": "^5.3.3"
+        "@floating-ui/dom": "^0.1.10",
+        "vue-resize": "^1.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.10"
+      }
+    },
+    "node_modules/floating-vue/node_modules/vue-resize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+      "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.0"
+      }
+    },
+    "node_modules/focus-trap": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.0.0.tgz",
+      "integrity": "sha512-uT4Bl8TwU+5vVAx/DHil/1eVS54k9unqhK/vGy2KSh7esPmqgC0koAB9J2sJ+vtj8+vmiFyGk2unLkhNLQaxoA==",
+      "dependencies": {
+        "tabbable": "^6.0.0"
       }
     },
     "node_modules/follow-redirects": {
@@ -9857,6 +9794,7 @@
     },
     "node_modules/has-ansi": {
       "version": "2.0.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^2.0.0"
@@ -10423,6 +10361,7 @@
     },
     "node_modules/invariant": {
       "version": "2.2.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.0.0"
@@ -13493,12 +13432,13 @@
       }
     },
     "node_modules/md5": {
-      "version": "2.2.1",
-      "license": "BSD-3-Clause",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
       "dependencies": {
-        "charenc": "~0.0.1",
-        "crypt": "~0.0.1",
-        "is-buffer": "~1.1.1"
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
       }
     },
     "node_modules/md5.js": {
@@ -14092,6 +14032,7 @@
     },
     "node_modules/ms": {
       "version": "2.0.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/multicast-dns": {
@@ -16690,9 +16631,9 @@
       }
     },
     "node_modules/splitpanes": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.3.8.tgz",
-      "integrity": "sha512-eM/qZ1v7U5BMV8FQR7oeqVlllz3sTGTm0//g/eJMa0hZ4s+A1VK68j26FWzcaVlw2P5+dCXk7/X6ZRjjwcbrgw=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.4.1.tgz",
+      "integrity": "sha512-kpEo1WuMXuc6QfdQdO2V/fl/trONlkUKp+pputsLTiW9RMtwEvjb4/aYGm2m3+KAzjmb+zLwr4A4SYZu74+pgQ=="
     },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
@@ -16927,6 +16868,7 @@
     },
     "node_modules/strip-ansi": {
       "version": "3.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^2.0.0"
@@ -16980,6 +16922,8 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
       "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "dev": true,
+      "peer": true,
       "engines": {
         "node": ">= 12.13.0"
       },
@@ -17358,9 +17302,9 @@
       "peer": true
     },
     "node_modules/tabbable": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
-      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.0.0.tgz",
+      "integrity": "sha512-SxhZErfHc3Yozz/HLAl/iPOxuIj8AtUw13NRewVOjFW7vbsqT1f3PuiHrPQbUkRcLNEgAedAv2DnjLtzynJXiw=="
     },
     "node_modules/table": {
       "version": "6.8.0",
@@ -18080,8 +18024,9 @@
       }
     },
     "node_modules/v-click-outside": {
-      "version": "3.0.1",
-      "license": "MIT",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-3.2.0.tgz",
+      "integrity": "sha512-QD0bDy38SHJXQBjgnllmkI/rbdiwmq9RC+/+pvrFjYJKTn8dtp7Penf9q1lLBta280fYG2q53mgLhQ+3l3z74w==",
       "engines": {
         "node": ">=6"
       }
@@ -18199,11 +18144,11 @@
       "peer": true
     },
     "node_modules/vue": {
-      "version": "2.7.8",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.8.tgz",
-      "integrity": "sha512-ncwlZx5qOcn754bCu5/tS/IWPhXHopfit79cx+uIlLMyt3vCMGcXai5yCG5y+I6cDmEj4ukRYyZail9FTQh7lQ==",
+      "version": "2.7.9",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.9.tgz",
+      "integrity": "sha512-GeWCvAUkjzD5q4A3vgi8ka5r9bM6g8fmNmx/9VnHDKCaEzBcoVw+7UcQktZHrJ2jhlI+Zv8L57pMCIwM4h4MWg==",
       "dependencies": {
-        "@vue/compiler-sfc": "2.7.8",
+        "@vue/compiler-sfc": "2.7.9",
         "csstype": "^3.1.0"
       }
     },
@@ -18223,8 +18168,9 @@
       "license": "MIT"
     },
     "node_modules/vue-color": {
-      "version": "2.7.1",
-      "license": "MIT",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
+      "integrity": "sha512-BoLCEHisXi2QgwlhZBg9UepvzZZmi4176vbr+31Shen5WWZwSLVgdScEPcB+yrAtuHAz42309C0A4+WiL9lNBw==",
       "dependencies": {
         "clamp": "^1.0.1",
         "lodash.throttle": "^4.0.0",
@@ -18447,9 +18393,9 @@
       }
     },
     "node_modules/vue-template-compiler": {
-      "version": "2.7.8",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.8.tgz",
-      "integrity": "sha512-eQqdcUpJKJpBRPDdxCNsqUoT0edNvdt1jFjtVnVS/LPPmr0BU2jWzXlrf6BVMeODtdLewB3j8j3WjNiB+V+giw==",
+      "version": "2.7.9",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.9.tgz",
+      "integrity": "sha512-NPJxt6OjVlzmkixYg0SdIN2Lw/rMryQskObY89uAMcM9flS/HrmLK5LaN1ReBTuhBgnYuagZZEkSS6FESATQUQ==",
       "dev": true,
       "dependencies": {
         "de-indent": "^1.0.2",
@@ -18478,19 +18424,16 @@
       "license": "MIT"
     },
     "node_modules/vue2-datepicker": {
-      "version": "3.8.2",
-      "license": "MIT",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.11.0.tgz",
+      "integrity": "sha512-zbMkAjYwDTXZozZtkpSwqxq7nEeBt7zoHL+oQcdjEXAqzJHhmatE6sl6JSr58PMIx2WOK0c6QBXozSqT32iQAQ==",
       "dependencies": {
-        "date-format-parse": "^0.2.6"
+        "date-format-parse": "^0.2.7"
       },
       "peerDependencies": {
         "vue": "^2.5.0"
       }
     },
-    "node_modules/vue2-datepicker/node_modules/date-format-parse": {
-      "version": "0.2.6",
-      "license": "MIT"
-    },
     "node_modules/vuex": {
       "version": "3.6.2",
       "license": "MIT",
@@ -20556,6 +20499,19 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
+      "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
+    },
+    "@floating-ui/dom": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
+      "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+      "requires": {
+        "@floating-ui/core": "^0.3.0"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -21295,7 +21251,9 @@
       "requires": {}
     },
     "@nextcloud/capabilities": {
-      "version": "1.0.2",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@nextcloud/capabilities/-/capabilities-1.0.4.tgz",
+      "integrity": "sha512-xsmwPPUJ8NN7YfLcq0gpDTibeb9lMBvY/bffMFnHcZi8hMGOouPiEY+CWAgJ5I9W6I2vNeacHUuTanEN5Ncb2A==",
       "requires": {
         "@nextcloud/initial-state": "^1.1.2",
         "core-js": "^3.6.4"
@@ -21416,12 +21374,11 @@
       }
     },
     "@nextcloud/logger": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/logger/-/logger-2.0.0.tgz",
-      "integrity": "sha512-C3vb8I1z67c5FhSWUNB21U6gzzD7RVgjyVUeK+QVz5nYQt1UWTp9yGyqE8G+R5QAyFFWfuOw1RHHkHJ/CWQ4YA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/logger/-/logger-2.2.1.tgz",
+      "integrity": "sha512-MP2/5ZdjDfcTPO5ASfqV5fVU6TYeaa2QOsi2yXBHrmlJ34+HlDdsoVzDGPrbutGCToAuBDSu7nh0WW2aLOp/9A==",
       "requires": {
         "@nextcloud/auth": "^1.2.2",
-        "babel-plugin-transform-class-properties": "^6.24.1",
         "core-js": "^3.6.4"
       },
       "dependencies": {
@@ -21446,9 +21403,9 @@
           }
         },
         "core-js": {
-          "version": "3.16.3",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.3.tgz",
-          "integrity": "sha512-lM3GftxzHNtPNUJg0v4pC2RC6puwMd6VZA7vXUczi+SKmCWSf4JwO89VJGMqbzmB7jlK7B5hr3S64PqwFL49cA=="
+          "version": "3.24.1",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.24.1.tgz",
+          "integrity": "sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg=="
         },
         "lru-cache": {
           "version": "6.0.0",
@@ -21519,157 +21476,88 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-5.4.0.tgz",
-      "integrity": "sha512-YybOMuStBKtCwbssxMNEd0A8k/Qr5+zm9vnSOaLaMxeB8iaUU+PgBNiYGo8O24UJjSS6FqFwg02V4XzI1Sd6Lw==",
+      "version": "6.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0-beta.4.tgz",
+      "integrity": "sha512-1TdzH0++/gIcBzot8iNT3AnweR/1EykpCfBwkJNhMgoiY4HlMLxBj7bpe2D4ul24XTCoXVEdGMYyB32GNVc9WA==",
       "requires": {
-        "@nextcloud/auth": "^1.2.3",
-        "@nextcloud/axios": "^1.3.2",
+        "@nextcloud/auth": "^2.0.0",
+        "@nextcloud/axios": "^2.0.0",
         "@nextcloud/browser-storage": "^0.1.1",
         "@nextcloud/calendar-js": "^3.0.0",
-        "@nextcloud/capabilities": "^1.0.2",
-        "@nextcloud/dialogs": "^3.0.0",
-        "@nextcloud/event-bus": "^2.0.0",
-        "@nextcloud/l10n": "^1.2.3",
-        "@nextcloud/logger": "^2.0.0",
+        "@nextcloud/capabilities": "^1.0.4",
+        "@nextcloud/dialogs": "^3.1.4",
+        "@nextcloud/event-bus": "^3.0.0",
+        "@nextcloud/l10n": "^1.6.0",
+        "@nextcloud/logger": "^2.2.1",
         "@nextcloud/router": "^2.0.0",
         "debounce": "1.2.1",
-        "emoji-mart-vue-fast": "^10.2.1",
+        "emoji-mart-vue-fast": "^11.1.1",
         "escape-html": "^1.0.3",
-        "focus-trap": "^6.8.1",
+        "floating-vue": "^1.0.0-beta.18",
+        "focus-trap": "^7.0.0",
         "hammerjs": "^2.0.8",
-        "linkify-string": "^3.0.2",
-        "md5": "^2.2.1",
-        "splitpanes": "^2.3.6",
-        "string-length": "^5.0.0",
-        "striptags": "^3.1.1",
-        "style-loader": "^3.3.1",
+        "linkify-string": "^3.0.4",
+        "md5": "^2.3.0",
+        "splitpanes": "^2.4.1",
+        "string-length": "^5.0.1",
+        "striptags": "^3.2.0",
         "tributejs": "^5.1.3",
-        "v-click-outside": "^3.0.1",
-        "v-tooltip": "^2.0.3",
-        "vue": "^2.6.14",
-        "vue-color": "^2.7.1",
-        "vue-material-design-icons": "^5.0.0",
+        "v-click-outside": "^3.2.0",
+        "vue": "^2.7.8",
+        "vue-color": "^2.8.1",
+        "vue-material-design-icons": "^5.1.2",
         "vue-multiselect": "^2.1.6",
-        "vue2-datepicker": "^3.6.3"
+        "vue2-datepicker": "^3.11.0"
       },
       "dependencies": {
-        "@nextcloud/auth": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-1.3.0.tgz",
-          "integrity": "sha512-GfwRM9W7hat4psNdAt74UHEV+drEXQ53klCVp6JpON66ZLPeK5eJ1LQuiQDkpUxZpqNeaumXjiB98h5cug/uQw==",
-          "requires": {
-            "@nextcloud/event-bus": "^1.1.3",
-            "@nextcloud/typings": "^0.2.2",
-            "core-js": "^3.6.4"
-          },
-          "dependencies": {
-            "@nextcloud/event-bus": {
-              "version": "1.3.0",
-              "resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-1.3.0.tgz",
-              "integrity": "sha512-+U5MnCvfnNWvf0lvdqJg8F+Nm8wN+s9ayuBjtiEQxTAcootv7lOnlMgfreqF3l2T0Wet2uZh4JbFVUWf8l3w7g==",
-              "requires": {
-                "@types/semver": "^7.3.5",
-                "core-js": "^3.11.2",
-                "semver": "^7.3.5"
-              }
-            }
-          }
-        },
-        "@nextcloud/axios": {
-          "version": "1.11.0",
-          "resolved": "https://registry.npmjs.org/@nextcloud/axios/-/axios-1.11.0.tgz",
-          "integrity": "sha512-NyaiSC2GX2CPaH/MUGGMTTTza/TW9ZqWNGWq6LJ+pLER8nqZ9BQkwJ5kXUYGo+i3cka68PO+9WhcDv4fSABpuQ==",
-          "requires": {
-            "@nextcloud/auth": "^1.3.0",
-            "axios": "^0.27.1",
-            "core-js": "^3.6.4"
-          }
-        },
-        "@nextcloud/event-bus": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-2.1.1.tgz",
-          "integrity": "sha512-YEui6N+23uyjBSIUZhf8rEjG9vol7UGgxcgxMddEbO0HS7M/sh1cocRqtn+ZVi/yPybeToGmt68SDPCgwHQHKw==",
-          "requires": {
-            "@types/semver": "^7.1.0",
-            "core-js": "^3.6.2",
-            "semver": "^7.3.2"
-          }
-        },
         "ansi-regex": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.0.tgz",
-          "integrity": "sha512-tAaOSrWCHF+1Ear1Z4wnJCXA9GGox4K6Ic85a5qalES2aeEwQGr7UC93mwef49536PkCYjzkp0zIxfFvexJ6zQ=="
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
         },
         "char-regex": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.0.tgz",
-          "integrity": "sha512-oGu2QekBMXgyQNWPDRQ001bjvDnZe4/zBTz37TMbiKz1NbNiyiH5hRkobe7npRN6GfbGbxMYFck/vQ1r9c1VMA=="
-        },
-        "core-js": {
-          "version": "3.24.1",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.24.1.tgz",
-          "integrity": "sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg=="
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz",
+          "integrity": "sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw=="
         },
         "emoji-mart-vue-fast": {
-          "version": "10.2.1",
-          "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-10.2.1.tgz",
-          "integrity": "sha512-PtKihhsXBEEw1jHwnoRyJAnJP1OlK4EJrEze58EbUUV7iHWGLub+yuiNSj2Uo1JBHraz4fw/pH98nFysVoe0qg==",
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-11.1.1.tgz",
+          "integrity": "sha512-mMN49N2lCQCjanSzLYBS1PlBO+7Do092FnrsWwogwmOo4p+L8N3L8TjcDk30ByXMCjSEcCDsjupCxIcaBpVNKg==",
           "requires": {
             "@babel/polyfill": "^7.12.1",
-            "@babel/runtime": "^7.16.3",
+            "@babel/runtime": "^7.18.6",
             "vue-virtual-scroller": "^1.0.10"
           }
         },
         "linkify-string": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-3.0.2.tgz",
-          "integrity": "sha512-e6sa4WYslcwuNA0ciRo7KPAb4VpTIOxsGPAXeSR8XlORtKak8WMleuvrt5iRZwulHAd6dI+BO7b94lNW8lbMUQ==",
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-3.0.4.tgz",
+          "integrity": "sha512-OnNqqRjlYXaXipIAbBC8sDXsSumI1ftatzFg141Pw9HEXWjTVLFcMZoKbFupshqWRavtNJ6QHLa+u6AlxxgeRw==",
           "requires": {}
         },
         "linkifyjs": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.1.tgz",
-          "integrity": "sha512-HwXVwdNH1wESBfo2sH7Bkl+ywzbGA3+uJEfhquCyi/bMCa49bFUvd/re1NT1Lox/5jdnpQXzI9O/jykit71idg==",
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.5.tgz",
+          "integrity": "sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg==",
           "peer": true
         },
-        "lru-cache": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-          "requires": {
-            "yallist": "^4.0.0"
-          }
-        },
-        "semver": {
-          "version": "7.3.7",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        },
         "string-length": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.0.tgz",
-          "integrity": "sha512-1qjpci3h1G7BUi6dt5uAVyrO2FMUdjj3XWU970/eQh0YKhlYZ8bJMC/+BUpD21YdEhmuHv2nnbUUn024+cC7YQ==",
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+          "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
           "requires": {
             "char-regex": "^2.0.0",
-            "strip-ansi": "^7.0.0"
+            "strip-ansi": "^7.0.1"
           }
         },
         "strip-ansi": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.0.tgz",
-          "integrity": "sha512-UhDTSnGF1dc0DRbUqr1aXwNoY3RgVkSWG8BrpnuFIxhP57IqbS7IRta2Gfiavds4yCxc5+fEAVVOgBZWnYkvzg==",
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+          "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
           "requires": {
-            "ansi-regex": "^6.0.0"
+            "ansi-regex": "^6.0.1"
           }
-        },
-        "yallist": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         }
       }
     },
@@ -22260,9 +22148,9 @@
       }
     },
     "@vue/compiler-sfc": {
-      "version": "2.7.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.8.tgz",
-      "integrity": "sha512-2DK4YWKfgLnW9VDR9gnju1gcYRk3flKj8UNsms7fsRmFcg35slVTZEkqwBtX+wJBXaamFfn6NxSsZh3h12Ix/Q==",
+      "version": "2.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.9.tgz",
+      "integrity": "sha512-TD2FvT0fPUezw5RVP4tfwTZnKHP0QjeEUb39y7tORvOJQTjbOuHJEk4GPHUPsRaTeQ8rjuKjntyrYcEIx+ODxg==",
       "requires": {
         "@babel/parser": "^7.18.4",
         "postcss": "^8.4.14",
@@ -22270,9 +22158,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "8.4.14",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-          "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+          "version": "8.4.16",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+          "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
           "requires": {
             "nanoid": "^3.3.4",
             "picocolors": "^1.0.0",
@@ -22634,7 +22522,8 @@
       "peer": true
     },
     "ansi-regex": {
-      "version": "2.1.1"
+      "version": "2.1.1",
+      "dev": true
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -22830,6 +22719,7 @@
     },
     "babel-code-frame": {
       "version": "6.26.0",
+      "dev": true,
       "requires": {
         "chalk": "^1.1.3",
         "esutils": "^2.0.2",
@@ -22837,10 +22727,12 @@
       },
       "dependencies": {
         "ansi-styles": {
-          "version": "2.2.1"
+          "version": "2.2.1",
+          "dev": true
         },
         "chalk": {
           "version": "1.1.3",
+          "dev": true,
           "requires": {
             "ansi-styles": "^2.2.1",
             "escape-string-regexp": "^1.0.2",
@@ -22850,10 +22742,12 @@
           }
         },
         "js-tokens": {
-          "version": "3.0.2"
+          "version": "3.0.2",
+          "dev": true
         },
         "supports-color": {
-          "version": "2.0.0"
+          "version": "2.0.0",
+          "dev": true
         }
       }
     },
@@ -22937,27 +22831,6 @@
         }
       }
     },
-    "babel-helper-function-name": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz",
-      "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=",
-      "requires": {
-        "babel-helper-get-function-arity": "^6.24.1",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1",
-        "babel-traverse": "^6.24.1",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "babel-helper-get-function-arity": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz",
-      "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=",
-      "requires": {
-        "babel-runtime": "^6.22.0",
-        "babel-types": "^6.24.1"
-      }
-    },
     "babel-helpers": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
@@ -23064,6 +22937,7 @@
     },
     "babel-messages": {
       "version": "6.23.0",
+      "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -23143,22 +23017,6 @@
         "@babel/helper-define-polyfill-provider": "^0.2.2"
       }
     },
-    "babel-plugin-syntax-class-properties": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
-      "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
-    },
-    "babel-plugin-transform-class-properties": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz",
-      "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=",
-      "requires": {
-        "babel-helper-function-name": "^6.24.1",
-        "babel-plugin-syntax-class-properties": "^6.8.0",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1"
-      }
-    },
     "babel-plugin-transform-es2015-modules-commonjs": {
       "version": "6.26.2",
       "dev": true,
@@ -23237,18 +23095,21 @@
     },
     "babel-runtime": {
       "version": "6.26.0",
+      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
       },
       "dependencies": {
         "regenerator-runtime": {
-          "version": "0.11.1"
+          "version": "0.11.1",
+          "dev": true
         }
       }
     },
     "babel-template": {
       "version": "6.26.0",
+      "dev": true,
       "requires": {
         "babel-runtime": "^6.26.0",
         "babel-traverse": "^6.26.0",
@@ -23259,6 +23120,7 @@
     },
     "babel-traverse": {
       "version": "6.26.0",
+      "dev": true,
       "requires": {
         "babel-code-frame": "^6.26.0",
         "babel-messages": "^6.23.0",
@@ -23273,17 +23135,20 @@
       "dependencies": {
         "debug": {
           "version": "2.6.9",
+          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
         },
         "globals": {
-          "version": "9.18.0"
+          "version": "9.18.0",
+          "dev": true
         }
       }
     },
     "babel-types": {
       "version": "6.26.0",
+      "dev": true,
       "requires": {
         "babel-runtime": "^6.26.0",
         "esutils": "^2.0.2",
@@ -23292,12 +23157,14 @@
       },
       "dependencies": {
         "to-fast-properties": {
-          "version": "1.0.3"
+          "version": "1.0.3",
+          "dev": true
         }
       }
     },
     "babylon": {
-      "version": "6.18.0"
+      "version": "6.18.0",
+      "dev": true
     },
     "bail": {
       "version": "1.0.5"
@@ -24658,6 +24525,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-format-parse": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
+      "integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
+    },
     "dayjs": {
       "version": "1.11.2",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
@@ -25248,7 +25120,8 @@
       "version": "1.0.3"
     },
     "escape-string-regexp": {
-      "version": "1.0.5"
+      "version": "1.0.5",
+      "dev": true
     },
     "eslint": {
       "version": "8.14.0",
@@ -25893,7 +25766,8 @@
       "peer": true
     },
     "esutils": {
-      "version": "2.0.2"
+      "version": "2.0.2",
+      "dev": true
     },
     "etag": {
       "version": "1.8.1",
@@ -26284,12 +26158,31 @@
         }
       }
     },
-    "focus-trap": {
-      "version": "6.9.4",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz",
-      "integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==",
+    "floating-vue": {
+      "version": "1.0.0-beta.18",
+      "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-1.0.0-beta.18.tgz",
+      "integrity": "sha512-mRFc78szc1BTbhlCa4okb7wAGPuH/IID+yqJ+yrTMQ038H8WIAsPV/WFgWCaXqe8d1Z12LkMqiHDVorCJy8M2A==",
       "requires": {
-        "tabbable": "^5.3.3"
+        "@floating-ui/dom": "^0.1.10",
+        "vue-resize": "^1.0.0"
+      },
+      "dependencies": {
+        "vue-resize": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+          "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        }
+      }
+    },
+    "focus-trap": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.0.0.tgz",
+      "integrity": "sha512-uT4Bl8TwU+5vVAx/DHil/1eVS54k9unqhK/vGy2KSh7esPmqgC0koAB9J2sJ+vtj8+vmiFyGk2unLkhNLQaxoA==",
+      "requires": {
+        "tabbable": "^6.0.0"
       }
     },
     "follow-redirects": {
@@ -26601,6 +26494,7 @@
     },
     "has-ansi": {
       "version": "2.0.0",
+      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -27007,6 +26901,7 @@
     },
     "invariant": {
       "version": "2.2.4",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -29212,11 +29107,13 @@
       "peer": true
     },
     "md5": {
-      "version": "2.2.1",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
       "requires": {
-        "charenc": "~0.0.1",
-        "crypt": "~0.0.1",
-        "is-buffer": "~1.1.1"
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
       }
     },
     "md5.js": {
@@ -29640,7 +29537,8 @@
       "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
     },
     "ms": {
-      "version": "2.0.0"
+      "version": "2.0.0",
+      "dev": true
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -31571,9 +31469,9 @@
       "peer": true
     },
     "splitpanes": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.3.8.tgz",
-      "integrity": "sha512-eM/qZ1v7U5BMV8FQR7oeqVlllz3sTGTm0//g/eJMa0hZ4s+A1VK68j26FWzcaVlw2P5+dCXk7/X6ZRjjwcbrgw=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.4.1.tgz",
+      "integrity": "sha512-kpEo1WuMXuc6QfdQdO2V/fl/trONlkUKp+pputsLTiW9RMtwEvjb4/aYGm2m3+KAzjmb+zLwr4A4SYZu74+pgQ=="
     },
     "sprintf-js": {
       "version": "1.0.3",
@@ -31761,6 +31659,7 @@
     },
     "strip-ansi": {
       "version": "3.0.1",
+      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -31794,6 +31693,8 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
       "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "dev": true,
+      "peer": true,
       "requires": {}
     },
     "style-search": {
@@ -32065,9 +31966,9 @@
       "peer": true
     },
     "tabbable": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
-      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.0.0.tgz",
+      "integrity": "sha512-SxhZErfHc3Yozz/HLAl/iPOxuIj8AtUw13NRewVOjFW7vbsqT1f3PuiHrPQbUkRcLNEgAedAv2DnjLtzynJXiw=="
     },
     "table": {
       "version": "6.8.0",
@@ -32600,7 +32501,9 @@
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "v-click-outside": {
-      "version": "3.0.1"
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-3.2.0.tgz",
+      "integrity": "sha512-QD0bDy38SHJXQBjgnllmkI/rbdiwmq9RC+/+pvrFjYJKTn8dtp7Penf9q1lLBta280fYG2q53mgLhQ+3l3z74w=="
     },
     "v-tooltip": {
       "version": "2.0.3",
@@ -32686,11 +32589,11 @@
       "peer": true
     },
     "vue": {
-      "version": "2.7.8",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.8.tgz",
-      "integrity": "sha512-ncwlZx5qOcn754bCu5/tS/IWPhXHopfit79cx+uIlLMyt3vCMGcXai5yCG5y+I6cDmEj4ukRYyZail9FTQh7lQ==",
+      "version": "2.7.9",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.9.tgz",
+      "integrity": "sha512-GeWCvAUkjzD5q4A3vgi8ka5r9bM6g8fmNmx/9VnHDKCaEzBcoVw+7UcQktZHrJ2jhlI+Zv8L57pMCIwM4h4MWg==",
       "requires": {
-        "@vue/compiler-sfc": "2.7.8",
+        "@vue/compiler-sfc": "2.7.9",
         "csstype": "^3.1.0"
       }
     },
@@ -32704,7 +32607,9 @@
       "version": "1.1.0"
     },
     "vue-color": {
-      "version": "2.7.1",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
+      "integrity": "sha512-BoLCEHisXi2QgwlhZBg9UepvzZZmi4176vbr+31Shen5WWZwSLVgdScEPcB+yrAtuHAz42309C0A4+WiL9lNBw==",
       "requires": {
         "clamp": "^1.0.1",
         "lodash.throttle": "^4.0.0",
@@ -32871,9 +32776,9 @@
       }
     },
     "vue-template-compiler": {
-      "version": "2.7.8",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.8.tgz",
-      "integrity": "sha512-eQqdcUpJKJpBRPDdxCNsqUoT0edNvdt1jFjtVnVS/LPPmr0BU2jWzXlrf6BVMeODtdLewB3j8j3WjNiB+V+giw==",
+      "version": "2.7.9",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.9.tgz",
+      "integrity": "sha512-NPJxt6OjVlzmkixYg0SdIN2Lw/rMryQskObY89uAMcM9flS/HrmLK5LaN1ReBTuhBgnYuagZZEkSS6FESATQUQ==",
       "dev": true,
       "requires": {
         "de-indent": "^1.0.2",
@@ -32896,14 +32801,11 @@
       "version": "1.0.2"
     },
     "vue2-datepicker": {
-      "version": "3.8.2",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.11.0.tgz",
+      "integrity": "sha512-zbMkAjYwDTXZozZtkpSwqxq7nEeBt7zoHL+oQcdjEXAqzJHhmatE6sl6JSr58PMIx2WOK0c6QBXozSqT32iQAQ==",
       "requires": {
-        "date-format-parse": "^0.2.6"
-      },
-      "dependencies": {
-        "date-format-parse": {
-          "version": "0.2.6"
-        }
+        "date-format-parse": "^0.2.7"
       }
     },
     "vuex": {
diff --git a/package.json b/package.json
index 89a40f83e..76630f4c5 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "@nextcloud/l10n": "^1.6.0",
     "@nextcloud/moment": "^1.2.1",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue": "^5.4.0",
+    "@nextcloud/vue": "^6.0.0-beta.4",
     "@nextcloud/vue-dashboard": "^2.0.1",
     "blueimp-md5": "^2.19.0",
     "dompurify": "^2.3.10",
@@ -52,7 +52,7 @@
     "nextcloud-vue-collections": "^0.10.0",
     "p-queue": "^7.3.0",
     "url-search-params-polyfill": "^8.1.1",
-    "vue": "^2.7.8",
+    "vue": "^2.7.9",
     "vue-at": "^2.5.0",
     "vue-click-outside": "^1.1.0",
     "vue-easymde": "^2.0.0",
@@ -82,7 +82,7 @@
     "jest": "^28.1.3",
     "jest-serializer-vue": "^2.0.2",
     "vue-jest": "^3.0.7",
-    "vue-template-compiler": "^2.7.8"
+    "vue-template-compiler": "^2.7.9"
   },
   "jest": {
     "moduleFileExtensions": [
diff --git a/src/App.vue b/src/App.vue
index b1d044f38..1f2e6e90f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,13 +21,13 @@
  -->
 
 <template>
-	<Content id="content" app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
+	<NcContent id="content" app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
 		<AppNavigation />
-		<AppContent>
+		<NcAppContent>
 			<router-view />
-		</AppContent>
+		</NcAppContent>
 
-		<Modal v-if="cardDetailsInModal && $route.params.cardId"
+		<NcModal v-if="cardDetailsInModal && $route.params.cardId"
 			:clear-view-delay="0"
 			:title="t('deck', 'Card details')"
 			size="large"
@@ -35,16 +35,16 @@
 			<div class="modal__content modal__card">
 				<router-view name="sidebar" />
 			</div>
-		</Modal>
+		</NcModal>
 
 		<router-view name="sidebar" :visible="!cardDetailsInModal || !$route.params.cardId" />
-	</Content>
+	</NcContent>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import AppNavigation from './components/navigation/AppNavigation'
-import { Modal, Content, AppContent } from '@nextcloud/vue'
+import { NcModal, NcContent, NcAppContent } from '@nextcloud/vue'
 import { BoardApi } from './services/BoardApi'
 import { emit, subscribe } from '@nextcloud/event-bus'
 
@@ -54,9 +54,9 @@ export default {
 	name: 'App',
 	components: {
 		AppNavigation,
-		Modal,
-		Content,
-		AppContent,
+		NcModal,
+		NcContent,
+		NcAppContent,
 	},
 	provide() {
 		return {
diff --git a/src/BoardSelector.vue b/src/BoardSelector.vue
index 9e7140b9e..25d6b2bfd 100644
--- a/src/BoardSelector.vue
+++ b/src/BoardSelector.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Modal @close="close">
+	<NcModal @close="close">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
 			<h1>{{ t('deck', 'Select the board to link to a project') }}</h1>
 			<input v-model="filter" type="text" :placeholder="t('deck', 'Search by board title')">
@@ -38,17 +38,17 @@
 				{{ t('deck', 'Select board') }}
 			</button>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'BoardSelector',
 	components: {
-		Modal,
+		NcModal,
 	},
 	data() {
 		return {
diff --git a/src/CardCreateDialog.vue b/src/CardCreateDialog.vue
index 113e6e867..607813428 100644
--- a/src/CardCreateDialog.vue
+++ b/src/CardCreateDialog.vue
@@ -21,11 +21,11 @@
   -->
 
 <template>
-	<Modal class="card-selector" @close="close">
+	<NcModal class="card-selector" @close="close">
 		<div class="modal-scroller">
 			<div v-if="!creating && !created" id="modal-inner" :class="{ 'icon-loading': loading }">
 				<h3>{{ t('deck', 'Create a new card') }}</h3>
-				<Multiselect v-model="selectedBoard"
+				<NcMultiselect v-model="selectedBoard"
 					:placeholder="t('deck', 'Select a board')"
 					:options="boards"
 					:disabled="loading"
@@ -44,9 +44,9 @@
 							<span>{{ props.option.title }}</span>
 						</span>
 					</template>
-				</Multiselect>
+				</NcMultiselect>
 
-				<Multiselect v-model="selectedStack"
+				<NcMultiselect v-model="selectedStack"
 					:placeholder="t('deck', 'Select a list')"
 					:options="stacksFromBoard"
 					:max-height="100"
@@ -71,10 +71,10 @@
 				</div>
 			</div>
 			<div v-else id="modal-inner">
-				<EmptyContent v-if="creating" icon="icon-loading">
+				<NcEmptyContent v-if="creating" icon="icon-loading">
 					{{ t('deck', 'Creating the new card …') }}
-				</EmptyContent>
-				<EmptyContent v-else-if="created" icon="icon-checkmark">
+				</NcEmptyContent>
+				<NcEmptyContent v-else-if="created" icon="icon-checkmark">
 					{{ t('deck', 'Card "{card}" was added to "{board}"', { card: pendingTitle, board: selectedBoard.title }) }}
 					<template #desc>
 						<button class="primary" @click="openNewCard">
@@ -84,17 +84,17 @@
 							{{ t('deck', 'Close') }}
 						</button>
 					</template>
-				</EmptyContent>
+				</NcEmptyContent>
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
 import axios from '@nextcloud/axios'
 import { CardApi } from './services/CardApi'
 
@@ -103,9 +103,9 @@ const cardApi = new CardApi()
 export default {
 	name: 'CardCreateDialog',
 	components: {
-		EmptyContent,
-		Modal,
-		Multiselect,
+		NcEmptyContent,
+		NcModal,
+		NcMultiselect,
 	},
 	props: {
 		title: {
diff --git a/src/CardSelector.vue b/src/CardSelector.vue
index cd586cb86..ee5a8091b 100644
--- a/src/CardSelector.vue
+++ b/src/CardSelector.vue
@@ -21,10 +21,10 @@
   -->
 
 <template>
-	<Modal class="card-selector" @close="close">
+	<NcModal class="card-selector" @close="close">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
 			<h3>{{ title }}</h3>
-			<Multiselect v-model="selectedBoard"
+			<NcMultiselect v-model="selectedBoard"
 				:placeholder="t('deck', 'Select a board')"
 				:options="boards"
 				:disabled="loading"
@@ -42,9 +42,9 @@
 						<span>{{ props.option.title }}</span>
 					</span>
 				</template>
-			</Multiselect>
+			</NcMultiselect>
 
-			<Multiselect v-model="selectedCard"
+			<NcMultiselect v-model="selectedCard"
 				:placeholder="t('deck', 'Select a card')"
 				:options="cardsFromBoard"
 				:disabled="loading || selectedBoard === ''"
@@ -57,20 +57,20 @@
 				{{ t('deck', 'Cancel') }}
 			</button>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import axios from '@nextcloud/axios'
 
 export default {
 	name: 'CardSelector',
 	components: {
-		Modal,
-		Multiselect,
+		NcModal,
+		NcMultiselect,
 	},
 	props: {
 		title: {
diff --git a/src/components/ActivityEntry.vue b/src/components/ActivityEntry.vue
index a88dee680..b6f289b63 100644
--- a/src/components/ActivityEntry.vue
+++ b/src/components/ActivityEntry.vue
@@ -36,7 +36,7 @@
 
 <script>
 import RichText from '@juliushaertl/vue-richtext'
-import { UserBubble } from '@nextcloud/vue'
+import { NcUserBubble } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import DOMPurify from 'dompurify'
 import relativeDate from '../mixins/relativeDate'
@@ -93,7 +93,7 @@ export default {
 					break
 				case 'user':
 					parameters[key] = {
-						component: UserBubble,
+						component: NcUserBubble,
 						props: {
 							user: parameters[key].id,
 							displayName: parameters[key].name,
diff --git a/src/components/AttachmentDragAndDrop.vue b/src/components/AttachmentDragAndDrop.vue
index 37f31722c..d5487e285 100644
--- a/src/components/AttachmentDragAndDrop.vue
+++ b/src/components/AttachmentDragAndDrop.vue
@@ -41,7 +41,7 @@
 			</div>
 		</transition>
 
-		<Modal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
+		<NcModal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
 			<div class="modal__content">
 				<h2>{{ t('deck', 'File already exists') }}</h2>
 				<p>
@@ -57,12 +57,12 @@
 					{{ t('deck', 'Keep existing file') }}
 				</button>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
 <script>
-import { Modal } from '@nextcloud/vue'
+import { NcModal } from '@nextcloud/vue'
 import attachmentUpload from '../mixins/attachmentUpload'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -75,7 +75,7 @@ try {
 
 export default {
 	name: 'AttachmentDragAndDrop',
-	components: { Modal },
+	components: { NcModal },
 	mixins: [attachmentUpload],
 	props: {
 		cardId: {
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index 081dc97df..bc0701a7e 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -25,11 +25,11 @@
 		<div v-if="overviewName" class="board-title">
 			<div class="board-bullet icon-calendar-dark" />
 			<h2>{{ overviewName }}</h2>
-			<Actions>
-				<ActionButton icon="icon-add" @click="clickShowAddCardModel">
+			<NcActions>
+				<NcActionButton icon="icon-add" @click="clickShowAddCardModel">
 					{{ t('deck', 'Add card') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 			<CardCreateDialog v-if="showAddCardModal" @close="clickHideAddCardModel" />
 		</div>
 		<div v-else-if="board" class="board-title">
@@ -49,11 +49,11 @@
 			<div v-if="board && canManage && !showArchived && !board.archived"
 				id="stack-add"
 				v-click-outside="hideAddStack">
-				<Actions v-if="!isAddStackVisible">
-					<ActionButton icon="icon-add" @click.stop="showAddStack">
+				<NcActions v-if="!isAddStackVisible">
+					<NcActionButton icon="icon-add" @click.stop="showAddStack">
 						{{ t('deck', 'Add list') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 				<form v-else @submit.prevent="addNewStack()">
 					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add list') }}</label>
 					<input id="new-stack-input-main"
@@ -71,13 +71,13 @@
 			</div>
 			<div v-if="board" class="board-action-buttons">
 				<div class="board-action-buttons__filter">
-					<Popover container=".board-action-buttons__filter"
+					<NcPopover container=".board-action-buttons__filter"
 						:placement="'bottom-end'"
 						:aria-label="t('deck', 'Active filters')"
 						@show="filterVisible=true"
 						@hide="filterVisible=false">
-						<!-- We cannot use Actions here are the popover trigger does not update on reactive icons -->
-						<Button slot="trigger"
+						<!-- We cannot use NcActions here are the popover trigger does not update on reactive icons -->
+						<NcButton slot="trigger"
 							:title="t('deck', 'Apply filter')"
 							class="filter-button"
 							type="tertiary-no-background">
@@ -85,7 +85,7 @@
 								<FilterIcon v-if="isFilterActive" :size="20" decorative />
 								<FilterOffIcon v-else :size="20" decorative />
 							</template>
-						</Button>
+						</NcButton>
 
 						<div v-if="filterVisible" class="filter">
 							<h3>{{ t('deck', 'Filter by tag') }}</h3>
@@ -117,7 +117,7 @@
 									class="checkbox"
 									:value="user.uid"
 									@change="setFilter">
-								<label :for="user.uid"><Avatar :user="user.uid" :size="24" :disable-menu="true" /> {{ user.displayname }}</label>
+								<label :for="user.uid"><NcAvatar :user="user.uid" :size="24" :disable-menu="true" /> {{ user.displayname }}</label>
 							</div>
 
 							<h3>{{ t('deck', 'Filter by due date') }}</h3>
@@ -177,38 +177,38 @@
 								<label for="noDue">{{ t('deck', 'No due date') }}</label>
 							</div>
 
-							<Button :disabled="!isFilterActive" :wide="true" @click="clearFilter">
+							<NcButton :disabled="!isFilterActive" :wide="true" @click="clearFilter">
 								{{ t('deck', 'Clear filter') }}
-							</Button>
+							</NcButton>
 						</div>
-					</Popover>
+					</NcPopover>
 				</div>
 
-				<Actions>
-					<ActionButton @click="toggleShowArchived">
+				<NcActions>
+					<NcActionButton @click="toggleShowArchived">
 						<template #icon>
 							<ArchiveIcon :size="20" decorative />
 						</template>
 						{{ showArchived ? t('deck', 'Hide archived cards') : t('deck', 'Show archived cards') }}
-					</ActionButton>
-					<ActionButton v-if="compactMode"
+					</NcActionButton>
+					<NcActionButton v-if="compactMode"
 						@click="toggleCompactMode">
 						<ArrowExpandVerticalIcon slot="icon" :size="20" decorative />
 						{{ t('deck', 'Toggle compact mode') }}
-					</ActionButton>
-					<ActionButton v-else
+					</NcActionButton>
+					<NcActionButton v-else
 						@click="toggleCompactMode">
 						<ArrowCollapseVerticalIcon slot="icon" :size="20" decorative />
 						{{ t('deck', 'Toggle compact mode') }}
-					</ActionButton>
-				</Actions>
-				<!-- FIXME: ActionRouter currently doesn't work as an inline action -->
-				<Actions>
-					<ActionButton icon="icon-menu-sidebar"
+					</NcActionButton>
+				</NcActions>
+				<!-- FIXME: NcActionRouter currently doesn't work as an inline action -->
+				<NcActions>
+					<NcActionButton icon="icon-menu-sidebar"
 						:aria-label="t('deck', 'Open details')"
 						:title="t('deck', 'Details')"
 						@click="toggleDetailsView" />
-				</Actions>
+				</NcActions>
 			</div>
 		</div>
 	</div>
@@ -216,7 +216,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Actions, ActionButton, Avatar, Button, Popover } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle'
 import CardCreateDialog from '../CardCreateDialog'
 import ArchiveIcon from 'vue-material-design-icons/Archive'
@@ -228,11 +228,11 @@ import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertic
 export default {
 	name: 'Controls',
 	components: {
-		Actions,
-		ActionButton,
-		Button,
-		Popover,
-		Avatar,
+		NcActions,
+		NcActionButton,
+		NcButton,
+		NcPopover,
+		NcAvatar,
 		CardCreateDialog,
 		ArchiveIcon,
 		FilterIcon,
@@ -380,7 +380,7 @@ export default {
 <style lang="scss" scoped>
 	.controls {
 		display: flex;
-		padding: 3px;
+		margin: 5px;
 		height: 44px;
 		padding-left: 44px;
 
@@ -431,6 +431,9 @@ export default {
 	}
 
 	.deck-search {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		input[type=search] {
 			background-position: 5px;
 			padding-left: 24px;
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 07564f8c8..35f55cbc7 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -30,7 +30,7 @@
 				<h2>{{ t('deck', 'Loading board') }}</h2>
 				<p />
 			</div>
-			<EmptyContent v-else-if="isEmpty" key="empty" icon="icon-deck">
+			<NcEmptyContent v-else-if="isEmpty" key="empty" icon="icon-deck">
 				{{ t('deck', 'No lists available') }}
 				<template v-if="canManage" #desc>
 					{{ t('deck', 'Create a new list to add cards to this board') }}
@@ -48,7 +48,7 @@
 							value="">
 					</form>
 				</template>
-			</EmptyContent>
+			</NcEmptyContent>
 			<div v-else-if="!isEmpty && !loading" key="board" class="board">
 				<Container lock-axix="y"
 					orientation="horizontal"
@@ -75,7 +75,7 @@ import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls'
 import Stack from './Stack'
-import { EmptyContent } from '@nextcloud/vue'
+import { NcEmptyContent } from '@nextcloud/vue'
 import GlobalSearchResults from '../search/GlobalSearchResults'
 import { showError } from '../../helpers/errors'
 
@@ -87,7 +87,7 @@ export default {
 		Container,
 		Draggable,
 		Stack,
-		EmptyContent,
+		NcEmptyContent,
 	},
 	inject: [
 		'boardApi',
diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
index 85f29c90f..0a5ddefd2 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -21,40 +21,40 @@
   -->
 
 <template>
-	<AppSidebar v-if="board != null"
+	<NcAppSidebar v-if="board != null"
 		:actions="[]"
 		:title="board.title"
 		@close="closeSidebar">
-		<AppSidebarTab id="sharing"
+		<NcAppSidebarTab id="sharing"
 			:order="0"
 			:name="t('deck', 'Sharing')"
 			icon="icon-shared">
 			<SharingTabSidebar :board="board" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab id="tags"
+		<NcAppSidebarTab id="tags"
 			:order="1"
 			:name="t('deck', 'Tags')"
 			icon="icon-tag">
 			<TagsTabSidebar :board="board" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab v-if="canEdit"
+		<NcAppSidebarTab v-if="canEdit"
 			id="deleted"
 			:order="2"
 			:name="t('deck', 'Deleted items')"
 			icon="icon-delete">
 			<DeletedTabSidebar :board="board" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab v-if="hasActivity"
+		<NcAppSidebarTab v-if="hasActivity"
 			id="activity"
 			:order="3"
 			:name="t('deck', 'Timeline')"
 			icon="icon-activity">
 			<TimelineTabSidebar :board="board" />
-		</AppSidebarTab>
-	</AppSidebar>
+		</NcAppSidebarTab>
+	</NcAppSidebar>
 </template>
 
 <script>
@@ -63,15 +63,15 @@ import SharingTabSidebar from './SharingTabSidebar'
 import TagsTabSidebar from './TagsTabSidebar'
 import DeletedTabSidebar from './DeletedTabSidebar'
 import TimelineTabSidebar from './TimelineTabSidebar'
-import { AppSidebar, AppSidebarTab } from '@nextcloud/vue'
+import { NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
 
 const capabilities = window.OC.getCapabilities()
 
 export default {
 	name: 'BoardSidebar',
 	components: {
-		AppSidebar,
-		AppSidebarTab,
+		NcAppSidebar,
+		NcAppSidebarTab,
 		SharingTabSidebar,
 		TagsTabSidebar,
 		DeletedTabSidebar,
diff --git a/src/components/board/SharingTabSidebar.vue b/src/components/board/SharingTabSidebar.vue
index e8d2ddc4b..f27844d22 100644
--- a/src/components/board/SharingTabSidebar.vue
+++ b/src/components/board/SharingTabSidebar.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<Multiselect v-if="canShare"
+		<NcMultiselect v-if="canShare"
 			v-model="addAcl"
 			:placeholder="t('deck', 'Share board with a user, group or circle …')"
 			:options="formatedSharees"
@@ -18,12 +18,12 @@
 			<template #noResult>
 				{{ isSearching ? t('deck', 'Searching for users, groups and circles …') : t('deck', 'No participants found') }}
 			</template>
-		</Multiselect>
+		</NcMultiselect>
 
 		<ul id="shareWithList"
 			class="shareWithList">
 			<li>
-				<Avatar :user="board.owner.uid" />
+				<NcAvatar :user="board.owner.uid" />
 				<span class="has-tooltip username">
 					{{ board.owner.displayname }}
 					<span v-if="!isCurrentUser(board.owner.uid)" class="board-owner-label">
@@ -32,7 +32,7 @@
 				</span>
 			</li>
 			<li v-for="acl in board.acl" :key="acl.id">
-				<Avatar v-if="acl.type===0" :user="acl.participant.uid" />
+				<NcAvatar v-if="acl.type===0" :user="acl.participant.uid" />
 				<div v-if="acl.type===1" class="avatardiv icon icon-group" />
 				<div v-if="acl.type===7" class="avatardiv icon icon-circles" />
 				<span class="has-tooltip username">
@@ -44,7 +44,7 @@
 				<ActionCheckbox v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0) && (canManage || (canEdit && canShare))" :checked="acl.permissionEdit" @change="clickEditAcl(acl)">
 					{{ t('deck', 'Can edit') }}
 				</ActionCheckbox>
-				<Actions v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0)" :force-menu="true">
+				<NcActions v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0)" :force-menu="true">
 					<ActionCheckbox v-if="canManage || canShare" :checked="acl.permissionShare" @change="clickShareAcl(acl)">
 						{{ t('deck', 'Can share') }}
 					</ActionCheckbox>
@@ -54,10 +54,10 @@
 					<ActionCheckbox v-if="acl.type === 0 && isCurrentUser(board.owner.uid)" :checked="acl.owner" @change="clickTransferOwner(acl.participant.uid)">
 						{{ t('deck', 'Owner') }}
 					</ActionCheckbox>
-					<ActionButton v-if="canManage" icon="icon-delete" @click="clickDeleteAcl(acl)">
+					<NcActionButton v-if="canManage" icon="icon-delete" @click="clickDeleteAcl(acl)">
 						{{ t('deck', 'Delete') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</li>
 		</ul>
 
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import { Avatar, Multiselect, Actions, ActionButton, ActionCheckbox } from '@nextcloud/vue'
+import { NcAvatar, NcMultiselect, NcActions, NcActionButton, ActionCheckbox } from '@nextcloud/vue'
 import { CollectionList } from 'nextcloud-vue-collections'
 import { mapGetters, mapState } from 'vuex'
 import { getCurrentUser } from '@nextcloud/auth'
@@ -80,11 +80,11 @@ import debounce from 'lodash/debounce'
 export default {
 	name: 'SharingTabSidebar',
 	components: {
-		Avatar,
-		Actions,
-		ActionButton,
+		NcAvatar,
+		NcActions,
+		NcActionButton,
 		ActionCheckbox,
-		Multiselect,
+		NcMultiselect,
 		CollectionList,
 	},
 	props: {
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 4fd3e9acd..a7c97d1c5 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -52,25 +52,25 @@
 						value="">
 				</form>
 			</transition>
-			<Actions v-if="canManage && !isArchived" :force-menu="true">
-				<ActionButton @click="modalArchivAllCardsShow=true">
+			<NcActions v-if="canManage && !isArchived" :force-menu="true">
+				<NcActionButton @click="modalArchivAllCardsShow=true">
 					<template #icon>
 						<ArchiveIcon decorative />
 					</template>
 					{{ t('deck', 'Archive all cards') }}
-				</ActionButton>
-				<ActionButton icon="icon-delete" @click="deleteStack(stack)">
+				</NcActionButton>
+				<NcActionButton icon="icon-delete" @click="deleteStack(stack)">
 					{{ t('deck', 'Delete list') }}
-				</ActionButton>
-			</Actions>
-			<Actions v-if="canEdit && !showArchived && !isArchived">
-				<ActionButton icon="icon-add" @click.stop="showAddCard=true">
+				</NcActionButton>
+			</NcActions>
+			<NcActions v-if="canEdit && !showArchived && !isArchived">
+				<NcActionButton icon="icon-add" @click.stop="showAddCard=true">
 					{{ t('deck', 'Add card') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</div>
 
-		<Modal v-if="modalArchivAllCardsShow" @close="modalArchivAllCardsShow=false">
+		<NcModal v-if="modalArchivAllCardsShow" @close="modalArchivAllCardsShow=false">
 			<div class="modal__content">
 				<h3>{{ t('deck', 'Archive all cards in this list') }}</h3>
 				<progress :value="stackTransfer.current" :max="stackTransfer.total" />
@@ -81,7 +81,7 @@
 					{{ t('deck', 'Cancel') }}
 				</button>
 			</div>
-		</Modal>
+		</NcModal>
 
 		<transition name="slide-top" appear>
 			<div v-if="showAddCard" class="stack__card-add">
@@ -131,7 +131,7 @@
 import { mapGetters, mapState } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'
 
-import { Actions, ActionButton, Modal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
 import { showError, showUndo } from '@nextcloud/dialogs'
 import CardItem from '../cards/CardItem'
 
@@ -141,12 +141,12 @@ import ArchiveIcon from 'vue-material-design-icons/Archive'
 export default {
 	name: 'Stack',
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		CardItem,
 		Container,
 		Draggable,
-		Modal,
+		NcModal,
 		ArchiveIcon,
 	},
 
diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue
index 4087addbb..a6d52e862 100644
--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -5,59 +5,59 @@
 				<!-- Edit Tag -->
 				<template v-if="editingLabelId === label.id">
 					<form class="label-form" @submit.prevent="updateLabel(label)">
-						<ColorPicker class="color-picker-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
+						<NcColorPicker class="color-picker-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
 							<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker" />
-						</ColorPicker>
+						</NcColorPicker>
 						<input v-model="editingLabel.title" type="text">
 						<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
 							:disabled="!editLabelObjValidated"
 							type="submit"
 							value=""
 							class="icon-confirm">
-						<Actions>
-							<ActionButton v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
+						<NcActions>
+							<NcActionButton v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
 								:disabled="!editLabelObjValidated"
 								icon="icon-close"
 								@click="editingLabelId = null">
 								{{ t('deck', 'Cancel') }}
-							</ActionButton>
-						</Actions>
+							</NcActionButton>
+						</NcActions>
 					</form>
 				</template>
 				<template v-else>
 					<div class="label-title" @click="clickEdit(label)">
 						<span :style="{ backgroundColor: `#${label.color}`, color: textColor(label.color) }">{{ label.title }}</span>
 					</div>
-					<Actions v-if="canManage && !isArchived">
-						<ActionButton icon="icon-rename" @click="clickEdit(label)">
+					<NcActions v-if="canManage && !isArchived">
+						<NcActionButton icon="icon-rename" @click="clickEdit(label)">
 							{{ t('deck', 'Edit') }}
-						</ActionButton>
-					</Actions>
-					<Actions v-if="canManage && !isArchived">
-						<ActionButton icon="icon-delete" @click="deleteLabel(label.id)">
+						</NcActionButton>
+					</NcActions>
+					<NcActions v-if="canManage && !isArchived">
+						<NcActionButton icon="icon-delete" @click="deleteLabel(label.id)">
 							{{ t('deck', 'Delete') }}
-						</ActionButton>
-					</Actions>
+						</NcActionButton>
+					</NcActions>
 				</template>
 			</li>
 
 			<li v-if="addLabel" class="editing">
 				<!-- New Tag -->
 				<form class="label-form" @submit.prevent="clickAddLabel">
-					<ColorPicker class="color-picker-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
+					<NcColorPicker class="color-picker-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
 						<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker" />
-					</ColorPicker>
+					</NcColorPicker>
 					<input v-model="addLabelObj.title" type="text">
 					<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
 						:disabled="!addLabelObjValidated"
 						type="submit"
 						value=""
 						class="icon-confirm">
-					<Actions>
-						<ActionButton icon="icon-close" @click="addLabel=false">
+					<NcActions>
+						<NcActionButton icon="icon-close" @click="addLabel=false">
 							{{ t('deck', 'Cancel') }}
-						</ActionButton>
-					</Actions>
+						</NcActionButton>
+					</NcActions>
 				</form>
 			</li>
 			<button v-if="canManage && !isArchived" @click="clickShowAddLabel()">
@@ -71,14 +71,14 @@
 
 import { mapGetters } from 'vuex'
 import Color from '../../mixins/color'
-import { ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
+import { NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
 
 export default {
 	name: 'TagsTabSidebar',
 	components: {
-		ColorPicker,
-		Actions,
-		ActionButton,
+		NcColorPicker,
+		NcActions,
+		NcActionButton,
 	},
 	mixins: [Color],
 	data() {
diff --git a/src/components/boards/BoardItem.vue b/src/components/boards/BoardItem.vue
index 7b4eb7631..a925a40f0 100644
--- a/src/components/boards/BoardItem.vue
+++ b/src/components/boards/BoardItem.vue
@@ -33,8 +33,8 @@
 			{{ board.title }}
 		</div>
 		<div class="board-list-avatars-cell" title="">
-			<Avatar :user="board.owner.uid" :display-name="board.owner.displayname" class="board-list-avatar" />
-			<Avatar v-for="user in limitedAcl"
+			<NcAvatar :user="board.owner.uid" :display-name="board.owner.displayname" class="board-list-avatar" />
+			<NcAvatar v-for="user in limitedAcl"
 				:key="user.id"
 				:user="user.participant.uid"
 				:display-name="user.participant.displayname"
@@ -46,12 +46,12 @@
 </template>
 
 <script>
-import { Avatar } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 
 export default {
 	name: 'BoardItem',
 	components: {
-		Avatar,
+		NcAvatar,
 	},
 	props: {
 		board: {
diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
index f6cbd7053..b466ad14b 100644
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -70,12 +70,12 @@
 						</div>
 					</a>
 				</div>
-				<Actions v-if="selectable">
-					<ActionButton icon="icon-confirm" @click="$emit('select-attachment', attachment)">
+				<NcActions v-if="selectable">
+					<NcActionButton icon="icon-confirm" @click="$emit('select-attachment', attachment)">
 						{{ t('deck', 'Add this attachment') }}
-					</ActionButton>
-				</Actions>
-				<Actions v-if="removable && !isReadOnly" :force-menu="true">
+					</NcActionButton>
+				</NcActions>
+				<NcActions v-if="removable && !isReadOnly" :force-menu="true">
 					<ActionLink v-if="attachment.extendedData.fileid" icon="icon-folder" :href="internalLink(attachment)">
 						{{ t('deck', 'Show in Files') }}
 					</ActionLink>
@@ -85,17 +85,17 @@
 						download>
 						{{ t('deck', 'Download') }}
 					</ActionLink>
-					<ActionButton v-if="attachment.extendedData.fileid && !isReadOnly" icon="icon-delete" @click="unshareAttachment(attachment)">
+					<NcActionButton v-if="attachment.extendedData.fileid && !isReadOnly" icon="icon-delete" @click="unshareAttachment(attachment)">
 						{{ t('deck', 'Remove attachment') }}
-					</ActionButton>
+					</NcActionButton>
 
-					<ActionButton v-if="!attachment.extendedData.fileid && attachment.deletedAt === 0" icon="icon-delete" @click="$emit('delete-attachment', attachment)">
+					<NcActionButton v-if="!attachment.extendedData.fileid && attachment.deletedAt === 0" icon="icon-delete" @click="$emit('delete-attachment', attachment)">
 						{{ t('deck', 'Delete Attachment') }}
-					</ActionButton>
-					<ActionButton v-else-if="!attachment.extendedData.fileid" icon="icon-history" @click="$emit('restore-attachment', attachment)">
+					</NcActionButton>
+					<NcActionButton v-else-if="!attachment.extendedData.fileid" icon="icon-history" @click="$emit('restore-attachment', attachment)">
 						{{ t('deck', 'Restore Attachment') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</li>
 		</ul>
 	</AttachmentDragAndDrop>
@@ -103,7 +103,7 @@
 
 <script>
 import axios from '@nextcloud/axios'
-import { Actions, ActionButton, ActionLink } from '@nextcloud/vue'
+import { NcActions, NcActionButton, ActionLink } from '@nextcloud/vue'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
 import relativeDate from '../../mixins/relativeDate'
 import { formatFileSize } from '@nextcloud/files'
@@ -125,8 +125,8 @@ const picker = getFilePickerBuilder(t('deck', 'File to share'))
 export default {
 	name: 'AttachmentList',
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		ActionLink,
 		AttachmentDragAndDrop,
 	},
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index c5fca4157..dc546850f 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<AppSidebar v-if="currentBoard && currentCard"
+	<NcAppSidebar v-if="currentBoard && currentCard"
 		:active="tabId"
 		:title="title"
 		:subtitle="subtitle"
@@ -32,57 +32,57 @@
 		@submit-title="handleSubmitTitle"
 		@close="closeSidebar">
 		<template #secondary-actions>
-			<ActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="closeModal()">
+			<NcActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="closeModal()">
 				{{ t('deck', 'Open in sidebar view') }}
-			</ActionButton>
-			<ActionButton v-else icon="icon-external" @click.stop="showModal()">
+			</NcActionButton>
+			<NcActionButton v-else icon="icon-external" @click.stop="showModal()">
 				{{ t('deck', 'Open in bigger view') }}
-			</ActionButton>
+			</NcActionButton>
 
-			<ActionButton v-for="action in cardActions"
+			<NcActionButton v-for="action in cardActions"
 				:key="action.label"
 				:close-after-click="true"
 				:icon="action.icon"
 				@click="action.callback(cardRichObject)">
 				{{ action.label }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
 
-		<AppSidebarTab id="details"
+		<NcAppSidebarTab id="details"
 			:order="0"
 			:name="t('deck', 'Details')"
 			icon="icon-home">
 			<CardSidebarTabDetails :card="currentCard" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab id="attachments"
+		<NcAppSidebarTab id="attachments"
 			:order="1"
 			:name="t('deck', 'Attachments')">
 			<template #icon>
-				<AttachmentIcon size="20" decorative />
+				<AttachmentIcon :size="20" decorative />
 			</template>
 			<CardSidebarTabAttachments :card="currentCard" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab id="comments"
+		<NcAppSidebarTab id="comments"
 			:order="2"
 			:name="t('deck', 'Comments')"
 			icon="icon-comment">
 			<CardSidebarTabComments :card="currentCard" :tab-query="tabQuery" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab v-if="hasActivity"
+		<NcAppSidebarTab v-if="hasActivity"
 			id="timeline"
 			:order="3"
 			:name="t('deck', 'Timeline')"
 			icon="icon-activity">
 			<CardSidebarTabActivity :card="currentCard" />
-		</AppSidebarTab>
-	</AppSidebar>
+		</NcAppSidebarTab>
+	</NcAppSidebar>
 </template>
 
 <script>
-import { ActionButton, AppSidebar, AppSidebarTab } from '@nextcloud/vue'
+import { NcActionButton, NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import { mapState, mapGetters } from 'vuex'
 import CardSidebarTabDetails from './CardSidebarTabDetails'
@@ -101,9 +101,9 @@ const capabilities = window.OC.getCapabilities()
 export default {
 	name: 'CardSidebar',
 	components: {
-		AppSidebar,
-		AppSidebarTab,
-		ActionButton,
+		NcAppSidebar,
+		NcAppSidebarTab,
+		NcActionButton,
 		CardSidebarTabAttachments,
 		CardSidebarTabComments,
 		CardSidebarTabActivity,
diff --git a/src/components/card/CardSidebarTabComments.vue b/src/components/card/CardSidebarTabComments.vue
index d10260cb6..7e50484f7 100644
--- a/src/components/card/CardSidebarTabComments.vue
+++ b/src/components/card/CardSidebarTabComments.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="comment--header">
-			<Avatar :user="currentUser.uid" />
+			<NcAvatar :user="currentUser.uid" />
 			<span class="has-tooltip username">
 				{{ currentUser.displayName }}
 			</span>
@@ -35,7 +35,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Avatar } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 import CommentItem from './CommentItem'
 import CommentForm from './CommentForm'
 import InfiniteLoading from 'vue-infinite-loading'
@@ -44,7 +44,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 export default {
 	name: 'CardSidebarTabComments',
 	components: {
-		Avatar,
+		NcAvatar,
 		CommentItem,
 		CommentForm,
 		InfiniteLoading,
diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
index d56316e84..67c552748 100644
--- a/src/components/card/CardSidebarTabDetails.vue
+++ b/src/components/card/CardSidebarTabDetails.vue
@@ -27,7 +27,7 @@
 				<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
 			</div>
 			<div class="section-details">
-				<Multiselect v-model="assignedLabels"
+				<NcMultiselect v-model="assignedLabels"
 					:multiple="true"
 					:disabled="!canEdit"
 					:options="labelsSorted"
@@ -47,7 +47,7 @@
 							{{ scope.option.title }}
 						</div>
 					</template>
-				</Multiselect>
+				</NcMultiselect>
 			</div>
 		</div>
 
@@ -56,7 +56,7 @@
 				<span class="hidden-visually">{{ t('deck', 'Assign to users/groups/circles') }}</span>
 			</div>
 			<div class="section-details">
-				<Multiselect v-if="canEdit"
+				<NcMultiselect v-if="canEdit"
 					v-model="assignedUsers"
 					:multiple="true"
 					:options="formatedAssignables"
@@ -69,16 +69,16 @@
 					@remove="removeUserFromCard">
 					<template #tag="scope">
 						<div class="avatarlist--inline">
-							<Avatar :user="scope.option.uid"
+							<NcAvatar :user="scope.option.uid"
 								:display-name="scope.option.displayname"
 								:size="24"
 								:is-no-user="scope.option.isNoUser"
 								:disable-menu="true" />
 						</div>
 					</template>
-				</Multiselect>
+				</NcMultiselect>
 				<div v-else class="avatar-list--readonly">
-					<Avatar v-for="option in assignedUsers"
+					<NcAvatar v-for="option in assignedUsers"
 						:key="option.primaryKey"
 						:user="option.uid"
 						:display-name="option.displayname"
@@ -93,7 +93,7 @@
 				<span class="hidden-visually">{{ t('deck', 'Due date') }}</span>
 			</div>
 			<div class="section-details">
-				<DatetimePicker v-model="duedate"
+				<NcDatetimePicker v-model="duedate"
 					:placeholder="t('deck', 'Set a due date')"
 					type="datetime"
 					:minute-step="5"
@@ -103,11 +103,11 @@
 					:disabled="saving || !canEdit"
 					:shortcuts="shortcuts"
 					confirm />
-				<Actions v-if="canEdit">
-					<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
+				<NcActions v-if="canEdit">
+					<NcActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
 						{{ t('deck', 'Remove due date') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</div>
 		</div>
 
@@ -125,7 +125,7 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import { Avatar, Actions, ActionButton, Multiselect, DatetimePicker } from '@nextcloud/vue'
+import { NcAvatar, NcActions, NcActionButton, NcMultiselect, NcDatetimePicker } from '@nextcloud/vue'
 import { loadState } from '@nextcloud/initial-state'
 
 import { CollectionList } from 'nextcloud-vue-collections'
@@ -142,11 +142,11 @@ export default {
 	name: 'CardSidebarTabDetails',
 	components: {
 		Description,
-		Multiselect,
-		DatetimePicker,
-		Actions,
-		ActionButton,
-		Avatar,
+		NcMultiselect,
+		NcDatetimePicker,
+		NcActions,
+		NcActionButton,
+		NcAvatar,
 		CollectionList,
 	},
 	mixins: [Color],
diff --git a/src/components/card/CommentForm.vue b/src/components/card/CommentForm.vue
index 6d5a14a41..eb4d32cdb 100644
--- a/src/components/card/CommentForm.vue
+++ b/src/components/card/CommentForm.vue
@@ -29,12 +29,12 @@
 				name-key="displayname"
 				:tab-select="true">
 				<template #item="s">
-					<Avatar class="atwho-li--avatar" :user="s.item.uid" :size="24" />
+					<NcAvatar class="atwho-li--avatar" :user="s.item.uid" :size="24" />
 					<span class="atwho-li--name" v-text="s.item.displayname" />
 				</template>
 				<template #embeddedItem="scope">
 					<span>
-						<UserBubble v-if="scope.current.uid"
+						<NcUserBubble v-if="scope.current.uid"
 							:data-mention-id="scope.current.uid"
 							:user="scope.current.uid"
 							:display-name="scope.current.displayname" />
@@ -63,7 +63,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import { UserBubble, Avatar } from '@nextcloud/vue'
+import { NcUserBubble, NcAvatar } from '@nextcloud/vue'
 import At from 'vue-at'
 import { rawToParsed } from '../../helpers/mentions'
 
@@ -71,8 +71,8 @@ export default {
 	name: 'CommentForm',
 	components: {
 		At,
-		Avatar,
-		UserBubble,
+		NcAvatar,
+		NcUserBubble,
 	},
 	props: {
 		value: {
diff --git a/src/components/card/CommentItem.vue b/src/components/card/CommentItem.vue
index 5b1ad9f67..915ec37a8 100644
--- a/src/components/card/CommentItem.vue
+++ b/src/components/card/CommentItem.vue
@@ -4,13 +4,13 @@
 			<div class="reply--header">
 				<div class="reply--hint">
 					{{ t('deck', 'In reply to') }}
-					<UserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" />
+					<NcUserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" />
 				</div>
-				<Actions v-if="preview" class="reply--cancel">
-					<ActionButton icon="icon-close" @click="$emit('cancel')">
+				<NcActions v-if="preview" class="reply--cancel">
+					<NcActionButton icon="icon-close" @click="$emit('cancel')">
 						{{ t('deck', 'Cancel reply') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</div>
 			<RichText class="comment--content"
 				:text="richText(comment)"
@@ -20,33 +20,33 @@
 	</div>
 	<li v-else class="comment">
 		<div class="comment--header">
-			<Avatar :user="comment.actorId" />
+			<NcAvatar :user="comment.actorId" />
 			<span class="has-tooltip username">
 				{{ comment.actorDisplayName }}
 			</span>
-			<Actions v-show="!edit" :force-menu="true">
-				<ActionButton :close-after-click="true" @click="replyTo()">
+			<NcActions v-show="!edit" :force-menu="true">
+				<NcActionButton :close-after-click="true" @click="replyTo()">
 					<template #icon>
 						<ReplyIcon decorative />
 					</template>
 					{{ t('deck', 'Reply') }}
-				</ActionButton>
-				<ActionButton v-if="canEdit"
+				</NcActionButton>
+				<NcActionButton v-if="canEdit"
 					icon="icon-rename"
 					:close-after-click="true"
 					@click="showUpdateForm()">
 					{{ t('deck', 'Update') }}
-				</ActionButton>
-				<ActionButton v-if="canEdit"
+				</NcActionButton>
+				<NcActionButton v-if="canEdit"
 					icon="icon-delete"
 					:close-after-click="true"
 					@click="deleteComment()">
 					{{ t('deck', 'Delete') }}
-				</ActionButton>
-			</Actions>
-			<Actions v-if="edit">
-				<ActionButton icon="icon-close" @click="hideUpdateForm" />
-			</Actions>
+				</NcActionButton>
+			</NcActions>
+			<NcActions v-if="edit">
+				<NcActionButton icon="icon-close" @click="hideUpdateForm" />
+			</NcActions>
 			<div class="spacer" />
 			<div class="timestamp">
 				{{ relativeDate(comment.creationDateTime) }}
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import { Avatar, Actions, ActionButton, UserBubble } from '@nextcloud/vue'
+import { NcAvatar, NcActions, NcActionButton, NcUserBubble } from '@nextcloud/vue'
 import RichText from '@juliushaertl/vue-richtext'
 import CommentForm from './CommentForm'
 import { getCurrentUser } from '@nextcloud/auth'
@@ -80,7 +80,7 @@ const AtMention = {
 		return createElement(
 			'span',
 			{ attrs: { 'data-at-embedded': true, contenteditable: false } },
-			[createElement(UserBubble, { props: { user, displayName }, attrs: { 'data-mention-id': user } })]
+			[createElement(NcUserBubble, { props: { user, displayName }, attrs: { 'data-mention-id': user } })]
 		)
 	},
 }
@@ -88,10 +88,10 @@ const AtMention = {
 export default {
 	name: 'CommentItem',
 	components: {
-		Avatar,
-		UserBubble,
-		Actions,
-		ActionButton,
+		NcAvatar,
+		NcUserBubble,
+		NcActions,
+		NcActionButton,
 		CommentForm,
 		RichText,
 		ReplyIcon,
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
index 4e7f49f6e..f53cfcc99 100644
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -30,22 +30,22 @@
 				href="https://deck.readthedocs.io/en/latest/Markdown/"
 				target="_blank"
 				class="icon icon-info" />
-			<Actions v-if="canEdit">
-				<ActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
+			<NcActions v-if="canEdit">
+				<NcActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
 					{{ t('deck', 'Edit description') }}
-				</ActionButton>
-				<ActionButton v-else icon="icon-toggle" @click="hideEditor()">
+				</NcActionButton>
+				<NcActionButton v-else icon="icon-toggle" @click="hideEditor()">
 					{{ t('deck', 'View description') }}
-				</ActionButton>
-			</Actions>
-			<Actions v-if="canEdit">
-				<ActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
+				</NcActionButton>
+			</NcActions>
+			<NcActions v-if="canEdit">
+				<NcActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
 					<template #icon>
 						<PaperclipIcon :size="24" decorative />
 					</template>
 					{{ t('deck', 'Add Attachment') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</h5>
 
 		<div v-if="!descriptionEditing && hasDescription"
@@ -63,14 +63,14 @@
 			@update:modelValue="updateDescription"
 			@blur="saveDescription" />
 
-		<Modal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
+		<NcModal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
 			<div class="modal__content">
 				<h3>{{ t('deck', 'Choose attachment') }}</h3>
 				<AttachmentList :card-id="card.id"
 					:selectable="true"
 					@select-attachment="addAttachment" />
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
@@ -79,7 +79,7 @@ import MarkdownIt from 'markdown-it'
 import MarkdownItTaskCheckbox from 'markdown-it-task-checkbox'
 import MarkdownItLinkAttributes from 'markdown-it-link-attributes'
 import AttachmentList from './AttachmentList'
-import { Actions, ActionButton, Modal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
 import { mapState, mapGetters } from 'vuex'
@@ -101,9 +101,9 @@ export default {
 	name: 'Description',
 	components: {
 		VueEasymde: () => import('vue-easymde/dist/VueEasyMDE.common'),
-		Actions,
-		ActionButton,
-		Modal,
+		NcActions,
+		NcActionButton,
+		NcModal,
 		AttachmentList,
 		PaperclipIcon,
 	},
diff --git a/src/components/cards/AvatarList.vue b/src/components/cards/AvatarList.vue
index 1ee7a2da5..e3f83744e 100644
--- a/src/components/cards/AvatarList.vue
+++ b/src/components/cards/AvatarList.vue
@@ -27,20 +27,20 @@
 				<div class="avatardiv icon-more" />
 			</div>
 			<div v-for="user in firstUsers" :key="user.id">
-				<Avatar v-if="user.type === 0"
+				<NcAvatar v-if="user.type === 0"
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:disable-menu="true"
 					:show-user-status="false"
 					:size="32" />
-				<Avatar v-if="user.type === 1"
+				<NcAvatar v-if="user.type === 1"
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Group)')"
 					:is-no-user="true"
 					:disable-="true"
 					:size="32" />
-				<Avatar v-if="user.type === 7"
+				<NcAvatar v-if="user.type === 7"
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Circle)')"
@@ -51,13 +51,13 @@
 		</div>
 
 		<div v-show="popoverVisible" class="popovermenu menu-right">
-			<PopoverMenu :menu="popover" />
+			<NcPopoverMenu :menu="popover" />
 			<slot />
 		</div>
 
 		<div class="avatar-print-list">
 			<div v-for="user in avatarUsers" :key="user.id" class="avatar-print-list-item">
-				<Avatar class="avatar-print-list-avatar"
+				<NcAvatar class="avatar-print-list-avatar"
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:disable-menu="true"
@@ -70,14 +70,14 @@
 </template>
 
 <script>
-import { Avatar, PopoverMenu, Tooltip } from '@nextcloud/vue'
+import { NcAvatar, NcPopoverMenu, Tooltip } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'AvatarList',
 	components: {
-		Avatar,
-		PopoverMenu,
+		NcAvatar,
+		NcPopoverMenu,
 	},
 	directives: {
 		tooltip: Tooltip,
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 643ec4358..61a79049f 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -26,8 +26,8 @@
 			v-tooltip="commentsHint"
 			class="icon-badge"
 			@click.stop="openComments">
-			<CommentUnreadIcon v-if="card.commentsUnread > 0" size="16" />
-			<CommentIcon v-else size="16" />
+			<CommentUnreadIcon v-if="card.commentsUnread > 0" :size="16" />
+			<CommentIcon v-else :size="16" />
 			<span>{{ card.commentsCount }}</span>
 		</div>
 
@@ -36,20 +36,20 @@
 			<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
 		</div>
 
-		<TextIcon v-else-if="card.description.trim() && checkListCount == 0" size="16" decorative />
+		<TextIcon v-else-if="card.description.trim() && checkListCount == 0" :size="16" decorative />
 
 		<div v-if="card.attachmentCount > 0" class="icon-badge">
-			<AttachmentIcon size="16" />
+			<AttachmentIcon :size="16" />
 			<span>{{ card.attachmentCount }}</span>
 		</div>
 
-		<AvatarList :users="card.assignedUsers" />
+		<NcAvatarList :users="card.assignedUsers" />
 
 		<CardMenu class="card-menu" :card="card" />
 	</div>
 </template>
 <script>
-import AvatarList from './AvatarList'
+import NcAvatarList from './AvatarList'
 import CardMenu from './CardMenu'
 import TextIcon from 'vue-material-design-icons/Text.vue'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
@@ -59,7 +59,7 @@ import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'
 
 export default {
 	name: 'CardBadges',
-	components: { AvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
+	components: { NcAvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
 	props: {
 		card: {
 			type: Object,
diff --git a/src/components/cards/CardMenu.vue b/src/components/cards/CardMenu.vue
index 4ed0a49b8..95112684d 100644
--- a/src/components/cards/CardMenu.vue
+++ b/src/components/cards/CardMenu.vue
@@ -23,50 +23,50 @@
 <template>
 	<div v-if="card">
 		<div @click.stop.prevent>
-			<Actions>
-				<ActionButton v-if="showArchived === false && !isCurrentUserAssigned"
+			<NcActions>
+				<NcActionButton v-if="showArchived === false && !isCurrentUserAssigned"
 					icon="icon-user"
 					:close-after-click="true"
 					@click="assignCardToMe()">
 					{{ t('deck', 'Assign to me') }}
-				</ActionButton>
-				<ActionButton v-if="showArchived === false && isCurrentUserAssigned"
+				</NcActionButton>
+				<NcActionButton v-if="showArchived === false && isCurrentUserAssigned"
 					icon="icon-user"
 					:close-after-click="true"
 					@click="unassignCardFromMe()">
 					{{ t('deck', 'Unassign myself') }}
-				</ActionButton>
-				<ActionButton icon="icon-external" :close-after-click="true" @click="modalShow=true">
+				</NcActionButton>
+				<NcActionButton icon="icon-external" :close-after-click="true" @click="modalShow=true">
 					{{ t('deck', 'Move card') }}
-				</ActionButton>
-				<ActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
+				</NcActionButton>
+				<NcActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
 					<CardBulletedIcon slot="icon" :size="20" decorative />
 					{{ t('deck', 'Card details') }}
-				</ActionButton>
-				<ActionButton :close-after-click="true" @click="archiveUnarchiveCard()">
+				</NcActionButton>
+				<NcActionButton :close-after-click="true" @click="archiveUnarchiveCard()">
 					<template #icon>
 						<ArchiveIcon :size="20" decorative />
 					</template>
 					{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
-				</ActionButton>
-				<ActionButton v-if="showArchived === false"
+				</NcActionButton>
+				<NcActionButton v-if="showArchived === false"
 					icon="icon-delete"
 					:close-after-click="true"
 					@click="deleteCard()">
 					{{ t('deck', 'Delete card') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</div>
-		<Modal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
+		<NcModal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
 			<div class="modal__content">
 				<h3>{{ t('deck', 'Move card to another board') }}</h3>
-				<Multiselect v-model="selectedBoard"
+				<NcMultiselect v-model="selectedBoard"
 					:placeholder="t('deck', 'Select a board')"
 					:options="activeBoards"
 					:max-height="100"
 					label="title"
 					@select="loadStacksFromBoard" />
-				<Multiselect v-model="selectedStack"
+				<NcMultiselect v-model="selectedStack"
 					:placeholder="t('deck', 'Select a list')"
 					:options="stacksFromBoard"
 					:max-height="100"
@@ -74,7 +74,7 @@
 					<span slot="noOptions">
 						{{ t('deck', 'List is empty') }}
 					</span>
-				</Multiselect>
+				</NcMultiselect>
 
 				<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
 					{{ t('deck', 'Move card') }}
@@ -83,11 +83,11 @@
 					{{ t('deck', 'Cancel') }}
 				</button>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 <script>
-import { Modal, Actions, ActionButton, Multiselect } from '@nextcloud/vue'
+import { NcModal, NcActions, NcActionButton, NcMultiselect } from '@nextcloud/vue'
 import { mapGetters, mapState } from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
@@ -99,7 +99,7 @@ import CardBulletedIcon from 'vue-material-design-icons/CardBulleted'
 
 export default {
 	name: 'CardMenu',
-	components: { Actions, ActionButton, Modal, Multiselect, ArchiveIcon, CardBulletedIcon },
+	components: { NcActions, NcActionButton, NcModal, NcMultiselect, ArchiveIcon, CardBulletedIcon },
 	props: {
 		card: {
 			type: Object,
diff --git a/src/components/icons/DeckIcon.vue b/src/components/icons/DeckIcon.vue
new file mode 100644
index 000000000..c5948827b
--- /dev/null
+++ b/src/components/icons/DeckIcon.vue
@@ -0,0 +1,39 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg"
+		:height="size"
+		:width="size"
+		version="1.1"
+		viewBox="0 0 16 16">
+		<rect ry="1"
+			height="8"
+			width="14"
+			y="7"
+			x="1" />
+		<rect ry=".5"
+			height="1"
+			width="12"
+			y="5"
+			x="2" />
+		<rect ry=".5"
+			height="1"
+			width="10"
+			y="3"
+			x="3" />
+		<rect ry=".5"
+			height="1"
+			width="8"
+			y="1"
+			x="4" />
+	</svg>
+</template>
+<script>
+export default {
+	name: 'DeckIcon',
+	props: {
+		size: {
+			type: Number,
+			default: 16,
+		},
+	},
+}
+</script>
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index 0b8449eeb..a954017a5 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -21,18 +21,25 @@
   -->
 
 <template>
-	<AppNavigationVue :class="{'icon-loading': loading}">
+	<NcAppNavigation :class="{'icon-loading': loading}">
 		<template #list>
-			<AppNavigationItem :title="t('deck', 'Upcoming cards')"
-				icon="icon-calendar-dark"
+			<NcAppNavigationItem :title="t('deck', 'Upcoming cards')"
 				:exact="true"
-				to="/" />
+				to="/">
+				<template #icon>
+					<CalendarIcon :size="20" />
+				</template>
+			</NcAppNavigationItem>
 			<AppNavigationBoardCategory id="deck-navigation-all"
 				to="/board"
 				:text="t('deck', 'All boards')"
 				:boards="noneArchivedBoards"
 				:open-on-add-boards="true"
-				icon="icon-deck" />
+				icon="icon-deck">
+				<template #icon>
+					<DeckIcon :size="16" />
+				</template>
+			</AppNavigationBoardCategory>
 			<AppNavigationBoardCategory id="deck-navigation-archived"
 				to="/board/archived"
 				:text="t('deck', 'Archived boards')"
@@ -45,11 +52,15 @@
 				to="/board/shared"
 				:text="t('deck', 'Shared with you')"
 				:boards="sharedBoards"
-				icon="icon-shared" />
+				icon="icon-shared">
+				<template #icon>
+					<ShareVariantIcon :size="20" decorative />
+				</template>
+			</AppNavigationBoardCategory>
 			<AppNavigationAddBoard v-if="canCreate" />
 		</template>
 		<template #footer>
-			<AppNavigationSettings :title="t('deck', 'Deck settings')">
+			<NcAppNavigationSettings :title="t('deck', 'Deck settings')">
 				<div>
 					<div>
 						<input id="toggle-modal"
@@ -71,7 +82,7 @@
 						</label>
 					</div>
 
-					<Multiselect v-if="isAdmin"
+					<NcMultiselect v-if="isAdmin"
 						v-model="groupLimit"
 						:class="{'icon-loading-small': groupLimitDisabled}"
 						open-direction="bottom"
@@ -86,35 +97,41 @@
 						{{ t('deck', 'Limiting Deck will block users not part of those groups from creating their own boards. Users will still be able to work on boards that have been shared with them.') }}
 					</p>
 				</div>
-			</AppNavigationSettings>
+			</NcAppNavigationSettings>
 		</template>
-	</AppNavigationVue>
+	</NcAppNavigation>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
 import { mapGetters } from 'vuex'
 import ClickOutside from 'vue-click-outside'
-import { AppNavigation as AppNavigationVue, AppNavigationItem, AppNavigationSettings, Multiselect } from '@nextcloud/vue'
+import { NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings, NcMultiselect } from '@nextcloud/vue'
 import AppNavigationAddBoard from './AppNavigationAddBoard'
 import AppNavigationBoardCategory from './AppNavigationBoardCategory'
 import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
-import ArchiveIcon from 'vue-material-design-icons/Archive'
+import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import CalendarIcon from 'vue-material-design-icons/Calendar.vue'
+import DeckIcon from './../icons/DeckIcon.vue'
+import ShareVariantIcon from 'vue-material-design-icons/Share.vue'
 
 const canCreateState = loadState('deck', 'canCreate')
 
 export default {
 	name: 'AppNavigation',
 	components: {
-		AppNavigationVue,
-		AppNavigationSettings,
+		NcAppNavigation,
+		NcAppNavigationSettings,
 		AppNavigationAddBoard,
 		AppNavigationBoardCategory,
-		Multiselect,
-		AppNavigationItem,
+		NcMultiselect,
+		NcAppNavigationItem,
 		ArchiveIcon,
+		CalendarIcon,
+		DeckIcon,
+		ShareVariantIcon,
 	},
 	directives: {
 		ClickOutside,
diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
index ad7b66c4c..0cc91cdbc 100644
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -20,24 +20,24 @@
   -
   -->
 <template>
-	<AppNavigationItem v-if="!editing"
+	<NcAppNavigationItem v-if="!editing"
 		:title="t('deck', 'Add board')"
 		icon="icon-add"
 		@click.prevent.stop="startCreateBoard" />
 	<div v-else class="board-create">
-		<ColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
+		<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
 			<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
-		</ColorPicker>
+		</NcColorPicker>
 		<form @submit.prevent.stop="createBoard">
 			<input :placeholder="t('deck', 'Board name')" type="text" required>
 			<input type="submit" value="" class="icon-confirm">
-			<Actions><ActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></Actions>
+			<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
 		</form>
 	</div>
 </template>
 
 <script>
-import { ColorPicker, ActionButton, Actions, AppNavigationItem } from '@nextcloud/vue'
+import { NcColorPicker, NcActionButton, NcActions, NcAppNavigationItem } from '@nextcloud/vue'
 
 /**
  *
@@ -52,7 +52,7 @@ function randomColor() {
 
 export default {
 	name: 'AppNavigationAddBoard',
-	components: { ColorPicker, AppNavigationItem, ActionButton, Actions },
+	components: { NcColorPicker, NcAppNavigationItem, NcActionButton, NcActions },
 	directives: {},
 	props: {},
 	data() {
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index ed7cb82c1..a81377332 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -20,124 +20,124 @@
   -
   -->
 <template>
-	<AppNavigationItem v-if="!editing"
+	<NcAppNavigationItem v-if="!editing"
 		:title="!deleted ? board.title : undoText"
 		:loading="loading"
 		:to="routeTo"
 		:undo="deleted"
 		@undo="unDelete">
-		<AppNavigationIconBullet slot="icon" :color="board.color" />
+		<NcAppNavigationIconBullet slot="icon" :color="board.color" />
 
-		<AppNavigationCounter v-if="board.acl.length"
+		<NcAppNavigationCounter v-if="board.acl.length"
 			slot="counter"
 			class="icon-shared"
 			style="opacity: 0.5" />
 
 		<template v-if="!deleted" slot="actions">
 			<template v-if="!isDueSubmenuActive">
-				<ActionButton icon="icon-info"
+				<NcActionButton icon="icon-info"
 					:close-after-click="true"
 					@click="actionDetails">
 					{{ t('deck', 'Board details') }}
-				</ActionButton>
-				<ActionButton v-if="canManage && !board.archived"
+				</NcActionButton>
+				<NcActionButton v-if="canManage && !board.archived"
 					icon="icon-rename"
 					:close-after-click="true"
 					@click="actionEdit">
 					{{ t('deck', 'Edit board') }}
-				</ActionButton>
-				<ActionButton v-if="canManage && !board.archived"
+				</NcActionButton>
+				<NcActionButton v-if="canManage && !board.archived"
 					:close-after-click="true"
 					@click="actionClone">
 					<template #icon>
 						<CloneIcon :size="20" decorative />
 					</template>
 					{{ t('deck', 'Clone board') }}
-				</ActionButton>
-				<ActionButton v-if="canManage && board.archived"
+				</NcActionButton>
+				<NcActionButton v-if="canManage && board.archived"
 					:close-after-click="true"
 					@click="actionUnarchive">
 					<template #icon>
 						<ArchiveIcon :size="20" decorative />
 					</template>
 					{{ t('deck', 'Unarchive board') }}
-				</ActionButton>
-				<ActionButton v-else-if="canManage && !board.archived"
+				</NcActionButton>
+				<NcActionButton v-else-if="canManage && !board.archived"
 					:close-after-click="true"
 					@click="actionArchive">
 					<template #icon>
 						<ArchiveIcon :size="20" decorative />
 					</template>
 					{{ t('deck', 'Archive board') }}
-				</ActionButton>
+				</NcActionButton>
 
-				<ActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
+				<NcActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
 					{{ board.settings['notify-due'] === 'off' ? t('deck', 'Turn on due date reminders') : t('deck', 'Turn off due date reminders') }}
-				</ActionButton>
+				</NcActionButton>
 			</template>
 
 			<!-- Due date reminder settings -->
 			<template v-if="isDueSubmenuActive">
-				<ActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
+				<NcActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
 					:disabled="updateDueSetting"
 					@click="isDueSubmenuActive=false">
 					{{ t('deck', 'Due date reminders') }}
-				</ActionButton>
+				</NcActionButton>
 
-				<ActionButton name="notification"
+				<NcActionButton name="notification"
 					icon="icon-sound"
 					:disabled="updateDueSetting"
 					:class="{ 'forced-active': board.settings['notify-due'] === 'all' }"
 					@click="updateSetting('notify-due', 'all')">
 					{{ t('deck', 'All cards') }}
-				</ActionButton>
-				<ActionButton name="notification"
+				</NcActionButton>
+				<NcActionButton name="notification"
 					icon="icon-user"
 					:disabled="updateDueSetting"
 					:class="{ 'forced-active': board.settings['notify-due'] === 'assigned' }"
 					@click="updateSetting('notify-due', 'assigned')">
 					{{ t('deck', 'Assigned cards') }}
-				</ActionButton>
-				<ActionButton name="notification"
+				</NcActionButton>
+				<NcActionButton name="notification"
 					icon="icon-sound-off"
 					:disabled="updateDueSetting"
 					:class="{ 'forced-active': board.settings['notify-due'] === 'off' }"
 					@click="updateSetting('notify-due', 'off')">
 					{{ t('deck', 'No notifications') }}
-				</ActionButton>
+				</NcActionButton>
 			</template>
-			<ActionButton v-else-if="!board.archived && board.acl.length > 0"
+			<NcActionButton v-else-if="!board.archived && board.acl.length > 0"
 				:title="t('deck', 'Due date reminders')"
 				:icon="dueDateReminderIcon"
 				@click="isDueSubmenuActive=true">
 				{{ dueDateReminderText }}
-			</ActionButton>
+			</NcActionButton>
 
-			<ActionButton v-if="canManage && !isDueSubmenuActive"
+			<NcActionButton v-if="canManage && !isDueSubmenuActive"
 				icon="icon-delete"
 				:close-after-click="true"
 				@click="actionDelete">
 				{{ t('deck', 'Delete board') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 	<div v-else-if="editing" class="board-edit">
-		<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
+		<NcColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
 			<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
-		</ColorPicker>
+		</NcColorPicker>
 		<form @submit.prevent.stop="applyEdit">
 			<input v-model="editTitle"
 				v-focus
 				type="text"
 				required>
 			<input type="submit" value="" class="icon-confirm">
-			<Actions><ActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></Actions>
+			<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
 		</form>
 	</div>
 </template>
 
 <script>
-import { AppNavigationIconBullet, AppNavigationCounter, AppNavigationItem, ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
+import { NcAppNavigationIconBullet, NcAppNavigationCounter, NcAppNavigationItem, NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import ArchiveIcon from 'vue-material-design-icons/Archive'
 import CloneIcon from 'vue-material-design-icons/ContentDuplicate'
@@ -145,12 +145,12 @@ import CloneIcon from 'vue-material-design-icons/ContentDuplicate'
 export default {
 	name: 'AppNavigationBoard',
 	components: {
-		AppNavigationIconBullet,
-		AppNavigationCounter,
-		AppNavigationItem,
-		ColorPicker,
-		Actions,
-		ActionButton,
+		NcAppNavigationIconBullet,
+		NcAppNavigationCounter,
+		NcAppNavigationItem,
+		NcColorPicker,
+		NcActions,
+		NcActionButton,
 		ArchiveIcon,
 		CloneIcon,
 	},
diff --git a/src/components/navigation/AppNavigationBoardCategory.vue b/src/components/navigation/AppNavigationBoardCategory.vue
index be308e6c7..71b282dab 100644
--- a/src/components/navigation/AppNavigationBoardCategory.vue
+++ b/src/components/navigation/AppNavigationBoardCategory.vue
@@ -20,9 +20,8 @@
   -
   -->
 <template>
-	<AppNavigationItem v-if="boards.length > 0"
+	<NcAppNavigationItem v-if="boards.length > 0"
 		:title="text"
-		:icon="icon"
 		:to="to"
 		:exact="true"
 		:allow-collapse="collapsible"
@@ -31,17 +30,17 @@
 		<template #icon>
 			<slot name="icon" />
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 </template>
 
 <script>
 import AppNavigationBoard from './AppNavigationBoard'
-import { AppNavigationItem } from '@nextcloud/vue'
+import { NcAppNavigationItem } from '@nextcloud/vue'
 
 export default {
 	name: 'AppNavigationBoardCategory',
 	components: {
-		AppNavigationItem,
+		NcAppNavigationItem,
 		AppNavigationBoard,
 	},
 	props: {
@@ -57,10 +56,6 @@ export default {
 			type: String,
 			required: true,
 		},
-		icon: {
-			type: String,
-			required: true,
-		},
 		boards: {
 			type: Array,
 			required: true,
diff --git a/src/components/search/GlobalSearchResults.vue b/src/components/search/GlobalSearchResults.vue
index b18bc5089..89f8f5398 100644
--- a/src/components/search/GlobalSearchResults.vue
+++ b/src/components/search/GlobalSearchResults.vue
@@ -26,9 +26,9 @@
 			<RichText :text="t('deck', 'Search for {searchQuery} in all boards')" :arguments="queryStringArgs" />
 			<div v-if="loading" class="icon-loading-small" />
 		</h2>
-		<Actions>
-			<ActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
-		</Actions>
+		<NcActions>
+			<NcActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
+		</NcActions>
 		<div class="search-wrapper">
 			<div v-if="loading || filteredResults.length > 0" class="search-results">
 				<CardItem v-for="card in filteredResults"
@@ -59,7 +59,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 import InfiniteLoading from 'vue-infinite-loading'
 import RichText from '@juliushaertl/vue-richtext'
 import Placeholder from './Placeholder'
-import { Actions, ActionButton } from '@nextcloud/vue'
+import { NcActions, NcActionButton } from '@nextcloud/vue'
 
 const createCancelToken = () => axios.CancelToken.source()
 
@@ -88,7 +88,7 @@ function search({ query, cursor }) {
 
 export default {
 	name: 'GlobalSearchResults',
-	components: { CardItem, InfiniteLoading, RichText, Placeholder, Actions, ActionButton },
+	components: { CardItem, InfiniteLoading, RichText, Placeholder, NcActions, NcActionButton },
 	data() {
 		return {
 			results: [],
diff --git a/src/main.js b/src/main.js
index 70741d06d..cacbf01aa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -77,6 +77,8 @@ window.addEventListener('DOMContentLoaded', () => {
 /* eslint-disable-next-line no-new */
 new Vue({
 	el: '#content',
+	// eslint-disable-next-line vue/match-component-file-name
+	name: 'Deck',
 	router,
 	store,
 	data() {
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index e49851a62..4daf7a000 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div>
-		<DashboardWidget :items="cards"
+		<NcDashboardWidget :items="cards"
 			empty-content-icon="icon-deck"
 			:empty-content-message="t('deck', 'No upcoming cards')"
 			:show-more-text="t('deck', 'upcoming cards')"
@@ -46,7 +46,7 @@
 					</ul>
 				</a>
 			</template>
-		</DashboardWidget>
+		</NcDashboardWidget>
 		<div class="center-button">
 			<button @click="toggleAddCardModel">
 				{{ t('deck', 'Add card') }}
@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import { DashboardWidget } from '@nextcloud/vue-dashboard'
+import { NcDashboardWidget } from '@nextcloud/vue'
 import { mapGetters } from 'vuex'
 import labelStyle from './../mixins/labelStyle'
 import DueDate from '../components/cards/badges/DueDate'
@@ -68,7 +68,7 @@ export default {
 	name: 'Dashboard',
 	components: {
 		DueDate,
-		DashboardWidget,
+		NcDashboardWidget,
 		CardCreateDialog,
 	},
 	mixins: [labelStyle],