diff --git a/pages/projects/[mode]/[[id]].vue b/pages/projects/[mode]/[[id]].vue
index 3253795..f4316ff 100644
--- a/pages/projects/[mode]/[[id]].vue
+++ b/pages/projects/[mode]/[[id]].vue
@@ -39,10 +39,6 @@ const tabItems = [
     key: "information",
     label: "Informationen"
   },
-  {
-    key: "historyDisplay",
-    label: "Logbuch"
-  },
   {
     key: "phases",
     label: "Phasen"
@@ -255,35 +251,42 @@ const loadPhases = async () => {
       v-model="openTab"
   >
     <template #item="{ item }">
-      <UCard class="mt-5">
-        <div v-if="item.key === 'information'">
+      <div v-if="item.key === 'information'" class="flex flex-row">
+        <div class="w-1/2 mr-3">
+          <UCard class="mt-5">
+            <div class="text-wrap">
+              <p>Kunde: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer.name}}</nuxt-link></p>
+              <p>Objekt: <nuxt-link v-if="itemInfo.plant" :to="`/plants/show/${itemInfo.plant.id}`">{{itemInfo.plant ? itemInfo.plant.name : ""}}</nuxt-link><span v-else>-</span></p>
+              <p class="">Notizen: {{itemInfo.notes}}</p>
+            </div>
+          </UCard>
+          <UCard class="mt-3">
+            <h1 class="font-bold text-lg mb-3">Beteiligte Benutzer:</h1>
+            <UAlert
+                v-for="projectUser in itemInfo.users"
+                :avatar="{ alt: dataStore.getProfileById(projectUser).fullName }"
+                :title="dataStore.getProfileById(projectUser).fullName"
+                class="mb-3"
 
-
-
-          <div class="text-wrap">
-            <p>Kunde: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer.name}}</nuxt-link></p>
-            <p>Objekt: <nuxt-link v-if="itemInfo.plant" :to="`/plants/show/${itemInfo.plant.id}`">{{itemInfo.plant ? itemInfo.plant.name : ""}}</nuxt-link><span v-else>-</span></p>
-            <p class="">Notizen: {{itemInfo.notes}}</p>
-          </div>
-
-          <UDivider class="my-3"/>
-          <h1 class="font-bold text-lg my-3">Beteiligte Benutzer:</h1>
-          <UAlert
-              v-for="projectUser in itemInfo.users"
-              :avatar="{ alt: dataStore.getProfileById(projectUser).fullName }"
-              :title="dataStore.getProfileById(projectUser).fullName"
-              class="mb-3"
-
-          />
+            />
+          </UCard>
         </div>
-        <div v-else-if="item.key === 'historyDisplay'">
-          <HistoryDisplay
-              type="project"
-              v-if="itemInfo"
-              :element-id="itemInfo.id"
-          />
+        <div class="w-1/2">
+          <UCard class="mt-5">
+            <HistoryDisplay
+                type="project"
+                v-if="itemInfo"
+                :element-id="itemInfo.id"
+                render-headline
+            />
+          </UCard>
         </div>
-        <div v-if="item.key === 'phases'" class="space-y-3">
+
+
+
+      </div>
+      <div v-if="item.key === 'phases'" class="space-y-3">
+        <UCard class="mt-5">
           <UFormGroup
               label="Vorlage laden"
               v-if="itemInfo.phases.length === 0"
@@ -312,9 +315,9 @@ const loadPhases = async () => {
           >
             <template #default="{item,index,open}">
               <UButton
-                variant="ghost"
-                :color="item.active ? 'primary' : 'white'"
-                class="mb-1"
+                  variant="ghost"
+                  :color="item.active ? 'primary' : 'white'"
+                  class="mb-1"
               >
                 <template #leading>
                   <div class="w-6 h-6  flex items-center justify-center -my-1">
@@ -345,8 +348,10 @@ const loadPhases = async () => {
               </InputGroup>
             </template>
           </UAccordion>
-        </div>
-        <!--<div v-if="item.key === 'tasks'" class="space-y-3">
+        </UCard>
+      </div>
+      <div v-if="item.key === 'tasks'" class="space-y-3">
+        <UCard class="mt-5">
           <Toolbar>
             <UButton
                 @click="router.push(`/tasks/create?project=${itemInfo.id}`)"
@@ -366,29 +371,28 @@ const loadPhases = async () => {
               {{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
             </template>
           </UTable>
+        </UCard>
 
-        </div>
-        <div v-else-if="item.key === 'documents'" class="space-y-3">
+
+
+      </div>
+      <div v-else-if="item.key === 'documents'" class="space-y-3">
+        <UCard class="mt-5">
           <Toolbar>
             <DocumentUpload
                 type="project"
                 :element-id="itemInfo.id"
             />
             <UButton
-                @click="router.push(`/createDocument/edit?project=${itemInfo.id}&type=quotes&customer=${itemInfo.customer.id}`)"
+                @click="router.push(`/createDocument/edit?project=${itemInfo.id}&customer=${itemInfo.customer.id}`)"
             >
-              + Angebot
-            </UButton>
-            <UButton
-                @click="router.push(`/createDocument/edit?project=${itemInfo.id}&type=invoices&customer=${itemInfo.customer.id}`)"
-            >
-              + Rechnung
+              + Dokument
             </UButton>
           </Toolbar>
 
           <UTable
-            :rows="dataStore.getCreatedDocumentsByProject(itemInfo.id)"
-            :columns="[
+              :rows="dataStore.getCreatedDocumentsByProject(itemInfo.id)"
+              :columns="[
                 {
                   label: 'Typ',
                   key: 'type'
@@ -404,8 +408,8 @@ const loadPhases = async () => {
                 }
 
             ]"
-            @select="(row) => row.state === 'Entwurf' ? router.push(`/createDocument/edit/${row.id}`) : router.push(`/createDocument/show/${row.id}`)"
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen erstellten Dokumente' }"
+              @select="(row) => row.state === 'Entwurf' ? router.push(`/createDocument/edit/${row.id}`) : router.push(`/createDocument/show/${row.id}`)"
+              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen erstellten Dokumente' }"
 
           >
             <template #type-data="{row}">
@@ -419,12 +423,14 @@ const loadPhases = async () => {
           </UTable>
 
           <DocumentList :documents="dataStore.getDocumentsByProjectId(itemInfo.id)"/>
-&lt;!&ndash;
-          {{dataStore.getDocumentsByProjectId(itemInfo.id)}}
-&ndash;&gt;
+        </UCard>
 
-        </div>
-        <div v-else-if="item.key === 'timetracking'" class="space-y-3">
+
+
+
+      </div>
+      <div v-else-if="item.key === 'timetracking'" class="space-y-3">
+        <UCard class="mt-5">
           Projekt Zeit: {{String(projectHours()).replace(".",",")}} Stunden
           <UTable
               :rows="dataStore.getTimesByProjectId(itemInfo.id)"
@@ -445,52 +451,57 @@ const loadPhases = async () => {
             </template>
 
           </UTable>
-        </div>
-        <div v-else-if="item.key === 'events'" class="space-y-3">
+        </UCard>
+
+
+      </div>
+      <div v-else-if="item.key === 'events'" class="space-y-3">
+        <UCard class="mt-5">
           <Toolbar>
             <UButton
-              @click="router.push(`/events/edit`)"
+                @click="router.push(`/events/edit`)"
             >
               + Termin
             </UButton>
           </Toolbar>
           <UTable
-            :rows="dataStore.getEventsByProjectId(itemInfo.id)"
-            @select="(i) => router.push(`/events/show/${i.id}`)"
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Termine anzuzeigen' }"
-            :columns="[{key:'title',label:'Titel'},{key:'start',label:'Start'},{key:'end',label:'Ende'},{key:'type',label:'Typ'},{key:'resources',label:'Resourcen'}]"
+              :rows="dataStore.getEventsByProjectId(itemInfo.id)"
+              @select="(i) => router.push(`/events/show/${i.id}`)"
+              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Termine anzuzeigen' }"
+              :columns="[{key:'title',label:'Titel'},{key:'start',label:'Start'},{key:'end',label:'Ende'},{key:'type',label:'Typ'},{key:'resources',label:'Resourcen'}]"
           >
-              <template #start-data="{row}">
-                {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
-              </template>
-              <template #end-data="{row}">
-                {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
-              </template>
-              <template #resources-data="{row}">
-                {{row.resources.map(i => i.title).join(", ")}}
-              </template>
+            <template #start-data="{row}">
+              {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
+            </template>
+            <template #end-data="{row}">
+              {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
+            </template>
+            <template #resources-data="{row}">
+              {{row.resources.map(i => i.title).join(", ")}}
+            </template>
           </UTable>
-
-        </div>
-        <div v-else-if="item.key === 'material'" class="space-y-3">
+        </UCard>
+      </div>
+      <div v-else-if="item.key === 'material'" class="space-y-3">
+        <UCard class="mt-5">
           Auf das Projekt gebuchte Artikel:
 
-&lt;!&ndash;          <UTable
-            :rows="dataStore.getStocksByProjectId(itemInfo.id)"
-            :columns="[{key:'productId',label:'Artikel'},{key:'stock',label:'Anzahl'}]"
-            @select="(i) => router.push(`/products/show/${i.productId}`)"
-          >
-            <template #productId-data="{row}">
-              {{dataStore.getProductById(row.productId).name}}
-            </template>
-            <template #stock-data="{row}">
-              {{dataStore.getProductById(row.productId)}}
-              {{row.stock}} {{dataStore.units.find(i => i.id === dataStore.getProductById(row.productId).unit).short}}
-            </template>
-          </UTable>&ndash;&gt;
+          <!--          <UTable
+                      :rows="dataStore.getStocksByProjectId(itemInfo.id)"
+                      :columns="[{key:'productId',label:'Artikel'},{key:'stock',label:'Anzahl'}]"
+                      @select="(i) => router.push(`/products/show/${i.productId}`)"
+                    >
+                      <template #productId-data="{row}">
+                        {{dataStore.getProductById(row.productId).name}}
+                      </template>
+                      <template #stock-data="{row}">
+                        {{dataStore.getProductById(row.productId)}}
+                        {{row.stock}} {{dataStore.units.find(i => i.id === dataStore.getProductById(row.productId).unit).short}}
+                      </template>
+                    </UTable>-->
+        </UCard>
+      </div>
 
-        </div>-->
-      </UCard>
     </template>
 
 
@@ -505,6 +516,15 @@ const loadPhases = async () => {
       />
     </UFormGroup>
 
+    <UFormGroup
+        label="Projektnummer:"
+    >
+      <UInput
+          v-model="itemInfo.projectNumber"
+          placeholder="Leer lassen für automatisch generierte Nummer"
+      />
+    </UFormGroup>
+
     <UFormGroup
         label="Kundennummer:"
     >
diff --git a/pages/projects/index.vue b/pages/projects/index.vue
index 74fbffb..b8689c5 100644
--- a/pages/projects/index.vue
+++ b/pages/projects/index.vue
@@ -119,12 +119,16 @@ const items = ref([])
 const selectedItem = ref(0)
 
 const setupPage = async () => {
-  items.value = await useSupabaseSelect("projects","*, customer (name), plant(name)")
+  items.value = await useSupabaseSelect("projects","*, customer (name), plant(name)","projectNumber")
 }
 
 setupPage()
 
 const templateColumns = [
+  {
+    key: "projectNumber",
+    label: "Projektnummer"
+  },
   {
     key: "phase",
     label: "Phase"
diff --git a/pages/settings/numberRanges.vue b/pages/settings/numberRanges.vue
index c6174e4..9bb84c7 100644
--- a/pages/settings/numberRanges.vue
+++ b/pages/settings/numberRanges.vue
@@ -29,6 +29,9 @@ const resources = {
   },
   inventoryitems: {
     label: "Inventarartikel"
+  },
+  projects: {
+    label: "Projekte"
   }
 }