diff --git a/platforms/metagram/src/lib/dummyData.ts b/platforms/metagram/src/lib/dummyData.ts
index d27ff35a..653f42ea 100644
--- a/platforms/metagram/src/lib/dummyData.ts
+++ b/platforms/metagram/src/lib/dummyData.ts
@@ -1,3 +1,5 @@
+import type { CommentType } from './types';
+
 export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
 	id: i + 1,
 	avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
@@ -9,10 +11,74 @@ export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
 	count: {
 		likes: Math.floor(Math.random() * 500),
 		comments: Math.floor(Math.random() * 200)
-	},
-	callback: {
-		like: () => alert(`Like clicked on post ${i + 1}`),
-		comment: () => alert(`Comment clicked on post ${i + 1}`),
-		menu: () => alert(`Menu clicked on post ${i + 1}`)
 	}
 }));
+
+export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
+	userImgSrc: 'https://picsum.photos/800',
+	name: `user${i + 1}`,
+	commentId: `${i + 1}p`,
+	comment: `this is the dummy comment which is commented by user${i + 1}`,
+	isUpVoted: false,
+	isDownVoted: false,
+	upVotes: 0,
+	time: '2 minutes ago',
+	replies: [
+		{
+			userImgSrc: 'https://picsum.photos/800',
+			name: `user${i + 1}x`,
+			commentId: `${i + 1}x`,
+			comment: `this is the dummy reply which is replied by another${i}x`,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: '1 minute ago',
+			replies: [
+				{
+					userImgSrc: 'https://picsum.photos/800',
+					name: `user${i + 1}a`,
+					commentId: `${i + 1}a`,
+					comment: `this is the dummy reply which is replied by another${i}a`,
+					isUpVoted: false,
+					isDownVoted: false,
+					upVotes: 0,
+					time: '1 minute ago',
+					replies: []
+				}
+			]
+		},
+		{
+			userImgSrc: 'https://picsum.photos/800',
+			name: `user${i + 1}y`,
+			commentId: `${i + 1}y`,
+			comment: `this is the dummy reply which is replied by another${i}y`,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: '1 minute ago',
+			replies: []
+		},
+		{
+			userImgSrc: 'https://picsum.photos/800',
+			name: `user${i + 1}y`,
+			commentId: `${i + 1}y`,
+			comment: `this is the dummy reply which is replied by another${i}y`,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: '1 minute ago',
+			replies: []
+		},
+		{
+			userImgSrc: 'https://picsum.photos/800',
+			name: `user${i + 1}y`,
+			commentId: `${i + 1}y`,
+			comment: `this is the dummy reply which is replied by another${i}y`,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: '1 minute ago',
+			replies: []
+		}
+	]
+}));
diff --git a/platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts b/platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts
new file mode 100644
index 00000000..cca0ea3d
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts
@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import { Comment } from '..';
+import { comments } from '$lib/dummyData';
+
+export default {
+	title: 'UI/Comment',
+	component: Comment,
+	tags: ['autodocs'],
+	render: (args: { Component: Comment; props: ComponentProps<typeof Comment> }) => ({
+		Component: Comment,
+		props: args
+	})
+};
+
+export const Main = {
+	args: {
+		comment: comments[0]
+	}
+};
diff --git a/platforms/metagram/src/lib/fragments/Comment/Comment.svelte b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
new file mode 100644
index 00000000..86a5a068
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { Like } from '$lib/icons';
+	import { Avatar } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { CommentType } from '$lib/types';
+
+	interface ICommentProps extends HTMLAttributes<HTMLElement> {
+		comment: CommentType;
+		handleReply: () => void;
+	}
+
+	let visibleReplies = $state(2);
+
+	const showMoreReplies = () => {
+		visibleReplies = comment.replies.length;
+	};
+
+	let { comment, handleReply, ...restProps }: ICommentProps = $props();
+</script>
+
+<article {...restProps} class={cn([restProps.class].join(' '))}>
+	<div class="align-start flex gap-2">
+		<Avatar src={comment.userImgSrc} size="sm" />
+		<div>
+			<h3 class="font-semibold text-black">{comment.name}</h3>
+			<p class="text-black-600 mt-0.5">{comment.comment}</p>
+		</div>
+	</div>
+	<div class="ms-12 mt-2 flex items-center gap-2">
+		<button
+			onclick={() => {
+				if (!comment.isUpVoted) {
+					comment.upVotes++;
+					comment.isUpVoted = true;
+					comment.isDownVoted = false;
+				}
+			}}
+		>
+			<Like
+				size="18px"
+				color={comment.isUpVoted
+					? 'var(--color-brand-burnt-orange)'
+					: 'var(--color-black-600)'}
+				fill={comment.isUpVoted
+					? 'var(--color-brand-burnt-orange)'
+					: 'var(--color-black-600)'}
+			/>
+		</button>
+		<p class="text-black-600 font-semibold">{comment.upVotes}</p>
+		<button
+			onclick={() => {
+				if (!comment.isDownVoted) {
+					comment.upVotes--;
+					comment.isDownVoted = true;
+					comment.isUpVoted = false;
+				}
+			}}
+		>
+			<Like
+				size="18px"
+				color={comment.isDownVoted
+					? 'var(--color-brand-burnt-orange)'
+					: 'var(--color-black-600)'}
+				fill={comment.isDownVoted
+					? 'var(--color-brand-burnt-orange)'
+					: 'var(--color-black-600)'}
+				class="rotate-180"
+			/>
+		</button>
+		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
+		<button onclick={handleReply} class="text-black-600 font-semibold">Reply</button>
+		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
+		<p class="text-black-600">{comment.time}</p>
+	</div>
+	{#if comment?.replies?.length}
+		<ul class="ms-12 mt-4 space-y-2">
+			{#each comment.replies.slice(0, visibleReplies) as reply}
+				<li>
+					<div class="align-start flex gap-2">
+						<Avatar src={reply.userImgSrc} size="sm" />
+						<div>
+							<h3 class="font-semibold text-black">{reply.name}</h3>
+							<p class="text-black-600 mt-0.5">{reply.comment}</p>
+						</div>
+					</div>
+					<div class="ms-12 mt-2 flex items-center gap-2">
+						<button
+							onclick={() => {
+								if (!reply.isUpVoted) {
+									reply.upVotes++;
+									reply.isUpVoted = true;
+									reply.isDownVoted = false;
+								}
+							}}
+						>
+							<Like
+								size="18px"
+								color={reply.isUpVoted
+									? 'var(--color-brand-burnt-orange)'
+									: 'var(--color-black-600)'}
+								fill={reply.isUpVoted
+									? 'var(--color-brand-burnt-orange)'
+									: 'var(--color-black-600)'}
+							/>
+						</button>
+						<p class="text-black-600 font-semibold">{reply.upVotes}</p>
+						<button
+							onclick={() => {
+								if (!reply.isDownVoted) {
+									reply.upVotes--;
+									reply.isDownVoted = true;
+									reply.isUpVoted = false;
+								}
+							}}
+						>
+							<Like
+								size="18px"
+								color={reply.isDownVoted
+									? 'var(--color-brand-burnt-orange)'
+									: 'var(--color-black-600)'}
+								fill={reply.isDownVoted
+									? 'var(--color-brand-burnt-orange)'
+									: 'var(--color-black-600)'}
+								class="rotate-180"
+							/>
+						</button>
+						<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
+						<button onclick={handleReply} class="text-black-600 font-semibold"
+							>Reply</button
+						>
+						<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
+						<p class="text-black-600">{reply.time}</p>
+					</div>
+				</li>
+			{/each}
+			{#if comment.replies.length > visibleReplies}
+				<button
+					onclick={showMoreReplies}
+					class="text-brand-burnt-orange mt-1 text-sm font-medium"
+				>
+					See {comment.replies.length - visibleReplies} more replies
+				</button>
+			{/if}
+		</ul>
+	{/if}
+</article>
diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
index e58cce3f..e01b1ad4 100644
--- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
+++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
@@ -7,20 +7,13 @@
 	import type { SwipeCustomEvent } from 'svelte-gestures';
 
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
-		isPaneOpen?: boolean;
+		drawer?: CupertinoPane;
 		children?: Snippet;
-		handleSwipe?: (isOpen: boolean | undefined) => void;
 	}
 
-	let {
-		isPaneOpen = $bindable(),
-		children = undefined,
-		handleSwipe,
-		...restProps
-	}: IDrawerProps = $props();
+	let { drawer = $bindable(), children = undefined, ...restProps }: IDrawerProps = $props();
 
 	let drawerElement: HTMLElement;
-	let drawer: CupertinoPane;
 
 	function dismiss() {
 		if (drawer) drawer.destroy({ animate: true });
@@ -28,9 +21,7 @@
 
 	const handleDrawerSwipe = (event: SwipeCustomEvent) => {
 		if (event.detail.direction === ('down' as string)) {
-			handleSwipe?.(false);
 			drawer?.destroy({ animate: true });
-			isPaneOpen = false;
 		}
 	};
 
@@ -51,13 +42,6 @@
 				onBackdropTap: () => dismiss()
 			}
 		});
-		if (isPaneOpen) {
-			drawer.present({ animate: true });
-		} else {
-			drawer.destroy({ animate: true });
-		}
-
-		drawer.present();
 	});
 </script>
 
@@ -71,7 +55,9 @@
 	onswipe={handleDrawerSwipe}
 	class={cn(restProps.class)}
 >
-	{@render children?.()}
+	<div class="h-[100%] overflow-y-scroll">
+		{@render children?.()}
+	</div>
 </div>
 
 <style>
diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
index 8a955931..199e2209 100644
--- a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
+++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
@@ -7,6 +7,7 @@
 
 	interface IMessageInputProps extends HTMLAttributes<HTMLElement> {
 		variant: 'comment' | 'dm';
+		input?: HTMLInputElement;
 		src: string;
 		value: string;
 		placeholder?: string;
@@ -18,7 +19,8 @@
 	let {
 		variant = 'comment',
 		src = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
-		value,
+		value = $bindable(),
+		input = $bindable(),
 		placeholder,
 		files = $bindable(),
 		handleAdd,
@@ -46,7 +48,7 @@
 			<HugeiconsIcon size="24px" icon={PlusSignIcon} color="var(--color-black-400)" />
 		</button>
 	{/if}
-	<Input type="text" bind:value {placeholder} />
+	<Input type="text" bind:input bind:value {placeholder} />
 	{#if value || variant === 'dm'}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
diff --git a/platforms/metagram/src/lib/fragments/Post/Post.svelte b/platforms/metagram/src/lib/fragments/Post/Post.svelte
index a7a23e31..72e9c81a 100644
--- a/platforms/metagram/src/lib/fragments/Post/Post.svelte
+++ b/platforms/metagram/src/lib/fragments/Post/Post.svelte
@@ -82,7 +82,7 @@
 			</button>
 		</div>
 		<div class="flex items-center justify-between gap-3 text-lg text-black/40">
-			<p>{count.likes} likes</p>
+			<p class="subtext text-black-400">{count.likes} likes</p>
 			<HugeiconsIcon
 				icon={RecordIcon}
 				size={5}
@@ -90,7 +90,7 @@
 				color="var(--color-black-400)"
 				className="rounded-full"
 			/>
-			<p>{count.comments} comments</p>
+			<p class="subtext text-black-400">{count.comments} comments</p>
 		</div>
 	</div>
 </article>
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
index 16231337..367bc107 100644
--- a/platforms/metagram/src/lib/fragments/index.ts
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -11,4 +11,5 @@ export { default as SideBar } from './SideBar/SideBar.svelte';
 export { default as RightAside } from './RightAside/RightAside.svelte';
 export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte';
 export { default as Post } from './Post/Post.svelte';
+export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
diff --git a/platforms/metagram/src/lib/icons/Like.svelte b/platforms/metagram/src/lib/icons/Like.svelte
index 93b6a522..9ec26816 100644
--- a/platforms/metagram/src/lib/icons/Like.svelte
+++ b/platforms/metagram/src/lib/icons/Like.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import type { ISvgProps } from './../types';
 
-	let { size = '20px', color = '#A5A5A5', ...restProps }: ISvgProps = $props();
+	let { size = '20px', color = '#A5A5A5', fill, ...restProps }: ISvgProps = $props();
 </script>
 
 <svg
 	width={size}
 	height={size}
 	viewBox="0 0 20 20"
-	fill="none"
+	{fill}
 	xmlns="http://www.w3.org/2000/svg"
 	{...restProps}
 >
diff --git a/platforms/metagram/src/lib/store/store.svelte.ts b/platforms/metagram/src/lib/store/store.svelte.ts
index db7b38da..30a8779a 100644
--- a/platforms/metagram/src/lib/store/store.svelte.ts
+++ b/platforms/metagram/src/lib/store/store.svelte.ts
@@ -1,3 +1,7 @@
 export const isNavigatingThroughNav = $state({
 	value: false
 });
+
+export const showComments = $state({
+	value: false
+});
diff --git a/platforms/metagram/src/lib/types.ts b/platforms/metagram/src/lib/types.ts
index d9f61563..1cd87950 100644
--- a/platforms/metagram/src/lib/types.ts
+++ b/platforms/metagram/src/lib/types.ts
@@ -4,3 +4,29 @@ export interface ISvgProps extends SVGAttributes<SVGElement> {
 	size?: number | string;
 	color?: string;
 }
+
+export type CommentType = {
+	commentId: string;
+	name: string;
+	userImgSrc: string;
+	comment: string;
+	isUpVoted: boolean;
+	isDownVoted: boolean;
+	upVotes: number;
+	time: string;
+	replies: CommentType[];
+};
+
+export type PostData = {
+	id: number;
+	avatar: string;
+	username: string;
+	imgUri: string;
+	postAlt: string;
+	text: string;
+	time: string;
+	count: {
+		likes: number;
+		comments: number;
+	};
+};
diff --git a/platforms/metagram/src/lib/ui/Helper/Helper.stories.ts b/platforms/metagram/src/lib/ui/Helper/Helper.stories.ts
index 54f6286a..bb4c91fe 100644
--- a/platforms/metagram/src/lib/ui/Helper/Helper.stories.ts
+++ b/platforms/metagram/src/lib/ui/Helper/Helper.stories.ts
@@ -15,5 +15,3 @@ export default {
 export const Primary = {
 	args: { children: HelperText }
 };
-
-
diff --git a/platforms/metagram/src/lib/ui/Input/Input.stories.ts b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
index 9d1d53c6..650064ca 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.stories.ts
+++ b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
@@ -4,7 +4,7 @@ export default {
 	title: 'UI/Input',
 	component: Input,
 	tags: ['autodocs'],
-	render: (args: { type: string; placeholder: string; }) => ({
+	render: (args: { type: string; placeholder: string }) => ({
 		Component: Input,
 		props: args
 	})
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index 37ec24b3..4fec6341 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -4,10 +4,14 @@
 
 	interface IInputProps extends HTMLInputAttributes {
 		type: HTMLInputTypeAttribute;
+		input?: HTMLInputElement;
+		value: string | number | any;
+		placeholder?: string;
 	}
 
 	let {
 		type = 'text',
+		input = $bindable(),
 		value = $bindable(),
 		placeholder = '',
 		...restProps
@@ -23,6 +27,7 @@
 	{type}
 	{placeholder}
 	bind:value
+	bind:this={input}
 	class={cn([cbase, restProps.class].join(' '))}
 	tabindex="0"
 />
diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index 880f4459..276c9520 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -1,13 +1,55 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
-	import { BottomNav, Header } from '$lib/fragments';
+	import { comments } from '$lib/dummyData';
+	import { BottomNav, Header, Comment, MessageInput } from '$lib/fragments';
 	import SideBar from '$lib/fragments/SideBar/SideBar.svelte';
 	import { Settings } from '$lib/icons';
+	import { showComments } from '$lib/store/store.svelte';
+	import type { CommentType } from '$lib/types';
 	let { children } = $props();
 
 	let route = $derived(page.url.pathname);
 	let heading = $state('');
+	let commentValue: string = $state('');
+	let commentInput: HTMLInputElement | undefined = $state();
+	let _comments = $state(comments);
+	let activeReplyToId: string | null = $state(null);
+
+	const handleSend = async () => {
+		const newComment = {
+			userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+			name: 'You',
+			commentId: Date.now().toString(),
+			comment: commentValue,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: 'Just now',
+			replies: []
+		};
+
+		if (activeReplyToId) {
+			// Find the parent comment by id and push reply
+			const addReplyToComment = (commentsArray: CommentType[]) => {
+				for (const c of commentsArray) {
+					if (c.commentId === activeReplyToId) {
+						c.replies.push(newComment);
+						return true;
+					} else if (c.replies.length) {
+						if (addReplyToComment(c.replies)) return true;
+					}
+				}
+				return false;
+			};
+			addReplyToComment(_comments);
+		} else {
+			// If no activeReplyToId, add as a new parent comment
+			_comments = [newComment, ..._comments];
+		}
+		commentValue = '';
+		activeReplyToId = null;
+	};
 
 	$effect(() => {
 		if (route.includes('home')) {
@@ -28,9 +70,11 @@
 	});
 </script>
 
-<main class="block h-[100dvh] grid-cols-[20vw_auto_30vw] md:grid">
+<main
+	class={`block h-[100dvh] ${route !== '/home' ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
+>
 	<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
-	<section class="mx-4 md:mx-8 md:pt-8">
+	<section class="px-4 md:px-8 md:pt-8">
 		<div class="flex items-center justify-between">
 			<Header variant="primary" {heading} />
 			{#if route === '/profile'}
@@ -47,5 +91,35 @@
 		</div>
 		{@render children()}
 	</section>
+	{#if route === '/home'}
+		<aside
+			class="hide-scrollbar relative hidden h-[100dvh] overflow-y-scroll border border-e-0 border-t-0 border-b-0 border-s-gray-200 px-8 pt-14 md:block"
+		>
+			{#if showComments.value}
+				<ul class="pb-4">
+					<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
+					{#each _comments as comment}
+						<li class="mb-4">
+							<Comment
+								{comment}
+								handleReply={() => {
+									activeReplyToId = comment.commentId;
+									commentInput?.focus();
+								}}
+							/>
+						</li>
+					{/each}
+					<MessageInput
+						class="sticky start-0 bottom-4 mt-4 w-full px-2"
+						variant="comment"
+						src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
+						bind:value={commentValue}
+						{handleSend}
+						bind:input={commentInput}
+					/>
+				</ul>
+			{/if}
+		</aside>
+	{/if}
 	<BottomNav profileSrc="https://picsum.photos/200" />
 </main>
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index daca9ac9..227e2035 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -1,26 +1,11 @@
 <script lang="ts">
-	import { Post } from '$lib/fragments';
-	import { dummyPosts } from '$lib/dummyData';
+	import { Drawer, Post } from '$lib/fragments';
+	import { comments, dummyPosts } from '$lib/dummyData';
 	import { onMount } from 'svelte';
-
-	type PostData = {
-		id: number;
-		avatar: string;
-		username: string;
-		imgUri: string;
-		postAlt: string;
-		text: string;
-		time: string;
-		count: {
-			likes: number;
-			comments: number;
-		};
-		callback: {
-			like: () => void;
-			comment: () => void;
-			menu: () => void;
-		};
-	};
+	import type { CupertinoPane } from 'cupertino-pane';
+	import { Comment, MessageInput } from '$lib/fragments';
+	import type { CommentType, PostData } from '$lib/types';
+	import { showComments } from '$lib/store/store.svelte';
 
 	let listElement: HTMLElement;
 	let visiblePosts: PostData[] = $state([]);
@@ -28,6 +13,11 @@
 	const batchSize = 10;
 	let currentIndex = $state(0);
 	let loading = $state(false);
+	let drawer: CupertinoPane | undefined = $state();
+	let commentValue: string = $state('');
+	let commentInput: HTMLInputElement | undefined = $state();
+	let _comments = $state(comments);
+	let activeReplyToId: string | null = $state(null);
 
 	const loadMore = () => {
 		if (loading || currentIndex >= dummyPosts.length) return;
@@ -48,6 +38,41 @@
 			loadMore();
 	};
 
+	const handleSend = async () => {
+		const newComment = {
+			userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+			name: 'You',
+			commentId: Date.now().toString(),
+			comment: commentValue,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: 'Just now',
+			replies: []
+		};
+
+		if (activeReplyToId) {
+			// Find the parent comment by id and push reply
+			const addReplyToComment = (commentsArray: CommentType[]) => {
+				for (const c of commentsArray) {
+					if (c.commentId === activeReplyToId) {
+						c.replies.push(newComment);
+						return true;
+					} else if (c.replies.length) {
+						if (addReplyToComment(c.replies)) return true;
+					}
+				}
+				return false;
+			};
+			addReplyToComment(_comments);
+		} else {
+			// If no activeReplyToId, add as a new parent comment
+			_comments = [newComment, ..._comments];
+		}
+		commentValue = '';
+		activeReplyToId = null;
+	};
+
 	$effect(() => {
 		listElement.addEventListener('scroll', onScroll);
 		return () => listElement.removeEventListener('scroll', onScroll);
@@ -58,7 +83,7 @@
 	});
 </script>
 
-<ul bind:this={listElement} class="hide-scrollbar overflow-auto">
+<ul bind:this={listElement} class="hide-scrollbar h-[100vh] overflow-auto">
 	{#each visiblePosts as post}
 		<li class="mb-6">
 			<Post
@@ -69,7 +94,17 @@
 				text={post.text}
 				time={post.time}
 				count={post.count}
-				callback={post.callback}
+				callback={{
+					like: () => alert('like'),
+					comment: () => {
+						if (window.matchMedia('(max-width: 768px)').matches) {
+							drawer?.present({ animate: true });
+						} else {
+							showComments.value = true;
+						}
+					},
+					menu: () => alert('menu')
+				}}
 			/>
 		</li>
 	{/each}
@@ -78,3 +113,28 @@
 {#if loading}
 	<p class="my-4 text-center">Loading more posts…</p>
 {/if}
+
+<Drawer bind:drawer>
+	<ul class="pb-4">
+		<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
+		{#each _comments as comment}
+			<li class="mb-4">
+				<Comment
+					{comment}
+					handleReply={() => {
+						activeReplyToId = comment.commentId;
+						commentInput?.focus();
+					}}
+				/>
+			</li>
+		{/each}
+		<MessageInput
+			class="fixed start-0 bottom-4 mt-4 w-full px-5"
+			variant="comment"
+			src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
+			bind:value={commentValue}
+			{handleSend}
+			bind:input={commentInput}
+		/>
+	</ul>
+</Drawer>
diff --git a/platforms/metagram/src/routes/+layout.svelte b/platforms/metagram/src/routes/+layout.svelte
index 4a1d1ec5..b0f7d319 100644
--- a/platforms/metagram/src/routes/+layout.svelte
+++ b/platforms/metagram/src/routes/+layout.svelte
@@ -34,6 +34,6 @@
 	});
 </script>
 
-<main class="h-[100dvh] md:px-0">
+<main class="h-[100dvh] overflow-hidden px-4 md:px-0">
 	{@render children()}
 </main>