diff --git a/assets/js/main.js b/assets/js/main.js
index 7c2f329..73d98c3 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -634,6 +634,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const userId = memberItem.dataset.userId;
             const username = memberItem.dataset.username;
             const avatar = memberItem.dataset.avatar;
+            const roleIds = (memberItem.dataset.roleIds || '').split(',').filter(id => id);
             
             // Create or show member menu
             document.querySelector('.member-context-menu')?.remove();
@@ -642,17 +643,42 @@ document.addEventListener('DOMContentLoaded', () => {
             menu.style.position = 'fixed';
             menu.style.zIndex = '1000';
             menu.style.boxShadow = '0 4px 12px rgba(0,0,0,0.5)';
-            menu.style.minWidth = '150px';
+            menu.style.minWidth = '180px';
             
             const rect = memberItem.getBoundingClientRect();
             menu.style.top = `${rect.top}px`;
-            menu.style.left = `${rect.left - 160}px`;
+            menu.style.left = `${rect.left - 190}px`;
+
+            let rolesHtml = '';
+            if (roleIds.length > 0) {
+                // Deduplicate and filter valid roles from serverRoles
+                const uniqueRoleIds = [...new Set(roleIds)];
+                const roles = uniqueRoleIds.map(id => serverRoles.find(r => r.id == id)).filter(r => r);
+                if (roles.length > 0) {
+                    rolesHtml = `
+                        <div class="mb-2 p-1">
+                            <div class="small text-muted text-uppercase mb-1" style="font-size: 0.6em; font-weight: bold; opacity: 0.8;">Rôles</div>
+                            <div class="d-flex flex-wrap gap-1">
+                                ${roles.map(r => `
+                                    <span class="badge rounded-pill d-flex align-items-center" style="background-color: rgba(0,0,0,0.3); border: 1px solid ${r.color}; font-size: 0.7em; color: ${r.color}; font-weight: 500; padding: 2px 8px;">
+                                        ${r.icon_url ? `<img src="${r.icon_url}" style="width: 12px; height: 12px; margin-right: 4px; object-fit: contain;">` : ''}
+                                        ${escapeHTML(r.name)}
+                                    </span>
+                                `).join('')}
+                            </div>
+                        </div>
+                        <div class="border-top border-secondary mb-2 mx-1"></div>
+                    `;
+                }
+            }
 
             menu.innerHTML = `
-                <div class="mb-2 p-1 border-bottom border-secondary d-flex align-items-center">
+                <div class="p-1 d-flex align-items-center mb-1">
                     <div class="message-avatar me-2" style="width: 24px; height: 24px; ${avatar ? `background-image: url('${avatar}');` : ''}"></div>
                     <span class="small fw-bold">${escapeHTML(username)}</span>
                 </div>
+                <div class="border-top border-secondary mb-2 mx-1"></div>
+                ${rolesHtml}
                 <button class="btn btn-sm btn-dark w-100 text-start mb-1 member-menu-action" data-action="message">Message</button>
                 ${(window.isServerOwner || window.canManageServer) ? `<button class="btn btn-sm btn-dark w-100 text-start member-menu-action" data-action="edit-roles">Éditer son rôle</button>` : ''}
             `;
@@ -1213,6 +1239,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 item.dataset.userId = m.id;
                 item.dataset.username = m.username;
                 item.dataset.avatar = m.avatar_url || '';
+                item.dataset.roleIds = m.role_ids || '';
                 item.style.color = 'var(--text-primary)';
                 item.style.marginBottom = '8px';
                 item.style.cursor = 'pointer';
@@ -2103,4 +2130,7 @@ document.addEventListener('DOMContentLoaded', () => {
             el.addEventListener('load', () => scrollToBottom(isMe));
         });
     }
+
+    // Initial load of roles for the server
+    loadRoles();
 });
diff --git a/index.php b/index.php
index 7d67ea3..2e82db5 100644
--- a/index.php
+++ b/index.php
@@ -190,13 +190,14 @@ if ($is_dm_view) {
     // Fetch members
     $stmt = db()->prepare("
         SELECT u.id, u.username, u.avatar_url, u.status,
+        (SELECT GROUP_CONCAT(r.id) FROM roles r JOIN user_roles ur ON r.id = ur.role_id WHERE ur.user_id = u.id AND r.server_id = ?) as role_ids,
         (SELECT r.color FROM roles r JOIN user_roles ur ON r.id = ur.role_id WHERE ur.user_id = u.id AND r.server_id = ? ORDER BY r.position DESC LIMIT 1) as role_color,
         (SELECT r.icon_url FROM roles r JOIN user_roles ur ON r.id = ur.role_id WHERE ur.user_id = u.id AND r.server_id = ? ORDER BY r.position DESC LIMIT 1) as role_icon
         FROM users u 
         JOIN server_members sm ON u.id = sm.user_id 
         WHERE sm.server_id = ?
     ");
-    $stmt->execute([$active_server_id, $active_server_id, $active_server_id]);
+    $stmt->execute([$active_server_id, $active_server_id, $active_server_id, $active_server_id]);
     $members = $stmt->fetchAll();
 }
 
@@ -789,7 +790,7 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
             Members — <?php echo count($members); ?>
         </div>
         <?php foreach($members as $m): ?>
-            <div class="channel-item member-item" data-user-id="<?php echo $m['id']; ?>" data-username="<?php echo htmlspecialchars($m['username']); ?>" data-avatar="<?php echo htmlspecialchars($m['avatar_url'] ?? ''); ?>" style="color: var(--text-primary); margin-bottom: 8px; cursor: pointer;">
+            <div class="channel-item member-item" data-user-id="<?php echo $m['id']; ?>" data-username="<?php echo htmlspecialchars($m['username']); ?>" data-avatar="<?php echo htmlspecialchars($m['avatar_url'] ?? ''); ?>" data-role-ids="<?php echo $m['role_ids'] ?? ''; ?>" style="color: var(--text-primary); margin-bottom: 8px; cursor: pointer;">
                 <div class="message-avatar" style="width: 32px; height: 32px; background-color: <?php echo $m['status'] == 'online' ? '#23a559' : '#80848e'; ?>; position: relative; <?php echo $m['avatar_url'] ? "background-image: url('{$m['avatar_url']}');" : ""; ?>">
                     <?php if($m['status'] == 'online'): ?>
                         <div style="position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background-color: #23a559; border-radius: 50%; border: 2px solid var(--bg-members);"></div>