diff --git a/materialious/package-lock.json b/materialious/package-lock.json
index 31711515..8e58d9f7 100644
--- a/materialious/package-lock.json
+++ b/materialious/package-lock.json
@@ -12,7 +12,7 @@
 				"human-number": "^2.0.4",
 				"media-icons": "^0.10.0",
 				"sponsorblock-api": "^0.2.4",
-				"svelte-infinite-scroll": "^2.0.1",
+				"svelte-infinite-loading": "^1.3.8",
 				"svelte-persisted-store": "^0.9.1",
 				"vidstack": "^1.11.4"
 			},
@@ -7143,10 +7143,10 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
-		"node_modules/svelte-infinite-scroll": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/svelte-infinite-scroll/-/svelte-infinite-scroll-2.0.1.tgz",
-			"integrity": "sha512-goTHCfOHRDCs8C5MeSuIc6LlAQ8zVQ+M4Y3LyvrDjx5rqSSxSrdCuQwIyWYNcO6j6/mnqRro3QB64ClBzfn+Wg=="
+		"node_modules/svelte-infinite-loading": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/svelte-infinite-loading/-/svelte-infinite-loading-1.3.8.tgz",
+			"integrity": "sha512-hn4o848LKd2Q+M11hiMWnfFxM1GHKVDi92HPZ1FYvfed4bEeRZL+QvFAQzhy1SACq6Si0CAJcQFUZpIYmAEnpQ=="
 		},
 		"node_modules/svelte-persisted-store": {
 			"version": "0.9.1",
diff --git a/materialious/package.json b/materialious/package.json
index 915ee5bb..bc11d80b 100644
--- a/materialious/package.json
+++ b/materialious/package.json
@@ -39,7 +39,7 @@
 		"human-number": "^2.0.4",
 		"media-icons": "^0.10.0",
 		"sponsorblock-api": "^0.2.4",
-		"svelte-infinite-scroll": "^2.0.1",
+		"svelte-infinite-loading": "^1.3.8",
 		"svelte-persisted-store": "^0.9.1",
 		"vidstack": "^1.11.4"
 	}
diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte
index a066b9f7..6c17fe38 100644
--- a/materialious/src/routes/+layout.svelte
+++ b/materialious/src/routes/+layout.svelte
@@ -535,7 +535,7 @@
 	{/each}
 </dialog>
 
-<main class="responsive max">
+<main class="responsive max root">
 	<slot />
 </main>
 
diff --git a/materialious/src/routes/+page.svelte b/materialious/src/routes/+page.svelte
index 7869de7e..3946b935 100644
--- a/materialious/src/routes/+page.svelte
+++ b/materialious/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import VideoList from '$lib/VideoList.svelte';
-	import { activePage } from '../store.js';
+	import { activePage } from '../store';
 
 	export let data;
 
diff --git a/materialious/src/routes/channel/[slug]/+page.svelte b/materialious/src/routes/channel/[slug]/+page.svelte
index 3096b2f3..82a482f0 100644
--- a/materialious/src/routes/channel/[slug]/+page.svelte
+++ b/materialious/src/routes/channel/[slug]/+page.svelte
@@ -5,7 +5,8 @@
 	import PlaylistThumbnail from '$lib/PlaylistThumbnail.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
 	import { cleanNumber } from '$lib/misc';
-	import { onDestroy, onMount } from 'svelte';
+	import { onMount } from 'svelte';
+	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
 	import { get } from 'svelte/store';
 	import { activePage, auth } from '../../../store';
 
@@ -19,22 +20,29 @@
 
 	let displayContent: ChannelContentPlaylists | ChannelContentVideos | undefined = undefined;
 
-	async function handleScroll() {
+	async function loadMore(event: InfiniteEvent) {
 		if (typeof displayContent === 'undefined') return;
 
-		const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
-		if (scrollTop + clientHeight >= scrollHeight - 5) {
-			const newContent = await getChannelContent(data.channel.authorId, {
-				type: tab,
-				continuation: displayContent.continuation
-			});
-			if ('videos' in newContent && 'videos' in displayContent) {
-				displayContent.videos = [...displayContent.videos, ...newContent.videos];
-			} else if ('playlists' in displayContent && 'playlists' in newContent) {
-				displayContent.playlists = [...displayContent.playlists, ...newContent.playlists];
+		const newContent = await getChannelContent(data.channel.authorId, {
+			type: tab,
+			continuation: displayContent.continuation
+		});
+		if ('videos' in newContent && 'videos' in displayContent) {
+			if (displayContent.continuation === newContent.continuation) {
+				event.detail.complete();
+			} else {
+				event.detail.loaded();
 			}
-			displayContent.continuation = newContent.continuation;
+			displayContent.videos = [...displayContent.videos, ...newContent.videos];
+		} else if ('playlists' in displayContent && 'playlists' in newContent) {
+			if (displayContent.continuation === newContent.continuation) {
+				event.detail.complete();
+			} else {
+				event.detail.loaded();
+			}
+			displayContent.playlists = [...displayContent.playlists, ...newContent.playlists];
 		}
+		displayContent.continuation = newContent.continuation;
 	}
 
 	async function changeTab(newTab: 'videos' | 'playlists' | 'streams' | 'shorts') {
@@ -49,12 +57,6 @@
 		if (get(auth)) {
 			isSubscribed = await amSubscribed(data.channel.authorId);
 		}
-
-		window.addEventListener('scroll', handleScroll);
-	});
-
-	onDestroy(() => {
-		window.removeEventListener('scroll', handleScroll);
 	});
 
 	async function toggleSubscribed() {
@@ -144,6 +146,8 @@
 			{/if}
 		</div>
 	</div>
+
+	<InfiniteLoading on:infinite={loadMore} />
 {:else}
 	<PageLoading />
 {/if}
diff --git a/materialious/src/routes/history/+page.svelte b/materialious/src/routes/history/+page.svelte
index ba4328cf..03fba9d4 100644
--- a/materialious/src/routes/history/+page.svelte
+++ b/materialious/src/routes/history/+page.svelte
@@ -3,7 +3,8 @@
 	import type { VideoPlay } from '$lib/Api/model';
 	import VideoList from '$lib/VideoList.svelte';
 	import { error } from '@sveltejs/kit';
-	import { onDestroy, onMount } from 'svelte';
+	import { onMount } from 'svelte';
+	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
 	import { activePage } from '../../store';
 
 	activePage.set('history');
@@ -28,23 +29,21 @@
 		}
 	}
 
-	async function handleScroll() {
-		const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
-		if (scrollTop + clientHeight >= scrollHeight - 5) {
-			currentPage += 1;
-			await loadPageHistory();
+	async function loadMore(event: InfiniteEvent) {
+		const pastHistoryLen = Number(history.length);
+
+		await loadPageHistory();
+
+		if (pastHistoryLen === history.length) {
+			event.detail.complete();
+		} else {
+			event.detail.loaded();
 		}
 	}
 
 	onMount(async () => {
 		await loadPageHistory();
 		loaded = true;
-
-		window.addEventListener('scroll', handleScroll);
-	});
-
-	onDestroy(() => {
-		window.removeEventListener('scroll', handleScroll);
 	});
 </script>
 
@@ -66,3 +65,5 @@
 </div>
 
 <VideoList videos={history} />
+
+<InfiniteLoading on:infinite={loadMore} />
diff --git a/materialious/src/routes/playlist/[slug]/+page.svelte b/materialious/src/routes/playlist/[slug]/+page.svelte
index caec99a7..3c76517f 100644
--- a/materialious/src/routes/playlist/[slug]/+page.svelte
+++ b/materialious/src/routes/playlist/[slug]/+page.svelte
@@ -4,7 +4,7 @@
 	import VideoList from '$lib/VideoList.svelte';
 	import { cleanNumber } from '$lib/misc.js';
 	import { onMount } from 'svelte';
-	import { activePage } from '../../../store.js';
+	import { activePage } from '../../../store';
 
 	export let data;
 
diff --git a/materialious/src/routes/search/[slug]/+page.svelte b/materialious/src/routes/search/[slug]/+page.svelte
index 425a7d7d..ed4ed92f 100644
--- a/materialious/src/routes/search/[slug]/+page.svelte
+++ b/materialious/src/routes/search/[slug]/+page.svelte
@@ -4,7 +4,7 @@
 	import ChannelThumbnail from '$lib/ChannelThumbnail.svelte';
 	import PlaylistThumbnail from '$lib/PlaylistThumbnail.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
-	import { onDestroy, onMount } from 'svelte';
+	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
 	import { activePage } from '../../../store';
 
 	export let data;
@@ -20,24 +20,20 @@
 		document.location.href = $page.url.href;
 	}
 
-	async function handleScroll() {
-		const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
-		if (scrollTop + clientHeight >= scrollHeight - 5) {
-			currentPage += 1;
-			search = [
-				...search,
-				...(await getSearch(data.slug, { page: currentPage.toString(), type: data.searchType }))
-			];
+	async function loadMore(event: InfiniteEvent) {
+		currentPage++;
+		const newSearch = await getSearch(data.slug, {
+			page: currentPage.toString(),
+			type: data.searchType
+		});
+
+		if (newSearch.length === 0) {
+			event.detail.complete();
+		} else {
+			search = [...search, ...newSearch];
+			event.detail.loaded();
 		}
 	}
-
-	onMount(() => {
-		window.addEventListener('scroll', handleScroll);
-	});
-
-	onDestroy(() => {
-		window.removeEventListener('scroll', handleScroll);
-	});
 </script>
 
 <div class="space" style="margin-bottom: 1em;">
@@ -91,3 +87,5 @@
 		{/each}
 	</div>
 </div>
+
+<InfiniteLoading on:infinite={loadMore} />
diff --git a/materialious/src/routes/subscriptions/+page.svelte b/materialious/src/routes/subscriptions/+page.svelte
index d93855a2..81020910 100644
--- a/materialious/src/routes/subscriptions/+page.svelte
+++ b/materialious/src/routes/subscriptions/+page.svelte
@@ -1,32 +1,28 @@
 <script lang="ts">
 	import { getFeed } from '$lib/Api/index.js';
 	import VideoList from '$lib/VideoList.svelte';
-	import { onDestroy, onMount } from 'svelte';
-	import { activePage } from '../../store.js';
+	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
+	import { activePage } from '../../store';
 
 	export let data;
 
 	let currentPage = 1;
-	let videos = [...data.feed.videos, ...data.feed.notifications];
+	$: videos = [...data.feed.videos, ...data.feed.notifications];
 
 	activePage.set('subscriptions');
 
-	async function handleScroll() {
-		const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
-		if (scrollTop + clientHeight >= scrollHeight - 5) {
-			currentPage += 1;
-			const feed = await getFeed(100, currentPage);
+	async function loadMore(event: InfiniteEvent) {
+		currentPage++;
+		const feed = await getFeed(100, currentPage);
+		if (feed.notifications.length === 0) {
+			event.detail.complete();
+		} else {
 			videos = [...videos, ...feed.notifications];
+			event.detail.loaded();
 		}
 	}
-
-	onMount(() => {
-		window.addEventListener('scroll', handleScroll);
-	});
-
-	onDestroy(() => {
-		window.removeEventListener('scroll', handleScroll);
-	});
 </script>
 
 <VideoList bind:videos />
+
+<InfiniteLoading on:infinite={loadMore} />
diff --git a/materialious/src/routes/trending/+page.svelte b/materialious/src/routes/trending/+page.svelte
index 6bc28178..ca6f269b 100644
--- a/materialious/src/routes/trending/+page.svelte
+++ b/materialious/src/routes/trending/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import VideoList from '$lib/VideoList.svelte';
-	import { activePage } from '../../store.js';
+	import { activePage } from '../../store';
 
 	export let data;
 
diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 3fe73cd4..05e4b875 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -15,7 +15,7 @@
 	import { cleanNumber, numberWithCommas } from '$lib/misc.js';
 	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
-	import { activePage, auth, playerListenByDefault } from '../../../store.js';
+	import { activePage, auth, playerListenByDefault } from '../../../store';
 
 	export let data;
 
diff --git a/materialious/static/style.css b/materialious/static/style.css
index e6797db0..51fd4b99 100644
--- a/materialious/static/style.css
+++ b/materialious/static/style.css
@@ -7,4 +7,9 @@
         padding-left: .1em !important;
         padding-right: .1em !important;
     }
+}
+
+main.root {
+    max-height: 100vh;
+    overflow-y: scroll;
 }
\ No newline at end of file