diff --git a/platforms/metagram/src/lib/fragments/AddPostModal/AddPostModal.svelte b/platforms/metagram/src/lib/fragments/AddPostModal/AddPostModal.svelte
new file mode 100644
index 00000000..dfa0fade
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/AddPostModal/AddPostModal.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { Button, InputRadio, Label, Textarea } from '$lib/ui';
+	import type { CupertinoPane } from 'cupertino-pane';
+	import { InputFile, Modal } from '..';
+
+	let {
+		files = $bindable(),
+		caption = $bindable(),
+		postVisibility = $bindable(),
+		paneModal = $bindable()
+	}: {
+		files: FileList | undefined;
+		caption: string;
+		postVisibility: string;
+		paneModal: CupertinoPane | undefined;
+	} = $props();
+
+	let isAddCaption = $state(false);
+	let imagePreviews: string[] = $state([]);
+	let postVisibilityOptions = ['Only followers', 'Close friends', 'Anyone'];
+
+	$effect(() => {
+		if (files) {
+			const readers = Array.from(files).map((file) => {
+				return new Promise<string>((resolve) => {
+					const reader = new FileReader();
+					reader.onload = (e) => resolve(e.target?.result as string);
+					reader.readAsDataURL(file);
+				});
+			});
+
+			Promise.all(readers).then((previews) => {
+				imagePreviews = previews;
+			});
+		} else {
+			imagePreviews = [];
+		}
+	});
+</script>
+
+<Modal
+	bind:paneModal
+	initialBreak="middle"
+	handleDismiss={() => {
+		(files = undefined), (isAddCaption = false);
+	}}
+>
+	<h1 class="mb-6 font-semibold text-black">Upload a Photo</h1>
+	{#if !isAddCaption}
+		{#if !files}
+			<InputFile class="mb-4 h-[40vh]" bind:files accept="images/*" multiple={true} />
+		{:else}
+			<div class="mb-4 grid grid-cols-3 gap-2">
+				{#each imagePreviews as src}
+					<div class="aspect-[4/5] overflow-hidden rounded-lg border">
+						<!-- svelte-ignore a11y_img_redundant_alt -->
+						<img {src} alt="Selected image" class="h-full w-full object-cover" />
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{:else if isAddCaption}
+		<Label>Add a Caption</Label>
+		<Textarea class="mb-4" bind:value={caption} placeholder="enter caption" />
+		<div class="mb-4 flex items-center gap-2">
+			{#each imagePreviews as src}
+				<div class="h-[100px] w-[80px] overflow-hidden rounded-lg border">
+					<!-- svelte-ignore a11y_img_redundant_alt -->
+					<img {src} alt="Selected image" class="h-[100px] w-[80px] object-cover" />
+				</div>
+			{/each}
+		</div>
+		<h3 class="text-black-800 mt-20 mb-2">Who can see the post?</h3>
+		{#each postVisibilityOptions as option, i}
+			<div class="mb-2 flex w-[50%] items-center justify-between">
+				<Label for={option + i}>{option}</Label>
+				<InputRadio
+					name="post-visibility"
+					id={option + i}
+					value={option}
+					bind:selected={postVisibility}
+				/>
+			</div>
+		{/each}
+	{/if}
+	{#if files}
+		<div class="grid grid-cols-2 gap-2">
+			<Button
+				variant="secondary"
+				size="sm"
+				callback={async () => {
+					files = undefined;
+					isAddCaption = false;
+					paneModal?.destroy({ animate: true });
+				}}>Cancel</Button
+			>
+			<Button
+				variant="secondary"
+				size="sm"
+				callback={async () => {
+					isAddCaption = true;
+				}}>Next</Button
+			>
+		</div>
+	{/if}
+</Modal>
diff --git a/platforms/metagram/src/lib/fragments/InputFile/InputFile.svelte b/platforms/metagram/src/lib/fragments/InputFile/InputFile.svelte
index 9b8c5dce..9d390ec5 100644
--- a/platforms/metagram/src/lib/fragments/InputFile/InputFile.svelte
+++ b/platforms/metagram/src/lib/fragments/InputFile/InputFile.svelte
@@ -1,33 +1,46 @@
 <script lang="ts">
+	import { cn } from '$lib/utils';
 	import { Album01Icon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import type { HTMLLabelAttributes } from 'svelte/elements';
 
-	interface IInputFileProps {
+	interface IInputFileProps extends HTMLLabelAttributes {
 		files: FileList | undefined;
 		accept: string;
-		label: string;
-		cancelLabel: string;
-		oncancel: () => void;
+		label?: string;
+		multiple?: boolean;
+		cancelLabel?: string;
+		oncancel?: () => void;
 	}
 
 	let {
 		files = $bindable(),
 		accept = 'image/*',
 		label = 'Click to upload a photo',
+		multiple = false,
 		cancelLabel = 'Delete upload',
-		oncancel
+		oncancel,
+		...restProps
 	}: IInputFileProps = $props();
 
 	const uniqueId = Math.random().toString().split('.')[1];
 	let inputFile: HTMLInputElement | undefined = $state();
+
+	let cBase =
+		'bg-grey text-black-400 font-geist flex min-h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal';
 </script>
 
-<input id={uniqueId} type="file" bind:files class="hidden" {accept} bind:this={inputFile} />
+<input
+	id={uniqueId}
+	type="file"
+	bind:files
+	class="hidden"
+	{multiple}
+	{accept}
+	bind:this={inputFile}
+/>
 
-<label
-	for={uniqueId}
-	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
->
+<label {...restProps} for={uniqueId} class={cn([cBase, restProps.class].join(' '))}>
 	{#if files}
 		<div class="flex flex-col items-center gap-2">
 			<HugeiconsIcon size="24px" icon={Album01Icon} color="var(--color-black-600)" />
diff --git a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte
index ff99a6f9..2d2cefb6 100644
--- a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte
+++ b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte
@@ -7,6 +7,8 @@
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
 		modalEl?: HTMLDivElement;
 		paneModal?: CupertinoPane;
+		initialBreak?: 'bottom' | 'top' | 'middle';
+		handleDismiss?: () => void;
 		children?: Snippet;
 	}
 
@@ -14,14 +16,13 @@
 		modalEl = $bindable(),
 		paneModal = $bindable(),
 		children = undefined,
+		initialBreak,
+		handleDismiss,
 		...restProps
 	}: IDrawerProps = $props();
 
-	function present() {
-		if (paneModal) paneModal.present({ animate: true });
-	}
-
 	function dismiss() {
+		handleDismiss && handleDismiss();
 		if (paneModal) paneModal.destroy({ animate: true });
 	}
 
@@ -30,25 +31,25 @@
 			paneModal = new CupertinoPane(modalEl, {
 				modal: true,
 				backdrop: true,
+				backdropBlur: true,
 				backdropOpacity: 0.4,
+				animationType: 'ease',
+				animationDuration: 300,
 				fitHeight: true,
-				showDraggable: true,
+				bottomClose: false,
+				showDraggable: false,
 				buttonDestroy: false,
+				initialBreak: initialBreak,
 				breaks: {
-					bottom: { enabled: true, height: 250 }
+					top: { enabled: true, height: 600 },
+					middle: { enabled: true, height: 400 },
+					bottom: { enabled: true, height: 200 }
 				},
-				initialBreak: 'bottom',
 				cssClass: 'modal',
 				events: {
 					onBackdropTap: () => dismiss()
 				}
 			});
-
-		present();
-
-		return () => {
-			if (paneModal) paneModal.destroy({ animate: false });
-		};
 	});
 </script>
 
@@ -60,17 +61,18 @@
 
 <style>
 	:global(.modal .pane) {
-		width: 95% !important;
-		max-height: 300px !important;
+		width: 100% !important;
+		max-height: 600px !important;
 		min-height: 100px !important;
 		height: auto !important;
 		position: fixed !important;
 		bottom: 30px !important;
-		left: 50% !important;
+		left: 40% !important;
 		transform: translateX(-50%) !important;
 		border-radius: 32px !important;
 		padding: 20px !important;
 		background-color: var(--color-white) !important;
+		cursor: default !important;
 		overflow: scroll !important;
 		scrollbar-width: none !important;
 		-ms-overflow-style: none !important;
diff --git a/platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.stories.ts b/platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.stories.ts
index d8c61a54..181d12e7 100644
--- a/platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.stories.ts
+++ b/platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.stories.ts
@@ -1,23 +1,20 @@
-import type { ComponentProps } from "svelte";
-import SettingsTile from "./SettingsTile.svelte";
+import type { ComponentProps } from 'svelte';
+import SettingsTile from './SettingsTile.svelte';
 
 export default {
-    title: "UI/SettingsTile",
-    component: SettingsTile,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: SettingsTile;
-        props: ComponentProps<typeof SettingsTile>;
-    }) => ({
-        Component: SettingsTile,
-        props: args,
-    }),
+	title: 'UI/SettingsTile',
+	component: SettingsTile,
+	tags: ['autodocs'],
+	render: (args: { Component: SettingsTile; props: ComponentProps<typeof SettingsTile> }) => ({
+		Component: SettingsTile,
+		props: args
+	})
 };
 
 export const Primary = {
-    args: {
-        title: "Who can see your posts?",
-        currentStatus: "Only followers",
-        onclick: () => alert("clicked"),
-    },
+	args: {
+		title: 'Who can see your posts?',
+		currentStatus: 'Only followers',
+		onclick: () => alert('clicked')
+	}
 };
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
index 4eaeb5d4..b121abd3 100644
--- a/platforms/metagram/src/lib/fragments/index.ts
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -1,20 +1,21 @@
-export { default as Profile } from "./Profile/Profile.svelte";
-export { default as Header } from "./Header/Header.svelte";
-export { default as BottomNav } from "./BottomNav/BottomNav.svelte";
-export { default as SettingsNavigationButton } from "./SettingsNavigationButton/SettingsNavigationButton.svelte";
-export { default as MessageInput } from "./MessageInput/MessageInput.svelte";
-export { default as InputFile } from "./InputFile/InputFile.svelte";
-export { default as Drawer } from "./Drawer/Drawer.svelte";
-export { default as Message } from "./Message/Message.svelte";
-export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte";
-export { default as Modal } from "./Modal/Modal.svelte";
-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 ChatMessage } from "./ChatMessage/ChatMessage.svelte";
-export { default as Comment } from "./Comment/Comment.svelte";
-export { default as SettingsDeleteButton } from "./SettingsDeleteButton/SettingsDeleteButton.svelte";
-export { default as SettingsTile } from "./SettingsTile/SettingsTile.svelte";
-export { default as UserRequest } from "./UserRequest/UserRequest.svelte";
-export { default as UploadedPostView } from "./UploadedPostView/UploadedPostView.svelte";
+export { default as Profile } from './Profile/Profile.svelte';
+export { default as Header } from './Header/Header.svelte';
+export { default as BottomNav } from './BottomNav/BottomNav.svelte';
+export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
+export { default as MessageInput } from './MessageInput/MessageInput.svelte';
+export { default as InputFile } from './InputFile/InputFile.svelte';
+export { default as Drawer } from './Drawer/Drawer.svelte';
+export { default as Message } from './Message/Message.svelte';
+export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
+export { default as Modal } from './Modal/Modal.svelte';
+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 ChatMessage } from './ChatMessage/ChatMessage.svelte';
+export { default as Comment } from './Comment/Comment.svelte';
+export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
+export { default as SettingsTile } from './SettingsTile/SettingsTile.svelte';
+export { default as UserRequest } from './UserRequest/UserRequest.svelte';
+export { default as UploadedPostView } from './UploadedPostView/UploadedPostView.svelte';
+export { default as AddPostModal } from './AddPostModal/AddPostModal.svelte';
diff --git a/platforms/metagram/src/lib/ui/Input/Input.stories.ts b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
index 5b273f1b..79fff79b 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.stories.ts
+++ b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
@@ -1,62 +1,62 @@
-import { Input } from "..";
+import { Input } from '..';
 
 export default {
-    title: "UI/Input",
-    component: Input,
-    tags: ["autodocs"],
-    render: (args: { type: string; placeholder: string }) => ({
-        Component: Input,
-        props: args,
-    }),
+	title: 'UI/Input',
+	component: Input,
+	tags: ['autodocs'],
+	render: (args: { type: string; placeholder: string }) => ({
+		Component: Input,
+		props: args
+	})
 };
 
 export const Text = {
-    args: {
-        type: "text",
-        placeholder: "Joe Biden",
-    },
+	args: {
+		type: 'text',
+		placeholder: 'Joe Biden'
+	}
 };
 
 export const Tel = {
-    args: {
-        type: "tel",
-        placeholder: "987654321",
-    },
+	args: {
+		type: 'tel',
+		placeholder: '987654321'
+	}
 };
 
 export const NumberInput = {
-    args: {
-        type: "number",
-        placeholder: "Enter something",
-    },
+	args: {
+		type: 'number',
+		placeholder: 'Enter something'
+	}
 };
 
 export const Email = {
-    args: {
-        type: "email",
-        placeholder: "example@email.com",
-    },
+	args: {
+		type: 'email',
+		placeholder: 'example@email.com'
+	}
 };
 
 export const Invalid = {
-    args: {
-        type: "email",
-        placeholder: "Invalid email",
-        value: "not-an-email",
-    },
+	args: {
+		type: 'email',
+		placeholder: 'Invalid email',
+		value: 'not-an-email'
+	}
 };
 
 export const Password = {
-    args: {
-        type: "password",
-        placeholder: "Please enter password",
-    },
+	args: {
+		type: 'password',
+		placeholder: 'Please enter password'
+	}
 };
 
 export const Radio = {
-    args: {
-        type: "radio",
-        value: "option1",
-        name: "option-1",
-    },
+	args: {
+		type: 'radio',
+		value: 'option1',
+		name: 'option-1'
+	}
 };
diff --git a/platforms/metagram/src/lib/ui/InputRadio/InputRadio.stories.ts b/platforms/metagram/src/lib/ui/InputRadio/InputRadio.stories.ts
index 4dbe6af3..1580087a 100644
--- a/platforms/metagram/src/lib/ui/InputRadio/InputRadio.stories.ts
+++ b/platforms/metagram/src/lib/ui/InputRadio/InputRadio.stories.ts
@@ -1,19 +1,19 @@
-import { InputRadio } from "..";
+import { InputRadio } from '..';
 
 export default {
-    title: "UI/InputRadio",
-    component: InputRadio,
-    tags: ["autodocs"],
-    render: (args: { type: string; placeholder: string }) => ({
-        Component: InputRadio,
-        props: args,
-    }),
+	title: 'UI/InputRadio',
+	component: InputRadio,
+	tags: ['autodocs'],
+	render: (args: { type: string; placeholder: string }) => ({
+		Component: InputRadio,
+		props: args
+	})
 };
 
 export const Radio = {
-    args: {
-        type: "radio",
-        value: "option1",
-        name: "option-1",
-    },
+	args: {
+		type: 'radio',
+		value: 'option1',
+		name: 'option-1'
+	}
 };
diff --git a/platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte b/platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte
index 522c30d0..1ada692f 100644
--- a/platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte
+++ b/platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte
@@ -6,12 +6,14 @@
 		selected?: string;
 		name?: string;
 		value: string;
+		id?: string;
 	}
 
 	let {
 		value = '',
 		selected = $bindable(''),
 		name = '',
+		id,
 		...restProps
 	}: IInputRadioProps = $props();
 
@@ -23,6 +25,7 @@
 
 <input
 	{...restProps}
+	{id}
 	type="radio"
 	{value}
 	bind:group={selected}
@@ -47,7 +50,7 @@
 	}}
 >
 	{#if selected === value}
-		<span class="bg-brand-burnt-orange bottom-0.75 left-0.25 absolute h-2.5 w-2.5 rounded-full"
+		<span class="bg-brand-burnt-orange absolute bottom-0.75 left-0.25 h-2.5 w-2.5 rounded-full"
 		></span>
 	{/if}
 </span>
diff --git a/platforms/metagram/src/lib/ui/Textarea/Textarea.stories.ts b/platforms/metagram/src/lib/ui/Textarea/Textarea.stories.ts
new file mode 100644
index 00000000..4f5f6341
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/Textarea/Textarea.stories.ts
@@ -0,0 +1,17 @@
+import { Textarea } from '..';
+
+export default {
+	title: 'UI/Textarea',
+	component: Textarea,
+	tags: ['autodocs'],
+	render: (args: { type: string; placeholder: string }) => ({
+		Component: Textarea,
+		props: args
+	})
+};
+
+export const Main = {
+	args: {
+		placeholder: 'Joe Biden'
+	}
+};
diff --git a/platforms/metagram/src/lib/ui/Textarea/Textarea.svelte b/platforms/metagram/src/lib/ui/Textarea/Textarea.svelte
new file mode 100644
index 00000000..2df79cbf
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/Textarea/Textarea.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	interface IInputProps extends HTMLTextareaAttributes {
+		textarea?: HTMLTextAreaElement;
+		value: string | number | any;
+		placeholder?: string;
+	}
+
+	let {
+		textarea = $bindable(),
+		value = $bindable(),
+		placeholder = '',
+		...restProps
+	}: IInputProps = $props();
+
+	const cbase = $derived(
+		'w-full bg-grey resize-none py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent'
+	);
+</script>
+
+<!-- svelte-ignore element_invalid_self_closing_tag -->
+<textarea
+	{...restProps}
+	rows={6}
+	{placeholder}
+	bind:value
+	bind:this={textarea}
+	class={cn([cbase, restProps.class].join(' '))}
+	tabindex="0"
+/>
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index dfc0602f..dcb16805 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1,8 +1,9 @@
-export { default as Button } from "./Button/Button.svelte";
-export { default as Avatar } from "./Avatar/Avatar.svelte";
-export { default as Input } from "./Input/Input.svelte";
-export { default as Select } from "./Select/Select.svelte";
-export { default as Label } from "./Label/Label.svelte";
-export { default as Toggle } from "./Toggle/Toggle.svelte";
-export { default as Helper } from "./Helper/Helper.svelte";
-export { default as InputRadio } from "./InputRadio/InputRadio.svelte";
+export { default as Button } from './Button/Button.svelte';
+export { default as Avatar } from './Avatar/Avatar.svelte';
+export { default as Input } from './Input/Input.svelte';
+export { default as Select } from './Select/Select.svelte';
+export { default as Label } from './Label/Label.svelte';
+export { default as Toggle } from './Toggle/Toggle.svelte';
+export { default as Helper } from './Helper/Helper.svelte';
+export { default as InputRadio } from './InputRadio/InputRadio.svelte';
+export { default as Textarea } from './Textarea/Textarea.svelte';
diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index f52afedb..7af1d7ec 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -2,11 +2,13 @@
 	import { page } from '$app/state';
 	import { comments } from '$lib/dummyData';
 	import { BottomNav, Header, Comment, MessageInput, SideBar } from '$lib/fragments';
+	import AddPostModal from '$lib/fragments/AddPostModal/AddPostModal.svelte';
 	import UserRequest from '$lib/fragments/UserRequest/UserRequest.svelte';
 	import { showComments } from '$lib/store/store.svelte';
 	import type { CommentType } from '$lib/types';
-	import { ArrowLeft01Icon, ArrowLeft02Icon } from '@hugeicons/core-free-icons';
+	import { ArrowLeft02Icon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import type { CupertinoPane } from 'cupertino-pane';
 	let { children } = $props();
 
 	let route = $derived(page.url.pathname);
@@ -15,7 +17,11 @@
 	let commentInput: HTMLInputElement | undefined = $state();
 	let _comments = $state(comments);
 	let activeReplyToId: string | null = $state(null);
+	let paneModal: CupertinoPane | undefined = $state();
+	let files: FileList | undefined = $state();
+	let caption: string = $state('');
 	let idFromParams = $state();
+	let postVisibility = $state('');
 
 	const handleSend = async () => {
 		const newComment = {
@@ -73,10 +79,15 @@
 </script>
 
 <main
-	class={`block h-[100dvh] ${route !== '/home' && route !== '/messages' && route !== '/profile' && route !== '/settings' && !route.includes('/profile') ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
+	class={`block h-[100dvh] ${route !== '/home' && route !== '/messages' && route !== '/profile' && route !== '/settings' && !route.includes('/profile') && !route.includes('/settings') ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
 >
-	<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
-	<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 pb-16 md:px-8 md:pt-8">
+	<SideBar
+		profileSrc="https://picsum.photos/200"
+		handlePost={async () => {
+			if (paneModal) paneModal.present({ animate: true });
+		}}
+	/>
+	<section class="h-[100dvh] md:px-8 md:pt-8">
 		{#if route === '/profile/post'}
 			<button
 				class="my-4 cursor-pointer rounded-full bg-white/60 p-2 hover:bg-gray-100"
@@ -100,7 +111,9 @@
 				]}
 			/>
 		{/if}
-		{@render children()}
+		<section class="hide-scrollbar h-[100%] overflow-y-auto pb-35">
+			{@render children()}
+		</section>
 	</section>
 	{#if route === '/home' || route === '/messages'}
 		<aside
@@ -153,3 +166,5 @@
 		<BottomNav class="btm-nav" profileSrc="https://picsum.photos/200" />
 	{/if}
 </main>
+
+<AddPostModal bind:files bind:postVisibility bind:caption bind:paneModal />
diff --git a/platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte b/platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte
index 8e6ed045..535d4077 100644
--- a/platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte
@@ -4,7 +4,7 @@
 	let messageValue = $state('');
 </script>
 
-<section class="chat relative px-0">
+<section class="relative px-0">
 	{#each { length: 12 } as _}
 		<ChatMessage
 			isOwn={true}
@@ -54,7 +54,7 @@
 	{/each}
 
 	<MessageInput
-		class="sticky start-0 bottom-[-15px] w-full"
+		class="sticky start-0 bottom-[-30px] w-full"
 		variant="dm"
 		src="https://picsum.photos/id/237/200/300"
 		bind:value={messageValue}
diff --git a/platforms/metagram/src/routes/+layout.svelte b/platforms/metagram/src/routes/+layout.svelte
index d2583c88..96c08fd4 100644
--- a/platforms/metagram/src/routes/+layout.svelte
+++ b/platforms/metagram/src/routes/+layout.svelte
@@ -3,7 +3,6 @@
 	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
 	import { onMount } from 'svelte';
 	import '../app.css';
-	import { page } from '$app/state';
 
 	let { children } = $props();
 
@@ -49,11 +48,7 @@
 		<img src="/images/Logo.svg" alt="logo" />
 	</main>
 {:else}
-	<main
-		class="h-[100dvh] overflow-hidden {page.url.pathname.includes('/profile')
-			? 'px-0'
-			: 'px-4'}  md:px-0"
-	>
+	<main class="h-[100dvh] overflow-hidden px-4 md:px-0">
 		{@render children()}
 	</main>
 {/if}