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
@@ -16,19 +16,21 @@
   ThreadInfo,
 } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
-import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js';
 
 import ChangeMemberRoleModal from './change-member-role-modal.react.js';
 import css from './members-modal.css';
 import UserAvatar from '../../../avatars/user-avatar.react.js';
 import CommIcon from '../../../CommIcon.react.js';
-import Label from '../../../components/label.react.js';
 import MenuItem from '../../../components/menu-item.react.js';
 import Menu from '../../../components/menu.react.js';
 import { usePushUserProfileModal } from '../../user-profile/user-profile-utils.js';
 
 const commIconComponent = <CommIcon size={18} icon="user-edit" />;
 
+const editIconComponent = (
+  <SWMansionIcon icon="edit-1" size={18} className={css.editIcon} />
+);
+
 type Props = {
   +memberInfo: RelativeMemberInfo,
   +threadInfo: ThreadInfo,
@@ -40,9 +42,6 @@
   const { pushModal } = useModalContext();
   const userName = stringForUser(memberInfo);
 
-  const roles = useRolesFromCommunityThreadInfo(threadInfo, [memberInfo]);
-  const roleName = roles.get(memberInfo.id)?.name;
-
   const onMenuChange = React.useCallback(
     (menuOpen: boolean) => {
       if (menuOpen) {
@@ -103,28 +102,17 @@
     [memberInfo, onClickRemoveUser, onClickChangeRole, threadInfo],
   );
 
-  const userSettingsIcon = React.useMemo(
-    () => <SWMansionIcon icon="edit-1" size={17} />,
-    [],
-  );
-
-  const label = React.useMemo(
-    () => <Label variant="grey">{roleName}</Label>,
-    [roleName],
-  );
-
   const pushUserProfileModal = usePushUserProfileModal(memberInfo.id);
 
   return (
     <div className={css.memberContainer} onClick={pushUserProfileModal}>
       <div className={css.memberInfo}>
         <UserAvatar size="S" userID={memberInfo.id} />
-        {userName}
-        {label}
+        <div className={css.username}>{userName}</div>
       </div>
       <div className={css.memberAction}>
         <Menu
-          icon={userSettingsIcon}
+          icon={editIconComponent}
           variant="member-actions"
           onChange={onMenuChange}
         >
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -29,7 +29,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding: 8px 16px;
+  padding: 8px;
 }
 
 div.memberContainer:hover {
@@ -39,14 +39,27 @@
 }
 
 div.memberInfo {
-  font-size: var(--l-font-18);
   display: flex;
   align-items: center;
   gap: 10px;
+  overflow: hidden;
+}
+
+.username {
+  color: var(--text-background-secondary-default);
+  font-size: var(--s-font-14);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.editIcon {
+  color: var(--button-label-tertiary-default);
 }
 
 div.memberAction {
   position: relative;
+  margin-left: 8px;
 }
 
 h5.memberletterHeader {