diff --git a/src/pages/chat/chat.ts b/src/pages/chat/chat.ts
index 2fb7ebc..f9cc23d 100755
--- a/src/pages/chat/chat.ts
+++ b/src/pages/chat/chat.ts
@@ -419,7 +419,6 @@ class ChatElement extends HTMLElement {
 
         groupList.innerHTML = '';
 
-       
         const li = document.createElement('li');
         li.className = 'group-list-item';
         li.setAttribute('data-process-id', processId);
@@ -427,11 +426,9 @@ class ChatElement extends HTMLElement {
         const container = document.createElement('div');
         container.className = 'group-item-container';
         
-        // Créer un span pour les emojis
         const emojiSpan = document.createElement('span');
         emojiSpan.className = 'process-emoji';
         
-        // Créer un span pour le nom du processus
         const nameSpan = document.createElement('span');
         nameSpan.textContent = `Process : `;
         nameSpan.className = 'process-name';
@@ -440,10 +437,52 @@ class ChatElement extends HTMLElement {
         addressToEmoji(processId).then(emojis => {
             emojiSpan.textContent = emojis;
         });
+
+        // Ajouter l'événement de clic pour afficher/masquer les rôles
+        container.addEventListener('click', (event) => {
+            event.stopPropagation();
+            const roleList = li.querySelector('.role-list') as HTMLElement;
+            if (roleList) {
+                roleList.style.display = roleList.style.display === 'none' ? 'block' : 'none';
+            }
+        });
         
         container.appendChild(nameSpan);
         container.appendChild(emojiSpan);
         li.appendChild(container);
+
+        const roleList = document.createElement('ul');
+        roleList.className = 'role-list';
+        roleList.style.display = 'none';
+
+        const defaultRoles = ['Owner', 'Member', 'Validator'];
+        defaultRoles.forEach(roleName => {
+            const roleItem = document.createElement('li');
+            roleItem.className = 'role-item';
+            
+            const roleContainer = document.createElement('div');
+            roleContainer.className = 'role-item-container';
+            
+            const roleNameSpan = document.createElement('span');
+            roleNameSpan.className = 'role-name';
+            roleNameSpan.textContent = roleName;
+            
+            //const folderIcon = document.createElement('span');
+            //folderIcon.className = 'folder-icon';
+            
+            roleContainer.appendChild(roleNameSpan);
+            //roleContainer.appendChild(folderIcon);
+            roleItem.appendChild(roleContainer);
+            
+            roleItem.addEventListener('click', (event) => {
+                event.stopPropagation();
+                this.toggleMembers({ members: [] }, roleItem);
+            });
+
+            roleList.appendChild(roleItem);
+        });
+
+        li.appendChild(roleList);
         groupList.appendChild(li);
         
         console.log('✅ Group list item added for process:', processId);