diff --git a/net/web/src/User/Conversation/Members/MemberItem/MemberItem.jsx b/net/web/src/User/Conversation/Members/MemberItem/MemberItem.jsx
index f3ace7f7..1c7f5d6a 100644
--- a/net/web/src/User/Conversation/Members/MemberItem/MemberItem.jsx
+++ b/net/web/src/User/Conversation/Members/MemberItem/MemberItem.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Avatar } from 'avatar/Avatar';
-import { MemberItemWrapper } from './MemberItem.styled';
+import { MemberItemWrapper, CheckIcon, UncheckIcon } from './MemberItem.styled';
 import { useMemberItem } from './useMemberItem.hook';
 import { Button } from 'antd';
 
@@ -13,9 +13,11 @@ export function MemberItem({ readonly, item }) {
       return <></>
     }
     if (item.member) {
-      return <Button type="primary" size="small" danger onClick={() => actions.clearMembership()}>Remove</Button>
+      return <Button type="link" icon={<CheckIcon />} loading={state.busy}
+        onClick={() => actions.clearMembership()} />
     }
-    return <Button type="primary" size="small" onClick={() => actions.setMembership()}>Add</Button>
+    return <Button type="link" icon={<UncheckIcon />} loading={state.busy}
+        onClick={() => actions.setMembership()} />
   }
 
   return (
diff --git a/net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js b/net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js
index d138579d..30692e77 100644
--- a/net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js
+++ b/net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { CheckSquareOutlined, BorderOutlined } from '@ant-design/icons';
 
 export const MemberItemWrapper = styled.div`
   display: flex;
@@ -37,3 +38,10 @@ export const MemberItemWrapper = styled.div`
   }
 `;
 
+export const CheckIcon = styled(CheckSquareOutlined)`
+  font-size: 20px;
+`;
+
+export const UncheckIcon = styled(BorderOutlined)`
+  font-size: 20px;
+`;
diff --git a/net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js b/net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js
index 71d73e65..869bc29f 100644
--- a/net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js
+++ b/net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js
@@ -7,7 +7,8 @@ export function useMemberItem({ item }) {
   const [state, setState] = useState({
     imageUrl: null,
     name: null,
-    handle: null
+    handle: null,
+    busy: false,
   });
 
   const card = useContext(CardContext);
@@ -27,10 +28,28 @@ export function useMemberItem({ item }) {
 
   const actions = {
     setMembership: async () => {
-      conversation.actions.setChannelCard(item.card.id);
+      if (!state.busy) {
+        updateState({ busy: true });
+        try {
+          conversation.actions.setChannelCard(item.card.id);
+        }
+        catch(err) {
+          window.alert(err);
+        }
+        updateState({ busy: false });
+      }
     },
     clearMembership: async () => {
-      conversation.actions.clearChannelCard(item.card.id);
+      if (!state.busy) {
+        updateState({ busy: true });
+        try {
+          conversation.actions.clearChannelCard(item.card.id);
+        }
+        catch(err) {
+          window.alert(err);
+        }
+        updateState({ busy: false });
+      }
     },
   };