diff --git a/components/parole.tsx b/components/parole.tsx
index c211abf0..2f27bfc9 100644
--- a/components/parole.tsx
+++ b/components/parole.tsx
@@ -9,16 +9,29 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { signIn, useSession } from "next-auth/react";
 
 interface Message {
-  _id: string;
-  msg: string;
-  ts: string;
-  u: {
-    _id: string;
-    username: string;
-    name?: string;
-  };
+  id: string;
+  text: string;
+  timestamp: string;
+  rawTimestamp: string;
   roomName: string;
   roomType: string;
+  sender: {
+    _id: string;
+    username: string;
+    name: string;
+    initials: string;
+    color: string;
+  };
+  isOwnMessage: boolean;
+  room: {
+    id: string;
+    type: string;
+    name: string;
+    isChannel: boolean;
+    isPrivateGroup: boolean;
+    isDirect: boolean;
+    link: string;
+  };
 }
 
 export function Parole() {
@@ -153,23 +166,25 @@ export function Parole() {
               <p className="text-center text-gray-500">No messages found</p>
             ) : (
               messages.map((message) => (
-                <div key={message._id} className="flex items-start space-x-3 hover:bg-gray-50/50 p-3 rounded-lg transition-colors">
-                  <Avatar className="h-8 w-8">
-                    <AvatarImage src={`https://ui-avatars.com/api/?name=${encodeURIComponent(message.u.name || message.u.username)}&background=random`} />
-                    <AvatarFallback>{(message.u.name || message.u.username).substring(0, 2).toUpperCase()}</AvatarFallback>
+                <div key={message.id} className="flex items-start space-x-3 hover:bg-gray-50/50 p-3 rounded-lg transition-colors">
+                  <Avatar className="h-8 w-8" style={{ backgroundColor: message.sender.color }}>
+                    <AvatarImage src={`https://ui-avatars.com/api/?name=${encodeURIComponent(message.sender.name)}&background=random`} />
+                    <AvatarFallback>{message.sender.initials}</AvatarFallback>
                   </Avatar>
                   <div className="flex-1 min-w-0">
                     <div className="flex items-baseline justify-between">
-                      <p className="text-sm font-semibold text-gray-800 truncate">{message.u.name || message.u.username}</p>
-                      <span className="text-xs font-medium text-gray-500">
-                        {new Date(message.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                      </span>
+                      <p className="text-sm font-semibold text-gray-800 truncate">{message.sender.name}</p>
+                      <span className="text-xs font-medium text-gray-500">{message.timestamp}</span>
                     </div>
-                    <p className="text-sm text-gray-600 whitespace-pre-wrap line-clamp-2 mt-1">{message.msg}</p>
+                    <p className="text-sm text-gray-600 whitespace-pre-wrap line-clamp-2 mt-1">{message.text}</p>
                     {message.roomName && (
                       <div className="flex items-center mt-2">
-                        <span className="inline-flex items-center px-2 py-1 rounded-md bg-blue-50 text-xs font-medium text-blue-700">
-                          {message.roomName}
+                        <span className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${
+                          message.room.isChannel ? 'bg-blue-50 text-blue-700' :
+                          message.room.isPrivateGroup ? 'bg-purple-50 text-purple-700' :
+                          'bg-green-50 text-green-700'
+                        }`}>
+                          {message.room.isChannel ? '#' : message.room.isPrivateGroup ? '🔒' : '💬'} {message.roomName}
                         </span>
                       </div>
                     )}