diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58e1750fa87fc15ec581c52210b726ef1592b6aa..6295e9154d88d69382c25f6c220bdba7a7e01cd1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,8 @@ yet implemented.
   [#183](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/183) @onny  
 - Make player metadata, title and show name as links
   [#167](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/167) @onny  
+- Add pagination to listening and library view
+  [#195](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/195) @onny 
 
 ### Changed
 - Update npm modules
diff --git a/lib/Controller/ShowController.php b/lib/Controller/ShowController.php
index 50d35a6dddbe653391ed165ab1ef1ce520156cc9..d55271f72280f58031029fb3aaa59558cad2514b 100644
--- a/lib/Controller/ShowController.php
+++ b/lib/Controller/ShowController.php
@@ -68,9 +68,17 @@ class ShowController extends Controller {
 		$data = $this->service->findAll($this->userId);
 		$data = array_slice($data, $page * $count, $count);
 
+		if (count($data) == $count) {
+			$nextPage = $page + 1;
+		} else {
+			$nextPage = null;
+		};
+
 		$response = [
 			"meta" => [
-				"paging" => null,
+				"paging" => [
+					"next_page" => $nextPage,
+				],
 			],
 			"data" => $data,
 		];
diff --git a/src/services/EpisodeApi.js b/src/services/EpisodeApi.js
index 737b502cfb138cf5bff610ee8e8321f75382464a..99860c444765d0cea00ff143506ea856b2e99b8a 100644
--- a/src/services/EpisodeApi.js
+++ b/src/services/EpisodeApi.js
@@ -72,21 +72,6 @@ export class EpisodeApi {
 			})
 	}
 
-	loadEpisodes(episode) {
-		return axios.get(this.url('/episodes'))
-			.then(
-				(response) => {
-					return Promise.resolve(response.data)
-				},
-				(err) => {
-					return Promise.reject(err)
-				}
-			)
-			.catch((err) => {
-				return Promise.reject(err)
-			})
-	}
-
 	queryEpisodes(podcastId = null, page = 0) {
 		let params = {}
 		if (podcastId) {
diff --git a/src/services/ShowApi.js b/src/services/ShowApi.js
index 82045cce17ce18684abba31b4e1c885db3ba98df..ed520059b7d21739bc57802d001b3a3f13859df1 100644
--- a/src/services/ShowApi.js
+++ b/src/services/ShowApi.js
@@ -72,8 +72,13 @@ export class ShowApi {
 			})
 	}
 
-	loadShows(show) {
-		return axios.get(this.url('/shows'))
+	queryShow(podcastId) {
+
+		return axios.get(this.url('/shows'), {
+			params: {
+				podcast_id: podcastId,
+			},
+		})
 			.then(
 				(response) => {
 					return Promise.resolve(response.data)
@@ -85,13 +90,15 @@ export class ShowApi {
 			.catch((err) => {
 				return Promise.reject(err)
 			})
+
 	}
 
-	queryShow(podcastId) {
+	queryShows(page) {
 
 		return axios.get(this.url('/shows'), {
 			params: {
-				podcast_id: podcastId,
+				count: 20,
+				page,
 			},
 		})
 			.then(
diff --git a/src/views/Library.vue b/src/views/Library.vue
index 2ff4ed95bbb3e4ea3a8dc0cf7dec184f35c58f63..b63e0839946111d6522e00f3ee23bf37106c6086 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -25,43 +25,49 @@
 			v-resize:debounce="onResize"
 			:title="t('podcast', 'Library')"
 			:show-menu="true"
-			:podcasts="podcasts"
+			:podcasts="shows"
 			@doExport="doExport" />
+		<EmptyContent
+			v-show="page"
+			icon="icon-loading"
+			class="tableLoading" />
 	</div>
 </template>
 
 <script>
 import ItemGrid from '../components/ItemGrid'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 import { mapGetters } from 'vuex'
 import { setBrowserTitle } from '../utils/misc.js'
 import { getRequestToken } from '@nextcloud/auth'
 import resize from 'vue-resize-directive'
+import { ShowApi } from './../services/ShowApi'
+const showApiClient = new ShowApi()
 
 export default {
 	name: 'Library',
 	components: {
 		ItemGrid,
+		EmptyContent,
 	},
 	directives: {
 		resize,
 	},
 	data: () => ({
 		page: 0,
+		shows: [],
 	}),
 	computed: {
 		...mapGetters([
 			'subscribedShows',
 		]),
-		podcasts() {
-			const list = [
-				...this.subscribedShows,
-			]
-			return list
-		},
 	},
 	mounted() {
 		setBrowserTitle(t('podcast', 'Library'))
 		document.getElementById('app-content-vue').addEventListener('scroll', this.handleScroll)
+		this.shows = []
+		this.page = 0
+		this.queryPodcasts(this.page)
 	},
 	destroyed() {
 	  document.getElementById('app-content-vue').removeEventListener('scroll', this.handleScroll)
@@ -77,7 +83,7 @@ export default {
 		},
 
 		/**
-		 * On scroll event, load more episodes if bottom reached
+		 * On scroll event, load more shows if bottom reached
 		 */
 		handleScroll() {
 			const appContent = document.getElementById('app-content-vue')
@@ -96,6 +102,17 @@ export default {
 					+ encodeURIComponent(getRequestToken())
 		},
 
+		async queryPodcasts(page) {
+			const shows = await showApiClient.queryShows(page)
+			this.shows = this.shows.concat(shows.data)
+			if (shows.meta.paging.next_page === null) {
+				this.page = null
+				document.getElementById('app-content-vue').removeEventListener('scroll', this.handleScroll)
+			} else {
+				this.page += 1
+			}
+		},
+
 	},
 }
 </script>