diff --git a/website/client/src/components/shops/balanceInfo.vue b/website/client/src/components/shops/balanceInfo.vue
index d473034538..aaf28ad066 100644
--- a/website/client/src/components/shops/balanceInfo.vue
+++ b/website/client/src/components/shops/balanceInfo.vue
@@ -3,6 +3,7 @@
     <div
       v-for="currency of currencies"
       :key="currency.key"
+      :needed-currency-only="neededCurrencyOnly"
       class="d-flex align-items-center"
     >
       <div
@@ -54,6 +55,9 @@ export default {
     amountNeeded: {
       type: Number,
     },
+    neededCurrencyOnly: {
+      type: Boolean,
+    },
   },
   data () {
     return {
@@ -66,34 +70,34 @@ export default {
   },
   computed: {
     currencies () {
-      const currencies = [];
-      currencies.push({
+      const currencies = [{
         type: 'hourglasses',
         icon: this.icons.hourglasses,
         value: this.userHourglasses,
-      });
+      },
 
-      currencies.push({
+      {
         type: 'gems',
         icon: this.icons.gem,
         value: this.userGems,
-      });
+      },
 
-      currencies.push({
+      {
         type: 'gold',
         icon: this.icons.gold,
         value: this.userGold,
-      });
+      }];
 
       for (const currency of currencies) {
-        if (
-          currency.type === this.currencyNeeded
-          && !this.enoughCurrency(this.currencyNeeded, this.amountNeeded)
+        if (currency.type === this.currencyNeeded
+        && !this.enoughCurrency(this.currencyNeeded, this.amountNeeded)
         ) {
           currency.notEnough = true;
         }
       }
-
+      if (this.neededCurrencyOnly) {
+        return currencies.filter(curr => curr.type === this.currencyNeeded);
+      }
       return currencies;
     },
   },
diff --git a/website/client/src/pages/settings/components/yourBalance.vue b/website/client/src/pages/settings/components/yourBalance.vue
index 2e439cfffd..57fa3ca33e 100644
--- a/website/client/src/pages/settings/components/yourBalance.vue
+++ b/website/client/src/pages/settings/components/yourBalance.vue
@@ -11,6 +11,7 @@
       class="balance-info"
       :currency-needed="currencyNeeded"
       :amount-needed="amountNeeded"
+      :neededCurrencyOnly="true"
     />
   </div>
 </template>
diff --git a/website/client/src/pages/settings/settingRows/classSetting.vue b/website/client/src/pages/settings/settingRows/classSetting.vue
index f4c7e4f64c..549f120316 100644
--- a/website/client/src/pages/settings/settingRows/classSetting.vue
+++ b/website/client/src/pages/settings/settingRows/classSetting.vue
@@ -66,6 +66,7 @@
           <your-balance
             :amount-needed="amountNeeded"
             currency-needed="gems"
+            class="d-flex align-items-center"
           />
         </div>
       </td>