diff --git a/platforms/pictique/src/lib/fragments/Group/Group.svelte b/platforms/pictique/src/lib/fragments/Group/Group.svelte
new file mode 100644
index 00000000..d4967445
--- /dev/null
+++ b/platforms/pictique/src/lib/fragments/Group/Group.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Avatar from '../../ui/Avatar/Avatar.svelte';
+	import { cn } from '../../utils';
+
+	interface IGroupProps extends HTMLAttributes<HTMLButtonElement> {
+		avatar: string;
+		name: string;
+		unread?: boolean;
+		callback: () => void;
+	}
+
+	const { avatar, name, unread = false, callback, ...restProps }: IGroupProps = $props();
+</script>
+
+<button
+	{...restProps}
+	class={cn([
+		'relative flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-4',
+		restProps.class
+	])}
+	onclick={callback}
+>
+	<Avatar src={avatar} alt="Group Avatar" size="md" />
+	<span class="flex w-full items-center justify-between">
+		<h2 class="text-left font-medium">{name}</h2>
+		{#if unread}
+			<span class="h-2 w-2 rounded-full bg-blue-500"></span>
+		{/if}
+	</span>
+</button>
+
+<!--
+@component
+@name GroupItem
+@description A group item component that displays a group avatar and name, with an optional unread indicator.
+@props
+    - avatar: string - The URL of the group avatar image.
+    - name: string - The group name.
+    - unread: boolean - Optional. Indicates if there are unread messages. Defaults to false.
+    - callback: () => void - Function to call when the group is clicked.
+@usage
+    <script>
+        import GroupItem from '$lib/ui/GroupItem.svelte';
+    </script>
+
+    <GroupItem
+        avatar="https://example.com/group-avatar.jpg"
+        name="Study Buddies"
+        unread={true}
+        callback={() => console.log('Group clicked')}
+    />
+-->
diff --git a/platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte b/platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte
index 05617d8b..1461331e 100644
--- a/platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte
+++ b/platforms/pictique/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte
@@ -38,7 +38,7 @@
 			<img
 				width="24px"
 				height="24px"
-				class="flex aspect-square size-10 items-center justify-center rounded-full md:size-12 object-cover"
+				class="flex aspect-square size-10 items-center justify-center rounded-full object-cover md:size-12"
 				src={profileSrc}
 				alt=""
 			/>
diff --git a/platforms/pictique/src/lib/fragments/index.ts b/platforms/pictique/src/lib/fragments/index.ts
index abe4ed0e..ad355640 100644
--- a/platforms/pictique/src/lib/fragments/index.ts
+++ b/platforms/pictique/src/lib/fragments/index.ts
@@ -17,3 +17,4 @@ export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
 export { default as UserRequest } from './UserRequest/UserRequest.svelte';
 export { default as UploadedPostView } from './UploadedPostView/UploadedPostView.svelte';
+export { default as Group } from './Group/Group.svelte';
diff --git a/platforms/pictique/src/lib/store/store.svelte.ts b/platforms/pictique/src/lib/store/store.svelte.ts
index 1a090e49..f2c1e026 100644
--- a/platforms/pictique/src/lib/store/store.svelte.ts
+++ b/platforms/pictique/src/lib/store/store.svelte.ts
@@ -23,4 +23,3 @@ export const uploadedImages: { value: Image[] | null } = $state({
 export const audience: { value: string } = $state({
 	value: 'Everyone'
 });
-
diff --git a/platforms/pictique/src/lib/stores/posts.ts b/platforms/pictique/src/lib/stores/posts.ts
index bb653d14..a9fbfc71 100644
--- a/platforms/pictique/src/lib/stores/posts.ts
+++ b/platforms/pictique/src/lib/stores/posts.ts
@@ -3,28 +3,28 @@ import { apiClient } from '$lib/utils/axios';
 import { goto } from '$app/navigation';
 
 export interface Post {
-    id: string;
-    text: string;
-    images: string[];
-    author: {
-        id: string;
-        handle: string;
-        name: string;
-        avatarUrl: string;
-    };
-    createdAt: string;
-    likedBy: string[];
-    comments: {
-        id: string;
-        text: string;
-        author: {
-            id: string;
-            handle: string;
-            name: string;
-            avatarUrl: string;
-        };
-        createdAt: string;
-    }[];
+	id: string;
+	text: string;
+	images: string[];
+	author: {
+		id: string;
+		handle: string;
+		name: string;
+		avatarUrl: string;
+	};
+	createdAt: string;
+	likedBy: string[];
+	comments: {
+		id: string;
+		text: string;
+		author: {
+			id: string;
+			handle: string;
+			name: string;
+			avatarUrl: string;
+		};
+		createdAt: string;
+	}[];
 }
 
 export const posts = writable<Post[]>([]);
@@ -36,41 +36,41 @@ export const openCreatePostModal = () => isCreatePostModalOpen.set(true);
 export const closeCreatePostModal = () => isCreatePostModalOpen.set(false);
 
 export const fetchFeed = async (page = 1, limit = 10_000) => {
-    try {
-        isLoading.set(true);
-        error.set(null);
-        const response = await apiClient.get(`/api/posts/feed?page=${page}&limit=${limit}`);
-        posts.set(response.data);
-    } catch (err) {
-        error.set(err instanceof Error ? err.message : 'Failed to fetch feed');
-    } finally {
-        isLoading.set(false);
-    }
+	try {
+		isLoading.set(true);
+		error.set(null);
+		const response = await apiClient.get(`/api/posts/feed?page=${page}&limit=${limit}`);
+		posts.set(response.data);
+	} catch (err) {
+		error.set(err instanceof Error ? err.message : 'Failed to fetch feed');
+	} finally {
+		isLoading.set(false);
+	}
 };
 
 export const createPost = async (text: string, images: string[]) => {
-    try {
-        isLoading.set(true);
-        error.set(null);
-        const response = await apiClient.post('/api/posts', {
-            text,
-            images: images.map((img) => img)
-        });
-        await fetchFeed(1);
-        return response.data;
-    } catch (err) {
-        error.set(err instanceof Error ? err.message : 'Failed to create post');
-        throw err;
-    } finally {
-        isLoading.set(false);
-    }
+	try {
+		isLoading.set(true);
+		error.set(null);
+		const response = await apiClient.post('/api/posts', {
+			text,
+			images: images.map((img) => img)
+		});
+		await fetchFeed(1);
+		return response.data;
+	} catch (err) {
+		error.set(err instanceof Error ? err.message : 'Failed to create post');
+		throw err;
+	} finally {
+		isLoading.set(false);
+	}
 };
 
 export const toggleLike = async (postId: string) => {
-    try {
-        const response = await apiClient.post(`/api/posts/${postId}/like`);
-        return response.data;
-    } catch (err) {
-        throw new Error(err instanceof Error ? err.message : 'Failed to toggle like');
-    }
+	try {
+		const response = await apiClient.post(`/api/posts/${postId}/like`);
+		return response.data;
+	} catch (err) {
+		throw new Error(err instanceof Error ? err.message : 'Failed to toggle like');
+	}
 };
diff --git a/platforms/pictique/src/lib/types.ts b/platforms/pictique/src/lib/types.ts
index b21b4334..153522a1 100644
--- a/platforms/pictique/src/lib/types.ts
+++ b/platforms/pictique/src/lib/types.ts
@@ -1,49 +1,55 @@
-import type { SVGAttributes } from "svelte/elements";
+import type { SVGAttributes } from 'svelte/elements';
 
 export interface ISvgProps extends SVGAttributes<SVGElement> {
-    size?: number | string;
-    color?: string;
+	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[];
+	commentId: string;
+	name: string;
+	userImgSrc: string;
+	comment: string;
+	isUpVoted: boolean;
+	isDownVoted: boolean;
+	upVotes: number;
+	time: string;
+	replies: CommentType[];
 };
 
 export type PostData = {
 	createdAt: string | number | Date;
-    id: string;
-    avatar: string;
-    userId: string;
-    username: string;
-    imgUris: string[];
-    caption: string;
-    time: string;
-    count: {
-        likes: number;
-        comments: number;
-    };
+	id: string;
+	avatar: string;
+	userId: string;
+	username: string;
+	imgUris: string[];
+	caption: string;
+	time: string;
+	count: {
+		likes: number;
+		comments: number;
+	};
 };
 
 export type userProfile = {
-    userId: string;
-    username: string;
-    avatarUrl: string;
-    totalPosts: number;
-    followers: number;
-    following: number;
-    userBio: string;
-    posts: PostData[];
+	userId: string;
+	username: string;
+	avatarUrl: string;
+	totalPosts: number;
+	followers: number;
+	following: number;
+	userBio: string;
+	posts: PostData[];
 };
 
 export type Image = {
-    url: string;
-    alt: string;
+	url: string;
+	alt: string;
 };
+
+export type GroupInfo = {
+	id: string;
+	name: string;
+	avatar: string;
+};
\ No newline at end of file
diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
new file mode 100644
index 00000000..cabebf45
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -0,0 +1,213 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { ChatMessage, MessageInput } from '$lib/fragments';
+	import { Avatar, Button, Input, Label } from '$lib/ui';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import Settings from '$lib/icons/Settings.svelte';
+	import { clickOutside } from '$lib/utils';
+	import { Pen01FreeIcons } from '@hugeicons/core-free-icons';
+	import {HugeiconsIcon} from "@hugeicons/svelte"
+
+	let messagesContainer: HTMLDivElement;
+	let messageValue = $state('');
+	let userId = 'user-1';
+	let id = page.params.id;
+
+	let group = $state({
+		id: 'group-123',
+		name: 'Design Team',
+		avatar: 'https://i.pravatar.cc/150?img=15',
+		description: 'Discuss all design-related tasks and updates here.',
+		members: [
+			{ id: 'user-1', name: 'Alice', avatar: 'https://i.pravatar.cc/150?img=1', role: 'owner' },
+			{ id: 'user-2', name: 'Bob', avatar: 'https://i.pravatar.cc/150?img=2', role: 'admin' },
+			{ id: 'user-3', name: 'Charlie', avatar: 'https://i.pravatar.cc/150?img=3', role: 'member' }
+		]
+	});
+
+	let messages = $state([
+		{
+			id: 'msg-1',
+			isOwn: false,
+			userImgSrc: 'https://i.pravatar.cc/150?img=2',
+			time: '2 minutes ago',
+			message: 'Hey everyone, can we finalize the color palette today?'
+		},
+		{
+			id: 'msg-2',
+			isOwn: true,
+			userImgSrc: 'https://i.pravatar.cc/150?img=1',
+			time: '1 minute ago',
+			message: 'Yes, I just pushed a new draft to Figma.'
+		}
+	]);
+
+	function scrollToBottom() {
+		if (messagesContainer) {
+			messagesContainer.scrollTop = messagesContainer.scrollHeight;
+		}
+	}
+
+	onMount(() => {
+		setTimeout(scrollToBottom, 0);
+	});
+
+	function handleSend() {
+		if (!messageValue.trim()) return;
+		messages = [
+			...messages,
+			{
+				id: `msg-${Date.now()}`,
+				isOwn: true,
+				userImgSrc: group.members.find((m) => m.id === userId)?.avatar || '',
+				time: 'just now',
+				message: messageValue
+			}
+		];
+		messageValue = '';
+		setTimeout(scrollToBottom, 0);
+	}
+
+	let openEditDialog = $state(false);
+	let groupName = $state(group.name);
+	let groupDescription = $state(group.description);
+	let groupImageDataUrl = $state(group.avatar);
+	let groupImageFiles = $state<FileList | undefined>();
+
+	$effect(()=> {
+		if (groupImageFiles?.[0]) {
+			const file = groupImageFiles[0];
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				if (e.target?.result) {
+					groupImageDataUrl = e.target.result as string;
+				}
+			};
+			reader.readAsDataURL(file);
+		}
+	}) 
+		
+	function saveGroupInfo() {
+		group.name = groupName;
+		group.description = groupDescription;
+		group.avatar = groupImageDataUrl;
+		openEditDialog = false;
+	}
+
+	const currentUser = group.members.find((m) => m.id === userId);
+	const canEdit = currentUser?.role === 'admin' || currentUser?.role === 'owner';
+</script>
+
+<section class="flex flex-col md:flex-row items-center justify-between gap-4 px-2 md:px-4 py-3 border-b border-gray-200">
+	<div class="flex items-center gap-4">
+		<Avatar src={group.avatar} />
+		<div>
+			<h1 class="text-lg font-semibold">{group.name}</h1>
+			<p class="text-sm text-gray-600">{group.description}</p>
+		</div>
+	</div>
+	<div class="flex items-center gap-2">
+		<Button
+			variant="secondary"
+			size="sm"
+			class="w-[max-content]"
+			callback={() => {
+				goto(`/group/${id}/members`);
+			}}
+		>
+			View Members
+		</Button>
+		<button
+			onclick={() => (openEditDialog = true)}
+			class="border border-brand-burnt-orange-900 rounded-full p-2"
+		>
+			<Settings size="24px" color="var(--color-brand-burnt-orange)" />
+		</button>
+	</div>
+</section>
+
+<section class="chat relative px-0">
+	<div class="h-[calc(100vh-300px)] mt-4 overflow-auto" bind:this={messagesContainer}>
+		{#each messages as msg (msg.id)}
+			<ChatMessage
+				isOwn={msg.isOwn}
+				userImgSrc={msg.userImgSrc}
+				time={msg.time}
+				message={msg.message}
+			/>
+		{/each}
+	</div>
+
+	<MessageInput
+		class="sticky start-0 bottom-[-15px] w-full"
+		variant="dm"
+		src={group.avatar}
+		bind:value={messageValue}
+		{handleSend}
+	/>
+</section>
+
+<dialog
+	open={openEditDialog}
+	use:clickOutside={() => (openEditDialog = false)}
+	onclose={() => (openEditDialog = false)}
+	class="w-[90vw] md:max-w-[30vw] z-50 absolute start-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-4 border border-gray-400 rounded-3xl bg-white shadow-xl"
+>
+	<div class="flex flex-col gap-6">
+		<div class="relative w-[96px] h-[96px] self-center">
+			<img
+				src={groupImageDataUrl || '/images/avatar-placeholder.png'}
+				alt="Group Avatar"
+				class="w-full h-full object-cover rounded-full border border-gray-300"
+			/>
+			{#if canEdit}
+				<input
+					type="file"
+					accept="image/*"
+					class="hidden"
+					id="group-avatar-input"
+					onchange={(e) => {
+						const files = (e.target as HTMLInputElement).files;
+						if (files && files[0]) {
+							groupImageFiles = files;
+						}
+					}}
+				/>
+				<label for="group-avatar-input" class="absolute bottom-0 right-0 bg-brand-burnt-orange  border border-brand-burnt-orange rounded-full p-1 shadow cursor-pointer">
+					<HugeiconsIcon icon={Pen01FreeIcons} color="white"/>
+				</label>
+			{/if}
+		</div>
+
+		<div>
+			<Label>Group Name</Label>
+			{#if canEdit}
+				<Input type="text" placeholder="Edit group name" bind:value={groupName} />
+			{:else}
+				<p class="text-gray-700">{group.name}</p>
+			{/if}
+		</div>
+
+		<div>
+			<Label>Description</Label>
+			{#if canEdit}
+				<!-- svelte-ignore element_invalid_self_closing_tag -->
+				<textarea rows="2"
+				maxlength="260" placeholder="Edit group description" class="w-full bg-grey 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" bind:value={groupDescription} />
+			{:else}
+				<p class="text-gray-700">{group.description}</p>
+			{/if}
+		</div>
+
+		<hr class="text-grey" />
+
+		<div class="flex items-center gap-2">
+			<Button size="sm" variant="primary" callback={() => {(openEditDialog = false)}}>Cancel</Button>
+			{#if canEdit}
+				<Button size="sm" variant="secondary" callback={saveGroupInfo}>Save Changes</Button>
+			{/if}
+		</div>
+	</div>
+</dialog>
+
diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte
new file mode 100644
index 00000000..f351c05f
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { Avatar, Button } from '$lib/ui';
+	import { clickOutside } from '$lib/utils';
+
+	let groupId = page.params.id;
+
+	let userId = 'user-1'; 
+
+	let group = $state({
+		id: groupId,
+		name: 'Design Team',
+		avatar: 'https://i.pravatar.cc/150?img=15',
+		description: 'Discuss all design-related tasks and updates here.',
+		members: [
+			{ id: 'user-1', name: 'Alice', avatar: 'https://i.pravatar.cc/150?img=1', role: 'owner' },
+			{ id: 'user-2', name: 'Bob', avatar: 'https://i.pravatar.cc/150?img=2', role: 'admin' },
+			{ id: 'user-3', name: 'Charlie', avatar: 'https://i.pravatar.cc/150?img=3', role: 'member' }
+		]
+	});
+
+	let openMenuId = $state<string | null>(null);
+
+	function currentUserRole() {
+		return group.members.find((m) => m.id === userId)?.role;
+	}
+
+	function canManage(member: { id?: string; name?: string; avatar?: string; role: any; }) {
+		const current = currentUserRole();
+		if (member.role === 'owner') return false;
+		if (current === 'owner') return true;
+		if (current === 'admin' && member.role === 'member') return true;
+		return false;
+	}
+
+	function promoteToAdmin(memberId: string) {
+		const m = group.members.find((m) => m.id === memberId);
+		if (m && m.role === 'member') m.role = 'admin';
+		openMenuId = null;
+	}
+
+	function removeMember(memberId: string) {
+		group.members = group.members.filter((m) => m.id !== memberId || m.role === 'owner');
+		openMenuId = null;
+	}
+
+	function addMember() {
+		const newId = `user-${Date.now()}`;
+		group.members = [
+			...group.members,
+			{
+				id: newId,
+				name: `New Member ${group.members.length + 1}`,
+				avatar: `https://i.pravatar.cc/150?u=${newId}`,
+				role: 'member'
+			}
+		];
+	}
+</script>
+
+<section class="mx-auto w-full h-[80vh] flex flex-col justify-between">
+	<div>
+	<div class="flex items-center gap-4 mb-6">
+		<Avatar src={group.avatar} />
+		<div>
+			<h1 class="text-xl font-semibold">{group.name}</h1>
+			<p class="text-sm text-gray-600">{group.description}</p>
+		</div>
+	</div>
+
+	<div class="space-y-6">
+		{#each group.members as member (member.id)}
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-3">
+					<Avatar src={member.avatar} size="sm" />
+					<div>
+						<p class="text-sm font-medium">{member.name}</p>
+						{#if member.role !== 'member'}
+							<p class="text-xs text-gray-500">{member.role}</p>
+						{/if}
+					</div>
+				</div>
+
+				{#if canManage(member)}
+					<div class="relative" use:clickOutside={() => (openMenuId = null)}>
+						<button
+							onclick={() => (openMenuId = openMenuId === member.id ? null : member.id)}
+						>
+							⋮
+						</button>
+
+						{#if openMenuId === member.id}
+							<div class="absolute right-0 mt-2 w-40 rounded-md bg-white shadow-lg border z-10">
+								<!-- svelte-ignore a11y_click_events_have_key_events -->
+								<ul class="text-sm">
+									{#if currentUserRole() === 'owner' && member.role === 'member'}
+										<!-- svelte-ignore a11y_click_events_have_key_events -->
+										<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+										<li
+											class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+											onclick={() => promoteToAdmin(member.id)}
+										>
+											Make admin
+										</li>
+									{/if}
+									<!-- svelte-ignore a11y_click_events_have_key_events -->
+									<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+									<li
+										class="px-4 py-2 hover:bg-red-50 text-red-600 cursor-pointer"
+										onclick={() => removeMember(member.id)}
+									>
+										Remove member
+									</li>
+								</ul>
+							</div>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+	</div>
+
+	<div class="flex justify-center">
+		<Button size="sm" variant="secondary" class="mt-6" callback={addMember}>
+			Add Member
+		</Button>
+	</div>
+</section>
diff --git a/platforms/pictique/src/routes/(protected)/messages/+page.svelte b/platforms/pictique/src/routes/(protected)/messages/+page.svelte
index 892c4269..915f8336 100644
--- a/platforms/pictique/src/routes/(protected)/messages/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/messages/+page.svelte
@@ -1,15 +1,35 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { Message } from '$lib/fragments';
 	import { onMount } from 'svelte';
-	import { apiClient } from '$lib/utils/axios';
+	import { Message } from '$lib/fragments';
+	import Group from '$lib/fragments/Group/Group.svelte';
+	import { Button, Avatar, Input } from '$lib/ui';
+	import { clickOutside } from '$lib/utils';
 	import { heading } from '../../store';
+	import { apiClient } from '$lib/utils/axios';
+
+	import {
+		searchUsers,
+		searchResults,
+		isSearching,
+		searchError
+	} from '$lib/stores/users';
+	import type { GroupInfo } from '$lib/types';
 
 	let messages = $state([]);
+	let groups: GroupInfo[] = $state([]);
+	let allMembers = $state([]);
+	let selectedMembers = $state<string[]>([]);
+	let currentUserId = '';
+	let openNewChatModal = $state(false);
+	let searchValue = $state('');
+	let debounceTimer: NodeJS.Timeout;
 
-	onMount(async () => {
+	async function loadMessages() {
 		const { data } = await apiClient.get('/api/chats');
 		const { data: userData } = await apiClient.get('/api/users');
+		currentUserId = userData.id;
+
 		messages = data.chats.map((c) => {
 			const members = c.participants.filter((u) => u.id !== userData.id);
 			const memberNames = members.map((m) => m.name ?? m.handle ?? m.ename);
@@ -22,14 +42,80 @@
 				text: c.latestMessage?.text ?? 'No message yet'
 			};
 		});
+	}
+
+	onMount(async () => {
+		await loadMessages();
+
+		const memberRes = await apiClient.get('/api/members');
+		allMembers = memberRes.data;
 	});
+
+	function toggleMemberSelection(id: string) {
+		if (selectedMembers.includes(id)) {
+			selectedMembers = selectedMembers.filter((m) => m !== id);
+		} else {
+			selectedMembers = [...selectedMembers, id];
+		}
+	}
+
+	function handleSearch(value: string) {
+		searchValue = value;
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			searchUsers(value);
+		}, 300);
+	}
+
+	async function createChat() {
+		if (selectedMembers.length === 0) return;
+
+		try {
+			if (selectedMembers.length === 1) {
+				await apiClient.post(`/api/chats/`, {
+					name:
+						allMembers.find((m) => m.id === selectedMembers[0])?.name ??
+						'New Chat',
+					participantIds: [selectedMembers[0]]
+				});
+				await loadMessages(); // 🛠️ Refresh to include the new direct message
+			} else {
+				const groupMembers = allMembers.filter((m) =>
+					selectedMembers.includes(m.id)
+				);
+				const groupName = groupMembers.map((m) => m.name ?? m.handle ?? m.ename).join(', ');
+				groups = [
+					...groups,
+					{
+						id: Math.random().toString(36).slice(2),
+						name: groupName,
+						avatar: '/images/group.png'
+					}
+				];
+			}
+		} catch (err) {
+			console.error('Failed to create chat:', err);
+		} finally {
+			openNewChatModal = false;
+			selectedMembers = [];
+			searchValue = '';
+		}
+	}
 </script>
 
-<section>
-	{#if messages && messages.length > 0}
+
+<section class="px-4 py-4">
+	<div class="flex justify-end mb-4">
+		<Button variant="secondary" size="sm" callback={() => {(openNewChatModal = true)}}>
+			New Chat
+		</Button>
+	</div>
+
+	{#if messages.length > 0}
+		<h3 class="text-md font-semibold text-gray-700 mb-2">Messages</h3>
 		{#each messages as message}
 			<Message
-				class="mb-6"
+				class="mb-2"
 				avatar={message.avatar}
 				username={message.username}
 				text={message.text}
@@ -40,10 +126,65 @@
 				}}
 			/>
 		{/each}
-	{:else}
-		<div class="w-full px-5 py-5 text-center">
-			You don't have any messages yet, please start a Direct Message with Someone by searching
-			their name
+	{/if}
+
+	{#if groups.length > 0}
+		<h3 class="text-md font-semibold text-gray-700 mb-2 mt-6">Groups</h3>
+		{#each groups as group}
+			<Group
+				name={group.name || "New Group"}
+				avatar={group.avatar}
+				unread={true}
+				callback={() => goto(`/group/${group.id}`)}
+			/>
+		{/each}
+	{:else if messages.length === 0}
+		<div class="w-full px-5 py-5 text-center text-sm text-gray-500">
+			You don't have any messages yet. Start a Direct Message by searching a name.
 		</div>
 	{/if}
+
+	<dialog
+		open={openNewChatModal}
+		use:clickOutside={() => (openNewChatModal = false)}
+		onclose={() => (openNewChatModal = false)}
+		class="w-[90vw] md:max-w-[40vw] z-50 absolute start-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-4 border border-gray-400 rounded-3xl bg-white shadow-xl"
+	>
+		<div class="bg-white rounded-xl w-full p-6 space-y-6 relative">
+			<h2 class="text-xl font-semibold">Start a New Chat</h2>
+
+			<Input
+				type="text"
+				bind:value={searchValue}
+				placeholder="Search users..."
+				oninput={(e: Event) => handleSearch((e.target as HTMLInputElement).value)}
+			/>
+
+			{#if $isSearching}
+				<div class="text-gray-500 mt-2">Searching...</div>
+			{:else if $searchError}
+				<div class="text-red-500 mt-2">{$searchError}</div>
+			{/if}
+
+			<div class="max-h-[250px] overflow-y-auto space-y-3">
+				{#each $searchResults.filter(m => m.id !== currentUserId) as member}
+					<label class="flex items-center space-x-3 cursor-pointer">
+						<input
+							type="checkbox"
+							checked={selectedMembers.includes(member.id)}
+							onchange={() => toggleMemberSelection(member.id)}
+							class="accent-brand focus:ring"
+						/>
+						<Avatar src={member.avatarUrl} size="sm" />
+						<span class="text-sm">{member.name ?? member.handle ?? member.ename}</span>
+					</label>
+				{/each}
+			</div>
+
+			<div class="flex justify-end gap-2 pt-4">
+				<Button size="sm" variant="secondary" callback={() => {(openNewChatModal = false)}}>Cancel</Button>
+				<Button size="sm" variant="primary" callback={createChat}>Start Chat</Button>
+			</div>
+		</div>
+	</dialog>
 </section>