diff --git a/pages/profiles/show/[id].vue b/pages/profiles/show/[id].vue
index a23cc88..c01479d 100644
--- a/pages/profiles/show/[id].vue
+++ b/pages/profiles/show/[id].vue
@@ -5,6 +5,8 @@ import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import isoWeek from "dayjs/plugin/isoWeek"
 import isBetween from "dayjs/plugin/isBetween"
+import DocumentList from "~/components/DocumentList.vue";
+import DocumentUpload from "~/components/DocumentUpload.vue";
 dayjs.extend(customParseFormat)
 dayjs.extend(isoWeek)
 dayjs.extend(isBetween)
@@ -19,104 +21,17 @@ const itemInfo = ref({
   weeklyRegularWorkingHours: {}
 })
 const oldItemInfo = ref({})
-const setupPage = () => {
-  if(route.params.id) itemInfo.value = dataStore.getProfileById(route.params.id)
+
+const setupPage = async () => {
+
+  if(route.params.id) {
+    itemInfo.value = await useSupabaseSelectSingle("profiles",route.params.id,"*, documents(*)")
+  }
+
   if(itemInfo.value.id) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
 }
 
-const selectedPresetRange = ref("Dieser Monat")
-const selectedStartDay = ref("")
-const selectedEndDay = ref("")
-
-const changeRange = () => {
-  let selector = "w"
-  let subtract = 0
-
-  if(selectedPresetRange.value === "Diese Woche") {
-    selector = "isoWeek"
-    subtract = 0
-
-  } else if(selectedPresetRange.value === "Dieser Monat") {
-    selector = "M"
-    subtract = 0
-
-  } else if(selectedPresetRange.value === "Dieses Jahr") {
-    selector = "y"
-    subtract = 0
-  } else if(selectedPresetRange.value === "Letzte Woche") {
-    selector = "isoWeek"
-    subtract = 1
-  } else if(selectedPresetRange.value === "Letzter Monat") {
-    selector = "M"
-    subtract = 1
-  } else if(selectedPresetRange.value === "Letztes Jahr") {
-    selector = "y"
-    subtract = 1
-  }
-
-  selectedStartDay.value = dayjs().subtract(subtract,selector === "isoWeek" ? "week" : selector).startOf(selector).format("YYYY-MM-DD")
-  selectedEndDay.value = dayjs().subtract(subtract,selector === "isoWeek" ? "week" : selector).endOf(selector).format("YYYY-MM-DD")
-
-}
-
-
-const workingTimeInfo = computed(() => {
-
-  let times = dataStore.getWorkingTimesByProfileId(itemInfo.value.id)
-
-  times = times.filter(i => dayjs(i.date).isBetween(dayjs(selectedStartDay.value).subtract(1,"days"),selectedEndDay.value,'day') && i.end)
-
-
-
-  let weekFactor = 4.33
-  let monthlyWorkingHours = itemInfo.value.weeklyWorkingHours * weekFactor
-
-
-  //Eingreicht
-  let sumWorkingMinutesEingereicht = 0
-  times.filter(i => !i.approved).forEach(time => {
-    const minutes = dayjs(time.end, "HH:mm:ss").diff(dayjs(time.start, "HH:mm:ss"),'minutes')
-    sumWorkingMinutesEingereicht = sumWorkingMinutesEingereicht + minutes
-  })
-
-  //Bestätigt
-  let sumWorkingMinutesApproved = 0
-  times.filter(i => i.approved).forEach(time => {
-    const minutes = dayjs(time.end, "HH:mm:ss").diff(dayjs(time.start, "HH:mm:ss"),'minutes')
-    sumWorkingMinutesApproved = sumWorkingMinutesApproved + minutes
-  })
-  //console.log(times.filter(i => i.approved).length)
-  //console.log(sumWorkingMinutesApproved)
-
-
-  //Saldo
-  let saldo = (sumWorkingMinutesApproved / 60).toFixed(2) - monthlyWorkingHours
-  let saldoInOfficial = ((sumWorkingMinutesApproved + sumWorkingMinutesEingereicht) / 60).toFixed(2) - monthlyWorkingHours
-
-  return {
-    monthlyWorkingHours,
-    sumWorkingMinutesEingereicht,
-    sumWorkingMinutesApproved,
-    saldo,
-    saldoInOfficial
-  }
-})
-
-const getDuration = (time) => {
-  const minutes = Math.floor(dayjs(time.end, "HH:mm:ss").diff(dayjs(time.start, "HH:mm:ss"),'minutes',true))
-  const hours = Math.floor(minutes/60)
-  return {
-    //dezimal: dez,
-    hours: hours,
-    minutes: minutes,
-    composed: `${hours}:${String(minutes % 60).padStart(2,"0")} h`
-  }
-}
-
-
-
 setupPage()
-changeRange()
 
 const emailSignature = ref(dataStore.activeProfile.emailSignature)
 const tiptapLoaded = ref(false)
@@ -205,6 +120,7 @@ const isLight = computed({
   </UDashboardNavbar>
 
   <UTabs
+      v-if="itemInfo.id"
     class="p-5"
     :items="[
         {
@@ -301,12 +217,13 @@ const isLight = computed({
             </UFormGroup>
           </InputGroup>
 
-          <UDivider class="my-5">
+          <UDivider class="my-5" v-if="dataStore.activeProfile.id === itemInfo.id">
             Helligkeitseinstellung
           </UDivider>
 
           <UButton
-              :icon="!isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+              v-if="dataStore.activeProfile.id === itemInfo.id"
+              :icon="isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
               color="white"
               variant="outline"
               aria-label="Theme"
@@ -349,101 +266,6 @@ const isLight = computed({
               :element-id="itemInfo.id"
           />
         </div>
-<!--
-        <div v-if="item.label === 'Zeiterfassung'">
-          <Toolbar>
-            <UFormGroup
-              label="Vorlage:"
-            >
-              <USelectMenu
-                  :options="['Diese Woche', 'Dieser Monat', 'Dieses Jahr', 'Letzte Woche', 'Letzter Monat', 'Letztes Jahr']"
-                  v-model="selectedPresetRange"
-                  @change="changeRange"
-              />
-            </UFormGroup>
-            <UFormGroup label="Start:" >
-              <UPopover :popper="{ placement: 'bottom-start' }">
-                <UButton
-                    icon="i-heroicons-calendar-days-20-solid"
-                    :label="selectedStartDay ? dayjs(selectedStartDay).format('DD.MM.YYYY') : 'Datum auswählen'"
-                />
-
-                <template #panel="{ close }">
-                  <LazyDatePicker v-model="selectedStartDay" @close="changeRange" />
-                </template>
-              </UPopover>
-            </UFormGroup>
-            <UFormGroup label="Ende:">
-              <UPopover :popper="{ placement: 'bottom-start' }">
-                <UButton
-                    icon="i-heroicons-calendar-days-20-solid"
-                    :label="selectedEndDay ? dayjs(selectedEndDay).format('DD.MM.YYYY') : 'Datum auswählen'"
-                />
-
-                <template #panel="{ close }">
-                  <LazyDatePicker v-model="selectedEndDay" @close="changeRange" />
-                </template>
-              </UPopover>
-            </UFormGroup>
-          </Toolbar>
-          <div class="truncate">
-            <p>Eingreicht: {{Math.floor(workingTimeInfo.sumWorkingMinutesEingereicht/60)}}:{{String(workingTimeInfo.sumWorkingMinutesEingereicht % 60).padStart(2,"0")}} h</p>
-            <p>Bestätigt: {{Math.floor(workingTimeInfo.sumWorkingMinutesApproved/60)}}:{{String(workingTimeInfo.sumWorkingMinutesApproved % 60).padStart(2,"0")}} h</p>
-            <p>Soll Stunden: {{workingTimeInfo.monthlyWorkingHours}} h</p>
-            <p>Abwesend: </p>
-            <p>Ausgleich:</p>
-            <p>Inoffizielles Saldo: {{workingTimeInfo.saldoInOfficial}} h</p>
-            <p>Saldo: {{workingTimeInfo.saldo}} h</p>
-          </div>
-
-          <UDivider class="my-3"/>
-
-          <UTable
-            :rows="dataStore.getWorkingTimesByProfileId(itemInfo.id)"
-            class="h-80"
-            :columns="[
-                {
-                  key: 'state',
-                  label: 'Status'
-                }, {
-                  key: 'date',
-                  label: 'Datum'
-                }, {
-                  key: 'start',
-                  label: 'Start'
-                }, {
-                  key: 'end',
-                  label: 'Ende'
-                }, {
-                  key: 'duration',
-                  label: 'Dauer'
-                }, {
-                  key: 'notes',
-                  label: 'Notizen'
-                }
-            ]"
-          >
-            <template #profile-data="{row}">
-              {{dataStore.profiles.find(profile => profile.id === row.profile) ? dataStore.profiles.find(profile => profile.id === row.profile).fullName : row.profile }}
-            </template>
-            <template #date-data="{row}">
-              {{dayjs(row.date).format("DD.MM.YYYY")}}
-            </template>
-
-            <template #start-data="{row}">
-              {{dayjs(row.start, "HH:mm:ss").format("HH:mm")}} Uhr
-            </template>
-            <template #end-data="{row}">
-              {{dayjs(row.end, "HH:mm:ss").format("HH:mm")}} Uhr
-            </template>
-            <template #duration-data="{row}">
-              {{getDuration(row).composed}}
-            </template>
-          </UTable>
-
-
-        </div>
--->
         <div v-if="item.label === 'Vertragsdaten'">
           <Toolbar>
             <UButton
@@ -559,6 +381,14 @@ const isLight = computed({
             </UFormGroup>
           </InputGroup>
         </div>
+        <div v-else-if="item.label === 'Dokumente'">
+          <DocumentUpload
+              type="profile"
+              :element-id="itemInfo.id"
+          />
+
+          <DocumentList :documents="dataStore.getDocumentsByProfileId(itemInfo.id)"/>
+        </div>
       </UCard>
     </template>
   </UTabs>