From 0d86e4c4f9e9b58dae8eada4135d08c150efd2cf Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Fri, 23 Feb 2024 19:30:43 +0100
Subject: [PATCH] Changed to new Layout System

---
 spaces/layouts/default.vue                    |   9 +-
 spaces/nuxt.config.ts                         |   6 +
 .../pages/absenceRequests/[mode]/[[id]].vue   | 294 ++++++++----------
 spaces/pages/absenceRequests/index.vue        | 114 +++++--
 spaces/pages/calendar/[mode].vue              |  33 +-
 spaces/pages/contacts/[mode]/[[id]].vue       | 119 +++----
 spaces/pages/contacts/index.vue               | 141 ++++-----
 spaces/pages/contracts/[mode]/[[id]].vue      |  78 ++---
 spaces/pages/contracts/index.vue              |  86 +++--
 spaces/pages/customers/[mode]/[[id]].vue      | 129 ++++----
 spaces/pages/customers/index.vue              | 131 ++++----
 spaces/pages/documents.vue                    | 110 +++----
 spaces/pages/inventoryitems/[mode]/[[id]].vue |  89 +++---
 spaces/pages/inventoryitems/index.vue         |  77 +++--
 spaces/pages/planningBoard.vue                | 262 ----------------
 spaces/pages/plants/[mode]/[[id]].vue         | 293 ++++++-----------
 spaces/pages/plants/index.vue                 |  92 ++++--
 spaces/pages/products/[mode]/[[id]].vue       | 105 +++----
 spaces/pages/products/index.vue               |  72 ++++-
 spaces/pages/projects/[mode]/[[id]].vue       | 120 +++----
 spaces/pages/projects/index.vue               | 130 +++++---
 spaces/pages/services/[mode]/[[id]].vue       |  95 +++---
 spaces/pages/services/index.vue               |  84 +++--
 spaces/pages/spaces/[mode]/[[id]].vue         | 120 +++----
 spaces/pages/spaces/index.vue                 |  74 +++--
 spaces/pages/tasks/[mode]/[[id]].vue          | 285 +++--------------
 spaces/pages/tasks/index.vue                  | 190 +++++------
 spaces/pages/test.vue                         |  11 -
 spaces/pages/vehicles/[mode]/[[id]].vue       | 270 +++++++---------
 spaces/pages/vehicles/index.vue               |  79 +++--
 spaces/pages/vendors/[mode]/[[id]].vue        |  85 +++--
 spaces/pages/vendors/index.vue                | 121 +++----
 32 files changed, 1690 insertions(+), 2214 deletions(-)
 delete mode 100644 spaces/pages/planningBoard.vue
 delete mode 100644 spaces/pages/test.vue

diff --git a/spaces/layouts/default.vue b/spaces/layouts/default.vue
index 1932c71..b968c55 100644
--- a/spaces/layouts/default.vue
+++ b/spaces/layouts/default.vue
@@ -520,7 +520,14 @@ const footerLinks = [/*{
         </template>
       </UDashboardSidebar>
     </UDashboardPanel>
-    <slot />
+
+    <UDashboardPage>
+      <UDashboardPanel grow>
+        <slot />
+      </UDashboardPanel>
+    </UDashboardPage>
+
+
 
     <!-- ~/components/HelpSlideover.vue -->
     <HelpSlideover />
diff --git a/spaces/nuxt.config.ts b/spaces/nuxt.config.ts
index d0b0374..d5b158e 100644
--- a/spaces/nuxt.config.ts
+++ b/spaces/nuxt.config.ts
@@ -7,6 +7,12 @@ export default defineNuxtConfig({
     extends: [
         '@nuxt/ui-pro'
     ],
+    components: [{
+        path: '~/components'
+    }, {
+        path: '~/components/common',
+        pathPrefix: false
+    }],
     build: {
         transpile: ['@vuepic/vue-datepicker']
     },
diff --git a/spaces/pages/absenceRequests/[mode]/[[id]].vue b/spaces/pages/absenceRequests/[mode]/[[id]].vue
index aac8483..c75fa5e 100644
--- a/spaces/pages/absenceRequests/[mode]/[[id]].vue
+++ b/spaces/pages/absenceRequests/[mode]/[[id]].vue
@@ -6,13 +6,12 @@ definePageMeta({
 })
 
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
 
-let currentItem = null
+let currentItem = ref(null)
 
 //Working
 const mode = ref(route.params.mode || "show")
@@ -37,13 +36,10 @@ const absenceReasons = [
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem = dataStore.getAbsenceRequestById(Number(useRoute().params.id))
+    currentItem.value = dataStore.getAbsenceRequestById(Number(useRoute().params.id))
   }
 
-  if(mode.value === "edit") itemInfo.value = currentItem
-
-
-
+  if(mode.value === "edit") itemInfo.value = currentItem.value
 }
 
 const editItem = async () => {
@@ -52,175 +48,147 @@ const editItem = async () => {
 }
 
 const cancelEditorCreate = () => {
-  mode.value = "show"
-  itemInfo.value = {
-    id: 0,
-    infoData: {}
+  if(currentItem.value) {
+    router.push(`/tasks/show/${currentItem.value.id}`)
+  } else {
+    router.push(`/tasks/`)
   }
 }
-
-const updateItem = async () => {
-  const {error} = await supabase
-      .from("absenceRequests")
-      .update(itemInfo.value)
-      .eq('id',itemInfo.value.id)
-
-  if(error) {
-    console.log(error)
-  }
-
-
-  router.push(`/employees/absenceRequests/show/${currentItem.id}`)
-  toast.add({title: "Abwesenheit erfolgreich gespeichert"})
-  dataStore.fetchAbsenceRequests()
-}
-
-
-
 setupPage()
 </script>
 
 <template>
-  <div>
-    <UCard v-if="currentItem && mode == 'show'" >
-      <template #header>
-        <UBadge
-            v-if="currentItem.approved === 'Offen'"
-            color="blue"
-        >{{currentItem.approved}}</UBadge>
-        <UBadge
-            v-else-if="currentItem.approved === 'Genehmigt'"
-            color="primary"
-        >{{currentItem.approved}}</UBadge>
-        <UBadge
-            v-else-if="currentItem.approved === 'Abgelehnt'"
-            color="rose"
-        >{{currentItem.approved}}</UBadge>
-
-
-
-        {{currentItem.reason}}
-      </template>
-
-      <span>Mitarbeiter: {{dataStore.profiles.find(item => item.id === currentItem.user) ? dataStore.profiles.find(item => item.id === currentItem.user).fullName : ""}}<br></span>
-      <span>Start: {{dayjs(currentItem.start).format("DD.MM.YYYY")}}<br></span>
-      <span>Ende: {{dayjs(currentItem.end).format("DD.MM.YYYY")}}<br></span>
-
-      Notizen:<br>
-      {{currentItem.note}}<br>
-
-
-
-
-
-      <template #footer>
-        <UButton
-            v-if="mode == 'show' && currentItem.id"
-            @click="editItem"
-        >
-          Bearbeiten
-        </UButton>
-      </template>
-
-
-
-    </UCard>
-    <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-      <template #header v-if="mode === 'edit'">
-        {{itemInfo.reason}}
-      </template>
-
-      <UFormGroup
-          label="Status:"
+  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Abwesenheit erstellen' : 'Abwesenheit bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('tasks',itemInfo)"
       >
-        <USelectMenu
-            v-model="itemInfo.approved"
-            :options="states"
-            option-attribute="label"
-            value-attribute="value"
-        />
-      </UFormGroup>
-
-      <UFormGroup
-          label="Grund:"
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('tasks',itemInfo)"
       >
-        <USelectMenu
-            v-model="itemInfo.reason"
-            :options="absenceReasons"
-        />
-      </UFormGroup>
-
-      <UFormGroup
-          label="Mitarbeiter:"
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
       >
-        <USelectMenu
-            v-model="itemInfo.user"
-            :options="dataStore.profiles"
-            option-attribute="fullName"
-            value-attribute="id"
-            searchable
-            :search-attributes="['fullName']"
-        >
-          <template #label>
-            {{dataStore.profiles.find(item => item.id === itemInfo.user) ? dataStore.profiles.find(item => item.id === itemInfo.user).fullName : "Mitarbeiter auswählen"}}
-          </template>
-        </USelectMenu>
-      </UFormGroup>
-
-      <UFormGroup label="Start:">
-        <UPopover :popper="{ placement: 'bottom-start' }">
-          <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.start ? dayjs(itemInfo.start).format('DD.MM.YYYY') : 'Datum auswählen'" />
-
-          <template #panel="{ close }">
-            <LazyDatePicker v-model="itemInfo.start" @close="close" />
-          </template>
-        </UPopover>
-      </UFormGroup>
-
-      <UFormGroup label="Ende:">
-        <UPopover :popper="{ placement: 'bottom-start' }">
-          <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.end ? dayjs(itemInfo.end).format('DD.MM.YYYY') : 'Datum auswählen'" />
-
-          <template #panel="{ close }">
-            <LazyDatePicker v-model="itemInfo.end" @close="close" />
-          </template>
-        </UPopover>
-      </UFormGroup>
-
-
-      <UFormGroup
-          label="Notizen:"
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="editItem"
       >
-        <UTextarea
-            v-model="itemInfo.note"
-        />
-      </UFormGroup>
+        Bearbeiten
+      </UButton>
+    </template>
+    <template #badge v-if="currentItem">
+      <UBadge
+          v-if="currentItem.approved === 'Offen'"
+          color="blue"
+      >{{currentItem.approved}}</UBadge>
+      <UBadge
+          v-else-if="currentItem.approved === 'Genehmigt'"
+          color="primary"
+      >{{currentItem.approved}}</UBadge>
+      <UBadge
+          v-else-if="currentItem.approved === 'Abgelehnt'"
+          color="rose"
+      >{{currentItem.approved}}</UBadge>
+    </template>
+  </UDashboardNavbar>
+  <UTabs
+      :items="[{label: 'Informationen'}]"
+      v-if="currentItem && mode == 'show'"
+      class="p-5"
+  >
+    <template #item="{item}">
+      <UCard class="mt-5">
+        <div v-if="item.label === 'Informationen'">
+          <div class="truncate">
+            <p>Mitarbeiter: {{dataStore.profiles.find(item => item.id === currentItem.user) ? dataStore.profiles.find(item => item.id === currentItem.user).fullName : ""}}</p>
+            <p>Start: {{dayjs(currentItem.start).format("DD.MM.YYYY")}}</p>
+            <p>Ende: {{dayjs(currentItem.end).format("DD.MM.YYYY")}}</p>
+            <p>Grund: {{currentItem.reason}}</p>
+            <p>Notizen: {{currentItem.notes}}</p>
+          </div>
+        </div>
+      </UCard>
+    </template>
+  </UTabs>
+  <UForm v-else-if="mode == 'edit' || mode == 'create'" class="p-5" >
+    <UFormGroup
+        label="Status:"
+    >
+      <USelectMenu
+          v-model="itemInfo.approved"
+          :options="states"
+          option-attribute="label"
+          value-attribute="value"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Grund:"
+    >
+      <USelectMenu
+          v-model="itemInfo.reason"
+          :options="absenceReasons"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Mitarbeiter:"
+    >
+      <USelectMenu
+          v-model="itemInfo.user"
+          :options="dataStore.profiles"
+          option-attribute="fullName"
+          value-attribute="id"
+          searchable
+          :search-attributes="['fullName']"
+      >
+        <template #label>
+          {{dataStore.profiles.find(item => item.id === itemInfo.user) ? dataStore.profiles.find(item => item.id === itemInfo.user).fullName : "Mitarbeiter auswählen"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+
+    <UFormGroup label="Start:">
+      <UPopover :popper="{ placement: 'bottom-start' }">
+        <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.start ? dayjs(itemInfo.start).format('DD.MM.YYYY') : 'Datum auswählen'" />
+
+        <template #panel="{ close }">
+          <LazyDatePicker v-model="itemInfo.start" @close="close" />
+        </template>
+      </UPopover>
+    </UFormGroup>
+
+    <UFormGroup label="Ende:">
+      <UPopover :popper="{ placement: 'bottom-start' }">
+        <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.end ? dayjs(itemInfo.end).format('DD.MM.YYYY') : 'Datum auswählen'" />
+
+        <template #panel="{ close }">
+          <LazyDatePicker v-model="itemInfo.end" @close="close" />
+        </template>
+      </UPopover>
+    </UFormGroup>
 
 
-      <template #footer>
-        <UButton
-            v-if="mode == 'edit'"
-            @click="updateItem"
-        >
-          Speichern
-        </UButton>
-        <UButton
-            v-else-if="mode == 'create'"
-            @click="dataStore.createNewItem('absenceRequests', itemInfo)"
-        >
-          Erstellen
-        </UButton>
-        <UButton
-            @click="cancelEditorCreate"
-            color="red"
-            class="ml-2"
-        >
-          Abbrechen
-        </UButton>
-      </template>
+    <UFormGroup
+        label="Notizen:"
+    >
+      <UTextarea
+          v-model="itemInfo.note"
+      />
+    </UFormGroup>
 
-    </UCard>
-  </div>
+  </UForm>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/absenceRequests/index.vue b/spaces/pages/absenceRequests/index.vue
index 55bbdfd..8301cbb 100644
--- a/spaces/pages/absenceRequests/index.vue
+++ b/spaces/pages/absenceRequests/index.vue
@@ -1,37 +1,69 @@
 <template>
-  <div id="main">
+  <UDashboardNavbar title="Abwesenheiten" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
 
-    <UButton @click="router.push(`/employees/absenceRequests/create/`)">+ Abwesenheit</UButton>
+      <UButton @click="router.push(`/absenceRequests/create`)">+ Abwesenheit</UButton>
+    </template>
+  </UDashboardNavbar>
 
-    <UTable
-        :rows="dataStore.absenceRequests"
-        :columns="columns"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-    >
-      <template #approved-data="{row}">
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/absenceRequests/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Abwesenheiten anzuzeigen' }"
+  >
+    <template #approved-data="{row}">
         <span v-if="!row.approved">
           Genehmigung offen
         </span>
-        <span
-            v-else-if="row.approved"
-            class="text-primary"
-        >
+      <span
+          v-else-if="row.approved"
+          class="text-primary"
+      >
           Genemigt
         </span>
-        <span
-            v-else
-            class="text-rose"
-        >
+      <span
+          v-else
+          class="text-rose"
+      >
           Abgelehnt
         </span>
-      </template>
-      <template #user-data="{row}">
-        {{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : ""}}
-      </template>
-    </UTable>
-
-  </div>
+    </template>
+    <template #user-data="{row}">
+      {{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : ""}}
+    </template>
+  </UTable>
 </template>
 
 <script setup>
@@ -40,11 +72,21 @@ definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/absenceRequests/create")
+  }
+})
+
 const dataStore = useDataStore()
 const router = useRouter()
-const mode = ref("show")
 
-const columns = [
+const templateColumns = [
   {
     key: "approved",
     label: "Genehmigt",
@@ -73,10 +115,24 @@ const columns = [
   }
 ]
 
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+const searchString = ref('')
+const filteredRows = computed(() => {
+  let items = dataStore.absenceRequests
+
+  if(!searchString.value) {
+    return items
+  }
+
+  return items.filter(item => {
+    return Object.values(item).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
+})
 
-const selectItem = (item) => {
-  router.push(`/employees/absenceRequests/show/${item.id} `)
-}
 </script>
 
 <style scoped>
diff --git a/spaces/pages/calendar/[mode].vue b/spaces/pages/calendar/[mode].vue
index a7bd430..2056b98 100644
--- a/spaces/pages/calendar/[mode].vue
+++ b/spaces/pages/calendar/[mode].vue
@@ -287,28 +287,23 @@ const calendarOptionsTimeline = reactive({
 
   </UModal>
 
-  <UDashboardPage>
-    <UDashboardPanel grow>
-      <UDashboardNavbar :title="currentItem ? currentItem.name : ''">
-        <template #right>
+  <UDashboardNavbar :title="currentItem ? currentItem.name : ''">
+    <template #right>
 
-        </template>
-      </UDashboardNavbar>
+    </template>
+  </UDashboardNavbar>
 
 
-      <div v-if="mode === 'grid'" class="p-5">
-        <FullCalendar
-            :options="calendarOptionsGrid"
-        />
-      </div>
-      <div v-else-if="mode === 'timeline'" class="p-5">
-        <FullCalendar
-            :options="calendarOptionsTimeline"
-        />
-      </div>
-
-    </UDashboardPanel>
-  </UDashboardPage>
+  <div v-if="mode === 'grid'" class="p-5">
+    <FullCalendar
+        :options="calendarOptionsGrid"
+    />
+  </div>
+  <div v-else-if="mode === 'timeline'" class="p-5">
+    <FullCalendar
+        :options="calendarOptionsTimeline"
+    />
+  </div>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/contacts/[mode]/[[id]].vue b/spaces/pages/contacts/[mode]/[[id]].vue
index 9f412f2..b4f1913 100644
--- a/spaces/pages/contacts/[mode]/[[id]].vue
+++ b/spaces/pages/contacts/[mode]/[[id]].vue
@@ -1,22 +1,16 @@
 <script setup>
-import HistoryDisplay from "~/components/HistoryDisplay.vue";
-
 definePageMeta({
   middleware: "auth"
 })
 
-//
-const supabase = useSupabaseClient()
+const dataStore = useDataStore()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
 
-//Store
-const dataStore = useDataStore()
-let currentItem = null
-
 
+let currentItem = ref(null)
 
 //Working
 const mode = ref(route.params.mode || "show")
@@ -37,14 +31,7 @@ const setupPage = () => {
 
     if(query.customer) itemInfo.value.customer = Number(query.customer)
     if(query.vendor) itemInfo.value.vendor = Number(query.vendor)
-
   }
-
-}
-
-const editCustomer = async () => {
-  router.push(`/contacts/edit/${currentItem.id}`)
-  setupPage()
 }
 
 const cancelEditorCreate = () => {
@@ -60,37 +47,58 @@ setupPage()
 </script>
 
 <template>
-  <h1
-      class="mb-3 font-bold text-2xl truncate"
-      v-if="currentItem"
-  >Ansprechpartner: {{currentItem.fullName}}</h1>
+  <UDashboardNavbar :title="currentItem ? currentItem.fullName : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('contacts',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('contacts',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="router.push(`/contacts/edit/${currentItem.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+    <template #badge v-if="currentItem">
+      <UBadge
+          v-if="currentItem.active"
+      >
+        Kontakt aktiv
+      </UBadge>
+      <UBadge
+          v-else
+          color="red"
+      >
+        Kontakt inaktiv
+      </UBadge>
+    </template>
+  </UDashboardNavbar>
   <UTabs
     :items="[{label: 'Informationen'}, {label: 'Logbuch'}]"
     v-if="currentItem && mode == 'show'"
+    class="p-5"
   >
     <template #item="{item}">
       <UCard class="mt-5">
         <div v-if="item.label === 'Informationen'">
-          <Toolbar>
-            <UButton
-                v-if="mode == 'show' && currentItem.id"
-                @click="editCustomer"
-            >
-              Bearbeiten
-            </UButton>
-          </Toolbar>
 
-          <UBadge
-              v-if="currentItem.active"
-          >
-            Kontakt aktiv
-          </UBadge>
-          <UBadge
-              v-else
-              color="red"
-          >
-            Kontakt inaktiv
-          </UBadge>
 
           <div class="text-wrap mt-3">
             <p v-if="currentItem.customer">Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.customers.find(customer => customer.id === currentItem.customer) ? dataStore.customers.find(customer => customer.id === currentItem.customer).name : "" }}</nuxt-link></p>
@@ -115,11 +123,10 @@ setupPage()
       </UCard>
     </template>
   </UTabs>
-  <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-    <template #header>
-      {{itemInfo.fullName}}
-    </template>
-
+  <UForm
+      v-else-if="mode == 'edit' || mode == 'create'"
+      class="p-5"
+  >
     <UFormGroup
         label="Anrede:"
     >
@@ -211,31 +218,7 @@ setupPage()
           v-model="itemInfo.role"
       />
     </UFormGroup>
-
-
-    <template #footer>
-      <UButton
-          v-if="mode == 'edit'"
-          @click="dataStore.updateItem('contacts',{...itemInfo, fullName: `${itemInfo.firstName} ${itemInfo.lastName}`})"
-      >
-        Speichern
-      </UButton>
-      <UButton
-          v-else-if="mode == 'create'"
-          @click="dataStore.createNewItem('contacts',{...itemInfo, fullName: `${itemInfo.firstName} ${itemInfo.lastName}`})"
-      >
-        Erstellen
-      </UButton>
-      <UButton
-          @click="cancelEditorCreate"
-          color="red"
-          class="ml-2"
-      >
-        Abbrechen
-      </UButton>
-    </template>
-
-  </UCard>
+  </UForm>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/contacts/index.vue b/spaces/pages/contacts/index.vue
index 0209ff2..b5af4e0 100644
--- a/spaces/pages/contacts/index.vue
+++ b/spaces/pages/contacts/index.vue
@@ -1,54 +1,60 @@
 <template>
-  <Toolbar>
-    <UButton @click="router.push(`/contacts/create/`)">+ Kontakt</UButton>
+  <UDashboardNavbar title="Ansprechpartner" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
 
-    <UInput
-        v-model="searchString"
-        placeholder="Suche..."
-    />
+      <UButton @click="router.push(`/contacts/create`)">+ Kontakt</UButton>
+    </template>
+  </UDashboardNavbar>
 
-    <USelectMenu
-        v-model="selectedColumns"
-        multiple
-        :options="columnTemplate"
-        :uiMenu="{width:'w-40'}"
-        :popper="{placement: 'bottom-start'}"
-        by="key"
-    >
-      <UButton
-          color="gray"
-          variant="ghost"
-          class="flex-1 justify-between"
-          icon="i-heroicons-view-columns"
-      />
-
-      <template #option="{ option }">
-        {{option.label}}
-      </template>
-    </USelectMenu>
-  </Toolbar>
-
-
-  <div class="table">
-    <UTable
-        :rows="filteredRows"
-        :columns="selectedColumns"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-    >
-      <template #active-data="{row}">
-        <span v-if="row.active" class="text-primary-500">Aktiv</span>
-        <span v-else class="text-rose">Gesperrt</span>
-      </template>
-      <template #customer-data="{row}">
-        {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : ''}}
-      </template>
-      <template #vendor-data="{row}">
-        {{dataStore.vendors.find(vendor => vendor.id === row.vendor) ? dataStore.vendors.find(vendor => vendor.id === row.vendor).name : ''}}
-      </template>
-    </UTable>
-  </div>
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
 
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/contacts/show/${i.id}`)"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Ansprechpartner anzuzeigen' }"
+  >
+    <template #active-data="{row}">
+      <span v-if="row.active" class="text-primary-500">Aktiv</span>
+      <span v-else class="text-rose">Gesperrt</span>
+    </template>
+    <template #customer-data="{row}">
+      {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : ''}}
+    </template>
+    <template #vendor-data="{row}">
+      {{dataStore.vendors.find(vendor => vendor.id === row.vendor) ? dataStore.vendors.find(vendor => vendor.id === row.vendor).name : ''}}
+    </template>
+  </UTable>
 </template>
 
 <script setup>
@@ -57,11 +63,21 @@ definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/contacts/create")
+  }
+})
+
 const dataStore = useDataStore()
 const router = useRouter()
-const mode = ref("show")
 
-const columnTemplate = ref([
+const templateColumns = [
 
   {
     key: "fullName",
@@ -102,30 +118,9 @@ const columnTemplate = ref([
     key: "birtday",
     label: "Geburtstag",
   }
-])
-const selectedColumns = ref([
-  {
-    key: "fullName",
-    label: "Name",
-    sortable: true
-  },
-  {
-    key: "customer",
-    label: "Kunde",
-    sortable: true
-  },
-  {
-    key: "vendor",
-    label: "Lieferant",
-    sortable: true
-  },
-])
-
-
-const selectItem = (item) => {
-  router.push(`/contacts/show/${item.id} `)
-}
-
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
 const searchString = ref('')
 
diff --git a/spaces/pages/contracts/[mode]/[[id]].vue b/spaces/pages/contracts/[mode]/[[id]].vue
index 30b239f..a7cc257 100644
--- a/spaces/pages/contracts/[mode]/[[id]].vue
+++ b/spaces/pages/contracts/[mode]/[[id]].vue
@@ -6,19 +6,13 @@ definePageMeta({
 })
 
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
 
-//Store
-const {customers, contracts } = storeToRefs(useDataStore())
-
 let currentItem = ref(null)
 
-
-
 //Working
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
@@ -39,14 +33,7 @@ const setupPage = () => {
     let query = route.query
 
     if(query.customer) itemInfo.value.customer = Number(query.customer)
-
   }
-
-}
-
-const editCustomer = async () => {
-  router.push(`/contracts/edit/${currentItem.value.id}`)
-  setupPage()
 }
 
 const cancelEditorCreate = () => {
@@ -61,13 +48,40 @@ setupPage()
 </script>
 
 <template>
-  <h1
-      class="mb-3 truncate font-bold text-2xl"
-      v-if="currentItem"
-  >Vertrag: {{currentItem.name}}</h1>
+  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Vertrag erstellen' : 'Vertrag bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('contracts',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('contracts',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="router.push(`/contracts/edit/${currentItem.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
   <UTabs
       v-if="currentItem && mode === 'show'"
       :items="[{label: 'Informationen'}, {label: 'Logbuch'}, {label: 'Dokumente'}]"
+    class="p-5"
   >
     <template #item="{item}">
       <UCard class="mt-5">
@@ -125,7 +139,7 @@ setupPage()
       </UCard>
     </template>
   </UTabs>
-  <UCard v-else-if="mode == 'edit' || mode == 'create'" >
+  <UForm v-else-if="mode == 'edit' || mode == 'create'" class="p-5" >
 
     <UFormGroup
         label="Name:"
@@ -142,7 +156,7 @@ setupPage()
           v-model="itemInfo.customer"
           option-attribute="name"
           value-attribute="id"
-          :options="customers"
+          :options="dataStore.customers"
           searchable
           :search-attributes="['name']"
       >
@@ -166,31 +180,7 @@ setupPage()
           v-model="itemInfo.description"
       />
     </UFormGroup>
-
-
-    <template #footer>
-      <UButton
-          v-if="mode === 'edit'"
-          @click="dataStore.updateItem('contracts',itemInfo)"
-      >
-        Speichern
-      </UButton>
-      <UButton
-          v-else-if="mode === 'create'"
-          @click="dataStore.createNewItem('contracts',itemInfo)"
-      >
-        Erstellen
-      </UButton>
-      <UButton
-          @click="cancelEditorCreate"
-          color="red"
-          class="ml-2"
-      >
-        Abbrechen
-      </UButton>
-    </template>
-
-  </UCard>
+    </UForm>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/contracts/index.vue b/spaces/pages/contracts/index.vue
index 0c4c858..11caf21 100644
--- a/spaces/pages/contracts/index.vue
+++ b/spaces/pages/contracts/index.vue
@@ -1,43 +1,75 @@
 <template>
-  <div id="main">
-    <!-- TODO: Kontakte erstellen und dem Kunden zuweisen    -->
-
-    <div class="flex items-center gap-1">
-      <UButton @click="router.push(`/contracts/create/`)">+ Vertrag</UButton>
-
+  <UDashboardNavbar title="Verträge" :badge="filteredRows.length">
+    <template #right>
       <UInput
+          id="searchinput"
           v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
           placeholder="Suche..."
-      />
-    </div>
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
 
+      <UButton @click="router.push(`/contracts/create`)">+ Vertrag</UButton>
+    </template>
+  </UDashboardNavbar>
 
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
 
-    <UTable
-        :rows="filteredRows"
-        :columns="itemColumns"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-    >
-      <template #customer-data="{row}">
-        {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : row.customer }}
-      </template>
-    </UTable>
-
-  </div>
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/contracts/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Verträge anzuzeigen' }"
+  >
+    <template #customer-data="{row}">
+      {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : row.customer }}
+    </template>
+  </UTable>
 </template>
 
 <script setup>
-
 definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/contracts/create")
+  }
+})
+
 const dataStore = useDataStore()
 const router = useRouter()
-const mode = ref("show")
 
-const itemColumns = [
+const templateColumns = [
   {
     key: 'customer',
     label: "Kundennr.:",
@@ -53,15 +85,11 @@ const itemColumns = [
     label: "Beschreibung"
   }
 ]
-
-
-const selectItem = (item) => {
-  router.push(`/contracts/show/${item.id} `)
-}
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
 
 const searchString = ref('')
-
 const filteredRows = computed(() => {
   if(!searchString.value) {
     return dataStore.contracts
diff --git a/spaces/pages/customers/[mode]/[[id]].vue b/spaces/pages/customers/[mode]/[[id]].vue
index 022b0ce..452c4c2 100644
--- a/spaces/pages/customers/[mode]/[[id]].vue
+++ b/spaces/pages/customers/[mode]/[[id]].vue
@@ -1,17 +1,13 @@
 <script setup>
-import HistoryDisplay from "~/components/HistoryDisplay.vue";
-
 definePageMeta({
   middleware: "auth"
 })
 
-const supabase = useSupabaseClient()
+const dataStore = useDataStore()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
-const numberRange = useNumberRange("customers")
-const dataStore = useDataStore()
 
 let currentItem = ref(null)
 
@@ -34,13 +30,10 @@ const setupPage = async () => {
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem.value
-
-
 }
 
-const editCustomer = async () => {
-  router.push(`/customers/edit/${currentItem.value.id}`)
-  setupPage()
+const editItem = async () => {
+  await router.push(`/customers/edit/${currentItem.value.id}`)
 }
 
 const cancelEditorCreate = () => {
@@ -56,37 +49,59 @@ setupPage()
 </script>
 
 <template>
-  <h1
-      class="mb-3 font-bold text-3xl truncate"
-      v-if="currentItem "
-  >Kunde: {{currentItem.name}}</h1>
+  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('customers',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('customers',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="editItem"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+    <template #badge v-if="currentItem">
+      <UBadge
+          v-if="currentItem.active"
+      >
+        Kunde aktiv
+      </UBadge>
+      <UBadge
+          v-else
+          color="red"
+      >
+        Kunde gesperrt
+      </UBadge>
+    </template>
+  </UDashboardNavbar>
+
   <UTabs
       v-if="currentItem && mode == 'show'"
       :items="[{label: 'Informationen'}, {label: 'Logbuch'}, {label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}, {label: 'Ansprechpartner'}]"
+      class="p-5"
   >
     <template #item="{item}">
       <UCard class="mt-5">
         <div v-if="item.label === 'Informationen'">
-          <Toolbar>
-            <UButton
-                v-if="mode == 'show' && currentItem.id"
-                @click="editCustomer"
-            >
-              Bearbeiten
-            </UButton>
-          </Toolbar>
 
-          <UBadge
-              v-if="currentItem.active"
-          >
-            Kunde aktiv
-          </UBadge>
-          <UBadge
-              v-else
-              color="red"
-          >
-            Kunde gesperrt
-          </UBadge>
 
           <div class="text-wrap">
             <p>Kundennummer: {{currentItem.customerNumber}}</p>
@@ -164,16 +179,16 @@ setupPage()
         <div v-else-if="item.label === 'Ansprechpartner'">
           <Toolbar>
             <UButton
-            @click="router.push(`/contacts/create?customer=${currentItem.id}`)"
+                @click="router.push(`/contacts/create?customer=${currentItem.id}`)"
             >
-            + Ansprechpartner
+              + Ansprechpartner
             </UButton>
           </Toolbar>
           <UTable
-            :rows="dataStore.getContactsByCustomerId(currentItem.id)"
-            @select="(row) => router.push(`/contacts/show/${row.id}`)"
-            :columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
+              :rows="dataStore.getContactsByCustomerId(currentItem.id)"
+              @select="(row) => router.push(`/contacts/show/${row.id}`)"
+              :columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
+              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
 
           >
 
@@ -183,12 +198,7 @@ setupPage()
       </UCard>
     </template>
   </UTabs>
-
-
-  <UCard v-else-if="mode === 'edit' || mode === 'create'" >
-    <template #header v-if="mode === 'edit'">
-      <UBadge>{{itemInfo.customerNumber}}</UBadge>{{itemInfo.name}}
-    </template>
+  <UForm v-else-if="mode === 'edit' || mode === 'create'" class="p-5">
     <UFormGroup
         label="Name:"
     >
@@ -288,36 +298,11 @@ setupPage()
           v-model="itemInfo.infoData.ustid"
       />
     </UFormGroup>
-
-    <template #footer>
-      <UButton
-          v-if="mode == 'edit'"
-          @click="dataStore.updateItem('customers', itemInfo)"
-      >
-        Speichern
-      </UButton>
-      <UButton
-          v-else-if="mode == 'create'"
-          @click="dataStore.createNewItem('customers',itemInfo)"
-      >
-        Erstellen
-      </UButton>
-      <UButton
-          @click="cancelEditorCreate"
-          color="red"
-          class="ml-2"
-      >
-        Abbrechen
-      </UButton>
-    </template>
-
-  </UCard>
+  </UForm>
 
 
 </template>
 
 <style scoped>
-td {
-  padding: 0.2em;
-}
+
 </style>
\ No newline at end of file
diff --git a/spaces/pages/customers/index.vue b/spaces/pages/customers/index.vue
index 47406bf..5ce01d7 100644
--- a/spaces/pages/customers/index.vue
+++ b/spaces/pages/customers/index.vue
@@ -1,64 +1,80 @@
 <template>
+  <UDashboardNavbar title="Kunden" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          ref="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
 
-  <Toolbar>
-    <UButton @click="router.push(`/customers/create/`)">+ Kunde</UButton>
+      <UButton @click="router.push(`/customers/create/`)">+ Kunde</UButton>
 
-    <UInput
-        v-model="searchString"
-        placeholder="Suche..."
-    />
+    </template>
+  </UDashboardNavbar>
 
-    <USelectMenu
-        v-model="selectedColumns"
-        multiple
-        :options="columnTemplate"
-        :uiMenu="{width:'w-40'}"
-        :popper="{placement: 'bottom-start'}"
-        by="key"
-    >
-      <UButton
-          color="gray"
-          variant="ghost"
-          class="flex-1 justify-between"
-          icon="i-heroicons-view-columns"
-      />
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
 
-      <template #option="{ option }">
-        {{option.label}}
-      </template>
-    </USelectMenu>
-  </Toolbar>
-
-  <div class="table">
-    <UTable
-        :rows="filteredRows"
-        :columns="selectedColumns"
-        @select="selectItem"
-
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-    >
-      <template #active-data="{row}">
-        <span v-if="row.active" class="text-primary-500">Aktiv</span>
-        <span v-else class="text-rose">Gesperrt</span>
-      </template>
-      <template #address-data="{row}">
-        {{row.infoData.street}}, {{row.infoData.special ? `${row.infoData.special},` : ''}} {{row.infoData.zip}} {{row.infoData.city}}, {{row.infoData.country}}
-      </template>
-    </UTable>
-  </div>
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/customers/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Kunden anzuzeigen' }"
+  >
+    <template #active-data="{row}">
+      <span v-if="row.active" class="text-primary-500">Aktiv</span>
+      <span v-else class="text-rose-500">Gesperrt</span>
+    </template>
+    <template #address-data="{row}">
+      {{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{(row.infoData.zip || row.infoData.city) ? `${row.infoData.zip} ${row.infoData.city}, ` : ''}} {{row.infoData.country}}
+    </template>
+  </UTable>
 </template>
 
 <script setup>
-
 definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/customers/create")
+  }
+})
+
 const dataStore = useDataStore()
 const router = useRouter()
-const mode = ref("show")
 
-const columnTemplate = ref([
+const templateColumns = [
   {
     key: 'customerNumber',
     label: "Kundennr.",
@@ -84,26 +100,9 @@ const columnTemplate = ref([
     label: "Adresse",
     sortable: true
   }
-])
-const selectedColumns = ref([
-  {
-    key: 'customerNumber',
-    label: "Kundennr.",
-    sortable: true
-  },
-  {
-    key: "name",
-    label: "Name",
-    sortable: true
-  },
-])
-
-
-
-const selectItem = (customer) => {
-  console.log(customer)
-  router.push(`/customers/show/${customer.id} `)
-}
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
 
 const searchString = ref('')
diff --git a/spaces/pages/documents.vue b/spaces/pages/documents.vue
index 90489b1..25a5b29 100644
--- a/spaces/pages/documents.vue
+++ b/spaces/pages/documents.vue
@@ -110,14 +110,20 @@ const downloadSelected = async () => {
 </script>
 
 <template>
-  <div>
-    <Toolbar>
+  <UDashboardNavbar
+      title="Dokumente"
+  >
+
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #left>
       <UButton @click="uploadModalOpen = true">Hochladen</UButton>
       <UButton
           @click="downloadSelected"
           :disabled="dataStore.documents.filter(doc => doc.selected).length === 0"
       >Herunterladen</UButton>
-
+    </template>
+    <template #right>
       <USelectMenu
           :options="tags"
           v-model="selectedTags"
@@ -127,63 +133,63 @@ const downloadSelected = async () => {
           {{selectedTags}}
         </template>
       </USelectMenu>
+    </template>
 
+  </UDashboardToolbar>
 
-    </Toolbar>
-    <div class="scrollList">
-      <USlideover
-        v-model="uploadModalOpen"
-    >
+  <div class="scrollList">
 
-      <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>
-          Datei Hochladen
-        </template>
+    <DocumentList
+        :documents="filteredDocuments"
+    />
+  </div>
+  <USlideover
+      v-model="uploadModalOpen"
+  >
 
-        <div class="h-full">
-          <UFormGroup
-              label="Datei:"
-          >
-            <UInput
-                type="file"
-                id="fileUploadInput"
-                multiple
-            />
-          </UFormGroup>
+    <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>
+        Datei Hochladen
+      </template>
 
-          <UFormGroup
-              label="Tags:"
-              class="mt-3"
-          >
-            <USelectMenu
-                multiple
-                searchable
-                searchable-placeholder="Suchen..."
-                :options="tags"
-                v-model="fileUploadFormData.tags"
-            />
-          </UFormGroup>
-        </div>
+      <div class="h-full">
+        <UFormGroup
+            label="Datei:"
+        >
+          <UInput
+              type="file"
+              id="fileUploadInput"
+              multiple
+          />
+        </UFormGroup>
 
-        <template #footer>
-          <UButton
-              v-if="!uploadInProgress"
-              class="mt-3"
-              @click="uploadFiles"
-          >Hochladen</UButton>
-          <UProgress
+        <UFormGroup
+            label="Tags:"
+            class="mt-3"
+        >
+          <USelectMenu
+              multiple
+              searchable
+              searchable-placeholder="Suchen..."
+              :options="tags"
+              v-model="fileUploadFormData.tags"
+          />
+        </UFormGroup>
+      </div>
+
+      <template #footer>
+        <UButton
+            v-if="!uploadInProgress"
+            class="mt-3"
+            @click="uploadFiles"
+        >Hochladen</UButton>
+        <UProgress
             v-else
             animation="carousel"
-          />
-        </template>
-      </UCard>
-    </USlideover>
-      <DocumentList
-        :documents="filteredDocuments"
-      />
-    </div>
-  </div>
-
+        />
+      </template>
+    </UCard>
+  </USlideover>
 </template>
 
 
diff --git a/spaces/pages/inventoryitems/[mode]/[[id]].vue b/spaces/pages/inventoryitems/[mode]/[[id]].vue
index c18c8b6..6daf2ac 100644
--- a/spaces/pages/inventoryitems/[mode]/[[id]].vue
+++ b/spaces/pages/inventoryitems/[mode]/[[id]].vue
@@ -6,7 +6,6 @@ definePageMeta({
 })
 
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -28,13 +27,6 @@ const setupPage = () => {
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem.value
-
-}
-
-
-const editItem = async () => {
-  router.push(`/inventoryitems/edit/${currentItem.value.id}`)
-  setupPage()
 }
 
 const cancelEditorCreate = () => {
@@ -43,34 +35,50 @@ const cancelEditorCreate = () => {
   } else {
     router.push(`/inventoryitems`)
   }
-
 }
 
-
-
 setupPage()
 </script>
 
 <template>
-  <h1
-      class="text-center my-3 font-bold text-2xl"
-      v-if="currentItem "
-  >{{currentItem.name}}</h1>
+  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Inventartikel erstellen' : 'Inventartikel bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('inventoryitems',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('inventoryitems',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="  router.push(`/inventoryitems/edit/${currentItem.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
   <UTabs
     :items="[{label: 'Informationen'}, {label: 'Logbuch'}]"
     v-if="currentItem && mode == 'show'"
+    class="p-5"
   >
     <template #item="{item}">
       <UCard class="mt-5">
         <div v-if="item.label === 'Informationen'">
-          <Toolbar>
-            <UButton
-                v-if="mode === 'show' && currentItem.id"
-                @click="editItem"
-            >
-              Bearbeiten
-            </UButton>
-          </Toolbar>
 
           <div class="text-wrap">
             <p v-if="currentItem.currentSpace">Lagerplatz: {{dataStore.getSpaceById(currentItem.currentSpace).spaceNumber}} - {{dataStore.getSpaceById(currentItem.currentSpace).description}}</p>
@@ -87,11 +95,10 @@ setupPage()
       </UCard>
     </template>
   </UTabs>
-  <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-    <template #header v-if="mode === 'edit'">
-      {{itemInfo.name}}
-    </template>
-
+  <UForm
+      v-else-if="mode == 'edit' || mode == 'create'"
+      class="p-5"
+  >
     <UFormGroup
         label="Name:"
     >
@@ -123,31 +130,7 @@ setupPage()
           v-model="itemInfo.description"
       />
     </UFormGroup>
-
-
-    <template #footer>
-      <UButton
-          v-if="mode === 'edit'"
-          @click="dataStore.updateItem('inventoryitems',itemInfo)"
-      >
-        Speichern
-      </UButton>
-      <UButton
-          v-else-if="mode === 'create'"
-          @click="dataStore.createNewItem('inventoryitems',itemInfo)"
-      >
-        Erstellen
-      </UButton>
-      <UButton
-          @click="cancelEditorCreate"
-          color="red"
-          class="ml-2"
-      >
-        Abbrechen
-      </UButton>
-    </template>
-
-  </UCard>
+  </UForm>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/inventoryitems/index.vue b/spaces/pages/inventoryitems/index.vue
index a708f00..d958496 100644
--- a/spaces/pages/inventoryitems/index.vue
+++ b/spaces/pages/inventoryitems/index.vue
@@ -1,29 +1,52 @@
 <template>
-  <div>
-
-    <div class="flex items-center gap-1">
-      <UButton @click="router.push(`/inventoryitems/create/`)">+ Inventarartikel</UButton>
-
+  <UDashboardNavbar title="Inventar" :badge="filteredRows.length">
+    <template #right>
       <UInput
+          id="searchinput"
           v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
           placeholder="Suche..."
-      />
-    </div>
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
 
+      <UButton @click="router.push(`/inventoryitems/create`)">+ Inventarartikel</UButton>
+    </template>
+  </UDashboardNavbar>
 
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
 
-    <UTable
+  <UTable
       :rows="filteredRows"
-      @select="selectItem"
-      :columns="itemColumns"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-    >
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/inventoryitems/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Inventarartikel anzuzeigen' }"
+  >
 
 
-    </UTable>
-
-
-  </div>
+  </UTable>
 </template>
 
 <script setup>
@@ -31,11 +54,22 @@
 definePageMeta({
   middleware: "auth"
 })
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/tasks/create")
+  }
+})
+
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const router = useRouter()
 
-const itemColumns = [
+const templateColumns = [
   {
     key: "name",
     label: "Name",
@@ -47,14 +81,11 @@ const itemColumns = [
     sortable: true
   }
 ]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
-const selectItem = (item) => {
-  console.log(item)
-  router.push(`/inventoryitems/show/${item.id} `)
-}
 
 const searchString = ref('')
-
 const filteredRows = computed(() => {
   if(!searchString.value) {
     return dataStore.inventoryitems
diff --git a/spaces/pages/planningBoard.vue b/spaces/pages/planningBoard.vue
deleted file mode 100644
index 3d014a1..0000000
--- a/spaces/pages/planningBoard.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<script setup>
-import FullCalendar from "@fullcalendar/vue3"
-import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
-import deLocale from '@fullcalendar/core/locales/de'
-import interactionPlugin from '@fullcalendar/interaction'
-import listPlugin from '@fullcalendar/list';
-import dayjs from "dayjs";
-
-definePageMeta({
-  middleware: "auth"
-})
-
-const viewport = useViewport()
-
-watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
-  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
-})
-
-const supabase = useSupabaseClient()
-const dataStore = useDataStore()
-const resources = dataStore.getResources
-const eventTypes = dataStore.getEventTypes
-const events = dataStore.getEvents
-
-const openNewEventModal = ref(false)
-const showEventModal = ref(false)
-const newEventData = ref({
-  resourceId: "",
-  resourceType: "",
-  title: "",
-  type: "Umsetzung",
-  start: "",
-  end: null
-})
-
-const selectedEvent = ref({})
-
-const createEvent = async () => {
-  const {data,error} = await supabase
-      .from("events")
-      .insert([newEventData.value])
-      .select()
-
-  if(error) {
-    console.log(error)
-  }
-
-  console.log("OK")
-  openNewEventModal.value = false
-  newEventData.value = {}
-  dataStore.fetchEvents()
-
-
-}
-const calendarOptionsList = reactive({
-  locale: deLocale,
-  plugins: [listPlugin],
-  initialView: "listWeek",
-  initialEvents: events,
-  nowIndicator: true,
-  height: "80vh"
-})
-
-const calendarOptionsTimeline = reactive({
-  schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
-  locale: deLocale,
-  plugins: [resourceTimelinePlugin, interactionPlugin],
-  initialView: "resourceTimeline3Hours",
-
-  headerToolbar: {
-    left: 'prev,next',
-    center: 'title',
-    right: 'resourceTimelineDay,resourceTimeline3Hours,resourceTimelineMonth'
-  },
-  initialEvents: events,
-  selectable: true,
-  weekNumbers: true,
-  select: function (info) {
-    //console.log(info)
-    newEventData.value.resourceId = info.resource.id
-    if(info.resource.extendedProps){
-      newEventData.value.resourceType = info.resource.extendedProps.type
-    }
-
-    newEventData.value.start = info.startStr
-    newEventData.value.end = info.endStr
-    openNewEventModal.value = true
-  },
-  eventClick: function (info){
-    selectedEvent.value = info.event
-    showEventModal.value = true
-
-    console.log(info)
-  },
-  resourceGroupField: "type",
-  resources: resources,
-  nowIndicator:true,
-  views: {
-    resourceTimeline3Hours: {
-      type: 'resourceTimeline',
-      slotDuration: {hours: 3},
-      slotMinTime: "06:00:00",
-      slotMaxTime: "21:00:00",
-      duration: {days:7},
-      buttonText: "Woche",
-      visibleRange: function(currentDate) {
-        // Generate a new date for manipulating in the next step
-        var startDate = new Date(currentDate);
-        var endDate = new Date(currentDate);
-
-        // Adjust the start & end dates, respectively
-        startDate.setDate(startDate.getDate() - startDate.getDay() +1); // One day in the past
-        endDate.setDate(startDate.getDate() + 5); // Two days into the future
-
-        return { start: startDate, end: endDate };
-      }
-    }
-  },
-
-})
-
-</script>
-
-<template>
-  <UDashboardPage>
-    <UDashboardPanel grow>
-      <UDashboardNavbar :title="currentItem ? currentItem.name : ''">
-        <template #right>
-
-        </template>
-      </UDashboardNavbar>
-      <div v-if="viewport.isLessThan('tablet')">
-        <FullCalendar
-            :options="calendarOptionsList"
-        />
-      </div>
-      <div v-else>
-        <FullCalendar
-            :options="calendarOptionsTimeline"
-        />
-      </div>
-    </UDashboardPanel>
-  </UDashboardPage>
-
-
-
-  <div>
-    <UModal
-      v-model="openNewEventModal"
-    >
-      <UCard>
-        <template #header>
-          Neuen Termin erstellen
-        </template>
-
-        <UFormGroup
-          label="Resource:"
-        >
-          <USelectMenu
-            v-model="newEventData.resourceId"
-            :options="resources"
-            value-attribute="id"
-            option-attribute="title"
-          >
-            <template #label>
-              <span>{{ resources.find(resource => resource.id === newEventData.resourceId).title }}</span>
-            </template>
-          </USelectMenu>
-        </UFormGroup>
-        <UFormGroup
-          label="Titel:"
-        >
-          <UInput
-            v-model="newEventData.title"
-          />
-        </UFormGroup>
-        <UFormGroup
-          label="Projekt:"
-        >
-          <USelectMenu
-            v-model="newEventData.project"
-            :options="dataStore.projects"
-            option-attribute="name"
-            value-attribute="id"
-            searchable
-            searchable-placeholder="Suche..."
-            :search-attributes="['name']"
-          >
-            <template #label>
-              {{dataStore.getProjectById(newEventData.project) ? dataStore.getProjectById(newEventData.project).name : "Kein Projekt ausgewählt"}}
-            </template>
-
-          </USelectMenu>
-        </UFormGroup>
-        <UFormGroup
-          label="Typ:"
-        >
-          <USelectMenu
-            v-model="newEventData.type"
-            :options="eventTypes"
-            option-attribute="label"
-            value-attribute="label"
-          >
-
-          </USelectMenu>
-        </UFormGroup>
-        <UFormGroup
-          label="Start:"
-        >
-          <UInput
-              v-model="newEventData.start"
-          />
-        </UFormGroup>
-        <UFormGroup
-          label="Ende:"
-        >
-          <UInput
-              v-model="newEventData.end"
-          />
-        </UFormGroup>
-
-        <template #footer>
-          <UButton
-            @click="createEvent"
-          >
-            Erstellen
-          </UButton>
-        </template>
-
-      </UCard>
-    </UModal>
-    <UModal
-      v-model="showEventModal"
-    >
-      <UCard>
-        <template #header>
-          {{selectedEvent.title}}
-        </template>
-
-        Start: {{dayjs(selectedEvent.startStr).format("DD.MM.YYYY HH:mm")}}<br>
-        Ende: {{dayjs(selectedEvent.endStr).format("DD.MM.YYYY HH:mm")}}
-
-        <DevOnly>
-          <UDivider class="my-3"/>
-          {{selectedEvent}}
-        </DevOnly>
-
-
-
-      </UCard>
-
-
-    </UModal>
-
-
-
-  </div>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/spaces/pages/plants/[mode]/[[id]].vue b/spaces/pages/plants/[mode]/[[id]].vue
index e1cb694..8fc40e3 100644
--- a/spaces/pages/plants/[mode]/[[id]].vue
+++ b/spaces/pages/plants/[mode]/[[id]].vue
@@ -9,7 +9,6 @@ definePageMeta({
 })
 
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -53,17 +52,7 @@ const setupPage = () => {
   if(mode.value === "create") {
     let query = route.query
     if(query.customer) itemInfo.value.customer = Number(query.customer)
-
   }
-
-
-}
-
-
-
-const editItem = async () => {
-  await router.push(`/plants/edit/${currentItem.value.id}`)
-  setupPage()
 }
 
 const cancelEditorCreate = () => {
@@ -79,171 +68,122 @@ setupPage()
 </script>
 
 <template>
-  <h1
-      class="mb-3 truncate font-bold text-2xl"
-      v-if="currentItem "
-  >Objekt: {{currentItem.name}}</h1>
-  <div v-if="currentItem && mode == 'show'">
-    <UTabs :items="tabItems">
-      <template #item="{item}">
-        <UCard class="mt-5">
-          <div v-if="item.label === 'Informationen'">
-            <Toolbar>
-              <UButton
-                  v-if="mode == 'show' && currentItem.id"
-                  @click="editItem"
-              >
-                Bearbeiten
-              </UButton>
-            </Toolbar>
-
-            <div class="text-wrap">
-              <p>Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
-            </div>
+  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Objekt erstellen' : 'Objekt bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('plants',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('plants',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="router.push(`/plants/edit/${currentItem.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
 
+  <UTabs
+      :items="tabItems"
+      v-if="mode === 'show'"
+      class="p-5"
+  >
+    <template #item="{item}">
+      <UCard class="mt-5">
+        <div v-if="item.label === 'Informationen'">
+          <div class="text-wrap">
+            <p>Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
           </div>
-          <div v-else-if="item.label === 'Logbuch'">
-            <HistoryDisplay
+
+        </div>
+        <div v-else-if="item.label === 'Logbuch'">
+          <HistoryDisplay
+              type="plant"
+              v-if="currentItem"
+              :element-id="currentItem.id"
+          />
+        </div>
+        <div v-else-if="item.label === 'Projekte'">
+          <Toolbar>
+            <UButton
+                @click="router.push(`/projects/create?plant=${currentItem.id}`)"
+            >
+              + Projekt
+            </UButton>
+          </Toolbar>
+
+          <UTable
+              :rows="dataStore.getProjectsByPlantId(currentItem.id)"
+              :columns="[{key: 'name', label: 'Name'}]"
+              @select="(row) => router.push(`/projects/show/${row.id}`)"
+              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
+          >
+
+          </UTable>
+
+        </div>
+        <div v-else-if="item.label === 'Aufgaben'">
+          <Toolbar>
+            <UButton
+                @click="router.push(`/tasks/create?plant=${currentItem.id}`)"
+            >
+              + Aufgabe
+            </UButton>
+          </Toolbar>
+          <UTable
+              :rows="dataStore.getTasksByPlantId(currentItem.id)"
+              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
+              :columns="[{key: 'name', label: 'Name'},{key: 'categore', label: 'Kategorie'}]"
+              @select="(row) => router.push(`/tasks/show/${row.id}`)"
+          >
+
+          </UTable>
+        </div>
+        <div v-else-if="item.label === 'Dokumente'" class="space-y-3">
+          <Toolbar>
+            <DocumentUpload
                 type="plant"
-                v-if="currentItem"
                 :element-id="currentItem.id"
             />
-          </div>
-          <div v-else-if="item.label === 'Projekte'">
-            <Toolbar>
-              <UButton
-                  @click="router.push(`/projects/create?plant=${currentItem.id}`)"
-              >
-                + Projekt
-              </UButton>
-            </Toolbar>
+          </Toolbar>
 
-            <UTable
-                :rows="dataStore.getProjectsByPlantId(currentItem.id)"
-                :columns="[{key: 'name', label: 'Name'}]"
-                @select="(row) => router.push(`/projects/show/${row.id}`)"
-                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
-            >
+          <DocumentList :documents="dataStore.getDocumentsByPlantId(currentItem.id)"/>
 
-            </UTable>
+        </div>
+        <div v-if="item.label === 'Dokumentation'">
 
-          </div>
-          <div v-else-if="item.label === 'Aufgaben'">
-            <Toolbar>
-              <UButton
-                  @click="router.push(`/tasks/create?plant=${currentItem.id}`)"
-              >
-                + Aufgabe
-              </UButton>
-            </Toolbar>
-            <UTable
-                :rows="dataStore.getTasksByPlantId(currentItem.id)"
-                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
-                :columns="[{key: 'name', label: 'Name'},{key: 'categore', label: 'Kategorie'}]"
-                @select="(row) => router.push(`/tasks/show/${row.id}`)"
-            >
+          <Editor/>
 
-            </UTable>
-          </div>
-          <div v-else-if="item.label === 'Dokumente'" class="space-y-3">
-            <Toolbar>
-              <DocumentUpload
-                  type="plant"
-                  :element-id="currentItem.id"
-              />
-            </Toolbar>
+        </div>
+      </UCard>
 
-            <!--          <UModal
-                          v-model="uploadModalOpen"
-                      >
-                        <UCard class="p-4">
+    </template>
+  </UTabs>
 
-                          <template #header>
-                            Datei hochladen
-                          </template>
+  <div v-if="currentItem && mode == 'show'">
 
-                          <UFormGroup
-                              label="Datei:"
-                          >
-                            <UInput
-                                type="file"
-                                id="fileUploadInput"
-                            />
-                          </UFormGroup>
-                          &lt;!&ndash;          <UFormGroup
-                                      label="Name:"
-                                      class="mt-3"
-                                    >
-                                      <UInput
-                                          v-model="fileUploadFormData.name"
-                                      />
-                                    </UFormGroup>&ndash;&gt;
-                          <UFormGroup
-                              label="Tags:"
-                              class="mt-3"
-                          >
-                            <USelectMenu
-                                multiple
-                                searchable
-                                searchable-placeholder="Suchen..."
-                                :options="tags"
-                                v-model="fileUploadFormData.tags"
-                            />
-                          </UFormGroup>
-                          &lt;!&ndash;<UFormGroup
-                              label="Ordner:"
-                              class="mt-3"
-                          >
-                            <USelectMenu
-                                :options="folders"
-                                v-model="fileUploadFormData.folder"
-                                value-attribute="label"
-
-                            />
-                          </UFormGroup>&ndash;&gt;
-
-                          <template #footer>
-                            <UButton
-                                class="mt-3"
-                                @click="uploadFiles"
-                            >Hochladen</UButton>
-                          </template>
-
-
-                        </UCard>
-
-                      </UModal>-->
-
-            <DocumentList :documents="dataStore.getDocumentsByPlantId(currentItem.id)"/>
-
-          </div>
-          <div v-if="item.label === 'Dokumentation'">
-
-            <Editor/>
-
-
-          </div>
-        </UCard>
-
-      </template>
-    </UTabs>
   </div>
 
-
-<!--  <UCard v-if="currentItem && mode == 'show'">
-    <template #header>
-      {{currentItem.name}}
-    </template>
-
-
-
-
-  </UCard>-->
-  <UCard v-else-if="mode === 'edit' || mode === 'create'">
-    <template #header v-if="mode === 'edit'">
-      {{itemInfo.name}}
-    </template>
-
+  <UForm
+      v-else-if="mode === 'edit' || mode === 'create'"
+      class="p-5"
+  >
     <UFormGroup
         label="Name:"
     >
@@ -268,34 +208,7 @@ setupPage()
         </template>
       </USelectMenu>
     </UFormGroup>
-
-
-
-    <template #footer>
-      <UButton
-          v-if="mode == 'edit'"
-          @click="dataStore.updateItem('plants',itemInfo)"
-      >
-        Speichern
-      </UButton>
-      <UButton
-          v-else-if="mode == 'create'"
-          @click="dataStore.createNewItem('plants', itemInfo)"
-      >
-        Erstellen
-      </UButton>
-      <UButton
-          @click="cancelEditorCreate"
-          color="red"
-          class="ml-2"
-      >
-        Abbrechen
-      </UButton>
-    </template>
-
-  </UCard>
-
-
+  </UForm>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/plants/index.vue b/spaces/pages/plants/index.vue
index 51466b1..2cea4a1 100644
--- a/spaces/pages/plants/index.vue
+++ b/spaces/pages/plants/index.vue
@@ -1,25 +1,62 @@
 <template>
-  <Toolbar>
-    <UButton @click="router.push(`/plants/create/`)">+ Objekt</UButton>
+  <UDashboardNavbar title="Objekte" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
 
-    <UInput
-        v-model="searchString"
-        placeholder="Suche..."
-    />
-  </Toolbar>
+      <UButton @click="router.push(`/plants/create`)">+ Objekt</UButton>
+    </template>
+  </UDashboardNavbar>
 
-  <div class="table">
-    <UTable
-        :rows="filteredRows"
-        :columns="columns"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-    >
-      <template #customer-data="{row}">
-        {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : "" }}
-      </template>
-    </UTable>
-  </div>
+  <UDashboardToolbar>
+    <template #left>
+
+
+      <UCheckbox
+          label="Erledigte Anzeigen"
+          v-model="showDone"
+      />
+    </template>
+
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/plants/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Objekte anzuzeigen' }"
+  >
+    <template #customer-data="{row}">
+      {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : "" }}
+    </template>
+  </UTable>
 
 </template>
 
@@ -29,11 +66,21 @@ definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/plants/create")
+  }
+})
+
 const dataStore = useDataStore()
 const router = useRouter()
-const mode = ref("show")
 
-const columns = [
+const templateColumns = [
   {
     key: "name",
     label: "Name",
@@ -44,6 +91,9 @@ const columns = [
     sortable: true
   }
 ]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
 
 const searchString = ref('')
 
diff --git a/spaces/pages/products/[mode]/[[id]].vue b/spaces/pages/products/[mode]/[[id]].vue
index e40ab0e..e5158f5 100644
--- a/spaces/pages/products/[mode]/[[id]].vue
+++ b/spaces/pages/products/[mode]/[[id]].vue
@@ -8,7 +8,6 @@ definePageMeta({
 })
 
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -16,8 +15,6 @@ const id = ref(route.params.id ? route.params.id : null )
 
 let currentItem = ref(null)
 
-
-
 //Working
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
@@ -33,51 +30,60 @@ const setupPage = () => {
 
   if(mode.value === "edit") itemInfo.value = currentItem.value
 
-
-
-}
-
-
-const editItem = async () => {
-  router.push(`/products/edit/${currentItem.value.id}`)
-  setupPage()
 }
 
 const cancelEditorCreate = () => {
-  mode.value = "show"
-  itemInfo.value = {
-    id: 0,
-
+  if(currentItem.value) {
+    router.push(`/products/show/${currentItem.value.id}`)
+  } else {
+    router.push(`/products/`)
   }
 }
 
-
-
 setupPage()
 </script>
 
 <template>
-  <h1
-      class="mb-3 truncate font-bold text-2xl"
-      v-if="currentItem "
-  >Artikel: {{currentItem.name}}</h1>
+  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Artikel erstellen' : 'Artikel bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('products',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('products',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="  router.push(`/products/edit/${currentItem.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
   <UTabs
     :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Bestand'},{label: 'Dokumente'}]"
     v-if="mode === 'show'"
+    class="p-5"
   >
     <template #item="{item}">
       <UCard class="mt-5">
         <div
           v-if="item.label === 'Informationen'"
         >
-          <Toolbar>
-            <UButton
-                v-if="mode === 'show' && currentItem.id"
-                @click="editItem"
-            >
-              Bearbeiten
-            </UButton>
-          </Toolbar>
           <UBadge
               v-for="tag in currentItem.tags"
               class="mr-2"
@@ -121,11 +127,10 @@ setupPage()
       </UCard>
     </template>
   </UTabs>
-  <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-    <template #header v-if="mode === 'edit'">
-      {{itemInfo.name}}
-    </template>
-
+  <UForm
+      v-else-if="mode == 'edit' || mode == 'create'"
+      class="p-5"
+  >
     <UFormGroup
         label="Name:"
     >
@@ -161,7 +166,11 @@ setupPage()
           v-model="itemInfo.tags"
           :options="dataStore.ownTenant.tags.products"
           multiple
-      />
+      >
+        <template #label>
+          {{itemInfo.tags.join(", ")}}
+        </template>
+      </USelectMenu>
     </UFormGroup>
     <UFormGroup
         label="EAN:"
@@ -190,31 +199,7 @@ setupPage()
         </template>
       </UInput>
     </UFormGroup>
-
-
-    <template #footer>
-      <UButton
-          v-if="mode == 'edit'"
-          @click="dataStore.updateItem('products',itemInfo)"
-      >
-        Speichern
-      </UButton>
-      <UButton
-          v-else-if="mode == 'create'"
-          @click="dataStore.createNewItem('products',itemInfo)"
-      >
-        Erstellen
-      </UButton>
-      <UButton
-          @click="cancelEditorCreate"
-          color="red"
-          class="ml-2"
-      >
-        Abbrechen
-      </UButton>
-    </template>
-
-  </UCard>
+  </UForm>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/products/index.vue b/spaces/pages/products/index.vue
index 75d70a6..b88792d 100644
--- a/spaces/pages/products/index.vue
+++ b/spaces/pages/products/index.vue
@@ -1,20 +1,50 @@
 <template>
-  <Toolbar>
-    <UButton @click="router.push(`/products/create/`)">+ Artikel</UButton>
+  <UDashboardNavbar title="Artikel" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
 
-    <UInput
-        v-model="searchString"
-        placeholder="Suche..."
-    />
-  </Toolbar>
+      <UButton @click="router.push(`/products/create`)">+ Artikel</UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
 
 
   <div class="table">
     <UTable
         :rows="filteredRows"
-        :columns="itemColumns"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+        :columns="columns"
+        class="w-full"
+        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+        @select="(i) => router.push(`/products/show/${i.id}`) "
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }"
     >
       <template #stock-data="{row}">
         {{`${dataStore.getStockByProductId(row.id)} ${(dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : "")}`}}
@@ -45,11 +75,22 @@
 definePageMeta({
   middleware: "auth"
 })
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/products/create")
+  }
+})
+
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const router = useRouter()
 
-const itemColumns = [
+const templateColumns = [
   {
     key: "stock",
     label: "Bestand"
@@ -80,11 +121,8 @@ const itemColumns = [
     sortable: true
   }
 ]
-
-const selectItem = (item) => {
-  console.log(item)
-  router.push(`/products/show/${item.id} `)
-}
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
 const searchString = ref('')
 
diff --git a/spaces/pages/projects/[mode]/[[id]].vue b/spaces/pages/projects/[mode]/[[id]].vue
index 1b2d789..d8e181e 100644
--- a/spaces/pages/projects/[mode]/[[id]].vue
+++ b/spaces/pages/projects/[mode]/[[id]].vue
@@ -82,12 +82,6 @@ const itemInfo = ref({
   customer: 0,
   users: [user.value.id]
 })
-
-const uploadModalOpen = ref(false)
-const fileUploadFormData = ref({
-  tags: ["Dokument"],
-  project: null
-})
 const tags = dataStore.getDocumentTags
 
 
@@ -109,13 +103,6 @@ const setupPage = () => {
       itemInfo.value.customer = dataStore.getPlantById(itemInfo.value.plant).customer
     }
   }
-
-
-}
-
-const editItem = async () => {
-  router.push(`/projects/edit/${currentItem.value.id}`)
-  setupPage()
 }
 
 const cancelEditorCreate = () => {
@@ -126,32 +113,6 @@ const cancelEditorCreate = () => {
   }
 }
 
-const updateItem = async () => {
-  const {error} = await supabase
-      .from("projects")
-      .update(itemInfo.value)
-      .eq('id',itemInfo.value.id)
-
-  if(error) {
-    console.log(error)
-  }
-
-
-  router.push(`/projects/show/${currentItem.value.id}`)
-  toast.add({title: "Projekt erfolgreich gespeichert"})
-  dataStore.fetchProjects()
-}
-
-const uploadFiles = async () => {
-  //uploadInProgress.value = true;
-
-  await dataStore.uploadFiles({...fileUploadFormData.value, project: currentItem.value.id}, document.getElementById("fileUploadInput").files)
-
-  uploadModalOpen.value = false;
-  //uploadInProgress.value = false;
-}
-
-
 const projectHours = () => {
   let hours = 0
   dataStore.getTimesByProjectId(currentItem.value.id).forEach(item => {
@@ -212,21 +173,45 @@ setupPage()
 </script>
 
 <template>
-  <h1
-      class="mb-3 truncate font-bold text-2xl"
-      v-if="currentItem "
-  >Projekt: {{currentItem.name}}</h1>
-  <UTabs :items="tabItems" class="w-full"  v-if="currentItem && mode == 'show'">
+  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Projekt erstellen' : 'Projekt bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('projects',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('projects',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="router.push(`/projects/edit/${currentItem.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UTabs
+      :items="tabItems"
+      v-if="currentItem && mode == 'show'"
+      class="p-5"
+  >
     <template #item="{ item }">
       <UCard class="mt-5">
         <div v-if="item.key === 'information'">
-          <Toolbar>
-            <UButton
-                @click="editItem"
-            >
-              Bearbeiten
-            </UButton>
-          </Toolbar>
+
 
 
           <div class="text-wrap">
@@ -391,11 +376,7 @@ setupPage()
 
   </UTabs>
 
-  <UCard v-else-if="mode === 'edit' || mode === 'create'" >
-    <template #header v-if="mode === 'edit'">
-      {{itemInfo.name}}
-    </template>
-
+  <UForm v-else-if="mode === 'edit' || mode === 'create'" class="p-5" >
     <UFormGroup
         label="Name:"
     >
@@ -477,32 +458,7 @@ setupPage()
         v-model="itemInfo.notes"
       />
     </UFormGroup>
-
-    <template #footer>
-      <UButton
-          v-if="mode == 'edit'"
-          @click="dataStore.updateItem('projects',itemInfo)"
-      >
-        Speichern
-      </UButton>
-      <UButton
-          v-else-if="mode == 'create'"
-          @click="dataStore.createNewItem('projects',itemInfo)"
-      >
-        Erstellen
-      </UButton>
-      <UButton
-          @click="cancelEditorCreate"
-          color="red"
-          class="ml-2"
-      >
-        Abbrechen
-      </UButton>
-    </template>
-
-  </UCard>
-
-
+  </UForm>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/projects/index.vue b/spaces/pages/projects/index.vue
index 562ac26..6d49c73 100644
--- a/spaces/pages/projects/index.vue
+++ b/spaces/pages/projects/index.vue
@@ -1,53 +1,97 @@
 <template>
-  <InputGroup >
-    <UButton @click="router.push(`/projects/create/`)">+ Projekt</UButton>
+  <UDashboardNavbar title="Projekte" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
 
-    <UInput
-        v-model="searchString"
-        placeholder="Suche..."
-    />
+      <UButton @click="router.push(`/projects/create`)">+ Projekt</UButton>
+    </template>
+  </UDashboardNavbar>
 
-    <UCheckbox
-      label="Abgeschlossene anzeigen"
-      v-model="showFinished"
-    />
-  </InputGroup>
+  <UDashboardToolbar>
+    <template #left>
 
 
-  <div class="table">
-    <UTable
-        :rows="filteredRows"
-        @select="selectItem"
-        :columns="itemColumns"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-    >
-      <template #phase-data="{row}">
-        {{getActivePhaseLabel(row)}}
-      </template>
-      <template #customer-data="{row}">
-        {{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ""}}
-      </template>
-      <template #plant-data="{row}">
-        {{dataStore.getPlantById(row.plant) ? dataStore.getPlantById(row.plant).name : ""}}
-      </template>
-      <template #users-data="{row}">
-        {{row.users.map(i => dataStore.getProfileById(i).fullName).join(", ")}}
-      </template>
-    </UTable>
-  </div>
+      <UCheckbox
+          label="Abgeschlossene anzeigen"
+          v-model="showFinished"
+      />
+    </template>
+
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+
+
+
+
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/projects/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekte anzuzeigen' }"
+  >
+    <template #phase-data="{row}">
+      {{getActivePhaseLabel(row)}}
+    </template>
+    <template #customer-data="{row}">
+      {{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ""}}
+    </template>
+    <template #plant-data="{row}">
+      {{dataStore.getPlantById(row.plant) ? dataStore.getPlantById(row.plant).name : ""}}
+    </template>
+    <template #users-data="{row}">
+      {{row.users.map(i => dataStore.getProfileById(i).fullName).join(", ")}}
+    </template>
+  </UTable>
 
 </template>
 
 <script setup>
-
 definePageMeta({
   middleware: "auth"
 })
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/projects/create")
+  }
+})
+
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const router = useRouter()
 
-const itemColumns = [
+const templateColumns = [
   {
     key: "phase",
     label: "Phase"
@@ -80,11 +124,9 @@ const itemColumns = [
     sortable: true
   }
 ]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
-const selectItem = (item) => {
-  console.log(item)
-  router.push(`/projects/show/${item.id} `)
-}
 
 const getActivePhaseLabel = (item) => {
   if(item.phases) {
@@ -125,18 +167,10 @@ const filteredRows = computed(() => {
     return items
   }
 
-
-
   return items.filter(project => {
     return Object.values(project).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
   })
 })
-
-
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/spaces/pages/services/[mode]/[[id]].vue b/spaces/pages/services/[mode]/[[id]].vue
index 57531b6..7f01424 100644
--- a/spaces/pages/services/[mode]/[[id]].vue
+++ b/spaces/pages/services/[mode]/[[id]].vue
@@ -1,14 +1,9 @@
 <script setup>
-import HistoryDisplay from "~/components/HistoryDisplay.vue";
-import DocumentList from "~/components/DocumentList.vue";
-import DocumentUpload from "~/components/DocumentUpload.vue";
-
 definePageMeta({
   middleware: "auth"
 })
 
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -16,8 +11,6 @@ const id = ref(route.params.id ? route.params.id : null )
 
 let currentItem = ref(null)
 
-
-
 //Working
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
@@ -32,21 +25,13 @@ const setupPage = () => {
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem.value
-
-
-
-}
-
-
-const editItem = async () => {
-  router.push(`/services/edit/${currentItem.value.id}`)
-  setupPage()
 }
 
 const cancelEditorCreate = () => {
-  mode.value = "show"
-  itemInfo.value = {
-    id: 0,
+  if(currentItem.value) {
+    router.push(`/services/show/${currentItem.value.id}`)
+  } else {
+    router.push(`/services/`)
   }
 }
 
@@ -56,13 +41,40 @@ setupPage()
 </script>
 
 <template>
-  <h1
-      class="mb-3 truncate font-bold text-2xl"
-      v-if="currentItem "
-  >Leistung: {{currentItem.name}}</h1>
+  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Leistung erstellen' : 'Leistung bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('services',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('services',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="router.push(`/services/edit/${currentItem.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
   <UTabs
     :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Dokumente'}]"
     v-if="mode === 'show'"
+    class="p-5"
   >
     <template #item="{item}">
       <UCard class="mt-5">
@@ -86,7 +98,7 @@ setupPage()
           <UDivider
               class="my-2"
           />-->
-          <span v-if="currentItem.sellingPrice">Verkaufspreis: {{Number(currentItem.sellingPrice).toFixed(2)}} €<br></span>
+          <span v-if="currentItem.sellingPrice">Verkaufspreis: {{String(Number(currentItem.sellingPrice).toFixed(2)).replace(".",",")}} €<br></span>
 
         </div>
         <div
@@ -120,11 +132,10 @@ setupPage()
       </UCard>
     </template>
   </UTabs>
-  <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-    <template #header v-if="mode === 'edit'">
-      {{itemInfo.name}}
-    </template>
-
+  <UForm
+      v-else-if="mode == 'edit' || mode == 'create'"
+    class="p-5"
+  >
     <UFormGroup
         label="Name:"
     >
@@ -179,31 +190,7 @@ setupPage()
         </template>
       </UInput>
     </UFormGroup>
-
-
-    <template #footer>
-      <UButton
-          v-if="mode == 'edit'"
-          @click="dataStore.updateItem('products',itemInfo)"
-      >
-        Speichern
-      </UButton>
-      <UButton
-          v-else-if="mode == 'create'"
-          @click="dataStore.createNewItem('products',itemInfo)"
-      >
-        Erstellen
-      </UButton>
-      <UButton
-          @click="cancelEditorCreate"
-          color="red"
-          class="ml-2"
-      >
-        Abbrechen
-      </UButton>
-    </template>
-
-  </UCard>
+  </UForm>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/services/index.vue b/spaces/pages/services/index.vue
index 44b5eb9..a197066 100644
--- a/spaces/pages/services/index.vue
+++ b/spaces/pages/services/index.vue
@@ -1,34 +1,54 @@
 <template>
-  <Toolbar>
-    <UButton @click="router.push(`/services/create/`)">+ Leistung</UButton>
+  <UDashboardNavbar title="Leistungen" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
 
-    <UInput
-        v-model="searchString"
-        placeholder="Suche..."
-    />
-  </Toolbar>
+      <UButton @click="router.push(`/services/create`)">+ Leistung</UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
 
 
   <div class="table">
     <UTable
         :rows="filteredRows"
-        :columns="itemColumns"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+        :columns="columns"
+        class="w-full"
+        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+        @select="(i) => router.push(`/services/show/${i.id}`) "
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
     >
       <template #sellingPrice-data="{row}">
         {{row.sellingPrice ? Number(row.sellingPrice).toFixed(2) + " €" : ""}}
       </template>
-<!--      <template #tags-data="{row}">
-        <UBadge
-            v-if="row.tags.length > 0"
-            v-for="tag in row.tags"
-            class="mr-2"
-        >
-          {{tag}}
-        </UBadge>
-        <span v-else>-</span>
-      </template>-->
       <template #unit-data="{row}">
         {{dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : row.unit}}
       </template>
@@ -38,15 +58,26 @@
 </template>
 
 <script setup>
-
 definePageMeta({
   middleware: "auth"
 })
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/services/create")
+  }
+})
+
 const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const router = useRouter()
 
-const itemColumns = [
+const templateColumns = [
   {
     key: "name",
     label: "Name",
@@ -68,11 +99,8 @@ const itemColumns = [
     sortable: true
   }*/
 ]
-
-const selectItem = (item) => {
-  console.log(item)
-  router.push(`/services/show/${item.id} `)
-}
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
 const searchString = ref('')
 
@@ -87,8 +115,6 @@ const filteredRows = computed(() => {
     })
   })
 })
-
-
 </script>
 
 <style scoped>
diff --git a/spaces/pages/spaces/[mode]/[[id]].vue b/spaces/pages/spaces/[mode]/[[id]].vue
index d6e7186..6dbb564 100644
--- a/spaces/pages/spaces/[mode]/[[id]].vue
+++ b/spaces/pages/spaces/[mode]/[[id]].vue
@@ -6,17 +6,12 @@ definePageMeta({
 })
 
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
-const numberRange = useNumberRange("spaces")
-
-
 
 let currentItem = ref(null)
-let currentNumberRange = null
 
 //Working
 const mode = ref(route.params.mode || "show")
@@ -38,35 +33,16 @@ const setupPage = async () => {
     spaceMovements.value.forEach(movement => {
       if(spaceProducts.value.filter(product => product.id === movement.productId).length === 0) spaceProducts.value.push(dataStore.getProductById(movement.productId))
     })
-
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem.value
-
-}
-
-const editItem = async () => {
-  router.push(`/inventory/spaces/edit/${currentItem.value.id}`)
-  setupPage()
 }
 
 const cancelEditorCreate = () => {
-  router.push(`/inventory/spaces/`)
-}
-
-const updateItem = async () => {
-  const {error} = await supabase
-      .from("spaces")
-      .update(itemInfo.value)
-      .eq('id',itemInfo.value.id)
-
-  if(error) {
-    console.log(error)
+  if(currentItem.value) {
+    router.push(`/spaces/show/${currentItem.value.id}`)
   } else {
-    mode.value = "show"
-    itemInfo.value = {}
-    toast.add({title: "Lagerplatz erfolgreich gespeichert"})
-    dataStore.fetchSpaces()
+    router.push(`/spaces/`)
   }
 }
 
@@ -76,13 +52,9 @@ function getSpaceProductCount(productId) {
   productMovements.forEach(movement => count += movement.quantity)
 
   return count
-
 }
 
 const printSpaceLabel = async () => {
-
-
-
   axios
       .post(`http://${dataStore.ownTenant.value.labelPrinterIp}/pstprnt`, `^XA^FO10,20^BCN,100^FD${currentItem.value.spaceNumber}^XZ` )
       .then(console.log)
@@ -94,33 +66,44 @@ setupPage()
 </script>
 
 <template>
-  <h1
-      class="mb-3 truncate font-bold text-2xl"
-      v-if="currentItem "
-  >Lagerplatz: {{currentItem.spaceNumber}}</h1>
+  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Lagerplatz erstellen' : 'Lagerplatz bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('spaces',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('spaces',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="  router.push(`/inventory/spaces/edit/${currentItem.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
   <UTabs
     :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Bestand'}]"
     v-if="currentItem && mode == 'show'"
+    class="p-5"
   >
     <template #item="{item}">
       <UCard class="mt-5">
         <div v-if="item.label === 'Informationen'">
-          <Toolbar>
-            <UButton
-                v-if="mode == 'show' && currentItem.id"
-                @click="editItem"
-            >
-              Bearbeiten
-            </UButton>
-            <UButton
-                v-if="mode == 'show' && currentItem.id"
-                @click="printSpaceLabel"
-                class="ml-2"
-            >
-              Label Drucken
-            </UButton>
-          </Toolbar>
-
           <div class="truncate">
             <span>Beschreibung: {{currentItem.description}}</span>
           </div>
@@ -153,11 +136,10 @@ setupPage()
       </UCard>
     </template>
   </UTabs>
-  <UCard v-else-if="mode === 'edit' || mode === 'create'" >
-    <template #header v-if="mode === 'edit'">
-      <UBadge>{{itemInfo.spaceNumber}}</UBadge>{{itemInfo.type}}
-    </template>
-
+  <UForm
+      v-else-if="mode === 'edit' || mode === 'create'"
+      class="p-5"
+  >
     <UFormGroup
         label="Typ:"
     >
@@ -175,31 +157,7 @@ setupPage()
           v-model="itemInfo.description"
       />
     </UFormGroup>
-
-
-    <template #footer>
-      <UButton
-          v-if="mode == 'edit'"
-          @click="dataStore.updateItem('spaces',itemInfo)"
-      >
-        Speichern
-      </UButton>
-      <UButton
-          v-else-if="mode == 'create'"
-          @click="dataStore.createNewItem('spaces',itemInfo)"
-      >
-        Erstellen
-      </UButton>
-      <UButton
-          @click="cancelEditorCreate"
-          color="red"
-          class="ml-2"
-      >
-        Abbrechen
-      </UButton>
-    </template>
-
-  </UCard>
+  </UForm>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/spaces/index.vue b/spaces/pages/spaces/index.vue
index 3cd271c..59fc8b3 100644
--- a/spaces/pages/spaces/index.vue
+++ b/spaces/pages/spaces/index.vue
@@ -1,20 +1,50 @@
 <template>
-  <Toolbar>
-    <UButton @click="router.push(`/inventory/spaces/create/`)">+ Lagerplatz</UButton>
+  <UDashboardNavbar title="Lagerplätze" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
 
-    <UInput
-        v-model="searchString"
-        placeholder="Suche..."
-    />
-  </Toolbar>
+      <UButton @click="router.push(`/spaces/create`)">+ Lagerplatz</UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
 
 
   <div class="table">
     <UTable
         :rows="filteredRows"
-        :columns="itemColumns"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+        :columns="columns"
+        class="w-full"
+        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+        @select="(i) => router.push(`/spaces/show/${i.id}`) "
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Lagerplätze anzuzeigen' }"
     />
   </div>
 
@@ -26,11 +56,21 @@ definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/spaces/create")
+  }
+})
+
 const dataStore = useDataStore()
 const router = useRouter()
-const mode = ref("show")
 
-const itemColumns = [
+const templateColumns = [
   {
     key: 'spaceNumber',
     label: "Lagerplatznr.",
@@ -47,16 +87,10 @@ const itemColumns = [
     sortable: true
   }
 ]
-
-
-const selectItem = (item) => {
-  console.log(item)
-  router.push(`/spaces/show/${item.id} `)
-}
-
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
 const searchString = ref('')
-
 const filteredRows = computed(() => {
   if(!searchString.value) {
     return dataStore.spaces
diff --git a/spaces/pages/tasks/[mode]/[[id]].vue b/spaces/pages/tasks/[mode]/[[id]].vue
index 8a54c65..9dd26fc 100644
--- a/spaces/pages/tasks/[mode]/[[id]].vue
+++ b/spaces/pages/tasks/[mode]/[[id]].vue
@@ -1,12 +1,9 @@
 <script setup>
-import dayjs from "dayjs";
-
 definePageMeta({
   middleware: "auth"
 })
 
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -14,12 +11,6 @@ const id = ref(route.params.id ? route.params.id : null )
 
 let currentItem = ref(null)
 
-/*watch(dataStore.tasks, (oldVal,newVal) => {
-  console.log("OK")
-  console.log(dataStore.tasks)
-  currentItem.value = dataStore.getTaskById(Number(useRoute().params.id))
-})*/
-
 //Working
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({})
@@ -44,7 +35,6 @@ const setupPage = () => {
 
 const editItem = async () => {
   router.push(`/tasks/edit/${currentItem.value.id}`)
-  setupPage()
 }
 
 const cancelEditorCreate = () => {
@@ -55,223 +45,50 @@ const cancelEditorCreate = () => {
   }
 }
 
-const updateItem = async () => {
-  const {error} = await supabase
-      .from("tasks")
-      .update(itemInfo.value)
-      .eq('id',itemInfo.value.id)
-
-  if(error) {
-    console.log(error)
-  }
-
-
-  router.push(`/tasks/show/${currentItem.value.id}`)
-  toast.add({title: "Aufgabe erfolgreich gespeichert"})
-  dataStore.fetchTasks()
-}
-
-
 
 setupPage()
 </script>
 
 <template>
-  <UDashboardPage>
-    <UDashboardPanel grow>
-      <UDashboardNavbar :title="currentItem ? currentItem.name : ''">
-        <template #right>
-          <UButton
-              v-if="mode === 'edit'"
-              @click="dataStore.updateItem('tasks',itemInfo)"
-          >
-            Speichern
-          </UButton>
-          <UButton
-              v-else-if="mode === 'create'"
-              @click="dataStore.createNewItem('tasks',itemInfo)"
-          >
-            Erstellen
-          </UButton>
-          <UButton
-              @click="cancelEditorCreate"
-              color="red"
-              class="ml-2"
-              v-if="mode === 'edit' || mode === 'create'"
-          >
-            Abbrechen
-          </UButton>
-          <UButton
-              v-if="mode === 'show' && currentItem.id"
-              @click="editItem"
-          >
-            Bearbeiten
-          </UButton>
-        </template>
-      </UDashboardNavbar>
-
-<!--      <UDashboardToolbar>
-        <template #left>
-          &lt;!&ndash;          <UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
-
-                    <UInput
-                        v-model="searchString"
-                        placeholder="Suche..."
-                    />&ndash;&gt;
-
-          <UCheckbox
-              label="Erledigte Anzeigen"
-              v-model="showDone"
-          />
-        </template>
-
-        <template #right>
-          <USelectMenu
-              v-model="selectedColumns"
-              icon="i-heroicons-adjustments-horizontal-solid"
-              :options="templateColumns"
-              multiple
-              class="hidden lg:block"
-          >
-            <template #label>
-              Spalten
-            </template>
-          </USelectMenu>
-        </template>
-      </UDashboardToolbar>-->
-
-
-      <UTabs
-          :items="[{label: 'Informationen'},{label: 'Logbuch'}]"
-          v-if="currentItem && mode === 'show'"
-          class="p-5"
+  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Aufgabe erstellen' : 'Aufgabe bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('tasks',itemInfo)"
       >
-        <template #item="{item}">
-          <UCard class="mt-5">
-            <div v-if="item.label === 'Informationen'">
-
-
-              <div class="truncate">
-                <p>Kategorie: {{currentItem.categorie}}</p>
-                <p v-if="currentItem.project">Projekt: <nuxt-link :to="`/projects/show/${currentItem.project}`">{{dataStore.getProjectById(currentItem.project).name}}</nuxt-link></p>
-                <p>Beschreibung: {{currentItem.description}}</p>
-              </div>
-
-            </div>
-            <!-- TODO: Logbuch Tasks -->
-          </UCard>
-        </template>
-      </UTabs>
-
-      <UForm v-else-if="mode === 'edit' || mode === 'create' " class="p-5">
-        <UFormGroup
-            label="Name:"
-        >
-          <UInput
-              v-model="itemInfo.name"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-            label="Kategorie:"
-        >
-          <USelectMenu
-              v-model="itemInfo.categorie"
-              :options="categories"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-            label="Benutzer:"
-        >
-          <USelectMenu
-              v-model="itemInfo.user"
-              :options="dataStore.profiles"
-              option-attribute="fullName"
-              value-attribute="id"
-              searchable-placeholder="Suche..."
-              searchable
-              :search-attributes="['fullName']"
-          >
-            <template #label>
-              {{dataStore.getProfileById(itemInfo.user) ? dataStore.getProfileById(itemInfo.user).fullName : "Kein Benutzer ausgewählt"}}
-            </template>
-          </USelectMenu>
-        </UFormGroup>
-        <UFormGroup
-            label="Projekt:"
-        >
-          <USelectMenu
-              v-model="itemInfo.project"
-              :options="dataStore.projects"
-              option-attribute="name"
-              value-attribute="id"
-              searchable-placeholder="Suche..."
-              searchable
-              :search-attributes="['name']"
-          >
-            <template #label>
-              {{dataStore.getProjectById(itemInfo.project) ? dataStore.getProjectById(itemInfo.project).name : "Kein Projekt ausgewählt"}}
-            </template>
-          </USelectMenu>
-        </UFormGroup>
-        <UFormGroup
-            label="Objekt:"
-        >
-          <USelectMenu
-              v-model="itemInfo.plant"
-              :options="dataStore.plants"
-              option-attribute="name"
-              value-attribute="id"
-              searchable-placeholder="Suche..."
-              searchable
-              :search-attributes="['name']"
-          >
-            <template #label>
-              {{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Kein Objekt ausgewählt"}}
-            </template>
-          </USelectMenu>
-        </UFormGroup>
-
-        <UFormGroup
-            label="Beschreibung:"
-        >
-          <UTextarea
-              v-model="itemInfo.description"
-          />
-        </UFormGroup>
-      </UForm>
-
-
-
-    </UDashboardPanel>
-  </UDashboardPage>
-
-<!--  <h1
-      class="mb-3 truncate font-bold text-2xl"
-      v-if="currentItem"
-  >Aufgabe: {{currentItem.name}}</h1>
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('tasks',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="editItem"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
   <UTabs
-    :items="[{label: 'Informationen'},{label: 'Logbuch'}]"
-    v-if="currentItem && mode === 'show'"
+      :items="[{label: 'Informationen'},{label: 'Logbuch'}]"
+      v-if="currentItem && mode === 'show'"
+      class="p-5"
   >
     <template #item="{item}">
       <UCard class="mt-5">
         <div v-if="item.label === 'Informationen'">
-          <Toolbar>
-            <UButton
-                v-if="mode === 'show' && currentItem.id"
-                @click="editItem"
-            >
-              Bearbeiten
-            </UButton>
-            <UButton
-                v-if="currentItem.project"
-                @click="router.push(`/projects/show/${currentItem.project}`)"
-            >
-              Zum Projekt
-            </UButton>
-          </Toolbar>
+
 
           <div class="truncate">
             <p>Kategorie: {{currentItem.categorie}}</p>
@@ -280,15 +97,12 @@ setupPage()
           </div>
 
         </div>
-        &lt;!&ndash; TODO: Logbuch Tasks &ndash;&gt;
+        <!-- TODO: Logbuch Tasks -->
       </UCard>
     </template>
   </UTabs>
-  <UCard v-else-if="mode === 'edit' || mode === 'create'" >
-    <template #header v-if="mode === 'edit'">
-      {{itemInfo.name}}
-    </template>
 
+  <UForm v-else-if="mode === 'edit' || mode === 'create' " class="p-5">
     <UFormGroup
         label="Name:"
     >
@@ -358,9 +172,6 @@ setupPage()
       </USelectMenu>
     </UFormGroup>
 
-
-
-
     <UFormGroup
         label="Beschreibung:"
     >
@@ -368,31 +179,7 @@ setupPage()
           v-model="itemInfo.description"
       />
     </UFormGroup>
-
-
-    <template #footer>
-      <UButton
-          v-if="mode === 'edit'"
-          @click="dataStore.updateItem('tasks',itemInfo)"
-      >
-        Speichern
-      </UButton>
-      <UButton
-          v-else-if="mode === 'create'"
-          @click="dataStore.createNewItem('tasks',itemInfo)"
-      >
-        Erstellen
-      </UButton>
-      <UButton
-          @click="cancelEditorCreate"
-          color="red"
-          class="ml-2"
-      >
-        Abbrechen
-      </UButton>
-    </template>
-
-  </UCard>-->
+  </UForm>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/tasks/index.vue b/spaces/pages/tasks/index.vue
index 0c96012..57bab26 100644
--- a/spaces/pages/tasks/index.vue
+++ b/spaces/pages/tasks/index.vue
@@ -1,108 +1,98 @@
 <template>
-  <UDashboardPage>
-    <UDashboardPanel grow>
-      <UDashboardNavbar title="Aufgaben" :badge="filteredRows.length">
-        <template #right>
-          <UInput
-              ref="input"
-              v-model="searchString"
-              icon="i-heroicons-funnel"
-              autocomplete="off"
-              placeholder="Suche..."
-              class="hidden lg:block"
-              @keydown.esc="$event.target.blur()"
-          >
-            <template #trailing>
-              <UKbd value="/" />
-            </template>
-          </UInput>
-
-          <UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
-        </template>
-      </UDashboardNavbar>
-
-      <UDashboardToolbar>
-        <template #left>
-<!--          <UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
-
-          <UInput
-              v-model="searchString"
-              placeholder="Suche..."
-          />-->
-
-          <UCheckbox
-              label="Erledigte Anzeigen"
-              v-model="showDone"
-          />
-        </template>
-
-        <template #right>
-          <USelectMenu
-              v-model="selectedColumns"
-              icon="i-heroicons-adjustments-horizontal-solid"
-              :options="templateColumns"
-              multiple
-              class="hidden lg:block"
-          >
-            <template #label>
-              Spalten
-            </template>
-          </USelectMenu>
-        </template>
-      </UDashboardToolbar>
-
-      <UTable
-          v-model:sort="sort"
-          :rows="filteredRows"
-          :columns="columns"
-          sort-mode="manual"
-          class="w-full"
-          :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-          @select="(i) => router.push(`/tasks/show/${i.id}`) "
+  <UDashboardNavbar title="Aufgaben" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
       >
-        <template #finish-data="{row}">
-          <UButton
-              icon="i-heroicons-check"
-              variant="ghost"
-              @click="markAsFinished(row)"
-          />
+        <template #trailing>
+          <UKbd value="/" />
         </template>
-        <template #created_at-data="{row}">
-          {{row.created_at ? dayjs(row.created_at).format("DD.MM.YY HH:mm") : ''}}
+      </UInput>
+
+      <UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardToolbar>
+    <template #left>
+
+
+      <UCheckbox
+          label="Erledigte Anzeigen"
+          v-model="showDone"
+      />
+    </template>
+
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
         </template>
-        <template #user-data="{row}">
-          {{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
-        </template>
-        <template #project-data="{row}">
-          {{dataStore.projects.find(i => i.id === row.project) ? dataStore.projects.find(i => i.id === row.project).name : ""}}
-        </template>
-        <template #customer-data="{row}">
-          {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : "" }}
-        </template>
-        <template #plant-data="{row}">
-          {{dataStore.getPlantById(row.plant) ? dataStore.getPlantById(row.plant).name : "" }}
-        </template>
-      </UTable>
-    </UDashboardPanel>
-  </UDashboardPage>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/tasks/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Aufgaben anzuzeigen' }"
+  >
+    <template #finish-data="{row}">
+      <UButton
+          icon="i-heroicons-check"
+          variant="ghost"
+          @click="markAsFinished(row)"
+      />
+    </template>
+    <template #created_at-data="{row}">
+      {{row.created_at ? dayjs(row.created_at).format("DD.MM.YY HH:mm") : ''}}
+    </template>
+    <template #user-data="{row}">
+      {{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
+    </template>
+    <template #project-data="{row}">
+      {{dataStore.projects.find(i => i.id === row.project) ? dataStore.projects.find(i => i.id === row.project).name : ""}}
+    </template>
+    <template #customer-data="{row}">
+      {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : "" }}
+    </template>
+    <template #plant-data="{row}">
+      {{dataStore.getPlantById(row.plant) ? dataStore.getPlantById(row.plant).name : "" }}
+    </template>
+  </UTable>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import  dayjs from "dayjs";
 
 definePageMeta({
   middleware: "auth"
 })
-const input = ref<{ input: HTMLInputElement }>()
 
 const dataStore = useDataStore()
 const router = useRouter()
-const mode = ref("show")
-
 
 defineShortcuts({
   '/': () => {
-    input.value?.input?.focus()
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
   },
   '+': () => {
     router.push("/tasks/create")
@@ -143,40 +133,30 @@ const templateColumns = [
     sortable: true
   }
 ]
-
 const selectedColumns = ref(templateColumns)
 const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
+const markAsFinished = (item) => {
+  dataStore.updateItem("tasks", {...item, categorie: "Erledigt"})
+}
 
 const searchString = ref('')
 const showDone = ref(false)
-
-
 const filteredRows = computed(() => {
-  let tasks = dataStore.tasks
+  let items = dataStore.tasks
 
-  if(!showDone.value) {
-    tasks = tasks.filter(i => i.categorie !== "Erledigt")
-  }
+  items = items.filter(i => showDone.value === true ? i.categorie === "Erledigt" : i.categorie !== "Erledigt")
 
   if(!searchString.value) {
-    return tasks
+    return items
   }
 
-  return tasks.filter(item => {
+  return items.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
   })
 })
-
-const selectItem = (item) => {
-  router.push(`/tasks/show/${item.id} `)
-}
-
-const markAsFinished = (item) => {
-  dataStore.updateItem("tasks", {...item, categorie: "Erledigt"})
-}
 </script>
 
 <style scoped>
diff --git a/spaces/pages/test.vue b/spaces/pages/test.vue
deleted file mode 100644
index 097c7ba..0000000
--- a/spaces/pages/test.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-test
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/spaces/pages/vehicles/[mode]/[[id]].vue b/spaces/pages/vehicles/[mode]/[[id]].vue
index ebffa94..6eb663b 100644
--- a/spaces/pages/vehicles/[mode]/[[id]].vue
+++ b/spaces/pages/vehicles/[mode]/[[id]].vue
@@ -6,7 +6,6 @@ definePageMeta({
 })
 
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -14,8 +13,6 @@ const id = ref(route.params.id ? route.params.id : null )
 
 let currentItem = ref(null)
 
-
-
 //Working
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
@@ -65,15 +62,6 @@ const setupPage = () => {
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem.value
-
-
-
-}
-
-
-const editCustomer = async () => {
-  router.push(`/vehicles/edit/${currentItem.value.id}`)
-  setupPage()
 }
 
 const cancelEditorCreate = () => {
@@ -85,20 +73,7 @@ const cancelEditorCreate = () => {
 
 }
 
-const updateItem = async () => {
-  const {error} = await supabase
-      .from("vehicles")
-      .update(itemInfo.value)
-      .eq('id',itemInfo.value.id)
-  if(error) {
-    console.log(error)
-  } else {
 
-    router.push(`/vehicles/show/${currentItem.value.id}`)
-    toast.add({title: "Fahrzeug erfolgreich gespeichert"})
-    dataStore.fetchVehicles()
-  }
-}
 
 const getRowAmount = (row) => {
   let amount = 0
@@ -115,148 +90,123 @@ setupPage()
 </script>
 
 <template>
-  <div>
-    <UCard v-if="currentItem && mode == 'show'" >
-      <template #header>
-        <UBadge
-            v-if="currentItem.active"
-        >
-          Fahrzeug aktiv
-        </UBadge>
-        <UBadge
-          v-else
+  <UDashboardNavbar :title="currentItem ? currentItem.licensePlate : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('vehicles',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('vehicles',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
           color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="router.push(`/vehicles/edit/${currentItem.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UTabs
+      :items="tabItems"
+      v-if="mode === 'show'"
+      class="p-5"
+  >
+    <template #item="{item}">
+      <div v-if="item.label === 'Informationen'">
+        Typ: {{currentItem.type}} <br>
+        Fahrer: {{dataStore.profiles.find(profile => profile.id === currentItem.driver) ? dataStore.profiles.find(profile => profile.id === currentItem.driver).fullName : 'Kein Fahrer gewählt'}} <br>
+      </div>
+      <div v-else-if="item.label === 'Eingangsrechnungen'">
+        <UTable
+            :rows="dataStore.getIncomingInvoicesByVehicleId(currentItem.id)"
+            :columns="incomingInvoicesColumns"
+            @select="(row) => router.push('/receipts/show/' + row.id)"
         >
-          Fahrzeug gesperrt
-        </UBadge>
-        {{currentItem.licensePlate}}
-      </template>
-
-      <UTabs :items="tabItems">
-          <template #item="{item}">
-            <div v-if="item.label === 'Informationen'">
-              <InputGroup class="mb-3">
-                <UButton
-                    @click="editCustomer"
-                >
-                  Bearbeiten
-                </UButton>
-              </InputGroup>
-              Typ: {{currentItem.type}} <br>
-              Fahrer: {{dataStore.profiles.find(profile => profile.id === currentItem.driver) ? dataStore.profiles.find(profile => profile.id === currentItem.driver).fullName : 'Kein Fahrer gewählt'}} <br>
-            </div>
-            <div v-else-if="item.label === 'Eingangsrechnungen'">
-              <UTable
-                :rows="dataStore.getIncomingInvoicesByVehicleId(currentItem.id)"
-                :columns="incomingInvoicesColumns"
-                @select="(row) => router.push('/receipts/show/' + row.id)"
-              >
-                  <template #vendor-data="{row}">
-                    {{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ""}}
-                  </template>
-                  <template #date-data="{row}">
-                    {{dayjs(row.date).format("DD.MM.YYYY")}}
-                  </template>
-                  <template #accounts-data="{row}">
-                    {{getRowAmount(row) ? String(getRowAmount(row).toFixed(2)).replace('.',',') + " €" : ""}}
-                  </template>
-              </UTable>
-
-            </div>
-            <div v-else-if="item.label === 'Dokumente'">
-              <InputGroup>
-                <DocumentUpload
-                  type="vehicle"
-                  :element-id="currentItem.id"
-                />
-              </InputGroup>
-
-              <DocumentList
-                  :documents="dataStore.getDocumentsByVehicleId(currentItem.id)"
-              />
-            </div>
+          <template #vendor-data="{row}">
+            {{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ""}}
           </template>
-      </UTabs>
-
-
-
-
-
-
-
-
-
-    </UCard>
-    <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-      <template #header v-if="mode === 'edit'">
-        {{itemInfo.licensePlate}}
-      </template>
-
-      <UFormGroup
-          label="Kennzeichen:"
-      >
-        <UInput
-            v-model="itemInfo.licensePlate"
-        />
-      </UFormGroup>
-
-
-
-      <UFormGroup
-          label="Fahrzeug aktiv:"
-      >
-        <UCheckbox
-            v-model="itemInfo.active"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Typ:"
-      >
-        <UTextarea
-            v-model="itemInfo.type"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Fahrer:"
-      >
-        <USelectMenu
-            v-model="itemInfo.driver"
-            :options="[{id: null, fullName: 'Kein Fahrer'},...dataStore.profiles]"
-            option-attribute="fullName"
-            value-attribute="id"
-
-        >
-          <template #label>
-            {{dataStore.profiles.find(profile => profile.id === itemInfo.driver) ? dataStore.profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer ausgewählt'}}
+          <template #date-data="{row}">
+            {{dayjs(row.date).format("DD.MM.YYYY")}}
           </template>
-        </USelectMenu>
-      </UFormGroup>
+          <template #accounts-data="{row}">
+            {{getRowAmount(row) ? String(getRowAmount(row).toFixed(2)).replace('.',',') + " €" : ""}}
+          </template>
+        </UTable>
+
+      </div>
+      <div v-else-if="item.label === 'Dokumente'">
+        <Toolbar>
+          <DocumentUpload
+              type="vehicle"
+              :element-id="currentItem.id"
+          />
+        </Toolbar>
+
+        <DocumentList
+            :documents="dataStore.getDocumentsByVehicleId(currentItem.id)"
+        />
+      </div>
+    </template>
+  </UTabs>
+  <UForm
+      v-else-if="mode == 'edit' || mode == 'create'"
+      class="p-5"
+  >
+
+    <UFormGroup
+        label="Kennzeichen:"
+    >
+      <UInput
+          v-model="itemInfo.licensePlate"
+      />
+    </UFormGroup>
 
 
-      <template #footer>
-        <UButton
-            v-if="mode == 'edit'"
-            @click="dataStore.updateItem('vehicles',itemInfo)"
-        >
-          Speichern
-        </UButton>
-        <UButton
-            v-else-if="mode == 'create'"
-            @click="dataStore.createNewItem('vehicles',itemInfo)"
-        >
-          Erstellen
-        </UButton>
-        <UButton
-            @click="cancelEditorCreate"
-            color="red"
-            class="ml-2"
-        >
-          Abbrechen
-        </UButton>
-      </template>
 
-    </UCard>
-  </div>
+    <UFormGroup
+        label="Fahrzeug aktiv:"
+    >
+      <UCheckbox
+          v-model="itemInfo.active"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Typ:"
+    >
+      <UTextarea
+          v-model="itemInfo.type"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Fahrer:"
+    >
+      <USelectMenu
+          v-model="itemInfo.driver"
+          :options="[{id: null, fullName: 'Kein Fahrer'},...dataStore.profiles]"
+          option-attribute="fullName"
+          value-attribute="id"
+
+      >
+        <template #label>
+          {{dataStore.profiles.find(profile => profile.id === itemInfo.driver) ? dataStore.profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer ausgewählt'}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+  </UForm>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/vehicles/index.vue b/spaces/pages/vehicles/index.vue
index 11c4c08..1043153 100644
--- a/spaces/pages/vehicles/index.vue
+++ b/spaces/pages/vehicles/index.vue
@@ -1,27 +1,51 @@
 <template>
-  <div id="main">
-
-    <div class="flex items-center gap-1">
-      <UButton @click="router.push(`/vehicles/create/`)">+ Fahrzeug</UButton>
-
+  <UDashboardNavbar title="Fahrzeuge" :badge="filteredRows.length">
+    <template #right>
       <UInput
+          id="searchinput"
           v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
           placeholder="Suche..."
-      />
-    </div>
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
 
+      <UButton @click="router.push(`/vehicles/create`)">+ Fahrzeug</UButton>
+    </template>
+  </UDashboardNavbar>
 
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
 
-    <UTable
-        :rows="filteredRows"
-        :columns="itemColumns"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-    >
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/vehicles/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Fahrzeuge anzuzeigen' }"
+  >
 
-    </UTable>
-
-  </div>
+  </UTable>
 </template>
 
 <script setup>
@@ -30,12 +54,21 @@ definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/tasks/create")
+  }
+})
+
 const dataStore = useDataStore()
 const router = useRouter()
-const {vehicles } = storeToRefs(useDataStore())
-const mode = ref("show")
 
-const itemColumns = [
+const templateColumns = [
   {
     key: 'licensePlate',
     label: "Kennzeichen:",
@@ -47,12 +80,8 @@ const itemColumns = [
     sortable: true
   }
 ]
-
-
-const selectItem = (item) => {
-  router.push(`/vehicles/show/${item.id} `)
-}
-
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
 const searchString = ref('')
 
diff --git a/spaces/pages/vendors/[mode]/[[id]].vue b/spaces/pages/vendors/[mode]/[[id]].vue
index 5918ef4..48ed0e0 100644
--- a/spaces/pages/vendors/[mode]/[[id]].vue
+++ b/spaces/pages/vendors/[mode]/[[id]].vue
@@ -6,12 +6,10 @@ definePageMeta({
 })
 
 const dataStore = useDataStore()
-const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
-const numberRange  = useNumberRange("vendors")
 
 let currentItem = ref(null)
 
@@ -34,7 +32,6 @@ const setupPage = () => {
 
 const editItem = async () => {
   router.push(`/vendors/edit/${currentItem.value.id}`)
-  setupPage()
 }
 
 const cancelEditorCreate = () => {
@@ -43,32 +40,51 @@ const cancelEditorCreate = () => {
   } else {
     router.push(`/vendors`)
   }
-
 }
 
 setupPage()
 </script>
 
 <template>
-  <h1
-      class=" mb-3 font-bold text-2xl truncate"
-      v-if="currentItem "
-  >Lieferant: {{currentItem.name}}</h1>
+  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Lieferant erstellen' : 'Lieferant bearbeiten')">
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('vendors',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('vendors',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="editItem"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
   <UTabs
     :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Ansprechpartner'},{label: 'Dokumente'}]"
     v-if="currentItem && mode == 'show'"
+    class="p-5"
   >
     <template #item="{item}">
       <UCard class="mt-5">
         <div v-if="item.label === 'Informationen'">
-          <Toolbar>
-            <UButton
-                v-if="mode == 'show' && currentItem.id"
-                @click="editItem"
-            >
-              Bearbeiten
-            </UButton>
-          </Toolbar>
+
 
           <div v-if="currentItem.infoData" class="text-wrap">
             <p v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}</p>
@@ -120,11 +136,10 @@ setupPage()
       </UCard>
     </template>
   </UTabs>
-  <UCard v-else-if="mode === 'edit' || mode === 'create'" >
-    <template #header v-if="mode === 'edit'">
-      {{itemInfo.name}}
-    </template>
-
+  <UForm
+      v-else-if="mode === 'edit' || mode === 'create'"
+      class="p-5"
+  >
     <UFormGroup
         label="Name:"
     >
@@ -198,33 +213,7 @@ setupPage()
           v-model="itemInfo.infoData.ustid"
       />
     </UFormGroup>
-
-
-    <template #footer>
-      <UButton
-          v-if="mode == 'edit'"
-          @click="dataStore.updateItem('vendors',itemInfo)"
-      >
-        Speichern
-      </UButton>
-      <UButton
-          v-else-if="mode == 'create'"
-          @click="dataStore.createNewItem('vendors',itemInfo)"
-      >
-        Erstellen
-      </UButton>
-      <UButton
-          @click="cancelEditorCreate"
-          color="red"
-          class="ml-2"
-      >
-        Abbrechen
-      </UButton>
-    </template>
-
-  </UCard>
-
-
+  </UForm>
 </template>
 
 <style scoped>
diff --git a/spaces/pages/vendors/index.vue b/spaces/pages/vendors/index.vue
index dc6dbbb..963cef3 100644
--- a/spaces/pages/vendors/index.vue
+++ b/spaces/pages/vendors/index.vue
@@ -1,60 +1,78 @@
 <template>
-  <Toolbar>
-    <UButton @click="router.push(`/vendors/create/`)">+ Lieferant</UButton>
+  <UDashboardNavbar title="Lieferanten" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          ref="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
 
-    <UInput
-        v-model="searchString"
-        placeholder="Suche..."
-    />
+      <UButton @click="router.push(`/vendors/create/`)">+ Lieferant</UButton>
 
-    <USelectMenu
-        v-model="selectedColumns"
-        multiple
-        :options="columnTemplate"
-        :uiMenu="{width:'w-40'}"
-        :popper="{placement: 'bottom-start'}"
-        by="key"
-    >
-      <UButton
-          color="gray"
-          variant="ghost"
-          class="flex-1 justify-between"
-          icon="i-heroicons-view-columns"
-      />
+    </template>
+  </UDashboardNavbar>
 
-      <template #option="{ option }">
-        {{option.label}}
-      </template>
-    </USelectMenu>
-  </Toolbar>
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
 
-
-  <div class="table">
-    <UTable
-        :rows="filteredRows"
-        :columns="selectedColumns"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-    >
-      <template #address-data="{row}">
-        {{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{(row.infoData.zip || row.infoData.city) ? `${row.infoData.zip} ${row.infoData.city}, ` : ''}} {{row.infoData.country}}
-      </template>
-    </UTable>
-  </div>
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      class="w-full"
+      @select="(i) => router.push(`/vendors/show/${i.id}`)"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Lieferanten anzuzeigen' }"
+  >
+    <template #address-data="{row}">
+      {{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{(row.infoData.zip || row.infoData.city) ? `${row.infoData.zip} ${row.infoData.city}, ` : ''}} {{row.infoData.country}}
+    </template>
+  </UTable>
 
 </template>
 
 <script setup>
-
 definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/vendors/create")
+  }
+})
+
 const dataStore = useDataStore()
 const router = useRouter()
 const mode = ref("show")
 
-const columnTemplate = ref([
+const templateColumns = [
   {
     key: 'vendorNumber',
     label: "Lieferantennr.",
@@ -70,26 +88,9 @@ const columnTemplate = ref([
     label: "Adresse",
     sortable: true
   }
-])
-const selectedColumns = ref([
-  {
-    key: 'vendorNumber',
-    label: "Lieferantennr.",
-    sortable: true
-  },
-  {
-    key: "name",
-    label: "Name",
-    sortable: true
-  }
-])
-
-
-const selectItem = (item) => {
-  console.log(item)
-  router.push(`/vendors/show/${item.id} `)
-}
-
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
 const searchString = ref('')