diff --git a/test/client/unit/specs/libs/highlightUsers.js b/test/client/unit/specs/libs/highlightUsers.js
index 22d33564a7..a1e24d03d8 100644
--- a/test/client/unit/specs/libs/highlightUsers.js
+++ b/test/client/unit/specs/libs/highlightUsers.js
@@ -7,14 +7,14 @@ describe('highlightUserAndEmail', () => {
 
     const result = highlightUsers(text, 'user', 'displayedUser');
 
-    expect(result).to.contain('<span class="at-highlight at-text">@displayedUser</span>');
+    expect(result).to.contain('<span class="at-text at-highlight">@displayedUser</span>');
   });
 
   it('highlights username', () => {
     const text = 'hello @user';
 
     const result = highlightUsers(text, 'user', 'displayedUser');
-    expect(result).to.contain('<span class="at-highlight at-text">@user</span>');
+    expect(result).to.contain('<span class="at-text at-highlight">@user</span>');
   });
 
   it('not highlights any email', () => {
@@ -32,8 +32,8 @@ describe('highlightUserAndEmail', () => {
 
     const result = highlightUsers(text, 'use', 'mentions');
 
-    expect(result).to.contain('<span class="at-highlight at-text">@mentions</span>');
-    expect(result).to.contain('<span class="at-highlight at-text">@use</span>');
-    expect(result).to.not.contain('<span class="at-highlight at-text">@mentions</span>.com');
+    expect(result).to.contain('<span class="at-text at-highlight">@mentions</span>');
+    expect(result).to.contain('<span class="at-text at-highlight">@use</span>');
+    expect(result).to.not.contain('<span class="at-text at-highlight">@mentions</span>.com');
   });
 });
diff --git a/website/client/components/header/menu.vue b/website/client/components/header/menu.vue
index 040557c5c9..67dcb5a82b 100644
--- a/website/client/components/header/menu.vue
+++ b/website/client/components/header/menu.vue
@@ -3,6 +3,7 @@ div
   inbox-modal
   creator-intro
   profileModal
+  send-gems-modal
   b-navbar.topbar.navbar-inverse.static-top.navbar-expand-lg(type="dark", :class="navbarZIndexClass")
     b-navbar-brand.brand
       .logo.svg-icon.d-none.d-xl-block(v-html="icons.logo")
@@ -343,19 +344,21 @@ import syncIcon from 'assets/svg/sync.svg';
 import svgHourglasses from 'assets/svg/hourglass.svg';
 import logo from 'assets/svg/logo.svg';
 
+import creatorIntro from '../creatorIntro';
 import InboxModal from '../userMenu/inbox.vue';
 import notificationMenu from './notificationsDropdown';
-import creatorIntro from '../creatorIntro';
 import profileModal from '../userMenu/profileModal';
+import sendGemsModal from 'client/components/payments/sendGemsModal';
 import userDropdown from './userDropdown';
 
 export default {
   components: {
-    userDropdown,
+    creatorIntro,
     InboxModal,
     notificationMenu,
-    creatorIntro,
     profileModal,
+    sendGemsModal,
+    userDropdown,
   },
   data () {
     return {
diff --git a/website/client/components/payments/sendGemsModal.vue b/website/client/components/payments/sendGemsModal.vue
index 4933232f98..b03f521f57 100644
--- a/website/client/components/payments/sendGemsModal.vue
+++ b/website/client/components/payments/sendGemsModal.vue
@@ -91,7 +91,6 @@ import notificationsMixin from 'client/mixins/notifications';
 const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
 
 export default {
-  props: ['userReceivingGems'],
   mixins: [paymentsMixin, notificationsMixin],
   data () {
     return {
@@ -110,6 +109,7 @@ export default {
         hrefTechAssistanceEmail: `<a href="mailto:${TECH_ASSISTANCE_EMAIL}">${TECH_ASSISTANCE_EMAIL}</a>`,
       },
       sendingInProgress: false,
+      userReceivingGems: null,
     };
   },
   computed: {
@@ -176,5 +176,11 @@ export default {
       this.$root.$emit('bv::hide::modal', 'send-gems');
     },
   },
+  mounted () {
+    this.$root.$on('habitica::send-gems', (data) => {
+      this.userReceivingGems = data;
+      this.$root.$emit('bv::show::modal', 'send-gems');
+    });
+  },
 };
 </script>
diff --git a/website/client/components/tasks/taskModal.vue b/website/client/components/tasks/taskModal.vue
index f4777f84ce..793ffeafe3 100644
--- a/website/client/components/tasks/taskModal.vue
+++ b/website/client/components/tasks/taskModal.vue
@@ -1009,7 +1009,7 @@ export default {
       }
     },
     handleClick (e) {
-      if (this.$refs.popup && !this.$refs.popup.$el.contains(e.target)) {
+      if (this.$refs.popup && !this.$refs.popup.$el.parentNode.contains(e.target)) {
         this.closeTagsPopup();
       }
     },
diff --git a/website/client/components/userLink.vue b/website/client/components/userLink.vue
index b8d4dc397a..a0fbc576d2 100644
--- a/website/client/components/userLink.vue
+++ b/website/client/components/userLink.vue
@@ -103,7 +103,7 @@
         return this.icons[`tier${this.level}`];
       },
       tierTitle () {
-        return achievementsLib.getContribText(this.level, this.isNPC) || '';
+        return achievementsLib.getContribText(this.contributor, this.isNPC) || '';
       },
       levelStyle () {
         return this.userLevelStyleFromLevel(this.level, this.isNPC);
diff --git a/website/client/components/userMenu/profile.vue b/website/client/components/userMenu/profile.vue
index df5a0a924e..cf544bfbda 100644
--- a/website/client/components/userMenu/profile.vue
+++ b/website/client/components/userMenu/profile.vue
@@ -136,7 +136,6 @@
     v-show='selectedPage === "stats"',
     :showAllocation='showAllocation()',
     v-if='user.preferences')
-  send-gems-modal(:userReceivingGems='userReceivingGems')
 </template>
 
 <style lang="scss" >
@@ -388,7 +387,6 @@ import { mapState } from 'client/libs/store';
 import cloneDeep from 'lodash/cloneDeep';
 
 import MemberDetails from '../memberDetails';
-import sendGemsModal from 'client/components/payments/sendGemsModal';
 import markdown from 'client/directives/markdown';
 import achievementsLib from '../../../common/script/libs/achievements';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
@@ -414,7 +412,6 @@ export default {
     markdown,
   },
   components: {
-    sendGemsModal,
     MemberDetails,
     profileStats,
   },
@@ -434,7 +431,6 @@ export default {
       }),
       adminToolsLoaded: false,
       userIdToMessage: '',
-      userReceivingGems: '',
       editing: false,
       editingProfile: {
         name: '',
@@ -592,8 +588,7 @@ export default {
       axios.post(`/api/v4/user/block/${this.user._id}`);
     },
     openSendGemsModal () {
-      this.userReceivingGems = this.user;
-      this.$root.$emit('bv::show::modal', 'send-gems');
+      this.$root.$emit('habitica::send-gems', this.user);
     },
     adminRevokeChat () {
       if (!this.hero.flags) {
diff --git a/website/client/libs/highlightUsers.js b/website/client/libs/highlightUsers.js
index 7a0daeace7..f6758cc10d 100644
--- a/website/client/libs/highlightUsers.js
+++ b/website/client/libs/highlightUsers.js
@@ -9,15 +9,14 @@ const finalMentionRegEx = new RegExp(`${optionalAnchorTagRegExStr}${mentionRegEx
 export function highlightUsers (text, userName, displayName) {
   const currentUser = [`@${userName}`, `@${displayName}`].map(escapeRegExp);
 
-
   text = text.replace(finalMentionRegEx, (fullMatched, preMention, mentionStr, postMention) => {
     if (preMention && preMention.includes('<a') || Boolean(postMention)) {
       return fullMatched;
     }
 
-    const isUserMention = currentUser.includes(mentionStr) ? 'at-text' : '';
+    const isUserMention = currentUser.includes(mentionStr) ? 'at-highlight' : '';
 
-    return fullMatched.replace(mentionStr, `<span class="at-highlight ${isUserMention}">${mentionStr}</span>`);
+    return fullMatched.replace(mentionStr, `<span class="at-text ${isUserMention}">${mentionStr}</span>`);
   });
 
   return text;