diff --git a/web/src/ui/timeline/content/MemberBody.tsx b/web/src/ui/timeline/content/MemberBody.tsx
index 147a49e..dccaf1f 100644
--- a/web/src/ui/timeline/content/MemberBody.tsx
+++ b/web/src/ui/timeline/content/MemberBody.tsx
@@ -87,9 +87,11 @@ const MemberBody = ({ event, sender }: EventContentProps) => {
 	const content = event.content as MemberEventContent
 	const prevContent = event.unsigned.prev_content as MemberEventContent | undefined
 	return <div className="member-body">
-		{sender?.content.displayname ?? event.sender} {
-			useChangeDescription(event.sender, event.state_key as UserID, content, prevContent)
-		}
+		<span className="sender-name">{sender?.content.displayname ?? event.sender}</span>
+		<span className="change-description">
+			{useChangeDescription(event.sender, event.state_key as UserID, content, prevContent)}
+		</span>
+		{content.reason ? <span className="reason">for {content.reason}</span> : null}
 	</div>
 }