diff --git a/README.md b/README.md
index 9eb94853..8b6e47af 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ Modern material design for Invidious
 - Integrates with Invidious subscriptions, watch history & more.
 - Live stream support.
 - Dash support (WIP).
-- PWA support.
+- Chapters.
 
 ## Todo
 - Port to [vidstack](https://www.vidstack.io/) once dash is supported.
@@ -24,11 +24,11 @@ Modern material design for Invidious
 - Add different search filters.
 - Playlist support.
 - History deletion.
-- Comment replies.
 - Load more for comments, history, subscriptions & search results.
 - Editing used instance for Return Dislikes & Sponsorblock.
 - Allow disabling Return Dislikes.
 - Audio only mode.
+- PWA support.
 
 ## Previews
 ![Preview of player](./previews/player-preview.png)
diff --git a/materialious/src/lib/Comment.svelte b/materialious/src/lib/Comment.svelte
new file mode 100644
index 00000000..778cb09c
--- /dev/null
+++ b/materialious/src/lib/Comment.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { getComments } from './Api';
+	import { type Comment, type Comments } from './Api/model';
+	import { numberWithCommas } from './misc';
+
+	export let comment: Comment;
+	export let videoId: string;
+
+	let replies: Comments;
+
+	async function loadReplies(continuation: string) {
+		replies = await getComments(videoId, {
+			continuation: continuation,
+			sort_by: 'top',
+			source: 'youtube'
+		});
+	}
+</script>
+
+<div class="comment">
+	<img class="circle small" src={comment.authorThumbnails[1].url} alt="comment profile" />
+	<div>
+		<div class="row">
+			<p>
+				<span class:bold={true} class:channel-owner={comment.authorIsChannelOwner}
+					>{comment.author}</span
+				>
+				<span class="secondary-text">{comment.publishedText}</span>
+			</p>
+			{#if comment.isPinned}
+				<i>push_pin</i>
+			{/if}
+			{#if comment.isEdited}
+				<i>edit</i>
+			{/if}
+		</div>
+		<p style="margin-bottom: 0;">
+			{comment.content}
+		</p>
+		<div style="display: flex;">
+			<p><i>thumb_up</i> {numberWithCommas(comment.likeCount)}</p>
+			{#if comment.creatorHeart}
+				<div>
+					<img
+						class="circle"
+						style="width: 25px; height: 25px"
+						src={comment.creatorHeart.creatorThumbnail}
+						alt="Creator profile"
+					/>
+					<i style="font-size: 20px;margin-left: 5px;" class="absolute left red-text bottom fill"
+						>favorite</i
+					>
+				</div>
+			{/if}
+		</div>
+
+		{#if replies}
+			{#each replies.comments as reply}
+				<svelte:self comment={reply} />
+			{/each}
+		{/if}
+
+		{#if comment.replies && !replies}
+			<button
+				on:click={async () => loadReplies(comment.replies.continuation)}
+				class="transparent replies"
+			>
+				<i class="primary-text">expand_more</i>
+				<span class="primary-text">{comment.replies.replyCount} replies</span>
+			</button>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.comment img {
+		margin: 0.5em 1em 0 1em;
+	}
+
+	.comment {
+		display: flex;
+		margin-bottom: 0.8em;
+	}
+
+	.channel-owner {
+		background-color: var(--primary);
+		padding: 0 0.5em;
+		border-radius: 1em;
+		color: var(--surface-variant);
+	}
+
+	.replies {
+		margin-left: 0;
+	}
+</style>
diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index bd5a8fa4..7a944386 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { deleteUnsubscribe, postSubscribe } from '$lib/Api/index.js';
+	import Comment from '$lib/Comment.svelte';
 	import PageLoading from '$lib/PageLoading.svelte';
 	import Player from '$lib/Player.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
@@ -142,45 +143,7 @@
 			{#if data.comments && typeof data.comments.comments !== 'undefined' && data.comments.comments.length > 0}
 				<h6>{numberWithCommas(data.comments.commentCount)} comments</h6>
 				{#each data.comments.comments as comment}
-					<div class="comment">
-						<img class="circle small" src={comment.authorThumbnails[1].url} alt="comment profile" />
-						<div>
-							<div class="row">
-								<p>
-									<span class:bold={true} class:channel-owner={comment.authorIsChannelOwner}
-										>{comment.author}</span
-									>
-									<span class="secondary-text">{comment.publishedText}</span>
-								</p>
-								{#if comment.isPinned}
-									<i>push_pin</i>
-								{/if}
-								{#if comment.isEdited}
-									<i>edit</i>
-								{/if}
-							</div>
-							<p>
-								{comment.content}
-							</p>
-							<div style="display: flex;">
-								<p><i>thumb_up</i> {numberWithCommas(comment.likeCount)}</p>
-								{#if comment.creatorHeart}
-									<div>
-										<img
-											class="circle"
-											style="width: 25px; height: 25px"
-											src={comment.creatorHeart.creatorThumbnail}
-											alt="Creator profile"
-										/>
-										<i
-											style="font-size: 20px;margin-left: 5px;"
-											class="absolute left red-text bottom fill">favorite</i
-										>
-									</div>
-								{/if}
-							</div>
-						</div>
-					</div>
+					<Comment {comment} videoId={data.video.videoId}></Comment>
 				{/each}
 				<button class="margin">Load more</button>
 			{:else}
@@ -206,25 +169,10 @@
 		--plyr-color-main: var(--primary);
 	}
 
-	.comment {
-		display: flex;
-	}
-
-	.comment img {
-		margin: 0.5em 1em 0 1em;
-	}
-
 	.grid {
 		padding: 1em 10em;
 	}
 
-	.channel-owner {
-		background-color: var(--primary);
-		padding: 0 0.5em;
-		border-radius: 1em;
-		color: var(--surface-variant);
-	}
-
 	@media screen and (max-width: 1646px) {
 		.grid {
 			padding: 0;