diff --git a/src/components/Members/Avatar.tsx b/src/components/Members/Avatar.tsx
new file mode 100644
index 0000000..618e22c
--- /dev/null
+++ b/src/components/Members/Avatar.tsx
@@ -0,0 +1,14 @@
+import type { UsersResponse } from "../../types/pb_types";
+
+export default function Avatar({author}: {author: UsersResponse}) {
+  console.log(author);
+  if (!author) return null;
+  const avatarUrl = import.meta.env.PUBLIC_PB_API + `/api/files/${author.collectionId}/${author.id}/${author.avatar}?thumb=100x100`;
+
+  return (
+    <div className="flex items-center p-4 border-b-2 border-gray-200 max-h-[6rem]">
+      <img src={avatarUrl} alt="Profile" className="rounded-full border-2 border-gray-200 h-full" />
+      <p className="ml-2 text-center flex-grow capitalize">{author.firstname} {author.lastname}</p>
+    </div>
+  )
+}
diff --git a/src/components/Members/Chat/Message.tsx b/src/components/Members/Chat/Message.tsx
new file mode 100644
index 0000000..e575061
--- /dev/null
+++ b/src/components/Members/Chat/Message.tsx
@@ -0,0 +1,20 @@
+import type { MessagesResponse, UsersResponse } from "../../../types/pb_types";
+import Avatar from "../Avatar";
+
+export type MessageExpand = MessagesResponse<{
+  author: UsersResponse;
+}>;
+
+
+export default function Message({ message }: { message: MessageExpand }) {
+  console.log(message);
+
+  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>
+    </div>
+  )
+}
diff --git a/src/components/Members/Home.tsx b/src/components/Members/Home.tsx
index c48fba7..51f329b 100644
--- a/src/components/Members/Home.tsx
+++ b/src/components/Members/Home.tsx
@@ -1,8 +1,30 @@
 import LeftPanel from "./LeftPanel"
+import { Pb } from "../EspaceMembres"
+import { useContext, useEffect, useState } from "preact/hooks"
+import Message from "./Chat/Message"
+import type { MessageExpand } from "./Chat/Message"
 
 function Chat() {
+  const pb = useContext(Pb);
+  const [messages, setMessages] = useState<MessageExpand[]>([]);
+
+  useEffect(() => {
+    async function getMessages() {
+      const data = await pb.collection('messages').getFullList<MessageExpand>({
+        expand: 'author,users(avatar)'
+      });
+      if (!data) return;
+      setMessages(data);
+    }
+
+    getMessages();
+  }, [pb]);
+
   return (
     <div className="w-full">
+      {messages.map((message) => (
+        <Message message={message} />
+      ))}
     </div>
   )
 }
diff --git a/src/components/Members/LeftPanel/User.tsx b/src/components/Members/LeftPanel/User.tsx
index 1c32d1b..5c270c2 100644
--- a/src/components/Members/LeftPanel/User.tsx
+++ b/src/components/Members/LeftPanel/User.tsx
@@ -1,12 +1,12 @@
 import { useContext } from "preact/hooks";
-import { Pb, pbUrl } from "../../EspaceMembres"
+import { Pb } from "../../EspaceMembres"
 import type { UsersRecord } from "../../../types/pb_types";
 
 export default function User() {
   const pb = useContext(Pb);
   const {firstname, lastname, avatar}: UsersRecord = pb.authStore.model || {};
   const {id} = pb.authStore.model || {};
-  const avatarUrl = pbUrl + `/api/files/_pb_users_auth_/${id}/${avatar}?thumb=100x100`;
+  const avatarUrl = import.meta.env.PUBLIC_PB_API + `/api/files/_pb_users_auth_/${id}/${avatar}?thumb=100x100`;
 
   return (
     <div className="flex items-center p-4 border-b-2 border-gray-200 max-h-[6rem]">