From 03bcc1a939d337f7ff51761aac47e37af6612c4f Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Sat, 21 Mar 2026 22:56:56 +0100
Subject: [PATCH] 2. Zwischenstand

---
 frontend/components/DocumentDisplayModal.vue  |  38 +--
 frontend/components/DocumentUploadModal.vue   |   8 +-
 frontend/components/EntityList.vue            |  12 +-
 frontend/components/EntityShow.vue            |  19 +-
 frontend/components/EntityShowSub.vue         |   6 +-
 .../EntityShowSubCreatedDocuments.vue         | 130 ++++----
 frontend/components/EntityShowSubFiles.vue    |  64 ++--
 .../EntityShowSubOwnAccountsStatements.vue    |  20 +-
 frontend/components/EntityShowSubTimes.vue    |  38 +--
 frontend/components/GlobalSearch.vue          |   2 +-
 frontend/components/HelpSlideover.vue         |  12 +-
 frontend/components/HistoryDisplay.vue        |   6 +-
 frontend/components/MainNav.vue               |  31 +-
 frontend/components/PublicDynamicForm.vue     |  46 +--
 frontend/components/UserDropdown.vue          |  65 ++--
 .../components/copyCreatedDocumentModal.vue   |   4 +-
 frontend/components/displayOpenTasks.vue      |   2 +-
 frontend/components/displayRunningTime.vue    |   8 +-
 .../components/displayRunningWorkingTime.vue  |   4 +-
 frontend/components/nimbot.vue                |  12 +-
 frontend/components/wiki/WikiEntityWidget.vue |  24 +-
 frontend/layouts/default.vue                  |   2 +-
 frontend/pages/accounting/tax.vue             |  26 +-
 frontend/pages/accounts/index.vue             |  12 +-
 frontend/pages/accounts/show/[id].vue         |  22 +-
 frontend/pages/banking/index.vue              |  30 +-
 .../banking/statements/[mode]/[[id]].vue      |   8 +-
 frontend/pages/createDocument/edit/[[id]].vue | 278 +++++++++---------
 frontend/pages/createDocument/index.vue       |  74 ++---
 .../pages/createDocument/serialInvoice.vue    | 192 ++++++------
 .../pages/createdletters/[mode]/[[id]].vue    |   9 +-
 frontend/pages/email/new.vue                  |  26 +-
 frontend/pages/export/index.vue               |  54 ++--
 frontend/pages/files/index.vue                |  64 ++--
 .../pages/incomingInvoices/[mode]/[id].vue    |  50 ++--
 frontend/pages/incomingInvoices/index.vue     |  56 ++--
 frontend/pages/organisation/plantafel.vue     |  74 ++---
 frontend/pages/projecttypes/[mode]/[[id]].vue |  76 ++---
 frontend/pages/projecttypes/index.vue         |  10 +-
 frontend/pages/roles/[mode]/[[id]].vue        |  26 +-
 frontend/pages/settings/admin.vue             | 140 ++++-----
 frontend/pages/settings/banking/index.vue     | 104 +++----
 .../settings/emailaccounts/[mode]/[[id]].vue  |  36 +--
 .../pages/settings/emailaccounts/index.vue    |  14 +-
 frontend/pages/settings/externalDevices.vue   |   4 +-
 frontend/pages/settings/index.vue             |   4 +-
 frontend/pages/settings/tenant.vue            |  34 +--
 frontend/pages/settings/texttemplates.vue     | 114 +++----
 frontend/pages/staff/profiles/[id].vue        |  90 +++---
 frontend/pages/staff/profiles/index.vue       |   2 +-
 .../pages/standardEntity/[type]/index.vue     | 110 +++----
 frontend/pages/support/[id].vue               |  55 +---
 frontend/pages/support/create.vue             |   8 +-
 frontend/pages/support/index.vue              |  36 +--
 frontend/pages/tasks/index.vue                | 148 +++++-----
 frontend/pages/wiki/[[id]].vue                |  52 ++--
 56 files changed, 1289 insertions(+), 1302 deletions(-)

diff --git a/frontend/components/DocumentDisplayModal.vue b/frontend/components/DocumentDisplayModal.vue
index 327f617..5d3798b 100644
--- a/frontend/components/DocumentDisplayModal.vue
+++ b/frontend/components/DocumentDisplayModal.vue
@@ -281,30 +281,30 @@ const moveFile = async () => {
 
           <USeparator class="my-3" label="Datei zuweisen"/>
 
-          <UFormGroup
+          <UFormField
               label="Resource auswählen"
           >
             <USelectMenu
-                :options="resourceOptions"
+                :items="resourceOptions"
                 v-model="resourceToAssign"
-                value-attribute="value"
-                option-attribute="label"
+                value-key="value"
+                label-key="label"
                 @change="getItemsBySelectedResource"
             >
 
             </USelectMenu>
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Eintrag auswählen:"
           >
             <USelectMenu
-                :options="itemOptions"
+                :items="itemOptions"
                 v-model="idToAssign"
-                :option-attribute="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'"
-                value-attribute="id"
+                :label-key="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'"
+                value-key="id"
                 @change="updateDocumentAssignment"
             ></USelectMenu>
-          </UFormGroup>
+          </UFormField>
 
 
 
@@ -314,9 +314,9 @@ const moveFile = async () => {
             <USelectMenu
                 class="flex-auto"
                 v-model="folderToMoveTo"
-                value-attribute="id"
-                option-attribute="name"
-                :options="folders"
+                value-key="id"
+                label-key="name"
+                :items="folders"
             />
             <UButton
               @click="moveFile"
@@ -331,9 +331,9 @@ const moveFile = async () => {
             <USelectMenu
                 class="flex-auto"
                 v-model="props.documentData.type"
-                value-attribute="id"
-                option-attribute="name"
-                :options="filetypes"
+                value-key="id"
+                label-key="name"
+                :items="filetypes"
                 @change="updateDocument"
             />
           </InputGroup>
@@ -343,9 +343,9 @@ const moveFile = async () => {
             <USelectMenu
                 class="flex-auto"
                 v-model="props.documentData.documentbox"
-                value-attribute="id"
-                option-attribute="key"
-                :options="documentboxes"
+                value-key="id"
+                label-key="key"
+                :items="documentboxes"
                 @change="updateDocument"
             />
           </InputGroup>
diff --git a/frontend/components/DocumentUploadModal.vue b/frontend/components/DocumentUploadModal.vue
index a6051fa..ebf6984 100644
--- a/frontend/components/DocumentUploadModal.vue
+++ b/frontend/components/DocumentUploadModal.vue
@@ -107,7 +107,7 @@ const fileNames = computed(() => {
             </div>
           </template>
 
-          <UFormGroup
+          <UFormField
               label="Datei:"
               :help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
           >
@@ -123,9 +123,9 @@ const fileNames = computed(() => {
             <div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
               Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
             </div>
-          </UFormGroup>
+          </UFormField>
 
-          <UFormGroup
+          <UFormField
               label="Typ:"
               class="mt-3"
           >
@@ -143,7 +143,7 @@ const fileNames = computed(() => {
                 <span v-else>Kein Typ ausgewählt</span>
               </template>
             </USelectMenu>
-          </UFormGroup>
+          </UFormField>
 
           <template #footer>
             <UButton
diff --git a/frontend/components/EntityList.vue b/frontend/components/EntityList.vue
index acf1ab5..3906df6 100644
--- a/frontend/components/EntityList.vue
+++ b/frontend/components/EntityList.vue
@@ -155,15 +155,15 @@ const filteredRows = computed(() => {
       <USelectMenu
           v-model="selectedColumns"
           icon="i-heroicons-adjustments-horizontal-solid"
-          :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+          :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
           multiple
           class="hidden lg:block"
           by="key"
           :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
           @change="tempStore.modifyColumns(type,selectedColumns)"
       >
-        <template>
+        <template #default>
           Spalten
         </template>
       </USelectMenu>
@@ -172,11 +172,11 @@ const filteredRows = computed(() => {
           icon="i-heroicons-adjustments-horizontal-solid"
           multiple
           v-model="selectedFilters"
-          :options="selectableFilters"
+          :items="selectableFilters"
           :color="selectedFilters.length > 0 ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
       >
-        <template #label>
+        <template #default>
           Filter
         </template>
       </USelectMenu>
diff --git a/frontend/components/EntityShow.vue b/frontend/components/EntityShow.vue
index 8cb3ecc..bfae451 100644
--- a/frontend/components/EntityShow.vue
+++ b/frontend/components/EntityShow.vue
@@ -28,14 +28,16 @@ defineShortcuts({
     router.back()
   },
   'arrowleft': () => {
-    if(openTab.value > 0){
-      openTab.value -= 1
+    const currentIndex = Number(openTab.value)
+    if(currentIndex > 0){
+      openTab.value = String(currentIndex - 1)
       router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
     }
   },
   'arrowright': () => {
-    if(openTab.value < dataType.showTabs.length - 1) {
-      openTab.value += 1
+    const currentIndex = Number(openTab.value)
+    if(currentIndex < dataType.showTabs.length - 1) {
+      openTab.value = String(currentIndex + 1)
       router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
     }
   },
@@ -51,7 +53,7 @@ const auth = useAuthStore()
 
 const dataType = dataStore.dataTypes[type]
 
-const openTab = ref(route.query.tabIndex || 0)
+const openTab = ref(String(route.query.tabIndex || 0))
 
 
 
@@ -97,7 +99,8 @@ const getAvailableQueryStringData = (keys) => {
 }
 
 const onTabChange = (index) => {
-  router.push(`${router.currentRoute.value.path}?tabIndex=${index}`)
+  openTab.value = String(index)
+  router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
 }
 
 const changePinned = async () => {
@@ -255,9 +258,9 @@ const openCustomerInventoryLabelPrint = () => {
       v-if="props.item.id && platform !== 'mobile'"
       class="p-5"
       v-model="openTab"
-      @change="onTabChange"
+      @update:model-value="onTabChange"
   >
-    <template #item="{item:tab}">
+    <template #content="{item:tab}">
       <div v-if="tab.label === 'Informationen'" class="flex flex-row">
 
         <EntityShowSubInformation
diff --git a/frontend/components/EntityShowSub.vue b/frontend/components/EntityShowSub.vue
index 57d2e3b..d09ce23 100644
--- a/frontend/components/EntityShowSub.vue
+++ b/frontend/components/EntityShowSub.vue
@@ -96,15 +96,15 @@ setup()
         <USelectMenu
             v-model="selectedColumns"
             icon="i-heroicons-adjustments-horizontal-solid"
-            :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+            :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
             multiple
             class="hidden lg:block"
             by="key"
             :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
-            :ui-menu="{ width: 'min-w-max' }"
+            :content="{ width: 'min-w-max' }"
             @change="tempStore.modifyColumns(type,selectedColumns)"
         >
-          <template #label>
+          <template #default>
             Spalten
           </template>
         </USelectMenu>
diff --git a/frontend/components/EntityShowSubCreatedDocuments.vue b/frontend/components/EntityShowSubCreatedDocuments.vue
index 3b9535e..ff8c53d 100644
--- a/frontend/components/EntityShowSubCreatedDocuments.vue
+++ b/frontend/components/EntityShowSubCreatedDocuments.vue
@@ -181,49 +181,51 @@ const selectItem = (item) => {
       </UButton>
       <UModal
           prevent-close
-          v-model="showFinalInvoiceConfig"
+          v-model:open="showFinalInvoiceConfig"
       >
-        <UCard>
-          <template #header>
-            <div class="flex items-center justify-between">
-              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-                Schlussrechnung konfigurieren
-              </h3>
-              <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-            </div>
-          </template>
+        <template #content>
+          <UCard>
+            <template #header>
+              <div class="flex items-center justify-between">
+                <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                  Schlussrechnung konfigurieren
+                </h3>
+                <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showFinalInvoiceConfig = false" />
+              </div>
+            </template>
 
-          <UFormGroup
-              label="Rechnungsvorlage"
-          >
-            <USelectMenu
-                :options="props.item.createddocuments.filter(i => ['confirmationOrders','quotes'].includes(i.type))"
-                value-attribute="id"
-                option-attribute="documentNumber"
-                v-model="referenceDocument"
-            />
-          </UFormGroup>
-
-          <UFormGroup
-              label="Abschlagsrechnungen"
-          >
-            <USelectMenu
-                :options="props.item.createddocuments.filter(i => ['advanceInvoices'].includes(i.type))"
-                multiple
-                value-attribute="id"
-                option-attribute="documentNumber"
-                v-model="advanceInvoicesToAdd"
-            />
-          </UFormGroup>
-
-          <template #footer>
-            <UButton
-                @click="invoiceAdvanceInvoices"
+            <UFormField
+                label="Rechnungsvorlage"
             >
-              Weiter
-            </UButton>
-          </template>
-        </UCard>
+              <USelectMenu
+                  :items="props.item.createddocuments.filter(i => ['confirmationOrders','quotes'].includes(i.type))"
+                  value-key="id"
+                  label-key="documentNumber"
+                  v-model="referenceDocument"
+              />
+            </UFormField>
+
+            <UFormField
+                label="Abschlagsrechnungen"
+            >
+              <USelectMenu
+                  :items="props.item.createddocuments.filter(i => ['advanceInvoices'].includes(i.type))"
+                  multiple
+                  value-key="id"
+                  label-key="documentNumber"
+                  v-model="advanceInvoicesToAdd"
+              />
+            </UFormField>
+
+            <template #footer>
+              <UButton
+                  @click="invoiceAdvanceInvoices"
+              >
+                Weiter
+              </UButton>
+            </template>
+          </UCard>
+        </template>
       </UModal>
       <UButton
           @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'invoices'})}`)"
@@ -235,13 +237,13 @@ const selectItem = (item) => {
         <USelectMenu
             v-model="selectedColumns"
             icon="i-heroicons-adjustments-horizontal-solid"
-            :options="templateColumns"
+            :items="templateColumns"
             multiple
             class="hidden lg:block"
             by="key"
             @change="tempStore.modifyColumns('createddocuments',selectedColumns)"
         >
-          <template #label>
+          <template #default>
             Spalten
           </template>
         </USelectMenu>
@@ -252,31 +254,31 @@ const selectItem = (item) => {
         :columns="normalizeTableColumns(columns)"
         class="w-full"
         :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+        :on-select="(row) => selectItem(row.original)"
+        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
         style="height: 70vh"
     >
-      <template #type-data="{row}">
-        {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+      <template #type-cell="{ row }">
+        {{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}
       </template>
-      <template #state-data="{row}">
+      <template #state-cell="{ row }">
         <span
-            v-if="row.state === 'Entwurf'"
-            class="text-rose-500"
+            v-if="row.original.state === 'Entwurf'"
+            class="text-error-500"
         >
-          {{row.state}}
+          {{ row.original.state }}
         </span>
         <span
-            v-if="row.state === 'Gebucht'"
+            v-if="row.original.state === 'Gebucht'"
             class="text-cyan-500"
         >
-          {{row.state}}
+          {{ row.original.state }}
         </span>
         <span
-            v-if="row.state === 'Abgeschlossen'"
+            v-if="row.original.state === 'Abgeschlossen'"
             class="text-primary-500"
         >
-          {{row.state}}
+          {{ row.original.state }}
         </span>
       </template>
 <!--      <template #paid-data="{row}">
@@ -285,19 +287,19 @@ const selectItem = (item) => {
           <span v-else class="text-rose-600">Offen</span>
         </div>
       </template>-->
-      <template #reference-data="{row}">
-        <span v-if="row === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
-        <span v-else>{{row.documentNumber}}</span>
+      <template #reference-cell="{ row }">
+        <span v-if="row.original === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{ row.original.documentNumber }}</span>
+        <span v-else>{{ row.original.documentNumber }}</span>
       </template>
-      <template #date-data="{row}">
-        <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
-        <span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
+      <template #date-cell="{ row }">
+        <span v-if="row.original.date">{{ row.original.date ? dayjs(row.original.date).format("DD.MM.YY") : '' }}</span>
+        <span v-if="row.original.documentDate">{{ row.original.documentDate ? dayjs(row.original.documentDate).format("DD.MM.YY") : '' }}</span>
       </template>
-      <template #dueDate-data="{row}">
-        <span v-if="row.paymentDays && ['invoices','advanceInvoices'].includes(row.type)" >{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
+      <template #dueDate-cell="{ row }">
+        <span v-if="row.original.paymentDays && ['invoices','advanceInvoices'].includes(row.original.type)">{{ row.original.documentDate ? dayjs(row.original.documentDate).add(row.original.paymentDays,'day').format("DD.MM.YY") : '' }}</span>
       </template>
-      <template #amount-data="{row}">
-        <span v-if="row.type !== 'deliveryNotes'">{{useCurrency(useSum().getCreatedDocumentSum(row, createddocuments))}}</span>
+      <template #amount-cell="{ row }">
+        <span v-if="row.original.type !== 'deliveryNotes'">{{ useCurrency(useSum().getCreatedDocumentSum(row.original, createddocuments)) }}</span>
       </template>
     </UTable>
 
diff --git a/frontend/components/EntityShowSubFiles.vue b/frontend/components/EntityShowSubFiles.vue
index 4f4f9fc..4553e81 100644
--- a/frontend/components/EntityShowSubFiles.vue
+++ b/frontend/components/EntityShowSubFiles.vue
@@ -95,40 +95,42 @@ function isImage(file) {
 
   <!-- 📱 PDF / IMG Viewer Slideover -->
   <UModal v-model:open="showViewer" side="bottom" class="h-[100dvh]" fullscreen>
-    <!-- Header -->
-    <div class="p-4 border-b flex justify-between items-center flex-shrink-0">
-      <h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3>
-      <UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" />
-    </div>
-
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto m-2">
-      <!-- PDF -->
-      <div v-if="activeFile && isPdf(activeFile)" class="h-full">
-        <PDFViewer
-            :no-controls="true"
-            :file-id="activeFile.id"
-            location="fileviewer-mobile"
-            class="h-full"
-        />
+    <template #content>
+      <!-- Header -->
+      <div class="p-4 border-b flex justify-between items-center flex-shrink-0">
+        <h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3>
+        <UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" />
       </div>
 
-      <!-- IMAGE -->
-      <div
-          v-else-if="activeFile && isImage(activeFile)"
-          class="p-4 flex justify-center"
-      >
-        <img
-            :src="activeFile.url"
-            class="max-w-full max-h-[80vh] rounded-lg shadow"
+      <!-- Content -->
+      <div class="flex-1 overflow-y-auto m-2">
+        <!-- PDF -->
+        <div v-if="activeFile && isPdf(activeFile)" class="h-full">
+          <PDFViewer
+              :no-controls="true"
+              :file-id="activeFile.id"
+              location="fileviewer-mobile"
+              class="h-full"
+          />
+        </div>
+
+        <!-- IMAGE -->
+        <div
+            v-else-if="activeFile && isImage(activeFile)"
+            class="p-4 flex justify-center"
+        >
+          <img
+              :src="activeFile.url"
+              class="max-w-full max-h-[80vh] rounded-lg shadow"
+          />
+        </div>
+
+        <UAlert
+            v-else
+            title="Nicht unterstützter Dateityp"
+            icon="i-heroicons-exclamation-triangle"
         />
       </div>
-
-      <UAlert
-          v-else
-          title="Nicht unterstützter Dateityp"
-          icon="i-heroicons-exclamation-triangle"
-      />
-    </div>
+    </template>
   </UModal>
 </template>
diff --git a/frontend/components/EntityShowSubOwnAccountsStatements.vue b/frontend/components/EntityShowSubOwnAccountsStatements.vue
index 1d6bd64..62657a9 100644
--- a/frontend/components/EntityShowSubOwnAccountsStatements.vue
+++ b/frontend/components/EntityShowSubOwnAccountsStatements.vue
@@ -79,19 +79,19 @@ const renderedAllocations = computed(() => {
         v-if="props.item.statementallocations"
         :data="renderedAllocations"
         :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
-        @select="(i) => selectAllocation(i)"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+        :on-select="(i) => selectAllocation(i)"
+        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
     >
-      <template #amount-data="{row}">
-        <span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span>
-        <span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span>
-        <span v-else>{{useCurrency(row.amount)}}</span>
+      <template #amount-cell="{row}">
+        <span class="text-right text-rose-600" v-if="row.original.amount < 0 || row.original.color === 'red'">{{useCurrency(row.original.amount)}}</span>
+        <span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{useCurrency(row.original.amount)}}</span>
+        <span v-else>{{useCurrency(row.original.amount)}}</span>
       </template>
-      <template #date-data="{row}">
-        {{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
+      <template #date-cell="{row}">
+        {{row.original.date ? dayjs(row.original.date).format('DD.MM.YYYY') : ''}}
       </template>
-      <template #description-data="{row}">
-        {{row.description ? row.description : ''}}
+      <template #description-cell="{row}">
+        {{row.original.description ? row.original.description : ''}}
       </template>
     </UTable>
   </UCard>
diff --git a/frontend/components/EntityShowSubTimes.vue b/frontend/components/EntityShowSubTimes.vue
index 58ba907..112250b 100644
--- a/frontend/components/EntityShowSubTimes.vue
+++ b/frontend/components/EntityShowSubTimes.vue
@@ -69,38 +69,38 @@ const columns = [
         class="mt-3"
         :columns="normalizeTableColumns(columns)"
         :data="props.item.times"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     >
-      <template #state-data="{row}">
+      <template #state-cell="{ row }">
                 <span
-                    v-if="row.state === 'Entwurf'"
-                    class="text-rose-500"
-                >{{row.state}}</span>
+                    v-if="row.original.state === 'Entwurf'"
+                    class="text-error-500"
+                >{{ row.original.state }}</span>
         <span
-            v-if="row.state === 'Eingereicht'"
+            v-if="row.original.state === 'Eingereicht'"
             class="text-cyan-500"
-        >{{row.state}}</span>
+        >{{ row.original.state }}</span>
         <span
-            v-if="row.state === 'Bestätigt'"
+            v-if="row.original.state === 'Bestätigt'"
             class="text-primary-500"
-        >{{row.state}}</span>
+        >{{ row.original.state }}</span>
       </template>
-      <template #user-data="{row}">
-        {{row.profile ? row.profile.fullName : "" }}
+      <template #user-cell="{ row }">
+        {{ row.original.profile ? row.original.profile.fullName : "" }}
       </template>
 
-      <template #startDate-data="{row}">
-        {{dayjs(row.startDate).format("DD.MM.YY HH:mm")}}
+      <template #startDate-cell="{ row }">
+        {{ dayjs(row.original.startDate).format("DD.MM.YY HH:mm") }}
       </template>
-      <template #endDate-data="{row}">
-        {{dayjs(row.endDate).format("DD.MM.YY HH:mm")}}
+      <template #endDate-cell="{ row }">
+        {{ dayjs(row.original.endDate).format("DD.MM.YY HH:mm") }}
       </template>
-      <template #duration-data="{row}">
-        {{Math.floor(dayjs(row.endDate).diff(row.startDate, "minutes")/60)}}:{{String(dayjs(row.endDate).diff(row.startDate, "minutes") % 60).padStart(2,"0")}} h
+      <template #duration-cell="{ row }">
+        {{ Math.floor(dayjs(row.original.endDate).diff(row.original.startDate, "minutes") / 60) }}:{{ String(dayjs(row.original.endDate).diff(row.original.startDate, "minutes") % 60).padStart(2,"0") }} h
 
       </template>
-      <template #project-data="{row}">
-        {{row.project ? row.project.name : "" }}
+      <template #project-cell="{ row }">
+        {{ row.original.project ? row.original.project.name : "" }}
       </template>
     </UTable>
   </UCard>
diff --git a/frontend/components/GlobalSearch.vue b/frontend/components/GlobalSearch.vue
index bda3964..65aca94 100644
--- a/frontend/components/GlobalSearch.vue
+++ b/frontend/components/GlobalSearch.vue
@@ -123,7 +123,7 @@ function onSelect (option) {
   />
 
   <UModal
-      v-model="showCommandPalette"
+      v-model:open="showCommandPalette"
   >
     <template #content>
       <UCommandPalette
diff --git a/frontend/components/HelpSlideover.vue b/frontend/components/HelpSlideover.vue
index 2a84083..b6725b9 100644
--- a/frontend/components/HelpSlideover.vue
+++ b/frontend/components/HelpSlideover.vue
@@ -270,29 +270,29 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
         @submit="addContactRequest"
         @reset="resetContactRequest"
       >
-&lt;!&ndash;        <UFormGroup
+&lt;!&ndash;        <UFormField
           label="Art:"
         >
           <USelectMenu
               :options="['Hilfe','Software Problem / Bug','Funktionsanfrage','Kontakt','Sonstiges']"
               v-model="contactRequestData.contactType"
           />
-        </UFormGroup>&ndash;&gt;
-        <UFormGroup
+        </UFormField>&ndash;&gt;
+        <UFormField
           label="Titel:"
         >
           <UInput
             v-model="contactRequestData.title"
           />
-        </UFormGroup>
-        <UFormGroup
+        </UFormField>
+        <UFormField
           label="Nachricht:"
         >
           <UTextarea
               v-model="contactRequestData.message"
               rows="6"
           />
-        </UFormGroup>
+        </UFormField>
         <InputGroup class="mt-3">
           <UButton
             type="submit"
diff --git a/frontend/components/HistoryDisplay.vue b/frontend/components/HistoryDisplay.vue
index dac818c..665c9ad 100644
--- a/frontend/components/HistoryDisplay.vue
+++ b/frontend/components/HistoryDisplay.vue
@@ -76,7 +76,7 @@ const renderText = (text) => {
 
 <template>
   <UModal
-    v-model="showAddHistoryItemModal"
+    v-model:open="showAddHistoryItemModal"
 
   >
     <template #content>
@@ -90,7 +90,7 @@ const renderText = (text) => {
           </div>
         </template>
 
-        <UFormGroup
+        <UFormField
           label="Text:"
         >
           <UTextarea
@@ -102,7 +102,7 @@ const renderText = (text) => {
             <UKbd>{{metaSymbol}}</UKbd> <UKbd>Enter</UKbd> Speichern
           </template>-->
 
-        </UFormGroup>
+        </UFormField>
 
 
         <template #footer>
diff --git a/frontend/components/MainNav.vue b/frontend/components/MainNav.vue
index 37b4c69..295f518 100644
--- a/frontend/components/MainNav.vue
+++ b/frontend/components/MainNav.vue
@@ -322,6 +322,21 @@ const links = computed(() => {
       to: "/historyitems",
       icon: "i-heroicons-book-open"
     } : null,
+    ...(has("projects") && featureEnabled("projects")) ? [{
+      label: "Projekte",
+      to: "/standardEntity/projects",
+      icon: "i-heroicons-clipboard-document-check"
+    }] : [],
+    ...(has("contracts") && featureEnabled("contracts")) ? [{
+      label: "Verträge",
+      to: "/standardEntity/contracts",
+      icon: "i-heroicons-clipboard-document"
+    }] : [],
+    ...(has("plants") && featureEnabled("plants")) ? [{
+      label: "Objekte",
+      to: "/standardEntity/plants",
+      icon: "i-heroicons-clipboard-document"
+    }] : [],
     ...(visibleOrganisationChildren.length > 0 ? [{
       label: "Organisation",
       icon: "i-heroicons-rectangle-stack",
@@ -371,21 +386,7 @@ const links = computed(() => {
       children: visibleMasterDataChildren
     }] : []),
 
-    ...(has("projects") && featureEnabled("projects")) ? [{
-      label: "Projekte",
-      to: "/standardEntity/projects",
-      icon: "i-heroicons-clipboard-document-check"
-    }] : [],
-    ...(has("contracts") && featureEnabled("contracts")) ? [{
-      label: "Verträge",
-      to: "/standardEntity/contracts",
-      icon: "i-heroicons-clipboard-document"
-    }] : [],
-    ...(has("plants") && featureEnabled("plants")) ? [{
-      label: "Objekte",
-      to: "/standardEntity/plants",
-      icon: "i-heroicons-clipboard-document"
-    }] : [],
+
     ...(visibleSettingsChildren.length > 0 ? [{
       label: "Einstellungen",
       defaultOpen: false,
diff --git a/frontend/components/PublicDynamicForm.vue b/frontend/components/PublicDynamicForm.vue
index 6777aae..604f78f 100644
--- a/frontend/components/PublicDynamicForm.vue
+++ b/frontend/components/PublicDynamicForm.vue
@@ -119,7 +119,7 @@ const setDeliveryDateToToday = () => {
 
     <div class="space-y-5">
 
-      <UFormGroup
+      <UFormField
           label="Datum der Ausführung"
           :error="errors.deliveryDate"
           required
@@ -134,9 +134,9 @@ const setDeliveryDateToToday = () => {
           />
           <UButton color="gray" variant="soft" size="lg" label="Heute" @click="setDeliveryDateToToday" />
         </div>
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           v-if="!context?.meta?.defaultProfileId && data?.profiles?.length > 0"
           label="Mitarbeiter"
           :error="errors.profile"
@@ -144,16 +144,16 @@ const setDeliveryDateToToday = () => {
       >
         <USelectMenu
             v-model="form.profile"
-            :options="data.profiles"
-            option-attribute="fullName"
-            value-attribute="id"
+            :items="data.profiles"
+            label-key="fullName"
+            value-key="id"
             placeholder="Name auswählen..."
             searchable
             size="lg"
         />
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           v-if="data?.projects?.length > 0"
           :label="config.ui?.labels?.project || 'Projekt / Auftrag'"
           :error="errors.project"
@@ -161,16 +161,16 @@ const setDeliveryDateToToday = () => {
       >
         <USelectMenu
             v-model="form.project"
-            :options="data.projects"
-            option-attribute="name"
-            value-attribute="id"
+            :items="data.projects"
+            label-key="name"
+            value-key="id"
             placeholder="Wählen..."
             searchable
             size="lg"
         />
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           v-if="data?.services?.length > 0"
           :label="config?.ui?.labels?.service || 'Tätigkeit'"
           :error="errors.service"
@@ -178,16 +178,16 @@ const setDeliveryDateToToday = () => {
       >
         <USelectMenu
             v-model="form.service"
-            :options="data.services"
-            option-attribute="name"
-            value-attribute="id"
+            :items="data.services"
+            label-key="name"
+            value-key="id"
             placeholder="Wählen..."
             searchable
             size="lg"
         />
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           label="Menge / Dauer"
           :error="errors.quantity"
           required
@@ -203,9 +203,9 @@ const setDeliveryDateToToday = () => {
             <span class="text-gray-500 text-sm pr-2">{{ currentUnit }}</span>
           </template>
         </UInput>
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           v-if="config?.features?.agriculture?.showDieselUsage"
           label="Dieselverbrauch"
           :error="errors.diesel"
@@ -216,11 +216,11 @@ const setDeliveryDateToToday = () => {
             <span class="text-gray-500 text-xs">Liter</span>
           </template>
         </UInput>
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup :label="config?.ui?.labels?.description || 'Notiz / Vorkommnisse'">
+      <UFormField :label="config?.ui?.labels?.description || 'Notiz / Vorkommnisse'">
         <UTextarea v-model="form.description" :rows="3" placeholder="Optional..." />
-      </UFormGroup>
+      </UFormField>
 
     </div>
 
diff --git a/frontend/components/UserDropdown.vue b/frontend/components/UserDropdown.vue
index 9b3435c..c5e7aac 100644
--- a/frontend/components/UserDropdown.vue
+++ b/frontend/components/UserDropdown.vue
@@ -1,55 +1,44 @@
 <script setup>
-
-const { isHelpSlideoverOpen } = useDashboard()
 const auth = useAuthStore()
 
-const items = computed(() => [
-  [{
-    slot: 'account',
-    label: '',
-    disabled: true
-  }],  [/*{
-    label: 'Mein Profil',
-    icon: 'i-heroicons-user',
-    to: `/profiles/show/${profileStore.activeProfile.id}`
-  },*/{
-    label: 'Passwort ändern',
+const userItems = computed(() => [[
+  {
+    label: 'Passwort aendern',
     icon: 'i-heroicons-shield-check',
-    to: `/password-change`
-  },{
+    to: '/password-change'
+  },
+  {
     label: 'Abmelden',
     icon: 'i-heroicons-arrow-left-on-rectangle',
-    click: async () => {
+    onSelect: async () => {
       await auth.logout()
-
     }
-  }]
-])
+  }
+]])
 </script>
 
 <template>
-  <UDropdown mode="hover" :items="items" :ui="{ width: 'w-full', item: { disabled: 'cursor-text select-text' } }" :popper="{ strategy: 'absolute', placement: 'top' }" class="w-full">
-    <template #default="slotProps">
-      <UButton color="gray" variant="ghost" class="w-full" :label="auth.user.email" :class="[slotProps?.open && 'bg-gray-50 dark:bg-gray-800']">
-<!--        <template #leading>
-          <UAvatar :alt="auth.user.email"  size="xs" />
-        </template>-->
+  <UDropdownMenu
+    :items="userItems"
+    :content="{ align: 'start', side: 'top', sideOffset: 8 }"
+    :ui="{ content: 'w-[var(--reka-dropdown-menu-trigger-width)] max-w-[var(--reka-dropdown-menu-trigger-width)]' }"
+    class="block w-full"
+  >
+    <template #default="{ open }">
+      <UButton
+        color="gray"
+        variant="ghost"
+        class="w-full min-w-0 justify-start gap-2 rounded-lg px-2.5 py-2 text-left"
+        :class="[open && 'bg-gray-100 dark:bg-gray-800']"
+      >
+        <span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
+          {{ auth.user.email }}
+        </span>
 
         <template #trailing>
-          <UIcon name="i-heroicons-ellipsis-vertical" class="w-5 h-5 ml-auto" />
+          <UIcon name="i-heroicons-ellipsis-vertical" class="h-5 w-5 shrink-0" />
         </template>
       </UButton>
     </template>
-
-    <template #account>
-      <div class="text-left">
-        <p>
-          Angemeldet als
-        </p>
-        <p class="truncate font-medium text-gray-900 dark:text-white">
-          {{auth.user.email}}
-        </p>
-      </div>
-    </template>
-  </UDropdown>
+  </UDropdownMenu>
 </template>
diff --git a/frontend/components/copyCreatedDocumentModal.vue b/frontend/components/copyCreatedDocumentModal.vue
index 21508f7..6e968ac 100644
--- a/frontend/components/copyCreatedDocumentModal.vue
+++ b/frontend/components/copyCreatedDocumentModal.vue
@@ -73,7 +73,7 @@ const startImport = () => {
           Erstelltes Dokument Kopieren
         </template>
 
-        <UFormGroup
+        <UFormField
             label="Dokumententyp:"
           class="mb-3"
         >
@@ -85,7 +85,7 @@ const startImport = () => {
           >
 
           </USelectMenu>
-        </UFormGroup>
+        </UFormField>
         <UCheckbox
               v-for="key in Object.keys(optionsToImport).filter(i => documentTypeToUse !== props.type ? !['startText','endText'].includes(i) : true)"
               v-model="optionsToImport[key]"
diff --git a/frontend/components/displayOpenTasks.vue b/frontend/components/displayOpenTasks.vue
index 6840b94..515d1a9 100644
--- a/frontend/components/displayOpenTasks.vue
+++ b/frontend/components/displayOpenTasks.vue
@@ -25,7 +25,7 @@ setupPage()
       v-if="openTasks.length > 0"
     :data="openTasks"
       :columns="normalizeTableColumns([{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}])"
-      @select="(i) => router.push(`/tasks/show/${i.id}`)"
+      :on-select="(i) => router.push(`/tasks/show/${i.id}`)"
   />
   <div v-else>
     <p  class="text-center font-bold">Keine offenen Aufgaben</p>
diff --git a/frontend/components/displayRunningTime.vue b/frontend/components/displayRunningTime.vue
index 8a239d9..8547a63 100644
--- a/frontend/components/displayRunningTime.vue
+++ b/frontend/components/displayRunningTime.vue
@@ -53,15 +53,15 @@ const stopStartedTime = async () => {
     <p>Start: {{dayjs(runningTimeInfo.started_at).format("HH:mm")}}</p>
     <p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') + ' min' }}</p>
 
-    <UFormGroup
+    <UFormField
         class="mt-2"
         label="Notizen:"
     >
       <UTextarea
           v-model="runningTimeInfo.notes"
       />
-    </UFormGroup>
-    <UFormGroup
+    </UFormField>
+    <UFormField
         class="mt-2"
         label="Projekt:"
     >
@@ -74,7 +74,7 @@ const stopStartedTime = async () => {
           value-attribute="id"
           option-attribute="name"
       />
-    </UFormGroup>
+    </UFormField>
     <UButton
         class="mt-3"
         @click="stopStartedTime"
diff --git a/frontend/components/displayRunningWorkingTime.vue b/frontend/components/displayRunningWorkingTime.vue
index 80f28ed..1a97522 100644
--- a/frontend/components/displayRunningWorkingTime.vue
+++ b/frontend/components/displayRunningWorkingTime.vue
@@ -49,14 +49,14 @@ const stopStartedTime = async () => {
     <p>Start: {{dayjs(runningTimeInfo.started_at).format("HH:mm")}}</p>
     <p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') + ' min' }}</p>
 
-    <UFormGroup
+    <UFormField
         class="mt-2"
         label="Notizen:"
     >
       <UTextarea
           v-model="runningTimeInfo.notes"
       />
-    </UFormGroup>
+    </UFormField>
     <UButton
         class="mt-3"
         @click="stopStartedTime"
diff --git a/frontend/components/nimbot.vue b/frontend/components/nimbot.vue
index 7ceb36a..c74c65f 100644
--- a/frontend/components/nimbot.vue
+++ b/frontend/components/nimbot.vue
@@ -47,14 +47,14 @@ async function handlePrint() {
 
     {{labelPrinter.printProgress}}
 
-    <UFormGroup label="Breite">
+    <UFormField label="Breite">
       <UInput v-model="labelWidth"><template #trailing>mm</template></UInput>
-    </UFormGroup>
-    <UFormGroup label="Höhe">
+    </UFormField>
+    <UFormField label="Höhe">
       <UInput v-model="labelHeight"><template #trailing>mm</template></UInput>
-    </UFormGroup>
-    <UFormGroup label="ZPL">
+    </UFormField>
+    <UFormField label="ZPL">
       <UTextarea v-model="zpl" rows="6" />
-    </UFormGroup>
+    </UFormField>
   </UCard>
 </template>
diff --git a/frontend/components/wiki/WikiEntityWidget.vue b/frontend/components/wiki/WikiEntityWidget.vue
index e24cc6e..43fa86b 100644
--- a/frontend/components/wiki/WikiEntityWidget.vue
+++ b/frontend/components/wiki/WikiEntityWidget.vue
@@ -99,16 +99,18 @@
     </div>
 
     <UModal v-model:open="isCreateModalOpen">
-      <div class="p-5">
-        <h3 class="font-bold mb-4">Neue Seite</h3>
-        <form @submit.prevent="createPage">
-          <UInput v-model="newTitle" placeholder="Titel..." autofocus />
-          <div class="mt-4 flex justify-end gap-2">
-            <UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
-            <UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
-          </div>
-        </form>
-      </div>
+      <template #content>
+        <div class="p-5">
+          <h3 class="font-bold mb-4">Neue Seite</h3>
+          <form @submit.prevent="createPage">
+            <UInput v-model="newTitle" placeholder="Titel..." autofocus />
+            <div class="mt-4 flex justify-end gap-2">
+              <UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
+              <UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
+            </div>
+          </form>
+        </div>
+      </template>
     </UModal>
 
   </div>
@@ -163,7 +165,7 @@ async function selectPage(id: string) {
     const data = await $api(`/api/wiki/${id}`, { method: 'GET' })
     selectedPage.value = data
   } catch (e) {
-    toast.add({ title: 'Fehler beim Laden', color: 'red' })
+    toast.add({ title: 'Fehler beim Laden', color: 'error' })
   } finally {
     loadingContent.value = false
   }
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index cb43079..6281786 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -272,7 +272,7 @@ onMounted(() => {
           <template #footer="{ collapsed }">
             <div class="flex flex-col gap-3">
               <div class="flex items-center gap-2">
-                <UColorModeToggle :class="[collapsed ? 'mx-auto' : 'ml-3']"/>
+                <UColorModeSwitch :class="[collapsed ? 'mx-auto' : 'ml-3']"/>
                 <UDashboardSidebarCollapse v-if="collapsed" class="mx-auto" />
               </div>
 
diff --git a/frontend/pages/accounting/tax.vue b/frontend/pages/accounting/tax.vue
index c163658..169efbe 100644
--- a/frontend/pages/accounting/tax.vue
+++ b/frontend/pages/accounting/tax.vue
@@ -256,31 +256,31 @@ onMounted(loadData)
             :columns="normalizeTableColumns(columns)"
             :data="periods"
             :loading="loading"
-            :empty-state="{ icon: 'i-heroicons-calculator', label: 'Keine Daten für die USt-Auswertung vorhanden' }"
+            :empty="{ icon: 'i-heroicons-calculator', label: 'Keine Daten für die USt-Auswertung vorhanden' }"
         >
-          <template #label-data="{ row }">
+          <template #label-cell="{ row }">
             <div class="flex items-center gap-2">
-              <span>{{ row.label }}</span>
-              <UBadge v-if="row.isCurrent" color="primary" variant="soft">Aktuell</UBadge>
+              <span>{{ row.original.label }}</span>
+              <UBadge v-if="row.original.isCurrent" color="primary" variant="soft">Aktuell</UBadge>
             </div>
           </template>
 
-          <template #outputTax-data="{ row }">
-            {{ formatCurrency(row.outputTax) }}
+          <template #outputTax-cell="{ row }">
+            {{ formatCurrency(row.original.outputTax) }}
           </template>
 
-          <template #inputTax-data="{ row }">
-            {{ formatCurrency(row.inputTax) }}
+          <template #inputTax-cell="{ row }">
+            {{ formatCurrency(row.original.inputTax) }}
           </template>
 
-          <template #balance-data="{ row }">
-            <span :class="row.balance >= 0 ? 'text-amber-600 dark:text-amber-400 font-medium' : 'text-emerald-600 dark:text-emerald-400 font-medium'">
-              {{ formatCurrency(row.balance) }}
+          <template #balance-cell="{ row }">
+            <span :class="row.original.balance >= 0 ? 'text-amber-600 dark:text-amber-400 font-medium' : 'text-emerald-600 dark:text-emerald-400 font-medium'">
+              {{ formatCurrency(row.original.balance) }}
             </span>
           </template>
 
-          <template #documents-data="{ row }">
-            {{ row.outputCount }} / {{ row.inputCount }}
+          <template #documents-cell="{ row }">
+            {{ row.original.outputCount }} / {{ row.original.inputCount }}
           </template>
         </UTable>
       </UCard>
diff --git a/frontend/pages/accounts/index.vue b/frontend/pages/accounts/index.vue
index 607176f..52ec3ef 100644
--- a/frontend/pages/accounts/index.vue
+++ b/frontend/pages/accounts/index.vue
@@ -198,16 +198,16 @@ setupPage()
       :columns="normalizeTableColumns(columns)"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(`/accounts/show/${i.id}`)"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+      :on-select="(i) => router.push(`/accounts/show/${i.id}`)"
+      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
   >
-    <template #allocations-data="{row}">
-        <span v-if="dataLoaded">{{row.allocations ? row.allocations : null}}</span>
+    <template #allocations-cell="{row}">
+        <span v-if="dataLoaded">{{row.original.allocations ? row.original.allocations : null}}</span>
       <USkeleton v-else class="h-4 w-[250px]" />
 
     </template>
-    <template #saldo-data="{row}">
-      <span v-if="dataLoaded">{{row.allocations ? useCurrency(row.saldo) : null}}</span>
+    <template #saldo-cell="{row}">
+      <span v-if="dataLoaded">{{row.original.allocations ? useCurrency(row.original.saldo) : null}}</span>
       <USkeleton v-else class="h-4 w-[250px]" />
     </template>
   </UTable>
diff --git a/frontend/pages/accounts/show/[id].vue b/frontend/pages/accounts/show/[id].vue
index 4fcce38..ea113b6 100644
--- a/frontend/pages/accounts/show/[id].vue
+++ b/frontend/pages/accounts/show/[id].vue
@@ -106,7 +106,7 @@ const saldo = computed(() => {
   </UDashboardNavbar>
   <UDashboardPanelContent>
     <UTabs :items="[{label: 'Information'},{label: 'Buchungen'}]">
-      <template #item="{item}">
+      <template #content="{item}">
         <UCard class="mt-5" v-if="item.label === 'Information'">
           <div class="text-wrap">
             <table class="w-full" v-if="itemInfo">
@@ -139,19 +139,19 @@ const saldo = computed(() => {
               v-if="statementallocations"
             :data="renderedAllocations"
               :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
-              @select="(i) => selectAllocation(i)"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+              :on-select="(i) => selectAllocation(i)"
+              :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
           >
-            <template #amount-data="{row}">
-              <span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span>
-              <span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span>
-              <span v-else>{{useCurrency(row.amount)}}</span>
+            <template #amount-cell="{row}">
+              <span class="text-right text-rose-600" v-if="row.original.amount < 0 || row.original.color === 'red'">{{useCurrency(row.original.amount)}}</span>
+              <span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{useCurrency(row.original.amount)}}</span>
+              <span v-else>{{useCurrency(row.original.amount)}}</span>
             </template>
-            <template #date-data="{row}">
-              {{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
+            <template #date-cell="{row}">
+              {{row.original.date ? dayjs(row.original.date).format('DD.MM.YYYY') : ''}}
             </template>
-            <template #description-data="{row}">
-              {{row.description ? row.description : ''}}
+            <template #description-cell="{row}">
+              {{row.original.description ? row.original.description : ''}}
             </template>
           </UTable>
         </UCard>
diff --git a/frontend/pages/banking/index.vue b/frontend/pages/banking/index.vue
index ff6b928..ad33821 100644
--- a/frontend/pages/banking/index.vue
+++ b/frontend/pages/banking/index.vue
@@ -602,16 +602,17 @@ onMounted(() => {
   <PageLeaveGuard :when="isSyncing"/>
 
   <UModal v-model:open="suggestionsModalOpen" :ui="{ width: 'sm:max-w-6xl' }">
-    <UCard>
-      <template #header>
-        <div class="flex items-center justify-between gap-3">
-          <div>
-            <div class="text-lg font-semibold">Vorschlaege fuer Bankbuchungen</div>
-            <div class="text-sm text-gray-500">Direkte Zuweisung von passenden Rechnungen und Eingangsbelegen</div>
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <div class="text-lg font-semibold">Vorschlaege fuer Bankbuchungen</div>
+              <div class="text-sm text-gray-500">Direkte Zuweisung von passenden Rechnungen und Eingangsbelegen</div>
+            </div>
+            <UBadge color="primary" variant="subtle">{{ suggestionCount }}</UBadge>
           </div>
-          <UBadge color="primary" variant="subtle">{{ suggestionCount }}</UBadge>
-        </div>
-      </template>
+        </template>
 
       <div v-if="rowsWithSuggestions.length > 0" class="grid grid-cols-1 lg:grid-cols-3 gap-4 min-h-[520px]">
         <div class="lg:col-span-1 border rounded-lg overflow-hidden dark:border-gray-800">
@@ -701,10 +702,11 @@ onMounted(() => {
         </div>
       </div>
 
-      <div v-else class="py-10 text-center text-gray-400">
-        <UIcon name="i-heroicons-sparkles" class="w-10 h-10 mx-auto mb-2 opacity-30"/>
-        <p>Keine Vorschlaege fuer die aktuelle Filterung vorhanden.</p>
-      </div>
-    </UCard>
+        <div v-else class="py-10 text-center text-gray-400">
+          <UIcon name="i-heroicons-sparkles" class="w-10 h-10 mx-auto mb-2 opacity-30"/>
+          <p>Keine Vorschlaege fuer die aktuelle Filterung vorhanden.</p>
+        </div>
+      </UCard>
+    </template>
   </UModal>
 </template>
diff --git a/frontend/pages/banking/statements/[mode]/[[id]].vue b/frontend/pages/banking/statements/[mode]/[[id]].vue
index e6d3da4..a0a691b 100644
--- a/frontend/pages/banking/statements/[mode]/[[id]].vue
+++ b/frontend/pages/banking/statements/[mode]/[[id]].vue
@@ -571,14 +571,14 @@ setup()
             class="p-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm shrink-0 z-10">
           <div class="grid grid-cols-12 gap-4 items-end">
             <div class="col-span-12 md:col-span-3">
-              <UFormGroup label="Betrag" size="sm">
+              <UFormField label="Betrag" size="sm">
                 <UInput v-model="manualAllocationSum" type="number" step="0.01">
                   <template #trailing><span class="text-gray-500 text-xs">EUR</span></template>
                 </UInput>
-              </UFormGroup>
+              </UFormField>
             </div>
             <div class="col-span-12 md:col-span-5">
-              <UFormGroup label="Konto / Manuelle Buchung" size="sm">
+              <UFormField label="Konto / Manuelle Buchung" size="sm">
                 <div class="flex gap-1">
                   <USelectMenu
                       class="w-full"
@@ -607,7 +607,7 @@ setup()
                     />
                   </UTooltip>
                 </div>
-              </UFormGroup>
+              </UFormField>
             </div>
             <div class="col-span-12 md:col-span-4 flex justify-end gap-2 pb-0.5">
               <UButton variant="soft" color="gray" icon="i-heroicons-adjustments-horizontal"
diff --git a/frontend/pages/createDocument/edit/[[id]].vue b/frontend/pages/createDocument/edit/[[id]].vue
index eb8d4e9..5e4ba57 100644
--- a/frontend/pages/createDocument/edit/[[id]].vue
+++ b/frontend/pages/createDocument/edit/[[id]].vue
@@ -1283,7 +1283,9 @@ const generateDocument = async () => {
 }
 
 const onChangeTab = (index) => {
-  if (index === 1) {
+  selectedTab.value = String(index)
+
+  if (String(index) === "1") {
     generateDocument()
   }
 }
@@ -1441,13 +1443,13 @@ const saveDocument = async (state, resetup = false) => {
   if (resetup) await setupPage()
 }
 
-const selectedTab = ref(0)
+const selectedTab = ref("0")
 
 const closeDocument = async () => {
 
-  if(selectedTab.value === 0) {
+  if(selectedTab.value === "0") {
     await generateDocument()
-    selectedTab.value = 1
+    selectedTab.value = "1"
   } else {
     loaded.value = false
 
@@ -1628,7 +1630,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
           @click="closeDocument"
           v-if="itemInfo.id && itemInfo.type !== 'serialInvoices'"
       >
-        {{selectedTab === 0 ? "Vorschau zeigen" : "Fertigstellen"}}
+        {{selectedTab === '0' ? "Vorschau zeigen" : "Fertigstellen"}}
       </UButton>
       <UButton
           icon="i-mdi-content-save"
@@ -1640,8 +1642,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
     </template>
   </UDashboardNavbar>
   <UDashboardPanelContent>
-    <UTabs class="p-5" :items="tabItems" @change="onChangeTab" v-if="loaded" v-model="selectedTab">
-      <template #item="{item}">
+    <UTabs class="p-5" :items="tabItems" @update:model-value="onChangeTab" v-if="loaded" v-model="selectedTab">
+      <template #content="{item}">
         <div v-if="item.label === 'Editor'">
           <UAlert
               class="my-5"
@@ -1664,7 +1666,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
           <InputGroup>
             <div class="w-1/3 mr-5">
-              <UFormGroup
+              <UFormField
                   label="Dokumenttyp:"
               >
                 <InputGroup>
@@ -1689,14 +1691,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 </InputGroup>
 
                 <USlideover
-                    v-model="showAdvanceInvoiceCalcModal"
+                    v-model:open="showAdvanceInvoiceCalcModal"
                 >
-                  <UCard class="h-full">
-                    <template #header>
-                      <UButton @click="importPositions">Übernehmen</UButton>
-                    </template>
+                  <template #body>
+                    <UCard class="h-full">
+                      <template #header>
+                        <UButton @click="importPositions">Übernehmen</UButton>
+                      </template>
 
-                    <UFormGroup
+                    <UFormField
                         label="Gesamtsumme:"
                     >
                       <UInput
@@ -1705,8 +1708,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           v-model="advanceInvoiceData.totalSumNet"
                           @focusout="advanceInvoiceData.part = advanceInvoiceData.totalSumNet / 100 * advanceInvoiceData.partPerPecentage"
                       />
-                    </UFormGroup>
-                    <UFormGroup
+                    </UFormField>
+                    <UFormField
                         label="Prozent:"
                     >
                       <UInput
@@ -1715,27 +1718,26 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           v-model="advanceInvoiceData.partPerPecentage"
                           @focusout="advanceInvoiceData.part = advanceInvoiceData.totalSumNet / 100 * advanceInvoiceData.partPerPecentage"
                       />
-                    </UFormGroup>
+                    </UFormField>
 
-                    <UFormGroup
-                        label="Abzurechnender Anteil:"
-                    >
-                      <UInput
-                          type="number"
-                          :step="0.01"
-                          v-model="advanceInvoiceData.part"
-                          @focusout="advanceInvoiceData.partPerPecentage = Number((advanceInvoiceData.part / advanceInvoiceData.totalSumNet * 100).toFixed(2))"
-                      />
-                    </UFormGroup>
-
-
-                  </UCard>
+                      <UFormField
+                          label="Abzurechnender Anteil:"
+                      >
+                        <UInput
+                            type="number"
+                            :step="0.01"
+                            v-model="advanceInvoiceData.part"
+                            @focusout="advanceInvoiceData.partPerPecentage = Number((advanceInvoiceData.part / advanceInvoiceData.totalSumNet * 100).toFixed(2))"
+                        />
+                      </UFormField>
+                    </UCard>
+                  </template>
 
                 </USlideover>
 
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup
+              <UFormField
                   label="Steuertyp:"
                   v-if="['invoices','advanceInvoices','quotes','confirmationOrders','serialInvoices'].includes(itemInfo.type)"
               >
@@ -1747,9 +1749,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     @change="setTaxType"
                     class="w-full"
                 ></USelectMenu>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup
+              <UFormField
                   label="Briefpapier:"
               >
                 <USelectMenu
@@ -1767,9 +1769,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     {{ itemInfo.letterhead ? letterheads.find(i => i.id === itemInfo.letterhead).name : "Kein Briefpapier gewählt" }}
                   </template>
                 </USelectMenu>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup
+              <UFormField
                   label="Kunde:"
               >
                 <div class="flex flex-row">
@@ -1860,8 +1862,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
                 </UAlert>
 
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Ansprechpartner:"
                   v-if="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).isCompany : false "
               >
@@ -1915,9 +1917,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
                 </InputGroup>
 
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup
+              <UFormField
                   label="Adresse:"
               >
                 <UInput
@@ -1949,10 +1951,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       :color="itemInfo.address.city ? 'primary' : 'error'"
                   />
                 </InputGroup>
-              </UFormGroup>
+              </UFormField>
             </div>
             <div class="w-2/3">
-              <UFormGroup
+              <UFormField
                   :label="itemInfo.documentNumberTitle + ':'"
                   v-if="itemInfo.type !== 'serialInvoices'"
               >
@@ -1961,10 +1963,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     placeholder="XXXX"
                     disabled
                 />
-              </UFormGroup>
+              </UFormField>
 
               <InputGroup class="w-full">
-                <UFormGroup
+                <UFormField
                     class="w-80 mr-1"
                     label="Lieferdatumsart:"
                     v-if="itemInfo.type !== 'serialInvoices'"
@@ -1975,8 +1977,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
 
 
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     :label="`${itemInfo.deliveryDateType}${['Lieferzeitraum', 'Leistungszeitraum'].includes(itemInfo.deliveryDateType) ? ' Start' : ''}:`"
                     v-if="itemInfo.type !== 'serialInvoices' && itemInfo.deliveryDateType !== 'Kein Lieferdatum anzeigen'"
                     class="mr-1"
@@ -1994,8 +1996,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     </template>
                   </UPopover>
 
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     :label="itemInfo.deliveryDateType + ' Ende:'"
                     v-if="itemInfo.type !== 'serialInvoices' && ['Lieferzeitraum','Leistungszeitraum'].includes(itemInfo.deliveryDateType)"
                 >
@@ -2012,11 +2014,11 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <LazyDatePicker v-model="itemInfo.deliveryDateEnd" @close="close"/>
                     </template>
                   </UPopover>
-                </UFormGroup>
+                </UFormField>
               </InputGroup>
 
               <InputGroup class="w-full">
-                <UFormGroup
+                <UFormField
                     label="Belegdatum:"
                     class="mr-1"
                     v-if="itemInfo.type !== 'serialInvoices'"
@@ -2032,10 +2034,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <LazyDatePicker v-model="itemInfo.documentDate" @close="close"/>
                     </template>
                   </UPopover>
-                </UFormGroup>
+                </UFormField>
 
 
-                <UFormGroup
+                <UFormField
                     class="w-full"
                     label="Zahlungsziel in Tagen:"
                 >
@@ -2043,8 +2045,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       type="number"
                       v-model="itemInfo.paymentDays"
                   />
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     class="w-full"
                     label="Zahlungsart:"
                 >
@@ -2066,8 +2068,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       {{itemInfo.payment_type === 'transfer' ? "Überweisung" : "SEPA-Lastschrift"}}
                     </template>
                   </USelectMenu>
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     class="w-full"
                     label="Individueller Aufschlag:"
                 >
@@ -2081,9 +2083,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
                     </template>
                   </UInput>
-                </UFormGroup>
+                </UFormField>
               </InputGroup>
-              <UFormGroup
+              <UFormField
                   label="Mitarbeiter:"
               >
                 <USelectMenu
@@ -2093,22 +2095,22 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     value-attribute="id"
                     @change="setContactPersonData"
                 />
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Kontakt Telefon:"
               >
                 <UInput
                     v-model="itemInfo.contactTel"
                 />
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Kontakt E-Mail:"
               >
                 <UInput
                     v-model="itemInfo.contactEMail"
                 />
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Objekt:"
               >
                 <InputGroup>
@@ -2145,8 +2147,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
                 </InputGroup>
 
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Projekt:"
               >
                 <InputGroup>
@@ -2184,8 +2186,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
                 </InputGroup>
 
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Vertrag:"
               >
                 <InputGroup>
@@ -2223,7 +2225,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
                 </InputGroup>
 
-              </UFormGroup>
+              </UFormField>
 
             </div>
           </InputGroup>
@@ -2235,7 +2237,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
             <div class="flex flex-row">
               <div class="w-1/3">
-                <UFormGroup
+                <UFormField
                     label="Datum erste Ausführung:"
                 >
                   <UPopover :popper="{ placement: 'bottom-start' }">
@@ -2249,8 +2251,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <LazyDatePicker v-model="itemInfo.serialConfig.firstExecution" @close="close"/>
                     </template>
                   </UPopover>
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     label="Datum letzte Ausführung:"
                 >
                   <UPopover :popper="{ placement: 'bottom-start' }">
@@ -2264,7 +2266,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <LazyDatePicker v-model="itemInfo.serialConfig.executionUntil" @close="close"/>
                     </template>
                   </UPopover>
-                </UFormGroup>
+                </UFormField>
                 <UCheckbox
                     v-model="itemInfo.serialConfig.active"
                     label="Aktiv"
@@ -2273,22 +2275,22 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
               </div>
               <div class="w-2/3">
-                <UFormGroup
+                <UFormField
                     label="Intervall:"
                 >
                   <USelectMenu
                       v-model="itemInfo.serialConfig.intervall"
                       :options="['wöchentlich','2 - wöchentlich', 'monatlich', 'vierteljährlich','halbjährlich', 'jährlich']"
                   />
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     label="Richtung:"
                 >
                   <USelectMenu
                       v-model="itemInfo.serialConfig.dateDirection"
                       :options="['Rückwirkend','Im Voraus']"
                   />
-                </UFormGroup>
+                </UFormField>
                 <UAlert
                     title="Anfangs- und Enddatum"
                     description="Für das Anfangs- und Enddatum werden jeweils der ersten und letzte Tag des ausgewählten Intervalls und der Richtung automatisch ausgewählt"
@@ -2305,23 +2307,23 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               class="my-3"
           />
 
-          <UFormGroup
+          <UFormField
               label="Titel:"
           >
             <UInput v-model="itemInfo.title" disabled/>
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Beschreibung:"
               class="mt-3"
           >
             <UInput v-model="itemInfo.description"/>
-          </UFormGroup>
+          </UFormField>
 
           <USeparator
               class="my-3"
           />
 
-          <UFormGroup
+          <UFormField
               label="Vorlage auswählen"
           >
             <USelectMenu
@@ -2337,17 +2339,17 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 {{ texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert" }}
               </template>
             </USelectMenu>
-          </UFormGroup>
+          </UFormField>
 
 
-          <UFormGroup
+          <UFormField
               label="Einleitung:"
           >
             <UTextarea
                 v-model="itemInfo.startText"
                 :rows="6"
             />
-          </UFormGroup>
+          </UFormField>
 
 
           <USeparator
@@ -2460,7 +2462,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                 </template>
 
                                                 <InputGroup class="w-full">
-                                                  <UFormGroup label="Artikelkategorie:">
+                                                  <UFormField label="Artikelkategorie:">
                                                     <USelectMenu
                                                         v-if="productcategories.length > 0"
                                                         :options="[{name: 'Nicht zugeordnet',id:'not set'},...productcategories]"
@@ -2468,7 +2470,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                         option-attribute="name"
                                                         v-model="selectedProductcategorie"
                                                     />
-                                                  </UFormGroup>
+                                                  </UFormField>
                                                 </InputGroup>
                                                 <UTable
                                                     :rows="selectedProductcategorie !== 'not set' ? products.filter(i => i.productcategories.includes(selectedProductcategorie)) : products.filter(i => i.productcategories.length === 0)"
@@ -2532,7 +2534,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                 </template>
 
                                                 <InputGroup class="w-full">
-                                                  <UFormGroup label="Leistungskategorie:">
+                                                  <UFormField label="Leistungskategorie:">
                                                     <USelectMenu
                                                         v-if="servicecategories.length > 0"
                                                         :options="[{name: 'Nicht zugeordnet',id:'not set'},...servicecategories]"
@@ -2540,7 +2542,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                         option-attribute="name"
                                                         v-model="selectedServicecategorie"
                                                     />
-                                                  </UFormGroup>
+                                                  </UFormField>
                                                 </InputGroup>
                                                 <UTable
                                                     :rows="selectedServicecategorie !== 'not set' ? services.filter(i => i.servicecategories.includes(selectedServicecategorie)) : services.filter(i => i.servicecategories.length === 0)"
@@ -2671,7 +2673,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                         @click="row.showEditDiesel = true"
                     />
                     <UModal v-model:open="row.showEdit">
-                      <UCard>
+                      <template #content>
+                        <UCard>
                         <!--                        <template #header>
                                                   Zeile bearbeiten
                                                 </template>-->
@@ -2685,7 +2688,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           </div>
                         </template>
                         <InputGroup>
-                          <UFormGroup
+                          <UFormField
                               label="Anzahl:"
                               class="flex-auto"
                           >
@@ -2695,8 +2698,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                 :step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : '1' "
 
                             />
-                          </UFormGroup>
-                          <UFormGroup
+                          </UFormField>
+                          <UFormField
                               label="Einheit:"
                               class="flex-auto"
                           >
@@ -2711,10 +2714,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                 {{ units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).name : "Keine Einheit gewählt" }}
                               </template>
                             </USelectMenu>
-                          </UFormGroup>
+                          </UFormField>
                         </InputGroup>
 
-                        <UFormGroup
+                        <UFormField
                             label="Einzelpreis:"
                             v-if="itemInfo.type !== 'deliveryNotes'"
                         >
@@ -2743,8 +2746,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                   class="text-gray-500 dark:text-gray-400 text-xs"> </span>
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <UFormGroup
+                        </UFormField>
+                        <UFormField
                             label="Umsatzsteuer:"
                             class="mt-3"
                             v-if="itemInfo.type !== 'deliveryNotes'"
@@ -2761,9 +2764,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               {{ row.taxPercent }} %
                             </template>
                           </USelectMenu>
-                        </UFormGroup>
+                        </UFormField>
 
-                        <UFormGroup
+                        <UFormField
                             label="Rabatt:"
                             class="mt-3"
                             v-if="itemInfo.type !== 'deliveryNotes'"
@@ -2778,25 +2781,25 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
                             </template>
                           </UInput>
-                        </UFormGroup>
+                        </UFormField>
                         <InputGroup class="w-full mt-3">
-                          <UFormGroup
+                          <UFormField
                               label="Optional:"
                           >
-                            <UToggle
+                            <USwitch
                                 :disabled="row.alternative"
                                 v-model="row.optional"
                             />
-                          </UFormGroup>
-                          <UFormGroup
+                          </UFormField>
+                          <UFormField
                               class="ml-3"
                               label="Alternativ:"
                           >
-                            <UToggle
+                            <USwitch
                                 :disabled="row.optional"
                                 v-model="row.alternative"
                             />
-                          </UFormGroup>
+                          </UFormField>
                         </InputGroup>
 
                         <UAlert
@@ -2819,7 +2822,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           </li>
                         </ul>
 
-                        <UFormGroup
+                        <UFormField
                             label="Beschreibung:"
                             class="mt-3"
                         >
@@ -2829,7 +2832,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           >
 
                           </UTextarea>
-                        </UFormGroup>
+                        </UFormField>
 
                         <!--                        <template #footer>
                                                   <UButton
@@ -2838,16 +2841,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                     Speichern
                                                   </UButton>
                                                 </template>-->
-                      </UCard>
-
-
+                        </UCard>
+                      </template>
                     </UModal>
                     <UModal v-model:open="row.showEditDiesel">
-                      <UCard>
-                        <template #header>
-                          Dieselverbrauch bearbeiten
-                        </template>
-                        <UFormGroup
+                      <template #content>
+                        <UCard>
+                          <template #header>
+                            Dieselverbrauch bearbeiten
+                          </template>
+                        <UFormField
                             label="Menge Diesel:"
                         >
                           <UInput
@@ -2861,8 +2864,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               L
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <UFormGroup
+                        </UFormField>
+                        <UFormField
                             label="Preis Diesel:"
                         >
                           <UInput
@@ -2875,8 +2878,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               €/L
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <UFormGroup
+                        </UFormField>
+                        <UFormField
                             label="Menge AdBlue:"
                         >
                           <UInput
@@ -2888,8 +2891,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               L
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <UFormGroup
+                        </UFormField>
+                        <UFormField
                             label="Preis AdBlue:"
                         >
                           <UInput
@@ -2901,18 +2904,17 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               €/L
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <template #footer>
-                          <UButton
-                              @click="row.showEditDiesel = false,
-                                      processDieselPosition()"
-                          >
-                            Speichern
-                          </UButton>
-                        </template>
-                      </UCard>
-
-
+                        </UFormField>
+                          <template #footer>
+                            <UButton
+                                @click="row.showEditDiesel = false,
+                                        processDieselPosition()"
+                            >
+                              Speichern
+                            </UButton>
+                          </template>
+                        </UCard>
+                      </template>
                     </UModal>
                   </td>
                   <td
@@ -3155,7 +3157,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               class="my-3"
           />
 
-          <UFormGroup
+          <UFormField
               label="Vorlage auswählen"
           >
             <USelectMenu
@@ -3171,16 +3173,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 {{texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert"}}
               </template>
             </USelectMenu>
-          </UFormGroup>
+          </UFormField>
 
-          <UFormGroup
+          <UFormField
               label="Nachbemerkung:"
           >
             <UTextarea
                 v-model="itemInfo.endText"
                 :rows="6"
             />
-          </UFormGroup>
+          </UFormField>
         </div>
         <div v-else-if="item.label === 'Vorschau'">
           <PDFViewer
diff --git a/frontend/pages/createDocument/index.vue b/frontend/pages/createDocument/index.vue
index 9bbe884..d933c5f 100644
--- a/frontend/pages/createDocument/index.vue
+++ b/frontend/pages/createDocument/index.vue
@@ -55,82 +55,82 @@
         {{ getRowsForTab(item.key).length }}
       </UBadge>
     </template>
-    <template #item="{item}">
+    <template #content="{item}">
       <div style="height: 80vh; overflow-y: scroll">
         <UTable
             :columns="normalizeTableColumns(getColumnsForTab(item.key))"
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
             :data="getRowsForTab(item.key)"
             :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
             class="w-full"
-            @select="selectItem"
+            :on-select="selectItem"
         >
-          <template #type-data="{row}">
-            <span v-if="row.type === 'cancellationInvoices'" class="text-cyan-500">{{
-                dataStore.documentTypesForCreation[row.type].labelSingle
-              }} für {{ filteredRows.find(i => row.createddocument?.id === i.id)?.documentNumber }}</span>
-            <span v-else>{{ dataStore.documentTypesForCreation[row.type].labelSingle }}</span>
+          <template #type-cell="{row}">
+            <span v-if="row.original.type === 'cancellationInvoices'" class="text-cyan-500">{{
+                dataStore.documentTypesForCreation[row.original.type].labelSingle
+              }} für {{ filteredRows.find(i => row.original.createddocument?.id === i.id)?.documentNumber }}</span>
+            <span v-else>{{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}</span>
           </template>
 
-          <template #state-data="{row}">
-            <span v-if="row.state === 'Entwurf'" class="text-rose-500">{{ row.state }}</span>
+          <template #state-cell="{row}">
+            <span v-if="row.original.state === 'Entwurf'" class="text-rose-500">{{ row.original.state }}</span>
             <span
-                v-if="row.state === 'Gebucht' && !hasCancellationInvoice(row)"
+                v-if="row.original.state === 'Gebucht' && !hasCancellationInvoice(row.original)"
                 class="text-primary-500"
             >
-              {{ row.state }}
+              {{ row.original.state }}
             </span>
             <span
-                v-else-if="row.state === 'Gebucht' && hasCancellationInvoice(row) && ['invoices','advanceInvoices'].includes(row.type)"
+                v-else-if="row.original.state === 'Gebucht' && hasCancellationInvoice(row.original) && ['invoices','advanceInvoices'].includes(row.original.type)"
                 class="text-cyan-500"
             >
-              Storniert mit {{ getCancellationInvoice(row)?.documentNumber }}
+              Storniert mit {{ getCancellationInvoice(row.original)?.documentNumber }}
             </span>
-            <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{ row.state }}</span>
+            <span v-else-if="row.original.state === 'Gebucht'" class="text-primary-500">{{ row.original.state }}</span>
           </template>
 
-          <template #partner-data="{row}">
-            <span v-if="row.customer && row.customer.name.length < 21">{{ row.customer ? row.customer.name : "" }}</span>
-            <UTooltip v-else-if="row.customer && row.customer.name.length > 20" :text="row.customer.name">
-              {{ row.customer.name.substring(0, 20) }}...
+          <template #partner-cell="{row}">
+            <span v-if="row.original.customer && row.original.customer.name.length < 21">{{ row.original.customer ? row.original.customer.name : "" }}</span>
+            <UTooltip v-else-if="row.original.customer && row.original.customer.name.length > 20" :text="row.original.customer.name">
+              {{ row.original.customer.name.substring(0, 20) }}...
             </UTooltip>
           </template>
 
-          <template #reference-data="{row}">
-            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.documentNumber }}</span>
-            <span v-else>{{ row.documentNumber }}</span>
+          <template #reference-cell="{row}">
+            <span v-if="row.original === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.original.documentNumber }}</span>
+            <span v-else>{{ row.original.documentNumber }}</span>
           </template>
 
-          <template #date-data="{row}">
-            <span v-if="row.date">{{ row.date ? dayjs(row.date).format("DD.MM.YY") : '' }}</span>
-            <span v-if="row.documentDate">{{ row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : '' }}</span>
+          <template #date-cell="{row}">
+            <span v-if="row.original.date">{{ row.original.date ? dayjs(row.original.date).format("DD.MM.YY") : '' }}</span>
+            <span v-if="row.original.documentDate">{{ row.original.documentDate ? dayjs(row.original.documentDate).format("DD.MM.YY") : '' }}</span>
           </template>
 
-          <template #dueDate-data="{row}">
+          <template #dueDate-cell="{row}">
              <span
-                 v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !hasCancellationInvoice(row)"
-                 :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' "
+                 v-if="row.original.state === 'Gebucht' && row.original.paymentDays && ['invoices','advanceInvoices'].includes(row.original.type) && !hasCancellationInvoice(row.original)"
+                 :class="dayjs(row.original.documentDate).add(row.original.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row.original) ? ['text-rose-500'] : '' "
              >
-               {{ row.documentDate ? dayjs(row.documentDate).add(row.paymentDays, 'day').format("DD.MM.YY") : '' }}
+               {{ row.original.documentDate ? dayjs(row.original.documentDate).add(row.original.paymentDays, 'day').format("DD.MM.YY") : '' }}
              </span>
           </template>
 
-          <template #paid-data="{row}">
+          <template #paid-cell="{row}">
             <div
-                v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !hasCancellationInvoice(row)">
-              <span v-if="useSum().getIsPaid(row,items)" class="text-primary-500">Bezahlt</span>
+                v-if="(row.original.type === 'invoices' ||row.original.type === 'advanceInvoices') && row.original.state === 'Gebucht' && !hasCancellationInvoice(row.original)">
+              <span v-if="useSum().getIsPaid(row.original,items)" class="text-primary-500">Bezahlt</span>
               <span v-else class="text-rose-600">Offen</span>
             </div>
           </template>
 
-          <template #amount-data="{row}">
-            <span v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</span>
+          <template #amount-cell="{row}">
+            <span v-if="row.original.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row.original, items)) }}</span>
           </template>
 
-          <template #amountOpen-data="{row}">
+          <template #amountOpen-cell="{row}">
             <span
-                v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !hasCancellationInvoice(row) && !useSum().getIsPaid(row,items) ">
-              {{ displayCurrency(useSum().getCreatedDocumentOpenAmount(row, items)) }}
+                v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.original.type) && row.original.state !== 'Entwurf' && !hasCancellationInvoice(row.original) && !useSum().getIsPaid(row.original,items) ">
+              {{ displayCurrency(useSum().getCreatedDocumentOpenAmount(row.original, items)) }}
             </span>
           </template>
         </UTable>
diff --git a/frontend/pages/createDocument/serialInvoice.vue b/frontend/pages/createDocument/serialInvoice.vue
index 6ad6e11..b6eba35 100644
--- a/frontend/pages/createDocument/serialInvoice.vue
+++ b/frontend/pages/createDocument/serialInvoice.vue
@@ -44,15 +44,15 @@
       <USelectMenu
           v-model="selectedFilters"
           icon="i-heroicons-adjustments-horizontal-solid"
-          :options="filterOptions"
-          option-attribute="name"
-          value-attribute="name"
+          :items="filterOptions"
+          label-key="name"
+          value-key="name"
           multiple
           class="hidden lg:block"
           :color="selectedFilters.length > 0 ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
       >
-        <template #label>
+        <template #default>
           Filter
         </template>
       </USelectMenu>
@@ -97,12 +97,12 @@
       :columns="normalizeTableColumns(columns)"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(row) => router.push(`/createDocument/edit/${row.id}`)"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+      :on-select="(row) => router.push(`/createDocument/edit/${row.id}`)"
+      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
   >
-    <template #actions-data="{ row }">
+    <template #actions-cell="{ row }">
       <div @click.stop>
-        <UDropdown :items="getActionItems(row)" :popper="{ placement: 'bottom-end' }">
+        <UDropdown :items="getActionItems(row.original)" :popper="{ placement: 'bottom-end' }">
           <UButton
               color="gray"
               variant="ghost"
@@ -112,51 +112,52 @@
       </div>
     </template>
 
-    <template #type-data="{row}">
-      {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+    <template #type-cell="{row}">
+      {{dataStore.documentTypesForCreation[row.original.type].labelSingle}}
     </template>
-    <template #partner-data="{row}">
-      <span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
+    <template #partner-cell="{row}">
+      <span v-if="row.original.customer">{{row.original.customer ? row.original.customer.name : ""}}</span>
 
     </template>
-    <template #amount-data="{row}">
-      {{displayCurrency(calculateDocSum(row))}}
+    <template #amount-cell="{row}">
+      {{displayCurrency(calculateDocSum(row.original))}}
     </template>
-    <template #serialConfig.active-data="{row}">
-      <span v-if="row.serialConfig.active" class="text-primary">Ja</span>
+    <template #serialConfig.active-cell="{row}">
+      <span v-if="row.original.serialConfig.active" class="text-primary">Ja</span>
       <span v-else class="text-rose-600">Nein</span>
     </template>
-    <template #contract-data="{row}">
-      <span v-if="row.contract">{{row.contract.contractNumber}} - {{row.contract.name}}</span>
+    <template #contract-cell="{row}">
+      <span v-if="row.original.contract">{{row.original.contract.contractNumber}} - {{row.original.contract.name}}</span>
     </template>
-    <template #serialConfig.intervall-data="{row}">
-      <span v-if="row.serialConfig?.intervall === 'monatlich'">Monatlich</span>
-      <span v-if="row.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
+    <template #serialConfig.intervall-cell="{row}">
+      <span v-if="row.original.serialConfig?.intervall === 'monatlich'">Monatlich</span>
+      <span v-if="row.original.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
     </template>
-    <template #payment_type-data="{row}">
-      <span v-if="row.payment_type === 'transfer'">Überweisung</span>
-      <span v-else-if="row.payment_type === 'direct-debit'">SEPA - Einzug</span>
+    <template #payment_type-cell="{row}">
+      <span v-if="row.original.payment_type === 'transfer'">Überweisung</span>
+      <span v-else-if="row.original.payment_type === 'direct-debit'">SEPA - Einzug</span>
     </template>
   </UTable>
 
   <UModal v-model:open="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
-    <UCard>
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Serienrechnungen manuell ausführen
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
-        </div>
-      </template>
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Serienrechnungen manuell ausführen
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
+          </div>
+        </template>
 
       <div class="space-y-4">
-        <UFormGroup label="Ausführungsdatum (Belegdatum)" help="Dieses Datum steuert auch den Leistungszeitraum (z.B. Vormonat bei 'Rückwirkend').">
+        <UFormField label="Ausführungsdatum (Belegdatum)" help="Dieses Datum steuert auch den Leistungszeitraum (z.B. Vormonat bei 'Rückwirkend').">
           <div class="flex items-center gap-2">
             <UInput type="date" v-model="executionDate" class="flex-1" />
             <UButton color="gray" variant="soft" label="Heute" @click="setExecutionDateToToday" />
           </div>
-        </UFormGroup>
+        </UFormField>
 
         <USeparator label="Vorlagen auswählen" />
 
@@ -172,9 +173,9 @@
 
             <USelectMenu
                 v-model="selectedExecutionIntervall"
-                :options="executionIntervallOptions"
-                option-attribute="label"
-                value-attribute="value"
+                :items="executionIntervallOptions"
+                label-key="label"
+                value-key="value"
                 size="sm"
                 class="w-full sm:w-52"
             />
@@ -208,20 +209,20 @@
               :columns="normalizeTableColumns(executionColumns)"
               :ui="{ th: { base: 'whitespace-nowrap' } }"
           >
-            <template #partner-data="{row}">
-              {{row.customer ? row.customer.name : "-"}}
+            <template #partner-cell="{row}">
+              {{row.original.customer ? row.original.customer.name : "-"}}
             </template>
-            <template #amount-data="{row}">
-              {{displayCurrency(calculateDocSum(row))}}
+            <template #amount-cell="{row}">
+              {{displayCurrency(calculateDocSum(row.original))}}
             </template>
-            <template #serialConfig.intervall-data="{row}">
-              {{ getIntervallLabel(row.serialConfig?.intervall) }}
+            <template #serialConfig.intervall-cell="{row}">
+              {{ getIntervallLabel(row.original.serialConfig?.intervall) }}
             </template>
-            <template #contract-data="{row}">
-              {{row.contract?.contractNumber}} - {{row.contract?.name}}
+            <template #contract-cell="{row}">
+              {{row.original.contract?.contractNumber}} - {{row.original.contract?.name}}
             </template>
-            <template #plant-data="{row}">
-              {{ row.plant?.name || "-" }}
+            <template #plant-cell="{row}">
+              {{ row.original.plant?.name || "-" }}
             </template>
           </UTable>
         </div>
@@ -231,58 +232,61 @@
         </div>
       </div>
 
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
-          <UButton
-              color="primary"
-              :loading="isExecuting"
-              :disabled="selectedExecutionRows.length === 0"
-              @click="executeSerialInvoices"
-          >
-            Jetzt ausführen
-          </UButton>
-        </div>
-      </template>
-    </UCard>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
+            <UButton
+                color="primary"
+                :loading="isExecuting"
+                :disabled="selectedExecutionRows.length === 0"
+                @click="executeSerialInvoices"
+            >
+              Jetzt ausführen
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 
   <USlideover v-model:open="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
-    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Alle Ausführungen
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
-        </div>
-      </template>
-
-      <div class="space-y-4 overflow-y-auto h-full p-1">
-        <div v-if="executionsLoading" class="flex justify-center py-4">
-          <UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 w-6 h-6" />
-        </div>
-
-        <div v-else-if="completedExecutions.length === 0" class="text-center text-gray-500 py-8">
-          Keine abgeschlossenen Ausführungen gefunden.
-        </div>
-
-        <div v-for="exec in completedExecutions" :key="exec.id" class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
-          <div class="flex justify-between items-start mb-2">
-            <span class="text-sm font-semibold">{{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</span>
-            <UBadge :color="getStatusColor(exec.status)" variant="subtle" size="xs">
-              {{ getStatusLabel(exec.status) }}
-            </UBadge>
+    <template #body>
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Alle Ausführungen
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
           </div>
-          <div class="text-xs text-gray-500 grid grid-cols-2 gap-2 mt-2">
-            <div>
-              <UIcon name="i-heroicons-check-circle" class="text-green-500 w-3 h-3 align-text-bottom" />
-              {{exec.summary}}
+        </template>
+
+        <div class="space-y-4 overflow-y-auto h-full p-1">
+          <div v-if="executionsLoading" class="flex justify-center py-4">
+            <UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 w-6 h-6" />
+          </div>
+
+          <div v-else-if="completedExecutions.length === 0" class="text-center text-gray-500 py-8">
+            Keine abgeschlossenen Ausführungen gefunden.
+          </div>
+
+          <div v-for="exec in completedExecutions" :key="exec.id" class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
+            <div class="flex justify-between items-start mb-2">
+              <span class="text-sm font-semibold">{{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</span>
+              <UBadge :color="getStatusColor(exec.status)" variant="subtle" size="xs">
+                {{ getStatusLabel(exec.status) }}
+              </UBadge>
+            </div>
+            <div class="text-xs text-gray-500 grid grid-cols-2 gap-2 mt-2">
+              <div>
+                <UIcon name="i-heroicons-check-circle" class="text-green-500 w-3 h-3 align-text-bottom" />
+                {{exec.summary}}
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </UCard>
+      </UCard>
+    </template>
   </USlideover>
 
 </template>
diff --git a/frontend/pages/createdletters/[mode]/[[id]].vue b/frontend/pages/createdletters/[mode]/[[id]].vue
index e595204..bf1aa4d 100644
--- a/frontend/pages/createdletters/[mode]/[[id]].vue
+++ b/frontend/pages/createdletters/[mode]/[[id]].vue
@@ -13,6 +13,7 @@ const itemInfo = ref({
 })
 const showDocument = ref(false)
 const uri = ref("")
+const openTab = ref("0")
 
 const setupPage = async () => {
   letterheads.value = await useEntities("letterheads").select("*")
@@ -23,7 +24,9 @@ const setupPage = async () => {
 setupPage()
 
 const onChangeTab = (index) => {
-  if(index === 1) {
+  openTab.value = String(index)
+
+  if(String(index) === "1") {
     generateDocument()
   }
 }
@@ -78,8 +81,8 @@ const contentChanged = (content) => {
   <UDashboardNavbar title="Anschreiben bearbeiten"/>
   {{itemInfo}}
   <UDashboardPanelContent>
-    <UTabs @change="onChangeTab" :items="[{label: 'Editor'},{label: 'Vorschau'}]">
-      <template #item="{item}">
+    <UTabs v-model="openTab" @update:model-value="onChangeTab" :items="[{label: 'Editor'},{label: 'Vorschau'}]">
+      <template #content="{item}">
         <div v-if="item.label === 'Editor'">
           <Tiptap
               class="mt-3"
diff --git a/frontend/pages/email/new.vue b/frontend/pages/email/new.vue
index 14685d4..f1fc943 100644
--- a/frontend/pages/email/new.vue
+++ b/frontend/pages/email/new.vue
@@ -210,34 +210,34 @@ const sendEmail = async () => {
 
       <div class="scrollContainer mt-3">
         <div class="flex-col flex w-full">
-          <UFormGroup
+          <UFormField
               label="Absender"
           >
             <USelectMenu
-                :options="emailAccounts"
-                option-attribute="email"
-                value-attribute="id"
+                :items="emailAccounts"
+                label-key="email"
+                value-key="id"
                 v-model="emailData.account"
             />
-          </UFormGroup>
+          </UFormField>
           <USeparator class="my-3"/>
-          <UFormGroup
+          <UFormField
               label="Empfänger"
           >
             <UInput
                 class="w-full my-1"
                 v-model="emailData.to"
             />
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Kopie"
           >
             <UInput
                 class="w-full my-1"
                 v-model="emailData.cc"
             />
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Blindkopie"
           >
             <UInput
@@ -245,15 +245,15 @@ const sendEmail = async () => {
                 placeholder=""
                 v-model="emailData.bcc"
             />
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Betreff"
           >
             <UInput
                 class="w-full my-1"
                 v-model="emailData.subject"
             />
-          </UFormGroup>
+          </UFormField>
         </div>
         <USeparator class="my-3"/>
         <div id="parentAttachments" class="flex flex-col justify-center mt-3">
diff --git a/frontend/pages/export/index.vue b/frontend/pages/export/index.vue
index 15bc47f..28bc97b 100644
--- a/frontend/pages/export/index.vue
+++ b/frontend/pages/export/index.vue
@@ -120,28 +120,29 @@ const createExport = async () => {
         { key: 'download', label: 'Download' },
       ])"
   >
-    <template #created_at-data="{row}">
-      {{dayjs(row.created_at).format("DD.MM.YYYY HH:mm")}}
+    <template #created_at-cell="{row}">
+      {{dayjs(row.original.created_at).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #start_date-data="{row}">
-      {{dayjs(row.start_date).format("DD.MM.YYYY HH:mm")}}
+    <template #start_date-cell="{row}">
+      {{dayjs(row.original.start_date).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #end_date-data="{row}">
-      {{dayjs(row.end_date).format("DD.MM.YYYY HH:mm")}}
+    <template #end_date-cell="{row}">
+      {{dayjs(row.original.end_date).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #valid_until-data="{row}">
-      {{dayjs(row.valid_until).format("DD.MM.YYYY HH:mm")}}
+    <template #valid_until-cell="{row}">
+      {{dayjs(row.original.valid_until).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #download-data="{row}">
-      <UButton @click="downloadFile(row)">Download</UButton>
+    <template #download-cell="{row}">
+      <UButton @click="downloadFile(row.original)">Download</UButton>
     </template>
   </UTable>
 
   <UModal v-model:open="showCreateExportModal">
-    <UCard>
-      <template #header>
-        Export erstellen
-      </template>
+    <template #content>
+      <UCard>
+        <template #header>
+          Export erstellen
+        </template>
 
       <div class="mb-6 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700">
         <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Schnellauswahl</div>
@@ -180,7 +181,7 @@ const createExport = async () => {
         </div>
       </div>
       <div class="flex gap-4">
-        <UFormGroup label="Start:" class="flex-1">
+        <UFormField label="Start:" class="flex-1">
           <UPopover :popper="{ placement: 'bottom-start' }">
             <UButton
                 icon="i-heroicons-calendar-days-20-solid"
@@ -192,9 +193,9 @@ const createExport = async () => {
               <LazyDatePicker v-model="createExportData.start_date" @close="close" />
             </template>
           </UPopover>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Ende:" class="flex-1">
+        <UFormField label="Ende:" class="flex-1">
           <UPopover :popper="{ placement: 'bottom-start' }">
             <UButton
                 icon="i-heroicons-calendar-days-20-solid"
@@ -206,18 +207,19 @@ const createExport = async () => {
               <LazyDatePicker v-model="createExportData.end_date" @close="close" />
             </template>
           </UPopover>
-        </UFormGroup>
+        </UFormField>
       </div>
 
-      <template #footer>
-        <div class="flex justify-end">
-          <UButton @click="createExport">
-            Erstellen
-          </UButton>
-        </div>
-      </template>
+        <template #footer>
+          <div class="flex justify-end">
+            <UButton @click="createExport">
+              Erstellen
+            </UButton>
+          </div>
+        </template>
 
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 
 </template>
diff --git a/frontend/pages/files/index.vue b/frontend/pages/files/index.vue
index 1aa9c69..527fc70 100644
--- a/frontend/pages/files/index.vue
+++ b/frontend/pages/files/index.vue
@@ -350,8 +350,8 @@ const syncdokubox = async () => {
       <UBreadcrumb :links="breadcrumbLinks"/>
     </template>
     <template #right>
-      <USelectMenu v-model="displayMode" :options="displayModes" value-attribute="key" class="w-32" :ui-menu="{ zIndex: 'z-50' }">
-        <template #label>
+      <USelectMenu v-model="displayMode" :items="displayModes" value-key="key" class="w-32" :content="{ zIndex: 'z-50' }">
+        <template #default>
           <UIcon :name="displayModes.find(i => i.key === displayMode).icon" class="w-4 h-4"/>
           <span>{{ displayModes.find(i => i.key === displayMode).label }}</span>
         </template>
@@ -454,29 +454,30 @@ const syncdokubox = async () => {
   </UDashboardPanelContent>
 
   <UModal v-model:open="createFolderModalOpen">
-    <UCard>
-      <template #header><h3 class="font-bold">Ordner erstellen</h3></template>
+    <template #content>
+      <UCard>
+        <template #header><h3 class="font-bold">Ordner erstellen</h3></template>
 
       <div class="space-y-4">
-        <UFormGroup label="Name" required>
+        <UFormField label="Name" required>
           <UInput v-model="createFolderData.name" autofocus @keyup.enter="createFolder"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup
+        <UFormField
             label="Standard Dateityp (Tag)"
             :help="isParentTypeMandatory ? 'Vom übergeordneten Ordner vorgegeben' : ''"
         >
           <USelectMenu
               v-model="createFolderData.standardFiletype"
-              :options="filetags"
-              value-attribute="id"
-              option-attribute="name"
+              :items="filetags"
+              value-key="id"
+              label-key="name"
               placeholder="Kein Standardtyp"
               searchable
               clear-search-on-close
               :disabled="isParentTypeMandatory"
           />
-        </UFormGroup>
+        </UFormField>
 
         <UCheckbox
             v-model="createFolderData.standardFiletypeIsOptional"
@@ -485,27 +486,30 @@ const syncdokubox = async () => {
         />
       </div>
 
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton>
-          <UButton color="primary" @click="createFolder">Erstellen</UButton>
-        </div>
-      </template>
-    </UCard>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton>
+            <UButton color="primary" @click="createFolder">Erstellen</UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 
   <UModal v-model:open="renameModalOpen">
-    <UCard>
-      <template #header><h3 class="font-bold">Umbenennen</h3></template>
-      <UFormGroup label="Neuer Name">
-        <UInput v-model="renameData.name" autofocus @keyup.enter="updateName"/>
-      </UFormGroup>
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton>
-          <UButton color="primary" @click="updateName">Speichern</UButton>
-        </div>
-      </template>
-    </UCard>
+    <template #content>
+      <UCard>
+        <template #header><h3 class="font-bold">Umbenennen</h3></template>
+        <UFormField label="Neuer Name">
+          <UInput v-model="renameData.name" autofocus @keyup.enter="updateName"/>
+        </UFormField>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton>
+            <UButton color="primary" @click="updateName">Speichern</UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 </template>
diff --git a/frontend/pages/incomingInvoices/[mode]/[id].vue b/frontend/pages/incomingInvoices/[mode]/[id].vue
index aa79a71..b2d25f5 100644
--- a/frontend/pages/incomingInvoices/[mode]/[id].vue
+++ b/frontend/pages/incomingInvoices/[mode]/[id].vue
@@ -330,7 +330,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
             </template>
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <UFormGroup label="Lieferant / Partner" class="md:col-span-2">
+              <UFormField label="Lieferant / Partner" class="md:col-span-2">
                 <div class="flex gap-2">
                   <USelectMenu
                       class="w-full"
@@ -365,37 +365,37 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                       @return-data="(data) => itemInfo.vendor = data.id"
                   />
                 </div>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Rechnungsnummer">
+              <UFormField label="Rechnungsnummer">
                 <UInput v-model="itemInfo.reference" icon="i-heroicons-hashtag" :disabled="mode === 'show'" />
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Zahlart">
+              <UFormField label="Zahlart">
                 <USelectMenu v-model="itemInfo.paymentType" :options="['Überweisung', 'Lastschrift', 'Kreditkarte', 'PayPal', 'Bar', 'Sonstiges']" :disabled="mode === 'show'" />
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Rechnungsdatum">
+              <UFormField label="Rechnungsdatum">
                 <UPopover :popper="{ placement: 'bottom-start' }">
                   <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
                   <template #panel="{ close }">
                     <LazyDatePicker v-model="itemInfo.date" @close="() => { if(!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date; close() }" />
                   </template>
                 </UPopover>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Fälligkeitsdatum">
+              <UFormField label="Fälligkeitsdatum">
                 <UPopover :popper="{ placement: 'bottom-start' }">
                   <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
                   <template #panel="{ close }">
                     <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
                   </template>
                 </UPopover>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Beschreibung / Notiz" class="md:col-span-2">
+              <UFormField label="Beschreibung / Notiz" class="md:col-span-2">
                 <UTextarea v-model="itemInfo.description" :rows="2" autoresize :disabled="mode === 'show'" />
-              </UFormGroup>
+              </UFormField>
             </div>
           </UCard>
 
@@ -404,7 +404,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
               <h3 class="font-semibold text-lg">Positionen</h3>
               <div class="flex items-center gap-2 text-sm">
                 <span :class="{'font-bold': !useNetMode, 'opacity-50': useNetMode}">Brutto</span>
-                <UToggle v-model="useNetMode" color="primary" :disabled="mode === 'show'" />
+                <USwitch v-model="useNetMode" color="primary" :disabled="mode === 'show'" />
                 <span :class="{'font-bold': useNetMode, 'opacity-50': !useNetMode}">Netto Eingabe</span>
               </div>
             </div>
@@ -428,7 +428,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
 
               <div class="grid grid-cols-12 gap-3">
                 <div class="col-span-12 md:col-span-6">
-                  <UFormGroup label="Konto / Kategorie">
+                  <UFormField label="Konto / Kategorie">
                     <USelectMenu
                         v-model="item.account"
                         :options="accounts"
@@ -446,11 +446,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                         {{ accounts.find(a => a.id === item.account)?.label || 'Auswählen' }}
                       </template>
                     </USelectMenu>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 md:col-span-6">
-                  <UFormGroup label="Kostenstelle">
+                  <UFormField label="Kostenstelle">
                     <USelectMenu
                         v-model="item.costCentre"
                         :options="costcentres"
@@ -464,11 +464,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                         {{ costcentres.find(c => c.id === item.costCentre)?.name || 'Keine' }}
                       </template>
                     </USelectMenu>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 md:col-span-3">
-                  <UFormGroup label="Betrag (Netto)">
+                  <UFormField label="Betrag (Netto)">
                     <UInput
                         type="number"
                         step="0.01"
@@ -478,11 +478,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                     >
                       <template #trailing>€</template>
                     </UInput>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 md:col-span-3">
-                  <UFormGroup label="Betrag (Brutto)">
+                  <UFormField label="Betrag (Brutto)">
                     <UInput
                         type="number"
                         step="0.01"
@@ -492,11 +492,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                     >
                       <template #trailing>€</template>
                     </UInput>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-6 md:col-span-3">
-                  <UFormGroup label="Steuerschlüssel">
+                  <UFormField label="Steuerschlüssel">
                     <USelectMenu
                         v-model="item.taxType"
                         :options="taxOptions"
@@ -505,15 +505,15 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                         :disabled="mode === 'show'"
                         @change="recalculateItem(item, 'taxType')"
                     />
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-6 md:col-span-3">
-                  <UFormGroup label="Steuerbetrag" help="Automatisch berechnet">
+                  <UFormField label="Steuerbetrag" help="Automatisch berechnet">
                     <UInput :model-value="item.amountTax" disabled color="gray" >
                       <template #trailing>€</template>
                     </UInput>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 flex justify-end gap-2">
diff --git a/frontend/pages/incomingInvoices/index.vue b/frontend/pages/incomingInvoices/index.vue
index 80b4cd2..eb37234 100644
--- a/frontend/pages/incomingInvoices/index.vue
+++ b/frontend/pages/incomingInvoices/index.vue
@@ -203,15 +203,15 @@ const selectIncomingInvoice = (invoice) => {
       <USelectMenu
           v-model="selectedColumns"
           icon="i-heroicons-adjustments-horizontal-solid"
-          :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+          :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
           multiple
           class="hidden lg:block"
           by="key"
           :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
           @change="tempStore.modifyColumns(type,selectedColumns)"
       >
-        <template #label>
+        <template #default>
           Spalten
         </template>
       </USelectMenu>
@@ -220,11 +220,11 @@ const selectIncomingInvoice = (invoice) => {
           icon="i-heroicons-adjustments-horizontal-solid"
           multiple
           v-model="selectedFilters"
-          :options="selectableFilters"
+          :items="selectableFilters"
           :color="selectedFilters.length > 0 ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
       >
-        <template #label>
+        <template #default>
           Filter
         </template>
       </USelectMenu>
@@ -244,42 +244,42 @@ const selectIncomingInvoice = (invoice) => {
         {{filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' ).length}}
       </UBadge>
     </template>
-    <template #item="{item}">
+    <template #content="{item}">
       <div style="height: 80dvh; overflow-y: scroll">
         <UTable
-            v-model:sort="sort"
+            v-model:sorting="sort"
             sort-mode="manual"
-            @update:sort="setupPage"
+            @update:sorting="setupPage"
             :data="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
             :columns="normalizeTableColumns(columns)"
             class="w-full"
             :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-            @select="(i) => selectIncomingInvoice(i) "
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+            :on-select="(i) => selectIncomingInvoice(i) "
+            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
         >
-          <template #reference-data="{row}">
-            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.reference}}</span>
-            <span v-else>{{row.reference}}</span>
+          <template #reference-cell="{row}">
+            <span v-if="row.original === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.original.reference}}</span>
+            <span v-else>{{row.original.reference}}</span>
           </template>
-          <template #state-data="{row}">
-            <span v-if="row.state === 'Vorbereitet'" class="text-cyan-500">{{row.state}}</span>
-            <span v-else-if="row.state === 'Entwurf'" class="text-red-500">{{row.state}}</span>
-            <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{row.state}}</span>
+          <template #state-cell="{row}">
+            <span v-if="row.original.state === 'Vorbereitet'" class="text-cyan-500">{{row.original.state}}</span>
+            <span v-else-if="row.original.state === 'Entwurf'" class="text-red-500">{{row.original.state}}</span>
+            <span v-else-if="row.original.state === 'Gebucht'" class="text-primary-500">{{row.original.state}}</span>
           </template>
-          <template #date-data="{row}">
-            {{dayjs(row.date).format("DD.MM.YYYY")}}
+          <template #date-cell="{row}">
+            {{dayjs(row.original.date).format("DD.MM.YYYY")}}
           </template>
-          <template #vendor-data="{row}">
-            {{row.vendor ? row.vendor.name : ""}}
+          <template #vendor-cell="{row}">
+            {{row.original.vendor ? row.original.vendor.name : ""}}
           </template>
-          <template #amount-data="{row}">
-            {{displayCurrency(sum.getIncomingInvoiceSum(row))}}
+          <template #amount-cell="{row}">
+            {{displayCurrency(sum.getIncomingInvoiceSum(row.original))}}
           </template>
-          <template #dueDate-data="{row}">
-            <span v-if="row.dueDate">{{dayjs(row.dueDate).format("DD.MM.YYYY")}}</span>
+          <template #dueDate-cell="{row}">
+            <span v-if="row.original.dueDate">{{dayjs(row.original.dueDate).format("DD.MM.YYYY")}}</span>
           </template>
-          <template #paid-data="{row}">
-            <span v-if="isPaid(row)" class="text-primary-500">Bezahlt</span>
+          <template #paid-cell="{row}">
+            <span v-if="isPaid(row.original)" class="text-primary-500">Bezahlt</span>
             <span v-else class="text-rose-600">Offen</span>
           </template>
         </UTable>
diff --git a/frontend/pages/organisation/plantafel.vue b/frontend/pages/organisation/plantafel.vue
index 2fba02c..11aeae8 100644
--- a/frontend/pages/organisation/plantafel.vue
+++ b/frontend/pages/organisation/plantafel.vue
@@ -454,24 +454,25 @@ onMounted(() => {
     </UDashboardPanelContent>
 
     <UModal v-model:open="isAbsenceModalOpen">
-      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              {{ absenceModalTitle }}
-            </h3>
-            <UButton
-              color="gray"
-              variant="ghost"
-              icon="i-heroicons-x-mark-20-solid"
-              class="-my-1"
-              @click="isAbsenceModalOpen = false"
-            />
-          </div>
-        </template>
+      <template #content>
+        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                {{ absenceModalTitle }}
+              </h3>
+              <UButton
+                color="gray"
+                variant="ghost"
+                icon="i-heroicons-x-mark-20-solid"
+                class="-my-1"
+                @click="isAbsenceModalOpen = false"
+              />
+            </div>
+          </template>
 
         <div class="space-y-4">
-          <UFormGroup label="Profil">
+          <UFormField label="Profil">
             <USelectMenu
               v-model="absenceForm.userId"
               :options="profileOptions"
@@ -479,51 +480,52 @@ onMounted(() => {
               option-attribute="label"
               searchable
             />
-          </UFormGroup>
+          </UFormField>
 
-          <UFormGroup label="Typ">
+          <UFormField label="Typ">
             <USelectMenu
               v-model="absenceForm.type"
               :options="absenceTypeOptions"
               value-attribute="value"
               option-attribute="label"
             />
-          </UFormGroup>
+          </UFormField>
 
           <div class="grid grid-cols-2 gap-4">
-            <UFormGroup label="Start">
+            <UFormField label="Start">
               <div class="flex items-center gap-2">
                 <UInput v-model="absenceForm.startDate" type="date" class="flex-1" />
                 <UButton color="gray" variant="soft" label="Heute" @click="setAbsenceDateToToday('startDate')" />
               </div>
-            </UFormGroup>
-            <UFormGroup label="Ende">
+            </UFormField>
+            <UFormField label="Ende">
               <div class="flex items-center gap-2">
                 <UInput v-model="absenceForm.endDate" type="date" class="flex-1" />
                 <UButton color="gray" variant="soft" label="Heute" @click="setAbsenceDateToToday('endDate')" />
               </div>
-            </UFormGroup>
+            </UFormField>
           </div>
 
-          <UFormGroup label="Notiz">
+          <UFormField label="Notiz">
             <UTextarea
               v-model="absenceForm.description"
               :placeholder="absenceForm.type === 'sick' ? 'z. B. Krankmeldung eingegangen' : 'z. B. Sommerurlaub'"
             />
-          </UFormGroup>
+          </UFormField>
         </div>
 
-        <template #footer>
-          <div class="flex justify-end gap-2">
-            <UButton color="gray" variant="soft" @click="isAbsenceModalOpen = false">
-              Abbrechen
-            </UButton>
-            <UButton color="primary" :loading="savingAbsence" @click="saveAbsence">
-              Speichern
-            </UButton>
-          </div>
-        </template>
-      </UCard>
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton color="gray" variant="soft" @click="isAbsenceModalOpen = false">
+                Abbrechen
+              </UButton>
+              <UButton color="primary" :loading="savingAbsence" @click="saveAbsence">
+                Speichern
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
     </UModal>
   </div>
 </template>
diff --git a/frontend/pages/projecttypes/[mode]/[[id]].vue b/frontend/pages/projecttypes/[mode]/[[id]].vue
index acae19e..3218505 100644
--- a/frontend/pages/projecttypes/[mode]/[[id]].vue
+++ b/frontend/pages/projecttypes/[mode]/[[id]].vue
@@ -9,18 +9,20 @@ defineShortcuts({
     router.push("/projecttypes")
   },
   'arrowleft': () => {
-    if(openTab.value > 0){
-      openTab.value -= 1
+    const currentIndex = Number(openTab.value)
+    if(currentIndex > 0){
+      openTab.value = String(currentIndex - 1)
     }
   },
   'arrowright': () => {
-    if(openTab.value < 3) {
-      openTab.value += 1
+    const currentIndex = Number(openTab.value)
+    if(currentIndex < 3) {
+      openTab.value = String(currentIndex + 1)
     }
   },
 })
 
-const openTab = ref(0)
+const openTab = ref("0")
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -129,7 +131,7 @@ const addPhase = () => {
         v-if="itemInfo.id && mode == 'show'"
         v-model="openTab"
     >
-      <template #item="{ item }">
+      <template #content="{ item }">
         <div v-if="item.label === 'Informationen'" class="flex flex-row">
           <div class="w-1/2 mr-3">
             <UCard class="mt-5">
@@ -159,13 +161,13 @@ const addPhase = () => {
           description="Achtung Änderungen an diesem Projekttypen betreffen nur Projekte die damit neu erstellt werden. Bestehende Projekte bleiben unverändert."
       />
 
-      <UFormGroup
+      <UFormField
           label="Name:"
       >
         <UInput
             v-model="itemInfo.name"
         />
-      </UFormGroup>
+      </UFormField>
 
       <USeparator class="mt-5">
         Initiale Phasen
@@ -248,36 +250,38 @@ const addPhase = () => {
                 </UButton>
 
                 <UModal v-model:open="openQuickActionModal">
-                  <UCard>
-                    <div class="flex items-center justify-between">
-                      <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-                        Schnellaktion hinzufügen
-                      </h3>
-                      <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="openQuickActionModal = false" />
-                    </div>
-                    <div class="flex flex-col">
-                      <UButton
-                          class="my-1"
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Angebot',link:'/createDocument/edit/?type=quotes'})">Angebot Erstellen</UButton>
-                      <UButton
-                          class="my-1"
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Auftrag',link:'/createDocument/edit/?type=confirmationOrders'})">Auftrag Erstellen</UButton>
-                      <UButton
-                          class="my-1"
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Lieferschein',link:'/createDocument/edit/?type=deliveryNotes'})">Lieferschein Erstellen</UButton>
-                      <UButton
-                          class="my-1"
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Rechnung',link:'/createDocument/edit/?type=invoices'})">Rechnung Erstellen</UButton>
-                      <UButton
-                          class="my-1"
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Aufgabe',link:'/tasks/create'})">Aufgabe Erstellen</UButton>
-                      <UButton
-                          class="my-1"
-                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Termin',link:'/events/edit'})">Termin Erstellen</UButton>
+                  <template #content>
+                    <UCard>
+                      <div class="flex items-center justify-between">
+                        <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                          Schnellaktion hinzufügen
+                        </h3>
+                        <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="openQuickActionModal = false" />
+                      </div>
+                      <div class="flex flex-col">
+                        <UButton
+                            class="my-1"
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Angebot',link:'/createDocument/edit/?type=quotes'})">Angebot Erstellen</UButton>
+                        <UButton
+                            class="my-1"
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Auftrag',link:'/createDocument/edit/?type=confirmationOrders'})">Auftrag Erstellen</UButton>
+                        <UButton
+                            class="my-1"
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Lieferschein',link:'/createDocument/edit/?type=deliveryNotes'})">Lieferschein Erstellen</UButton>
+                        <UButton
+                            class="my-1"
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Rechnung',link:'/createDocument/edit/?type=invoices'})">Rechnung Erstellen</UButton>
+                        <UButton
+                            class="my-1"
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Aufgabe',link:'/tasks/create'})">Aufgabe Erstellen</UButton>
+                        <UButton
+                            class="my-1"
+                            @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Termin',link:'/events/edit'})">Termin Erstellen</UButton>
 
-                    </div>
+                      </div>
 
-                  </UCard>
+                    </UCard>
+                  </template>
                 </UModal>
               </td>
               <td>
diff --git a/frontend/pages/projecttypes/index.vue b/frontend/pages/projecttypes/index.vue
index 7651a1e..6e3ac51 100644
--- a/frontend/pages/projecttypes/index.vue
+++ b/frontend/pages/projecttypes/index.vue
@@ -91,12 +91,12 @@ const filteredRows = computed(() => {
       :columns="normalizeTableColumns(columns)"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(`/projecttypes/show/${i.id}`) "
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekttypen anzuzeigen' }"
+      :on-select="(i) => router.push(`/projecttypes/show/${i.id}`) "
+      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekttypen anzuzeigen' }"
   >
-    <template #name-data="{row}">
-      <span class="text-primary-500 font-bold" v-if="row === filteredRows[selectedItem]">{{ row.name }}</span>
-      <span v-else>{{ row.name }}</span>
+    <template #name-cell="{row}">
+      <span class="text-primary-500 font-bold" v-if="row.original === filteredRows[selectedItem]">{{ row.original.name }}</span>
+      <span v-else>{{ row.original.name }}</span>
     </template>
 
   </UTable>
diff --git a/frontend/pages/roles/[mode]/[[id]].vue b/frontend/pages/roles/[mode]/[[id]].vue
index 3b400c6..688df24 100644
--- a/frontend/pages/roles/[mode]/[[id]].vue
+++ b/frontend/pages/roles/[mode]/[[id]].vue
@@ -8,13 +8,15 @@ defineShortcuts({
     router.push("/roles")
   },
   'arrowleft': () => {
-    if(openTab.value > 0){
-      openTab.value -= 1
+    const currentIndex = Number(openTab.value)
+    if(currentIndex > 0){
+      openTab.value = String(currentIndex - 1)
     }
   },
   'arrowright': () => {
-    if(openTab.value < 3) {
-      openTab.value += 1
+    const currentIndex = Number(openTab.value)
+    if(currentIndex < 3) {
+      openTab.value = String(currentIndex + 1)
     }
   },
 })
@@ -32,7 +34,7 @@ const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
     rights: []
 })
-const openTab = ref(0)
+const openTab = ref("0")
 
 //Functions
 const setupPage = async () => {
@@ -120,7 +122,7 @@ setupPage()
     class="p-5"
     v-model="openTab"
   >
-    <template #item="{item}">
+    <template #content="{item}">
       <div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row">
         <div class="w-1/2 mr-5">
           <UCard>
@@ -157,15 +159,15 @@ setupPage()
       v-else-if="mode == 'edit' || mode == 'create'"
       class="p-5"
   >
-    <UFormGroup
+    <UFormField
         label="Name:"
     >
       <UInput
           v-model="itemInfo.name"
           autofocus
       />
-    </UFormGroup>
-    <UFormGroup
+    </UFormField>
+    <UFormField
         label="Rechte:"
     >
       <USelectMenu
@@ -176,14 +178,14 @@ setupPage()
           multiple
       >
       </USelectMenu>
-    </UFormGroup>
-    <UFormGroup
+    </UFormField>
+    <UFormField
         label="Beschreibung:"
     >
       <UTextarea
           v-model="itemInfo.description"
       />
-    </UFormGroup>
+    </UFormField>
   </UForm>
 </template>
 
diff --git a/frontend/pages/settings/admin.vue b/frontend/pages/settings/admin.vue
index 3950be0..dfb4988 100644
--- a/frontend/pages/settings/admin.vue
+++ b/frontend/pages/settings/admin.vue
@@ -51,7 +51,7 @@ const savingUser = ref(false)
 const savingTenant = ref(false)
 const creatingUser = ref(false)
 const creatingTenant = ref(false)
-const activeTab = ref(0)
+const activeTab = ref("0")
 const createUserModalOpen = ref(false)
 const createTenantModalOpen = ref(false)
 const createdUserPassword = ref("")
@@ -472,7 +472,7 @@ onMounted(async () => {
       :items="tabItems"
       class="admin-tabs h-full"
     >
-      <template #item="{ item }">
+      <template #content="{ item }">
         <div v-if="item.label === 'Benutzer'" class="admin-grid mt-5 grid grid-cols-1 xl:grid-cols-3 gap-5">
           <UCard class="admin-card xl:col-span-1">
             <div class="flex items-center justify-between mb-4">
@@ -494,7 +494,7 @@ onMounted(async () => {
                 v-if="!loading"
                 :data="userTableRows"
                 :columns="normalizedUserTableColumns"
-                @select="selectUser"
+                :on-select="selectUser"
               />
 
               <USkeleton v-else class="h-80" />
@@ -519,49 +519,49 @@ onMounted(async () => {
               </div>
 
               <UForm :state="userForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <UFormGroup label="E-Mail">
+                <UFormField label="E-Mail">
                   <UInput v-model="userForm.email" />
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Profil Vorname">
+                <UFormField label="Profil Vorname">
                   <UInput v-model="userForm.profile_defaults.first_name" />
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Profil Nachname">
+                <UFormField label="Profil Nachname">
                   <UInput v-model="userForm.profile_defaults.last_name" />
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Tenants">
+                <UFormField label="Tenants">
                   <USelectMenu
                     :model-value="userForm.tenant_ids"
-                    :options="tenantOptions"
-                    value-attribute="value"
-                    option-attribute="label"
+                    :items="tenantOptions"
+                    value-key="value"
+                    label-key="label"
                     multiple
                     @update:model-value="updateUserTenants"
                   />
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Administrative Freigabe">
+                <UFormField label="Administrative Freigabe">
                   <div class="flex items-center gap-3 h-10">
-                    <UToggle v-model="userForm.is_admin" />
+                    <USwitch v-model="userForm.is_admin" />
                     <span class="text-sm text-gray-600">Darf Administrationsseite und Admin-API nutzen</span>
                   </div>
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Multi-Tenant">
+                <UFormField label="Multi-Tenant">
                   <div class="flex items-center gap-3 h-10">
-                    <UToggle v-model="userForm.multiTenant" />
+                    <USwitch v-model="userForm.multiTenant" />
                     <span class="text-sm text-gray-600">Benutzer darf mehreren Tenants zugeordnet sein</span>
                   </div>
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Passwortwechsel erzwingen">
+                <UFormField label="Passwortwechsel erzwingen">
                   <div class="flex items-center gap-3 h-10">
-                    <UToggle v-model="userForm.must_change_password" />
+                    <USwitch v-model="userForm.must_change_password" />
                     <span class="text-sm text-gray-600">Beim nächsten Login muss das Passwort geändert werden</span>
                   </div>
-                </UFormGroup>
+                </UFormField>
               </UForm>
 
               <div>
@@ -586,33 +586,33 @@ onMounted(async () => {
                         </div>
                       </div>
 
-                      <UFormGroup label="Rolle">
+                      <UFormField label="Rolle">
                         <USelectMenu
                           :model-value="getRoleForTenant(tenantId)"
-                          :options="getRoleOptionsForTenant(tenantId)"
-                          value-attribute="value"
-                          option-attribute="label"
+                          :items="getRoleOptionsForTenant(tenantId)"
+                          value-key="value"
+                          label-key="label"
                           placeholder="Rolle auswählen"
                           @update:model-value="(value) => setRoleForTenant(tenantId, value)"
                         />
-                      </UFormGroup>
+                      </UFormField>
 
-                      <UFormGroup label="Freies Profil">
+                      <UFormField label="Freies Profil">
                         <USelectMenu
                           :model-value="getProfileAssignmentForTenant(tenantId)"
-                          :options="[
+                          :items="[
                             { label: 'Neues Profil erzeugen', value: null },
                             ...getFreeProfilesForTenant(tenantId).map((profile) => ({
                               label: profile.full_name || `${profile.first_name} ${profile.last_name}`,
                               value: profile.id,
                             }))
                           ]"
-                          value-attribute="value"
-                          option-attribute="label"
+                          value-key="value"
+                          label-key="label"
                           placeholder="Profil auswählen"
                           @update:model-value="(value) => setProfileAssignmentForTenant(tenantId, value)"
                         />
-                      </UFormGroup>
+                      </UFormField>
                     </div>
                   </UCard>
                 </div>
@@ -676,7 +676,7 @@ onMounted(async () => {
                 v-if="!loading"
                 :data="tenantTableRows"
                 :columns="normalizedTenantTableColumns"
-                @select="selectTenant"
+                :on-select="selectTenant"
               />
 
               <USkeleton v-else class="h-80" />
@@ -701,13 +701,13 @@ onMounted(async () => {
               </div>
 
               <UForm :state="tenantForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <UFormGroup label="Name">
+                <UFormField label="Name">
                   <UInput v-model="tenantForm.name" />
-                </UFormGroup>
+                </UFormField>
 
-                <UFormGroup label="Kürzel">
+                <UFormField label="Kürzel">
                   <UInput v-model="tenantForm.short" />
-                </UFormGroup>
+                </UFormField>
               </UForm>
 
               <div>
@@ -743,49 +743,50 @@ onMounted(async () => {
   </UDashboardPanelContent>
 
   <UModal v-model:open="createUserModalOpen">
-    <UCard>
-      <template #header>
-        <div class="text-lg font-semibold">Benutzer anlegen</div>
-      </template>
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="text-lg font-semibold">Benutzer anlegen</div>
+        </template>
 
       <UForm
         :state="createUserForm"
         class="space-y-4"
         @submit.prevent="createUser"
       >
-        <UFormGroup label="E-Mail">
+        <UFormField label="E-Mail">
           <UInput v-model="createUserForm.email" type="email" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Initialpasswort">
+        <UFormField label="Initialpasswort">
           <UInput
             v-model="createUserForm.password"
             type="text"
             placeholder="Leer lassen für automatisches Passwort"
           />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Vorname für neues Profil">
+        <UFormField label="Vorname für neues Profil">
           <UInput v-model="createUserForm.first_name" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Nachname für neues Profil">
+        <UFormField label="Nachname für neues Profil">
           <UInput v-model="createUserForm.last_name" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Administrative Freigabe">
+        <UFormField label="Administrative Freigabe">
           <div class="flex items-center gap-3 h-10">
-            <UToggle v-model="createUserForm.is_admin" />
+            <USwitch v-model="createUserForm.is_admin" />
             <span class="text-sm text-gray-600">Benutzer darf die Administration öffnen</span>
           </div>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Multi-Tenant">
+        <UFormField label="Multi-Tenant">
           <div class="flex items-center gap-3 h-10">
-            <UToggle v-model="createUserForm.multiTenant" />
+            <USwitch v-model="createUserForm.multiTenant" />
             <span class="text-sm text-gray-600">Mehrere Tenant-Zuordnungen erlauben</span>
           </div>
-        </UFormGroup>
+        </UFormField>
 
         <div class="flex justify-end gap-3 pt-2">
           <UButton color="gray" variant="soft" @click="createUserModalOpen = false">
@@ -795,28 +796,30 @@ onMounted(async () => {
             Benutzer anlegen
           </UButton>
         </div>
-      </UForm>
-    </UCard>
+        </UForm>
+      </UCard>
+    </template>
   </UModal>
 
   <UModal v-model:open="createTenantModalOpen">
-    <UCard>
-      <template #header>
-        <div class="text-lg font-semibold">Tenant anlegen</div>
-      </template>
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="text-lg font-semibold">Tenant anlegen</div>
+        </template>
 
       <UForm
         :state="createTenantForm"
         class="space-y-4"
         @submit.prevent="createTenant"
       >
-        <UFormGroup label="Name">
+        <UFormField label="Name">
           <UInput v-model="createTenantForm.name" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Kürzel">
+        <UFormField label="Kürzel">
           <UInput v-model="createTenantForm.short" />
-        </UFormGroup>
+        </UFormField>
 
         <UAlert
           title="Seed-Daten"
@@ -833,8 +836,9 @@ onMounted(async () => {
             Tenant anlegen
           </UButton>
         </div>
-      </UForm>
-    </UCard>
+        </UForm>
+      </UCard>
+    </template>
   </UModal>
 
   <div class="mx-5 mb-5">
diff --git a/frontend/pages/settings/banking/index.vue b/frontend/pages/settings/banking/index.vue
index 8252e3d..03f5715 100644
--- a/frontend/pages/settings/banking/index.vue
+++ b/frontend/pages/settings/banking/index.vue
@@ -101,16 +101,17 @@ setupPage()
         + Bankverbindung
       </UButton>
       <USlideover
-          v-model="showAddBankRequisition"
+          v-model:open="showAddBankRequisition"
       >
-        <UCard
-            class="h-full"
-        >
-          <template #header>
-            <p>Bankverbindung hinzufügen</p>
-          </template>
+        <template #body>
+          <UCard
+              class="h-full"
+          >
+            <template #header>
+              <p>Bankverbindung hinzufügen</p>
+            </template>
 
-          <UFormGroup
+          <UFormField
               label="BIC:"
               class="flex-auto"
           >
@@ -127,7 +128,7 @@ setupPage()
               </UButton>
             </InputGroup>
 
-          </UFormGroup>
+          </UFormField>
           <UAlert
               v-if="showAlert && bankData.id && bankData.countries.includes('DE')"
               title="Bank gefunden"
@@ -137,46 +138,49 @@ setupPage()
               class="mt-3"
               :actions="[{ variant: 'solid', color: 'primary', label: 'Verbinden',click: generateLink }]"
           />
-          <UAlert
-              v-else-if="showAlert && !bankData.id"
-              title="Bank nicht gefunden"
-              icon="i-heroicons-x-circle"
-              color="error"
-              variant="outline"
-              class="mt-3"
-          />
+            <UAlert
+                v-else-if="showAlert && !bankData.id"
+                title="Bank nicht gefunden"
+                icon="i-heroicons-x-circle"
+                color="error"
+                variant="outline"
+                class="mt-3"
+            />
 
-        </UCard>
+          </UCard>
+        </template>
       </USlideover>
     </template>
   </UDashboardNavbar>
 
   <UModal v-model:open="showReqData">
-    <UCard>
-      <template #header>
-        Verfügbare Bankkonten
-      </template>
-      <div
-          v-for="account in reqData.accounts"
-          :key="account.id"
-          class="p-2 m-3 flex justify-between"
-      >
-        {{account.iban}} - {{account.owner_name}}
+    <template #content>
+      <UCard>
+        <template #header>
+          Verfügbare Bankkonten
+        </template>
+        <div
+            v-for="account in reqData.accounts"
+            :key="account.id"
+            class="p-2 m-3 flex justify-between"
+        >
+          {{account.iban}} - {{account.owner_name}}
 
-        <UButton
-            @click="addAccount(account)"
-            v-if="!bankaccounts.find(i => i.iban === account.iban)"
-        >
-          Hinzufügen
-        </UButton>
-        <UButton
-            @click="updateAccount(account)"
-            v-else
-        >
-          Aktualisieren
-        </UButton>
-      </div>
-    </UCard>
+          <UButton
+              @click="addAccount(account)"
+              v-if="!bankaccounts.find(i => i.iban === account.iban)"
+          >
+            Hinzufügen
+          </UButton>
+          <UButton
+              @click="updateAccount(account)"
+              v-else
+          >
+            Aktualisieren
+          </UButton>
+        </div>
+      </UCard>
+    </template>
   </UModal>
 
   <UTable
@@ -200,21 +204,21 @@ setupPage()
         },
       ])"
   >
-    <template #expired-data="{row}">
-      <span v-if="row.expired" class="text-rose-600">Ausgelaufen</span>
+    <template #expired-cell="{ row }">
+      <span v-if="row.original.expired" class="text-error-600">Ausgelaufen</span>
       <span v-else class="text-primary">Aktiv</span>
       <UButton
-          v-if="row.expired"
+          v-if="row.original.expired"
           variant="outline"
           class="ml-2"
-          @click="generateLink(row.bankId)"
+          @click="generateLink(row.original.bankId)"
       >Aktualisieren</UButton>
     </template>
-    <template #balance-data="{row}">
-      {{row.balance ? row.balance.toFixed(2).replace(".",",") + ' €' : '-'}}
+    <template #balance-cell="{ row }">
+      {{ row.original.balance ? row.original.balance.toFixed(2).replace(".",",") + ' €' : '-' }}
     </template>
-    <template #iban-data="{row}">
-      {{row.iban.match(/.{1,5}/g).join(" ")}}
+    <template #iban-cell="{ row }">
+      {{ row.original.iban.match(/.{1,5}/g).join(" ") }}
     </template>
   </UTable>
 
diff --git a/frontend/pages/settings/emailaccounts/[mode]/[[id]].vue b/frontend/pages/settings/emailaccounts/[mode]/[[id]].vue
index f8f6059..6435276 100644
--- a/frontend/pages/settings/emailaccounts/[mode]/[[id]].vue
+++ b/frontend/pages/settings/emailaccounts/[mode]/[[id]].vue
@@ -57,15 +57,15 @@ const saveAccount = async () => {
     </template>
   </UDashboardNavbar>
   <UForm class="w-2/3 mx-auto mt-5">
-    <UFormGroup
+    <UFormField
       label="E-Mail Adresse"
     >
       <UInput
         v-model="itemInfo.email"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup
+    <UFormField
         label="Passwort"
     >
       <UInput
@@ -73,61 +73,61 @@ const saveAccount = async () => {
           v-model="itemInfo.password"
           placeholder="********"
       />
-    </UFormGroup>
+    </UFormField>
 
     <USeparator label="IMAP"/>
 
-    <UFormGroup
+    <UFormField
         label="IMAP Host"
     >
       <UInput
           v-model="itemInfo.imap_host"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup
+    <UFormField
         label="IMAP Port"
     >
       <UInput
           type="number"
           v-model="itemInfo.imap_port"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup
+    <UFormField
         label="IMAP SSL"
     >
-      <UToggle
+      <USwitch
           v-model="itemInfo.imap_ssl"
       />
-    </UFormGroup>
+    </UFormField>
 
     <USeparator label="SMTP"/>
 
-    <UFormGroup
+    <UFormField
         label="SMTP Host"
     >
       <UInput
           v-model="itemInfo.smtp_host"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup
+    <UFormField
         label="SMTP Port"
     >
       <UInput
           type="number"
           v-model="itemInfo.smtp_port"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup
+    <UFormField
         label="SMTP SSL"
     >
-      <UToggle
+      <USwitch
           v-model="itemInfo.smtp_ssl"
       />
-    </UFormGroup>
+    </UFormField>
 
   </UForm>
 </template>
diff --git a/frontend/pages/settings/emailaccounts/index.vue b/frontend/pages/settings/emailaccounts/index.vue
index a2c2f62..f0599bc 100644
--- a/frontend/pages/settings/emailaccounts/index.vue
+++ b/frontend/pages/settings/emailaccounts/index.vue
@@ -32,23 +32,23 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
 
 <template>
   <UModal
-    v-model="showEmailAddressModal"
+    v-model:open="showEmailAddressModal"
   >
     <template #content>
       <UCard>
         <template #header>
           E-Mail Adresse
         </template>
-<!--      <UFormGroup
+<!--      <UFormField
         label="E-Mail Adresse:"
       >
 
-      </UFormGroup>-->
+      </UFormField>-->
 
       <UInput
           v-model="createEMailAddress"
       />
-<!--      <UFormGroup
+<!--      <UFormField
         label="Account Typ:"
       >
         <USelectMenu
@@ -57,7 +57,7 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
           value-attribute="key"
           v-model="createEMailType"
         />
-      </UFormGroup>-->
+      </UFormField>-->
         <template #footer>
           <UButton
               @click="createAccount"
@@ -85,9 +85,9 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
     :data="items"
     :columns="normalizeTableColumns(columns)"
     class="w-full"
-    @select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
+    :on-select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
     :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine E-Mail Konten anzuzeigen' }"
+    :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine E-Mail Konten anzuzeigen' }"
   >
   </UTable>
 </template>
diff --git a/frontend/pages/settings/externalDevices.vue b/frontend/pages/settings/externalDevices.vue
index 97298bf..8c5a7c7 100644
--- a/frontend/pages/settings/externalDevices.vue
+++ b/frontend/pages/settings/externalDevices.vue
@@ -33,13 +33,13 @@ const labelPrinterURI = ref("")
         Etikettendrucker
       </template>
 
-      <UFormGroup
+      <UFormField
         label="IP-Adresse:"
       >
         <UInput
           v-model="labelPrinterURI"
         />
-      </UFormGroup>
+      </UFormField>
 
       <UButton
         @click="setupPrinter"
diff --git a/frontend/pages/settings/index.vue b/frontend/pages/settings/index.vue
index e47a5bc..cc89d34 100644
--- a/frontend/pages/settings/index.vue
+++ b/frontend/pages/settings/index.vue
@@ -37,7 +37,7 @@ const isLight = computed({
       :items="items"
       class="h-100 p-5"
   >
-    <template #item="{item}">
+    <template #content="{item}">
       <UCard class="mt-5">
         <div v-if="item.label === 'Profil'">
 
@@ -86,4 +86,4 @@ const isLight = computed({
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/pages/settings/tenant.vue b/frontend/pages/settings/tenant.vue
index 5dbfa7c..72e9545 100644
--- a/frontend/pages/settings/tenant.vue
+++ b/frontend/pages/settings/tenant.vue
@@ -168,7 +168,7 @@ setupPage()
         }
     ]"
   >
-    <template #item="{item}">
+    <template #content="{item}">
       <div v-if="item.label === 'Dokubox'">
         <UAlert
             class="mt-5"
@@ -190,17 +190,17 @@ setupPage()
       <div v-if="item.label === 'Rechnung & Kontakt'">
           <UCard class="mt-5">
             <UForm class="w-1/2">
-            <UFormGroup
+            <UFormField
                 label="Firmenname:"
             >
               <UInput v-model="businessInfo.name"/>
-            </UFormGroup>
-            <UFormGroup
+            </UFormField>
+            <UFormField
                 label="Straße + Hausnummer:"
             >
               <UInput v-model="businessInfo.street"/>
-            </UFormGroup>
-            <UFormGroup
+            </UFormField>
+            <UFormField
                 label="PLZ + Ort"
                 class="w-full"
             >
@@ -208,41 +208,41 @@ setupPage()
                 <UInput v-model="businessInfo.zip"/>
                 <UInput v-model="businessInfo.city" class="flex-auto"/>
               </InputGroup>
-            </UFormGroup>
+            </UFormField>
             <UButton
                 class="mt-3"
                 @click="updateTenant({businessInfo: businessInfo})"
             >
               Speichern
             </UButton>
-            <UFormGroup
+            <UFormField
                 label="Kontenrahmen:"
                 class="mt-6"
             >
               <USelectMenu
                   v-model="accountChart"
-                  :options="accountChartOptions"
-                  option-attribute="label"
-                  value-attribute="value"
+                  :items="accountChartOptions"
+                  label-key="label"
+                  value-key="value"
               />
-            </UFormGroup>
+            </UFormField>
             <UButton
                 class="mt-3"
                 @click="updateTenant({accountChart: accountChart})"
             >
               Kontenrahmen speichern
             </UButton>
-            <UFormGroup
+            <UFormField
                 label="USt-Auswertung:"
                 class="mt-6"
             >
               <USelectMenu
                   v-model="taxEvaluationPeriod"
-                  :options="TAX_EVALUATION_PERIOD_OPTIONS"
-                  option-attribute="label"
-                  value-attribute="value"
+                  :items="TAX_EVALUATION_PERIOD_OPTIONS"
+                  label-key="label"
+                  value-key="value"
               />
-            </UFormGroup>
+            </UFormField>
             <UButton
                 class="mt-3"
                 @click="updateTenant({taxEvaluationPeriod: taxEvaluationPeriod})"
diff --git a/frontend/pages/settings/texttemplates.vue b/frontend/pages/settings/texttemplates.vue
index b6f29ae..60c439b 100644
--- a/frontend/pages/settings/texttemplates.vue
+++ b/frontend/pages/settings/texttemplates.vue
@@ -163,7 +163,7 @@ const getDocLabel = (type) => {
         :data="texttemplates"
         :loading="loading"
         v-model:expand="expand"
-        :empty-state="{ icon: 'i-heroicons-document-text', label: 'Keine Textvorlagen gefunden' }"
+        :empty="{ icon: 'i-heroicons-document-text', label: 'Keine Textvorlagen gefunden' }"
         :columns="normalizeTableColumns([
         { key: 'name', label: 'Bezeichnung' },
         { key: 'documentType', label: 'Verwendung' },
@@ -172,33 +172,33 @@ const getDocLabel = (type) => {
         { key: 'actions', label: '' }
         ])"
     >
-      <template #name-data="{ row }">
-        <span class="font-medium text-gray-900 dark:text-white">{{ row.name }}</span>
+      <template #name-cell="{ row }">
+        <span class="font-medium text-gray-900 dark:text-white">{{ row.original.name }}</span>
       </template>
 
-      <template #documentType-data="{ row }">
+      <template #documentType-cell="{ row }">
         <UBadge color="gray" variant="soft">
-          {{ getDocLabel(row.documentType) }}
+          {{ getDocLabel(row.original.documentType) }}
         </UBadge>
       </template>
 
-      <template #pos-data="{ row }">
+      <template #pos-cell="{ row }">
         <div class="flex items-center gap-2">
           <UIcon
-              :name="row.pos === 'startText' ? 'i-heroicons-bars-arrow-down' : 'i-heroicons-bars-arrow-up'"
+              :name="row.original.pos === 'startText' ? 'i-heroicons-bars-arrow-down' : 'i-heroicons-bars-arrow-up'"
               class="w-4 h-4 text-gray-500"
           />
-          <span>{{ row.pos === 'startText' ? 'Einleitung' : 'Endtext' }}</span>
+          <span>{{ row.original.pos === 'startText' ? 'Einleitung' : 'Endtext' }}</span>
         </div>
       </template>
 
-      <template #default-data="{ row }">
-        <UIcon v-if="row.default" name="i-heroicons-check-circle-20-solid" class="text-green-500"/>
+      <template #default-cell="{ row }">
+        <UIcon v-if="row.original.default" name="i-heroicons-check-circle-20-solid" class="text-green-500"/>
         <span v-else class="text-gray-400">-</span>
       </template>
 
-      <template #actions-data="{ row }">
-        <UButton color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="openModal(row)"/>
+      <template #actions-cell="{ row }">
+        <UButton color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="openModal(row.original)"/>
       </template>
 
       <template #expand="{ row }">
@@ -206,7 +206,7 @@ const getDocLabel = (type) => {
           <div class="mb-4">
             <h4 class="text-sm font-bold uppercase text-gray-500 mb-1">Vorschau</h4>
             <p class="text-gray-800 dark:text-gray-200 whitespace-pre-line p-3 bg-white dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700 text-sm">
-              {{ row.text }}
+              {{ row.original.text }}
             </p>
           </div>
 
@@ -237,25 +237,26 @@ const getDocLabel = (type) => {
   </UDashboardPanelContent>
 
   <UModal v-model:open="editTemplateModalOpen" :ui="{ width: 'sm:max-w-4xl' }">
-    <UCard>
-      <template #header>
-        <div class="flex justify-between items-center">
-          <h3 class="text-lg font-semibold">
-            {{ itemInfo.id ? 'Vorlage bearbeiten' : 'Neue Vorlage erstellen' }}
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="editTemplateModalOpen = false"/>
-        </div>
-      </template>
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex justify-between items-center">
+            <h3 class="text-lg font-semibold">
+              {{ itemInfo.id ? 'Vorlage bearbeiten' : 'Neue Vorlage erstellen' }}
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="editTemplateModalOpen = false"/>
+          </div>
+        </template>
 
       <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 
         <div class="lg:col-span-2 space-y-4">
-          <UFormGroup label="Bezeichnung" required>
+          <UFormField label="Bezeichnung" required>
             <UInput v-model="itemInfo.name" placeholder="z.B. Standard Angebotstext" icon="i-heroicons-tag"/>
-          </UFormGroup>
+          </UFormField>
 
           <div class="grid grid-cols-2 gap-4">
-            <UFormGroup label="Dokumententyp" required>
+            <UFormField label="Dokumententyp" required>
               <USelectMenu
                   v-model="itemInfo.documentType"
                   :options="Object.keys(dataStore.documentTypesForCreation || {})
@@ -264,9 +265,9 @@ const getDocLabel = (type) => {
                   option-attribute="label"
                   value-attribute="key"
               />
-            </UFormGroup>
+            </UFormField>
 
-            <UFormGroup label="Position" required>
+            <UFormField label="Position" required>
               <USelectMenu
                   v-model="itemInfo.pos"
                   :options="[
@@ -276,10 +277,10 @@ const getDocLabel = (type) => {
                   option-attribute="label"
                   value-attribute="key"
               />
-            </UFormGroup>
+            </UFormField>
           </div>
 
-          <UFormGroup label="Text Inhalt" required help="Klicken Sie rechts auf eine Variable, um sie einzufügen.">
+          <UFormField label="Text Inhalt" required help="Klicken Sie rechts auf eine Variable, um sie einzufügen.">
             <UTextarea
                 ref="textareaRef"
                 v-model="itemInfo.text"
@@ -287,7 +288,7 @@ const getDocLabel = (type) => {
                 placeholder="Sehr geehrte Damen und Herren..."
                 class="font-mono text-sm"
             />
-          </UFormGroup>
+          </UFormField>
 
           <UCheckbox v-model="itemInfo.default" label="Als Standard für diesen Typ verwenden"/>
         </div>
@@ -342,34 +343,35 @@ const getDocLabel = (type) => {
 
       </div>
 
-      <template #footer>
-        <div class="flex justify-end gap-3">
-          <UButton color="gray" variant="ghost" @click="editTemplateModalOpen = false">
-            Abbrechen
-          </UButton>
+        <template #footer>
+          <div class="flex justify-end gap-3">
+            <UButton color="gray" variant="ghost" @click="editTemplateModalOpen = false">
+              Abbrechen
+            </UButton>
 
-          <UButton
-              v-if="!itemInfo.id"
-              color="primary"
-              :loading="isSaving"
-              @click="handleCreate"
-              icon="i-heroicons-plus"
-          >
-            Erstellen
-          </UButton>
+            <UButton
+                v-if="!itemInfo.id"
+                color="primary"
+                :loading="isSaving"
+                @click="handleCreate"
+                icon="i-heroicons-plus"
+            >
+              Erstellen
+            </UButton>
 
-          <UButton
-              v-else
-              color="primary"
-              :loading="isSaving"
-              @click="handleUpdate"
-              icon="i-heroicons-check"
-          >
-            Speichern
-          </UButton>
-        </div>
-      </template>
-    </UCard>
+            <UButton
+                v-else
+                color="primary"
+                :loading="isSaving"
+                @click="handleUpdate"
+                icon="i-heroicons-check"
+            >
+              Speichern
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 </template>
 
diff --git a/frontend/pages/staff/profiles/[id].vue b/frontend/pages/staff/profiles/[id].vue
index b43d58c..6d5711a 100644
--- a/frontend/pages/staff/profiles/[id].vue
+++ b/frontend/pages/staff/profiles/[id].vue
@@ -182,75 +182,75 @@ onMounted(fetchProfile)
       <USeparator label="Persönliche Daten" />
 
       <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
-        <UFormGroup label="Vorname">
+        <UFormField label="Vorname">
           <UInput v-model="profile.first_name" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Nachname">
+        <UFormField label="Nachname">
           <UInput v-model="profile.last_name" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="E-Mail">
+        <UFormField label="E-Mail">
           <UInput v-model="profile.email" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Telefon (Mobil)">
+        <UFormField label="Telefon (Mobil)">
           <UInput v-model="profile.mobile_tel" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Telefon (Festnetz)">
+        <UFormField label="Telefon (Festnetz)">
           <UInput v-model="profile.fixed_tel" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Geburtstag">
+        <UFormField label="Geburtstag">
           <div class="flex items-center gap-2">
             <UInput type="date" v-model="profile.birthday" class="flex-1" />
             <UButton color="gray" variant="soft" label="Heute" @click="setProfileDate('birthday')" />
           </div>
-        </UFormGroup>
+        </UFormField>
       </UForm>
     </UCard>
     <UCard v-if="!pending && profile" class="mt-3">
       <USeparator label="Vertragsinformationen" />
 
       <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
-        <UFormGroup label="Vertragsart">
+        <UFormField label="Vertragsart">
           <UInput v-model="profile.contract_type"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Status">
+        <UFormField label="Status">
           <UInput v-model="profile.status"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Position">
+        <UFormField label="Position">
           <UInput v-model="profile.position"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Qualifikation">
+        <UFormField label="Qualifikation">
           <UInput v-model="profile.qualification"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Eintrittsdatum">
+        <UFormField label="Eintrittsdatum">
           <div class="flex items-center gap-2">
             <UInput type="date" v-model="profile.entry_date" class="flex-1" />
             <UButton color="gray" variant="soft" label="Heute" @click="setProfileDate('entry_date')" />
           </div>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Wöchentliche Arbeitszeit (Std)">
+        <UFormField label="Wöchentliche Arbeitszeit (Std)">
           <UInput type="number" v-model="profile.weekly_working_hours" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Bezahlte Urlaubstage (Jahr)">
+        <UFormField label="Bezahlte Urlaubstage (Jahr)">
           <UInput type="number" v-model="profile.annual_paid_leave_days" />
-        </UFormGroup>
-        <UFormGroup label="Aktiv">
+        </UFormField>
+        <UFormField label="Aktiv">
           <div class="flex items-center gap-3">
-            <UToggle v-model="profile.active" color="primary" />
+            <USwitch v-model="profile.active" color="primary" />
             <span class="text-sm text-gray-600">
         </span>
           </div>
-        </UFormGroup>
+        </UFormField>
       </UForm>
 
     </UCard>
@@ -259,19 +259,19 @@ onMounted(fetchProfile)
       <USeparator label="Adresse & Standort" />
 
       <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
-        <UFormGroup label="Straße und Hausnummer">
+        <UFormField label="Straße und Hausnummer">
           <UInput v-model="profile.address_street"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="PLZ">
+        <UFormField label="PLZ">
           <UInput type="text" v-model="profile.address_zip" @focusout="checkZip"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Ort">
+        <UFormField label="Ort">
           <UInput v-model="profile.address_city"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Bundesland">
+        <UFormField label="Bundesland">
           <USelectMenu
               v-model="profile.state_code"
               :options="bundeslaender"
@@ -279,7 +279,7 @@ onMounted(fetchProfile)
               option-attribute="name"
               placeholder="Bundesland auswählen"
           />
-        </UFormGroup>
+        </UFormField>
       </UForm>
     </UCard>
 
@@ -315,21 +315,21 @@ onMounted(fetchProfile)
     <UCard v-if="!pending && profile" class="mt-3">
       <USeparator label="Sonstiges" />
       <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
-        <UFormGroup label="Kleidergröße (Oberteil)">
+        <UFormField label="Kleidergröße (Oberteil)">
           <UInput v-model="profile.clothing_size_top" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Kleidergröße (Hose)">
+        <UFormField label="Kleidergröße (Hose)">
           <UInput v-model="profile.clothing_size_bottom" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Schuhgröße">
+        <UFormField label="Schuhgröße">
           <UInput v-model="profile.clothing_size_shoe" />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Token-ID">
+        <UFormField label="Token-ID">
           <UInput v-model="profile.token_id" />
-        </UFormGroup>
+        </UFormField>
       </UForm>
     </UCard>
 
diff --git a/frontend/pages/staff/profiles/index.vue b/frontend/pages/staff/profiles/index.vue
index e731cca..e4e7e30 100644
--- a/frontend/pages/staff/profiles/index.vue
+++ b/frontend/pages/staff/profiles/index.vue
@@ -41,7 +41,7 @@
   <UTable
     :data="items"
     :columns="normalizeTableColumns(columns)"
-    @select="(i) => navigateTo(`/staff/profiles/${i.id}`)"
+    :on-select="(i) => navigateTo(`/staff/profiles/${i.id}`)"
   >
 
   </UTable>
diff --git a/frontend/pages/standardEntity/[type]/index.vue b/frontend/pages/standardEntity/[type]/index.vue
index 7d80434..6b43d78 100644
--- a/frontend/pages/standardEntity/[type]/index.vue
+++ b/frontend/pages/standardEntity/[type]/index.vue
@@ -672,70 +672,72 @@ const truncateValue = (value, maxLength) => {
     </UDashboardPanelContent>
     <!-- Mobile Filter Slideover -->
     <USlideover
-        v-model="showMobileFilter"
+        v-model:open="showMobileFilter"
         side="bottom"
         :ui="{ width: '100%', height: 'auto', maxHeight: '90vh' }"
         class="pb-[env(safe-area-inset-bottom)]"
     >
-      <!-- Header -->
-      <div class="p-4 border-b flex items-center justify-between flex-shrink-0">
-        <h2 class="text-xl font-bold">Filter</h2>
-        <UButton
-            icon="i-heroicons-x-mark"
-            variant="ghost"
-            @click="showMobileFilter = false"
-        />
-      </div>
-
-      <!-- Scrollable content -->
-      <div class="flex-1 overflow-y-auto p-4 space-y-6">
-
-        <div
-            v-for="column in dataType.templateColumns.filter(c => c.distinct)"
-            :key="column.key"
-            class="space-y-2"
-        >
-          <p class="font-semibold">{{ column.label }}</p>
-
-          <USelectMenu
-              v-model="columnsToFilter[column.key]"
-              :options="itemsMeta?.distinctValues?.[column.key]"
-              multiple
-              searchable
-              :search-attributes="[column.key]"
-              placeholder="Auswählen…"
-              :ui-menu="{ width: '100%' }"
+      <template #body>
+        <!-- Header -->
+        <div class="p-4 border-b flex items-center justify-between flex-shrink-0">
+          <h2 class="text-xl font-bold">Filter</h2>
+          <UButton
+              icon="i-heroicons-x-mark"
+              variant="ghost"
+              @click="showMobileFilter = false"
           />
         </div>
 
-      </div>
+        <!-- Scrollable content -->
+        <div class="flex-1 overflow-y-auto p-4 space-y-6">
 
-      <!-- Footer FIXED in card -->
-      <div
-          class="
-        flex justify-between gap-3
-        px-4 py-4 border-t flex-shrink-0
-        bg-white dark:bg-gray-900
-        rounded-b-2xl
-      "
-      >
-        <UButton
-            color="error"
-            variant="outline"
-            class="flex-1"
-            @click="resetMobileFilters"
-        >
-          Zurücksetzen
-        </UButton>
+          <div
+              v-for="column in dataType.templateColumns.filter(c => c.distinct)"
+              :key="column.key"
+              class="space-y-2"
+          >
+            <p class="font-semibold">{{ column.label }}</p>
 
-        <UButton
-            color="primary"
-            class="flex-1"
-            @click="applyMobileFilters"
+            <USelectMenu
+                v-model="columnsToFilter[column.key]"
+                :options="itemsMeta?.distinctValues?.[column.key]"
+                multiple
+                searchable
+                :search-attributes="[column.key]"
+                placeholder="Auswählen…"
+                :ui-menu="{ width: '100%' }"
+            />
+          </div>
+
+        </div>
+
+        <!-- Footer FIXED in card -->
+        <div
+            class="
+          flex justify-between gap-3
+          px-4 py-4 border-t flex-shrink-0
+          bg-white dark:bg-gray-900
+          rounded-b-2xl
+        "
         >
-          Anwenden
-        </UButton>
-      </div>
+          <UButton
+              color="error"
+              variant="outline"
+              class="flex-1"
+              @click="resetMobileFilters"
+          >
+            Zurücksetzen
+          </UButton>
+
+          <UButton
+              color="primary"
+              class="flex-1"
+              @click="applyMobileFilters"
+          >
+            Anwenden
+          </UButton>
+        </div>
+      </template>
     </USlideover>
 
 
diff --git a/frontend/pages/support/[id].vue b/frontend/pages/support/[id].vue
index bad2a0e..550ec59 100644
--- a/frontend/pages/support/[id].vue
+++ b/frontend/pages/support/[id].vue
@@ -50,60 +50,7 @@ const addMessage = async () => {
     <template #center>
       {{itemInfo.title}}
     </template>
-    <template #right>
-<!--      <UButton
-        v-if="profileStore.currentTenant === 5"
-        variant="outline"
-        @click="closeTicket"
-      >
-        Ticket Schließen
-      </UButton>
-      <UButton
-        v-if="profileStore.currentTenant === 5"
-        variant="outline"
-        @click="showAddEntryModal = true"
-      >
-        + Eintrag
-      </UButton>
-      <UModal v-model:open="showAddEntryModal">
-        <UCard>
-          <template #header>
-            Eintrag hinzufügen
-          </template>
-
-          <UFormGroup
-            label="Intern:"
-          >
-            <UToggle
-              v-model="addEntryData.internal"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="Typ:"
-          >
-            <USelectMenu
-              v-model="addEntryData.type"
-              :options="['Nachricht','Notiz','Anruf','Externe Kommunikation']"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="Inhalt:"
-          >
-            <UTextarea
-              v-model="addEntryData.content"
-            />
-          </UFormGroup>
-
-          <template #footer>
-            <UButton
-              @click="addEntry"
-            >
-              Erstellen
-            </UButton>
-          </template>
-        </UCard>
-      </UModal>-->
-    </template>
+    <template #right />
   </UDashboardNavbar>
   <UDashboardPanelContent v-if="loaded">
 
diff --git a/frontend/pages/support/create.vue b/frontend/pages/support/create.vue
index 5d9d570..a28073a 100644
--- a/frontend/pages/support/create.vue
+++ b/frontend/pages/support/create.vue
@@ -40,20 +40,20 @@ const createTicket = async () => {
     </template>
   </UDashboardNavbar>
   <UForm class="w-2/3 mx-auto mt-5">
-    <UFormGroup
+    <UFormField
       label="Titel:"
     >
       <UInput
         v-model="itemInfo.title"
       />
-    </UFormGroup>
-    <UFormGroup
+    </UFormField>
+    <UFormField
       label="Nachricht:"
     >
       <UTextarea
         v-model="itemInfo.content"
       />
-    </UFormGroup>
+    </UFormField>
   </UForm>
 </template>
 
diff --git a/frontend/pages/support/index.vue b/frontend/pages/support/index.vue
index 1e87aaa..bb1d425 100644
--- a/frontend/pages/support/index.vue
+++ b/frontend/pages/support/index.vue
@@ -59,13 +59,13 @@ const filteredRows = computed(() => {
       />
       <USelectMenu
           v-if="profileStore.currentTenant === 5"
-        :ui-menu="{ width: 'min-w-max' }"
-        :options="tenants"
-        option-attribute="name"
-        value-attribute="id"
+        :content="{ width: 'min-w-max' }"
+        :items="tenants"
+        label-key="name"
+        value-key="id"
         v-model="selectedTenant"
       >
-        <template #label>
+        <template #default>
           {{selectedTenant ? tenants.find(i => i.id === selectedTenant).name : "Nicht nach Tenant filtern"}}
         </template>
       </USelectMenu>
@@ -73,25 +73,25 @@ const filteredRows = computed(() => {
   </UDashboardToolbar>
   <UTable
     :data="filteredRows"
-    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Tickets anzuzeigen` }"
-    @select="(i) => router.push(`/support/${i.id}`)"
+    :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Tickets anzuzeigen` }"
+    :on-select="(i) => router.push(`/support/${i.id}`)"
     :columns="normalizeTableColumns([{key:'created_at',label:'Datum'}, ...profileStore.currentTenant === 5 ? [{key:'tenant',label:'Tenant'}] : [],{key:'status',label:'Status'},{key:'title',label:'Titel'},{key:'created_by',label:'Ersteller'},{key:'ticketmessages',label:'Nachrichten'}])"
   >
-    <template #tenant-data="{ row }">
-     {{row.tenant.name}}
+    <template #tenant-cell="{ row }">
+     {{row.original.tenant.name}}
     </template>
-    <template #status-data="{ row }">
-     <span v-if="row.status === 'Offen'" class="text-yellow-500">Offen</span>
-     <span v-else-if="row.status === 'Geschlossen'" class="text-primary">Geschlossen</span>
+    <template #status-cell="{ row }">
+     <span v-if="row.original.status === 'Offen'" class="text-yellow-500">Offen</span>
+     <span v-else-if="row.original.status === 'Geschlossen'" class="text-primary">Geschlossen</span>
     </template>
-    <template #created_by-data="{ row }">
-     {{row.created_by.fullName}}
+    <template #created_by-cell="{ row }">
+     {{row.original.created_by.fullName}}
     </template>
-    <template #created_at-data="{ row }">
-     {{dayjs(row.created_at).format('DD.MM.YYYY HH:mm')}}
+    <template #created_at-cell="{ row }">
+     {{dayjs(row.original.created_at).format('DD.MM.YYYY HH:mm')}}
     </template>
-    <template #ticketmessages-data="{ row }">
-     {{row.ticketmessages.length}}
+    <template #ticketmessages-cell="{ row }">
+     {{row.original.ticketmessages.length}}
     </template>
   </UTable>
 </template>
diff --git a/frontend/pages/tasks/index.vue b/frontend/pages/tasks/index.vue
index 830237a..757907e 100644
--- a/frontend/pages/tasks/index.vue
+++ b/frontend/pages/tasks/index.vue
@@ -460,34 +460,34 @@ onMounted(async () => {
         v-else-if="filteredTasks.length"
         :data="filteredTasks"
         :columns="normalizedListColumns"
-        @select="(task) => openTaskViaRoute(task)"
+        :on-select="(task) => openTaskViaRoute(task)"
     >
-      <template #actions-data="{ row }">
+      <template #actions-cell="{ row }">
         <UButton
-            v-if="normalizeStatus(row.categorie) !== 'Abgeschlossen' && canCreate"
+            v-if="normalizeStatus(row.original.categorie) !== 'Abgeschlossen' && canCreate"
             size="xs"
             variant="soft"
             icon="i-heroicons-check"
-            :loading="quickCompleteLoadingId === row.id"
-            @click.stop="completeTaskQuick(row)"
+            :loading="quickCompleteLoadingId === row.original.id"
+            @click.stop="completeTaskQuick(row.original)"
         >
           Erledigt
         </UButton>
       </template>
-      <template #categorie-data="{ row }">
-        <UBadge variant="soft">{{ normalizeStatus(row.categorie) }}</UBadge>
+      <template #categorie-cell="{ row }">
+        <UBadge variant="soft">{{ normalizeStatus(row.original.categorie) }}</UBadge>
       </template>
-      <template #assignee-data="{ row }">
-        {{ getAssigneeLabel(row) }}
+      <template #assignee-cell="{ row }">
+        {{ getAssigneeLabel(row.original) }}
       </template>
-      <template #project-data="{ row }">
-        {{ getEntityLabel(projectOptions, row.project?.id || row.project) || "-" }}
+      <template #project-cell="{ row }">
+        {{ getEntityLabel(projectOptions, row.original.project?.id || row.original.project) || "-" }}
       </template>
-      <template #customer-data="{ row }">
-        {{ getEntityLabel(customerOptions, row.customer?.id || row.customer) || "-" }}
+      <template #customer-cell="{ row }">
+        {{ getEntityLabel(customerOptions, row.original.customer?.id || row.original.customer) || "-" }}
       </template>
-      <template #plant-data="{ row }">
-        {{ getEntityLabel(plantOptions, row.plant?.id || row.plant) || "-" }}
+      <template #plant-cell="{ row }">
+        {{ getEntityLabel(plantOptions, row.original.plant?.id || row.original.plant) || "-" }}
       </template>
     </UTable>
     <UAlert
@@ -499,13 +499,14 @@ onMounted(async () => {
   </UDashboardPanelContent>
 
   <UModal v-model:open="isModalOpen" :prevent-close="saving || deleting">
-    <UCard>
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="font-semibold">{{ modalTitle }}</h3>
-          <UBadge variant="subtle">{{ taskForm.id ? `#${taskForm.id}` : "Neu" }}</UBadge>
-        </div>
-      </template>
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="font-semibold">{{ modalTitle }}</h3>
+            <UBadge variant="subtle">{{ taskForm.id ? `#${taskForm.id}` : "Neu" }}</UBadge>
+          </div>
+        </template>
 
       <div class="space-y-3">
         <div>
@@ -519,105 +520,106 @@ onMounted(async () => {
 
         <USelectMenu
             v-model="taskForm.categorie"
-            :options="STATUS_COLUMNS.map((status) => ({ label: status, value: status }))"
-            value-attribute="value"
-            option-attribute="label"
+            :items="STATUS_COLUMNS.map((status) => ({ label: status, value: status }))"
+            value-key="value"
+            label-key="label"
             :disabled="isFormReadonly || !canCreate"
         >
-          <template #label>
+          <template #default>
             {{ taskForm.categorie || "Status auswählen" }}
           </template>
         </USelectMenu>
 
         <USelectMenu
             v-model="taskForm.userId"
-            :options="assigneeOptions"
-            value-attribute="value"
-            option-attribute="label"
+            :items="assigneeOptions"
+            value-key="value"
+            label-key="label"
             :disabled="isFormReadonly || !canCreate"
             searchable
         >
-          <template #label>
+          <template #default>
             {{ assigneeOptions.find((option) => option.value === taskForm.userId)?.label || "Zuweisung" }}
           </template>
         </USelectMenu>
 
         <USelectMenu
             v-model="taskForm.project"
-            :options="projectOptions"
-            value-attribute="value"
-            option-attribute="label"
+            :items="projectOptions"
+            value-key="value"
+            label-key="label"
             :disabled="isFormReadonly || !canCreate"
             searchable
             clear-search-on-close
         >
-          <template #label>
+          <template #default>
             {{ getEntityLabel(projectOptions, taskForm.project) || "Projekt" }}
           </template>
         </USelectMenu>
 
         <USelectMenu
             v-model="taskForm.customer"
-            :options="customerOptions"
-            value-attribute="value"
-            option-attribute="label"
+            :items="customerOptions"
+            value-key="value"
+            label-key="label"
             :disabled="isFormReadonly || !canCreate"
             searchable
             clear-search-on-close
         >
-          <template #label>
+          <template #default>
             {{ getEntityLabel(customerOptions, taskForm.customer) || "Kunde" }}
           </template>
         </USelectMenu>
 
         <USelectMenu
             v-model="taskForm.plant"
-            :options="plantOptions"
-            value-attribute="value"
-            option-attribute="label"
+            :items="plantOptions"
+            value-key="value"
+            label-key="label"
             :disabled="isFormReadonly || !canCreate"
             searchable
             clear-search-on-close
         >
-          <template #label>
+          <template #default>
             {{ getEntityLabel(plantOptions, taskForm.plant) || "Objekt" }}
           </template>
         </USelectMenu>
       </div>
 
-      <template #footer>
-        <div class="flex items-center justify-between gap-2">
-          <div class="flex gap-2">
-            <UButton
-                v-if="taskForm.id && canCreate"
-                variant="soft"
-                :loading="deleting"
-                @click="archiveTask"
-            >
-              Archivieren
-            </UButton>
-          </div>
+        <template #footer>
+          <div class="flex items-center justify-between gap-2">
+            <div class="flex gap-2">
+              <UButton
+                  v-if="taskForm.id && canCreate"
+                  variant="soft"
+                  :loading="deleting"
+                  @click="archiveTask"
+              >
+                Archivieren
+              </UButton>
+            </div>
 
-          <div class="flex gap-2">
-            <UButton variant="ghost" @click="closeModal">Schließen</UButton>
-            <UButton
-                v-if="modalMode === 'show' && canCreate"
-                variant="soft"
-                @click="modalMode = 'edit'"
-            >
-              Bearbeiten
-            </UButton>
-            <UButton
-                v-if="modalMode !== 'show' && canCreate"
-                :loading="saving"
-                @click="saveTask"
-            >
-              Speichern
-            </UButton>
+            <div class="flex gap-2">
+              <UButton variant="ghost" @click="closeModal">Schließen</UButton>
+              <UButton
+                  v-if="modalMode === 'show' && canCreate"
+                  variant="soft"
+                  @click="modalMode = 'edit'"
+              >
+                Bearbeiten
+              </UButton>
+              <UButton
+                  v-if="modalMode !== 'show' && canCreate"
+                  :loading="saving"
+                  @click="saveTask"
+              >
+                Speichern
+              </UButton>
+            </div>
           </div>
-        </div>
-      </template>
-    </UCard>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 </template>
 
diff --git a/frontend/pages/wiki/[[id]].vue b/frontend/pages/wiki/[[id]].vue
index fcb9a7f..a010854 100644
--- a/frontend/pages/wiki/[[id]].vue
+++ b/frontend/pages/wiki/[[id]].vue
@@ -92,33 +92,35 @@
     </main>
 
     <UModal v-model:open="isModalOpen">
-      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">{{ modalTitle }}</h3>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isModalOpen = false" />
+      <template #content>
+        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">{{ modalTitle }}</h3>
+              <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isModalOpen = false" />
+            </div>
+          </template>
+          <div v-if="modalState.type === 'create'" class="space-y-4">
+            <UFormField label="Titel" name="title">
+              <UInput v-model="modalState.inputValue" autofocus placeholder="z.B. Meeting Notes" @keyup.enter="handleModalConfirm" />
+            </UFormField>
           </div>
-        </template>
-        <div v-if="modalState.type === 'create'" class="space-y-4">
-          <UFormGroup label="Titel" name="title">
-            <UInput v-model="modalState.inputValue" autofocus placeholder="z.B. Meeting Notes" @keyup.enter="handleModalConfirm" />
-          </UFormGroup>
-        </div>
-        <div v-else-if="modalState.type === 'delete'">
-          <p class="text-sm text-gray-500 dark:text-gray-300">
-            Möchtest du <strong>"{{ modalState.targetItem?.title }}"</strong> wirklich löschen?
-            <br><span v-if="modalState.targetItem?.isFolder" class="text-red-500 font-medium">Alle Unterseiten werden ebenfalls gelöscht.</span>
-          </p>
-        </div>
-        <template #footer>
-          <div class="flex justify-end gap-2">
-            <UButton color="gray" variant="ghost" @click="isModalOpen = false">Abbrechen</UButton>
-            <UButton :color="modalState.type === 'delete' ? 'red' : 'primary'" :loading="modalLoading" @click="handleModalConfirm">
-              {{ modalState.type === 'delete' ? 'Löschen' : 'Erstellen' }}
-            </UButton>
+          <div v-else-if="modalState.type === 'delete'">
+            <p class="text-sm text-gray-500 dark:text-gray-300">
+              Möchtest du <strong>"{{ modalState.targetItem?.title }}"</strong> wirklich löschen?
+              <br><span v-if="modalState.targetItem?.isFolder" class="text-red-500 font-medium">Alle Unterseiten werden ebenfalls gelöscht.</span>
+            </p>
           </div>
-        </template>
-      </UCard>
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton color="gray" variant="ghost" @click="isModalOpen = false">Abbrechen</UButton>
+              <UButton :color="modalState.type === 'delete' ? 'red' : 'primary'" :loading="modalLoading" @click="handleModalConfirm">
+                {{ modalState.type === 'delete' ? 'Löschen' : 'Erstellen' }}
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
     </UModal>
 
   </div>