diff --git a/components/About.vue b/components/About.vue
new file mode 100644
index 0000000..e9ddb79
--- /dev/null
+++ b/components/About.vue
@@ -0,0 +1,22 @@
+<template>
+        <ClientOnly>
+            <Card style="margin-top: 78px; min-height: 200px;"> 
+                <template #content>
+                    <Panel header="About this software" class="rounded-4 bg-white">
+                        <span style="font-size:xx-large;">Wardrobe Master</span>
+                        <p>Version: 0.1.0</p>
+                    </Panel>
+                </template>
+            </Card>
+        </ClientOnly>
+        
+    
+    
+    
+  </template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+
+</script>
\ No newline at end of file
diff --git a/components/Bought.vue b/components/Bought.vue
new file mode 100644
index 0000000..dafb3cf
--- /dev/null
+++ b/components/Bought.vue
@@ -0,0 +1,44 @@
+<template>
+    <ClientOnly>
+        <Card style="margin-top: 78px; min-height: 200px;"> 
+            <template #content>
+                <Panel header="Bought, but not evaluated clothes" class="rounded-4 bg-white" >
+                    <DataView :value="itemsb" paginator :rows="5">
+                        <template #list="slotProps">
+                            <div class="col-12">
+                                <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                                    <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`/photos/16266842344a52797c13c72c9c769e2c6b52e827b0.webp`" :alt="slotProps.data.bezeichnung" />
+                                    <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                                        <div class="flex flex-column align-items-center sm:align-items-start gap-3">
+                                            <div class="text-2xl font-bold text-900">{{ slotProps.data.bezeichnung }}</div>
+                                            <div class="flex align-items-center gap-3">
+                                                <span class="flex align-items-center gap-2">
+                                                    <i class="pi pi-tag"></i>
+                                                    <span class="font-semibold">{{ slotProps.data.typid }}</span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                        
+                                    </div>
+                                </div>
+
+                            </div>
+                        </template>
+                    </DataView>
+                </Panel>
+            </template>
+        </Card>
+    </ClientOnly>
+    
+
+
+
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+//const itemsb = ref();
+const {data: itemsb } = await useFetch('http://ubodroid-2:8081/api/v1/itb');
+
+</script>
\ No newline at end of file
diff --git a/components/Typ.vue b/components/Typ.vue
index b9232b8..1998411 100644
--- a/components/Typ.vue
+++ b/components/Typ.vue
@@ -1,83 +1,87 @@
 <template>
     <ClientOnly>
-      <Panel header="Maintainance / Type" class="bg-white rounded-4" style="margin-top: 78px;">
-      
-        
-          <div tag="form" class="g-3 mb-20 needs-validation" novalidate @submit.prevent="checkForm">
-            <div class="grid nested-grid">
-              <div class="col-4">
-                <p>Image Galery</p>
-              </div>
-              <div class="col-8">
-                  <div class="grid">
-                    <div class="col-12 gap-2">
-                      <label for="bezeichnung">Description *</label>
-                      <InputText class="col-12"
-                                              v-model="bezeichnung"
-                                              invalidFeedback="Please provide a description of the clothing-type"
-                                              validFeedback="Looks good!"
-                                              required
-                                          />
-                      <small id="bezeichnung-help">Enter a description for the clothing</small>
-                      <InputText type="hidden" v-model="id" />
-                    </div>
+      <Card style="margin-top: 78px; min-height: 200px;"> 
+            <template #content>
+                <Panel header="Maintainance / Type" class="bg-white rounded-4">
+                
                   
-                    <div class="col-12 gap-3 flex" style="margin-bottom:40px;">
-                      
-                        <Button severity="primary" label=" NEW " icon="pi pi-check" @click="openNew" />
-                        <Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="onUpdate()" />
-                        <Button severity="danger" label=" DELETE " icon="pi pi-trash" @click="onDelete()" />
-                        <Button type="reset" severity="warning" label=" RESET " icon="pi pi-undo" />                      
-                    </div> 
-                  </div>
-              </div>
-          </div>
-          </div>
-              <!--<MDBContainer class="bg-white rounded-4"> -->
-                <div class="grid" style="margin-bottom:40px;">
-                  <div class="col-12">
-                     <DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="typen" 
-                          showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]" 
-                          :globalFilterFields="['bezeichnung']"  
-                          v-model:selection="selectedTyp" selection-mode="single" @row-select="onRowSelect" :meta-key-selection="false"
-                          tableStyle="min-width: 50rem;">
-                          <template #header>
-                            <div class="flex justify-content-end">
-                                <span class="p-input-icon-left">
-                                    <i class="pi pi-search" />
-                                    <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                                </span>
+                    <div tag="form" class="g-3 mb-20 needs-validation" novalidate @submit.prevent="checkForm">
+                      <div class="grid nested-grid">
+                        <div class="col-4">
+                          <p>Image Galery</p>
+                        </div>
+                        <div class="col-8">
+                            <div class="grid">
+                              <div class="col-12 gap-2">
+                                <label for="bezeichnung">Description *</label>
+                                <InputText class="col-12"
+                                                        v-model="bezeichnung"
+                                                        invalidFeedback="Please provide a description of the clothing-type"
+                                                        validFeedback="Looks good!"
+                                                        required
+                                                    />
+                                <small id="bezeichnung-help">Enter a description for the clothing</small>
+                                <InputText type="hidden" v-model="id" />
+                              </div>
+                            
+                              <div class="col-12 gap-3 flex" style="margin-bottom:40px;">
+                                
+                                  <Button severity="primary" label=" NEW " icon="pi pi-check" @click="openNew" />
+                                  <Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="onUpdate()" />
+                                  <Button severity="danger" label=" DELETE " icon="pi pi-trash" @click="onDelete()" />
+                                  <Button type="reset" severity="warning" label=" RESET " icon="pi pi-undo" />                      
+                              </div> 
                             </div>
-                          </template>
-                          <template #empty> No customers found. </template>
-                          <!--<template #loading> Loading customers data. Please wait. </template> -->
-                        <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" sortable :filter-field="col.field" >
-                          
-                        </Column>
-                          
-                    </DataTable>
-                  
-                  </div>
-                </div> 
-            <!--</MDBContainer>-->
+                        </div>
+                    </div>
+                    </div>
+                        <!--<MDBContainer class="bg-white rounded-4"> -->
+                          <div class="grid" style="margin-bottom:40px;">
+                            <div class="col-12">
+                              <DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="typen" 
+                                    showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]" 
+                                    :globalFilterFields="['bezeichnung']"  
+                                    v-model:selection="selectedTyp" selection-mode="single" @row-select="onRowSelect" :meta-key-selection="false"
+                                    tableStyle="min-width: 50rem;">
+                                    <template #header>
+                                      <div class="flex justify-content-end">
+                                          <span class="p-input-icon-left">
+                                              <i class="pi pi-search" />
+                                              <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                                          </span>
+                                      </div>
+                                    </template>
+                                    <template #empty> No customers found. </template>
+                                    <!--<template #loading> Loading customers data. Please wait. </template> -->
+                                  <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" sortable :filter-field="col.field" >
+                                    
+                                  </Column>
+                                    
+                              </DataTable>
+                            
+                            </div>
+                          </div> 
+                      <!--</MDBContainer>-->
 
-          
-          <template #fallback>
-            <!-- this will be rendered on server side -->
-            <p>Loading comments...</p>
-          </template>
-          <Dialog :visible="createTypDialog" :style="{width: '450px'}" header="New Clothing Type" :modal="true" class="p-fluid">
-            <div class="field">
-                <label for="bezeichnung">Description</label>
-                <InputText id="bezeichnung" v-model.trim="typ.bezeichnung" required="true" autofocus />
-                <small id="bezeichnung-help" >Enter a description for the clothing</small>
-            </div>
-            <template #footer>
-                <Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
-                <Button label="Save" icon="pi pi-check" text @click="onSubmit(typ)" />
+                    
+                    <template #fallback>
+                      <!-- this will be rendered on server side -->
+                      <p>Loading comments...</p>
+                    </template>
+                    <Dialog :visible="createTypDialog" :style="{width: '450px'}" header="New Clothing Type" :modal="true" class="p-fluid">
+                      <div class="field">
+                          <label for="bezeichnung">Description</label>
+                          <InputText id="bezeichnung" v-model.trim="typ.bezeichnung" required="true" autofocus />
+                          <small id="bezeichnung-help" >Enter a description for the clothing</small>
+                      </div>
+                      <template #footer>
+                          <Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
+                          <Button label="Save" icon="pi pi-check" text @click="onSubmit(typ)" />
+                      </template>
+                    </Dialog>
+                </Panel>
             </template>
-          </Dialog>
-      </Panel>
+        </Card>
       </ClientOnly>
       
   </template>
diff --git a/pages/about.vue b/pages/about.vue
new file mode 100644
index 0000000..b17f79f
--- /dev/null
+++ b/pages/about.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+      <About />
+    </div>
+  </template>
\ No newline at end of file
diff --git a/pages/bought.vue b/pages/bought.vue
new file mode 100644
index 0000000..308d34e
--- /dev/null
+++ b/pages/bought.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+      <Bought />
+    </div>
+  </template>
\ No newline at end of file
diff --git a/photos/16266842344a52797c13c72c9c769e2c6b52e827b0.webp b/photos/16266842344a52797c13c72c9c769e2c6b52e827b0.webp
new file mode 100644
index 0000000..2c86a1b
Binary files /dev/null and b/photos/16266842344a52797c13c72c9c769e2c6b52e827b0.webp differ
diff --git a/photos/16266842344a52797c13c72c9c769e2c6b52e827b0_thumbnail_600x.webp b/photos/16266842344a52797c13c72c9c769e2c6b52e827b0_thumbnail_600x.webp
new file mode 100644
index 0000000..884b3ac
Binary files /dev/null and b/photos/16266842344a52797c13c72c9c769e2c6b52e827b0_thumbnail_600x.webp differ
diff --git a/plugins/primevue.js b/plugins/primevue.js
index 501f198..a1a4d62 100644
--- a/plugins/primevue.js
+++ b/plugins/primevue.js
@@ -12,7 +12,7 @@ import InputText from 'primevue/inputtext';
 import ToastService from 'primevue/toastservice';
 import Toast from 'primevue/toast';
 import Dialog from 'primevue/dialog';
-
+import DataView from "primevue/dataview";
 
 export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.use(PrimeVue, { ripple: true });
@@ -28,4 +28,5 @@ export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.use(ToastService);
     nuxtApp.vueApp.component("Toast", Toast);   
     nuxtApp.vueApp.component("Dialog", Dialog); 
+    nuxtApp.vueApp.component("DataView", DataView); 
 });    
\ No newline at end of file