diff --git a/src/lib/components/ChatInput.svelte b/src/lib/components/ChatInput.svelte
index 87bcfed..58326d9 100644
--- a/src/lib/components/ChatInput.svelte
+++ b/src/lib/components/ChatInput.svelte
@@ -40,7 +40,7 @@
 						viewBox="0 0 24 24"
 						stroke-width="2"
 						stroke="currentColor"
-						class="size-3 mr-1"
+						class="mr-1 size-3"
 					>
 						<path
 							stroke-linecap="round"
@@ -69,7 +69,7 @@
 				</Button>
 			</div>
 		{/if}
-		<Prose class="px-3">
+		<Prose class="px-4" size="md">
 			<RichTextEditor
 				bind:htmlContent={value}
 				onEnter={handleSubmit}
diff --git a/src/lib/components/ChatMessage.svelte b/src/lib/components/ChatMessage.svelte
index b3c5481..3a044ae 100644
--- a/src/lib/components/ChatMessage.svelte
+++ b/src/lib/components/ChatMessage.svelte
@@ -160,6 +160,6 @@
 	</div>
 
 	{#if showThread && message.thread}
-		<ChatMessageThread threadId={message.thread} />
+		<ChatMessageThread threadId={message.thread} lastReadDate={me?.root?.lastRead?.[message.thread]} />
 	{/if}
 </div>
diff --git a/src/lib/components/ChatMessageThread.svelte b/src/lib/components/ChatMessageThread.svelte
index 386da5e..21f2bb9 100644
--- a/src/lib/components/ChatMessageThread.svelte
+++ b/src/lib/components/ChatMessageThread.svelte
@@ -3,16 +3,42 @@
 	import { Thread } from '$lib/schema';
 	import { CoState } from 'jazz-svelte';
 	import { useCurrentRoute } from '$lib/context';
-	let { threadId }: { threadId: string } = $props();
+	import { cn } from '@fuxui/base';
+	import RelativeTime from 'svelte-relative-time';
+	let {
+		threadId,
+		indented = true,
+		lastReadDate
+	}: { threadId: string; indented?: boolean; lastReadDate?: Date } = $props();
 
 	let thread = $derived(new CoState(Thread, threadId));
 
 	const route = useCurrentRoute();
+
+	// get the last message in the thread
+	let lastMessage = $derived(thread.current?.timeline?.at(-1));
+
+	let isNew = $derived.by(() => {
+		if (!lastReadDate) return thread.current?.timeline?.length !== 0;
+		if (!lastMessage) return false;
+		let date = lastMessage.createdAt;
+		if (!date) return false;
+
+		return new Date(lastReadDate) < date;
+	});
 </script>
 
 <div
-	class="text-base-600 dark:text-base-400 bg-base-200/50 dark:bg-base-900/40 border-base-300/50 dark:border-base-800/30 relative ml-10 inline-flex items-center justify-between gap-2 rounded-2xl border px-4 py-3 text-sm sm:ml-12"
+	class={cn(
+		'text-base-600 dark:text-base-400 bg-base-200/50 dark:bg-base-900/40 border-base-300/50 dark:border-base-800/30 relative inline-flex items-center justify-between gap-2 rounded-2xl border px-4 py-3 text-sm',
+		indented ? 'ml-10 sm:ml-12' : ''
+	)}
 >
+	{#if isNew}
+		<div class="absolute top-2 left-2">
+			<div class="bg-accent-500 dark:bg-accent-600 size-2 rounded-full"></div>
+		</div>
+	{/if}
 	<div class="flex items-center gap-2">
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"
 			><path
@@ -34,6 +60,12 @@
 			{thread.current?.name}</a
 		>
 		({thread.current?.timeline?.length} messages)
+
+		{#if lastMessage}
+			<span class="text-base-600 dark:text-base-400 text-xs">
+				updated <RelativeTime date={lastMessage.createdAt} locale="en" />
+			</span>
+		{/if}
 	</div>
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
diff --git a/src/routes/[spaceId]/+layout.svelte b/src/routes/[spaceId]/+layout.svelte
index a8111c1..49aea4e 100644
--- a/src/routes/[spaceId]/+layout.svelte
+++ b/src/routes/[spaceId]/+layout.svelte
@@ -9,6 +9,8 @@
 		Input,
 		Modal,
 		Subheading,
+		TabItem,
+		Tabs,
 		ThemeToggle
 	} from '@fuxui/base';
 
@@ -22,6 +24,8 @@
 	import ChannelButton from '$lib/components/ChannelButton.svelte';
 	import { useCurrentRoute } from '$lib/context';
 	import ThreadButton from '$lib/components/ThreadButton.svelte';
+	import { view } from './view.svelte';
+	import { afterNavigate, goto } from '$app/navigation';
 
 	let route = useCurrentRoute();
 
@@ -43,6 +47,15 @@
 		}
 	});
 
+	afterNavigate(() => {
+		if (route.threadId) {
+			view.active = 'threads';
+		} else if(!goToThreads) {
+			view.active = 'channel';
+		}
+		goToThreads = false;
+	});
+
 	let { children } = $props();
 
 	function hideSidebar() {
@@ -61,6 +74,8 @@
 	let newChannelName = $state('');
 
 	let showSpaceSelection = $state(false);
+
+	let goToThreads = $state(false);
 </script>
 
 <Navbar hasSidebar class="dark:bg-base-900 bg-white">
@@ -83,6 +98,32 @@
 				></path>
 			</svg>
 		</Button>
+
+		{#if route.channelId}
+			<Tabs
+				items={[
+					{
+						name: 'channel',
+						onclick: () => {
+							view.active = 'channel';
+							if (route.threadId) {
+								// go to channel
+								goto(`${base}/${route.spaceId}/channel/${route.channelId}`);
+							}
+						}
+					},
+					{
+						name: 'threads',
+						onclick: () => {
+							view.active = 'threads';
+							goToThreads = true;
+							goto(`${base}/${route.spaceId}/channel/${route.channelId}`);
+						}
+					}
+				]}
+				active={view.active}
+			/>
+		{/if}
 	</div>
 
 	<div class="flex items-center gap-2">
@@ -140,7 +181,6 @@
 						onclick={hideSidebar}
 					/>
 
-					
 					{#each channel.subThreads ?? [] as thread}
 						{#if thread}
 							<ThreadButton
diff --git a/src/routes/[spaceId]/channel/[channelId]/+page.svelte b/src/routes/[spaceId]/channel/[channelId]/+page.svelte
index 5ac49ac..28330eb 100644
--- a/src/routes/[spaceId]/channel/[channelId]/+page.svelte
+++ b/src/routes/[spaceId]/channel/[channelId]/+page.svelte
@@ -3,11 +3,21 @@
 	import ChatInput from '$lib/components/ChatInput.svelte';
 	import ChatMessage from '$lib/components/ChatMessage.svelte';
 	import { useCurrentRoute } from '$lib/context';
-	import { Channel, LastReadList, Message, MyAppAccount, Reaction, Space, Thread } from '$lib/schema';
+	import {
+		Channel,
+		LastReadList,
+		Message,
+		MyAppAccount,
+		Reaction,
+		Space,
+		Thread
+	} from '$lib/schema';
 	import { joinSpace, publicGroup } from '$lib/utils';
 	import { Button, Heading, Input, Modal } from '@fuxui/base';
 	import { AccountCoState, CoState } from 'jazz-svelte';
 	import { co, CoRichText, type Loaded } from 'jazz-tools';
+	import { view } from '../../view.svelte';
+	import ChatMessageThread from '$lib/components/ChatMessageThread.svelte';
 
 	const route = useCurrentRoute();
 
@@ -171,35 +181,48 @@
 	}
 </script>
 
-<div class="flex w-full flex-col gap-1">
-	{#each channel.current?.mainThread?.timeline ?? [] as message, index}
-		{#if message}
-			<ChatMessage
-				{setReplyTo}
-				{message}
-				previousMessage={channel.current?.mainThread?.timeline?.[index - 1]}
-				me={me?.current}
-				createThread={(message) => {
-					threadMessage = message;
-					createThreadModalOpen = true;
-				}}
-			/>
+{#if view.active === 'channel'}
+	<div class="flex w-full flex-col gap-1">
+		{#each channel.current?.mainThread?.timeline ?? [] as message, index}
+			{#if message}
+				<ChatMessage
+					{setReplyTo}
+					{message}
+					previousMessage={channel.current?.mainThread?.timeline?.[index - 1]}
+					me={me?.current}
+					createThread={(message) => {
+						threadMessage = message;
+						createThreadModalOpen = true;
+					}}
+				/>
+			{/if}
+		{/each}
+		{#if channel.current?.mainThread?.timeline?.length === 0}
+			<div class="text-base-600 dark:text-base-400 h-30 text-sm">
+				No messages yet. Be the first to send a message!
+			</div>
 		{/if}
-	{/each}
-	{#if channel.current?.mainThread?.timeline?.length === 0}
-		<div class="text-base-600 dark:text-base-400 h-30 text-sm">
-			No messages yet. Be the first to send a message!
-		</div>
-	{/if}
-</div>
-
-<ChatInput
-	bind:replyTo
-	me={me?.current}
-	{handleSubmit}
-	{clickJoinSpace}
-	bind:value={input}
-/>
+	</div>
+
+	<ChatInput bind:replyTo me={me?.current} {handleSubmit} {clickJoinSpace} bind:value={input} />
+{:else}
+	<div class="flex w-full flex-col gap-2">
+		{#each channel.current?.subThreads ?? [] as thread}
+			{#if thread}
+				<ChatMessageThread
+					threadId={thread.id}
+					indented={false}
+					lastReadDate={me?.current?.root?.lastRead?.[thread.id]}
+				/>
+			{/if}
+		{/each}
+		{#if channel.current?.subThreads?.length === 0}
+			<div class="text-base-600 dark:text-base-400 h-30 text-sm">
+				No threads yet. Be the first to create a thread!
+			</div>
+		{/if}
+	</div>
+{/if}
 
 <Modal bind:open={createThreadModalOpen}>
 	<div class="flex flex-col gap-4">
diff --git a/src/routes/[spaceId]/view.svelte.ts b/src/routes/[spaceId]/view.svelte.ts
new file mode 100644
index 0000000..e59458c
--- /dev/null
+++ b/src/routes/[spaceId]/view.svelte.ts
@@ -0,0 +1,3 @@
+export const view = $state({
+	active: 'channel'
+});