diff --git a/Dockerfile b/Dockerfile
index 6c17441..a7e4ee2 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM nextcloud:25
+FROM nextcloud
 
 ENV NEXTCLOUD_UPDATE 1
 ENV NEXTCLOUD_ADMIN_USER repod
diff --git a/package-lock.json b/package-lock.json
index 8672a5b..2e7d750 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,9 +10,11 @@
       "license": "agpl",
       "dependencies": {
         "@nextcloud/axios": "2.3.0",
+        "@nextcloud/dialogs": "4.0.1",
         "@nextcloud/router": "2.1.2",
         "@nextcloud/vue": "7.0.1",
-        "vue": "2.7.14"
+        "vue": "2.7.14",
+        "vue-material-design-icons": "^5.2.0"
       },
       "devDependencies": {
         "@nextcloud/babel-config": "^1.0.0",
@@ -2212,12 +2214,12 @@
       }
     },
     "node_modules/@nextcloud/dialogs": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/dialogs/-/dialogs-3.2.0.tgz",
-      "integrity": "sha512-notaHF8LXPJINBbILCbRe+dgXnJPe7NQTIrN1vwfaGUSG9GUfEf+v367yyg2brCgV6ulE/HmNhYjTQwW5AqSJA==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/dialogs/-/dialogs-4.0.1.tgz",
+      "integrity": "sha512-jgIJdxTpc3suHkuZBRge6/dU6krG7x9emMGTxKY5qRQqFwn9r4rCqjV7Cys7VMn1QLlHmEDdqHcYZFRtN/XVNA==",
       "dependencies": {
         "@nextcloud/l10n": "^1.3.0",
-        "@nextcloud/typings": "^1.0.0",
+        "@nextcloud/typings": "^1.4.3",
         "core-js": "^3.6.4",
         "toastify-js": "^1.12.0"
       },
@@ -2432,6 +2434,21 @@
         "npm": "^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/@nextcloud/vue/node_modules/@nextcloud/dialogs": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/dialogs/-/dialogs-3.2.0.tgz",
+      "integrity": "sha512-notaHF8LXPJINBbILCbRe+dgXnJPe7NQTIrN1vwfaGUSG9GUfEf+v367yyg2brCgV6ulE/HmNhYjTQwW5AqSJA==",
+      "dependencies": {
+        "@nextcloud/l10n": "^1.3.0",
+        "@nextcloud/typings": "^1.0.0",
+        "core-js": "^3.6.4",
+        "toastify-js": "^1.12.0"
+      },
+      "engines": {
+        "node": "^16.0.0",
+        "npm": "^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/@nextcloud/webpack-vue-config": {
       "version": "5.5.1",
       "resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-5.5.1.tgz",
@@ -6652,21 +6669,6 @@
       "dev": true,
       "peer": true
     },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -14102,12 +14104,12 @@
       }
     },
     "@nextcloud/dialogs": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/dialogs/-/dialogs-3.2.0.tgz",
-      "integrity": "sha512-notaHF8LXPJINBbILCbRe+dgXnJPe7NQTIrN1vwfaGUSG9GUfEf+v367yyg2brCgV6ulE/HmNhYjTQwW5AqSJA==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/dialogs/-/dialogs-4.0.1.tgz",
+      "integrity": "sha512-jgIJdxTpc3suHkuZBRge6/dU6krG7x9emMGTxKY5qRQqFwn9r4rCqjV7Cys7VMn1QLlHmEDdqHcYZFRtN/XVNA==",
       "requires": {
         "@nextcloud/l10n": "^1.3.0",
-        "@nextcloud/typings": "^1.0.0",
+        "@nextcloud/typings": "^1.4.3",
         "core-js": "^3.6.4",
         "toastify-js": "^1.12.0"
       }
@@ -14251,6 +14253,19 @@
         "vue-material-design-icons": "^5.1.2",
         "vue-multiselect": "^2.1.6",
         "vue2-datepicker": "^3.11.0"
+      },
+      "dependencies": {
+        "@nextcloud/dialogs": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/@nextcloud/dialogs/-/dialogs-3.2.0.tgz",
+          "integrity": "sha512-notaHF8LXPJINBbILCbRe+dgXnJPe7NQTIrN1vwfaGUSG9GUfEf+v367yyg2brCgV6ulE/HmNhYjTQwW5AqSJA==",
+          "requires": {
+            "@nextcloud/l10n": "^1.3.0",
+            "@nextcloud/typings": "^1.0.0",
+            "core-js": "^3.6.4",
+            "toastify-js": "^1.12.0"
+          }
+        }
       }
     },
     "@nextcloud/webpack-vue-config": {
@@ -17582,14 +17597,6 @@
       "dev": true,
       "peer": true
     },
-    "fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
diff --git a/package.json b/package.json
index 1de719f..d4c4ac1 100644
--- a/package.json
+++ b/package.json
@@ -19,9 +19,11 @@
   },
   "dependencies": {
     "@nextcloud/axios": "2.3.0",
+    "@nextcloud/dialogs": "4.0.1",
     "@nextcloud/router": "2.1.2",
     "@nextcloud/vue": "7.0.1",
-    "vue": "2.7.14"
+    "vue": "2.7.14",
+    "vue-material-design-icons": "^5.2.0"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"
diff --git a/src/App.vue b/src/App.vue
index 2a730e7..0d17512 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,44 +1,97 @@
 <template>
 	<NcContent app-name="repod">
 		<NcAppNavigation>
-			<NcAppNavigationNew :text="t('repod', 'Add a podcast')"
-				@click="discover" />
-			<ul>
-				<NcAppNavigationItem v-for="podcast in podcasts"
-					:key="podcast.id"
-					:name="podcast.id"
-					:title="note.title ? note.title : t('repod', 'New note')"
-					:class="{active: currentNoteId === note.id}"
-					@click="openNote(note)" />
-			</ul>
+			<NcAppContentList>
+				<NcAppNavigationNew :text="t('repod', 'Add a podcast')">
+					<template #icon>
+						<Plus :size="20" />
+					</template>
+				</NcAppNavigationNew>
+				<ul>
+					<NcAppNavigationItem v-for="subscription in subscriptions"
+						:key="subscription.id"
+						:loading="subscription.loading"
+						:title="subscription.title ?? subscription.url">
+						<template #icon>
+							<img :src="subscription.imageUrl" alt="">
+						</template>
+					</NcAppNavigationItem>
+				</ul>
+			</NcAppContentList>
 		</NcAppNavigation>
-		<NcAppContent>
-		</NcAppContent>
+		<NcAppContent />
 	</NcContent>
 </template>
 
 <script>
-import { NcAppContent, NcContent, NcAppNavigation, NcAppNavigationItem, NcAppNavigationNew } from '@nextcloud/vue'
+import { NcAppContent, NcContent, NcAppContentList, NcAppNavigation, NcAppNavigationItem, NcAppNavigationNew } from '@nextcloud/vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import axios from '@nextcloud/axios'
+import { showError } from '@nextcloud/dialogs'
+import { generateUrl } from '@nextcloud/router'
+import '@nextcloud/dialogs/dist/index.css'
 
 export default {
 	name: 'App',
 	components: {
 		NcAppContent,
+		NcAppContentList,
 		NcAppNavigation,
 		NcAppNavigationItem,
 		NcAppNavigationNew,
-		NcContent
+		NcContent,
+		Plus,
 	},
 	data() {
 		return {
-			podcasts: [],
+			subscriptions: [],
+			loading: true,
 		}
 	},
 	computed: {
 	},
 	async mounted() {
+		try {
+			const metrics = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/metrics'))
+			for (const subscriptionId in metrics.data.subscriptions) {
+				this.addSubscription({
+					id: subscriptionId,
+					url: metrics.data.subscriptions[subscriptionId].url,
+					loading: true,
+				})
+			}
+			for (const subscription of this.subscriptions) {
+				this.updateSubscriptionMeta(subscription)
+			}
+		} catch (e) {
+			console.error(e)
+			showError(t('repod', 'Could not fetch subscriptions'))
+		}
+		this.loading = false
 	},
 	methods: {
+		addSubscription(subscription) {
+			const subscriptionId = this.subscriptions.findIndex(sub => sub.url === subscription.url)
+
+			if (subscriptionId === -1) {
+				this.subscriptions.push(subscription)
+			} else {
+				this.subscriptions[subscriptionId] = subscription
+			}
+
+			this.subscriptions.sort((a, b) => {
+				if (a.title && b.title) return a.title.localeCompare(b.title)
+				return a.id - b.id
+			})
+		},
+		async updateSubscriptionMeta(subscription) {
+			try {
+				const podcasts = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', { url: subscription.url }))
+				this.addSubscription({ ...podcasts.data.data, ...subscription, ...{ loading: false } })
+			} catch (e) {
+				console.error(e)
+			}
+		},
 	},
 }
 </script>