Merge pull request #2578 from nextcloud/dep/vue-nextcloud-6

dep/nextcloud-vue-7

81 files changed, 734 insertions, 1384 deletions

diff --git a/.github/workflows/phpunit.yml b/.github/workflows/phpunit.yml
index 6e3abb0e..2151cd5e 100644
--- a/.github/workflows/phpunit.yml
+++ b/.github/workflows/phpunit.yml
@@ -23,7 +23,7 @@ jobs:
       # do not stop on another job's failure
       fail-fast: false
       matrix:
-        php-versions: ['7.4', '8.0', '8.1']
+        php-versions: ['8.0', '8.1']
         server-versions: ['master']
 
     name: SQLite
@@ -60,7 +60,7 @@ jobs:
       fail-fast: false
       matrix:
         php-versions: ['8.0']
-        server-versions: ['stable24', 'stable23']
+        server-versions: ['master']
 
     name: MySQL
 
@@ -105,7 +105,7 @@ jobs:
       fail-fast: false
       matrix:
         php-versions: ['7.4']
-        server-versions: ['stable23', 'stable22']
+        server-versions: ['master']
 
     name: PostgreSQL
 
diff --git a/appinfo/info.xml b/appinfo/info.xml
index 42d848a3..80fb29e7 100644
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -4,7 +4,7 @@
     <name>Polls</name>
     <summary>A polls app, similar to Doodle/Dudle with the possibility to restrict access.</summary>
     <description>A polls app, similar to Doodle/Dudle with the possibility to restrict access (members, certain groups/users, hidden and public).</description>
-    <version>3.8.0</version>
+    <version>4.0.0-beta1</version>
     <licence>agpl</licence>
     <author>Vinzenz Rosenkranz</author>
     <author>René Gieling</author>
@@ -23,7 +23,7 @@
     <screenshot>https://raw.githubusercontent.com/nextcloud/polls/master/screenshots/edit-poll.png</screenshot>
     <dependencies>
         <php min-version="7.4"/>
-        <nextcloud min-version="22" max-version="24" />
+        <nextcloud min-version="25" max-version="25" />
     </dependencies>
     <activity>
 		<providers>
diff --git a/package-lock.json b/package-lock.json
index 5699da10..84597bee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "polls",
-	"version": "3.8.0",
+	"version": "4.0.0-beta1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "polls",
-			"version": "3.8.0",
+			"version": "4.0.0-beta1",
 			"license": "AGPL-3.0",
 			"dependencies": {
 				"@nextcloud/auth": "^2.0.0",
@@ -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": "^7.0.0-beta.3",
 				"@nextcloud/vue-richtext": "^2.0.1",
 				"core-js": "^3.25.1",
 				"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": "7.0.0-beta.3",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.0.0-beta.3.tgz",
+			"integrity": "sha512-lnEVzPPt4eGLHrSwsft5oBg7pEqVZA2DteWR/Bq02+jptqE7at6W8sV7PMBR0N5VRI2yNsm7sMIJLsHXvxmpfg==",
 			"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/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": {
+				"@floating-ui/dom": "^0.1.10",
+				"vue-resize": "^1.0.0"
+			},
+			"peerDependencies": {
+				"vue": "^2.6.10"
+			}
+		},
 		"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==",
+			"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": "^5.3.3"
+				"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": "7.0.0-beta.3",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.0.0-beta.3.tgz",
+			"integrity": "sha512-lnEVzPPt4eGLHrSwsft5oBg7pEqVZA2DteWR/Bq02+jptqE7at6W8sV7PMBR0N5VRI2yNsm7sMIJLsHXvxmpfg==",
 			"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
 		},
+		"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": {
+				"@floating-ui/dom": "^0.1.10",
+				"vue-resize": "^1.0.0"
+			}
+		},
 		"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==",
+			"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": "^5.3.3"
+				"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 ddaa3309..fd67c5f1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "polls",
 	"description": "Polls app for nextcloud",
-	"version": "3.8.0",
+	"version": "4.0.0-beta1",
 	"authors": [
 		{
 			"name": "Vinzenz Rosenkranz",
@@ -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": "^7.0.0-beta.3",
 		"@nextcloud/vue-richtext": "^2.0.1",
 		"core-js": "^3.25.1",
 		"dompurify": "^2.4.0",
diff --git a/src/js/App.vue b/src/js/App.vue
index f15899f2..bc34d747 100644
--- a/src/js/App.vue
+++ b/src/js/App.vue
@@ -21,12 +21,10 @@
   -->
 
 <template>
-	<NcContent app-name="polls"
-		:style="{background: appBackground}"
-		:class="appClass">
+	<NcContent app-name="polls" :class="appClass">
 		<router-view v-if="getCurrentUser()" name="navigation" />
 		<router-view />
-		<router-view v-if="showSidebar" name="sidebar" :active="activeTab" />
+		<router-view v-show="sideBar.open" name="sidebar" :active="sideBar.activeTab" />
 		<LoadingOverlay v-if="loading" />
 		<UserSettingsDlg />
 	</NcContent>
@@ -35,9 +33,9 @@
 <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 { mapState, mapActions } from 'vuex'
 import '@nextcloud/dialogs/styles/toast.scss'
 import './assets/scss/colors.scss'
 import './assets/scss/hacks.scss'
@@ -45,7 +43,6 @@ import './assets/scss/icons.scss'
 import './assets/scss/icons-md.scss'
 import './assets/scss/print.scss'
 import './assets/scss/transitions.scss'
-import './assets/scss/theming.scss'
 import './assets/scss/markdown.scss'
 import { watchPolls } from './mixins/watchPolls.js'
 
@@ -61,8 +58,10 @@ export default {
 
 	data() {
 		return {
-			sideBarOpen: (window.innerWidth > 920),
-			activeTab: 'comments',
+			sideBar: {
+				open: (window.innerWidth > 920),
+				activeTab: 'comments',
+			},
 			transitionClass: 'transitions-active',
 			loading: false,
 		}
@@ -74,54 +73,18 @@ export default {
 			appSettings: (state) => state.appSettings,
 			poll: (state) => state.poll,
 			allowEdit: (state) => state.poll.acl.allowEdit,
-			dashboard: (state) => state.settings.dashboard,
-		}),
-
-		...mapGetters({
-			themeClass: 'settings/themeClass',
-			backgroundClass: 'settings/backgroundClass',
-			useDashboardStyling: 'settings/useDashboardStyling',
-			useIndividualStyling: 'settings/useIndividualStyling',
-			useTranslucentPanels: 'settings/useTranslucentPanels',
-			appBackground: 'settings/appBackground',
 		}),
 
 		appClass() {
 			return [
 				this.transitionClass, {
 					edit: this.allowEdit,
-					translucent: this.useTranslucentPanels,
 				},
 			]
 		},
-
-		showSidebar() {
-			if (this.$route.name === 'combo') {
-				return this.sideBarOpen
-			}
-			return this.sideBarOpen && this.poll.id && (this.allowEdit || this.poll.allowComment)
-		},
 	},
 
 	watch: {
-		themeClass(newValue, oldValue) {
-			if (oldValue) {
-				document.body.classList.remove(oldValue)
-			}
-			if (newValue) {
-				document.body.classList.add(newValue)
-			}
-		},
-
-		backgroundClass(newValue, oldValue) {
-			if (oldValue) {
-				document.body.classList.remove(oldValue)
-			}
-			if (newValue) {
-				document.body.classList.add(newValue)
-			}
-		},
-
 		$route(to, from) {
 			if (this.$route.name === 'list') {
 				this.setFilter(this.$route.params.type)
@@ -153,30 +116,11 @@ export default {
 		})
 
 		subscribe('polls:sidebar:toggle', (payload) => {
-			if (payload === undefined) {
-				this.sideBarOpen = !this.sideBarOpen
-			} else {
-				if (payload.activeTab !== undefined) {
-					this.activeTab = payload.activeTab
-				}
-				if (payload.open === undefined) {
-					this.sideBarOpen = !this.sideBarOpen
-				} else {
-					this.sideBarOpen = payload.open
-				}
-			}
-
+			this.sideBar.activeTab = payload?.activeTab ?? this.sideBar.activeTab
+			this.sideBar.open = payload?.open ?? !this.sideBar.open
 		})
 	},
 
-	mounted() {
-		window.addEventListener('scroll', this.handleScroll)
-	},
-
-	destroyed() {
-		window.removeEventListener('scroll', this.handleScroll)
-	},
-
 	beforeDestroy() {
 		this.cancelToken.cancel()
 		unsubscribe('polls:poll:load')
@@ -189,13 +133,6 @@ export default {
 		...mapActions({
 			setFilter: 'polls/setFilter',
 		}),
-		handleScroll() {
-			if (window.scrollY > 20) {
-				document.body.classList.add('page--scrolled')
-			} else {
-				document.body.classList.remove('page--scrolled')
-			}
-		},
 
 		transitionsOn() {
 			this.transitionClass = 'transitions-active'
@@ -257,7 +194,6 @@ export default {
 	flex-direction: column;
 	padding: 0px 8px;
 	row-gap: 8px;
-	background-color: transparent !important;
 }
 
 // global areas settings
@@ -273,7 +209,7 @@ export default {
 [class*=' area__header'],
 [class^='area__header'] {
 	position: sticky;
-	top: 50px;
+	top: 0;
 	background-color: var(--color-main-background);
 	border-bottom: 1px solid var(--color-border);
 	z-index: 9;
@@ -283,13 +219,6 @@ export default {
 	padding-left: 56px;
 }
 
-// [class*=' area__header_vote'],
-// [class^='area__header_vote'] {
-//   background-color: transparent;
-//   border: none;
-//   box-shadow: none !important;
-// }
-
 // global modal settings
 .modal__content {
 	padding: 14px;
diff --git a/src/js/assets/scss/colors-dark.scss b/src/js/assets/scss/colors-dark.scss
deleted file mode 100644
index c7deb53d..00000000
--- a/src/js/assets/scss/colors-dark.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-// TODO: preparation for full support of @media:prefers-color-scheme by core
-// until then, this ha no effect
-
-// dark mode, when
-// @media (prefers-color-scheme: dark) && [data-themes="default"]
-
-@media (prefers-color-scheme: dark) {
-	:root, [data-theme-default] {
-		--color-foreground-error: #dddddd;
-		--color-foreground-success: #dddddd;
-		--color-background-success: #2e4600;
-		--color-background-error: #4d0d00;
-		--color-polls-background-yes: #2e4600;
-		--color-polls-background-no: #4d0d00;
-		--color-polls-background-maybe: #665600;
-		--color-background-translucent: rgba(24,24,24,0.8);
-	}
-}
diff --git a/src/js/assets/scss/colors.scss b/src/js/assets/scss/colors.scss
index d38d8d7c..df59b528 100644
--- a/src/js/assets/scss/colors.scss
+++ b/src/js/assets/scss/colors.scss
@@ -10,29 +10,6 @@
 	--color-polls-background-yes: #ebf5d6;
 	--color-polls-background-no: #ffede9;
 	--color-polls-background-maybe: #fcf7e1;
-	--color-polls-background-yes--dark: #2e4600;
-	--color-polls-background-no--dark: #4d0d00;
-	--color-polls-background-maybe--dark: #665600;
-	--color-polls-dashboard-dark-background: #ffffff;
-	--color-polls-dashboard-dark-text: #000000;
-	--color-polls-dashboard-light-background: #000000;
-	--color-polls-dashboard-light-text: #ffffff;
-	--color-background-translucent: rgba(255,255,255,0.8);
-	--background-blur: blur(10px);
-	// TODO  remove after NC24, compatibility for nc versions before 25
-	--color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
-}
-
-:root .theme--dark,
-[data-theme-dark] {
-	--color-foreground-error: #dddddd;
-	--color-foreground-success: #dddddd;
-	--color-background-success: #2e4600;
-	--color-background-error: #4d0d00;
-	--color-polls-background-yes: #2e4600;
-	--color-polls-background-no: #4d0d00;
-	--color-polls-background-maybe: #665600;
-	--color-background-translucent: rgba(24, 24, 24, 0.8);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -40,12 +17,11 @@
 	[data-theme-default] {
 		--color-foreground-error: #dddddd;
 		--color-foreground-success: #dddddd;
-		--color-background-success: #2e4600;
 		--color-background-error: #4d0d00;
+		--color-background-success: #2e4600;
 		--color-polls-background-yes: #2e4600;
 		--color-polls-background-no: #4d0d00;
 		--color-polls-background-maybe: #665600;
-		--color-background-translucent: rgba(24, 24, 24, 0.8);
 	}
 	
 }
diff --git a/src/js/assets/scss/hacks.scss b/src/js/assets/scss/hacks.scss
index 38b91e3e..0c84e926 100644
--- a/src/js/assets/scss/hacks.scss
+++ b/src/js/assets/scss/hacks.scss
@@ -1,13 +1,8 @@
 // some hacks, do alter the display of third parity components
 
-// until NC24: compatibility hack
-:root body {
-	&:not([data-themes]) {
-	--color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
-	--color-main-background-rgb: 255, 255, 255;
-	&.theme--dark {
-		--color-main-background-rgb: 23, 23, 23;
-	}}
+// raltive position to be able to get sticky toolbar
+.app-content {
+	position: relative !important;
 }
 
 // fill full input with background color
@@ -18,10 +13,6 @@
 .action-item.action-item--single.app-navigation-toggle.undefined.has-tooltip {
 	top: 4px;
 	margin-right: -50px;
-	[class*='dashboard--'] & {
-		top: 12px;
-		margin-right: -58px;
-	}
 }
 
 .mx-input-wrapper .button-vue--vue-primary .material-design-icon__svg {
diff --git a/src/js/assets/scss/icons-md.scss b/src/js/assets/scss/icons-md.scss
index 27c29559..d72a8136 100644
--- a/src/js/assets/scss/icons-md.scss
+++ b/src/js/assets/scss/icons-md.scss
@@ -36,15 +36,6 @@
 	background-color: #000;
 }
 
-.theme--dark {
-	&[class*='icon-mask-md-'] {
-		background-color: #000 !important;
-	}
-	[class*='icon-mask-md-'] {
-		background-color: #fff;
-	}
-}
-
 // material design icons
 // just svg background icon
 .icon-svg-md-email { @include svg-icon(var(--icon-md-email)); }
diff --git a/src/js/assets/scss/icons.scss b/src/js/assets/scss/icons.scss
index a9582d7b..01039994 100644
--- a/src/js/assets/scss/icons.scss
+++ b/src/js/assets/scss/icons.scss
@@ -1,6 +1,4 @@
 :root {
-	--polls-vote-rows: 1;
-	--polls-vote-columns: 1;
 	--icon-circles: url('../icons/circles.svg');
 	--icon-circles--fff: url('../icons/circles-fff.svg');
 	--icon-polls-maybe: url('../icons/maybe-vote.svg');
@@ -19,7 +17,3 @@
 .icon-polls-maybe { background-image: var(--icon-polls-maybe); }
 .icon-polls-no { background-image: var(--icon-polls-no); }
 .icon-polls-yes { background-image: var(--icon-polls-yes); }
-
-.theme--dark {
-	.icon-circles { background-image: var(--icon-circles--fff); }
-}
diff --git a/src/js/assets/scss/polls-icon.scss b/src/js/assets/scss/polls-icon.scss
index 95c8255d..50408068 100644
--- a/src/js/assets/scss/polls-icon.scss
+++ b/src/js/assets/scss/polls-icon.scss
@@ -12,9 +12,3 @@
 		background-image: var(--icon-polls--fff);
 	}
 }
-
-.theme--dark {
-	.icon-polls {
-		background-image: var(--icon-polls--fff);
-	}
-}
diff --git a/src/js/assets/scss/theming.scss b/src/js/assets/scss/theming.scss
deleted file mode 100644
index a37e4851..00000000
--- a/src/js/assets/scss/theming.scss
+++ /dev/null
@@ -1,183 +0,0 @@
-// Adopt dashboard style for elements outside of polls app

-// Styles are mostly adopted from the dashboard app in the server repository

-// -- https://github.com/nextcloud/server/tree/master/apps/dashboard/css

-

-// Theming styles

-

-

-@mixin translucentHeader {

-	// Transparent app menu header; Adopted from the dashboard

-	#header {

-		background: transparent !important;

-		// --color-header: rgba(24, 24, 24, 1);

-	

-		// Show gradient below navigation for visibility of icons when scrolled

-		&:before {

-			content: ' ';

-			display: block;

-			position: absolute;

-			background-image: linear-gradient(180deg, var(--color-header) 20%, transparent 100%);

-			width: 100%;

-			height: 50px;

-			top: 0;

-			margin-top: -70px;

-			transition: margin-top var(--animation-slow);

-		}

-	}

-

-	&.page--scrolled {

-		#header::before {

-			margin-top: 0;

-		}

-	}

-}

-

-@mixin roundedCorners {

-	// rounded corners for all app areas

-	.app-navigation {

-		border-right: 0px;

-		box-shadow: 2px 0 6px var(--color-box-shadow);

-		border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;

-	}

-

-	.app-sidebar {

-		border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);

-	}

-

-	[class*=" area__"],

-	[class^="area__"] {

-		padding: 8px;

-		margin: 0 0 0 0;

-		border-radius: var(--border-radius-large);

-		box-shadow: 2px 2px 6px var(--color-box-shadow);

-	}

-}

-

-@mixin flatAppHeader {

-	.area__header {

-		padding-left: 40px;

-		box-shadow: none;

-		backdrop-filter: none !important;

-		border: none;

-		background-color: transparent !important;

-		transition: all var(--animation-slow) linear;

-	}

-}

-

-@mixin fixedAppHeader {

-	// fixes the app header, when page is scrolled horizontally

-	[class*=" area__header"],

-	[class^="area__header"] {

-		padding-left: 40px;

-		background-color: var(--color-main-background);

-		backdrop-filter: initial;

-		box-shadow: 6px 6px 6px var(--color-box-shadow);

-		margin-right: 0;

-		margin-left: -6px;

-		transition: all var(--animation-slow) linear;

-	}

-}

-

-@mixin tiledAreas {

-	// visually separated areas as tiles

-	.app-content {

-		padding: 0px 16px;

-		row-gap: 16px;

-	}

-

-	.vote_main {

-		row-gap: 16px;

-	}

-	

-	[class*=" area__header"],

-	[class^="area__header"] {

-		top: 50px;

-		padding-left: 60px;

-	}

-	

-	// empasize the action menu inside the app header

-	.poll-header-buttons {

-		align-self: flex-end;

-		border-radius: var(--border-radius-pill);

-		background-color: var(--color-main-background);

-	}

-}

-

-@mixin translucentAreas {

-	// adds the translucent effect to the tiles

-	.app-navigation,

-	.app-sidebar,

-	.poll-header-buttons,

-	[class*=" area__"],

-	[class^="area__"] {

-		backdrop-filter: blur(10px);

-		background-color: var(--color-main-background-blur);

-	}

-}

-

-@mixin headerDark {

-	#header {

-		--color-header: rgba(255, 255, 255, 1);

-		.header-left {

-			filter: invert(1) hue-rotate(180deg) !important;

-			#nextcloud {

-				opacity: 1;

-			}

-		}

-

-		.header-right {

-			.notifications,

-			.unified-search,

-			#contactsmenu {

-				filter: invert(1) hue-rotate(180deg) !important;

-				opacity: 1;

-			}

-		}

-	}

-}

-

-@mixin appHeaderDark {

-	.area__header_vote .bar_top_left,

-	.area__header_vote .header_bar_bottom, 

-	.app-navigation-toggle {

-		filter: invert(1) hue-rotate(180deg) !important;

-	}

-}

-

-[class*='dashboard--'] {

-	@include roundedCorners();

-	@include tiledAreas();

-	@include translucentHeader();

-	@include translucentAreas();

-	&:not(.page--scrolled) {

-		@include flatAppHeader();

-	}

-	&.page--scrolled {

-		@include fixedAppHeader();

-	}

-}

-

-[class*='polls--'] {

-	@include roundedCorners();

-	@include tiledAreas();

-	.translucent {

-		@include translucentAreas();

-	}

-	&:not(.page--scrolled) {

-		@include flatAppHeader();

-	}

-	&.page--scrolled {

-		@include fixedAppHeader();

-	}

-}

-

-.dashboard--dark {

-	@include headerDark();

-}

-

-.theme--dark.dashboard--dark,

-.polls--light {

-	&:not(.page--scrolled) {

-		@include appHeaderDark();

-	}

-}
\ No newline at end of file
diff --git a/src/js/components/Actions/ActionChangeView.vue b/src/js/components/Actions/ActionChangeView.vue
index f7897a08..ba3a071b 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 7c82bf6c..2adddd9f 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 88f83f6a..fe36c6d0 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 33a59d8a..e69c5c0d 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 abef1a46..4e7087b9 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 40ebe82b..2d082658 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
index 81648a87..145e9861 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 bb8de9e1..80615fc1 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 abd66033..b808f5aa 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 395393b6..e06bf4f5 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 7982d6b1..4e67553c 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 e55945fc..b0b2566f 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 35c876ff..e542ba2e 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 17bfe6a6..cb9963a8 100644
--- a/src/js/components/Configuration/ConfigAutoReminder.vue
+++ b/src/js/components/Configuration/ConfigAutoReminder.vue
@@ -22,34 +22,34 @@
 
 <template>
 	<div class="auto-reminder-switch">
-		<CheckboxRadioSwitch :checked.sync="autoReminder" type="switch">
+		<NcCheckboxRadioSwitch :checked.sync="autoReminder" type="switch">
 			{{ t('polls', 'Use Autoreminder') }}
-		</CheckboxRadioSwitch>
-		<Popover>
+		</NcCheckboxRadioSwitch>
+		<NcPopover>
 			<template #trigger>
-				<Actions>
-					<ActionButton icon="icon-info">
+				<NcActions>
+					<NcActionButton icon="icon-info">
 						{{ t('polls', 'Autoreminder informations') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</template>
 			<AutoReminderInformation />
-		</Popover>
+		</NcPopover>
 	</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { Actions, ActionButton, Popover, CheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcPopover, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAutoReminder',
 
 	components: {
-		CheckboxRadioSwitch,
-		Actions,
-		ActionButton,
-		Popover,
+		NcCheckboxRadioSwitch,
+		NcActions,
+		NcActionButton,
+		NcPopover,
 		AutoReminderInformation: () => import('./AutoReminderInformation.vue'),
 	},
 
diff --git a/src/js/components/Configuration/ConfigClosing.vue b/src/js/components/Configuration/ConfigClosing.vue
index 925fbbeb..3f950346 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 48738834..a1087e63 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 1e5f0427..03c8b4ee 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 dccac3fa..73ea9da8 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 871aa248..5597f1d2 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 14e9d153..04f2edfa 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 d22e02cb..b7b60111 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 3487aeef..74cca26a 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 bc79d716..ed4f1ec9 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 707e8ab6..292b8a60 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 48c691da..248979d2 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,14 @@
 				{{ t('polls', 'Pick a day.') }}
 			</div>
 		</template>
-	</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 +87,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 b3bfcd4f..2b9226bf 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 b842d7b2..a990550c 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 6d652634..9b2481d7 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 f6f2e9e4..c933539f 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,8 +41,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import { Button as VueButton, Popover } from '@nextcloud/vue'
-import { emit } from '@nextcloud/event-bus'
+import { NcButton, NcPopover } from '@nextcloud/vue'
 import ActionToggleSidebar from '../Actions/ActionToggleSidebar.vue'
 import PollInformationIcon from 'vue-material-design-icons/InformationOutline.vue'
 
@@ -51,8 +50,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'),
@@ -71,10 +70,6 @@ export default {
 		},
 	},
 
-	created() {
-		emit('polls:sidebar:toggle', { open: (window.innerWidth > 920) })
-	},
-
 	beforeDestroy() {
 		this.$store.dispatch({ type: 'poll/reset' })
 	},
diff --git a/src/js/components/Poll/PollInformation.vue b/src/js/components/Poll/PollInformation.vue
index 8ad64fd8..33ed4a0b 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 0a0367f4..8d7a7618 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 0591a8ab..168c6cbf 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 ea0c7e79..0422b01a 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 c3fcd41a..adc64bcb 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 8f2701bc..7ef0d144 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 1090af36..aa87f9ef 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 230f0d9b..e58acb3d 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 e8e8bb32..3acd02c9 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 3ad4c362..043b1fea 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 a7b202d8..58b9f2c2 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 ab8fffbb..2dfaad1d 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 384e5c90..b30e8690 100644
--- a/src/js/components/Settings/UserSettings/StyleSettings.vue
+++ b/src/js/components/Settings/UserSettings/StyleSettings.vue
@@ -24,51 +24,9 @@
 	<div>
 		<b> {{ t('polls', 'The style settings are still experimental!') }}</b>
 		<div class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="useDashboardStyling" type="switch">
-				{{ t('polls', 'Adopt dashboard style') }}
-			</CheckboxRadioSwitch>
-		</div>
-
-		<div v-if="!useDashboardStyling" class="user_settings">
-			<CheckboxRadioSwitch :checked.sync="useIndividualStyling" type="switch">
-				{{ t('polls', 'Set individual styles') }}
-			</CheckboxRadioSwitch>
-		</div>
-
-		<div v-if="useIndividualStyling && !useDashboardStyling">
-			<div class="user_settings">
-				<CheckboxRadioSwitch :checked.sync="individualBgColor" type="switch">
-					{{ t('polls', 'Use background color') }}
-				</CheckboxRadioSwitch>
-
-				<CheckboxRadioSwitch :checked.sync="individualImage" type="switch">
-					{{ t('polls', 'Use background image') }}
-				</CheckboxRadioSwitch>
-
-				<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">
-						{{ t('polls', 'Dark picture') }}
-					</CheckboxRadioSwitch>
-				</div>
-			</div>
-
-			<div class="user_settings">
-				<CheckboxRadioSwitch :checked.sync="translucentPanels" type="switch">
-					{{ t('polls', 'Translucent foreground elements') }}
-				</CheckboxRadioSwitch>
-
-				<div class="settings_details">
-					{{ t('polls', 'Add a translucent effect on foreground elements like sidebar and poll table (Does not work with all browsers).') }}
-				</div>
-			</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,15 +34,13 @@
 <script>
 
 import { mapState } from 'vuex'
-import { CheckboxRadioSwitch } from '@nextcloud/vue'
-import InputDiv from '../../Base/InputDiv.vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'StyleSettings',
 
 	components: {
-		CheckboxRadioSwitch,
-		InputDiv,
+		NcCheckboxRadioSwitch,
 	},
 
 	computed: {
@@ -92,70 +48,6 @@ export default {
 			settings: (state) => state.settings.user,
 		}),
 
-		// Add bindings
-		useDashboardStyling: {
-			get() {
-				return !!this.settings.useDashboardStyling
-			},
-			set(value) {
-				this.writeValue({ useDashboardStyling: +value })
-			},
-		},
-
-		useIndividualStyling: {
-			get() {
-				return !!this.settings.useIndividualStyling
-			},
-			set(value) {
-				this.writeValue({ useIndividualStyling: +value })
-			},
-		},
-
-		individualImage: {
-			get() {
-				return !!this.settings.individualImage
-			},
-			set(value) {
-				this.writeValue({ individualImage: +value })
-			},
-		},
-
-		individualImageStyle: {
-			get() {
-				return this.settings.individualImageStyle === 'light'
-			},
-			set(value) {
-				this.writeValue({ individualImageStyle: value ? 'light' : 'dark' })
-			},
-		},
-
-		individualBgColor: {
-			get() {
-				return !!this.settings.individualBgColor
-			},
-			set(value) {
-				this.writeValue({ individualBgColor: +value })
-			},
-		},
-
-		individualImageUrl: {
-			get() {
-				return this.settings.individualImageUrl
-			},
-			set(value) {
-				this.writeValue({ individualImageUrl: value })
-			},
-		},
-
-		translucentPanels: {
-			get() {
-				return !!this.settings.translucentPanels
-			},
-			set(value) {
-				this.writeValue({ translucentPanels: +value })
-			},
-		},
-
 		useCommentsAlternativeStyling: {
 			get() {
 				return !!this.settings.useCommentsAlternativeStyling
diff --git a/src/js/components/Settings/UserSettingsDlg.vue b/src/js/components/Settings/UserSettingsDlg.vue
index f379d544..7e99eb9c 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 id="calendar" :title="t('polls', 'Calendar check')">
 			<CalendarSettings />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
-		<AppSettingsSection :title="t('polls', 'User settings')">
+		<NcAppSettingsSection id="div-settings" :title="t('polls', 'User settings')">
 			<FeatureSettings />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
-		<AppSettingsSection :title="t('polls', 'Performance settings')">
+		<NcAppSettingsSection id="performance" :title="t('polls', 'Performance settings')">
 			<PerformanceSettings />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
-		<AppSettingsSection :title="t('polls', 'Styles')">
+		<NcAppSettingsSection id="styles" :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 975b2c8b..ef2f3183 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 15273326..687378b7 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 96ad5570..426a0e37 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 f1cff774..aa020b43 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 c23675d6..2c1ee32e 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 b797f860..d61a412d 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 b0cf6333..29a78f1e 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 25867244..cff82f68 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 cdb8d968..570325cb 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 e8705a37..14ad5491 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 ee6b7313..10ee722c 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 48f50555..5a19d1e5 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 3fbf9737..45953beb 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/helpers/detectColorScheme.js b/src/js/helpers/detectColorScheme.js
deleted file mode 100644
index 874b2cfa..00000000
--- a/src/js/helpers/detectColorScheme.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/* jshint esversion: 6 */
-/**
- * @copyright Copyright (c) 2021 Rene Gieling <github@dartcafe.de>
- *
- * @author Rene Gieling <github@dartcafe.de>
- *
- * @license  AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-const detectColorScheme = () => {
-	if (!window.matchMedia) {
-		return true
-	}
-
-	if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-		document.body.classList.add('dark-theme')
-		return true
-	}
-}
-
-export default detectColorScheme
diff --git a/src/js/store/modules/settings.js b/src/js/store/modules/settings.js
index 01bd45da..7f8fae6f 100644
--- a/src/js/store/modules/settings.js
+++ b/src/js/store/modules/settings.js
@@ -26,14 +26,7 @@ import { generateUrl } from '@nextcloud/router'
 
 const defaultSettings = () => ({
 	user: {
-		useDashboardStyling: false,
-		useIndividualStyling: false,
 		useCommentsAlternativeStyling: false,
-		individualBgColor: false,
-		individualImage: false,
-		individualImageUrl: '',
-		individualImageStyle: 'light',
-		translucentPanels: false,
 		calendarPeek: false,
 		checkCalendars: [],
 		checkCalendarsBefore: 0,
@@ -47,14 +40,6 @@ const defaultSettings = () => ({
 		manualViewDatePoll: '',
 		manualViewTextPoll: '',
 	},
-	dashboard: {
-		background: '',
-		themingDefaultBackground: '',
-		backgroundVersion: 0,
-		shippedBackgrounds: '',
-		isInstalled: false,
-		theming: 'light',
-	},
 	availableCalendars: [],
 	viewModes: [
 		'list-view',
@@ -72,7 +57,6 @@ const mutations = {
 	},
 
 	setPreference(state, payload) {
-
 		if (payload.defaultViewTextPoll === 'desktop') {
 			payload.defaultViewTextPoll = 'table-view'
 		}
@@ -91,10 +75,6 @@ const mutations = {
 		})
 	},
 
-	setDashboard(state, payload) {
-		state.dashboard = payload
-	},
-
 	setCalendars(state, payload) {
 		state.availableCalendars = payload.calendars
 	},
@@ -116,73 +96,6 @@ const mutations = {
 }
 
 const getters = {
-	themeClass(state) {
-		if (state.dashboard.isInstalled && state.user.useDashboardStyling) {
-			return `dashboard--${state.dashboard.theming}`
-		}
-		if (state.user.useIndividualStyling && state.user.individualImage) {
-			return `polls--${state.user.individualImageStyle}`
-		}
-		return ''
-	},
-
-	backgroundClass(state) {
-		if (state.user.useDashboardStyling) {
-			return ''
-		}
-
-		if (state.user.useIndividualStyling && state.user.individualImage) {
-			return 'polls--bg-image'
-		}
-
-		if (state.user.useIndividualStyling && state.user.individualBgColor) {
-			return 'polls--bg-color'
-		}
-
-		return ''
-	},
-	useDashboardStyling(state) {
-		return state.dashboard.isInstalled && state.user.useDashboardStyling
-	},
-
-	useIndividualStyling(state) {
-		return !state.user.useDashboardStyling && state.user.useIndividualStyling
-	},
-
-	useTranslucentPanels(state) {
-		return (state.dashboard.isInstalled && state.user.useDashboardStyling)
-			|| (state.user.useIndividualStyling && state.user.translucentPanels)
-	},
-
-	appBackground(state) {
-		const imageProps = 'no-repeat fixed center center / cover'
-		if (state.dashboard.isInstalled && state.user.useDashboardStyling) {
-			if (state.dashboard.background === 'custom') {
-				return `url("${generateUrl('/apps/dashboard/background')}?v=${window.OCA.Theming.cacheBuster}") ${imageProps}`
-			}
-
-			if (!state.dashboard.background) {
-				return `url("${generateUrl('/apps/theming/image/background')}?v=${window.OCA.Theming.cacheBuster}") ${imageProps}`
-			}
-
-			if (state.dashboard.background.charAt(0) === '#') {
-				return state.dashboard.background
-			}
-
-			return `url("${generateUrl('/apps/dashboard/img/')}${state.dashboard.background}") ${imageProps}`
-		}
-
-		if (state.user.useIndividualStyling) {
-			if (state.user.individualImage) {
-				return `url("${state.user.individualImageUrl}") ${imageProps}`
-			}
-			if (state.user.individualBgColor) {
-				return 'var(--color-primary-light)'
-			}
-		}
-		return 'var(--color-main-background)'
-	},
-
 	viewTextPoll(state) {
 		if (state.session.manualViewTextPoll) {
 			return state.session.manualViewTextPoll
@@ -227,7 +140,6 @@ const actions = {
 				response.data.preferences.defaultViewDatePoll = 'list-view'
 			}
 			context.commit('setPreference', response.data.preferences)
-			context.commit('setDashboard', response.data.dashboard)
 		} catch {
 			context.commit('reset')
 		}
diff --git a/src/js/views/AdminSettingsPage.vue b/src/js/views/AdminSettingsPage.vue
index 23dad191..92dca7be 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 106dd8ea..f43d1025 100644
--- a/src/js/views/Administration.vue
+++ b/src/js/views/Administration.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<AppContent class="poll-list">
+	<NcAppContent class="poll-list">
 		<HeaderBar class="area__header">
 			<template #title>
 				{{ t('polls', 'Administrative poll management') }}
@@ -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,24 +106,23 @@
 					{{ 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>
-	</AppContent>
+		</NcModal>
+	</NcAppContent>
 </template>
 
 <script>
 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, NcAppContent, NcButton, NcEmptyContent, NcModal } from '@nextcloud/vue'
 import { sortBy } from 'lodash'
 import HeaderBar from '../components/Base/HeaderBar.vue'
 import PollsAppIcon from '../components/AppIcons/PollsAppIcon.vue'
@@ -132,13 +131,13 @@ export default {
 	name: 'Administration',
 
 	components: {
-		AppContent,
-		Actions,
-		ActionButton,
-		EmptyContent,
+		NcAppContent,
+		NcActions,
+		NcActionButton,
+		NcEmptyContent,
 		HeaderBar,
-		Modal,
-		VueButton,
+		NcModal,
+		NcButton,
 		PollsAppIcon,
 		LoadingOverlay: () => import('../components/Base/LoadingOverlay.vue'),
 		PollItem: () => import('../components/PollList/PollItem.vue'),
@@ -238,10 +237,6 @@ export default {
 
 		refreshView() {
 			window.document.title = `${t('polls', 'Polls')} - ${this.title}`
-			if (!this.filteredPolls(this.$route.params.type).find((poll) => poll.id === this.$store.state.poll.id)) {
-				emit('polls:sidebar:toggle', { open: false })
-			}
-
 		},
 
 		setSort(payload) {
diff --git a/src/js/views/Combo.vue b/src/js/views/Combo.vue
index b2c27f2c..b936f289 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,17 +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 { emit } from '@nextcloud/event-bus'
+import { NcAppContent, NcEmptyContent } from '@nextcloud/vue'
 import ComboTable from '../components/Combo/ComboTable.vue'
 import ActionToggleSidebar from '../components/Actions/ActionToggleSidebar.vue'
 import HeaderBar from '../components/Base/HeaderBar.vue'
@@ -66,9 +65,9 @@ export default {
 
 	components: {
 		ActionToggleSidebar,
-		AppContent,
+		NcAppContent,
 		ComboTable,
-		EmptyContent,
+		NcEmptyContent,
 		HeaderBar,
 		PollsAppIcon,
 		LoadingOverlay: () => import('../components/Base/LoadingOverlay.vue'),
@@ -107,7 +106,6 @@ export default {
 	},
 
 	created() {
-		emit('polls:sidebar:toggle', { open: (window.innerWidth > 920) })
 		this.verifyPolls()
 	},
 
diff --git a/src/js/views/Navigation.vue b/src/js/views/Navigation.vue
index 96c040a4..cec0352c 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', 'Polls settings')"
+			</NcAppNavigationItem>
+			<NcAppNavigationItem :title="t('polls', 'Polls 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 e1529103..497e3b17 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 da2a7ca3..ed88de94 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,20 @@
 									<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 +115,10 @@ export default {
 	name: 'PollList',
 
 	components: {
-		AppContent,
-		Actions,
-		ActionButton,
-		EmptyContent,
+		NcAppContent,
+		NcActions,
+		NcActionButton,
+		NcEmptyContent,
 		HeaderBar,
 		DeletePollIcon,
 		ClonePollIcon,
@@ -192,7 +191,6 @@ export default {
 		async loadPoll(pollId) {
 			try {
 				await this.$store.dispatch({ type: 'poll/get', pollId })
-				emit('polls:sidebar:toggle', { open: true })
 			} catch {
 				showError(t('polls', 'Error loading poll'))
 			}
@@ -200,10 +198,6 @@ export default {
 
 		refreshView() {
 			window.document.title = `${t('polls', 'Polls')} - ${this.title}`
-			if (!this.filteredPolls(this.$route.params.type).find((poll) => poll.id === this.$store.state.poll.id)) {
-				emit('polls:sidebar:toggle', { open: false })
-			}
-
 		},
 
 		async toggleArchive(pollId) {
diff --git a/src/js/views/PollSelector.vue b/src/js/views/PollSelector.vue
index fdf73293..6c274e04 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 e05c01b7..85ce51bf 100644
--- a/src/js/views/SideBar.vue
+++ b/src/js/views/SideBar.vue
@@ -21,11 +21,10 @@
   -->
 
 <template>
-	<AppSidebar ref="sideBar"
-		:active="active"
+	<NcAppSidebar :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 +32,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 +42,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 +52,9 @@
 				<SidebarShareIcon />
 			</template>
 			<SideBarTabShare />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab v-if="projectsEnabled && acl.loggedIn && useCollaboration"
+		<NCAppSidebarTab v-if="projectsEnabled && acl.loggedIn && useCollaboration"
 			:id="'collaboration'"
 			:order="4"
 			:name="t('polls', 'Collaboration')">
@@ -63,9 +62,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 +72,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 +82,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 { loadState } from '@nextcloud/initial-state'
@@ -109,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,
@@ -140,12 +139,12 @@ export default {
 			useCollaboration: (state) => state.appSettings.useCollaboration,
 		}),
 	},
+
 	methods: {
 		closeSideBar() {
 			emit('polls:sidebar:toggle', { open: false })
 		},
 	},
-
 }
 
 </script>
diff --git a/src/js/views/SideBarCombo.vue b/src/js/views/SideBarCombo.vue
index e5c4c8b5..1cbcbbc1 100644
--- a/src/js/views/SideBarCombo.vue
+++ b/src/js/views/SideBarCombo.vue
@@ -21,23 +21,21 @@
   -->
 
 <template>
-	<AppSidebar ref="sideBar"
-		:active="active"
-		:title="t('polls', 'Select polls to combine')"
+	<NcAppSidebar :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,23 +45,17 @@ export default {
 
 	components: {
 		SideBarTabDatePolls: () => import('../components/SideBar/SideBarTabDatePolls.vue'),
-		AppSidebar,
-		AppSidebarTab,
+		NcAppSidebar,
+		NcAppSidebarTab,
 		PollsAppIcon,
 	},
 
-	props: {
-		active: {
-			type: String,
-			default: t('polls', 'Polls').toLowerCase(),
-		},
-	},
-
 	computed: {
 		...mapGetters({
 			polls: 'polls/datePolls',
 		}),
 	},
+
 	methods: {
 		closeSideBar() {
 			emit('polls:sidebar:toggle', { open: false })
diff --git a/src/js/views/UserSettingsPage.vue b/src/js/views/UserSettingsPage.vue
index 64de3e7a..4280ef48 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 cab067c2..ec4ef045 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, scrolled: scrolled }, 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,
@@ -116,6 +116,8 @@ export default {
 	data() {
 		return {
 			isLoading: false,
+			scrolled: false,
+			scrollElement: null,
 		}
 	},
 
@@ -157,16 +159,25 @@ export default {
 
 	},
 
-	created() {
-
-		emit('polls:sidebar:toggle', { open: (window.innerWidth > 920) })
+	mounted() {
+		this.scrollElement = document.getElementById('app-content-vue')
+		this.scrollElement.addEventListener('scroll', this.handleScroll)
 	},
 
 	beforeDestroy() {
+		this.scrollElement.removeEventListener('scroll', this.handleScroll)
 		this.$store.dispatch({ type: 'poll/reset' })
 	},
 
 	methods: {
+		handleScroll() {
+			if (this.scrollElement.scrollTop > 20) {
+				this.scrolled = true
+			} else {
+				this.scrolled = false
+			}
+		},
+
 		openOptions() {
 			emit('polls:sidebar:toggle', { open: true, activeTab: 'options' })
 		},
@@ -196,6 +207,14 @@ export default {
 	flex-direction: column;
 }
 
+.app-content .area__header {
+	transition: all var(--animation-slow) linear;
+}
+
+.app-content.scrolled .area__header {
+	box-shadow: 6px 6px 6px var(--color-box-shadow);
+}
+
 .area__proposal .mx-input-wrapper > button {
 	width: initial;
 }