diff --git a/src/App.vue b/src/App.vue
index c4117368c2f5c155c8753cfb3f729f8a7b0267e2..2ab917cf37ab94f38fd065876f1a029a6c35c498 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,17 +42,8 @@ export default {
 		AppContent,
 	},
 	created() {
-		this.loadSettings()
-	},
-	methods: {
-		loadSettings() {
-
-			// axios.defaults.headers.common = {
-			// 'User-Agent': 'Nextcloud Podcast App/' + this.$version,
-			// }
-			this.$store.dispatch('getVolumeState')
-
-		},
+		this.$store.dispatch('loadShows')
+		this.$store.dispatch('getVolumeState')
 	},
 }
 </script>
diff --git a/src/components/MediaHeader.vue b/src/components/MediaHeader.vue
index 0ca06b3e0ff0f0983ca492f7e3dd8acc8ade2726..9047894c2aaf272c9b32523b6315c6c7f6ce9f04 100644
--- a/src/components/MediaHeader.vue
+++ b/src/components/MediaHeader.vue
@@ -34,7 +34,7 @@
 					v-show="isshow"
 					class="podcastControls">
 					<button class="icon-add-white podcastButton button new-button"
-						:class="issubscribed ? 'icon-delete' : 'icon-add-white primary'"
+						:class="isSubscribed ? 'icon-delete' : 'icon-add-white primary'"
 						@click="doSubscribe()">
 						{{ getSubscribeText }}
 					</button>
@@ -101,14 +101,13 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		issubscribed: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	computed: {
+		isSubscribed() {
+			return this.$store.getters.showExists(this.podcastid)
+		},
 		getSubscribeText() {
-			if (this.issubscribed) {
+			if (this.isSubscribed) {
 				return t('podcast', 'Unsubscribe')
 			} else {
 				return t('podcast', 'Subscribe')
diff --git a/src/services/ShowApi.js b/src/services/ShowApi.js
index 5c5b1a23d1227299cd2d8af3137172c3a8fe795e..070508c4718b94cfadaf77f3de249328e338bd43 100644
--- a/src/services/ShowApi.js
+++ b/src/services/ShowApi.js
@@ -56,7 +56,7 @@ export class ShowApi {
 
 	removeShow(show) {
 		axios.defaults.headers.requesttoken = requesttoken
-		return axios.delete(this.url('/shows/' + show.id))
+		return axios.delete(this.url(`/shows/${show.id}`))
 			.then(
 				(response) => {
 					return Promise.resolve(response.data)
@@ -70,7 +70,7 @@ export class ShowApi {
 			})
 	}
 
-	queryLibrary(show) {
+	loadShows(show) {
 		axios.defaults.headers.requesttoken = requesttoken
 		return axios.get(this.url('/shows'))
 			.then(
diff --git a/src/store/show.js b/src/store/show.js
index 989f125f73cc60275dc39859bade3a2465a0af65..c2f7bb4c30923a73f7447af970f719c5a1271ac2 100644
--- a/src/store/show.js
+++ b/src/store/show.js
@@ -19,3 +19,54 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
+import { ShowApi } from './../services/ShowApi'
+
+const apiClient = new ShowApi()
+
+export default {
+	state: {
+		shows: [],
+	},
+	getters: {
+		showById: state => (id) => {
+			return state.shows.find((show) => show.id === id)
+		},
+		showExists: state => (id) => {
+			return state.shows.some((show) => show.id === id)
+		},
+	},
+	mutations: {
+		addShow(state, show) {
+			state.shows.push(show)
+		},
+		removeShow(state, show) {
+			const existingIndex = state.shows.findIndex(_show => _show.id === show.id)
+			if (existingIndex !== -1) {
+				state.shows.splice(existingIndex, 1)
+			}
+		},
+		setShows(state, shows) {
+			state.shows = shows
+			console.log(state.shows)
+		},
+	},
+	actions: {
+		async loadShows({ commit }) {
+			const shows = await apiClient.loadShows()
+			commit('setShows', shows)
+		},
+		addShow({ commit }, show) {
+			apiClient.addShow(show)
+				.then((show) => {
+					commit('addShow', show)
+				})
+		},
+		removeShow({ commit }, show) {
+			apiClient.removeShow(show)
+				.then((show) => {
+					commit('removeShow', show)
+				})
+		},
+	},
+}
diff --git a/src/views/Show.vue b/src/views/Show.vue
index 1cc3f197158355f79a03fda826c3778098a00c9c..d449024fa1bf77f0f2777e8c9bb845cc053a53c5 100644
--- a/src/views/Show.vue
+++ b/src/views/Show.vue
@@ -33,7 +33,6 @@
 					:description="podcast.description"
 					:podcastid="podcast.id"
 					:isshow="true"
-					:issubscribed="issubscribed"
 					@doSubscribe="doSubscribe" />
 				<Table
 					v-resize="onResize"
@@ -54,10 +53,9 @@ import MediaHeader from '../components/MediaHeader'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 import ShowEmpty from './placeholder/Show'
 import { audioPlayer, doPlay } from '../services/player'
-import { ShowApi } from './../services/ShowApi'
+
 import { FyydApi } from './../services/FyydApi'
 const fyydClient = new FyydApi()
-const apiClient = new ShowApi()
 
 export default {
 	name: 'Show',
@@ -72,13 +70,15 @@ export default {
 		episodes: [],
 		page: 0,
 		podcastId: null,
-		issubscribed: false,
 		loading: true,
 	}),
 	computed: {
 		player() {
 			return this.$store.state.player
 		},
+		isSubscribed() {
+			return this.$store.getters.showExists(this.podcastId)
+		},
 	},
 	watch: {
 		'$route'(to, from) {
@@ -133,13 +133,11 @@ export default {
 			doPlay(episode)
 		},
 
-		async doSubscribe() {
-			if (this.issubscribed) {
-				await apiClient.removeShow(this.podcast)
-				this.issubscribed = false
+		doSubscribe() {
+			if (this.isSubscribed) {
+				this.$store.dispatch('addShow', this.podcast)
 			} else {
-				await apiClient.addShow(this.podcast)
-				this.issubscribed = true
+				this.$store.dispatch('removeShow', this.podcast)
 			}
 		},