diff --git a/platforms/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte b/platforms/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte
index 4e1ce0561..1024cccfe 100644
--- a/platforms/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte
+++ b/platforms/pictique/src/lib/fragments/CreatePostModal/CreatePostModal.svelte
@@ -1,44 +1,78 @@
 <script lang="ts">
 	import { closeCreatePostModal, createPost } from '$lib/stores/posts';
 	import { Button, Modal } from '$lib/ui';
+	import { formatSize, validateFileSize } from '$lib/utils/fileValidation';
 
 	let { open = $bindable() }: { open: boolean } = $props();
 
+	interface UploadItem {
+		file: File;
+		dataUrl: string;
+	}
+
 	let text = $state('');
-	let images = $state<string[]>([]);
+	let uploadItems = $state<UploadItem[]>([]);
 	let isSubmitting = $state(false);
+	let error = $state('');
+
+	const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB total
+	const MAX_FILE_SIZE = 1 * 1024 * 1024; // 1MB per individual image
+
+	let totalSize = $derived(uploadItems.reduce((sum, item) => sum + item.file.size, 0));
+	let usagePercentage = $derived((totalSize / MAX_TOTAL_SIZE) * 100);
+	let remainingSize = $derived(MAX_TOTAL_SIZE - totalSize);
 
 	const handleImageUpload = (event: Event) => {
 		const input = event.target as HTMLInputElement;
 		if (!input.files?.length) return;
 
 		const file = input.files[0];
+
+		const validation = validateFileSize(file, MAX_FILE_SIZE, totalSize, MAX_TOTAL_SIZE);
+		if (!validation.valid) {
+			error = validation.error || 'Invalid file';
+			input.value = '';
+			return;
+		}
+
+		error = '';
+
 		const reader = new FileReader();
 		reader.onload = (e) => {
 			const result = e.target?.result;
 			if (typeof result === 'string') {
-				console.log(result);
-				images = [...images, result];
+				// Atomically add both file and dataUrl together
+				uploadItems = [...uploadItems, { file, dataUrl: result }];
+			} else {
+				error = 'Failed to read image file';
 			}
 		};
+		reader.onerror = () => {
+			error = 'Error reading image file';
+		};
 		reader.readAsDataURL(file);
+		input.value = '';
 	};
 
 	const removeImage = (index: number) => {
-		images = images.filter((_, i) => i !== index);
+		uploadItems = uploadItems.filter((_, i) => i !== index);
+		error = '';
 	};
 
 	const handleSubmit = async () => {
-		if (!text.trim() && images.length === 0) return;
+		if (!text.trim() && uploadItems.length === 0) return;
 
 		try {
 			isSubmitting = true;
+			const images = uploadItems.map((item) => item.dataUrl);
 			await createPost(text, images);
 			closeCreatePostModal();
 			text = '';
-			images = [];
-		} catch (error) {
-			console.error('Failed to create post:', error);
+			uploadItems = [];
+			error = '';
+		} catch (err) {
+			error = err instanceof Error ? err.message : String(err);
+			console.error('Failed to create post:', err);
 		} finally {
 			isSubmitting = false;
 		}
@@ -46,7 +80,7 @@
 </script>
 
 <Modal {open} onclose={closeCreatePostModal}>
-	<div class="w-full max-w-2xl rounded-lg bg-white p-6">
+	<div class="w-[80vw] max-w-sm rounded-lg bg-white p-6 sm:max-w-md md:max-w-lg lg:max-w-2xl">
 		<div class="mb-4 flex items-center justify-between">
 			<h2 class="text-xl font-semibold">Create Post</h2>
 			<button
@@ -54,10 +88,16 @@
 				class="rounded-full p-2 hover:bg-gray-100"
 				onclick={closeCreatePostModal}
 			>
-				✕
+				{@render Cross()}
 			</button>
 		</div>
 
+		{#if error}
+			<div class="mb-4 rounded-md bg-red-500 px-4 py-2 text-sm text-white">
+				{error}
+			</div>
+		{/if}
+
 		<div class="mb-4">
 			<!-- svelte-ignore element_invalid_self_closing_tag -->
 			<textarea
@@ -68,45 +108,95 @@
 			/>
 		</div>
 
-		{#if images.length > 0}
-			<div class="mb-4 grid grid-cols-2 gap-4">
-				{#each images as image, index (index)}
-					<div class="relative">
-						<!-- svelte-ignore a11y_img_redundant_alt -->
-						<img
-							src={image}
-							alt="Post image"
-							class="aspect-square w-full rounded-lg object-cover"
-						/>
-						<button
-							type="button"
-							class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
-							onclick={() => removeImage(index)}
-						>
-							✕
-						</button>
-					</div>
-				{/each}
+		<div class="mb-4 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
+			{#each uploadItems as item, index (index)}
+				<div class="relative">
+					<!-- svelte-ignore a11y_img_redundant_alt -->
+					<img
+						src={item.dataUrl}
+						alt="Post image"
+						class="aspect-square w-full rounded-lg object-cover"
+					/>
+					<button
+						type="button"
+						class="absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
+						onclick={() => removeImage(index)}
+						aria-label="Remove image"
+					>
+						{@render Cross()}
+					</button>
+				</div>
+			{/each}
+
+			<!-- Add Photo Frame -->
+			{#if remainingSize > 0}
+				<label
+					class="flex aspect-square cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 transition-colors hover:border-gray-400 hover:bg-gray-100"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-gray-400"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+					</svg>
+					<span class="text-sm font-medium text-gray-600">Add Photo</span>
+					<input
+						type="file"
+						accept="image/*"
+						class="hidden"
+						onchange={handleImageUpload}
+					/>
+				</label>
+			{/if}
+		</div>
+
+		{#if uploadItems.length > 1}
+			<div class="mb-4">
+				<div class="mb-2 flex items-center justify-between text-sm">
+					<span class="text-gray-600">
+						{formatSize(totalSize)} / {formatSize(MAX_TOTAL_SIZE)}
+					</span>
+					<span class="text-gray-600">{formatSize(remainingSize)} remaining</span>
+				</div>
+				<div class="h-2 w-full overflow-hidden rounded-full bg-gray-200">
+					<div
+						class="h-full transition-all duration-300"
+						class:bg-red-500={usagePercentage >= 90}
+						class:bg-yellow-500={usagePercentage >= 70 && usagePercentage < 90}
+						class:bg-green-500={usagePercentage < 70}
+						style="width: {Math.min(usagePercentage, 100)}%"
+					></div>
+				</div>
 			</div>
 		{/if}
 
-		<div class="flex items-center justify-between gap-2">
-			<label
-				class="w-full cursor-pointer rounded-full bg-gray-100 px-4 py-3 text-center hover:bg-gray-200"
-			>
-				<input type="file" accept="image/*" class="hidden" onchange={handleImageUpload} />
-				Add Photo
-			</label>
-
+		<div class="flex justify-end">
 			<Button
 				variant="secondary"
 				size="sm"
 				callback={handleSubmit}
 				isLoading={isSubmitting}
-				disabled={!text.trim() && images.length === 0}
+				disabled={!text.trim() && uploadItems.length === 0}
 			>
 				Post
 			</Button>
 		</div>
 	</div>
 </Modal>
+
+{#snippet Cross()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		class="h-4 w-4"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke="currentColor"
+		stroke-width="2"
+	>
+		<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+	</svg>
+{/snippet}
diff --git a/platforms/pictique/src/lib/fragments/MessageInput/MessageInput.svelte b/platforms/pictique/src/lib/fragments/MessageInput/MessageInput.svelte
index 0d62120e8..28a2deb9f 100644
--- a/platforms/pictique/src/lib/fragments/MessageInput/MessageInput.svelte
+++ b/platforms/pictique/src/lib/fragments/MessageInput/MessageInput.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Avatar, Input } from '$lib/ui';
+	import Button from '$lib/ui/Button/Button.svelte';
 	import { cn } from '$lib/utils';
 	import { SentIcon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
@@ -28,6 +29,19 @@
 	}: IMessageInputProps = $props();
 
 	const cBase = 'flex items-center justify-between gap-2';
+
+	let isSubmitting = $state(false);
+	let isDisabled = $derived(!value.trim() || isSubmitting);
+
+	const handleSubmit = async () => {
+		if (isDisabled) return;
+		isSubmitting = true;
+		try {
+			await handleSend();
+		} finally {
+			isSubmitting = false;
+		}
+	};
 </script>
 
 <div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
@@ -40,15 +54,18 @@
 		bind:value
 		{placeholder}
 		onkeydown={(e) => {
-			if (e.key === 'Enter') handleSend();
+			if (e.key === 'Enter' && !isDisabled) handleSubmit();
 		}}
 	/>
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
-		onclick={handleSend}
+	<Button
+		class="bg-grey 	flex aspect-square h-13 w-13 items-center justify-center rounded-full px-0 transition-opacity {isDisabled
+			? 'cursor-not-allowed opacity-50'
+			: 'cursor-pointer hover:opacity-80'}"
+		callback={handleSubmit}
+		disabled={isDisabled}
 	>
-		<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />
-	</div>
+		<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-700)" />
+	</Button>
 </div>
diff --git a/platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte b/platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte
index 0805f0199..c4aaf04c7 100644
--- a/platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte
+++ b/platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte
@@ -15,7 +15,7 @@
 	}
 	let {
 		activeTab = $bindable('home'),
-		profileSrc = 'images/user.png',
+		profileSrc = '/images/user.png',
 		handlePost,
 		...restProps
 	}: ISideBarProps = $props();
@@ -164,7 +164,7 @@
 				/>
 			</span>
 			<h3
-				class={`${activeTab === 'profile' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`}
+				class={`${activeTab === 'profile' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-1`}
 			>
 				Profile
 			</h3>
diff --git a/platforms/pictique/src/lib/fragments/UploadedPostView/UploadedPostView.svelte b/platforms/pictique/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
index 49e6b4f9a..cd268434f 100644
--- a/platforms/pictique/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
+++ b/platforms/pictique/src/lib/fragments/UploadedPostView/UploadedPostView.svelte
@@ -22,23 +22,18 @@
 
 <article
 	{...restProps}
-	class={cn(
-		[
-			'flex min-h-max max-w-screen flex-row items-center gap-4 overflow-x-auto pr-4 pl-0.5',
-			restProps.class
-		].join(' ')
-	)}
+	class={cn(['grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4', restProps.class].join(' '))}
 >
-	{#each images as image, i (i)}
-		<div class={cn(['group relative mt-3 mb-2 shrink-0'])}>
+	{#each images as image, i (image.url)}
+		<div class="group relative aspect-square">
 			<Cross
-				class="absolute top-0 right-0 hidden translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:block"
+				class="absolute top-2 right-2 z-10 cursor-pointer rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
 				onclick={() => callback(i)}
 			/>
 			<img
 				src={image.url}
 				alt={image.alt}
-				class={cn(['rounded-lg outline-[#DA4A11] group-hover:outline-2', width, height])}
+				class="h-full w-full rounded-lg object-cover outline-[#DA4A11] group-hover:outline-2"
 			/>
 		</div>
 	{/each}
diff --git a/platforms/pictique/src/lib/stores/posts.ts b/platforms/pictique/src/lib/stores/posts.ts
index dbbc7e806..05345aa69 100644
--- a/platforms/pictique/src/lib/stores/posts.ts
+++ b/platforms/pictique/src/lib/stores/posts.ts
@@ -72,10 +72,17 @@ export const createPost = async (text: string, images: string[]) => {
 	try {
 		isLoading.set(true);
 		error.set(null);
-		const response = await apiClient.post('/api/posts', {
+		
+		const payload = {
 			text,
 			images: images.map((img) => img)
-		});
+		};
+		
+		// Log payload size for debugging
+		const payloadSize = new Blob([JSON.stringify(payload)]).size;
+		console.log(`Payload size: ${(payloadSize / 1024).toFixed(2)} KB (${images.length} images)`);
+		
+		const response = await apiClient.post('/api/posts', payload);
 		resetFeed();
 		await fetchFeed(1, 10, false);
 		return response.data;
diff --git a/platforms/pictique/src/lib/types.ts b/platforms/pictique/src/lib/types.ts
index b48eaafdf..4ff512dcd 100644
--- a/platforms/pictique/src/lib/types.ts
+++ b/platforms/pictique/src/lib/types.ts
@@ -73,6 +73,7 @@ export type userProfile = {
 export type Image = {
 	url: string;
 	alt: string;
+	size?: number;
 };
 
 export type GroupInfo = {
diff --git a/platforms/pictique/src/lib/utils/fileValidation.ts b/platforms/pictique/src/lib/utils/fileValidation.ts
new file mode 100644
index 000000000..6dd51ae23
--- /dev/null
+++ b/platforms/pictique/src/lib/utils/fileValidation.ts
@@ -0,0 +1,37 @@
+export const formatSize = (bytes: number): string => {
+	if (bytes < 1024) return `${bytes}B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+};
+
+export interface FileValidationResult {
+	valid: boolean;
+	error?: string;
+}
+
+export const validateFileSize = (
+	file: File,
+	maxFileSize: number,
+	currentTotal?: number,
+	maxTotalSize?: number
+): FileValidationResult => {
+	// Validate individual file size
+	if (file.size > maxFileSize) {
+		return {
+			valid: false,
+			error: `Image must be smaller than ${formatSize(maxFileSize)}`
+		};
+	}
+
+	// Validate total size if applicable
+	if (currentTotal !== undefined && maxTotalSize !== undefined) {
+		if (currentTotal + file.size > maxTotalSize) {
+			return {
+				valid: false,
+				error: `Adding this image would exceed the total limit of ${formatSize(maxTotalSize)}`
+			};
+		}
+	}
+
+	return { valid: true };
+};
diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
index 76048abff..31d27cd0d 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -133,7 +133,7 @@
 		<Button
 			variant="secondary"
 			size="sm"
-			class="w-[max-content]"
+			class="w-max"
 			callback={() => {
 				goto(`/group/${id}/members`);
 			}}
@@ -197,7 +197,7 @@
 	class="absolute start-[50%] top-[50%] z-50 w-[90vw] translate-x-[-50%] translate-y-[-50%] rounded-3xl border border-gray-400 bg-white p-4 shadow-xl md:max-w-[30vw]"
 >
 	<div class="flex flex-col gap-6">
-		<div class="relative h-[96px] w-[96px] self-center">
+		<div class="relative h-24 w-24 self-center">
 			<img
 				src={groupImageDataUrl || '/images/avatar-placeholder.png'}
 				alt="Group Avatar"
diff --git a/platforms/pictique/src/routes/(protected)/messages/+page.svelte b/platforms/pictique/src/routes/(protected)/messages/+page.svelte
index 86d8142f8..8d3efa9dd 100644
--- a/platforms/pictique/src/routes/(protected)/messages/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/messages/+page.svelte
@@ -256,17 +256,16 @@
 
 <div class="flex">
 	<section class="flex-1 px-4 py-4">
-		<div class="mb-4 flex justify-end">
-			<Button
-				variant="secondary"
-				size="sm"
-				callback={() => {
-					openNewGroupModal = true;
-				}}
-			>
-				New Group
-			</Button>
-		</div>
+		<Button
+			variant="secondary"
+			size="sm"
+			callback={() => {
+				openNewGroupModal = true;
+			}}
+			class="mb-4 ml-auto w-min text-nowrap"
+		>
+			New Group
+		</Button>
 
 		{#if isLoading && messages.length === 0}
 			<div class="flex items-center justify-center py-8">
diff --git a/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte
index e508ad4e6..92ab7630f 100644
--- a/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte
@@ -13,6 +13,7 @@
 	let messages: Record<string, unknown>[] = $state([]);
 	let messageValue = $state('');
 	let messagesContainer: HTMLDivElement;
+	let historyLoaded = $state(false);
 
 	// Function to remove duplicate messages by ID
 	function removeDuplicateMessages(
@@ -53,6 +54,7 @@
 
 		eventSource.onopen = () => {
 			console.log('Successfully connected.');
+			historyLoaded = true;
 		};
 
 		eventSource.onmessage = (e) => {
@@ -192,6 +194,9 @@
 
 <section class="chat relative px-0">
 	<div class="h-[calc(100vh-220px)] overflow-auto" bind:this={messagesContainer}>
+		{#if historyLoaded && messages.length === 0}
+			<p class="m-4 text-center text-gray-500">No messages yet. Start the conversation!</p>
+		{/if}
 		{#each removeDuplicateMessages(messages) as msg (msg.id)}
 			<ChatMessage
 				isOwn={msg.isOwn as boolean}
diff --git a/platforms/pictique/src/routes/(protected)/post/+page.svelte b/platforms/pictique/src/routes/(protected)/post/+page.svelte
index 009d96650..56cf42ec5 100644
--- a/platforms/pictique/src/routes/(protected)/post/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/post/+page.svelte
@@ -5,13 +5,58 @@
 	import { createPost } from '$lib/stores/posts';
 	import { Button, Textarea } from '$lib/ui';
 	import { revokeImageUrls } from '$lib/utils';
+	import { formatSize, validateFileSize } from '$lib/utils/fileValidation';
+
+	const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB total
+	const MAX_FILE_SIZE = 1 * 1024 * 1024; // 1MB per individual image
+
 	let caption: string = $state('');
+	let error: string = $state('');
+
 	$effect(() => {
 		if (!uploadedImages.value || uploadedImages.value.length === 0) {
 			window.history.back();
 		}
 	});
 
+	const handleImageUpload = (event: Event) => {
+		const input = event.target as HTMLInputElement;
+		if (!input.files?.length) return;
+
+		const file = input.files[0];
+
+		// Calculate current total size
+		const currentTotal = (uploadedImages.value || []).reduce(
+			(sum, img) => sum + (img.size || 0),
+			0
+		);
+
+		const validation = validateFileSize(file, MAX_FILE_SIZE, currentTotal, MAX_TOTAL_SIZE);
+		if (!validation.valid) {
+			error = validation.error || 'Invalid file';
+			input.value = '';
+			return;
+		}
+
+		error = '';
+
+		const reader = new FileReader();
+		reader.onload = (e) => {
+			const result = e.target?.result;
+			if (typeof result === 'string' && uploadedImages.value) {
+				uploadedImages.value = [
+					...uploadedImages.value,
+					{ url: result, alt: file.name, size: file.size }
+				];
+			}
+		};
+		reader.onerror = () => {
+			error = 'Error reading image file';
+		};
+		reader.readAsDataURL(file);
+		input.value = '';
+	};
+
 	const postSubmissionHandler = async () => {
 		if (!uploadedImages.value) return;
 		const images = uploadedImages.value.map((img) => img.url);
@@ -24,18 +69,68 @@
 </script>
 
 <section class="flex h-fit w-full flex-col justify-stretch gap-3">
-	<UploadedPostView
-		images={uploadedImages.value ?? []}
-		width="w-auto"
-		height="h-40"
-		callback={(i: number) => {
-			if (uploadedImages.value)
-				uploadedImages.value = uploadedImages.value.filter((img, index) => {
-					revokeImageUrls([img]);
-					return index !== i;
-				});
-		}}
-	/>
+	{#if error}
+		<div class="rounded-md bg-red-500 px-4 py-2 text-sm text-white">
+			{error}
+		</div>
+	{/if}
+
+	<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
+		{#each uploadedImages.value ?? [] as image, i (image.url)}
+			<div class="group relative aspect-square">
+				<button
+					type="button"
+					class="absolute top-2 right-2 z-10 rounded-full bg-black/50 p-1 text-white hover:bg-black/70"
+					onclick={() => {
+						if (uploadedImages.value)
+							uploadedImages.value = uploadedImages.value.filter((img, index) => {
+								if (index === i) revokeImageUrls([img]);
+								return index !== i;
+							});
+					}}
+					aria-label="Remove image"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+				<img
+					src={image.url}
+					alt={image.alt}
+					class="h-full w-full rounded-lg object-cover"
+				/>
+			</div>
+		{/each}
+
+		<!-- Add Photo Frame -->
+		<label
+			class="flex aspect-square cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 transition-colors hover:border-gray-400 hover:bg-gray-100"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-8 w-8 text-gray-400"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+			</svg>
+			<span class="text-sm font-medium text-gray-600">Add Photo</span>
+			<input type="file" accept="image/*" class="hidden" onchange={handleImageUpload} />
+		</label>
+	</div>
 
 	<label for="caption">
 		<span class="mb-2 block font-semibold">Add a caption</span>
diff --git a/platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte b/platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte
index c761f743a..80523617a 100644
--- a/platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte
@@ -2,6 +2,7 @@
 	import { InputFile } from '$lib/fragments';
 	import { Button, Input, Label, Textarea } from '$lib/ui';
 	import { apiClient } from '$lib/utils/axios';
+	import { validateFileSize } from '$lib/utils/fileValidation';
 	import { onMount } from 'svelte';
 
 	let handle = $state();
@@ -9,10 +10,23 @@
 	let profileImageDataUrl = $state('');
 	let files = $state<FileList | undefined>();
 	let saved = $state(false);
+	let isSaving = $state(false);
+	let error = $state('');
+
+	const MAX_FILE_SIZE = 0.5 * 1024 * 1024; // 500KB
 
 	function handleFileChange() {
 		if (files?.[0]) {
 			const file = files[0];
+
+			const validation = validateFileSize(file, MAX_FILE_SIZE);
+			if (!validation.valid) {
+				error = validation.error || 'Invalid file';
+				files = undefined;
+				return;
+			}
+
+			error = '';
 			const reader = new FileReader();
 
 			reader.onload = (e) => {
@@ -26,7 +40,10 @@
 	}
 
 	async function saveProfileData() {
+		if (isSaving) return;
+
 		try {
+			isSaving = true;
 			await apiClient.patch('/api/users/', {
 				name,
 				avatar: profileImageDataUrl
@@ -36,7 +53,9 @@
 				saved = false;
 			}, 3_000);
 		} catch (err) {
-			console.log(err instanceof Error ? err.message : 'please check the info again');
+			error = err instanceof Error ? err.message : 'Failed to save changes';
+		} finally {
+			isSaving = false;
 		}
 	}
 
@@ -56,29 +75,46 @@
 
 <div class="flex flex-col gap-6">
 	{#if saved}
-		<div class=" w-full rounded-md bg-[#33cc33] px-10 py-2 text-center text-white">
+		<div class="w-full rounded-md bg-[#33cc33] px-10 py-2 text-center text-white">
 			Changes Saved!
 		</div>
 	{/if}
+	{#if error}
+		<div class="w-full rounded-md bg-red-500 px-10 py-2 text-center text-white">
+			{error}
+		</div>
+	{/if}
 	<div>
 		<Label>Change your profile picture</Label>
-		<InputFile
-			bind:files
-			accept="image/*"
-			label="Upload Profile Picture"
-			cancelLabel="Remove"
-			oncancel={() => {
-				profileImageDataUrl = '';
-				files = undefined;
-			}}
-		/>
-		{#if profileImageDataUrl}
-			<img
-				src={profileImageDataUrl}
-				alt="Profile preview"
-				class="mt-2 h-32 w-32 rounded-full object-cover"
-			/>
-		{/if}
+		<p class="mb-2 text-sm text-gray-600">Maximum file size: 500KB</p>
+
+		<div class="flex items-center gap-4">
+			{#if profileImageDataUrl}
+				<img
+					src={profileImageDataUrl}
+					alt="Profile preview"
+					class="h-24 w-24 rounded-full border-2 border-gray-200 object-cover"
+				/>
+			{:else}
+				<div class="flex h-24 w-24 items-center justify-center rounded-full bg-gray-200">
+					<span class="text-sm text-gray-400">No image</span>
+				</div>
+			{/if}
+
+			<div class="flex-1">
+				<InputFile
+					bind:files
+					accept="image/*"
+					label="Upload Profile Picture"
+					cancelLabel="Remove"
+					oncancel={() => {
+						profileImageDataUrl = '';
+						files = undefined;
+						error = '';
+					}}
+				/>
+			</div>
+		</div>
 	</div>
 
 	<div>
@@ -97,4 +133,12 @@
 	</div>
 </div>
 <hr class="text-grey" />
-<Button size="sm" variant="secondary" callback={saveProfileData}>Save Changes</Button>
+<Button
+	size="sm"
+	variant="secondary"
+	callback={saveProfileData}
+	isLoading={isSaving}
+	disabled={isSaving}
+>
+	{isSaving ? 'Saving...' : 'Save Changes'}
+</Button>