diff --git a/jam-ui/src/components/profile/JKConnectButton.js b/jam-ui/src/components/profile/JKConnectButton.js
index 271511923..2b9d75a8f 100644
--- a/jam-ui/src/components/profile/JKConnectButton.js
+++ b/jam-ui/src/components/profile/JKConnectButton.js
@@ -62,24 +62,27 @@ const JKConnectButton = props => {
   const unFriend = () => {
     setIsRemoving(true);
     disconnect(currentUser.id, user.id)
-      .then(resp => {
+      .then(async resp => {
         if (resp.ok) {
+          afterUnFriend();
           dispatch(removeFriend(user.id));
         }
       })
       .catch(err => {
         toast.error('An error encountered when removing friend');
-      })
-      .finally(() => {
-        setIsFriend(false);
-        setPendingFriendRequest(false);
-        setIsRemoving(false);
-        setShowConfirmModal(false);
+        afterUnFriend();
       });
   };
 
+  const afterUnFriend = () => {
+    setIsFriend(false);
+    setPendingFriendRequest(false);
+    setIsRemoving(false);
+    setShowConfirmModal(false);
+  };
+
   const buttonTitle = useMemo(() => {
-    let title = "";
+    let title = '';
     if (!isFriend && pendingFriendRequest) {
       title = 'Delete pending friend request';
     } else if (!isFriend) {
@@ -105,8 +108,13 @@ const JKConnectButton = props => {
             disabled={pendingFriendRequest}
           >
             {addContent}
-            </Button>
-          <Tooltip placement="top" isOpen={tooltipOpen} target={`connect-user-${user.id}`} toggle={() => setTooltipOpen(!tooltipOpen)}>
+          </Button>
+          <Tooltip
+            placement="top"
+            isOpen={tooltipOpen}
+            target={`connect-user-${user.id}`}
+            toggle={() => setTooltipOpen(!tooltipOpen)}
+          >
             {buttonTitle}
           </Tooltip>
           {/* <ConnectConfirmModal
@@ -129,7 +137,12 @@ const JKConnectButton = props => {
           >
             {removeContent}
           </Button>
-          <Tooltip placement="top" isOpen={tooltipOpen} target={`disconnect-user-${user.id}`} toggle={() => setTooltipOpen(!tooltipOpen)}>
+          <Tooltip
+            placement="top"
+            isOpen={tooltipOpen}
+            target={`disconnect-user-${user.id}`}
+            toggle={() => setTooltipOpen(!tooltipOpen)}
+          >
             {buttonTitle}
           </Tooltip>
           <RemoveConfirmModal
@@ -149,14 +162,13 @@ JKConnectButton.propTypes = {
   user: PropTypes.object.isRequired,
   currentUser: PropTypes.object.isRequired,
   addContent: PropTypes.element.isRequired,
-  removeContent: PropTypes.element.isRequired,
- 
+  removeContent: PropTypes.element.isRequired
 };
 
 JKConnectButton.defaultProps = {
-  color: 'primary', 
+  color: 'primary',
   size: 'sm',
-  outline: false 
+  outline: false
 };
 
 // const ConnectConfirmModal = props => {
@@ -203,9 +215,7 @@ const RemoveConfirmModal = props => {
       <ModalBody>Are you sure to remove {user.name} from your friend list?</ModalBody>
       <ModalFooter>
         <Button color="primary" onClick={accept} disabled={isRemoving}>
-          {
-            isRemoving ? 'Removing...' : 'Yes'
-          }
+          {isRemoving ? 'Removing...' : 'Yes'}
         </Button>{' '}
         <Button color="secondary" onClick={toggle} disabled={isRemoving}>
           Cancel