diff --git a/web/app/_components/ChatBody/renderChatMessage.tsx b/web/app/_components/ChatBody/renderChatMessage.tsx
index 8c487f15a..7d797b6cc 100644
--- a/web/app/_components/ChatBody/renderChatMessage.tsx
+++ b/web/app/_components/ChatBody/renderChatMessage.tsx
@@ -13,8 +13,8 @@ export default function renderChatMessage({
   senderName,
   createdAt,
   imageUrls,
+  htmlText,
   text,
-  status,
 }: ChatMessage): React.ReactNode {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const message = useAtomValue(currentStreamingMessageAtom);
@@ -48,7 +48,7 @@ export default function renderChatMessage({
           avatarUrl={senderAvatarUrl}
           senderName={senderName}
           createdAt={createdAt}
-          text={text}
+          text={htmlText ?? text}
         />
       ) : (
         <StreamTextMessage
@@ -57,7 +57,7 @@ export default function renderChatMessage({
           avatarUrl={senderAvatarUrl}
           senderName={senderName}
           createdAt={createdAt}
-          text={text}
+          text={htmlText ?? text}
         />
       );
     default:
diff --git a/web/app/_hooks/useSendChatMessage.ts b/web/app/_hooks/useSendChatMessage.ts
index 9096dc986..7bde91cb1 100644
--- a/web/app/_hooks/useSendChatMessage.ts
+++ b/web/app/_hooks/useSendChatMessage.ts
@@ -41,7 +41,12 @@ export default function useSendChatMessage() {
     const newChatMessage = await toChatMessage(newMessage);
     addNewMessage(newChatMessage);
 
-    const recentMessages = [...chatMessagesHistory, newChatMessage]
+    const recentMessages = [
+      ...chatMessagesHistory.toSorted(
+        (a, b) => parseInt(a.id) - parseInt(b.id)
+      ),
+      newChatMessage,
+    ]
       .slice(-10)
       .map((message) => {
         return {
diff --git a/web/app/_models/ChatMessage.ts b/web/app/_models/ChatMessage.ts
index 40bbbb6ec..ad8784c2c 100644
--- a/web/app/_models/ChatMessage.ts
+++ b/web/app/_models/ChatMessage.ts
@@ -26,6 +26,7 @@ export interface ChatMessage {
   senderUid: string;
   senderName: string;
   senderAvatarUrl: string;
+  htmlText?: string | undefined;
   text: string | undefined;
   imageUrls?: string[] | undefined;
   createdAt: number;
@@ -45,18 +46,13 @@ export const toChatMessage = async (m: RawMessage): Promise<ChatMessage> => {
   const createdAt = new Date(m.created_at ?? "").getTime();
   const imageUrls: string[] = [];
   const imageUrl = undefined;
-  // m.message_medias.length > 0 ? m.message_medias[0].media_url : null;
   if (imageUrl) {
     imageUrls.push(imageUrl);
   }
 
   const messageType = MessageType.Text;
-  // m.message_type ? MessageType[m.message_type as keyof typeof MessageType] : MessageType.Text;
   const messageSenderType =
     m.user === "user" ? MessageSenderType.User : MessageSenderType.Ai;
-  // m.message_sender_type
-  //   ? MessageSenderType[m.message_sender_type as keyof typeof MessageSenderType]
-  //   : MessageSenderType.Ai;
 
   const content = m.message ?? "";
   const processedContent = await remark().use(html).process(content);
@@ -68,15 +64,13 @@ export const toChatMessage = async (m: RawMessage): Promise<ChatMessage> => {
     messageType: messageType,
     messageSenderType: messageSenderType,
     senderUid: m.user?.toString() || "0",
-    senderName: m.user === "user" ? "You" : "LLaMA", // m.sender_name ?? "",
+    senderName: m.user === "user" ? "You" : "Assistant",
     senderAvatarUrl:
-      m.user === "user"
-        ? "icons/avatar.svg"
-        : "https://huggingface.co/front/assets/huggingface_logo-noborder.svg", // m.sender_avatar_url ?? "icons/app_icon.svg",
-    text: contentHtml,
+      m.user === "user" ? "icons/avatar.svg" : "icons/app_icon.svg",
+    text: content,
+    htmlText: contentHtml,
     imageUrls: imageUrls,
     createdAt: createdAt,
     status: MessageStatus.Ready,
-    // status: m.status as MessageStatus,
   };
 };