diff --git a/pages/workingtimes/index.vue b/pages/workingtimes/index.vue
index 5ecf5d4..eb5aa6e 100644
--- a/pages/workingtimes/index.vue
+++ b/pages/workingtimes/index.vue
@@ -53,7 +53,12 @@ const filteredRows = computed(() => {
     times  = []
   }*/
 
-  return times
+  return times/*.map(i => {
+    return {
+      ...i,
+      disabledExpand: i.approved
+    }
+  })*/
 
 })
 
@@ -171,6 +176,17 @@ const getDuration = (time) => {
   }
 }
 
+const updateWorkingTime = async (data) => {
+  await dataStore.updateItem('workingtimes',data)
+  await setupPage()
+}
+
+
+const expand = ref({
+  openedRows: [],
+  row: {}
+})
+
 </script>
 
 <template>
@@ -245,12 +261,81 @@ const getDuration = (time) => {
       :columns="columns"
       :rows="filteredRows"
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-      @select="(row) => {
-        router.push(`/workingtimes/edit/${row.id}`)}"
+      @select="(i) => expand.openedRows = [i]"
+      v-model:expand="expand"
+      :multiple-expand="false"
+
   >
     <template #expand="{ row }">
-      <div class="p-4">
-        <pre>{{ row }}</pre>
+      <InputGroup class="p-4">
+        <UTooltip text="Genehmigen & Speichern" v-if="!row.approved">
+          <UButton
+              @click="updateWorkingTime({...row, approved: true})"
+              icon="i-heroicons-check"
+          />
+        </UTooltip>
+        <UTooltip text="Speichern"  v-if="!row.approved">
+          <UButton
+              @click="updateWorkingTime(row)"
+              icon="i-mdi-content-save"
+              variant="outline"
+          />
+        </UTooltip>
+        <UTooltip text="Bearbeiten">
+          <UButton
+              @click="router.push(`/workingtimes/edit/${row.id}`)"
+              variant="outline"
+              icon="i-heroicons-pencil-solid"
+          />
+        </UTooltip>
+      </InputGroup>
+      <div class="p-4" v-if="!row.approved">
+
+
+        <UFormGroup label="Start:">
+          <UPopover :popper="{ placement: 'bottom-start' }">
+            <UButton
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="row.startDate ? dayjs(row.startDate).format('HH:mm') : 'Datum auswählen'"
+                variant="outline"
+            />
+
+            <template #panel="{ close }">
+              <LazyDatePicker v-model="row.startDate" @close="row.endDate = row.startDate" mode="dateTime"/>
+            </template>
+          </UPopover>
+        </UFormGroup>
+        <UFormGroup label="Ende:">
+          <UPopover :popper="{ placement: 'bottom-start' }">
+            <UButton
+                :disabled="!row.endDate"
+                variant="outline"
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="row.endDate ? dayjs(row.endDate).format('HH:mm') : 'Datum auswählen'"
+            />
+
+            <template #panel="{ close }">
+              <LazyDatePicker v-model="row.endDate" @close="close" mode="time"/>
+            </template>
+          </UPopover>
+        </UFormGroup>
+        <UFormGroup
+            label="Notizen:"
+        >
+          <UTextarea
+              v-model="row.notes"
+          />
+        </UFormGroup>
+
+
+
+      </div>
+      <div class="px-4 pb-4" v-else>
+        <p><span class="font-bold">Mitarbeitende/r:</span> {{dataStore.getProfileById(row.profile).fullName}}</p>
+        <p><span class="font-bold">Start:</span> {{dayjs(row.startDate).format("DD.MM.YYYY HH:mm")}}</p>
+        <p><span class="font-bold">Ende:</span> {{dayjs(row.endDate).format("DD.MM.YYYY HH:mm")}}</p>
+        <p><span class="font-bold">Genehmigt:</span> {{row.approved ? "Ja" : "Nein"}}</p>
+        <p><span class="font-bold">Notizen:</span> {{row.notes}}</p>
       </div>
     </template>
     <template #profile-data="{row}">