diff --git a/nextcloud_backup/backend/src/services/webdavService.ts b/nextcloud_backup/backend/src/services/webdavService.ts
index a614915..2eb71c5 100644
--- a/nextcloud_backup/backend/src/services/webdavService.ts
+++ b/nextcloud_backup/backend/src/services/webdavService.ts
@@ -139,7 +139,7 @@ function parseXmlBackupData(body: string) {
         backups.push({
           id: id,
           lastEdit: lastEdit,
-          size: propstat["d:prop"]["d:getcontentlenght"],
+          size: propstat["d:prop"]["d:getcontentlength"],
           name: name,
         });
       }
diff --git a/nextcloud_backup/frontend/package.json b/nextcloud_backup/frontend/package.json
index 6cb9e13..1066fff 100644
--- a/nextcloud_backup/frontend/package.json
+++ b/nextcloud_backup/frontend/package.json
@@ -17,6 +17,7 @@
     "ky": "^0.31.4",
     "luxon": "^3.0.4",
     "pinia": "^2.0.23",
+    "pretty-bytes": "^6.0.0",
     "roboto-fontface": "*",
     "vue": "^3.2.40",
     "vuetify": "3.0.0-beta.15",
diff --git a/nextcloud_backup/frontend/pnpm-lock.yaml b/nextcloud_backup/frontend/pnpm-lock.yaml
index 6e0f7ce..4cf5d0e 100644
--- a/nextcloud_backup/frontend/pnpm-lock.yaml
+++ b/nextcloud_backup/frontend/pnpm-lock.yaml
@@ -18,6 +18,7 @@ specifiers:
   npm-run-all: ^4.1.5
   pinia: ^2.0.23
   prettier: ^2.7.1
+  pretty-bytes: ^6.0.0
   roboto-fontface: '*'
   typescript: ~4.7.4
   vite: ^3.1.7
@@ -34,6 +35,7 @@ dependencies:
   ky: 0.31.4
   luxon: 3.0.4
   pinia: 2.0.23_rg374xhldfcyvjtaj3qktyfz5y
+  pretty-bytes: 6.0.0
   roboto-fontface: 0.10.0
   vue: 3.2.40
   vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
@@ -1841,6 +1843,11 @@ packages:
     hasBin: true
     dev: true
 
+  /pretty-bytes/6.0.0:
+    resolution: {integrity: sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+    dev: false
+
   /punycode/2.1.1:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
     engines: {node: '>=6'}
diff --git a/nextcloud_backup/frontend/src/components/MessageBar.vue b/nextcloud_backup/frontend/src/components/MessageBar.vue
index 147499a..61d877c 100644
--- a/nextcloud_backup/frontend/src/components/MessageBar.vue
+++ b/nextcloud_backup/frontend/src/components/MessageBar.vue
@@ -31,18 +31,23 @@
                   @click="show[index] = show[index] ? false : true"
                   size="small"
                 >
-                  <v-icon>mdi-information</v-icon>
-                </v-btn>
-                <v-btn
-                  color="success"
-                  variant="text"
-                  @click="markReaded(item.id)"
-                  icon
-                  v-if="!item.viewed"
-                  size="small"
-                >
-                  <v-icon>mdi-check</v-icon>
+                  <v-icon>
+                    {{ show[index] ? "mdi-chevron-up" : "mdi-information" }}
+                  </v-icon>
                 </v-btn>
+                <v-scroll-x-transition>
+                  <v-btn
+                    color="success"
+                    variant="text"
+                    @click="markReaded(item.id)"
+                    icon
+                    v-show="!item.viewed"
+                    size="small"
+                  >
+                    <v-icon>mdi-check</v-icon>
+                  </v-btn>
+                </v-scroll-x-transition>
+
                 <div class="text-caption text-disabled ml-1">
                   {{ getTimeDelta(item.time) }}
                 </div>
diff --git a/nextcloud_backup/frontend/src/components/cloud/CloudList.vue b/nextcloud_backup/frontend/src/components/cloud/CloudList.vue
index 973cee4..db5d57c 100644
--- a/nextcloud_backup/frontend/src/components/cloud/CloudList.vue
+++ b/nextcloud_backup/frontend/src/components/cloud/CloudList.vue
@@ -16,23 +16,13 @@
                     class="text-center text-subtitle-2 text-disabled"
                     >Folder is empty</v-list-item
                   >
-                  <template v-for="(item, index) in autoBackups" :key="item.id">
-                    <v-divider
-                      v-if="index != 0"
-                      color="grey-darken-3"
-                    ></v-divider>
-                    <v-list-item>
-                      <v-list-item-title>{{ item.name }}</v-list-item-title>
-                      <template v-slot:append>
-                        <v-btn variant="text" icon color="secondary">
-                          <v-icon>mdi-information</v-icon>
-                        </v-btn>
-                        <v-btn variant="text" icon color="red">
-                          <v-icon>mdi-trash-can</v-icon>
-                        </v-btn>
-                      </template>
-                    </v-list-item>
-                  </template>
+                  <cloud-list-item
+                    v-for="(item, index) in autoBackups"
+                    :key="item.id"
+                    :item="item"
+                    :index="index"
+                  >
+                  </cloud-list-item>
                 </v-list>
               </v-card-text>
             </v-card>
@@ -50,26 +40,13 @@
                     class="text-center text-subtitle-2 text-disabled"
                     >Folder is empty</v-list-item
                   >
-                  <template
+                  <cloud-list-item
                     v-for="(item, index) in manualBackups"
                     :key="item.id"
+                    :item="item"
+                    :index="index"
                   >
-                    <v-divider
-                      v-if="index != 0"
-                      color="grey-darken-3"
-                    ></v-divider>
-                    <v-list-item>
-                      <v-list-item-title>{{ item.name }}</v-list-item-title>
-                      <template v-slot:append>
-                        <v-btn variant="text" icon color="secondary">
-                          <v-icon>mdi-information</v-icon>
-                        </v-btn>
-                        <v-btn variant="text" icon color="red">
-                          <v-icon>mdi-trash-can</v-icon>
-                        </v-btn>
-                      </template>
-                    </v-list-item>
-                  </template>
+                  </cloud-list-item>
                 </v-list>
               </v-card-text>
             </v-card>
@@ -88,6 +65,9 @@ import {
   getManualBackupList,
 } from "@/services/webdavService";
 
+import CloudListItem from "./CloudListItem.vue";
+
+const popup = ref(false);
 const autoBackups = ref<WebdavBackup[]>([]);
 const manualBackups = ref<WebdavBackup[]>([]);
 function refreshBackup() {
@@ -98,6 +78,5 @@ function refreshBackup() {
     manualBackups.value = value;
   });
 }
-
 refreshBackup();
 </script>
diff --git a/nextcloud_backup/frontend/src/components/cloud/CloudListItem.vue b/nextcloud_backup/frontend/src/components/cloud/CloudListItem.vue
new file mode 100644
index 0000000..4dfa6a3
--- /dev/null
+++ b/nextcloud_backup/frontend/src/components/cloud/CloudListItem.vue
@@ -0,0 +1,73 @@
+<template>
+  <v-divider v-if="index != 0" color="grey-darken-3"></v-divider>
+  <v-list-item>
+    <v-list-item-title class="text-deep-orange-darken-3">{{
+      item.name
+    }}</v-list-item-title>
+    <template v-slot:append>
+      <v-scroll-x-transition>
+        <v-chip
+          color="primary"
+          variant="flat"
+          size="small"
+          class="mr-2"
+          v-show="!detail"
+        >
+          {{
+            DateTime.fromISO(item.lastEdit).toLocaleString(
+              DateTime.DATETIME_SHORT
+            )
+          }}
+        </v-chip>
+      </v-scroll-x-transition>
+
+      <v-btn variant="text" icon color="secondary" @click="detail = !detail">
+        <v-icon>{{ detail ? "mdi-chevron-up" : "mdi-information" }}</v-icon>
+      </v-btn>
+    </template>
+  </v-list-item>
+  <v-expand-transition>
+    <v-card v-show="detail" variant="tonal" color="secondary" rounded="0">
+      <v-card-text class="d-flex justify-center">
+        <v-chip color="primary" variant="flat" class="mr-2" label>
+          <v-icon start icon="mdi-pencil"></v-icon>
+          {{
+            DateTime.fromISO(item.lastEdit).toLocaleString(
+              DateTime.DATETIME_SHORT
+            )
+          }}
+        </v-chip>
+        <v-chip color="success" variant="flat" label>
+          <v-icon start icon="mdi-database"></v-icon>
+          {{ prettyBytes(item.size) }}
+        </v-chip>
+      </v-card-text>
+      <v-divider class="mx-4"></v-divider>
+      <v-card-actions class="justify-center">
+        <v-tooltip text="Upload to Home Assitant" location="bottom">
+          <template v-slot:activator="{ props }">
+            <v-btn variant="outlined" color="success" v-bind="props">
+              <v-icon>mdi-upload</v-icon>
+            </v-btn>
+          </template>
+        </v-tooltip>
+        <v-btn variant="outlined" color="red">
+          <v-icon>mdi-trash-can</v-icon>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-expand-transition>
+</template>
+
+<script setup lang="ts">
+import type { WebdavBackup } from "@/types/webdav";
+import prettyBytes from "pretty-bytes";
+import { DateTime } from "luxon";
+import { ref } from "vue";
+
+const detail = ref(false);
+defineProps<{
+  item: WebdavBackup;
+  index: number;
+}>();
+</script>
diff --git a/nextcloud_backup/frontend/src/types/webdav.ts b/nextcloud_backup/frontend/src/types/webdav.ts
index 413ddea..a361bb0 100644
--- a/nextcloud_backup/frontend/src/types/webdav.ts
+++ b/nextcloud_backup/frontend/src/types/webdav.ts
@@ -4,5 +4,5 @@ export interface WebdavBackup {
   id: string;
   name: string;
   size: number;
-  lastEdit: DateTime;
+  lastEdit: string;
 }
\ No newline at end of file