diff --git a/app/assets/stylesheets/junto.css.erb b/app/assets/stylesheets/junto.css.erb
index c8cc6ab7..f738705f 100644
--- a/app/assets/stylesheets/junto.css.erb
+++ b/app/assets/stylesheets/junto.css.erb
@@ -223,8 +223,8 @@
   float: right;
   background: #4FC059 url(<%= asset_path 'invitepeer16.png' %>) no-repeat center center;
 }
-.chat-box .participants .participant.pending .chat-participant-invite-call,
-.chat-box .participants .participant.pending .chat-participant-invite-join {
+.chat-box .participants .participant .chat-participant-invite-call.pending,
+.chat-box .participants .participant .chat-participant-invite-join.pending {
     background: #dab539 url(<%= asset_path 'ellipsis.gif' %>) no-repeat center center;
 }
 .chat-box .participants .participant .chat-participant-participating {
diff --git a/frontend/src/components/MapChat/Participant.js b/frontend/src/components/MapChat/Participant.js
index d8552dfc..340c92a4 100644
--- a/frontend/src/components/MapChat/Participant.js
+++ b/frontend/src/components/MapChat/Participant.js
@@ -12,12 +12,12 @@ class Participant extends Component {
 					{username} {self ? '(me)' : ''}
 				</div>
 				{!self && !conversationLive && <button
-					className='button chat-participant-invite-call'
-					onClick={() => this.props.inviteACall(id)} // Realtime.inviteACall(id)
+					className={`button chat-participant-invite-call ${isPending ? 'pending' : ''}`}
+					onClick={() => !isPending && this.props.inviteACall(id)} // Realtime.inviteACall(id)
 				/>}
 				{!self && mapperIsLive && !isParticipating && <button
-					className="button chat-participant-invite-join"
-					onClick={() => this.props.inviteToJoin(id)} // Realtime.inviteToJoin(id)
+					className={`button chat-participant-invite-join ${isPending ? 'pending' : ''}`}
+					onClick={() => !isPending && this.props.inviteToJoin(id)} // Realtime.inviteToJoin(id)
 				/>}
 				{isParticipating && <span className="chat-participant-participating">
 					<div className="green-dot"></div>