diff --git a/package-lock.json b/package-lock.json
index fbf3f447a..abe35c216 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,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.6",
 				"@nextcloud/vue-richtext": "^2.0.0",
 				"core-js": "^3.25.0",
 				"dompurify": "^2.4.0",
@@ -1878,6 +1878,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.10.4",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
@@ -2278,43 +2291,43 @@
 			}
 		},
 		"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.6",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0-beta.6.tgz",
+			"integrity": "sha512-abJA+mHwHGcKw5AJ8KTOI2NstCr5Cdz/W6REc+eshs/zer4rHqW9XwJvYrfxDbDHIN0OSzIqJ/aoWkOxI28U6Q==",
 			"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/initial-state": "^2.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-richtext": {
@@ -2335,77 +2348,6 @@
 				"vue": "^2.7.8"
 			}
 		},
-		"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/@nextcloud/typings": {
-			"version": "0.2.4",
-			"resolved": "https://registry.npmjs.org/@nextcloud/typings/-/typings-0.2.4.tgz",
-			"integrity": "sha512-49M8XUDQH27VIQE+13KrqSOYcyOsDUk6Yfw17jbBVtXFoDJ3YBSYYq8YaKeAM3Lz2JVbEpqQW9suAT+EyYSb6g==",
-			"dependencies": {
-				"@types/jquery": "2.0.54"
-			}
-		},
-		"node_modules/@nextcloud/vue/node_modules/@types/jquery": {
-			"version": "2.0.54",
-			"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.54.tgz",
-			"integrity": "sha512-D/PomKwNkDfSKD13DEVQT/pq2TUjN54c6uB341fEZanIzkjfGe7UaFuuaLZbpEiS5j7Wk2MUHAZqZIoECw29lg=="
-		},
-		"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/webpack-vue-config": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-5.3.0.tgz",
@@ -4787,12 +4729,12 @@
 			"peer": true
 		},
 		"node_modules/emoji-mart-vue-fast": {
-			"version": "10.2.2",
-			"resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-10.2.2.tgz",
-			"integrity": "sha512-SO37LI60Oksog3RhNpEUoQjfceBXfZ3yW9ALhlQgyut7hE6MghHsBJrGPeI6KKK8bQfTMBYlci/RWKsUsmbkPw==",
+			"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": {
@@ -6053,12 +5995,24 @@
 			"dev": true,
 			"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/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": {
@@ -10614,6 +10568,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"
 			},
@@ -10874,9 +10830,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",
@@ -13602,6 +13558,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.10.4",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
@@ -13915,104 +13884,39 @@
 			}
 		},
 		"@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.6",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0-beta.6.tgz",
+			"integrity": "sha512-abJA+mHwHGcKw5AJ8KTOI2NstCr5Cdz/W6REc+eshs/zer4rHqW9XwJvYrfxDbDHIN0OSzIqJ/aoWkOxI28U6Q==",
 			"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/initial-state": "^2.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"
-			},
-			"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"
-					}
-				},
-				"@nextcloud/typings": {
-					"version": "0.2.4",
-					"resolved": "https://registry.npmjs.org/@nextcloud/typings/-/typings-0.2.4.tgz",
-					"integrity": "sha512-49M8XUDQH27VIQE+13KrqSOYcyOsDUk6Yfw17jbBVtXFoDJ3YBSYYq8YaKeAM3Lz2JVbEpqQW9suAT+EyYSb6g==",
-					"requires": {
-						"@types/jquery": "2.0.54"
-					}
-				},
-				"@types/jquery": {
-					"version": "2.0.54",
-					"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.54.tgz",
-					"integrity": "sha512-D/PomKwNkDfSKD13DEVQT/pq2TUjN54c6uB341fEZanIzkjfGe7UaFuuaLZbpEiS5j7Wk2MUHAZqZIoECw29lg=="
-				},
-				"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"
-					}
-				}
+				"vue2-datepicker": "^3.11.0"
 			}
 		},
 		"@nextcloud/vue-richtext": {
@@ -15978,12 +15882,12 @@
 			}
 		},
 		"emoji-mart-vue-fast": {
-			"version": "10.2.2",
-			"resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-10.2.2.tgz",
-			"integrity": "sha512-SO37LI60Oksog3RhNpEUoQjfceBXfZ3yW9ALhlQgyut7hE6MghHsBJrGPeI6KKK8bQfTMBYlci/RWKsUsmbkPw==",
+			"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"
 			}
 		},
@@ -16939,12 +16843,21 @@
 			"dev": true,
 			"peer": true
 		},
-		"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"
+			}
+		},
+		"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": {
@@ -20415,6 +20328,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": {
@@ -20608,9 +20523,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",
diff --git a/package.json b/package.json
index 8066c879e..b54d7b2fa 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,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.6",
 		"@nextcloud/vue-richtext": "^2.0.0",
 		"core-js": "^3.25.0",
 		"dompurify": "^2.4.0",
diff --git a/src/js/App.vue b/src/js/App.vue
index f15899f20..5d5758d50 100644
--- a/src/js/App.vue
+++ b/src/js/App.vue
@@ -35,7 +35,7 @@
 <script>
 import UserSettingsDlg from './components/Settings/UserSettingsDlg.vue'
 import { getCurrentUser } from '@nextcloud/auth'
-import { Content as NcContent } from '@nextcloud/vue'
+import { NcContent } from '@nextcloud/vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { mapState, mapGetters, mapActions } from 'vuex'
 import '@nextcloud/dialogs/styles/toast.scss'
diff --git a/src/js/components/Actions/ActionChangeView.vue b/src/js/components/Actions/ActionChangeView.vue
index f7897a08d..ba3a071ba 100644
--- a/src/js/components/Actions/ActionChangeView.vue
+++ b/src/js/components/Actions/ActionChangeView.vue
@@ -22,20 +22,20 @@
 
 <template>
 	<div class="action change-view">
-		<VueButton v-tooltip="caption"
+		<NcButton v-tooltip="caption"
 			type="tertiary"
 			@click="clickAction()">
 			<template #icon>
 				<ListViewIcon v-if="viewMode === 'table-view'" />
 				<TableViewIcon v-else />
 			</template>
-		</VueButton>
+		</NcButton>
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
 import ListViewIcon from 'vue-material-design-icons/ViewListOutline.vue' // view-sequential-outline
 import TableViewIcon from 'vue-material-design-icons/Table.vue' // view-comfy-outline
@@ -46,7 +46,7 @@ export default {
 	components: {
 		ListViewIcon,
 		TableViewIcon,
-		VueButton,
+		NcButton,
 	},
 
 	computed: {
diff --git a/src/js/components/Actions/ActionDelete.vue b/src/js/components/Actions/ActionDelete.vue
index 7c82bf6c2..2adddd9f3 100644
--- a/src/js/components/Actions/ActionDelete.vue
+++ b/src/js/components/Actions/ActionDelete.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="">
-		<VueButton type="tertiary">
+		<NcButton type="tertiary">
 			<template #icon>
 				<UndoIcon v-if="deleteTimeout"
 					v-tooltip="countdownTitle"
@@ -33,12 +33,12 @@
 					:size="iconSize"
 					@click="deleteItem()" />
 			</template>
-		</VueButton>
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import UndoIcon from 'vue-material-design-icons/ArrowULeftTop.vue'
 
@@ -47,7 +47,7 @@ export default {
 	components: {
 		DeleteIcon,
 		UndoIcon,
-		VueButton,
+		NcButton,
 	},
 
 	props: {
diff --git a/src/js/components/Actions/ActionSendConfirmedOptions.vue b/src/js/components/Actions/ActionSendConfirmedOptions.vue
index 88f83f6ae..fe36c6d0e 100644
--- a/src/js/components/Actions/ActionSendConfirmedOptions.vue
+++ b/src/js/components/Actions/ActionSendConfirmedOptions.vue
@@ -24,12 +24,12 @@
 	<div class="action send-confirmations">
 		<div class="confirmation-button">
 			<h2>{{ headerCaption }}</h2>
-			<VueButton v-tooltip="caption" @click="clickAction()">
+			<NcButton v-tooltip="caption" @click="clickAction()">
 				<template #icon>
 					<EmailCheckIcon />
 				</template>
 				{{ t('polls', 'Send confirmation emails') }}
-			</VueButton>
+			</NcButton>
 		</div>
 		<div v-if="confirmations" class="confirmation-info">
 			<div v-if="confirmations.sent" class="sent-confirmations">
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import EmailCheckIcon from 'vue-material-design-icons/EmailCheck.vue' // view-comfy-outline
 import { showError, showSuccess } from '@nextcloud/dialogs'
 
@@ -62,7 +62,7 @@ export default {
 
 	components: {
 		EmailCheckIcon,
-		VueButton,
+		NcButton,
 	},
 
 	data() {
diff --git a/src/js/components/Actions/ActionSortOptions.vue b/src/js/components/Actions/ActionSortOptions.vue
index 33a59d8af..e69c5c0d2 100644
--- a/src/js/components/Actions/ActionSortOptions.vue
+++ b/src/js/components/Actions/ActionSortOptions.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="action sort-options">
-		<VueButton v-tooltip="caption"
+		<NcButton v-tooltip="caption"
 			type="tertiary"
 			@click="clickAction()">
 			<template #icon>
@@ -30,13 +30,13 @@
 				<SortByOriginalOrderIcon v-else-if="isRanked && pollType === 'textPoll'" />
 				<SortByRankIcon v-else />
 			</template>
-		</VueButton>
+		</NcButton>
 	</div>
 </template>
 
 <script>
 import { mapState, mapMutations } from 'vuex'
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import SortByOriginalOrderIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import SortByRankIcon from 'vue-material-design-icons/FormatListNumbered.vue'
 import SortByDateOptionIcon from 'vue-material-design-icons/SortClockAscendingOutline.vue'
@@ -48,7 +48,7 @@ export default {
 		SortByRankIcon,
 		SortByOriginalOrderIcon,
 		SortByDateOptionIcon,
-		VueButton,
+		NcButton,
 	},
 
 	computed: {
diff --git a/src/js/components/Actions/ActionToggleSidebar.vue b/src/js/components/Actions/ActionToggleSidebar.vue
index abef1a465..4e7087b90 100644
--- a/src/js/components/Actions/ActionToggleSidebar.vue
+++ b/src/js/components/Actions/ActionToggleSidebar.vue
@@ -22,18 +22,18 @@
 
 <template>
 	<div class="action toggle-sidebar">
-		<VueButton v-tooltip="caption"
+		<NcButton v-tooltip="caption"
 			type="tertiary"
 			@click="clickAction()">
 			<template #icon>
 				<SidebarIcon />
 			</template>
-		</VueButton>
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
 import SidebarIcon from 'vue-material-design-icons/TextAccount.vue' // view-comfy-outline
 
@@ -42,7 +42,7 @@ export default {
 
 	components: {
 		SidebarIcon,
-		VueButton,
+		NcButton,
 	},
 
 	data() {
diff --git a/src/js/components/Activity/ActivityItem.vue b/src/js/components/Activity/ActivityItem.vue
index 40ebe82ba..2d0826586 100644
--- a/src/js/components/Activity/ActivityItem.vue
+++ b/src/js/components/Activity/ActivityItem.vue
@@ -32,7 +32,7 @@
 <script>
 import moment from '@nextcloud/moment'
 import { RichText } from '@nextcloud/vue-richtext'
-import { UserBubble } from '@nextcloud/vue'
+import { NcUserBubble } from '@nextcloud/vue'
 import SimpleLink from '../../helpers/SimpleLink.js'
 import GuestBubble from '../../helpers/GuestBubble.js'
 
@@ -77,7 +77,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/js/components/Base/Badge.vue b/src/js/components/Base/BadgeDiv.vue
similarity index 98%
rename from src/js/components/Base/Badge.vue
rename to src/js/components/Base/BadgeDiv.vue
index 81648a877..145e98613 100644
--- a/src/js/components/Base/Badge.vue
+++ b/src/js/components/Base/BadgeDiv.vue
@@ -33,7 +33,7 @@
 
 <script>
 export default {
-	name: 'Badge',
+	name: 'BadgeDiv',
 	props: {
 		tag: {
 			type: String,
diff --git a/src/js/components/Base/RadioGroupDiv.vue b/src/js/components/Base/RadioGroupDiv.vue
index bb8de9e16..80615fc1a 100644
--- a/src/js/components/Base/RadioGroupDiv.vue
+++ b/src/js/components/Base/RadioGroupDiv.vue
@@ -22,7 +22,7 @@
 
 <template lang="html">
 	<div class="radio-group-div">
-		<CheckboxRadioSwitch v-for="(option, index) in options"
+		<NcCheckboxRadioSwitch v-for="(option, index) in options"
 			:key="option.value"
 			:checked.sync="selectedValue"
 			:value="option.value"
@@ -30,12 +30,12 @@
 			type="radio"
 			@update:checked="$emit('input', option.value)">
 			{{ option.label }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 	</div>
 </template>
 
 <script>
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 const RandId = () => Math.random().toString(36).replace(/[^a-z]+/g, '').slice(2, 12)
 
@@ -43,7 +43,7 @@ export default {
 	name: 'RadioGroupDiv',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	props: {
diff --git a/src/js/components/Calendar/CalendarPeek.vue b/src/js/components/Calendar/CalendarPeek.vue
index abd660332..b808f5aad 100644
--- a/src/js/components/Calendar/CalendarPeek.vue
+++ b/src/js/components/Calendar/CalendarPeek.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Popover class="calendar-peek">
+	<NcPopover class="calendar-peek">
 		<template v-if="events.length" #trigger>
 			<div class="calendar-peek__conflict icon icon-calendar" />
 			<p class="calendar-peek__caption">
@@ -34,14 +34,14 @@
 				:calendar-event="eventItem"
 				:option="option" />
 		</div>
-	</Popover>
+	</NcPopover>
 </template>
 n
 <script>
 
 import { mapState } from 'vuex'
 import { orderBy } from 'lodash'
-import { Popover } from '@nextcloud/vue'
+import { NcPopover } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import CalendarInfo from '../Calendar/CalendarInfo.vue'
 import { showError } from '@nextcloud/dialogs'
@@ -51,7 +51,7 @@ export default {
 
 	components: {
 		CalendarInfo,
-		Popover,
+		NcPopover,
 	},
 
 	props: {
diff --git a/src/js/components/Configuration/ConfigAdminAccess.vue b/src/js/components/Configuration/ConfigAdminAccess.vue
index 395393b6e..e06bf4f5c 100644
--- a/src/js/components/Configuration/ConfigAdminAccess.vue
+++ b/src/js/components/Configuration/ConfigAdminAccess.vue
@@ -21,20 +21,20 @@
   -->
 
 <template>
-	<CheckboxRadioSwitch :checked.sync="adminAccess" type="switch">
+	<NcCheckboxRadioSwitch :checked.sync="adminAccess" type="switch">
 		{{ label }}
-	</CheckboxRadioSwitch>
+	</NcCheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAdminAccess',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	data() {
diff --git a/src/js/components/Configuration/ConfigAllowComment.vue b/src/js/components/Configuration/ConfigAllowComment.vue
index 7982d6b1e..4e67553c7 100644
--- a/src/js/components/Configuration/ConfigAllowComment.vue
+++ b/src/js/components/Configuration/ConfigAllowComment.vue
@@ -21,20 +21,20 @@
   -->
 
 <template>
-	<CheckboxRadioSwitch :checked.sync="allowComment" type="switch">
+	<NcCheckboxRadioSwitch :checked.sync="allowComment" type="switch">
 		{{ t('polls', 'Allow Comments') }}
-	</CheckboxRadioSwitch>
+	</NcCheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAllowComment',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	computed: {
diff --git a/src/js/components/Configuration/ConfigAllowMayBe.vue b/src/js/components/Configuration/ConfigAllowMayBe.vue
index e55945fc6..b0b2566f1 100644
--- a/src/js/components/Configuration/ConfigAllowMayBe.vue
+++ b/src/js/components/Configuration/ConfigAllowMayBe.vue
@@ -21,20 +21,20 @@
   -->
 
 <template>
-	<CheckboxRadioSwitch :checked.sync="allowMaybe" type="switch">
+	<NcCheckboxRadioSwitch :checked.sync="allowMaybe" type="switch">
 		{{ label }}
-	</CheckboxRadioSwitch>
+	</NcCheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAllowMayBe',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	data() {
diff --git a/src/js/components/Configuration/ConfigAnonymous.vue b/src/js/components/Configuration/ConfigAnonymous.vue
index 35c876fff..e542ba2e4 100644
--- a/src/js/components/Configuration/ConfigAnonymous.vue
+++ b/src/js/components/Configuration/ConfigAnonymous.vue
@@ -21,20 +21,20 @@
   -->
 
 <template>
-	<CheckboxRadioSwitch :checked.sync="anonymous" type="switch">
+	<NcCheckboxRadioSwitch :checked.sync="anonymous" type="switch">
 		{{ t('polls', 'Anonymous poll') }}
-	</CheckboxRadioSwitch>
+	</NcCheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAnonymous',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	computed: {
diff --git a/src/js/components/Configuration/ConfigAutoReminder.vue b/src/js/components/Configuration/ConfigAutoReminder.vue
index 17bfe6a65..2a5144249 100644
--- a/src/js/components/Configuration/ConfigAutoReminder.vue
+++ b/src/js/components/Configuration/ConfigAutoReminder.vue
@@ -22,16 +22,16 @@
 
 <template>
 	<div class="auto-reminder-switch">
-		<CheckboxRadioSwitch :checked.sync="autoReminder" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="autoReminder" type="switch">
 			{{ t('polls', 'Use Autoreminder') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<Popover>
 			<template #trigger>
-				<Actions>
-					<ActionButton icon="icon-info">
+				<NcActions>
+					<NcActionButton icon="icon-info">
 						{{ t('polls', 'Autoreminder informations') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</template>
 			<AutoReminderInformation />
 		</Popover>
@@ -40,15 +40,15 @@
 
 <script>
 import { mapState } from 'vuex'
-import { Actions, ActionButton, Popover, CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcActions, NcActionButton, Popover, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAutoReminder',
 
 	components: {
-		CheckboxRadioSwitch,
-		Actions,
-		ActionButton,
+		NcCheckboxRadioSwitch,
+		NcActions,
+		NcActionButton,
 		Popover,
 		AutoReminderInformation: () => import('./AutoReminderInformation.vue'),
 	},
diff --git a/src/js/components/Configuration/ConfigClosing.vue b/src/js/components/Configuration/ConfigClosing.vue
index 925fbbeb9..3f9503468 100644
--- a/src/js/components/Configuration/ConfigClosing.vue
+++ b/src/js/components/Configuration/ConfigClosing.vue
@@ -22,24 +22,24 @@
 
 <template>
 	<div>
-		<VueButton @click="toggleClosed()">
+		<NcButton @click="toggleClosed()">
 			<template #icon>
 				<OpenPollIcon v-if="closed" />
 				<ClosePollIcon v-else />
 			</template>
 			{{ closed ? t('polls', 'Reopen poll'): t('polls', 'Close poll') }}
-		</VueButton>
-		<CheckboxRadioSwitch v-show="!closed" :checked.sync="useExpire" type="switch">
+		</NcButton>
+		<NcCheckboxRadioSwitch v-show="!closed" :checked.sync="useExpire" type="switch">
 			{{ t('polls', 'Poll closing date') }}
-		</CheckboxRadioSwitch>
-		<DatetimePicker v-show="useExpire && !closed" v-model="expire" v-bind="expirationDatePicker" />
+		</NcCheckboxRadioSwitch>
+		<NcDatetimePicker v-show="useExpire && !closed" v-model="expire" v-bind="expirationDatePicker" />
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import { Button as VueButton, DatetimePicker, CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcButton, NcDatetimePicker, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import OpenPollIcon from 'vue-material-design-icons/LockOpenVariant.vue'
 import ClosePollIcon from 'vue-material-design-icons/Lock.vue'
 
@@ -49,9 +49,9 @@ export default {
 	components: {
 		OpenPollIcon,
 		ClosePollIcon,
-		CheckboxRadioSwitch,
-		DatetimePicker,
-		VueButton,
+		NcCheckboxRadioSwitch,
+		NcDatetimePicker,
+		NcButton,
 	},
 
 	data() {
diff --git a/src/js/components/Configuration/ConfigOptionLimit.vue b/src/js/components/Configuration/ConfigOptionLimit.vue
index 487388346..a1087e637 100644
--- a/src/js/components/Configuration/ConfigOptionLimit.vue
+++ b/src/js/components/Configuration/ConfigOptionLimit.vue
@@ -22,9 +22,9 @@
 
 <template>
 	<div>
-		<CheckboxRadioSwitch :checked.sync="useOptionLimit" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="useOptionLimit" type="switch">
 			{{ t('polls', 'Limit "Yes" votes per option') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
 		<InputDiv v-if="optionLimit"
 			v-model="optionLimit"
@@ -33,25 +33,25 @@
 			inputmode="numeric"
 			use-num-modifiers />
 
-		<CheckboxRadioSwitch v-if="optionLimit"
+		<NcCheckboxRadioSwitch v-if="optionLimit"
 			class="indented"
 			:checked.sync="hideBookedUp"
 			type="switch">
 			{{ t('polls', 'Hide not available Options') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 	</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import InputDiv from '../Base/InputDiv.vue'
 
 export default {
 	name: 'ConfigOptionLimit',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		InputDiv,
 	},
 
diff --git a/src/js/components/Configuration/ConfigProposals.vue b/src/js/components/Configuration/ConfigProposals.vue
index 1e5f0427c..03c8b4ee2 100644
--- a/src/js/components/Configuration/ConfigProposals.vue
+++ b/src/js/components/Configuration/ConfigProposals.vue
@@ -22,30 +22,30 @@
 
 <template>
 	<div>
-		<CheckboxRadioSwitch :checked.sync="allowProposals" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="allowProposals" type="switch">
 			{{ t('polls', 'Allow Proposals') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<CheckboxRadioSwitch v-show="proposalsAllowed" :checked.sync="proposalExpiration" type="switch">
+		<NcCheckboxRadioSwitch v-show="proposalsAllowed" :checked.sync="proposalExpiration" type="switch">
 			{{ t('polls', 'Proposal closing date') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<DatetimePicker v-show="proposalExpiration && proposalsAllowed" v-model="pollExpire" v-bind="expirationDatePicker" />
+		<NcDatetimePicker v-show="proposalExpiration && proposalsAllowed" v-model="pollExpire" v-bind="expirationDatePicker" />
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import { CheckboxRadioSwitch, DatetimePicker } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcDatetimePicker } from '@nextcloud/vue'
 import { writePoll } from '../../mixins/writePoll.js'
 
 export default {
 	name: 'ConfigProposals',
 
 	components: {
-		CheckboxRadioSwitch,
-		DatetimePicker,
+		NcCheckboxRadioSwitch,
+		NcDatetimePicker,
 	},
 
 	mixins: [writePoll],
diff --git a/src/js/components/Configuration/ConfigUseNo.vue b/src/js/components/Configuration/ConfigUseNo.vue
index dccac3fa0..73ea9da84 100644
--- a/src/js/components/Configuration/ConfigUseNo.vue
+++ b/src/js/components/Configuration/ConfigUseNo.vue
@@ -21,20 +21,20 @@
   -->
 
 <template>
-	<CheckboxRadioSwitch :checked.sync="deleteVoteOnNo" type="switch">
+	<NcCheckboxRadioSwitch :checked.sync="deleteVoteOnNo" type="switch">
 		{{ label }}
-	</CheckboxRadioSwitch>
+	</NcCheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigUseNo',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	data() {
diff --git a/src/js/components/Configuration/ConfigVoteLimit.vue b/src/js/components/Configuration/ConfigVoteLimit.vue
index 871aa2483..5597f1d2e 100644
--- a/src/js/components/Configuration/ConfigVoteLimit.vue
+++ b/src/js/components/Configuration/ConfigVoteLimit.vue
@@ -22,9 +22,9 @@
 
 <template>
 	<div>
-		<CheckboxRadioSwitch :checked.sync="useVoteLimit" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="useVoteLimit" type="switch">
 			{{ t('polls', 'Limit "Yes" votes per user') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
 		<InputDiv v-if="voteLimit"
 			v-model="voteLimit"
@@ -37,14 +37,14 @@
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import InputDiv from '../Base/InputDiv.vue'
 
 export default {
 	name: 'ConfigVoteLimit',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		InputDiv,
 	},
 
diff --git a/src/js/components/Export/ExportPoll.vue b/src/js/components/Export/ExportPoll.vue
index 14e9d1535..04f2edfa6 100644
--- a/src/js/components/Export/ExportPoll.vue
+++ b/src/js/components/Export/ExportPoll.vue
@@ -21,45 +21,45 @@
   -->
 
 <template lang="html">
-	<Actions>
+	<NcActions>
 		<template #icon>
 			<ExportIcon />
 		</template>
-		<ActionButton close-after-click @click="exportFile('xlsx')">
+		<NcActionButton close-after-click @click="exportFile('xlsx')">
 			<template #icon>
 				<ExcelIcon />
 			</template>
 			{{ t('polls', 'Download Excel spreadsheet') }}
-		</ActionButton>
+		</NcActionButton>
 
-		<ActionButton close-after-click @click="exportFile('ods')">
+		<NcActionButton close-after-click @click="exportFile('ods')">
 			<template #icon>
 				<FileTableIcon />
 			</template>
 			{{ t('polls', 'Download Open Document spreadsheet') }}
-		</ActionButton>
+		</NcActionButton>
 
-		<ActionButton close-after-click @click="exportFile('csv')">
+		<NcActionButton close-after-click @click="exportFile('csv')">
 			<template #icon>
 				<CsvIcon />
 			</template>
 			{{ t('polls', 'Download CSV file') }}
-		</ActionButton>
+		</NcActionButton>
 
-		<ActionButton close-after-click @click="exportFile('html')">
+		<NcActionButton close-after-click @click="exportFile('html')">
 			<template #icon>
 				<XmlIcon />
 			</template>
 			{{ t('polls', 'Download HTML file') }}
-		</ActionButton>
-	</Actions>
+		</NcActionButton>
+	</NcActions>
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex'
 import { saveAs } from 'file-saver'
 import { utils as xlsxUtils, write as xlsxWrite } from 'xlsx'
-import { Actions, ActionButton } from '@nextcloud/vue'
+import { NcActions, NcActionButton } from '@nextcloud/vue'
 import ExcelIcon from 'vue-material-design-icons/MicrosoftExcel.vue'
 import FileTableIcon from 'vue-material-design-icons/FileTableOutline.vue'
 import CsvIcon from 'vue-material-design-icons/FileDelimited.vue'
@@ -69,8 +69,8 @@ import ExportIcon from 'vue-material-design-icons/FileDownloadOutline.vue'
 export default {
 	name: 'ExportPoll',
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		CsvIcon,
 		ExcelIcon,
 		FileTableIcon,
diff --git a/src/js/components/Navigation/PollNavigationItems.vue b/src/js/components/Navigation/PollNavigationItems.vue
index d22e02cb2..b7b601115 100644
--- a/src/js/components/Navigation/PollNavigationItems.vue
+++ b/src/js/components/Navigation/PollNavigationItems.vue
@@ -21,7 +21,7 @@
   -->
 
 <template lang="html">
-	<AppNavigationItem :title="poll.title"
+	<NcAppNavigationItem :title="poll.title"
 		:to="{name: 'vote', params: {id: poll.id}}"
 		:class="{ closed: closed }">
 		<template #icon>
@@ -29,46 +29,46 @@
 			<DatePollIcon v-else />
 		</template>
 		<template #actions>
-			<ActionButton v-if="isPollCreationAllowed"
+			<NcActionButton v-if="isPollCreationAllowed"
 				@click="$emit('clone-poll')">
 				<template #icon>
 					<ClonePollIcon />
 				</template>
 				{{ t('polls', 'Clone poll') }}
-			</ActionButton>
+			</NcActionButton>
 
-			<ActionButton v-if="poll.allowEdit && !poll.deleted"
+			<NcActionButton v-if="poll.allowEdit && !poll.deleted"
 				@click="$emit('toggle-archive')">
 				<template #icon>
 					<ArchivePollIcon />
 				</template>
 				{{ t('polls', 'Archive poll') }}
-			</ActionButton>
+			</NcActionButton>
 
-			<ActionButton v-if="poll.allowEdit && poll.deleted"
+			<NcActionButton v-if="poll.allowEdit && poll.deleted"
 				@click="$emit('toggle-archive')">
 				<template #icon>
 					<RestorePollIcon />
 				</template>
 				{{ t('polls', 'Restore poll') }}
-			</ActionButton>
+			</NcActionButton>
 
-			<ActionButton v-if="poll.allowEdit && poll.deleted"
+			<NcActionButton v-if="poll.allowEdit && poll.deleted"
 				class="danger"
 				@click="$emit('delete-poll')">
 				<template #icon>
 					<DeletePollIcon />
 				</template>
 				{{ t('polls', 'Delete poll') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 </template>
 
 <script>
 
 import { mapState, mapGetters } from 'vuex'
-import { ActionButton, AppNavigationItem } from '@nextcloud/vue'
+import { NcActionButton, NcAppNavigationItem } from '@nextcloud/vue'
 import DeletePollIcon from 'vue-material-design-icons/Delete.vue'
 import ClonePollIcon from 'vue-material-design-icons/ContentCopy.vue'
 import ArchivePollIcon from 'vue-material-design-icons/Archive.vue'
@@ -80,8 +80,8 @@ export default {
 	name: 'PollNavigationItems',
 
 	components: {
-		ActionButton,
-		AppNavigationItem,
+		NcActionButton,
+		NcAppNavigationItem,
 		DeletePollIcon,
 		ClonePollIcon,
 		ArchivePollIcon,
diff --git a/src/js/components/Options/OptionCloneDate.vue b/src/js/components/Options/OptionCloneDate.vue
index 3487aeefb..74cca26a7 100644
--- a/src/js/components/Options/OptionCloneDate.vue
+++ b/src/js/components/Options/OptionCloneDate.vue
@@ -26,7 +26,7 @@
 		<p>{{ t('polls', 'Create a sequence of date options starting with {dateOption}.', { dateOption: dateBaseOptionString }) }}</p>
 
 		<h3> {{ t('polls', 'Step unit') }} </h3>
-		<Multiselect v-model="sequence.unit"
+		<NcMultiselect v-model="sequence.unit"
 			:options="dateUnits"
 			label="name"
 			track-by="value" />
@@ -46,13 +46,13 @@
 		</div>
 
 		<div class="modal__buttons">
-			<VueButton @click="$emit('close')">
+			<NcButton @click="$emit('close')">
 				{{ t('polls', 'Cancel') }}
-			</VueButton>
+			</NcButton>
 
-			<VueButton type="primary" @click="createSequence()">
+			<NcButton type="primary" @click="createSequence()">
 				{{ t('polls', 'OK') }}
-			</VueButton>
+			</NcButton>
 		</div>
 	</div>
 </template>
@@ -60,7 +60,7 @@
 <script>
 
 import moment from '@nextcloud/moment'
-import { Button as VueButton, Multiselect } from '@nextcloud/vue'
+import { NcButton, NcMultiselect } from '@nextcloud/vue'
 import { dateUnits } from '../../mixins/dateMixins.js'
 import InputDiv from '../Base/InputDiv.vue'
 
@@ -69,8 +69,8 @@ export default {
 
 	components: {
 		InputDiv,
-		Multiselect,
-		VueButton,
+		NcMultiselect,
+		NcButton,
 	},
 
 	mixins: [dateUnits],
diff --git a/src/js/components/Options/OptionItemOwner.vue b/src/js/components/Options/OptionItemOwner.vue
index bc79d716f..ed4f1ec97 100644
--- a/src/js/components/Options/OptionItemOwner.vue
+++ b/src/js/components/Options/OptionItemOwner.vue
@@ -26,7 +26,7 @@
 			:title="t('polls', 'Delete option')"
 			@delete="removeOption(option)" />
 
-		<Avatar v-else-if="option.owner.userId && option.owner.userId !== pollOwner"
+		<NcAvatar v-else-if="option.owner.userId && option.owner.userId !== pollOwner"
 			:user="option.owner.userId"
 			:display-name="option.owner.displayName"
 			:is-no-user="option.owner.isNoUser"
@@ -38,7 +38,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Avatar } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 import { removeOption } from '../../mixins/optionMixins.js'
 import ActionDelete from '../Actions/ActionDelete.vue'
 
@@ -46,7 +46,7 @@ export default {
 	name: 'OptionItemOwner',
 
 	components: {
-		Avatar,
+		NcAvatar,
 		ActionDelete,
 	},
 
diff --git a/src/js/components/Options/OptionsDate.vue b/src/js/components/Options/OptionsDate.vue
index 707e8ab6d..292b8a60f 100644
--- a/src/js/components/Options/OptionsDate.vue
+++ b/src/js/components/Options/OptionsDate.vue
@@ -41,15 +41,15 @@
 						:title="t('polls', 'Delete option')"
 						@delete="removeOption(option)" />
 
-					<Actions v-if="!closed" class="action">
-						<ActionButton v-if="!closed" @click="cloneOptionModal(option)">
+					<NcActions v-if="!closed" class="action">
+						<NcActionButton v-if="!closed" @click="cloneOptionModal(option)">
 							<template #icon>
 								<CloneDateIcon />
 							</template>
 							{{ t('polls', 'Clone option') }}
-						</ActionButton>
-					</Actions>
-					<VueButton v-if="closed"
+						</NcActionButton>
+					</NcActions>
+					<NcVueButton v-if="closed"
 						v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
 						type="tertiary"
 						@click="confirmOption(option)">
@@ -57,12 +57,12 @@
 							<UnconfirmIcon v-if="option.confirmed" />
 							<ConfirmIcon v-else />
 						</template>
-					</VueButton>
+					</NcVueButton>
 				</template>
 			</OptionItem>
 		</transition-group>
 
-		<EmptyContent v-else>
+		<NcEmptyContent v-else>
 			<template #icon>
 				<DatePollIcon />
 			</template>
@@ -72,17 +72,17 @@
 			</template>
 
 			{{ t('polls', 'No vote options') }}
-		</EmptyContent>
+		</NcEmptyContent>
 
-		<Modal v-if="cloneModal" size="small" :can-close="false">
+		<NcModal v-if="cloneModal" size="small" :can-close="false">
 			<OptionCloneDate :option="optionToClone" class="modal__content" @close="closeModal()" />
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import { Actions, ActionButton, Button as VueButton, EmptyContent, Modal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcVueButton, NcEmptyContent, NcModal } from '@nextcloud/vue'
 import ActionDelete from '../Actions/ActionDelete.vue'
 import OptionCloneDate from './OptionCloneDate.vue'
 import OptionItem from './OptionItem.vue'
@@ -100,14 +100,14 @@ export default {
 		CloneDateIcon,
 		ConfirmIcon,
 		UnconfirmIcon,
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		ActionDelete,
-		EmptyContent,
-		Modal,
+		NcEmptyContent,
+		NcModal,
 		OptionCloneDate,
 		OptionItem,
-		VueButton,
+		NcVueButton,
 		DatePollIcon,
 		OptionItemOwner: () => import('./OptionItemOwner.vue'),
 	},
diff --git a/src/js/components/Options/OptionsDateAdd.vue b/src/js/components/Options/OptionsDateAdd.vue
index 48c691dad..3ffb768d4 100644
--- a/src/js/components/Options/OptionsDateAdd.vue
+++ b/src/js/components/Options/OptionsDateAdd.vue
@@ -21,25 +21,25 @@
   -->
 
 <template>
-	<DatetimePicker v-model="pickerSelection"
+	<NcDatetimePicker v-model="pickerSelection"
 		v-bind="pickerOptions"
 		:open.sync="pickerOpen"
 		style="width: inherit;"
 		@change="changedDate"
 		@pick="pickedDate">
 		<template #input>
-			<VueButton type="primary" :aria-label="buttonAriaLabel">
+			<NcButton type="primary" :aria-label="buttonAriaLabel">
 				<template #icon>
 					<AddDateIcon />
 				</template>
 				<span v-if="caption"> {{ caption }} </span>
-			</VueButton>
+			</NcButton>
 		</template>
 
 		<template #header>
-			<CheckboxRadioSwitch :checked.sync="useRange" class="range" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="useRange" class="range" type="switch">
 				{{ t('polls', 'Select range') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<div class="picker-buttons">
 				<button v-if="useTime" @click="toggleTimePanel">
 					{{ showTimePanel
@@ -71,14 +71,15 @@
 				{{ t('polls', 'Pick a day.') }}
 			</div>
 		</template>
-	</DateTimePicker>
+		</DateTimePicker>
+	</ncdatetimepicker>
 </template>
 
 <script>
 
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import { Button as VueButton, CheckboxRadioSwitch, DatetimePicker } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcDatetimePicker } from '@nextcloud/vue'
 import FlexSpacer from '../Base/FlexSpacer.vue'
 import AddDateIcon from 'vue-material-design-icons/CalendarPlus.vue'
 
@@ -87,9 +88,9 @@ export default {
 
 	components: {
 		AddDateIcon,
-		VueButton,
-		CheckboxRadioSwitch,
-		DatetimePicker,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcDatetimePicker,
 		FlexSpacer,
 	},
 
diff --git a/src/js/components/Options/OptionsDateShift.vue b/src/js/components/Options/OptionsDateShift.vue
index b3bfcd4f9..2b9226bf9 100644
--- a/src/js/components/Options/OptionsDateShift.vue
+++ b/src/js/components/Options/OptionsDateShift.vue
@@ -27,17 +27,17 @@
 		</div>
 		<div v-else class="select-unit">
 			<InputDiv v-model="shift.step" use-num-modifiers />
-			<Multiselect v-model="shift.unit"
+			<NcMultiselect v-model="shift.unit"
 				:options="dateUnits"
 				label="name"
 				track-by="value" />
-			<VueButton class="submit"
+			<NcButton class="submit"
 				type="tertiary"
 				@click="shiftDates(shift)">
 				<template #icon>
 					<SubmitIcon />
 				</template>
-			</VueButton>
+			</NcButton>
 		</div>
 	</div>
 </template>
@@ -46,7 +46,7 @@
 
 import { mapState, mapGetters } from 'vuex'
 import InputDiv from '../Base/InputDiv.vue'
-import { Button as VueButton, Multiselect } from '@nextcloud/vue'
+import { NcButton, NcMultiselect } from '@nextcloud/vue'
 import { dateUnits } from '../../mixins/dateMixins.js'
 import SubmitIcon from 'vue-material-design-icons/ArrowRight.vue'
 
@@ -56,8 +56,8 @@ export default {
 	components: {
 		SubmitIcon,
 		InputDiv,
-		Multiselect,
-		VueButton,
+		NcMultiselect,
+		NcButton,
 	},
 
 	mixins: [dateUnits],
diff --git a/src/js/components/Options/OptionsText.vue b/src/js/components/Options/OptionsText.vue
index b842d7b2d..a990550c1 100644
--- a/src/js/components/Options/OptionsText.vue
+++ b/src/js/components/Options/OptionsText.vue
@@ -44,7 +44,7 @@
 						<ActionDelete v-if="!closed"
 							:title="t('polls', 'Delete option')"
 							@delete="removeOption(option)" />
-						<VueButton v-if="closed"
+						<NcButton v-if="closed"
 							v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
 							type="tertiary"
 							@click="confirmOption(option)">
@@ -52,13 +52,13 @@
 								<UnconfirmIcon v-if="option.confirmed" />
 								<ConfirmIcon v-else />
 							</template>
-						</VueButton>
+						</NcButton>
 					</template>
 				</OptionItem>
 			</transition-group>
 		</draggable>
 
-		<EmptyContent v-else>
+		<NcEmptyContent v-else>
 			<template #icon>
 				<TextPollIcon />
 			</template>
@@ -68,13 +68,13 @@
 			</template>
 
 			{{ t('polls', 'No vote options') }}
-		</EmptyContent>
+		</NcEmptyContent>
 	</div>
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import { Button as VueButton, EmptyContent } from '@nextcloud/vue'
+import { NcButton, NcEmptyContent } from '@nextcloud/vue'
 import draggable from 'vuedraggable'
 import ActionDelete from '../Actions/ActionDelete.vue'
 import OptionItem from './OptionItem.vue'
@@ -91,11 +91,11 @@ export default {
 		ConfirmIcon,
 		UnconfirmIcon,
 		ActionDelete,
-		EmptyContent,
+		NcEmptyContent,
 		draggable,
 		OptionItem,
 		OptionItemOwner,
-		VueButton,
+		NcButton,
 		TextPollIcon,
 		OptionsTextAdd: () => import('./OptionsTextAdd.vue'),
 	},
diff --git a/src/js/components/Options/OptionsTextAddBulk.vue b/src/js/components/Options/OptionsTextAddBulk.vue
index 6d6526345..9b2481d78 100644
--- a/src/js/components/Options/OptionsTextAddBulk.vue
+++ b/src/js/components/Options/OptionsTextAddBulk.vue
@@ -22,16 +22,16 @@
 
 <template>
 	<div>
-		<Actions>
-			<ActionButton @click="showModal = true">
+		<NcActions>
+			<NcActionButton @click="showModal = true">
 				<template #icon>
 					<PasteIcon />
 				</template>
 				{{ caption }}
-			</ActionButton>
-		</Actions>
+			</NcActionButton>
+		</NcActions>
 
-		<Modal v-if="showModal" size="small" :can-close="false">
+		<NcModal v-if="showModal" size="small" :can-close="false">
 			<div class="option-clone-date modal__content">
 				<h2>{{ t('polls', 'Create multiple options at once') }}</h2>
 
@@ -42,22 +42,22 @@
 					:placeholder="placeholder" />
 
 				<div class="modal__buttons">
-					<VueButton @click="showModal = false">
+					<NcButton @click="showModal = false">
 						{{ t('polls', 'Close') }}
-					</VueButton>
+					</NcButton>
 
-					<VueButton type="primary" @click="addOptionsList()">
+					<NcButton type="primary" @click="addOptionsList()">
 						{{ t('polls', 'OK') }}
-					</VueButton>
+					</NcButton>
 				</div>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { Actions, ActionButton, Button as VueButton, Modal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcButton, NcModal } from '@nextcloud/vue'
 import PasteIcon from 'vue-material-design-icons/ClipboardTextMultiple.vue'
 
 export default {
@@ -65,10 +65,10 @@ export default {
 
 	components: {
 		PasteIcon,
-		Actions,
-		ActionButton,
-		Modal,
-		VueButton,
+		NcActions,
+		NcActionButton,
+		NcModal,
+		NcButton,
 	},
 
 	props: {
diff --git a/src/js/components/Poll/PollHeaderButtons.vue b/src/js/components/Poll/PollHeaderButtons.vue
index f6f2e9e4c..691595c40 100644
--- a/src/js/components/Poll/PollHeaderButtons.vue
+++ b/src/js/components/Poll/PollHeaderButtons.vue
@@ -23,17 +23,17 @@
 <template>
 	<div class="poll-header-buttons">
 		<UserMenu v-if="showUserMenu" />
-		<Popover>
+		<NcPopover>
 			<template #trigger>
-				<VueButton v-tooltip="t('polls', 'Poll informations')"
+				<NcButton v-tooltip="t('polls', 'Poll informations')"
 					type="tertiary">
 					<template #icon>
 						<PollInformationIcon />
 					</template>
-				</VueButton>
+				</NcButton>
 			</template>
 			<PollInformation />
-		</Popover>
+		</NcPopover>
 		<ExportPoll v-if="allowPollDownload" />
 		<ActionToggleSidebar v-if="allowEdit || allowComment" />
 	</div>
@@ -41,7 +41,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import { Button as VueButton, Popover } from '@nextcloud/vue'
+import { NcButton, NcPopover } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
 import ActionToggleSidebar from '../Actions/ActionToggleSidebar.vue'
 import PollInformationIcon from 'vue-material-design-icons/InformationOutline.vue'
@@ -51,8 +51,8 @@ export default {
 	components: {
 		ActionToggleSidebar,
 		PollInformationIcon,
-		Popover,
-		VueButton,
+		NcPopover,
+		NcButton,
 		UserMenu: () => import('../User/UserMenu.vue'),
 		ExportPoll: () => import('../Export/ExportPoll.vue'),
 		PollInformation: () => import('../Poll/PollInformation.vue'),
diff --git a/src/js/components/Poll/PollInformation.vue b/src/js/components/Poll/PollInformation.vue
index 8ad64fd8e..33ed4a0b3 100644
--- a/src/js/components/Poll/PollInformation.vue
+++ b/src/js/components/Poll/PollInformation.vue
@@ -22,119 +22,119 @@
 
 <template lang="html">
 	<div class="poll-information">
-		<Badge>
+		<BadgeDiv>
 			<template #icon>
 				<OwnerIcon />
 			</template>
-			{{ t('polls', 'Poll owner:') }} <UserBubble v-if="poll.owner.userId" :user="poll.owner.userId" :display-name="poll.owner.displayName" />
-		</Badge>
-		<Badge>
+			{{ t('polls', 'Poll owner:') }} <NcUserBubble v-if="poll.owner.userId" :user="poll.owner.userId" :display-name="poll.owner.displayName" />
+		</BadgeDiv>
+		<BadgeDiv>
 			<template #icon>
 				<PrivatePollIcon v-if="access === 'private'" />
 				<OpenPollIcon v-else />
 			</template>
 			{{ accessCaption }}
-		</Badge>
-		<Badge>
+		</BadgeDiv>
+		<BadgeDiv>
 			<template #icon>
 				<CreationIcon />
 			</template>
 			{{ t('polls', 'Created {dateRelative}', { dateRelative: dateCreatedRelative }) }}
-		</Badge>
-		<Badge v-if="poll.expire">
+		</BadgeDiv>
+		<BadgeDiv v-if="poll.expire">
 			<template #icon>
 				<ClosedIcon />
 			</template>
 			{{ t('polls', 'Closing: {dateRelative}', {dateRelative: dateExpiryRelative}) }}
-		</Badge>
-		<Badge v-if="poll.anonymous">
+		</BadgeDiv>
+		<BadgeDiv v-if="poll.anonymous">
 			<template #icon>
 				<AnoymousIcon />
 			</template>
 			{{ t('polls', 'Anonymous poll') }}
-		</Badge>
-		<Badge>
+		</BadgeDiv>
+		<BadgeDiv>
 			<template #icon>
 				<HideResultsIcon v-if="showResults === 'never'" />
 				<ShowResultsOnClosedIcon v-else-if="showResults === 'closed' && closed" />
 				<ShowResultsIcon v-else />
 			</template>
 			{{ resultsCaption }}
-		</Badge>
-		<Badge v-if="countParticipantsVoted && acl.allowSeeResults">
+		</BadgeDiv>
+		<BadgeDiv v-if="countParticipantsVoted && acl.allowSeeResults">
 			<template #icon>
 				<ParticipantsIcon />
 			</template>
 			{{ n('polls', '%n Participant', '%n Participants', countParticipantsVoted) }}
-		</Badge>
-		<Badge>
+		</BadgeDiv>
+		<BadgeDiv>
 			<template #icon>
 				<OptionsIcon />
 			</template>
 			{{ n('polls', '%n option', '%n options', countOptions) }}
-		</Badge>
-		<Badge v-if="countAllYesVotes">
+		</BadgeDiv>
+		<BadgeDiv v-if="countAllYesVotes">
 			<template #icon>
 				<CheckIcon fill-color="#49bc49" />
 			</template>
 			{{ n('polls', '%n "Yes" vote', '%n "Yes" votes', countAllYesVotes) }}
-		</Badge>
-		<Badge v-if="countAllNoVotes">
+		</BadgeDiv>
+		<BadgeDiv v-if="countAllNoVotes">
 			<template #icon>
 				<CloseIcon fill-color="#f45573" />
 			</template>
 			{{ n('polls', '%n No vote', '%n "No" votes', countAllNoVotes) }}
-		</Badge>
-		<Badge v-if="countAllMaybeVotes">
+		</BadgeDiv>
+		<BadgeDiv v-if="countAllMaybeVotes">
 			<template #icon>
 				<MaybeIcon />
 			</template>
 			{{ n('polls', '%n "Maybe" vote', '%n "Maybe" votes', countAllMaybeVotes) }}
-		</Badge>
-		<Badge>
+		</BadgeDiv>
+		<BadgeDiv>
 			<template #icon>
 				<TimezoneIcon />
 			</template>
 			{{ t('polls', 'Time zone: {timezoneString}', { timezoneString: currentTimeZone}) }}
-		</Badge>
-		<Badge v-if="proposalsAllowed">
+		</BadgeDiv>
+		<BadgeDiv v-if="proposalsAllowed">
 			<template #icon>
 				<ProposalsAllowedIcon />
 			</template>
 			{{ proposalsStatus }}
-		</Badge>
-		<Badge v-if="poll.voteLimit">
+		</BadgeDiv>
+		<BadgeDiv v-if="poll.voteLimit">
 			<template #icon>
 				<CheckIcon />
 			</template>
 			{{ n('polls', '%n of {maximalVotes} vote left.', '%n of {maximalVotes} votes left.', poll.voteLimit - countVotes('yes'), { maximalVotes: poll.voteLimit }) }}
-		</Badge>
-		<Badge v-if="poll.optionLimit">
+		</BadgeDiv>
+		<BadgeDiv v-if="poll.optionLimit">
 			<template #icon>
 				<CloseIcon />
 			</template>
 			{{ n('polls', 'Only %n vote per option.', 'Only %n votes per option.', poll.optionLimit) }}
-		</Badge>
-		<Badge v-if="$route.name === 'publicVote' && share.emailAddress">
+		</BadgeDiv>
+		<BadgeDiv v-if="$route.name === 'publicVote' && share.emailAddress">
 			<template #icon>
 				<EmailIcon />
 			</template>
 			{{ share.emailAddress }}
-		</Badge>
-		<Badge v-if="subscribed">
+		</BadgeDiv>
+		<BadgeDiv v-if="subscribed">
 			<template #icon>
 				<SubscribedIcon />
 			</template>
 			{{ t('polls', 'You subscribed to this poll') }}
-		</Badge>
+		</BadgeDiv>
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import { UserBubble } from '@nextcloud/vue'
-import Badge from '../Base/Badge.vue'
+import { NcUserBubble } from '@nextcloud/vue'
+import BadgeDiv from '../Base/BadgeDiv.vue'
 import OwnerIcon from 'vue-material-design-icons/Crown.vue'
 import SubscribedIcon from 'vue-material-design-icons/Bell.vue'
 import ProposalsAllowedIcon from 'vue-material-design-icons/Offer.vue'
@@ -158,8 +158,8 @@ export default {
 	name: 'PollInformation',
 
 	components: {
-		Badge,
-		UserBubble,
+		BadgeDiv,
+		NcUserBubble,
 		OwnerIcon,
 		SubscribedIcon,
 		ProposalsAllowedIcon,
diff --git a/src/js/components/Poll/PublicRegisterModal.vue b/src/js/components/Poll/PublicRegisterModal.vue
index 0a0367f4b..8d7a76182 100644
--- a/src/js/components/Poll/PublicRegisterModal.vue
+++ b/src/js/components/Poll/PublicRegisterModal.vue
@@ -21,7 +21,7 @@
   -->
 
 <template lang="html">
-	<Modal v-show="modal" :size="modalSize" :can-close="false">
+	<NcModal v-show="modal" :size="modalSize" :can-close="false">
 		<div class="modal__content">
 			<div class="modal__registration">
 				<div class="registration__registration">
@@ -36,9 +36,9 @@
 						focus
 						@submit="submitRegistration" />
 
-					<CheckboxRadioSwitch v-if="share.type === 'public'" :checked.sync="saveCookie">
+					<NcCheckboxRadioSwitch v-if="share.type === 'public'" :checked.sync="saveCookie">
 						{{ t('polls', 'Remember me for 30 days') }}
-					</CheckboxRadioSwitch>
+					</NcCheckboxRadioSwitch>
 
 					<InputDiv v-if="share.publicPollEmail !== 'disabled'"
 						v-model="emailAddress"
@@ -57,21 +57,21 @@
 					</div>
 
 					<div class="modal__buttons">
-						<VueButton @click="closeModal">
+						<NcButton @click="closeModal">
 							{{ t('polls', 'Cancel') }}
-						</VueButton>
+						</NcButton>
 
-						<VueButton type="primary" :disabled="disableSubmit" @click="submitRegistration()">
+						<NcButton type="primary" :disabled="disableSubmit" @click="submitRegistration()">
 							{{ t('polls', 'OK') }}
-						</VueButton>
+						</NcButton>
 					</div>
 				</div>
 
 				<div v-if="share.showLogin" class="registration__login">
 					<h2> {{ t('polls', 'You are a registered user of this site?') }} </h2>
-					<VueButton wide @click="login()">
+					<NcButton wide @click="login()">
 						{{ t('polls', 'Login') }}
-					</VueButton>
+					</NcButton>
 					<div>
 						{{ t('polls', 'As a regular user of this site, you can participate with your internal identity after logging in.') }}
 					</div>
@@ -87,7 +87,7 @@
 					:name="t('polls', 'Legal Notice')" />
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
@@ -95,7 +95,7 @@ import { debounce } from 'lodash'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import { Button as VueButton, Modal, CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcButton, NcModal, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { mapState } from 'vuex'
 import { RichText } from '@nextcloud/vue-richtext'
 import InputDiv from '../Base/InputDiv.vue'
@@ -105,12 +105,12 @@ export default {
 	name: 'PublicRegisterModal',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		InputDiv,
-		Modal,
+		NcModal,
 		RichText,
 		SimpleLink,
-		VueButton,
+		NcButton,
 	},
 
 	data() {
diff --git a/src/js/components/PollList/PollItem.vue b/src/js/components/PollList/PollItem.vue
index 0591a8ab8..168c6cbfe 100644
--- a/src/js/components/PollList/PollItem.vue
+++ b/src/js/components/PollList/PollItem.vue
@@ -95,20 +95,20 @@
 
 		<div class="wrapper">
 			<div class="item__created">
-				<Badge>
+				<BadgeDiv>
 					<template #icon>
 						<CreationIcon />
 					</template>
 					{{ timeCreatedRelative }}
-				</Badge>
+				</BadgeDiv>
 			</div>
 			<div class="item__expiry">
-				<Badge :class="expiryClass">
+				<BadgeDiv :class="expiryClass">
 					<template #icon>
 						<ExpirationIcon />
 					</template>
 					{{ timeExpirationRelative }}
-				</Badge>
+				</BadgeDiv>
 			</div>
 		</div>
 	</div>
@@ -117,7 +117,7 @@
 <script>
 import { mapState } from 'vuex'
 import moment from '@nextcloud/moment'
-import Badge from '../Base/Badge.vue'
+import BadgeDiv from '../Base/BadgeDiv.vue'
 import TextPollIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import DatePollIcon from 'vue-material-design-icons/CalendarBlank.vue'
 import CreationIcon from 'vue-material-design-icons/ClockOutline.vue'
@@ -129,7 +129,7 @@ import ArchivedPollIcon from 'vue-material-design-icons/Archive.vue'
 export default {
 	name: 'PollItem',
 	components: {
-		Badge,
+		BadgeDiv,
 		TextPollIcon,
 		DatePollIcon,
 		CreationIcon,
diff --git a/src/js/components/Settings/AdminSettings/AdminCombo.vue b/src/js/components/Settings/AdminSettings/AdminCombo.vue
index ea0c7e795..0422b01a5 100644
--- a/src/js/components/Settings/AdminSettings/AdminCombo.vue
+++ b/src/js/components/Settings/AdminSettings/AdminCombo.vue
@@ -22,12 +22,12 @@
 
 <template>
 	<div class="user_settings">
-		<CheckboxRadioSwitch :checked.sync="comboLimited" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="comboLimited" type="switch">
 			{{ t('polls', 'Deactivate combo view for all users') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<div v-if="comboLimited" class="settings_details">
 			<h3>{{ t('polls','Allow combo view for the following groups') }}</h3>
-			<Multiselect v-model="comboGroups"
+			<NcMultiselect v-model="comboGroups"
 				class="stretch"
 				label="displayName"
 				track-by="id"
@@ -45,15 +45,15 @@
 
 <script>
 
-import { CheckboxRadioSwitch, Multiselect } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcMultiselect } from '@nextcloud/vue'
 import { loadGroups, writeValue } from '../../../mixins/adminSettingsMixin.js'
 
 export default {
 	name: 'AdminCombo',
 
 	components: {
-		CheckboxRadioSwitch,
-		Multiselect,
+		NcCheckboxRadioSwitch,
+		NcMultiselect,
 	},
 
 	mixins: [loadGroups, writeValue],
diff --git a/src/js/components/Settings/AdminSettings/AdminEmail.vue b/src/js/components/Settings/AdminSettings/AdminEmail.vue
index c3fcd41af..adc64bcb4 100644
--- a/src/js/components/Settings/AdminSettings/AdminEmail.vue
+++ b/src/js/components/Settings/AdminSettings/AdminEmail.vue
@@ -22,15 +22,15 @@
 
 <template>
 	<div class="user_settings">
-		<CheckboxRadioSwitch :checked.sync="legalTermsInEmail" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="legalTermsInEmail" type="switch">
 			{{ t('polls', 'Add terms links also to the email footer') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
 		<div class="disclaimer_group">
 			<span class="grow_title">{{ t('polls', 'Additional email disclaimer') }}</span>
-			<CheckboxRadioSwitch :checked.sync="preview" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="preview" type="switch">
 				{{ t('polls', 'Preview') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 		</div>
 		<textarea v-show="!preview" v-model="disclaimer" @change="saveSettings()" />
 		<!-- eslint-disable-next-line vue/no-v-html -->
@@ -41,7 +41,7 @@
 <script>
 
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { marked } from 'marked'
 import DOMPurify from 'dompurify'
 
@@ -49,7 +49,7 @@ export default {
 	name: 'AdminEmail',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	data() {
diff --git a/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue b/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue
index 8f2701bc4..7ef0d1449 100644
--- a/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue
+++ b/src/js/components/Settings/AdminSettings/AdminHideMailAddresses.vue
@@ -22,12 +22,12 @@
 
 <template>
 	<div class="user_settings">
-		<CheckboxRadioSwitch :checked.sync="hideMailAddresses" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="hideMailAddresses" type="switch">
 			{{ t('polls', 'Hide email addresses of internal users') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<div v-if="hideMailAddresses" class="settings_details">
 			<h3>{{ t('polls','Show email addresses of internal users to members of the following groups') }}</h3>
-			<Multiselect v-model="showMailAddressesGroups"
+			<NcMultiselect v-model="showMailAddressesGroups"
 				class="stretch"
 				label="displayName"
 				track-by="id"
@@ -45,15 +45,15 @@
 
 <script>
 
-import { CheckboxRadioSwitch, Multiselect } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcMultiselect } from '@nextcloud/vue'
 import { loadGroups, writeValue } from '../../../mixins/adminSettingsMixin.js'
 
 export default {
 	name: 'AdminHideMailAddresses',
 
 	components: {
-		CheckboxRadioSwitch,
-		Multiselect,
+		NcCheckboxRadioSwitch,
+		NcMultiselect,
 	},
 
 	mixins: [loadGroups, writeValue],
diff --git a/src/js/components/Settings/AdminSettings/AdminMisc.vue b/src/js/components/Settings/AdminSettings/AdminMisc.vue
index 1090af369..aa87f9ef7 100644
--- a/src/js/components/Settings/AdminSettings/AdminMisc.vue
+++ b/src/js/components/Settings/AdminSettings/AdminMisc.vue
@@ -23,17 +23,17 @@
 <template>
 	<div>
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="useActivity" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="useActivity" type="switch">
 				{{ t('polls', 'Track activities') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 
-			<CheckboxRadioSwitch :checked.sync="hideLogin" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="hideLogin" type="switch">
 				{{ t('polls', 'Hide login option in public polls') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 
-			<CheckboxRadioSwitch :checked.sync="autoArchive" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="autoArchive" type="switch">
 				{{ t('polls', 'Archive closed polls automatically') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<InputDiv v-if="autoArchive"
 				v-model="autoArchiveOffset"
 				class="settings_details"
@@ -48,14 +48,14 @@
 <script>
 
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import InputDiv from '../../Base/InputDiv.vue'
 
 export default {
 	name: 'AdminMisc',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		InputDiv,
 	},
 
diff --git a/src/js/components/Settings/AdminSettings/AdminPollCreation.vue b/src/js/components/Settings/AdminSettings/AdminPollCreation.vue
index 230f0d9bb..e58acb3d9 100644
--- a/src/js/components/Settings/AdminSettings/AdminPollCreation.vue
+++ b/src/js/components/Settings/AdminSettings/AdminPollCreation.vue
@@ -22,12 +22,12 @@
 
 <template>
 	<div class="user_settings">
-		<CheckboxRadioSwitch :checked.sync="createPollLimited" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="createPollLimited" type="switch">
 			{{ t('polls', 'Disallow poll creation for all users') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<div v-if="createPollLimited" class="settings_details">
 			<h3>{{ t('polls','Allow poll creation for the following groups') }}</h3>
-			<Multiselect v-model="createPollGroups"
+			<NcMultiselect v-model="createPollGroups"
 				class="stretch"
 				label="displayName"
 				track-by="id"
@@ -46,14 +46,14 @@
 <script>
 
 import { loadGroups, writeValue } from '../../../mixins/adminSettingsMixin.js'
-import { CheckboxRadioSwitch, Multiselect } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcMultiselect } from '@nextcloud/vue'
 
 export default {
 	name: 'AdminPollCreation',
 
 	components: {
-		CheckboxRadioSwitch,
-		Multiselect,
+		NcCheckboxRadioSwitch,
+		NcMultiselect,
 	},
 
 	mixins: [loadGroups, writeValue],
diff --git a/src/js/components/Settings/AdminSettings/AdminPollDownload.vue b/src/js/components/Settings/AdminSettings/AdminPollDownload.vue
index e8e8bb327..3acd02c91 100644
--- a/src/js/components/Settings/AdminSettings/AdminPollDownload.vue
+++ b/src/js/components/Settings/AdminSettings/AdminPollDownload.vue
@@ -22,12 +22,12 @@
 
 <template>
 	<div class="user_settings">
-		<CheckboxRadioSwitch :checked.sync="pollDownloadLimited" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="pollDownloadLimited" type="switch">
 			{{ t('polls', 'Disallow poll download') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<div v-if="pollDownloadLimited" class="settings_details">
 			<h3>{{ t('polls','Allow poll download for the following groups') }}</h3>
-			<Multiselect v-model="pollDownloadGroups"
+			<NcMultiselect v-model="pollDownloadGroups"
 				class="stretch"
 				label="displayName"
 				track-by="id"
@@ -45,15 +45,15 @@
 
 <script>
 
-import { CheckboxRadioSwitch, Multiselect } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcMultiselect } from '@nextcloud/vue'
 import { loadGroups, writeValue } from '../../../mixins/adminSettingsMixin.js'
 
 export default {
 	name: 'AdminPollDownload',
 
 	components: {
-		CheckboxRadioSwitch,
-		Multiselect,
+		NcCheckboxRadioSwitch,
+		NcMultiselect,
 	},
 
 	mixins: [loadGroups, writeValue],
diff --git a/src/js/components/Settings/AdminSettings/AdminShareSettings.vue b/src/js/components/Settings/AdminSettings/AdminShareSettings.vue
index 3ad4c3621..043b1feae 100644
--- a/src/js/components/Settings/AdminSettings/AdminShareSettings.vue
+++ b/src/js/components/Settings/AdminSettings/AdminShareSettings.vue
@@ -22,12 +22,12 @@
 
 <template>
 	<div class="user_settings">
-		<CheckboxRadioSwitch :checked.sync="publicSharesLimited" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="publicSharesLimited" type="switch">
 			{{ t('polls', 'Disallow public shares') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<div v-if="publicSharesLimited" class="settings_details">
 			<h3>{{ t('polls','Allow public shares for the following groups') }}</h3>
-			<Multiselect v-model="publicSharesGroups"
+			<NcMultiselect v-model="publicSharesGroups"
 				class="stretch"
 				label="displayName"
 				track-by="id"
@@ -41,12 +41,12 @@
 				@search-change="loadGroups" />
 		</div>
 
-		<CheckboxRadioSwitch :checked.sync="allAccessLimited" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="allAccessLimited" type="switch">
 			{{ t('polls', 'Disallow openly accessible polls') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<div v-if="allAccessLimited" class="settings_details">
 			<h3>{{ t('polls','Allow creating openly accessible polls for the following groups') }}</h3>
-			<Multiselect v-model="allAccessGroups"
+			<NcMultiselect v-model="allAccessGroups"
 				class="stretch"
 				label="displayName"
 				track-by="id"
@@ -64,15 +64,15 @@
 
 <script>
 
-import { CheckboxRadioSwitch, Multiselect } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcMultiselect } from '@nextcloud/vue'
 import { loadGroups, writeValue } from '../../../mixins/adminSettingsMixin.js'
 
 export default {
 	name: 'AdminShareSettings',
 
 	components: {
-		CheckboxRadioSwitch,
-		Multiselect,
+		NcCheckboxRadioSwitch,
+		NcMultiselect,
 	},
 
 	mixins: [loadGroups, writeValue],
diff --git a/src/js/components/Settings/UserSettings/CalendarSettings.vue b/src/js/components/Settings/UserSettings/CalendarSettings.vue
index a7b202d8c..58b9f2c2a 100644
--- a/src/js/components/Settings/UserSettings/CalendarSettings.vue
+++ b/src/js/components/Settings/UserSettings/CalendarSettings.vue
@@ -23,20 +23,20 @@
 <template>
 	<div>
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="calendarPeek" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="calendarPeek" type="switch">
 				{{ t('polls', 'Use calendar lookup for conflicting calendar events') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 
 			<div v-show="calendarPeek" class="settings_details">
 				{{ t('polls', 'Select the calendars to use for lookup.') }}
 
 				<div v-for="(calendar) in calendarChoices" :key="calendar.key" class="calendar-item">
-					<CheckboxRadioSwitch :checked="calendar.selected"
+					<NcCheckboxRadioSwitch :checked="calendar.selected"
 						type="switch"
 						@update:checked="clickedCalendar(calendar)">
 						<span class="bully" :style="{ backgroundColor: calendar.displayColor }" />
 						{{ calendar.name }}
-					</CheckboxRadioSwitch>
+					</NcCheckboxRadioSwitch>
 				</div>
 			</div>
 		</div>
@@ -62,14 +62,14 @@
 <script>
 
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import InputDiv from '../../Base/InputDiv.vue'
 
 export default {
 	name: 'CalendarSettings',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		InputDiv,
 	},
 
diff --git a/src/js/components/Settings/UserSettings/FeatureSettings.vue b/src/js/components/Settings/UserSettings/FeatureSettings.vue
index ab8fffbbb..2dfaad1d1 100644
--- a/src/js/components/Settings/UserSettings/FeatureSettings.vue
+++ b/src/js/components/Settings/UserSettings/FeatureSettings.vue
@@ -23,18 +23,18 @@
 <template>
 	<div>
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="defaultViewTextPoll" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="defaultViewTextPoll" type="switch">
 				{{ t('polls', 'Text polls default to list view') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<div class="settings_details">
 				{{ t('polls', 'Check this, if you prefer to display text poll in a vertical aligned list rather than in the grid view. The initial default is list view.') }}
 			</div>
 		</div>
 
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="defaultViewDatePoll" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="defaultViewDatePoll" type="switch">
 				{{ t('polls', 'Date polls default to list view') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<div class="settings_details">
 				{{ t('polls', 'Check this, if you prefer to display date poll in a vertical view rather than in the grid view. The initial default is grid view.') }}
 			</div>
@@ -45,13 +45,13 @@
 <script>
 
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'FeatureSettings',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	computed: {
diff --git a/src/js/components/Settings/UserSettings/StyleSettings.vue b/src/js/components/Settings/UserSettings/StyleSettings.vue
index 384e5c90a..24b7460f7 100644
--- a/src/js/components/Settings/UserSettings/StyleSettings.vue
+++ b/src/js/components/Settings/UserSettings/StyleSettings.vue
@@ -24,41 +24,41 @@
 	<div>
 		<b> {{ t('polls', 'The style settings are still experimental!') }}</b>
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="useDashboardStyling" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="useDashboardStyling" type="switch">
 				{{ t('polls', 'Adopt dashboard style') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 		</div>
 
 		<div v-if="!useDashboardStyling" class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="useIndividualStyling" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="useIndividualStyling" type="switch">
 				{{ t('polls', 'Set individual styles') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 		</div>
 
 		<div v-if="useIndividualStyling && !useDashboardStyling">
 			<div class="user_settings">
-				<CheckboxRadioSwitch :checked.sync="individualBgColor" type="switch">
+				<NcCheckboxRadioSwitch :checked.sync="individualBgColor" type="switch">
 					{{ t('polls', 'Use background color') }}
-				</CheckboxRadioSwitch>
+				</NcCheckboxRadioSwitch>
 
-				<CheckboxRadioSwitch :checked.sync="individualImage" type="switch">
+				<NcCheckboxRadioSwitch :checked.sync="individualImage" type="switch">
 					{{ t('polls', 'Use background image') }}
-				</CheckboxRadioSwitch>
+				</NcCheckboxRadioSwitch>
 
 				<div v-if="individualImage" class="settings_details">
 					<InputDiv v-model="individualImageUrl"
 						type="text"
 						:placeholder="t('polls', 'Enter the URL of your favorite background image.')" />
-					<CheckboxRadioSwitch :checked.sync="individualImageStyle" type="switch">
+					<NcCheckboxRadioSwitch :checked.sync="individualImageStyle" type="switch">
 						{{ t('polls', 'Dark picture') }}
-					</CheckboxRadioSwitch>
+					</NcCheckboxRadioSwitch>
 				</div>
 			</div>
 
 			<div class="user_settings">
-				<CheckboxRadioSwitch :checked.sync="translucentPanels" type="switch">
+				<NcCheckboxRadioSwitch :checked.sync="translucentPanels" type="switch">
 					{{ t('polls', 'Translucent foreground elements') }}
-				</CheckboxRadioSwitch>
+				</NcCheckboxRadioSwitch>
 
 				<div class="settings_details">
 					{{ t('polls', 'Add a translucent effect on foreground elements like sidebar and poll table (Does not work with all browsers).') }}
@@ -66,9 +66,9 @@
 			</div>
 		</div>
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="useCommentsAlternativeStyling" type="switch">
+			<NcCheckboxRadioSwitch :checked.sync="useCommentsAlternativeStyling" type="switch">
 				{{ t('polls', 'Use alternative styling for the comments sidebar') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 		</div>
 	</div>
 </template>
@@ -76,14 +76,14 @@
 <script>
 
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import InputDiv from '../../Base/InputDiv.vue'
 
 export default {
 	name: 'StyleSettings',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		InputDiv,
 	},
 
diff --git a/src/js/components/Settings/UserSettingsDlg.vue b/src/js/components/Settings/UserSettingsDlg.vue
index f379d5445..8925d1249 100644
--- a/src/js/components/Settings/UserSettingsDlg.vue
+++ b/src/js/components/Settings/UserSettingsDlg.vue
@@ -21,36 +21,36 @@
   -->
 
 <template>
-	<AppSettingsDialog :open.sync="show" :show-navigation="true">
-		<AppSettingsSection :title="t('polls', 'Calendar check')">
+	<NcAppSettingsDialog :open.sync="show" :show-navigation="true">
+		<NcAppSettingsSection :title="t('polls', 'Calendar check')">
 			<CalendarSettings />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
-		<AppSettingsSection :title="t('polls', 'User settings')">
+		<NcAppSettingsSection :title="t('polls', 'User settings')">
 			<FeatureSettings />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
-		<AppSettingsSection :title="t('polls', 'Performance settings')">
+		<NcAppSettingsSection :title="t('polls', 'Performance settings')">
 			<PerformanceSettings />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
-		<AppSettingsSection :title="t('polls', 'Styles')">
+		<NcAppSettingsSection :title="t('polls', 'Styles')">
 			<StyleSettings />
-		</AppSettingsSection>
-	</AppSettingsDialog>
+		</NcAppSettingsSection>
+	</NcAppSettingsDialog>
 </template>
 
 <script>
 
-import { AppSettingsDialog, AppSettingsSection } from '@nextcloud/vue'
+import { NcAppSettingsDialog, NcAppSettingsSection } from '@nextcloud/vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 export default {
 	name: 'UserSettingsDlg',
 
 	components: {
-		AppSettingsDialog,
-		AppSettingsSection,
+		NcAppSettingsDialog,
+		NcAppSettingsSection,
 		CalendarSettings: () => import('./UserSettings/CalendarSettings.vue'),
 		FeatureSettings: () => import('./UserSettings/FeatureSettings.vue'),
 		StyleSettings: () => import('./UserSettings/StyleSettings.vue'),
diff --git a/src/js/components/Shares/ShareItemAllUsers.vue b/src/js/components/Shares/ShareItemAllUsers.vue
index 975b2c8bf..ef2f3183b 100644
--- a/src/js/components/Shares/ShareItemAllUsers.vue
+++ b/src/js/components/Shares/ShareItemAllUsers.vue
@@ -30,20 +30,20 @@
 		<template #status>
 			<div class="vote-status" />
 		</template>
-		<CheckboxRadioSwitch :checked.sync="pollAccess" type="switch" />
+		<NcCheckboxRadioSwitch :checked.sync="pollAccess" type="switch" />
 	</UserItem>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { writePoll } from '../../mixins/writePoll.js'
 
 export default {
 	name: 'ShareItemAllUsers',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	mixins: [writePoll],
diff --git a/src/js/components/Shares/SharePublicAdd.vue b/src/js/components/Shares/SharePublicAdd.vue
index 152733268..687378b73 100644
--- a/src/js/components/Shares/SharePublicAdd.vue
+++ b/src/js/components/Shares/SharePublicAdd.vue
@@ -29,24 +29,24 @@
 		<template #status>
 			<div class="vote-status" />
 		</template>
-		<Actions>
-			<ActionButton icon="icon-add" @click="addPublicShare()">
+		<NcActions>
+			<NcActionButton icon="icon-add" @click="addPublicShare()">
 				{{ t('polls', 'Add a new public link') }}
-			</ActionButton>
-		</Actions>
+			</NcActionButton>
+		</NcActions>
 	</UserItem>
 </template>
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { Actions, ActionButton } from '@nextcloud/vue'
+import { NcActions, NcActionButton } from '@nextcloud/vue'
 
 export default {
 	name: 'SharePublicAdd',
 
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 	},
 
 	methods: {
diff --git a/src/js/components/Shares/SharesList.vue b/src/js/components/Shares/SharesList.vue
index 96ad5570b..426a0e37d 100644
--- a/src/js/components/Shares/SharesList.vue
+++ b/src/js/components/Shares/SharesList.vue
@@ -48,15 +48,15 @@
 						</div>
 					</template>
 
-					<Actions>
-						<ActionButton v-if="share.emailAddress || share.type === 'group'" @click="sendInvitation(share)">
+					<NcActions>
+						<NcActionButton v-if="share.emailAddress || share.type === 'group'" @click="sendInvitation(share)">
 							<template #icon>
 								<SendEmailIcon />
 							</template>
 							{{ share.invitationSent ? t('polls', 'Resend invitation mail') : t('polls', 'Send invitation mail') }}
-						</ActionButton>
+						</NcActionButton>
 
-						<ActionButton v-if="share.type === 'user' || share.type === 'admin'" @click="switchAdmin({ share })">
+						<NcActionButton v-if="share.type === 'user' || share.type === 'admin'" @click="switchAdmin({ share })">
 							<template #icon>
 								<span v-if="share.type === 'user'"
 									aria-hidden="true"
@@ -84,37 +84,37 @@
 								</span>
 							</template>
 							{{ share.type === 'user' ? t('polls', 'Grant poll admin access') : t('polls', 'Withdraw poll admin access') }}
-						</ActionButton>
+						</NcActionButton>
 
-						<ActionButton @click="copyLink( { url: share.URL })">
+						<NcActionButton @click="copyLink( { url: share.URL })">
 							<template #icon>
 								<ClippyIcon />
 							</template>
 							{{ t('polls', 'Copy link to clipboard') }}
-						</ActionButton>
-						<ActionCaption v-if="share.type === 'public'" :title="t('polls', 'Options for the registration dialog')" />
-						<ActionRadio v-if="share.type === 'public'"
+						</NcActionButton>
+						<NcActionCaption v-if="share.type === 'public'" :title="t('polls', 'Options for the registration dialog')" />
+						<NcActionRadio v-if="share.type === 'public'"
 							name="publicPollEmail"
 							value="optional"
 							:checked="share.publicPollEmail === 'optional'"
 							@change="setPublicPollEmail({ share, value: 'optional' })">
 							{{ t('polls', 'Email address is optional') }}
-						</ActionRadio>
-						<ActionRadio v-if="share.type === 'public'"
+						</NcActionRadio>
+						<NcActionRadio v-if="share.type === 'public'"
 							name="publicPollEmail"
 							value="mandatory"
 							:checked="share.publicPollEmail === 'mandatory'"
 							@change="setPublicPollEmail({ share, value: 'mandatory' })">
 							{{ t('polls', 'Email address is mandatory') }}
-						</ActionRadio>
-						<ActionRadio v-if="share.type === 'public'"
+						</NcActionRadio>
+						<NcActionRadio v-if="share.type === 'public'"
 							name="publicPollEmail"
 							value="disabled"
 							:checked="share.publicPollEmail === 'disabled'"
 							@change="setPublicPollEmail({ share, value: 'disabled' })">
 							{{ t('polls', 'Do not ask for email address') }}
-						</ActionRadio>
-					</Actions>
+						</NcActionRadio>
+					</NcActions>
 
 					<ActionDelete :title="t('polls', 'Remove share')"
 						@delete="removeShare({ share })" />
@@ -127,7 +127,7 @@
 <script>
 import { mapGetters, mapActions, mapState } from 'vuex'
 import { showSuccess, showError } from '@nextcloud/dialogs'
-import { Actions, ActionButton, ActionCaption, ActionRadio } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcActionCaption, NcActionRadio } from '@nextcloud/vue'
 import ActionDelete from '../Actions/ActionDelete.vue'
 import ConfigBox from '../Base/ConfigBox.vue'
 import VotedIcon from 'vue-material-design-icons/CheckboxMarked.vue'
@@ -149,11 +149,11 @@ export default {
 		UnvotedIcon,
 		UserSearch,
 		VotedIcon,
-		Actions,
-		ActionButton,
-		ActionCaption,
+		NcActions,
+		NcActionButton,
+		NcActionCaption,
 		ActionDelete,
-		ActionRadio,
+		NcActionRadio,
 		ConfigBox,
 		SharePublicAdd,
 		ShareItemAllUsers,
diff --git a/src/js/components/Shares/SharesListUnsent.vue b/src/js/components/Shares/SharesListUnsent.vue
index f1cff774b..aa020b435 100644
--- a/src/js/components/Shares/SharesListUnsent.vue
+++ b/src/js/components/Shares/SharesListUnsent.vue
@@ -32,18 +32,18 @@
 				show-email
 				resolve-info
 				:icon="true">
-				<Actions>
-					<ActionButton v-if="share.emailAddress || share.type === 'group'"
+				<NcActions>
+					<NcActionButton v-if="share.emailAddress || share.type === 'group'"
 						icon="icon-confirm"
 						@click="sendInvitation(share)">
 						{{ t('polls', 'Send invitation mail') }}
-					</ActionButton>
-					<ActionButton v-if="['contactGroup', 'circle'].includes(share.type)"
+					</NcActionButton>
+					<NcActionButton v-if="['contactGroup', 'circle'].includes(share.type)"
 						icon="icon-toggle-filelist"
 						@click="resolveGroup(share)">
 						{{ t('polls', 'Resolve into individual invitations') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 				<ActionDelete :title="t('polls', 'Remove invitation')"
 					@delete="removeShare({ share })" />
 			</UserItem>
@@ -54,7 +54,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import { showSuccess, showError } from '@nextcloud/dialogs'
-import { Actions, ActionButton } from '@nextcloud/vue'
+import { NcActions, NcActionButton } from '@nextcloud/vue'
 import ActionDelete from '../Actions/ActionDelete.vue'
 import ConfigBox from '../Base/ConfigBox.vue'
 import EmailAlertIcon from 'vue-material-design-icons/EmailAlert.vue'
@@ -64,8 +64,8 @@ export default {
 
 	components: {
 		EmailAlertIcon,
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		ActionDelete,
 		ConfigBox,
 	},
diff --git a/src/js/components/SideBar/SideBarTabActivity.vue b/src/js/components/SideBar/SideBarTabActivity.vue
index c23675d65..2c1ee32ed 100644
--- a/src/js/components/SideBar/SideBarTabActivity.vue
+++ b/src/js/components/SideBar/SideBarTabActivity.vue
@@ -23,22 +23,22 @@
 <template>
 	<div class="comments">
 		<Activities v-if="!showEmptyContent" />
-		<EmptyContent v-else icon="icon-comment">
+		<NcEmptyContent v-else icon="icon-comment">
 			{{ t('polls', 'No activity') }}
-		</EmptyContent>
+		</NcEmptyContent>
 	</div>
 </template>
 
 <script>
 import Activities from '../Activity/Activities.vue'
-import { EmptyContent } from '@nextcloud/vue'
+import { NcEmptyContent } from '@nextcloud/vue'
 import { mapState } from 'vuex'
 
 export default {
 	name: 'SideBarTabActivity',
 	components: {
 		Activities,
-		EmptyContent,
+		NcEmptyContent,
 	},
 
 	computed: {
diff --git a/src/js/components/SideBar/SideBarTabComments.vue b/src/js/components/SideBar/SideBarTabComments.vue
index b797f860a..d61a412d7 100644
--- a/src/js/components/SideBar/SideBarTabComments.vue
+++ b/src/js/components/SideBar/SideBarTabComments.vue
@@ -24,7 +24,7 @@
 	<div class="comments">
 		<CommentAdd v-if="acl.allowComment" />
 		<Comments v-if="!showEmptyContent" />
-		<EmptyContent v-else>
+		<NcEmptyContent v-else>
 			{{ t('polls', 'No comments') }}
 			<template #icon>
 				<CommentsIcon />
@@ -32,14 +32,14 @@
 			<template #desc>
 				{{ t('polls', 'Be the first.') }}
 			</template>
-		</EmptyContent>
+		</NcEmptyContent>
 	</div>
 </template>
 
 <script>
 import CommentAdd from '../Comments/CommentAdd.vue'
 import Comments from '../Comments/Comments.vue'
-import { EmptyContent } from '@nextcloud/vue'
+import { NcEmptyContent } from '@nextcloud/vue'
 import { mapGetters, mapState } from 'vuex'
 import CommentsIcon from 'vue-material-design-icons/CommentProcessing.vue'
 
@@ -48,7 +48,7 @@ export default {
 	components: {
 		CommentAdd,
 		Comments,
-		EmptyContent,
+		NcEmptyContent,
 		CommentsIcon,
 	},
 
diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue
index b0cf63330..29a78f1e1 100644
--- a/src/js/components/SideBar/SideBarTabConfiguration.vue
+++ b/src/js/components/SideBar/SideBarTabConfiguration.vue
@@ -75,20 +75,20 @@
 		</ConfigBox>
 
 		<div class="delete-area">
-			<VueButton @click="toggleArchive()">
+			<NcButton @click="toggleArchive()">
 				<template #icon>
 					<RestorePollIcon v-if="isPollArchived" />
 					<ArchivePollIcon v-else />
 				</template>
 				{{ isPollArchived ? t('polls', 'Restore poll') : t('polls', 'Archive poll') }}
-			</VueButton>
+			</NcButton>
 
-			<VueButton v-if="isPollArchived" type="error" @click="deletePoll()">
+			<NcButton v-if="isPollArchived" type="error" @click="deletePoll()">
 				<template #icon>
 					<DeletePollIcon />
 				</template>
 				{{ t('polls', 'Delete poll') }}
-			</VueButton>
+			</NcButton>
 		</div>
 	</div>
 </template>
@@ -96,7 +96,7 @@
 <script>
 import { mapGetters, mapState } from 'vuex'
 import { showError } from '@nextcloud/dialogs'
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import ConfigBox from '../Base/ConfigBox.vue'
 import ConfigAllowComment from '../Configuration/ConfigAllowComment.vue'
@@ -152,7 +152,7 @@ export default {
 		ConfigTitle,
 		ConfigUseNo,
 		ConfigVoteLimit,
-		VueButton,
+		NcButton,
 	},
 
 	mixins: [writePoll],
diff --git a/src/js/components/Subscription/ActionSubscription.vue b/src/js/components/Subscription/ActionSubscription.vue
index 258672442..cff82f68d 100644
--- a/src/js/components/Subscription/ActionSubscription.vue
+++ b/src/js/components/Subscription/ActionSubscription.vue
@@ -21,19 +21,19 @@
   -->
 
 <template lang="html">
-	<Actions>
-		<ActionCheckbox v-model="subscribe" :label="label" />
-	</Actions>
+	<NcActions>
+		<NcActionCheckbox v-model="subscribe" :label="label" />
+	</NcActions>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { Actions, ActionCheckbox } from '@nextcloud/vue'
+import { NcActions, NcActionCheckbox } from '@nextcloud/vue'
 export default {
 	name: 'ActionSubscription',
 
 	components: {
-		Actions, ActionCheckbox,
+		NcActions, NcActionCheckbox,
 	},
 
 	computed: {
diff --git a/src/js/components/Subscription/Subscription.vue b/src/js/components/Subscription/Subscription.vue
index cdb8d968f..570325cbc 100644
--- a/src/js/components/Subscription/Subscription.vue
+++ b/src/js/components/Subscription/Subscription.vue
@@ -22,20 +22,20 @@
 
 <template lang="html">
 	<div class="subscription">
-		<CheckboxRadioSwitch :checked.sync="subscribe" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="subscribe" type="switch">
 			{{ label }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 	</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 export default {
 	name: 'Subscription',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	computed: {
diff --git a/src/js/components/User/UserItem.vue b/src/js/components/User/UserItem.vue
index e8705a370..14ad54911 100644
--- a/src/js/components/User/UserItem.vue
+++ b/src/js/components/User/UserItem.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div :class="['user-item', type, { disabled, condensed: condensed }]">
-		<Avatar :disable-menu="disableMenu"
+		<NcAvatar :disable-menu="disableMenu"
 			:disable-tooltip="disableTooltip"
 			class="user-item__avatar"
 			:is-guest="isGuestComputed"
@@ -56,13 +56,13 @@
 
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
-import { Avatar } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 
 export default {
 	name: 'UserItem',
 
 	components: {
-		Avatar,
+		NcAvatar,
 		AdminIcon: () => import('../AppIcons/ShieldCrownOutline.vue'),
 	},
 
diff --git a/src/js/components/User/UserMenu.vue b/src/js/components/User/UserMenu.vue
index ee6b73136..10ee722cc 100644
--- a/src/js/components/User/UserMenu.vue
+++ b/src/js/components/User/UserMenu.vue
@@ -21,15 +21,15 @@
   -->
 
 <template>
-	<Actions primary>
+	<NcActions primary>
 		<template #icon>
 			<SettingsIcon :size="20" decorative />
 		</template>
-		<ActionButton v-if="$route.name === 'publicVote'" icon="icon-md-link" @click="copyLink()">
+		<NcActionButton v-if="$route.name === 'publicVote'" icon="icon-md-link" @click="copyLink()">
 			{{ t('polls', 'Copy your personal link to clipboard') }}
-		</ActionButton>
-		<ActionSeparator v-if="$route.name === 'publicVote'" />
-		<ActionInput v-if="$route.name === 'publicVote'"
+		</NcActionButton>
+		<NcActionSeparator v-if="$route.name === 'publicVote'" />
+		<NcActionInput v-if="$route.name === 'publicVote'"
 			:class="check.status"
 			:value="emailAddressTemp"
 			@update:value="validateEmailAddress"
@@ -38,8 +38,8 @@
 				<EditEmailIcon />
 			</template>
 			{{ t('polls', 'Edit Email Address') }}
-		</ActionInput>
-		<ActionInput v-if="$route.name === 'publicVote'"
+		</NcActionInput>
+		<NcActionInput v-if="$route.name === 'publicVote'"
 			:class="checkDisplayName.status"
 			:value="displayNameTemp"
 			@update:value="validateDisplayName"
@@ -48,8 +48,8 @@
 				<EditAccountIcon />
 			</template>
 			{{ t('polls', 'Change name') }}
-		</ActionInput>
-		<ActionButton v-if="$route.name === 'publicVote'"
+		</NcActionInput>
+		<NcActionButton v-if="$route.name === 'publicVote'"
 			:disabled="!emailAddress"
 			:value="emailAddress"
 			@click="resendInvitation()">
@@ -57,40 +57,40 @@
 				<SendLinkPerEmailIcon />
 			</template>
 			{{ t('polls', 'Get your personal link per mail') }}
-		</ActionButton>
-		<ActionCheckbox :checked="subscribed"
+		</NcActionButton>
+		<NcActionCheckbox :checked="subscribed"
 			:disabled="!acl.allowSubscribe"
 			title="check"
 			@change="toggleSubscription">
 			{{ t('polls', 'Subscribe to notifications') }}
-		</ActionCheckbox>
-		<ActionButton v-if="$route.name === 'publicVote' && emailAddress"
+		</NcActionCheckbox>
+		<NcActionButton v-if="$route.name === 'publicVote' && emailAddress"
 			:disabled="!emailAddress"
 			@click="deleteEmailAddress">
 			<template #icon>
 				<DeleteIcon />
 			</template>
 			{{ t('polls', 'Remove Email Address') }}
-		</ActionButton>
-		<ActionButton v-if="acl.allowEdit" @click="getAddresses()">
+		</NcActionButton>
+		<NcActionButton v-if="acl.allowEdit" @click="getAddresses()">
 			<template #icon>
 				<ClippyIcon />
 			</template>
 			{{ t('polls', 'Copy list of email addresses to clipboard') }}
-		</ActionButton>
-		<ActionButton @click="resetVotes()">
+		</NcActionButton>
+		<NcActionButton @click="resetVotes()">
 			<template #icon>
 				<ResetVotesIcon />
 			</template>
 			{{ t('polls', 'Reset your votes') }}
-		</ActionButton>
-		<ActionButton v-if="$route.name === 'publicVote' && hasCookie" @click="logout()">
+		</NcActionButton>
+		<NcActionButton v-if="$route.name === 'publicVote' && hasCookie" @click="logout()">
 			<template #icon>
 				<LogoutIcon />
 			</template>
 			{{ t('polls', 'Logout as {name} (delete cookie)', { name: acl.displayName }) }}
-		</ActionButton>
-	</Actions>
+		</NcActionButton>
+	</NcActions>
 </template>
 
 <script>
@@ -98,7 +98,7 @@ import { debounce } from 'lodash'
 import axios from '@nextcloud/axios'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import { Actions, ActionButton, ActionCheckbox, ActionInput, ActionSeparator } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcActionCheckbox, NcActionInput, NcActionSeparator } from '@nextcloud/vue'
 import { mapState } from 'vuex'
 import SettingsIcon from 'vue-material-design-icons/Cog.vue'
 import EditAccountIcon from 'vue-material-design-icons/AccountEdit.vue'
@@ -114,11 +114,11 @@ export default {
 	name: 'UserMenu',
 
 	components: {
-		Actions,
-		ActionButton,
-		ActionCheckbox,
-		ActionInput,
-		ActionSeparator,
+		NcActions,
+		NcActionButton,
+		NcActionCheckbox,
+		NcActionInput,
+		NcActionSeparator,
 		SettingsIcon,
 		EditAccountIcon,
 		EditEmailIcon,
diff --git a/src/js/components/User/UserSearch.vue b/src/js/components/User/UserSearch.vue
index 48f505555..5a19d1e5f 100644
--- a/src/js/components/User/UserSearch.vue
+++ b/src/js/components/User/UserSearch.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Multiselect id="ajax"
+	<NcMultiselect id="ajax"
 		:options="users"
 		:multiple="false"
 		:user-select="true"
@@ -43,7 +43,7 @@
 				{{ values.length }} users selected
 			</span>
 		</template>
-	</Multiselect>
+	</NcMultiselect>
 </template>
 
 <script>
@@ -51,13 +51,13 @@ import { debounce } from 'lodash'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import { Multiselect } from '@nextcloud/vue'
+import { NcMultiselect } from '@nextcloud/vue'
 
 export default {
 	name: 'UserSearch',
 
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 
 	data() {
diff --git a/src/js/components/VoteTable/VoteColumn.vue b/src/js/components/VoteTable/VoteColumn.vue
index 3fbf9737a..45953beb9 100644
--- a/src/js/components/VoteTable/VoteColumn.vue
+++ b/src/js/components/VoteTable/VoteColumn.vue
@@ -45,21 +45,21 @@
 		<FlexSpacer v-if="poll.type === 'datePoll' && viewMode === 'list-view'" />
 
 		<div v-if="acl.allowEdit && closed" class="action confirm">
-			<VueButton v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
+			<NcButton v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
 				type="tertiary"
 				@click="confirmOption(option)">
 				<template #icon>
 					<UnconfirmIcon v-if="option.confirmed" :size="20" />
 					<ConfirmIcon v-else :size="20" />
 				</template>
-			</VueButton>
+			</NcButton>
 		</div>
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Button as VueButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import Counter from '../Options/Counter.vue'
 import OptionItem from '../Options/OptionItem.vue'
 import FlexSpacer from '../Base/FlexSpacer.vue'
@@ -77,7 +77,7 @@ export default {
 		OptionItem,
 		FlexSpacer,
 		VoteItem,
-		VueButton,
+		NcButton,
 		CalendarPeek: () => import('../Calendar/CalendarPeek.vue'),
 		OptionItemOwner: () => import('../Options/OptionItemOwner.vue'),
 	},
diff --git a/src/js/views/AdminSettingsPage.vue b/src/js/views/AdminSettingsPage.vue
index 23dad1910..92dca7bee 100644
--- a/src/js/views/AdminSettingsPage.vue
+++ b/src/js/views/AdminSettingsPage.vue
@@ -22,38 +22,38 @@
 
 <template>
 	<div class="polls_admin_settings">
-		<SettingsSection :title="t('polls', 'Share restrictions')"
+		<NcSettingsSection :title="t('polls', 'Share restrictions')"
 			:description="t('polls', 'Restrict the share actions globally or on a group base')">
 			<AdminShareSettings />
-		</SettingsSection>
+		</NcSettingsSection>
 
-		<SettingsSection :title="t('polls', 'Poll creation restrictions')"
+		<NcSettingsSection :title="t('polls', 'Poll creation restrictions')"
 			:description="t('polls', 'Restrict the creation of new polls globally or on a group base')">
 			<AdminPollCreation />
-		</SettingsSection>
+		</NcSettingsSection>
 
-		<SettingsSection :title="t('polls', 'Legal terms for public poll registration')"
+		<NcSettingsSection :title="t('polls', 'Legal terms for public poll registration')"
 			:description="t('polls', 'Override the default links of your site to your legal terms. Leave empty to use the links, which are configured in the theming app.')">
 			<AdminLegal />
-		</SettingsSection>
+		</NcSettingsSection>
 
-		<SettingsSection :title="t('polls', 'Email options')"
+		<NcSettingsSection :title="t('polls', 'Email options')"
 			:description="t('polls', 'Add links to legal terms, if they exist and add an optional disclaimer to emails.')">
 			<AdminEmail />
-		</SettingsSection>
+		</NcSettingsSection>
 
-		<SettingsSection :title="t('polls', 'Other settings')"
+		<NcSettingsSection :title="t('polls', 'Other settings')"
 			:description="t('polls', 'Activate or disable individual features.')">
 			<AdminMisc />
 			<AdminCombo />
 			<AdminPollDownload />
 			<AdminHideMailAddresses />
-		</SettingsSection>
+		</NcSettingsSection>
 
-		<SettingsSection :title="t('polls', 'Performance settings')"
+		<NcSettingsSection :title="t('polls', 'Performance settings')"
 			:description="t('polls', 'If you are experiencing connection problems, change how auto updates are retrieved.')">
 			<AdminPerformance />
-		</SettingsSection>
+		</NcSettingsSection>
 	</div>
 </template>
 
@@ -67,7 +67,7 @@ import AdminPollCreation from '../components/Settings/AdminSettings/AdminPollCre
 import AdminPollDownload from '../components/Settings/AdminSettings/AdminPollDownload.vue'
 import AdminShareSettings from '../components/Settings/AdminSettings/AdminShareSettings.vue'
 import AdminHideMailAddresses from '../components/Settings/AdminSettings/AdminHideMailAddresses.vue'
-import { SettingsSection } from '@nextcloud/vue'
+import { NcSettingsSection } from '@nextcloud/vue'
 import '../assets/scss/markdown.scss'
 
 export default {
@@ -83,7 +83,7 @@ export default {
 		AdminPollDownload,
 		AdminShareSettings,
 		AdminHideMailAddresses,
-		SettingsSection,
+		NcSettingsSection,
 	},
 
 	created() {
diff --git a/src/js/views/Administration.vue b/src/js/views/Administration.vue
index 106dd8ea6..c6eb24816 100644
--- a/src/js/views/Administration.vue
+++ b/src/js/views/Administration.vue
@@ -30,7 +30,7 @@
 		</HeaderBar>
 
 		<div class="area__main">
-			<EmptyContent v-if="noPolls">
+			<NcEmptyContent v-if="noPolls">
 				<template #icon>
 					<PollsAppIcon />
 				</template>
@@ -38,7 +38,7 @@
 					{{ t('polls', 'Add one or change category!') }}
 				</template>
 				{{ t('polls', 'No polls found for this category') }}
-			</EmptyContent>
+			</NcEmptyContent>
 
 			<transition-group v-else
 				name="list"
@@ -55,26 +55,26 @@
 					:poll="poll"
 					no-link>
 					<template #actions>
-						<Actions :force-menu="true">
-							<ActionButton icon="icon-add"
+						<NcActions :force-menu="true">
+							<NcActionButton icon="icon-add"
 								:close-after-click="true"
 								@click="confirmTakeOver(poll.id, poll.owner)">
 								{{ t('polls', 'Take over') }}
-							</ActionButton>
+							</NcActionButton>
 
-							<ActionButton :icon="poll.deleted ? 'icon-history' : 'icon-category-app-bundles'"
+							<NcActionButton :icon="poll.deleted ? 'icon-history' : 'icon-category-app-bundles'"
 								:close-after-click="true"
 								@click="toggleArchive(poll.id)">
 								{{ poll.deleted ? t('polls', 'Restore poll') : t('polls', 'Archive poll') }}
-							</ActionButton>
+							</NcActionButton>
 
-							<ActionButton icon="icon-delete"
+							<NcActionButton icon="icon-delete"
 								class="danger"
 								:close-after-click="true"
 								@click="confirmDelete(poll.id, poll.owner)">
 								{{ t('polls', 'Delete poll') }}
-							</ActionButton>
-						</Actions>
+							</NcActionButton>
+						</NcActions>
 					</template>
 				</PollItem>
 			</transition-group>
@@ -82,23 +82,23 @@
 
 		<LoadingOverlay v-if="isLoading" />
 
-		<Modal v-if="takeOverModal" size="small" @close="takeOverModal = false">
+		<NcModal v-if="takeOverModal" size="small" @close="takeOverModal = false">
 			<div class="modal__content">
 				<h2>{{ t('polls', 'Do you want to take over this poll?') }}</h2>
 				<div>{{ t('polls', '{username} will get notified.', {username: currentPoll.owner.displayName}) }}</div>
 				<div class="modal__buttons">
-					<VueButton @click="takeOverModal = false">
+					<NcButton @click="takeOverModal = false">
 						{{ t('polls', 'No') }}
-					</VueButton>
+					</NcButton>
 
-					<VueButton type="primary" @click="takeOverPoll()">
+					<NcButton type="primary" @click="takeOverPoll()">
 						{{ t('polls', 'Yes') }}
-					</VueButton>
+					</NcButton>
 				</div>
 			</div>
-		</Modal>
+		</NcModal>
 
-		<Modal v-if="deleteModal" size="small" @close="deleteModal = false">
+		<NcModal v-if="deleteModal" size="small" @close="deleteModal = false">
 			<div class="modal__content">
 				<h2>{{ t('polls', 'Do you want to delete this poll?') }}</h2>
 				<div>
@@ -106,16 +106,16 @@
 					{{ t('polls', '{username} will get notified.', {username: currentPoll.owner.displayName}) }}
 				</div>
 				<div class="modal__buttons">
-					<VueButton @click="deleteModal = false">
+					<NcButton @click="deleteModal = false">
 						{{ t('polls', 'No') }}
-					</VueButton>
+					</NcButton>
 
-					<VueButton type="primary" @click="deletePoll()">
+					<NcButton type="primary" @click="deletePoll()">
 						{{ t('polls', 'Yes') }}
-					</VueButton>
+					</NcButton>
 				</div>
 			</div>
-		</Modal>
+		</NcModal>
 	</AppContent>
 </template>
 
@@ -123,7 +123,7 @@
 import { mapGetters } from 'vuex'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
-import { Actions, ActionButton, AppContent, Button as VueButton, EmptyContent, Modal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, AppContent, NcButton, NcEmptyContent, NcModal } from '@nextcloud/vue'
 import { sortBy } from 'lodash'
 import HeaderBar from '../components/Base/HeaderBar.vue'
 import PollsAppIcon from '../components/AppIcons/PollsAppIcon.vue'
@@ -133,12 +133,12 @@ export default {
 
 	components: {
 		AppContent,
-		Actions,
-		ActionButton,
-		EmptyContent,
+		NcActions,
+		NcActionButton,
+		NcEmptyContent,
 		HeaderBar,
-		Modal,
-		VueButton,
+		NcModal,
+		NcButton,
 		PollsAppIcon,
 		LoadingOverlay: () => import('../components/Base/LoadingOverlay.vue'),
 		PollItem: () => import('../components/PollList/PollItem.vue'),
diff --git a/src/js/views/Combo.vue b/src/js/views/Combo.vue
index b2c27f2ce..690ad9dbc 100644
--- a/src/js/views/Combo.vue
+++ b/src/js/views/Combo.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<AppContent>
+	<NcAppContent>
 		<HeaderBar class="area__header">
 			<template #title>
 				{{ title }}
@@ -37,7 +37,7 @@
 		<div class="area__main">
 			<ComboTable v-show="polls.length" />
 
-			<EmptyContent v-if="!polls.length">
+			<NcEmptyContent v-if="!polls.length">
 				<template #icon>
 					<PollsAppIcon />
 				</template>
@@ -45,16 +45,16 @@
 					{{ t('polls', 'Select polls by clicking on them in the right sidebar!') }}
 				</template>
 				{{ t('polls', 'No polls selected') }}
-			</EmptyContent>
+			</NcEmptyContent>
 		</div>
 
 		<LoadingOverlay v-if="isLoading" />
-	</AppContent>
+	</NcAppContent>
 </template>
 
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex'
-import { AppContent, EmptyContent } from '@nextcloud/vue'
+import { NcAppContent, NcEmptyContent } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
 import ComboTable from '../components/Combo/ComboTable.vue'
 import ActionToggleSidebar from '../components/Actions/ActionToggleSidebar.vue'
@@ -66,9 +66,9 @@ export default {
 
 	components: {
 		ActionToggleSidebar,
-		AppContent,
+		NcAppContent,
 		ComboTable,
-		EmptyContent,
+		NcEmptyContent,
 		HeaderBar,
 		PollsAppIcon,
 		LoadingOverlay: () => import('../components/Base/LoadingOverlay.vue'),
diff --git a/src/js/views/Navigation.vue b/src/js/views/Navigation.vue
index be3a618a3..310662322 100644
--- a/src/js/views/Navigation.vue
+++ b/src/js/views/Navigation.vue
@@ -21,15 +21,15 @@
   -->
 
 <template lang="html">
-	<AppNavigation>
-		<AppNavigationNew v-if="isPollCreationAllowed"
+	<NcAppNavigation>
+		<NcAppNavigationNew v-if="isPollCreationAllowed"
 			button-class="icon-add"
 			:text="t('polls', 'Add new Poll')"
 			@click="toggleCreateDlg" />
 		<CreateDlg v-show="createDlg" ref="createDlg" @close-create="closeCreate()" />
 
 		<template #list>
-			<AppNavigationItem v-for="(pollCategory) in pollCategories"
+			<NcAppNavigationItem v-for="(pollCategory) in pollCategories"
 				:key="pollCategory.id"
 				:title="pollCategory.title"
 				:allow-collapse="true"
@@ -47,37 +47,37 @@
 						@clone-poll="clonePoll(poll.id)"
 						@delete-poll="deletePoll(poll.id)" />
 				</ul>
-			</AppNavigationItem>
+			</NcAppNavigationItem>
 		</template>
 
 		<template #footer>
-			<AppNavigationItem v-if="isComboActivated"
+			<NcAppNavigationItem v-if="isComboActivated"
 				:title="t('polls', 'Combine polls')"
 				:to="{ name: 'combo' }">
 				<template #icon>
 					<ComboIcon :size="iconSize" />
 				</template>
-			</AppNavigationItem>
-			<AppNavigationItem v-if="showAdminSection"
+			</NcAppNavigationItem>
+			<NcAppNavigationItem v-if="showAdminSection"
 				:title="t('polls', 'Administration')"
 				:to="{ name: 'administration' }">
 				<template #icon>
 					<AdministrationIcon :size="iconSize" />
 				</template>
-			</AppNavigationItem>
-			<AppNavigationItem :title="t('polls', 'Personal settings')"
+			</NcAppNavigationItem>
+			<NcAppNavigationItem :title="t('polls', 'Personal settings')"
 				@click="showSettings()">
 				<template #icon>
 					<SettingsIcon :size="iconSize" />
 				</template>
-			</AppNavigationItem>
+			</NcAppNavigationItem>
 		</template>
-	</AppNavigation>
+	</NcAppNavigation>
 </template>
 
 <script>
 
-import { AppNavigation, AppNavigationNew, AppNavigationItem } from '@nextcloud/vue'
+import { NcAppNavigation, NcAppNavigationNew, NcAppNavigationItem } from '@nextcloud/vue'
 import { mapGetters, mapState } from 'vuex'
 import { getCurrentUser } from '@nextcloud/auth'
 import { showError } from '@nextcloud/dialogs'
@@ -99,9 +99,9 @@ import ArchivedPollsIcon from 'vue-material-design-icons/Archive.vue'
 export default {
 	name: 'Navigation',
 	components: {
-		AppNavigation,
-		AppNavigationNew,
-		AppNavigationItem,
+		NcAppNavigation,
+		NcAppNavigationNew,
+		NcAppNavigationItem,
 		CreateDlg,
 		PollNavigationItems,
 		ComboIcon,
diff --git a/src/js/views/NotFound.vue b/src/js/views/NotFound.vue
index e1529103b..497e3b173 100644
--- a/src/js/views/NotFound.vue
+++ b/src/js/views/NotFound.vue
@@ -21,8 +21,8 @@
   -->
 
 <template>
-	<AppContent>
-		<EmptyContent icon="icon-search">
+	<NcAppContent>
+		<NcEmptyContent icon="icon-search">
 			{{ t('polls', '404 - poll not found') }}
 			<template #desc>
 				<p v-if="getCurrentUser()">
@@ -32,19 +32,19 @@
 					{{ t('polls', 'Goto Nextcloud') }}
 				</button>
 			</template>
-		</EmptyContent>
-	</AppContent>
+		</NcEmptyContent>
+	</NcAppContent>
 </template>
 
 <script>
-import { AppContent, EmptyContent } from '@nextcloud/vue'
+import { NcAppContent, NcEmptyContent } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'NotFound',
 	components: {
-		AppContent,
-		EmptyContent,
+		NcAppContent,
+		NcEmptyContent,
 	},
 
 	methods: {
diff --git a/src/js/views/PollList.vue b/src/js/views/PollList.vue
index da2a7ca3f..76d622fd0 100644
--- a/src/js/views/PollList.vue
+++ b/src/js/views/PollList.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<AppContent class="poll-list">
+	<NcAppContent class="poll-list">
 		<HeaderBar class="area__header">
 			<template #title>
 				{{ title }}
@@ -30,7 +30,7 @@
 		</HeaderBar>
 
 		<div class="area__main">
-			<EmptyContent v-if="noPolls">
+			<NcEmptyContent v-if="noPolls">
 				<template #icon>
 					<PollsAppIcon />
 				</template>
@@ -38,7 +38,7 @@
 					{{ t('polls', 'Add one or change category!') }}
 				</template>
 				{{ t('polls', 'No polls found for this category') }}
-			</EmptyContent>
+			</NcEmptyContent>
 
 			<transition-group v-else
 				name="list"
@@ -54,35 +54,35 @@
 					@goto-poll="gotoPoll(poll.id)"
 					@load-poll="loadPoll(poll.id)">
 					<template #actions>
-						<Actions force-menu>
-							<ActionButton v-if="isPollCreationAllowed"
+						<NcActions force-menu>
+							<NcActionButton v-if="isPollCreationAllowed"
 								:close-after-click="true"
 								@click="clonePoll(poll.id)">
 								<template #icon>
 									<ClonePollIcon />
 								</template>
 								{{ t('polls', 'Clone poll') }}
-							</ActionButton>
+							</NcActionButton>
 
-							<ActionButton v-if="poll.allowEdit && !poll.deleted"
+							<NcActionButton v-if="poll.allowEdit && !poll.deleted"
 								:close-after-click="true"
 								@click="toggleArchive(poll.id)">
 								<template #icon>
 									<ArchivePollIcon />
 								</template>
 								{{ t('polls', 'Archive poll') }}
-							</ActionButton>
+							</NcActionButton>
 
-							<ActionButton v-if="poll.allowEdit && poll.deleted"
+							<NcActionButton v-if="poll.allowEdit && poll.deleted"
 								:close-after-click="true"
 								@click="toggleArchive(poll.id)">
 								<template #icon>
 									<RestorePollIcon />
 								</template>
 								{{ t('polls', 'Restore poll') }}
-							</ActionButton>
+							</NcActionButton>
 
-							<ActionButton v-if="poll.allowEdit && poll.deleted"
+							<NcActionButton v-if="poll.allowEdit && poll.deleted"
 								class="danger"
 								:close-after-click="true"
 								@click="deletePoll(poll.id)">
@@ -90,21 +90,21 @@
 									<DeletePollIcon />
 								</template>
 								{{ t('polls', 'Delete poll') }}
-							</ActionButton>
-						</Actions>
+							</NcActionButton>
+						</NcActions>
 					</template>
 				</PollItem>
 			</transition-group>
 		</div>
 		<LoadingOverlay v-if="isLoading" />
-	</AppContent>
+	</NcAppContent>
 </template>
 
 <script>
 import { mapGetters, mapState, mapActions } from 'vuex'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
-import { Actions, ActionButton, AppContent, EmptyContent } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcAppContent, NcEmptyContent } from '@nextcloud/vue'
 import HeaderBar from '../components/Base/HeaderBar.vue'
 import DeletePollIcon from 'vue-material-design-icons/Delete.vue'
 import ClonePollIcon from 'vue-material-design-icons/ContentCopy.vue'
@@ -116,10 +116,10 @@ export default {
 	name: 'PollList',
 
 	components: {
-		AppContent,
-		Actions,
-		ActionButton,
-		EmptyContent,
+		NcAppContent,
+		NcActions,
+		NcActionButton,
+		NcEmptyContent,
 		HeaderBar,
 		DeletePollIcon,
 		ClonePollIcon,
diff --git a/src/js/views/PollSelector.vue b/src/js/views/PollSelector.vue
index fdf73293b..6c274e04f 100644
--- a/src/js/views/PollSelector.vue
+++ b/src/js/views/PollSelector.vue
@@ -22,7 +22,7 @@
   -->
 
 <template>
-	<Modal :container="container"
+	<NcModal :container="container"
 		@close="close">
 		<div id="modal-inner" class="polls-picker-modal" :class="{ 'icon-loading': loading }">
 			<div id="modal-content">
@@ -58,18 +58,18 @@
 				</div>
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import { Modal } from '@nextcloud/vue'
+import { NcModal } from '@nextcloud/vue'
 import UserItem from '../components/User/UserItem.vue'
 
 export default {
 	name: 'PollSelector',
 	components: {
-		Modal,
+		NcModal,
 		UserItem,
 	},
 	props: {
diff --git a/src/js/views/SideBar.vue b/src/js/views/SideBar.vue
index 3a0caba1a..759b7414d 100644
--- a/src/js/views/SideBar.vue
+++ b/src/js/views/SideBar.vue
@@ -21,11 +21,11 @@
   -->
 
 <template>
-	<AppSidebar ref="sideBar"
+	<NcAppSidebar ref="sideBar"
 		:active="active"
 		:title="t('polls', 'Details')"
 		@close="closeSideBar()">
-		<AppSidebarTab v-if="acl.allowEdit"
+		<NcAppSidebarTab v-if="acl.allowEdit"
 			:id="'configuration'"
 			:order="1"
 			:name="t('polls', 'Configuration')">
@@ -33,9 +33,9 @@
 				<SidebarConfigurationIcon />
 			</template>
 			<SideBarTabConfiguration />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab v-if="acl.allowEdit"
+		<NcAppSidebarTab v-if="acl.allowEdit"
 			:id="'options'"
 			:order="2"
 			:name="t('polls', 'Options')">
@@ -43,9 +43,9 @@
 				<SidebarOptionsIcon />
 			</template>
 			<SideBarTabOptions />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab v-if="acl.allowEdit"
+		<NcAppSidebarTab v-if="acl.allowEdit"
 			:id="'sharing'"
 			:order="3"
 			:name="t('polls', 'Sharing')">
@@ -53,9 +53,9 @@
 				<SidebarShareIcon />
 			</template>
 			<SideBarTabShare />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab v-if="acl.loggedIn && useCollaboration"
+		<NcAppSidebarTab v-if="acl.loggedIn && useCollaboration"
 			:id="'collaboration'"
 			:order="4"
 			:name="t('polls', 'Collaboration')">
@@ -63,9 +63,9 @@
 				<SidebarProjectsIcon />
 			</template>
 			<SideBarTabCollaboration />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab v-if="acl.allowComment"
+		<NcAppSidebarTab v-if="acl.allowComment"
 			:id="'comments'"
 			:order="5"
 			:name="t('polls', 'Comments')">
@@ -73,9 +73,9 @@
 				<SidebarCommentsIcon />
 			</template>
 			<SideBarTabComments />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab v-if="acl.allowEdit && useActivity"
+		<NcAppSidebarTab v-if="acl.allowEdit && useActivity"
 			:id="'activity'"
 			:order="6"
 			:name="t('polls', 'Activity')">
@@ -83,12 +83,12 @@
 				<SidebarActivityIcon />
 			</template>
 			<SideBarTabActivity />
-		</AppSidebarTab>
-	</AppSidebar>
+		</NcAppSidebarTab>
+	</NcAppSidebar>
 </template>
 
 <script>
-import { AppSidebar, AppSidebarTab } from '@nextcloud/vue'
+import { NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
 import { mapState } from 'vuex'
 import { emit } from '@nextcloud/event-bus'
 import SidebarConfigurationIcon from 'vue-material-design-icons/Wrench.vue'
@@ -108,8 +108,8 @@ export default {
 		SideBarTabShare: () => import('../components/SideBar/SideBarTabShare.vue'),
 		SideBarTabCollaboration: () => import('../components/SideBar/SideBarTabCollaboration.vue'),
 		SideBarTabActivity: () => import('../components/SideBar/SideBarTabActivity.vue'),
-		AppSidebar,
-		AppSidebarTab,
+		NcAppSidebar,
+		NcAppSidebarTab,
 		SidebarActivityIcon,
 		SidebarConfigurationIcon,
 		SidebarOptionsIcon,
diff --git a/src/js/views/SideBarCombo.vue b/src/js/views/SideBarCombo.vue
index e5c4c8b5a..695f4fda6 100644
--- a/src/js/views/SideBarCombo.vue
+++ b/src/js/views/SideBarCombo.vue
@@ -21,23 +21,23 @@
   -->
 
 <template>
-	<AppSidebar ref="sideBar"
+	<NcAppSidebar ref="sideBar"
 		:active="active"
 		:title="t('polls', 'Select polls to combine')"
 		@close="closeSideBar()">
-		<AppSidebarTab :id="'polls'"
+		<NcAppSidebarTab :id="'polls'"
 			:order="1"
 			:name="t('polls', 'Polls')">
 			<template #icon>
 				<PollsAppIcon />
 			</template>
 			<SideBarTabDatePolls />
-		</AppSidebarTab>
-	</AppSidebar>
+		</NcAppSidebarTab>
+	</NcAppSidebar>
 </template>
 
 <script>
-import { AppSidebar, AppSidebarTab } from '@nextcloud/vue'
+import { NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
 import { mapGetters } from 'vuex'
 import { emit } from '@nextcloud/event-bus'
 import PollsAppIcon from '../components/AppIcons/PollsAppIcon.vue'
@@ -47,8 +47,8 @@ export default {
 
 	components: {
 		SideBarTabDatePolls: () => import('../components/SideBar/SideBarTabDatePolls.vue'),
-		AppSidebar,
-		AppSidebarTab,
+		NcAppSidebar,
+		NcAppSidebarTab,
 		PollsAppIcon,
 	},
 
diff --git a/src/js/views/UserSettingsPage.vue b/src/js/views/UserSettingsPage.vue
index 64de3e7a9..4280ef487 100644
--- a/src/js/views/UserSettingsPage.vue
+++ b/src/js/views/UserSettingsPage.vue
@@ -22,35 +22,35 @@
 
 <template>
 	<div class="polls_user_settings">
-		<SettingsSection :title="t('polls', 'Calendar check')"
+		<NcSettingsSection :title="t('polls', 'Calendar check')"
 			:description="t('polls', 'Search for conflicting calendar entries')">
 			<CalendarSettings />
-		</SettingsSection>
-		<SettingsSection :title="t('polls', 'Polls user settings')"
+		</NcSettingsSection>
+		<NcSettingsSection :title="t('polls', 'Polls user settings')"
 			:description="t('polls', 'Set your personal preferences for the polls app')">
 			<FeatureSettings />
-		</SettingsSection>
+		</NcSettingsSection>
 
-		<SettingsSection :title="t('polls', 'Performance settings')"
+		<NcSettingsSection :title="t('polls', 'Performance settings')"
 			:description="t('polls', 'Try to change these parameters to handle big polls')">
 			<PerformanceSettings />
-		</SettingsSection>
+		</NcSettingsSection>
 
-		<SettingsSection :title="t('polls', 'Experimental styles')"
+		<NcSettingsSection :title="t('polls', 'Experimental styles')"
 			:description="t('polls', 'Some visual styling options.')">
 			<StyleSettings />
-		</SettingsSection>
+		</NcSettingsSection>
 	</div>
 </template>
 
 <script>
 
-import { SettingsSection } from '@nextcloud/vue'
+import { NcSettingsSection } from '@nextcloud/vue'
 export default {
 	name: 'UserSettingsPage',
 
 	components: {
-		SettingsSection,
+		NcSettingsSection,
 		CalendarSettings: () => import('../components/Settings/UserSettings/CalendarSettings.vue'),
 		FeatureSettings: () => import('../components/Settings/UserSettings/FeatureSettings.vue'),
 		StyleSettings: () => import('../components/Settings/UserSettings/StyleSettings.vue'),
diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue
index cab067c2b..0042a9d58 100644
--- a/src/js/views/Vote.vue
+++ b/src/js/views/Vote.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<AppContent :class="[{ closed: closed }, poll.type]">
+	<NcAppContent :class="[{ closed: closed }, poll.type]">
 		<HeaderBar class="area__header">
 			<template #title>
 				{{ poll.title }}
@@ -47,7 +47,7 @@
 			<div class="area__main" :class="viewMode">
 				<VoteTable v-show="options.length" :view-mode="viewMode" />
 
-				<EmptyContent v-if="!options.length">
+				<NcEmptyContent v-if="!options.length">
 					<template #icon>
 						<TextPollIcon v-if="poll.type === 'textPoll'" />
 						<DatePollIcon v-else />
@@ -61,7 +61,7 @@
 							{{ t('polls', 'Maybe the owner did not provide some until now.') }}
 						</div>
 					</template>
-				</EmptyContent>
+				</NcEmptyContent>
 			</div>
 
 			<div v-if="countHiddenParticipants" class="area__footer">
@@ -80,12 +80,12 @@
 
 		<PublicRegisterModal v-if="showRegisterModal" />
 		<LoadingOverlay v-if="isLoading" />
-	</AppContent>
+	</NcAppContent>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { AppContent, EmptyContent } from '@nextcloud/vue'
+import { NcAppContent, NcEmptyContent } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
 import MarkUpDescription from '../components/Poll/MarkUpDescription.vue'
 import PollInfoLine from '../components/Poll/PollInfoLine.vue'
@@ -99,8 +99,8 @@ export default {
 	name: 'Vote',
 	components: {
 		ActionSendConfirmedOptions,
-		AppContent,
-		EmptyContent,
+		NcAppContent,
+		NcEmptyContent,
 		HeaderBar,
 		MarkUpDescription,
 		PollHeaderButtons,