diff --git a/backend/open_webui/models/messages.py b/backend/open_webui/models/messages.py
index 8e4306cd5..7edce8616 100644
--- a/backend/open_webui/models/messages.py
+++ b/backend/open_webui/models/messages.py
@@ -28,8 +28,8 @@ class Message(Base):
     data = Column(JSON, nullable=True)
     meta = Column(JSON, nullable=True)
 
-    created_at = Column(BigInteger)
-    updated_at = Column(BigInteger)
+    created_at = Column(BigInteger)  # time_ns
+    updated_at = Column(BigInteger)  # time_ns
 
 
 class MessageModel(BaseModel):
@@ -72,8 +72,8 @@ class MessageTable:
                     "content": form_data.content,
                     "data": form_data.data,
                     "meta": form_data.meta,
-                    "created_at": int(time.time()),
-                    "updated_at": int(time.time()),
+                    "created_at": int(time.time_ns()),
+                    "updated_at": int(time.time_ns()),
                 }
             )
 
@@ -95,9 +95,9 @@ class MessageTable:
             all_messages = (
                 db.query(Message)
                 .filter_by(channel_id=channel_id)
-                .order_by(Message.updated_at.asc())
-                .limit(limit)
+                .order_by(Message.created_at.desc())
                 .offset(skip)
+                .limit(limit)
                 .all()
             )
             return [MessageModel.model_validate(message) for message in all_messages]
@@ -109,9 +109,9 @@ class MessageTable:
             all_messages = (
                 db.query(Message)
                 .filter_by(user_id=user_id)
-                .order_by(Message.updated_at.asc())
-                .limit(limit)
+                .order_by(Message.created_at.desc())
                 .offset(skip)
+                .limit(limit)
                 .all()
             )
             return [MessageModel.model_validate(message) for message in all_messages]
@@ -124,7 +124,7 @@ class MessageTable:
             message.content = form_data.content
             message.data = form_data.data
             message.meta = form_data.meta
-            message.updated_at = int(time.time())
+            message.updated_at = int(time.time_ns())
             db.commit()
             db.refresh(message)
             return MessageModel.model_validate(message) if message else None
diff --git a/backend/open_webui/routers/channels.py b/backend/open_webui/routers/channels.py
index 90b0cde59..095cd0fcc 100644
--- a/backend/open_webui/routers/channels.py
+++ b/backend/open_webui/routers/channels.py
@@ -108,7 +108,7 @@ async def post_new_message(
                 {
                     "channel_id": channel.id,
                     "message_id": message.id,
-                    "data": {"message": message.model_dump()},
+                    "data": {"type": "message", "data": message.model_dump()},
                 },
                 to=f"channel:{channel.id}",
             )
diff --git a/src/lib/components/channel/Channel.svelte b/src/lib/components/channel/Channel.svelte
index ca5cbda67..af337f500 100644
--- a/src/lib/components/channel/Channel.svelte
+++ b/src/lib/components/channel/Channel.svelte
@@ -27,13 +27,31 @@
 
 		messages = await getChannelMessages(localStorage.token, id, page);
 
-		if (messages.length < 50) {
-			top = true;
+		if (messages) {
+			messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
+
+			if (messages.length < 50) {
+				top = true;
+			}
 		}
 	};
 
-	const channelEventHandler = async (data) => {
-		console.log(data);
+	const channelEventHandler = async (event) => {
+		console.log(event);
+
+		if (event.channel_id === id) {
+			const type = event?.data?.type ?? null;
+			const data = event?.data?.data ?? null;
+
+			if (type === 'message') {
+				console.log('message', data);
+				messages = [data, ...messages];
+				await tick();
+				if (scrollEnd) {
+					messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
+				}
+			}
+		}
 	};
 
 	const submitHandler = async ({ content }) => {
@@ -74,6 +92,7 @@
 		{#key id}
 			<Messages
 				{messages}
+				{top}
 				onLoad={async () => {
 					page += 1;
 
@@ -84,7 +103,7 @@
 						return;
 					}
 
-					messages = [...newMessages, ...messages];
+					messages = [...messages, ...newMessages];
 				}}
 			/>
 		{/key}
diff --git a/src/lib/components/channel/Messages.svelte b/src/lib/components/channel/Messages.svelte
index e73cbdbc4..377792b9e 100644
--- a/src/lib/components/channel/Messages.svelte
+++ b/src/lib/components/channel/Messages.svelte
@@ -35,30 +35,28 @@
 </script>
 
 {#if messages}
-	<div class="h-full w-full flex-1 flex">
-		<div class="w-full pt-2">
-			<div class="w-full">
-				{#if !top}
-					<Loader
-						on:visible={(e) => {
-							console.log('visible');
-							if (!messagesLoading) {
-								loadMoreMessages();
-							}
-						}}
-					>
-						<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
-							<Spinner className=" size-4" />
-							<div class=" ">Loading...</div>
-						</div>
-					</Loader>
-				{/if}
+	<div class="w-full h-full pt-2 flex-1 flex flex-col-reverse overflow-auto">
+		<div>
+			{#if !top}
+				<Loader
+					on:visible={(e) => {
+						console.log('visible');
+						if (!messagesLoading) {
+							loadMoreMessages();
+						}
+					}}
+				>
+					<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
+						<Spinner className=" size-4" />
+						<div class=" ">Loading...</div>
+					</div>
+				</Loader>
+			{/if}
 
-				{#each messages as message, messageIdx (message.id)}
-					<Message {message} />
-				{/each}
-			</div>
-			<div class="pb-6" />
+			{#each messages.slice().reverse() as message, messageIdx (message.id)}
+				<Message {message} />
+			{/each}
 		</div>
 	</div>
+	<div class="pb-6" />
 {/if}
diff --git a/src/lib/components/layout/Sidebar/ChannelItem.svelte b/src/lib/components/layout/Sidebar/ChannelItem.svelte
index 5f0ac85c9..14752a038 100644
--- a/src/lib/components/layout/Sidebar/ChannelItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChannelItem.svelte
@@ -5,6 +5,8 @@
 
 	const dispatch = createEventDispatcher();
 
+	import { page } from '$app/stores';
+
 	import { mobile, showSidebar, user } from '$lib/stores';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 
@@ -18,7 +20,10 @@
 
 <div
 	bind:this={itemElement}
-	class=" w-full {className} rounded-lg flex relative group hover:bg-gray-100 dark:hover:bg-gray-900 px-2.5 py-1"
+	class=" w-full {className} rounded-lg flex relative group hover:bg-gray-100 dark:hover:bg-gray-900 {$page
+		.url.pathname === `/channels/${id}`
+		? 'bg-gray-100 dark:bg-gray-900'
+		: ''} px-2.5 py-1"
 >
 	<a
 		class=" w-full flex justify-between"