diff --git a/nextcloud_backup/frontend/src/App.vue b/nextcloud_backup/frontend/src/App.vue
index f6838e9..b701a38 100644
--- a/nextcloud_backup/frontend/src/App.vue
+++ b/nextcloud_backup/frontend/src/App.vue
@@ -3,7 +3,13 @@
     <navbar-component></navbar-component>
     <message-bar></message-bar>
     <webdav-settings-menu></webdav-settings-menu>
-    <v-main> </v-main>
+    <v-main class="mx-12"> 
+      <v-row>
+        <v-col cols="6" offset="6">
+          <cloud-list></cloud-list>
+        </v-col>
+      </v-row>
+    </v-main>
   </v-app>
 </template>
 
@@ -11,6 +17,7 @@
 import NavbarComponent from "./components/NavbarComponent.vue";
 import MessageBar from "./components/MessageBar.vue";
 import WebdavSettingsMenu from "./components/settings/WebdavConfigMenu.vue";
+import CloudList from "./components/cloud/CloudList.vue";
 </script>
 
 <style scoped></style>
diff --git a/nextcloud_backup/frontend/src/components/cloud/CloudList.vue b/nextcloud_backup/frontend/src/components/cloud/CloudList.vue
new file mode 100644
index 0000000..973cee4
--- /dev/null
+++ b/nextcloud_backup/frontend/src/components/cloud/CloudList.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <v-card elevation="10" class="mt-10" border>
+      <v-card-title class="text-center"> Cloud </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text>
+        <v-row>
+          <v-col>
+            <v-card variant="outlined" elevation="5" color="grey-darken-2">
+              <v-card-title class="text-center text-white">Auto</v-card-title>
+              <v-divider color="grey-darken-3"></v-divider>
+              <v-card-text class="pa-0">
+                <v-list variant="tonal" class="pa-0">
+                  <v-list-item
+                    v-if="autoBackups.length == 0"
+                    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>
+                </v-list>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <v-card variant="outlined" elevation="5" color="grey-darken-2">
+              <v-card-title class="text-center text-white">Manual</v-card-title>
+              <v-divider color="grey-darken-3"></v-divider>
+              <v-card-text class="pa-0">
+                <v-list variant="tonal" class="pa-0">
+                  <v-list-item
+                    v-if="manualBackups.length == 0"
+                    class="text-center text-subtitle-2 text-disabled"
+                    >Folder is empty</v-list-item
+                  >
+                  <template
+                    v-for="(item, index) in manualBackups"
+                    :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>
+                </v-list>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { WebdavBackup } from "@/types/webdav";
+import {
+  getAutoBackupList,
+  getManualBackupList,
+} from "@/services/webdavService";
+
+const autoBackups = ref<WebdavBackup[]>([]);
+const manualBackups = ref<WebdavBackup[]>([]);
+function refreshBackup() {
+  getAutoBackupList().then((value) => {
+    autoBackups.value = value;
+  });
+  getManualBackupList().then((value) => {
+    manualBackups.value = value;
+  });
+}
+
+refreshBackup();
+</script>
diff --git a/nextcloud_backup/frontend/src/plugins/vuetify.ts b/nextcloud_backup/frontend/src/plugins/vuetify.ts
index 0661e9d..762a72b 100644
--- a/nextcloud_backup/frontend/src/plugins/vuetify.ts
+++ b/nextcloud_backup/frontend/src/plugins/vuetify.ts
@@ -8,7 +8,8 @@ import { createVuetify } from "vuetify";
 const darkTheme = {
   dark: true,
   colors: {
-    primary: "#0091ea",
+    primary: "#0091ea", //light-blue accent-4
+    accent: "#FF6F00", //amber darken-4
   },
 };
 
diff --git a/nextcloud_backup/frontend/src/services/webdavService.ts b/nextcloud_backup/frontend/src/services/webdavService.ts
new file mode 100644
index 0000000..5f07076
--- /dev/null
+++ b/nextcloud_backup/frontend/src/services/webdavService.ts
@@ -0,0 +1,10 @@
+import type { WebdavBackup } from "@/types/webdav";
+import kyClient from "./kyClient";
+
+export function getAutoBackupList() {
+  return kyClient.get("webdav/backup/auto").json<WebdavBackup[]>();
+}
+
+export function getManualBackupList() {
+  return kyClient.get("webdav/backup/manual").json<WebdavBackup[]>();
+}
diff --git a/nextcloud_backup/frontend/src/types/webdav.ts b/nextcloud_backup/frontend/src/types/webdav.ts
new file mode 100644
index 0000000..413ddea
--- /dev/null
+++ b/nextcloud_backup/frontend/src/types/webdav.ts
@@ -0,0 +1,8 @@
+import type { DateTime } from "luxon";
+
+export interface WebdavBackup {
+  id: string;
+  name: string;
+  size: number;
+  lastEdit: DateTime;
+}
\ No newline at end of file