diff --git a/src/backend/chat/chat-listeners/active-user-handler.js b/src/backend/chat/chat-listeners/active-user-handler.js
index 168f11298..1dbb40524 100644
--- a/src/backend/chat/chat-listeners/active-user-handler.js
+++ b/src/backend/chat/chat-listeners/active-user-handler.js
@@ -187,11 +187,13 @@ exports.addOnlineUser = async (viewer) => {
                 return;
             }
 
+            const roles = await chatRolesManager.getUsersChatRoles(twitchUser.id);
+
             const userDetails = {
                 id: twitchUser.id,
                 username: twitchUser.name,
                 displayName: twitchUser.displayName,
-                twitchRoles: [],
+                twitchRoles: roles,
                 profilePicUrl: twitchUser.profilePictureUrl,
                 disableViewerList: false
             };
diff --git a/src/gui/app/directives/modals/viewers/viewerDetailsModal.js b/src/gui/app/directives/modals/viewers/viewerDetailsModal.js
index 70397d1da..274627707 100644
--- a/src/gui/app/directives/modals/viewers/viewerDetailsModal.js
+++ b/src/gui/app/directives/modals/viewers/viewerDetailsModal.js
@@ -835,15 +835,12 @@
                         return;
                     }
 
-                    const relationshipData = $ctrl.viewerDetails.twitchData.relationship;
-                    const channelRoles = relationshipData ? relationshipData.roles : [];
-
                     const createViewerRequest = {
                         id: $ctrl.resolve.userId,
                         username: $ctrl.viewerDetails.twitchData.username,
                         displayName: $ctrl.viewerDetails.twitchData.displayName,
                         profilePicUrl: $ctrl.viewerDetails.twitchData.profilePicUrl,
-                        twitchRoles: channelRoles
+                        twitchRoles: $ctrl.viewerDetails.twitchData.userRoles
                     };
 
                     $q((resolve) => {