diff --git a/src/app/chat/components/messages/item.tsx b/src/app/chat/components/messages/item.tsx
index e38705a9..f86f24f8 100644
--- a/src/app/chat/components/messages/item.tsx
+++ b/src/app/chat/components/messages/item.tsx
@@ -1,4 +1,7 @@
 import ChatMessageUser from '@lume/app/chat/components/messages/user';
+import { noteParser } from '@lume/app/note/components/parser';
+import ImagePreview from '@lume/app/note/components/preview/image';
+import VideoPreview from '@lume/app/note/components/preview/video';
 import { useDecryptMessage } from '@lume/utils/hooks/useDecryptMessage';
 
 import { memo } from 'react';
@@ -12,14 +15,22 @@ export const ChatMessageItem = memo(function MessageListItem({
   userPubkey: string;
   userPrivkey: string;
 }) {
-  const content = useDecryptMessage(userPubkey, userPrivkey, data.pubkey, data.tags, data.content);
+  const decryptedContent = useDecryptMessage(userPubkey, userPrivkey, data);
+  // if we have decrypted content, use it instead of the encrypted content
+  if (decryptedContent) {
+    data['content'] = decryptedContent;
+  }
+  // parse the note content
+  const content = noteParser(data);
 
   return (
     <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
       <div className="flex flex-col">
         <ChatMessageUser pubkey={data.pubkey} time={data.created_at} />
         <div className="-mt-[17px] pl-[48px]">
-          <div className="whitespace-pre-line break-words text-sm leading-tight">{content}</div>
+          <div className="whitespace-pre-line break-words text-sm leading-tight">{content.parsed}</div>
+          {Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
+          {Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
         </div>
       </div>
     </div>
diff --git a/src/utils/hooks/useDecryptMessage.tsx b/src/utils/hooks/useDecryptMessage.tsx
index 4866b2a5..b6fee199 100644
--- a/src/utils/hooks/useDecryptMessage.tsx
+++ b/src/utils/hooks/useDecryptMessage.tsx
@@ -1,34 +1,28 @@
 import { nip04 } from 'nostr-tools';
 import { useCallback, useEffect, useState } from 'react';
 
-export const useDecryptMessage = (
-  userKey: string,
-  userPriv: string,
-  eventKey: string,
-  eventTags: string[],
-  encryptedContent: string
-) => {
+export const useDecryptMessage = (userKey: string, userPriv: string, data: any) => {
   const [content, setContent] = useState(null);
 
   const extractSenderKey = useCallback(() => {
-    const keyInTags = eventTags.find(([k, v]) => k === 'p' && v && v !== '')[1];
+    const keyInTags = data.tags.find(([k, v]) => k === 'p' && v && v !== '')[1];
     if (keyInTags === userKey) {
-      return eventKey;
+      return data.pubkey;
     } else {
       return keyInTags;
     }
-  }, [eventKey, eventTags, userKey]);
+  }, [data.pubkey, data.tags, userKey]);
 
   const decrypt = useCallback(async () => {
     const senderKey = extractSenderKey();
-    const result = await nip04.decrypt(userPriv, senderKey, encryptedContent);
+    const result = await nip04.decrypt(userPriv, senderKey, data.content);
     // update state with decrypt content
     setContent(result);
-  }, [userPriv, encryptedContent, extractSenderKey]);
+  }, [extractSenderKey, userPriv, data.content]);
 
   useEffect(() => {
     decrypt().catch(console.error);
   }, [decrypt]);
 
-  return content ? content : '';
+  return content ? content : null;
 };