diff --git a/src/components/Members/Chat/Message.tsx b/src/components/Members/Chat/Message.tsx
index e575061..4424878 100644
--- a/src/components/Members/Chat/Message.tsx
+++ b/src/components/Members/Chat/Message.tsx
@@ -1,5 +1,6 @@
 import type { MessagesResponse, UsersResponse } from "../../../types/pb_types";
 import Avatar from "../Avatar";
+import { FaRegClock } from "react-icons/fa";
 
 export type MessageExpand = MessagesResponse<{
   author: UsersResponse;
@@ -7,13 +8,23 @@ export type MessageExpand = MessagesResponse<{
 
 
 export default function Message({ message }: { message: MessageExpand }) {
-  console.log(message);
+  if (!message.expand) return null;
+  const author = message.expand.author;
+  const avatarUrl = author.avatar ? import.meta.env.PUBLIC_PB_API + `/api/files/${author.collectionId}/${author.id}/${author.avatar}?thumb=100x100` : undefined;
+  const date = new Date(message.created);
+  const dateStr = `${date.getHours()}:${date.getMinutes()}`;
 
   return (
-    <div className='flex flex-col items-start justify-center' key={message.id}>
-      {message.expand && <Avatar author={message.expand.author} /> }
-      <div className='p-2 bg-gray-100 rounded-md '>
-        <p>{message.content}</p>
+    <div className='flex justify-start p-4' key={message.id}>
+      {message.expand && <Avatar avatarUrl={avatarUrl} firstName={author.firstname} lastName={author.lastname} />}
+      <div className='flex flex-col items-start justify-center'>
+        <div className='flex items-center my-4 ml-2 gap-2'>
+          <p className="pr-2 py-2 border-b border-gray-200 text-xl text-gray-600">{author.firstname} {author.lastname}</p>
+          <p className="flex gap-2 items-center"><FaRegClock />{dateStr}</p>
+        </div>
+        <div className='p-2 bg-gray-100 rounded-md '>
+          <p>{message.content}</p>
+        </div>
       </div>
     </div>
   )