diff --git a/web/components/label.css b/web/components/label.css
--- a/web/components/label.css
+++ b/web/components/label.css
@@ -10,3 +10,13 @@
   margin-left: 4px;
   color: inherit;
 }
+
+.default {
+  color: var(--label-default-color);
+  background-color: var(--label-default-bg);
+}
+
+.grey {
+  color: var(--label-grey-color);
+  background-color: var(--label-grey-bg);
+}
diff --git a/web/components/label.react.js b/web/components/label.react.js
--- a/web/components/label.react.js
+++ b/web/components/label.react.js
@@ -1,5 +1,6 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
@@ -7,32 +8,31 @@
 import Button from './button.react.js';
 import css from './label.css';
 
+type LabelVariant = 'default' | 'grey';
+
 type Props = {
   +size?: string | number,
-  +color?: string,
-  +bg?: string,
+  +variant?: LabelVariant,
   +children: React.Node,
   +onClose?: () => mixed,
 };
 
 function Label(props: Props): React.Node {
-  const {
-    size = '12px',
-    color = 'var(--label-default-color)',
-    bg = 'var(--label-default-bg)',
-    children,
-    onClose,
-  } = props;
+  const { size = '12px', variant = 'default', children, onClose } = props;
 
   const labelStyle = React.useMemo(
     () => ({
       fontSize: size,
-      color: color,
-      background: bg,
     }),
-    [bg, color, size],
+    [size],
   );
 
+  const labelClassNames = classNames({
+    [css.label]: true,
+    [css.default]: variant === 'default',
+    [css.grey]: variant === 'grey',
+  });
+
   const closeButton = React.useMemo(() => {
     if (!onClose) {
       return null;
@@ -45,7 +45,7 @@
   }, [onClose, size]);
 
   return (
-    <div style={labelStyle} className={css.label}>
+    <div style={labelStyle} className={labelClassNames}>
       {children}
       {closeButton}
     </div>
diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js
--- a/web/modals/threads/members/member.react.js
+++ b/web/modals/threads/members/member.react.js
@@ -42,6 +42,8 @@
 function ThreadMember(props: Props): React.Node {
   const { memberInfo, threadInfo, setOpenMenu, isMenuOpen } = props;
   const userName = stringForUser(memberInfo);
+  const { roles } = threadInfo;
+  const { role } = memberInfo;
 
   const onMenuChange = React.useCallback(
     menuOpen => {
@@ -133,14 +135,20 @@
     [],
   );
 
+  const roleName = role && roles[role].name;
+
   const label = React.useMemo(() => {
-    if (memberIsAdmin(memberInfo, threadInfo)) {
-      return <Label>Admin</Label>;
-    } else if (memberHasAdminPowers(memberInfo)) {
-      return <Label>Parent admin</Label>;
+    // The parent admin is not associated to a role ID, so check for it first.
+    if (memberHasAdminPowers(memberInfo)) {
+      return <Label variant="grey">Admins</Label>;
+    }
+
+    if (roleName) {
+      return <Label variant="grey">{roleName}</Label>;
     }
+
     return null;
-  }, [memberInfo, threadInfo]);
+  }, [memberInfo, roleName]);
 
   const memberContainerClasses = classNames(css.memberContainer, {
     [css.memberContainerWithMenuOpen]: isMenuOpen,
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -153,6 +153,8 @@
   --members-modal-member-text-hover: var(--shades-white-100);
   --label-default-bg: var(--violet-dark-80);
   --label-default-color: var(--shades-white-80);
+  --label-grey-bg: var(--shades-black-80);
+  --label-grey-color: var(--shades-white-80);
   --subchannels-modal-color: var(--shades-black-60);
   --subchannels-modal-color-hover: var(--shades-white-100);
   --color-selector-active-bg: var(--shades-black-80);