diff --git a/website/client/src/components/header/menu.vue b/website/client/src/components/header/menu.vue
index d2fded1bbf..19e22fe000 100644
--- a/website/client/src/components/header/menu.vue
+++ b/website/client/src/components/header/menu.vue
@@ -784,6 +784,8 @@ body.modal-open #habitica-menu {
 </style>
 
 <script>
+import getItemInfo from '@/../../common/script/libs/getItemInfo';
+
 import { mapState, mapGetters } from '@/libs/store';
 import { goToModForm } from '@/libs/modform';
 
@@ -893,7 +895,7 @@ export default {
       this.$root.$emit('bv::show::modal', 'create-party-modal');
     },
     showBuyGemsModal () {
-      this.$root.$emit('bv::show::modal', 'buy-gems', { alreadyTracked: true });
+      this.$root.$emit('buyModal::showItem', getItemInfo(this.user, 'gem'));
     },
     dropdownDesktop (hover) {
       if (this.isDesktop() && hover.target.classList.contains('droppable')) {