diff --git a/src/components/AddRss.vue b/src/components/AddRss.vue
index 5b6b70b..dc568a1 100644
--- a/src/components/AddRss.vue
+++ b/src/components/AddRss.vue
@@ -1,6 +1,8 @@
 <template>
 	<ul>
-		<NcAppNavigationNewItem :title="t('Add a RSS link')">
+		<NcAppNavigationNewItem :loading="loading"
+			:title="t('Add a RSS link')"
+			@new-item="addSubscription">
 			<template #icon>
 				<Plus :size="20" />
 			</template>
@@ -11,6 +13,9 @@
 <script>
 import { NcAppNavigationNewItem } from '@nextcloud/vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
 
 export default {
 	name: 'AddRss',
@@ -18,7 +23,27 @@ export default {
 		NcAppNavigationNewItem,
 		Plus,
 	},
+	data() {
+		return {
+			loading: false,
+			feedUrl: '',
+		}
+	},
 	methods: {
+		async addSubscription(feedUrl) {
+			this.loading = true
+
+			try {
+				await axios.post(generateUrl('/apps/gpoddersync/subscription_change/create'), { add: [feedUrl], remove: [] })
+			} catch (e) {
+				console.error(e)
+				showError(t('Error while adding the feed'))
+			}
+
+			this.loading = false
+
+			this.$store.dispatch('subscriptions/fetch')
+		},
 	},
 }
 </script>
diff --git a/src/modules/subscriptions.js b/src/modules/subscriptions.js
index 3c6bceb..0fcaced 100644
--- a/src/modules/subscriptions.js
+++ b/src/modules/subscriptions.js
@@ -13,6 +13,9 @@ export const subscriptions = {
 		}),
 	},
 	mutations: {
+		reset: (state) => {
+			state.subscriptions = []
+		},
 		add: (state, subscription) => {
 			const subscriptionId = state.subscriptions.findIndex(sub => sub.url === subscription.url)
 
@@ -22,13 +25,10 @@ export const subscriptions = {
 				state.subscriptions[subscriptionId] = subscription
 			}
 		},
-		delete: (state, subscription) => {
-			const subscriptionId = state.subscriptions.findIndex(sub => sub.url === subscription.url)
-			delete state.subscriptions[subscriptionId]
-		},
 	},
 	actions: {
-		fetchAll: async (context) => {
+		fetch: async (context) => {
+			context.commit('reset')
 			const metrics = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/metrics'))
 			for (const subscriptionId in metrics.data.subscriptions) {
 				context.commit('add', {
@@ -38,15 +38,12 @@ export const subscriptions = {
 				})
 			}
 			for (const subscription of context.state.subscriptions) {
-				context.dispatch('fetchMeta', subscription)
-			}
-		},
-		fetchMeta: async (context, subscription) => {
-			try {
-				const podcasts = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', { url: subscription.url }))
-				context.commit('add', { ...podcasts.data.data, ...subscription, ...{ loading: false } })
-			} catch (e) {
-				console.error(e)
+				try {
+					const podcasts = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', { url: subscription.url }))
+					context.commit('add', { ...podcasts.data.data, ...subscription, ...{ loading: false } })
+				} catch (e) {
+					console.error(e)
+				}
 			}
 		},
 	},
diff --git a/src/views/Index.vue b/src/views/Index.vue
index c9ff5b9..08af296 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -16,7 +16,10 @@
 						:loading="subscription.loading"
 						:title="subscription.title ?? subscription.url">
 						<template #icon>
-							<img :src="subscription.imageUrl" alt="">
+							<img :src="subscription.imageUrl"
+								:alt="subscription.title"
+								width="20"
+								height="20">
 						</template>
 					</NcAppNavigationItem>
 				</ul>
@@ -63,7 +66,7 @@ export default {
 	},
 	async mounted() {
 		try {
-			await this.$store.dispatch('subscriptions/fetchAll')
+			await this.$store.dispatch('subscriptions/fetch')
 		} catch (e) {
 			console.error(e)
 			showError(t('Could not fetch subscriptions'))