diff --git a/pages/createDocument/index.vue b/pages/createDocument/index.vue
index b893272..f35a073 100644
--- a/pages/createDocument/index.vue
+++ b/pages/createDocument/index.vue
@@ -72,78 +72,85 @@
     </template>
   </UDashboardToolbar>
 
-  <UTable
-      :rows="filteredRows"
-      :columns="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' }"
-  >
-    <template #type-data="{row}">
-      {{dataStore.documentTypesForCreation[row.type].labelSingle}}
-      <span v-if="row.type === 'cancellationInvoices'"> zu {{row.linkedDocument.documentNumber}}</span>
-    </template>
-    <template #state-data="{row}">
+  <UTabs :items="selectedTypes" class="m-3">
+    <template #item="{item}">
+      <div style="height: 80vh; overflow-y: scroll">
+        <UTable
+            :rows="filteredRows.filter(i => i.type === item.key)"
+            :columns="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' }"
+        >
+          <template #type-data="{row}">
+            {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+            <span v-if="row.type === 'cancellationInvoices'"> zu {{row.linkedDocument.documentNumber}}</span>
+          </template>
+          <template #state-data="{row}">
       <span
-        v-if="row.state === 'Entwurf'"
-        class="text-rose-500"
+          v-if="row.state === 'Entwurf'"
+          class="text-rose-500"
       >
         {{row.state}}
       </span>
-<!--      <span
-          v-if="row.state === 'Gebucht'"
-          class="text-cyan-500"
-      >
-          {{row.state}}
-      </span>-->
-      <span
-          v-if="row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
-          class="text-primary-500"
-      >
+            <!--      <span
+                      v-if="row.state === 'Gebucht'"
+                      class="text-cyan-500"
+                  >
+                      {{row.state}}
+                  </span>-->
+            <span
+                v-if="row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
+                class="text-primary-500"
+            >
           {{row.state}}
       </span>
-      <span
-          v-else-if="row.state === 'Gebucht' && items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) && ['invoices','advanceInvoices'].includes(row.type)"
-          class="text-cyan-500"
-      >
+            <span
+                v-else-if="row.state === 'Gebucht' && items.find(i => i.linkedDocument && i.linkedDocument.id === row.id && i.type === 'cancellationInvoices') && ['invoices','advanceInvoices'].includes(row.type)"
+                class="text-cyan-500"
+            >
           Storniert mit {{items.find(i => i.linkedDocument && i.linkedDocument.id === row.id).documentNumber}}
       </span>
-      <span
-          v-else-if="row.state === 'Gebucht'"
-          class="text-primary-500"
-      >
+            <span
+                v-else-if="row.state === 'Gebucht'"
+                class="text-primary-500"
+            >
           {{row.state}}
       </span>
-    </template>
-    <template #partner-data="{row}">
-      <span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
+          </template>
+          <template #partner-data="{row}">
+            <span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
+
+          </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>
+          <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>
+          <template #dueDate-data="{row}">
+            <span v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)" :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' ">{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
+          </template>
+          <template #paid-data="{row}">
+            <div v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
+              <span v-if="useSum().getIsPaid(row,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>
+          <template #amountOpen-data="{row}">
+            <span v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">{{displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n,{amount}) => n + amount, 0))}}</span>
+          </template>
+        </UTable>
+      </div>
 
     </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>
-    <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>
-    <template #dueDate-data="{row}">
-      <span v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)" :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' ">{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
-    </template>
-    <template #paid-data="{row}">
-      <div v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
-        <span v-if="useSum().getIsPaid(row,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>
-    <template #amountOpen-data="{row}">
-      <span v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">{{displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n,{amount}) => n + amount, 0))}}</span>
-    </template>
-  </UTable>
+  </UTabs>
 
 </template>