diff --git a/pages/incomingInvoices/create.vue b/pages/incomingInvoices/create.vue
new file mode 100644
index 0000000..3e936ee
--- /dev/null
+++ b/pages/incomingInvoices/create.vue
@@ -0,0 +1,479 @@
+<script setup>
+import InputGroup from "~/components/InputGroup.vue";
+import dayjs from "dayjs";
+import HistoryDisplay from "~/components/HistoryDisplay.vue";
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+
+const itemInfo = ref({
+  vendor: 0,
+  expense: true,
+  reference: "",
+  date:  null,
+  dueDate: null,
+  paymentType: "Überweisung",
+  description: "",
+  state: "Entwurf",
+  accounts: [
+    {
+      account: null,
+      amountNet: null,
+      amountTax: null,
+      taxType: "19",
+      costCentre: null
+    }
+  ]
+})
+
+const availableDocuments = ref([])
+const setup = async () => {
+  let filetype = (await supabase.from("filetags").select().eq("tenant",profileStore.currentTenant).eq("incomingDocumentType","invoices").single()).data.id
+  console.log(filetype)
+  let ids = (await supabase.from("files").select("id").eq("tenant",profileStore.currentTenant).eq("type", filetype).is("incominginvoice",null)).data.map(i => i.id)
+  availableDocuments.value = await useFiles().selectSomeDocuments(ids)
+
+}
+
+setup()
+
+const useNetMode = ref(false)
+
+const loadedFile = ref(null)
+const loadFile = async (id) => {
+  console.log(id)
+  loadedFile.value = await useFiles().selectDocument(id)
+  console.log(loadedFile.value)
+}
+
+
+
+
+const changeNetMode = (mode) => {
+  useNetMode.value = mode
+
+  itemInfo.value.accounts = [{account: null,amountNet: null,amountTax: null,taxType: '19'}]
+}
+
+
+
+
+const taxOptions = ref([
+  {
+    label: "19% USt",
+    percentage: 19,
+    key: "19"
+  },{
+    label: "7% USt",
+    percentage: 7,
+    key: "7"
+  },{
+    label: "Innergemeintschaftlicher Erwerb 19%",
+    percentage: 0,
+    key: "19I"
+  },{
+    label: "Innergemeintschaftlicher Erwerb 7%",
+    percentage: 0,
+    key: "7I"
+  },{
+    label: "§13b UStG",
+    percentage: 0,
+    key: "13B"
+  },{
+    label: "Keine USt",
+    percentage: 0,
+    key: "null"
+  },
+])
+
+
+const totalCalculated = computed(() => {
+  let totalNet = 0
+  let totalAmount19Tax = 0
+  let totalAmount7Tax = 0
+  let totalAmount0Tax = 0
+  let totalGross = 0
+
+  itemInfo.value.accounts.forEach(account => {
+    if(account.amountNet) totalNet += account.amountNet
+
+    if(account.taxType === "19" && account.amountTax) {
+      totalAmount19Tax += account.amountTax
+    }
+  })
+
+  totalGross = Number(totalNet + totalAmount19Tax)
+
+  return {
+    totalNet,
+    totalAmount19Tax,
+    totalGross
+  }
+
+})
+
+const createIncomingInvoice = async () => {
+  const data = await dataStore.createNewItem('incominginvoices',itemInfo.value)
+
+  console.log(data)
+
+  const {error} = await supabase.from("files").update({incominginvoice: data[0].id}).eq("id",loadedFile.value.id)
+
+}
+
+
+</script>
+
+<template>
+  <UDashboardNavbar :title="'Eingangsbeleg erstellen'">
+    <template #right>
+      <UButton
+          @click="createIncomingInvoice"
+      >
+        Speichern
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <div v-if="!loadedFile">
+      <DocumentList
+          :documents="availableDocuments"
+          :return-document-id="true"
+          @selectDocument="(documentId) => loadFile(documentId)"
+      />
+    </div>
+    <div
+        v-else
+        class="flex justify-between mt-5"
+    >
+      <object
+          v-if="loadedFile"
+          :data="loadedFile.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
+          type="application/pdf"
+          class="mx-5 documentPreview w-full"
+      />
+      <div class="w-3/5 mx-5">
+
+        <div v-if="mode === 'show'">
+
+          <div class="truncate mb-5">
+            <p>Status: {{itemInfo.state}}</p>
+            <p>Datum: {{dayjs(itemInfo.date).format('DD.MM.YYYY')}}</p>
+            <p>Fälligkeitsdatum: {{dayjs(itemInfo.dueDate).format('DD.MM.YYYY')}}</p>
+            <p>Lieferant: <nuxt-link :to="`/vendors/show/${itemInfo.vendor}`">{{dataStore.getVendorById(itemInfo.vendor).name}}</nuxt-link></p>
+            <p>Bezahlt: {{itemInfo.paid}}</p>
+            <p>Beschreibung: {{itemInfo.description}}</p>
+
+            <!--     TODO: Buchungszeilen darstellen     -->
+          </div>
+
+          <HistoryDisplay
+              type="incomingInvoice"
+              v-if="itemInfo"
+              :element-id="itemInfo.id"
+              :render-headline="true"
+          />
+        </div>
+
+        <div v-else class=" scrollContainer">
+          <InputGroup class="mb-3">
+            <UButton
+                :variant="itemInfo.expense ? 'solid' : 'outline'"
+                @click="itemInfo.expense = true"
+            >
+              Ausgabe
+            </UButton>
+            <UButton
+                :variant="!itemInfo.expense ? 'solid' : 'outline'"
+                @click="itemInfo.expense = false"
+            >
+              Einnahme
+            </UButton>
+          </InputGroup>
+
+          <UFormGroup label="Lieferant:" required>
+            <InputGroup>
+              <USelectMenu
+                  v-model="itemInfo.vendor"
+                  :options="dataStore.vendors"
+                  option-attribute="name"
+                  value-attribute="id"
+                  searchable
+                  :search-attributes="['name','vendorNumber']"
+                  class="flex-auto"
+                  searchable-placeholder="Suche..."
+              >
+                <template #option="{option}">
+                  {{option.vendorNumber}} - {{option.name}}
+                </template>
+                <template #label>
+                  {{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
+                </template>
+              </USelectMenu>
+              <UButton
+                  @click="router.push('/vendors/create')"
+              >
+                + Lieferant
+              </UButton>
+            </InputGroup>
+
+
+          </UFormGroup>
+
+          <UFormGroup
+              class="mt-3"
+              label="Rechnungsreferenz:"
+              required
+          >
+            <UInput
+                v-model="itemInfo.reference"
+            />
+          </UFormGroup>
+
+          <InputGroup class="mt-3" gap="2">
+            <UFormGroup label="Rechnungsdatum:" required>
+              <UPopover :popper="{ placement: 'bottom-start' }">
+                <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : 'Datum auswählen'" />
+
+                <template #panel="{ close }">
+                  <LazyDatePicker v-model="itemInfo.date" @close="close" />
+                </template>
+              </UPopover>
+            </UFormGroup>
+
+            <UFormGroup label="Fälligkeitsdatum:" required>
+              <UPopover :popper="{ placement: 'bottom-start' }">
+                <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : 'Datum auswählen'" />
+
+                <template #panel="{ close }">
+                  <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
+                </template>
+              </UPopover>
+            </UFormGroup>
+          </InputGroup>
+
+
+
+          <UFormGroup label="Zahlart:" required>
+            <USelectMenu
+                :options="['Einzug','Kreditkarte','Überweisung','Sonstiges']"
+                v-model="itemInfo.paymentType"
+            />
+          </UFormGroup>
+
+          <UFormGroup label="Beschreibung:" required>
+            <UTextarea
+                v-model="itemInfo.description"
+            />
+          </UFormGroup>
+
+          <InputGroup class="my-3">
+            <UButton
+              :variant="!useNetMode ? 'solid' : 'outline'"
+              @click="changeNetMode(false)"
+            >
+              Brutto
+            </UButton>
+            <UButton
+              :variant="useNetMode ? 'solid' : 'outline'"
+              @click="changeNetMode(true)"
+            >
+              Netto
+            </UButton>
+
+
+
+<!--            Brutto
+            <UToggle
+                v-model="useNetMode"
+                @update:model-value="itemInfo.accounts = [{account: null,amountNet: null,amountTax: null,taxType: '19'}]"
+            />
+            Netto-->
+          </InputGroup>
+
+          <table v-if="itemInfo.accounts.length > 1" class="w-full">
+            <tr>
+              <td>Gesamt exkl. Steuer: </td>
+              <td class="text-right">{{totalCalculated.totalNet.toFixed(2).replace(".",",")}} €</td>
+            </tr>
+            <tr>
+              <td>19% Steuer: </td>
+              <td class="text-right">{{totalCalculated.totalAmount19Tax.toFixed(2).replace(".",",")}} €</td>
+            </tr>
+            <tr>
+              <td>Gesamt inkl. Steuer: </td>
+              <td class="text-right">{{totalCalculated.totalGross.toFixed(2).replace(".",",")}} €</td>
+            </tr>
+          </table>
+
+          <div
+              class="my-3"
+              v-for="(item,index) in itemInfo.accounts"
+          >
+
+            <UFormGroup
+                label="Kategorie"
+                class=" mb-3"
+            >
+              <USelectMenu
+                  :options="dataStore.accounts"
+                  option-attribute="label"
+                  value-attribute="id"
+                  searchable
+                  :search-attributes="['label']"
+                  searchable-placeholder="Suche..."
+                  v-model="item.account"
+              >
+                <template #label>
+                  {{dataStore.accounts.find(account => account.id === item.account) ? dataStore.accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
+                </template>
+
+              </USelectMenu>
+            </UFormGroup>
+            <UFormGroup
+                label="Kostenstelle"
+                class=" mb-3"
+            >
+              <USelectMenu
+                  :options="dataStore.getCostCentresComposed"
+                  option-attribute="label"
+                  value-attribute="id"
+                  searchable
+                  :search-attributes="['label']"
+                  searchable-placeholder="Suche..."
+                  v-model="item.costCentre"
+              >
+                <template #label>
+                  {{dataStore.getCostCentresComposed.find(account => account.id === item.costCentre) ? dataStore.getCostCentresComposed.find(account => account.id === item.costCentre).label : "Keine Kostenstelle ausgewählt" }}
+                </template>
+
+              </USelectMenu>
+            </UFormGroup>
+
+
+
+            <InputGroup>
+              <UFormGroup
+                  label="Umsatzsteuer"
+                  class="w-32"
+                  :help="`Betrag: ${item.amountTax ? String(item.amountTax).replace('.',',') : '0,00'} €`"
+              >
+                <USelectMenu
+                    :options="taxOptions"
+                    v-model="item.taxType"
+                    value-attribute="key"
+                    option-attribute="label"
+                    @change="item.amountTax = Number(((item.amountNet ? item.amountNet : 0) * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
+                >
+                  <template #label>
+                    <span class="truncate">{{taxOptions.find(i => i.key === item.taxType) ? taxOptions.find(i => i.key === item.taxType).label : ""}}</span>
+                  </template>
+                </USelectMenu>
+              </UFormGroup>
+              <UFormGroup
+                  v-if="useNetMode"
+                  label="Gesamtbetrag exkl. Steuer in EUR"
+                  class="flex-auto truncate"
+                  :help="item.taxType !== null ? `Betrag inkl. Steuern: ${String(Number(item.amountNet + item.amountTax).toFixed(2)).replace('.',',')} €` : 'Zuerst Steuertyp festlegen' "
+
+              >
+                <UInput
+                    type="number"
+                    step="0.01"
+                    v-model="item.amountNet"
+                    :disabled="item.taxType === null"
+                    @keyup="item.amountTax = Number((item.amountNet * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
+                >
+                  <template #trailing>
+                    <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
+                  </template>
+                </UInput>
+              </UFormGroup>
+              <UFormGroup
+                  v-else
+                  label="Gesamtbetrag inkl. Steuer in EUR"
+                  class="flex-auto"
+                  :help="item.taxType !== null ? `Betrag exkl. Steuern: ${item.amountNet ? String(item.amountNet.toFixed(2)).replace('.',',') : '0,00'} €` : 'Zuerst Steuertyp festlegen' "
+
+              >
+                <UInput
+                    type="number"
+                    step="0.01"
+                    :disabled="item.taxType === null"
+                    v-model="item.amountGross"
+                    @keyup="item.amountNet = Number((item.amountGross / (1 + Number(item.taxType)/100)).toFixed(2)),
+                  item.amountTax = Number((item.amountGross - item.amountNet).toFixed(2))"
+                >
+                  <template #trailing>
+                    <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
+                  </template>
+                </UInput>
+
+              </UFormGroup>
+
+
+            </InputGroup>
+
+
+            <UButton
+                class="mt-3"
+                @click="itemInfo.accounts = [...itemInfo.accounts.slice(0,index+1),{account:null, amountNet: null, amountTax:null, taxType: '19'} , ...itemInfo.accounts.slice(index+1)]"
+            >
+              Position hinzufügen
+            </UButton>
+            <UButton
+                v-if="index !== 0"
+                class="mt-3"
+                variant="ghost"
+                color="rose"
+                @click="itemInfo.accounts = itemInfo.accounts.filter((account,itemIndex) => itemIndex !== index)"
+            >
+              Position entfernen
+            </UButton>
+
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </UDashboardPanelContent>
+
+
+
+
+</template>
+
+<style scoped>
+.documentPreview {
+  aspect-ratio: 1 / 1.414;
+}
+
+
+
+.scrollContainer {
+  overflow-y: scroll;
+  padding-left: 1em;
+  padding-right: 1em;
+  height: 75vh;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.scrollContainer::-webkit-scrollbar {
+  display: none;
+}
+
+
+.lineItemRow {
+  display: flex;
+  flex-direction: row;
+}
+</style>
\ No newline at end of file