diff --git a/src/App.vue b/src/App.vue
index 38704d5..4437b0a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,3 @@
 <template>
 	<router-view />
 </template>
-
-<style  lang="scss">
-:root {
-	--icon-play: url('./assets/play.png');
-}
-</style>
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 443f026..1c65b46 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -1,6 +1,6 @@
 <template>
 	<Content app-name="radio">
-		<Navigation @changeVolume="changeVolume" />
+		<Navigation />
 		<AppContent>
 			<Breadcrumbs class="breadcrumbs">
 				<Breadcrumb title="Home" href="/" />
@@ -60,6 +60,11 @@ export default {
 	},
 	watch: {
 		$route: 'onRoute',
+		'player.volume'(newVolume, oldVolume) {
+			if (audioPlayer !== null) {
+				audioPlayer.volume(newVolume)
+			}
+		},
 	},
 	mounted() {
 		this.loadStations()
@@ -164,7 +169,6 @@ export default {
 					'User-Agent': 'Nextcloud Radio/1.0.0', // FIXME global version, doesnt seem to work
 				})
 				.done(function(data) {
-					vm.pageLoading = false
 					for (let i = 0; i < data.length; i++) {
 						const obj = data[i]
 						let blurHash = vm.blurHashes[obj.stationuuid]
@@ -173,9 +177,9 @@ export default {
 						}
 						data[i].blurHash = blurHash
 					}
-					console.log(data)
 					vm.tableData = vm.tableData.concat(data)
 					vm.offset += 20
+					vm.pageLoading = false
 				})
 		},
 		/**
@@ -188,11 +192,6 @@ export default {
 		    }
 			}
 		},
-		changeVolume(volume) {
-			if (audioPlayer !== null) {
-				audioPlayer.volume(volume)
-			}
-		},
 	},
 }
 </script>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index da60ffa..ec36e68 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -20,8 +20,7 @@
 		</template>
 		<template #footer>
 			<Player
-				:pinned="true"
-				@changeVolume="changeVolume" />
+				:pinned="true" />
 		</template>
 	</AppNavigation>
 </template>
@@ -38,11 +37,6 @@ export default {
 		AppNavigationItem,
 		Player,
 	},
-	methods: {
-		changeVolume(volume) {
-			this.$emit('changeVolume', volume)
-		},
-	},
 }
 
 </script>
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 989ec1b..b8789e4 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -16,7 +16,7 @@
 			max="1"
 			step=".05"
 			:value="player.volume"
-			@input="changeVolume">
+			@input="changeVolume($event)">
 		<span class="stationMetadata" />
 		{{ player.volume }}
 	</div>
@@ -24,9 +24,6 @@
 
 <script>
 export default {
-	data: () => ({
-		sliderVal: 0,
-	}),
 	computed: {
 		player() {
 			return this.$store.state.player
@@ -34,7 +31,7 @@ export default {
 	},
 	methods: {
 		changeVolume() {
-			this.$emit('changeVolume', this.sliderVal)
+			this.$store.dispatch('changeVolume', event.target.value)
 		},
 	},
 }
diff --git a/src/store.js b/src/store.js
index a100976..c6b729f 100644
--- a/src/store.js
+++ b/src/store.js
@@ -17,6 +17,9 @@ export default new Vuex.Store({
 		isBuffering(state, bufferingState) {
 			state.player.isBuffering = bufferingState
 		},
+		changeVolume(state, volume) {
+			state.player.volume = volume
+		},
 	},
 	actions: {
 		isPlaying(context, playerState) {
@@ -25,5 +28,8 @@ export default new Vuex.Store({
 		isBuffering(context, bufferingState) {
 			context.commit('isBuffering', bufferingState)
 		},
+		changeVolume(context, volume) {
+			context.commit('changeVolume', volume)
+		},
 	},
 })