diff --git a/package-lock.json b/package-lock.json
index 018d7ed59..55a5362f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "@nextcloud/paths": "^2.2.1",
         "@nextcloud/router": "^3.0.1",
         "@nextcloud/sharing": "^0.3.0",
-        "@nextcloud/vue": "^9.1.0",
+        "@nextcloud/vue": "^9.2.0",
         "@vueuse/core": "^11.3.0",
         "b64-to-blob": "^1.2.19",
         "camelcase": "^8.0.0",
@@ -4671,9 +4671,9 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-9.1.0.tgz",
-      "integrity": "sha512-iXXLQ6Ps0pH1VQ9fmUTvUKUaR+ForwXdcegasTgrgkfBpomdm4VTrqTU910o/A99Cs6C+ChgyLEVuFPq/W9Lcw==",
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-9.2.0.tgz",
+      "integrity": "sha512-K2RXGqpHcMe8a0peBKaLpnDAql1AwXoP6fX4jxy26leXY2szXYRlaCuVfCY4jdZtRnVZ7746hsud6PepJbk0Xw==",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@ckpack/vue-color": "^1.6.0",
@@ -4684,21 +4684,21 @@
         "@nextcloud/capabilities": "^1.2.0",
         "@nextcloud/event-bus": "^3.3.2",
         "@nextcloud/initial-state": "^3.0.0",
-        "@nextcloud/l10n": "^3.4.0",
+        "@nextcloud/l10n": "^3.4.1",
         "@nextcloud/logger": "^3.0.2",
         "@nextcloud/router": "^3.0.1",
         "@nextcloud/sharing": "^0.3.0",
-        "@vuepic/vue-datepicker": "^11.0.2",
-        "@vueuse/components": "^13.9.0",
-        "@vueuse/core": "^13.9.0",
+        "@vuepic/vue-datepicker": "^11.0.3",
+        "@vueuse/components": "^14.0.0",
+        "@vueuse/core": "^14.0.0",
         "blurhash": "^2.0.5",
         "clone": "^2.1.2",
-        "debounce": "^2.2.0",
+        "debounce": "^3.0.0",
         "dompurify": "^3.3.0",
         "emoji-mart-vue-fast": "^15.0.5",
         "escape-html": "^1.0.3",
         "floating-vue": "^5.2.2",
-        "focus-trap": "^7.6.5",
+        "focus-trap": "^7.6.6",
         "linkifyjs": "^4.3.2",
         "p-queue": "^9.0.0",
         "rehype-external-links": "^3.0.0",
@@ -4724,6 +4724,22 @@
         "node": "^20.11.0 || ^22 || ^24"
       }
     },
+    "node_modules/@nextcloud/vue/node_modules/@nextcloud/l10n": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/l10n/-/l10n-3.4.1.tgz",
+      "integrity": "sha512-aTFinTcKiK2gEXwLgutXekpZZ8/v/4QiC8C3QCLH5m0o+WtxsBC+fqV142ebC/rfDnzCLhY4ZtswSu8bFbZocg==",
+      "license": "GPL-3.0-or-later",
+      "dependencies": {
+        "@nextcloud/router": "^3.0.1",
+        "@nextcloud/typings": "^1.9.1",
+        "@types/escape-html": "^1.0.4",
+        "dompurify": "^3.2.6",
+        "escape-html": "^1.0.3"
+      },
+      "engines": {
+        "node": "^20 || ^22 || ^24"
+      }
+    },
     "node_modules/@nextcloud/vue/node_modules/@types/web-bluetooth": {
       "version": "0.0.21",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
@@ -4731,14 +4747,14 @@
       "license": "MIT"
     },
     "node_modules/@nextcloud/vue/node_modules/@vueuse/core": {
-      "version": "13.9.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.9.0.tgz",
-      "integrity": "sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.0.0.tgz",
+      "integrity": "sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==",
       "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "13.9.0",
-        "@vueuse/shared": "13.9.0"
+        "@vueuse/metadata": "14.0.0",
+        "@vueuse/shared": "14.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -4748,14 +4764,38 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/@vueuse/metadata": {
-      "version": "13.9.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.9.0.tgz",
-      "integrity": "sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.0.0.tgz",
+      "integrity": "sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@nextcloud/vue/node_modules/@vueuse/shared": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.0.0.tgz",
+      "integrity": "sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@nextcloud/vue/node_modules/debounce": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-3.0.0.tgz",
+      "integrity": "sha512-64byRbF0/AirwbuHqB3/ZpMG9/nckDa6ZA0yd6UnaQNwbbemCOwvz2sL5sjXLHhZHADyiwLm0M5qMhltUUx+TA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -6217,9 +6257,10 @@
       }
     },
     "node_modules/@vuepic/vue-datepicker": {
-      "version": "11.0.2",
-      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.2.tgz",
-      "integrity": "sha512-uHh78mVBXCEjam1uVfTzZ/HkyDwut/H6b2djSN9YTF+l/EA+XONfdCnOVSi1g+qVGSy65DcQAwyBNidAssnudQ==",
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.3.tgz",
+      "integrity": "sha512-sb2adwqwK2PizLQOpxCYps2SwhVT6/ic2HMIOqHJXuYa6iAJZWGL5YVlS7O4aW+sk6ZyxlDURLO7kDZPL4HB/w==",
+      "license": "MIT",
       "dependencies": {
         "date-fns": "^4.1.0"
       },
@@ -6231,12 +6272,13 @@
       }
     },
     "node_modules/@vueuse/components": {
-      "version": "13.9.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-13.9.0.tgz",
-      "integrity": "sha512-0DDFpjG3hEEK+3YgSzE/OzOGqpo/KmxcXWzW2YdmgahZvaoUdegn68GmbdcHRJE7CH55dDj13Cz47iN8QoI3jQ==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-14.0.0.tgz",
+      "integrity": "sha512-0PFAbAzKo+Ipt45R0OVHvZwjTj9oDZJQ/lc77d020fKl9GrxEIRvVIzMW1CZVn1vwmGhXEZPIF3erjixW2yqpg==",
+      "license": "MIT",
       "dependencies": {
-        "@vueuse/core": "13.9.0",
-        "@vueuse/shared": "13.9.0"
+        "@vueuse/core": "14.0.0",
+        "@vueuse/shared": "14.0.0"
       },
       "peerDependencies": {
         "vue": "^3.5.0"
@@ -6245,16 +6287,18 @@
     "node_modules/@vueuse/components/node_modules/@types/web-bluetooth": {
       "version": "0.0.21",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
-      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
     },
     "node_modules/@vueuse/components/node_modules/@vueuse/core": {
-      "version": "13.9.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.9.0.tgz",
-      "integrity": "sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.0.0.tgz",
+      "integrity": "sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "13.9.0",
-        "@vueuse/shared": "13.9.0"
+        "@vueuse/metadata": "14.0.0",
+        "@vueuse/shared": "14.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -6264,13 +6308,26 @@
       }
     },
     "node_modules/@vueuse/components/node_modules/@vueuse/metadata": {
-      "version": "13.9.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.9.0.tgz",
-      "integrity": "sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.0.0.tgz",
+      "integrity": "sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vueuse/components/node_modules/@vueuse/shared": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.0.0.tgz",
+      "integrity": "sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/@vueuse/core": {
       "version": "11.3.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.3.0.tgz",
@@ -10124,12 +10181,12 @@
       }
     },
     "node_modules/focus-trap": {
-      "version": "7.6.5",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.5.tgz",
-      "integrity": "sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.6.tgz",
+      "integrity": "sha512-v/Z8bvMCajtx4mEXmOo7QEsIzlIOqRXTIwgUfsFOF9gEsespdbD0AkPIka1bSXZ8Y8oZ+2IVDQZePkTfEHZl7Q==",
       "license": "MIT",
       "dependencies": {
-        "tabbable": "^6.2.0"
+        "tabbable": "^6.3.0"
       }
     },
     "node_modules/follow-redirects": {
@@ -22055,9 +22112,9 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-9.1.0.tgz",
-      "integrity": "sha512-iXXLQ6Ps0pH1VQ9fmUTvUKUaR+ForwXdcegasTgrgkfBpomdm4VTrqTU910o/A99Cs6C+ChgyLEVuFPq/W9Lcw==",
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-9.2.0.tgz",
+      "integrity": "sha512-K2RXGqpHcMe8a0peBKaLpnDAql1AwXoP6fX4jxy26leXY2szXYRlaCuVfCY4jdZtRnVZ7746hsud6PepJbk0Xw==",
       "requires": {
         "@ckpack/vue-color": "^1.6.0",
         "@floating-ui/dom": "^1.7.4",
@@ -22067,21 +22124,21 @@
         "@nextcloud/capabilities": "^1.2.0",
         "@nextcloud/event-bus": "^3.3.2",
         "@nextcloud/initial-state": "^3.0.0",
-        "@nextcloud/l10n": "^3.4.0",
+        "@nextcloud/l10n": "^3.4.1",
         "@nextcloud/logger": "^3.0.2",
         "@nextcloud/router": "^3.0.1",
         "@nextcloud/sharing": "^0.3.0",
-        "@vuepic/vue-datepicker": "^11.0.2",
-        "@vueuse/components": "^13.9.0",
-        "@vueuse/core": "^13.9.0",
+        "@vuepic/vue-datepicker": "^11.0.3",
+        "@vueuse/components": "^14.0.0",
+        "@vueuse/core": "^14.0.0",
         "blurhash": "^2.0.5",
         "clone": "^2.1.2",
-        "debounce": "^2.2.0",
+        "debounce": "^3.0.0",
         "dompurify": "^3.3.0",
         "emoji-mart-vue-fast": "^15.0.5",
         "escape-html": "^1.0.3",
         "floating-vue": "^5.2.2",
-        "focus-trap": "^7.6.5",
+        "focus-trap": "^7.6.6",
         "linkifyjs": "^4.3.2",
         "p-queue": "^9.0.0",
         "rehype-external-links": "^3.0.0",
@@ -22104,25 +22161,48 @@
         "vue-select": "^4.0.0-beta.6"
       },
       "dependencies": {
+        "@nextcloud/l10n": {
+          "version": "3.4.1",
+          "resolved": "https://registry.npmjs.org/@nextcloud/l10n/-/l10n-3.4.1.tgz",
+          "integrity": "sha512-aTFinTcKiK2gEXwLgutXekpZZ8/v/4QiC8C3QCLH5m0o+WtxsBC+fqV142ebC/rfDnzCLhY4ZtswSu8bFbZocg==",
+          "requires": {
+            "@nextcloud/router": "^3.0.1",
+            "@nextcloud/typings": "^1.9.1",
+            "@types/escape-html": "^1.0.4",
+            "dompurify": "^3.2.6",
+            "escape-html": "^1.0.3"
+          }
+        },
         "@types/web-bluetooth": {
           "version": "0.0.21",
           "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
           "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="
         },
         "@vueuse/core": {
-          "version": "13.9.0",
-          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.9.0.tgz",
-          "integrity": "sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==",
+          "version": "14.0.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.0.0.tgz",
+          "integrity": "sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==",
           "requires": {
             "@types/web-bluetooth": "^0.0.21",
-            "@vueuse/metadata": "13.9.0",
-            "@vueuse/shared": "13.9.0"
+            "@vueuse/metadata": "14.0.0",
+            "@vueuse/shared": "14.0.0"
           }
         },
         "@vueuse/metadata": {
-          "version": "13.9.0",
-          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.9.0.tgz",
-          "integrity": "sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg=="
+          "version": "14.0.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.0.0.tgz",
+          "integrity": "sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA=="
+        },
+        "@vueuse/shared": {
+          "version": "14.0.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.0.0.tgz",
+          "integrity": "sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==",
+          "requires": {}
+        },
+        "debounce": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/debounce/-/debounce-3.0.0.tgz",
+          "integrity": "sha512-64byRbF0/AirwbuHqB3/ZpMG9/nckDa6ZA0yd6UnaQNwbbemCOwvz2sL5sjXLHhZHADyiwLm0M5qMhltUUx+TA=="
         }
       }
     },
@@ -23126,20 +23206,20 @@
       }
     },
     "@vuepic/vue-datepicker": {
-      "version": "11.0.2",
-      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.2.tgz",
-      "integrity": "sha512-uHh78mVBXCEjam1uVfTzZ/HkyDwut/H6b2djSN9YTF+l/EA+XONfdCnOVSi1g+qVGSy65DcQAwyBNidAssnudQ==",
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.3.tgz",
+      "integrity": "sha512-sb2adwqwK2PizLQOpxCYps2SwhVT6/ic2HMIOqHJXuYa6iAJZWGL5YVlS7O4aW+sk6ZyxlDURLO7kDZPL4HB/w==",
       "requires": {
         "date-fns": "^4.1.0"
       }
     },
     "@vueuse/components": {
-      "version": "13.9.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-13.9.0.tgz",
-      "integrity": "sha512-0DDFpjG3hEEK+3YgSzE/OzOGqpo/KmxcXWzW2YdmgahZvaoUdegn68GmbdcHRJE7CH55dDj13Cz47iN8QoI3jQ==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-14.0.0.tgz",
+      "integrity": "sha512-0PFAbAzKo+Ipt45R0OVHvZwjTj9oDZJQ/lc77d020fKl9GrxEIRvVIzMW1CZVn1vwmGhXEZPIF3erjixW2yqpg==",
       "requires": {
-        "@vueuse/core": "13.9.0",
-        "@vueuse/shared": "13.9.0"
+        "@vueuse/core": "14.0.0",
+        "@vueuse/shared": "14.0.0"
       },
       "dependencies": {
         "@types/web-bluetooth": {
@@ -23148,19 +23228,25 @@
           "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="
         },
         "@vueuse/core": {
-          "version": "13.9.0",
-          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.9.0.tgz",
-          "integrity": "sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==",
+          "version": "14.0.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.0.0.tgz",
+          "integrity": "sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==",
           "requires": {
             "@types/web-bluetooth": "^0.0.21",
-            "@vueuse/metadata": "13.9.0",
-            "@vueuse/shared": "13.9.0"
+            "@vueuse/metadata": "14.0.0",
+            "@vueuse/shared": "14.0.0"
           }
         },
         "@vueuse/metadata": {
-          "version": "13.9.0",
-          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.9.0.tgz",
-          "integrity": "sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg=="
+          "version": "14.0.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.0.0.tgz",
+          "integrity": "sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA=="
+        },
+        "@vueuse/shared": {
+          "version": "14.0.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.0.0.tgz",
+          "integrity": "sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==",
+          "requires": {}
         }
       }
     },
@@ -25982,11 +26068,11 @@
       }
     },
     "focus-trap": {
-      "version": "7.6.5",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.5.tgz",
-      "integrity": "sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.6.tgz",
+      "integrity": "sha512-v/Z8bvMCajtx4mEXmOo7QEsIzlIOqRXTIwgUfsFOF9gEsespdbD0AkPIka1bSXZ8Y8oZ+2IVDQZePkTfEHZl7Q==",
       "requires": {
-        "tabbable": "^6.2.0"
+        "tabbable": "^6.3.0"
       }
     },
     "follow-redirects": {
diff --git a/package.json b/package.json
index eb943982d..3bf071d8b 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "@nextcloud/paths": "^2.2.1",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/sharing": "^0.3.0",
-    "@nextcloud/vue": "^9.1.0",
+    "@nextcloud/vue": "^9.2.0",
     "@vueuse/core": "^11.3.0",
     "b64-to-blob": "^1.2.19",
     "camelcase": "^8.0.0",
diff --git a/src/components/AppNavigation/ContactsSettings.vue b/src/components/AppNavigation/ContactsSettings.vue
index e001c990d..5e2099613 100644
--- a/src/components/AppNavigation/ContactsSettings.vue
+++ b/src/components/AppNavigation/ContactsSettings.vue
@@ -9,36 +9,30 @@
 		v-model:open="showSettings"
 		:name="t('contacts', 'Contacts settings')"
 		:show-navigation="true">
-		<AppSettingsSection id="general-settings" :name="t('contacts', 'General settings')">
-			<CheckboxRadioSwitch
-				:model-value="enableSocialSync"
-				:loading="enableSocialSyncLoading"
-				:disabled="enableSocialSyncLoading"
-				class="social-sync__checkbox contacts-settings-modal__form__row"
-				@update:model-value="toggleSocialSync">
-				<div class="social-sync__checkbox__label">
-					<span>
-						{{ t('contacts', 'Update avatars from social media') }}
-						<em>{{ t('contacts', '(refreshed once per week)') }}</em>
-					</span>
-				</div>
-			</CheckboxRadioSwitch>
-			<SettingsSortContacts class="contacts-settings-modal__form__row" />
+		<AppSettingsSection id="general" :name="t('contacts', 'General')">
+			<SettingsSortContacts />
+
+			<NcFormBox>
+				<NcFormBoxSwitch
+					v-model="enableSocialSync"
+					:label="t('contacts', 'Update avatars from social media')"
+					:description="t('contacts', 'Refreshed once per week')"
+					:loading="enableSocialSyncLoading"
+					:disabled="enableSocialSyncLoading"
+					@update:model-value="toggleSocialSync" />
+			</NcFormBox>
+
+			<SettingsImportContacts
+				:addressbooks="addressbooks"
+				@clicked="onClickImport"
+				@file-loaded="onLoad" />
 		</AppSettingsSection>
+
 		<AppSettingsSection id="address-books" :name="t('contacts', 'Address books')">
-			<div class="contacts-settings-modal__form">
-				<div class="contacts-settings-modal__form__row">
-					<ul id="addressbook-list" class="addressbook-list">
-						<SettingsAddressbook v-for="addressbook in addressbooks" :key="addressbook.id" :addressbook="addressbook" />
-					</ul>
-				</div>
-				<SettingsNewAddressbook class="contacts-settings-modal__form__row settings-new-addressbook" :addressbooks="addressbooks" />
-				<SettingsImportContacts
-					:addressbooks="addressbooks"
-					class="contacts-settings-modal__form__row"
-					@clicked="onClickImport"
-					@file-loaded="onLoad" />
-			</div>
+			<ul id="addressbook-list" class="addressbook-list">
+				<SettingsAddressbook v-for="addressbook in addressbooks" :key="addressbook.id" :addressbook="addressbook" />
+			</ul>
+			<SettingsNewAddressbook class="settings-new-addressbook" :addressbooks="addressbooks" />
 		</AppSettingsSection>
 	</AppSettingsDialog>
 </template>
@@ -46,25 +40,31 @@
 <script>
 
 import axios from '@nextcloud/axios'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
-import { NcAppSettingsDialog as AppSettingsDialog, NcAppSettingsSection as AppSettingsSection, NcCheckboxRadioSwitch as CheckboxRadioSwitch } from '@nextcloud/vue'
+import {
+	NcAppSettingsDialog as AppSettingsDialog,
+	NcAppSettingsSection as AppSettingsSection,
+} from '@nextcloud/vue'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
 import SettingsAddressbook from './Settings/SettingsAddressbook.vue'
 import SettingsImportContacts from './Settings/SettingsImportContacts.vue'
 import SettingsNewAddressbook from './Settings/SettingsNewAddressbook.vue'
 import SettingsSortContacts from './Settings/SettingsSortContacts.vue'
-import { CONTACTS_SETTINGS } from '../../models/constants.ts'
 
 export default {
 	name: 'ContactsSettings',
 	components: {
 		AppSettingsDialog,
 		AppSettingsSection,
+		NcFormBox,
+		NcFormBoxSwitch,
 		SettingsAddressbook,
 		SettingsNewAddressbook,
 		SettingsImportContacts,
 		SettingsSortContacts,
-		CheckboxRadioSwitch,
 	},
 
 	props: {
@@ -76,7 +76,6 @@ export default {
 
 	data() {
 		return {
-			CONTACTS_SETTINGS,
 			allowSocialSync: loadState('contacts', 'allowSocialSync') !== 'no',
 			enableSocialSync: loadState('contacts', 'enableSocialSync') !== 'no',
 			enableSocialSyncLoading: false,
@@ -110,17 +109,18 @@ export default {
 			this.$emit('clicked', event)
 		},
 
-		async toggleSocialSync() {
-			this.enableSocialSync = !this.enableSocialSync
+		async toggleSocialSync(value) {
 			this.enableSocialSyncLoading = true
 
-			// store value
-			let setting = 'yes'
-			setting = this.allowSocialSync ? 'yes' : 'no'
+			const setting = value ? 'yes' : 'no'
 			try {
 				await axios.put(generateUrl('apps/contacts/api/v1/social/config/user/enableSocialSync'), {
 					allow: setting,
 				})
+				showSuccess(t('contacts', 'Setting saved'))
+			} catch {
+				showError(t('contacts', 'Failed to save setting'))
+				this.enableSocialSync = !value
 			} finally {
 				this.enableSocialSyncLoading = false
 			}
@@ -137,36 +137,33 @@ export default {
 }
 </script>
 
-<style scoped>
->>> .app-settings__title {
-	padding: 20px 0;
-	margin-bottom: 0;
-}
-
-.app-settings-section {
-	margin-bottom: 45px;
-	padding: 25px 25px 0 25px;
-}
-
-.social-sync__checkbox, .settings-new-addressbook  {
-	margin-bottom: 20px;
-}
-
-.contacts-settings-modal__form__row >>> .material-design-icon {
-	justify-content: flex-start;
-}
+<style lang="scss" scoped>
+.addressbook-list {
+	list-style: none;
+	padding: 0;
+	margin: 0 0 calc(var(--default-grid-baseline) * 2);
+
+	:deep(.settings-addressbook-list) {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--default-grid-baseline) * 2);
+		padding: calc(var(--default-grid-baseline) * 2) 0;
+		border-bottom: 1px solid var(--color-border);
+
+		&:last-child {
+			border-bottom: none;
+		}
 
-.settings-new-addressbook >>> .new-addressbook-input {
-	min-height: 44px;
-	height: 44px;
-	width: 100%;
-}
+		.settings-line__icon {
+			flex-shrink: 0;
+			width: 44px;
+			height: 44px;
+		}
 
-.settings-new-addressbook >>> .icon-confirm {
-	min-height: 44px;
-	height: 44px;
-	border-color: var(--color-border-dark) !important;
-	border-inline-start: none;
+		.addressbook {
+			flex: 1;
+			padding: 0;
+		}
+	}
 }
-
 </style>
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
index 5cb84a40e..9bd5be7ca 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
@@ -434,6 +434,26 @@ export default {
 .settings-addressbook-list {
 	display: flex;
 	width: 100%;
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) * 2);
+	padding: calc(var(--default-grid-baseline) * 2) 0;
+	border-bottom: 1px solid var(--color-border);
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	.settings-line__icon {
+		flex-shrink: 0;
+		width: 44px;
+		height: 44px;
+	}
+
+	.addressbook {
+		flex: 1;
+		padding: 0;
+	}
+
 	.material-design-icon {
 		justify-content: flex-start;
 	}
diff --git a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
index 3facbd8c4..b11e1298d 100644
--- a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
@@ -5,30 +5,42 @@
 
 <template>
 	<div class="new-addressbook-entry">
-		<IconLoading v-if="loading" :size="20" />
-		<NcInputField
-			v-model:model-value="displayName"
-			class="new-addressbook"
-			:disabled="loading"
-			:label="t('contacts', 'Add new address book')"
-			:show-trailing-button="true"
-			:trailing-button-label="t('contacts', 'Add')"
-			:error="inputErrorState"
-			type="text"
-			autocomplete="off"
-			autocorrect="off"
-			spellcheck="false"
-			@trailing-button-click="addAddressbook">
-			<template #trailing-button-icon>
+		<NcButton v-if="!modalOpen && !loading" @click="openModal">
+			<template #icon>
 				<IconAdd :size="20" />
 			</template>
-		</NcInputField>
+			{{ t('contacts', 'New address book') }}
+		</NcButton>
+		<IconLoading v-if="loading" :size="20" />
+
+		<NcModal v-if="modalOpen" size="small" @close="onModalCancel">
+			<div class="new-addressbook-modal">
+				<NcInputField
+					v-model:model-value="displayName"
+					class="new-addressbook"
+					:disabled="loading"
+					:label="t('contacts', 'Add new address book')"
+					type="text"
+					autocomplete="off"
+					autocorrect="off"
+					spellcheck="false" />
+
+				<div class="new-addressbook-modal__buttons">
+					<NcButton variant="tertiary" :disabled="loading" @click="onModalCancel">
+						{{ t('contacts', 'Cancel') }}
+					</NcButton>
+					<NcButton variant="primary" :disabled="loading || inputErrorState" @click="onModalSubmit">
+						{{ t('contacts', 'Add') }}
+					</NcButton>
+				</div>
+			</div>
+		</NcModal>
 	</div>
 </template>
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { NcInputField } from '@nextcloud/vue'
+import { NcButton, NcInputField, NcModal } from '@nextcloud/vue'
 import IconLoading from 'vue-material-design-icons/Loading.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 
@@ -38,12 +50,15 @@ export default {
 		NcInputField,
 		IconAdd,
 		IconLoading,
+		NcButton,
+		NcModal,
 	},
 
 	data() {
 		return {
 			loading: false,
 			displayName: '',
+			modalOpen: false,
 		}
 	},
 
@@ -59,6 +74,21 @@ export default {
 	},
 
 	methods: {
+		openModal() {
+			this.modalOpen = true
+		},
+
+		onModalCancel() {
+			this.modalOpen = false
+			this.displayName = ''
+			this.loading = false
+		},
+
+		async onModalSubmit() {
+			await this.addAddressbook()
+			this.modalOpen = false
+		},
+
 		/**
 		 * Add a new address book
 		 */
@@ -82,3 +112,32 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+
+.new-addressbook-entry {
+	display: flex;
+	width: 100%;
+	justify-content: stretch;
+	margin-top: calc(var(--default-grid-baseline) * 2);
+
+	> * {
+		flex-grow: 1;
+	}
+}
+
+.new-addressbook-modal {
+	padding: calc(var(--default-grid-baseline) * 4);
+	padding-top: calc(var(--default-grid-baseline) * 8);
+	> * {
+		width: 100%;
+	}
+
+	&__buttons {
+		display: flex;
+		justify-content: end;
+		gap: calc(var(--default-grid-baseline) * 2);
+		margin-top: calc(var(--default-grid-baseline) * 2);
+	}
+}
+</style>
diff --git a/src/components/AppNavigation/Settings/SettingsSortContacts.vue b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
index d104b2f81..5953ec6b8 100644
--- a/src/components/AppNavigation/Settings/SettingsSortContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
@@ -4,30 +4,33 @@
 -->
 
 <template>
-	<div class="sort-contacts">
-		<IconList class="settings-line__icon" />
-		<NcSelect
-			id="sort-by"
-			v-model="selected"
-			:searchable="false"
-			:allow-empty="false"
-			:options="options"
-			:input-label="t('contacts', 'Sort by')"
-			label="label"
-			@update:model-value="sortContacts" />
-	</div>
+	<NcFormBox>
+		<div class="sort-contacts">
+			<label for="sort-by" class="sort-contacts__label">
+				{{ t('contacts', 'Sort by') }}
+			</label>
+			<NcSelect
+				id="sort-by"
+				v-model="selected"
+				:searchable="false"
+				:allow-empty="false"
+				:options="options"
+				label="label"
+				@update:model-value="sortContacts" />
+		</div>
+	</NcFormBox>
 </template>
 
 <script>
 import { NcSelect } from '@nextcloud/vue'
-import IconList from 'vue-material-design-icons/FormatListBulletedSquare.vue'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
 
 export default {
 	name: 'SettingsSortContacts',
 
 	components: {
+		NcFormBox,
 		NcSelect,
-		IconList,
 	},
 
 	data() {
@@ -37,7 +40,6 @@ export default {
 	},
 
 	computed: {
-		/* Order Keys */
 		options() {
 			return [
 				{
@@ -69,7 +71,7 @@ export default {
 	},
 
 	beforeMount() {
-		this.selected = this.options.find((option) => option.value === this.$store.getters.getOrderKey)?.label ?? null
+		this.selected = this.options.find((option) => option.value === this.$store.getters.getOrderKey) ?? null
 	},
 
 	methods: {
@@ -86,5 +88,7 @@ export default {
 <style lang="scss" scoped>
 .sort-contacts {
 	display: flex;
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline) * 2);
 }
 </style>