diff --git a/website/client/app.vue b/website/client/app.vue
index 786e4a663f..02ec7ece78 100644
--- a/website/client/app.vue
+++ b/website/client/app.vue
@@ -400,7 +400,16 @@ export default {
       if (item.purchaseType === 'card') {
         this.selectedSpellToBuy = item;
 
+        // hide the dialog
         this.$root.$emit('bv::hide::modal', 'buy-modal');
+        // remove the dialog from our modal-stack,
+        // the default hidden event is delayed
+        this.$root.$emit('bv::modal::hidden', {
+          target: {
+            id: 'buy-modal',
+          },
+        });
+
         this.$root.$emit('bv::show::modal', 'select-member-modal');
       }
     },
@@ -411,6 +420,7 @@ export default {
       if (this.selectedSpellToBuy.pinType === 'card') {
         const newUserGp = castResult.data.data.user.stats.gp;
         this.$store.state.user.data.stats.gp = newUserGp;
+        this.text(this.$t('sentCardToUser', { profileName: member.profile.name }));
       }
 
       this.selectedSpellToBuy = null;
diff --git a/website/client/components/members/classBadge.vue b/website/client/components/members/classBadge.vue
index abc6e35e76..a5033b7dfc 100644
--- a/website/client/components/members/classBadge.vue
+++ b/website/client/components/members/classBadge.vue
@@ -19,6 +19,7 @@
     position: absolute;
     left: calc(50% - (16px));
     bottom: -($badge-size / 2);
+    z-index: 1;
   }
 
   .svg-icon {
@@ -52,4 +53,4 @@ export default {
     };
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/website/common/locales/en/generic.json b/website/common/locales/en/generic.json
index 30e1d28df5..23ce6111e3 100644
--- a/website/common/locales/en/generic.json
+++ b/website/common/locales/en/generic.json
@@ -173,6 +173,8 @@
   "achievementBewilderText": "Helped defeat the Be-Wilder during the 2016 Spring Fling Event!",
   "checkOutProgress": "Check out my progress in Habitica!",
   "cards": "Cards",
+  "sentCardToUser": "You sent a card to <%= profileName %>",
+  "cardReceivedFrom": "<%= cardType %> from <%= userName %>",
   "cardReceived": "You received a <span class=\"notification-bold-blue\"><%= card %></span>",
   "greetingCard": "Greeting Card",
   "greetingCardExplanation": "You both receive the Cheery Chum achievement!",