diff --git a/src/lib/components/ChannelButton.svelte b/src/lib/components/ChannelButton.svelte
index 76a8348..f69f3d9 100644
--- a/src/lib/components/ChannelButton.svelte
+++ b/src/lib/components/ChannelButton.svelte
@@ -20,20 +20,23 @@
 		onclick?: () => void;
 	} = $props();
 
-	let lastMessage = $derived(
-		new CoState(Message, channel.mainThread?.timeline?.at(-1), {
-			resolve: {
-				content: true,
-				images: true,
-				reactions: true
-			}
-		})
-	);
+	const latestEntriesByAccount = $derived(Object.values(channel.mainThread?.timeline?.perAccount ?? {}).sort(
+		(a, b) => a.madeAt.getTime() - b.madeAt.getTime()
+	));
+	// let lastMessage = $derived(
+	// 	new CoState(Message, channel.mainThread?.timeline?.at(-1), {
+	// 		resolve: {
+	// 			content: true,
+	// 			images: true,
+	// 			reactions: true
+	// 		}
+	// 	})
+	// );
 
 	let isNew = $derived.by(() => {
-		if (!lastReadDate) return channel.mainThread?.timeline?.length !== 0;
-		if (!channel.mainThread?.timeline) return false;
-		let date = lastMessage?.current?.createdAt;
+		if (!lastReadDate) return latestEntriesByAccount.length !== 0;
+		if (latestEntriesByAccount.length === 0) return false;
+		let date = latestEntriesByAccount.at(-1)?.madeAt;
 		if (!date) return false;
 
 		return new Date(lastReadDate) < date;
diff --git a/src/lib/components/ChatInput.svelte b/src/lib/components/ChatInput.svelte
index 3ff7b7c..8b7c0fc 100644
--- a/src/lib/components/ChatInput.svelte
+++ b/src/lib/components/ChatInput.svelte
@@ -93,7 +93,7 @@
 			<div class="flex gap-2 px-2 pt-2 [&_img]:size-24 [&_img]:rounded-2xl">
 				{#each images as image}
 					<div class="relative">
-						<Image {image} class="size-24 rounded-2xl object-cover" />
+						<Image image={image.id} class="size-24 rounded-2xl object-cover" />
 						<Button
 							size="iconSm"
 							variant="ghost"
diff --git a/src/lib/components/ChatMessageThread.svelte b/src/lib/components/ChatMessageThread.svelte
index 5079770..b191b13 100644
--- a/src/lib/components/ChatMessageThread.svelte
+++ b/src/lib/components/ChatMessageThread.svelte
@@ -17,20 +17,27 @@
 
 	// get the last message in the thread
 	// let lastMessage = $derived(thread.current?.timeline?.at(-1));
-	let lastMessage = $derived(
-		new CoState(Message, thread.current?.timeline?.at(-1), {
-			resolve: {
-				content: true,
-				images: true,
-				reactions: true
-			}
-		})
-	);
+	// let lastMessage = $derived(
+	// 	new CoState(Message, thread.current?.timeline?.at(-1), {
+	// 		resolve: {
+	// 			content: true,
+	// 			images: true,
+	// 			reactions: true
+	// 		}
+	// 	})
+	// );
+
+
+	const latestEntriesByAccount = $derived(Object.values(thread?.current?.timeline?.perAccount ?? {}).sort(
+		(a, b) => a.madeAt.getTime() - b.madeAt.getTime()
+	));
+
+	const lastMessage = $derived(new CoState(Message, latestEntriesByAccount.at(-1)?.value));
 
 	let isNew = $derived.by(() => {
-		if (!lastReadDate) return thread.current?.timeline?.length !== 0;
-		if (!lastMessage) return false;
-		let date = lastMessage.current?.createdAt;
+		if (!lastReadDate) return latestEntriesByAccount.length !== 0;
+		if (latestEntriesByAccount.length === 0) return false;
+		let date = latestEntriesByAccount.at(-1)?.madeAt;
 		if (!date) return false;
 
 		return new Date(lastReadDate) < date;
diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index 7d6cbcd..090fdd7 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -3,13 +3,17 @@
 	import { type Image } from '$lib/schema';
 	import { onMount } from 'svelte';
 	import { cn } from '@fuxui/base';
+	import { CoState } from 'jazz-svelte';
 
 	let {
 		image,
 		src,
 		class: className,
 		...rest
-	}: { image?: Loaded<typeof Image>; src?: string; class?: string } = $props();
+	}: { image?: string; src?: string; class?: string } = $props();
+
+
+	let loadedImage = $derived(new CoState(ImageDefinition, image));
 
 	onMount(() => {});
 
@@ -29,19 +33,19 @@
 
 		if (!image) return;
 
-		if (!image.subscribe) {
-			if (image.placeholderDataURL) {
-				imageRef.src = image.placeholderDataURL;
+		if (!loadedImage.current?.subscribe) {
+			if (loadedImage.current?.placeholderDataURL) {
+				imageRef.src = loadedImage.current?.placeholderDataURL;
 			}
 			return;
 		}
 
-		unsub = image.subscribe({}, (update) => {
+		unsub = loadedImage.current?.subscribe({}, (update) => {
 			if (!imageRef) return;
 
 			const highestRes = ImageDefinition.highestResAvailable(update);
 			if (!highestRes) {
-				imageRef.src = image.placeholderDataURL ?? '';
+				imageRef.src = loadedImage.current?.placeholderDataURL ?? '';
 				return;
 			}
 
@@ -61,7 +65,7 @@
 
 <div
 	class={cn('relative', className)}
-	style="aspect-ratio: {image?.originalSize[0] ?? 1} / {image?.originalSize[1] ?? 1}"
+	style="aspect-ratio: {loadedImage.current?.originalSize[0] ?? 1} / {loadedImage.current?.originalSize[1] ?? 1}"
 >
 	<img bind:this={imageRef} {...rest} class="absolute inset-0 object-cover w-full h-full" />
 </div>
diff --git a/src/lib/components/ThreadButton.svelte b/src/lib/components/ThreadButton.svelte
index 2222e87..7b310f6 100644
--- a/src/lib/components/ThreadButton.svelte
+++ b/src/lib/components/ThreadButton.svelte
@@ -23,20 +23,24 @@
 	} = $props();
 
 	let thread = $derived(new CoState(Thread, threadId));
-	let lastMessage = $derived(
-		new CoState(Message, thread.current?.timeline?.at(-1), {
-			resolve: {
-				content: true,
-				images: true,
-				reactions: true
-			}
-		})
-	);
+
+	const latestEntriesByAccount = $derived(Object.values(thread.current?.timeline?.perAccount ?? {}).sort(
+		(a, b) => a.madeAt.getTime() - b.madeAt.getTime()
+	));
+	// let lastMessage = $derived(
+	// 	new CoState(Message, thread.current?.timeline?.at(-1), {
+	// 		resolve: {
+	// 			content: true,
+	// 			images: true,
+	// 			reactions: true
+	// 		}
+	// 	})
+	// );
 
 	let isNew = $derived.by(() => {
-		if (!lastReadDate) return thread.current?.timeline?.length !== 0;
-		if (!thread.current?.timeline) return false;
-		let date = lastMessage?.current?.createdAt;
+		if (!lastReadDate) return latestEntriesByAccount.length !== 0;
+		if (latestEntriesByAccount.length === 0) return false;
+		let date = latestEntriesByAccount.at(-1)?.madeAt;
 		if (!date) return false;
 
 		return new Date(lastReadDate) < date;
@@ -45,7 +49,7 @@
 	// is latest message less tha 24 hours old
 	let isRecent = $derived.by(() => {
 		if (!thread.current?.timeline) return false;
-		let date = lastMessage?.current?.createdAt;
+		let date = latestEntriesByAccount.at(-1)?.madeAt;
 		if (!date) return false;
 		return date.getTime() > Date.now() - 1000 * 60 * 60 * 24;
 	});
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index afd9606..66a137b 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -5,7 +5,7 @@ export const Reaction = co.map({
 	emoji: z.string()
 });
 
-export const ImageList = co.list(co.image());
+export const ImageList = co.list(z.string());
 
 export const Image = co.image();
 
@@ -25,7 +25,7 @@ export const Message = co.map({
 	softDeleted: z.boolean().optional()
 });
 
-export const Timeline = co.list(z.string());
+export const Timeline = co.feed(z.string());
 
 export const Thread = co.map({
 	name: z.string(),
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index b89bcd0..3cbc486 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,4 +1,4 @@
-import { Account, co, CoRichText, Group, type Loaded } from 'jazz-tools';
+import { Account, co, CoRichText, Group, z, type Loaded } from 'jazz-tools';
 import { Channel, Message, Reaction, Space, SpaceList, Thread, Timeline } from './schema';
 
 export function publicGroup(readWrite: 'reader' | 'writer' = 'writer') {
@@ -86,13 +86,13 @@ export function createPublicSpacesList() {
 	return spaces;
 }
 
-export function createMessage(content: CoRichText, images: never[], replyTo?: string) {
+export function createMessage(content: CoRichText, images: string[], replyTo?: string) {
 	const message = Message.create(
 		{
 			content,
 			createdAt: new Date(),
 			updatedAt: new Date(),
-			images: co.list(co.image()).create([...images], {
+			images: co.list(z.string()).create([...images], {
 				owner: publicGroup()
 			}),
 			reactions: co.list(Reaction).create([], {
@@ -108,3 +108,19 @@ export function createMessage(content: CoRichText, images: never[], replyTo?: st
 
 	return message;
 }
+
+export function createThread(messagesIds: string[], name?: string) {
+	const thread = Thread.create(
+		{
+			name: name || 'New Thread',
+			timeline: Timeline.create([...messagesIds], {
+				owner: publicGroup()
+			})
+		},
+		{
+			owner: publicGroup()
+		}
+	);
+
+	return thread;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 50a5480..7948d01 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -40,7 +40,7 @@
 	let createNewSpaceModalOpen = $state(false);
 
 	let publicSpaces = $derived(
-		new CoState(SpaceList, 'co_zYDfDcLXEjmd2f2co1ix64KotL2', {
+		new CoState(SpaceList, 'co_zQacLFosxPMfpGMnpou99PCQ8L8', {
 			resolve: {
 				$each: true,
 				$onError: null
diff --git a/src/routes/[spaceId]/channel/[channelId]/+page.svelte b/src/routes/[spaceId]/channel/[channelId]/+page.svelte
index 9722437..ae900dc 100644
--- a/src/routes/[spaceId]/channel/[channelId]/+page.svelte
+++ b/src/routes/[spaceId]/channel/[channelId]/+page.svelte
@@ -13,7 +13,7 @@
 		Thread,
 		Timeline
 	} from '$lib/schema';
-	import { createMessage, joinSpace, publicGroup } from '$lib/utils';
+	import { createMessage, createThread, joinSpace, publicGroup } from '$lib/utils';
 	import { Button, Heading, Input, Modal } from '@fuxui/base';
 	import { AccountCoState, CoState } from 'jazz-svelte';
 	import { co, CoRichText, z, type Loaded } from 'jazz-tools';
@@ -76,17 +76,6 @@
 			console.log('no last read');
 		}
 	}
-	// svelte-ignore state_referenced_locally
-	let count = $state(channel.current?.mainThread?.timeline?.length ?? 0);
-
-	$effect(() => {
-		let newCount = channel.current?.mainThread?.timeline?.length ?? 0;
-		if (count < newCount) {
-			count = newCount;
-
-			setLastRead();
-		}
-	});
 
 	function handleSubmit() {
 		let newContent = new CoRichText({
@@ -94,7 +83,15 @@
 			owner: publicGroup()
 		});
 
-		const message = createMessage(newContent, postImages, replyTo?.id);
+		let images: string[] = [];
+
+		if(postImages.length > 0) {
+			postImages.forEach(image => {
+				images.push(image.id);
+			});
+		}
+
+		const message = createMessage(newContent, images, replyTo?.id);
 
 		postImages = [];
 
@@ -139,23 +136,13 @@
 
 	let postImages = $state([]);
 
-	function createThread() {
+	function createThreadClicked() {
 		if (!threadMessage) {
 			console.error('threadMessage is null');
 			return;
 		}
 
-		const thread = Thread.create(
-			{
-				name: threadName || 'New Thread',
-				timeline: Timeline.create([threadMessage.id], {
-					owner: publicGroup()
-				})
-			},
-			{
-				owner: publicGroup()
-			}
-		);
+		const thread = createThread([threadMessage.id], threadName);
 
 		threadMessage.thread = thread.id;
 
@@ -165,20 +152,46 @@
 	}
 
 	// onMount(() => {
-	// 	// send a random message every second
+	// 	// send a random message every 500ms
 	// 	setInterval(() => {
 	// 		input = '<p>' + Math.random().toString(36).substring(2, 15) + '</p>';
 	// 		handleSubmit();
 
 	// 		// log number of messages
-	// 		console.log('number of messages', channel.current?.mainThread?.timeline?.length);
-	// 	}, 200);
+	// 		console.log('number of messages', timeline.length);
+	// 	}, 500);
+
 	// });
+
+	//$inspect(channel.current?.mainThread?.timeline?.length);
+
+	let timeline = $derived(
+		Object.values(channel.current?.mainThread?.timeline.perAccount ?? {})
+			.map((accountFeed) => new Array(...accountFeed.all))
+			.flat()
+			.sort((a, b) => a.madeAt.getTime() - b.madeAt.getTime())
+			.map((a) => a.value)
+	);
+
+
+	// svelte-ignore state_referenced_locally
+	let count = $state(timeline.length ?? 0);
+
+	$effect(() => {
+		let newCount = timeline?.length ?? 0;
+		if (count < newCount) {
+			count = newCount;
+
+			setLastRead();
+		}
+	});
+
+	$inspect(timeline.length);
 </script>
 
 {#if view.active === 'channel'}
 	<TimelineView
-		timeline={channel.current?.mainThread?.timeline}
+		{timeline}
 		{setReplyTo}
 		me={me?.current ?? null}
 		createThread={(message) => {
@@ -230,7 +243,7 @@
 				/>
 			</div>
 		{/if}
-		<form class="flex flex-col gap-2" onsubmit={createThread}>
+		<form class="flex flex-col gap-2" onsubmit={createThreadClicked}>
 			<Input type="text" placeholder="Thread name" bind:value={threadName} />
 			<Button type="submit">create</Button>
 		</form>
diff --git a/src/routes/[spaceId]/channel/[channelId]/thread/[threadId]/+page.svelte b/src/routes/[spaceId]/channel/[channelId]/thread/[threadId]/+page.svelte
index c17df33..9103938 100644
--- a/src/routes/[spaceId]/channel/[channelId]/thread/[threadId]/+page.svelte
+++ b/src/routes/[spaceId]/channel/[channelId]/thread/[threadId]/+page.svelte
@@ -58,17 +58,6 @@
 			console.log('no last read');
 		}
 	}
-	// svelte-ignore state_referenced_locally
-	let count = $state(thread.current?.timeline?.length ?? 0);
-
-	$effect(() => {
-		let newCount = thread.current?.timeline?.length ?? 0;
-		if (count < newCount) {
-			count = newCount;
-
-			setLastRead();
-		}
-	});
 
 	function handleSubmit() {
 		let newContent = new CoRichText({
@@ -76,8 +65,16 @@
 			owner: publicGroup()
 		});
 
+		let images: string[] = [];
+
+		if(postImages.length > 0) {
+			postImages.forEach(image => {
+				images.push(image.id);
+			});
+		}
+
 		// add message to channel
-		const message = createMessage(newContent, postImages, replyTo?.id);
+		const message = createMessage(newContent, images, replyTo?.id);
 
 		postImages = [];
 
@@ -116,10 +113,32 @@
 	}
 
 	let postImages = $state([]);
+
+
+	let timeline = $derived(
+		Object.values(thread.current?.timeline.perAccount ?? {})
+			.map((accountFeed) => new Array(...accountFeed.all))
+			.flat()
+			.sort((a, b) => a.madeAt.getTime() - b.madeAt.getTime())
+			.map((a) => a.value)
+	);
+
+
+	// svelte-ignore state_referenced_locally
+	let count = $state(timeline.length ?? 0);
+
+	$effect(() => {
+		let newCount = timeline.length ?? 0;
+		if (count < newCount) {
+			count = newCount;
+
+			setLastRead();
+		}
+	});
 </script>
 
 <TimelineView
-	timeline={thread.current?.timeline ?? []}
+	{timeline}
 	{setReplyTo}
 	me={me?.current}
 	createThread={() => {}}