diff --git a/website/client/assets/scss/badge.scss b/website/client/assets/scss/badge.scss
index 8b2b555a9df..629cb720117 100644
--- a/website/client/assets/scss/badge.scss
+++ b/website/client/assets/scss/badge.scss
@@ -17,7 +17,6 @@
 }
 
 .badge-item {
-  cursor: pointer;
   position: absolute;
   top: -9px;
 }
diff --git a/website/client/components/inventory/equipment/index.vue b/website/client/components/inventory/equipment/index.vue
index 5987aed3012..04d8d0dbd0f 100644
--- a/website/client/components/inventory/equipment/index.vue
+++ b/website/client/components/inventory/equipment/index.vue
@@ -75,7 +75,7 @@
           template(slot="popoverContent", scope="ctx")
             equipmentAttributesPopover(:item="ctx.item")
           template(slot="itemBadge", scope="ctx")
-            equipmentBadge(
+            starBadge(
               :selected="true",
               :show="!costume || user.preferences.costume",
               @click="equip(ctx.item)",
@@ -100,7 +100,7 @@
           :key="item.key",
         )
           template(slot="itemBadge", scope="ctx")
-            equipmentBadge(
+            starBadge(
               :selected="activeItems[ctx.item.type] === ctx.item.key",
               :show="!costume || user.preferences.costume",
               @click="equip(ctx.item)",
@@ -134,7 +134,7 @@ import toggleSwitch from 'client/components/ui/toggleSwitch';
 
 import Item from 'client/components/inventory/item';
 import EquipmentAttributesPopover from 'client/components/inventory/equipment/attributesPopover';
-import EquipmentBadge from 'client/components/inventory/equipment/badge';
+import StarBadge from 'client/components/inventory/starBadge';
 import Drawer from 'client/components/inventory/drawer';
 
 import i18n from 'common/script/i18n';
@@ -144,7 +144,7 @@ export default {
   components: {
     Item,
     EquipmentAttributesPopover,
-    EquipmentBadge,
+    StarBadge,
     Drawer,
     bDropdown,
     bDropdownItem,
diff --git a/website/client/components/inventory/item.vue b/website/client/components/inventory/item.vue
index 4d7e1925496..c20d0def708 100644
--- a/website/client/components/inventory/item.vue
+++ b/website/client/components/inventory/item.vue
@@ -18,12 +18,6 @@ b-popover(
       slot(name="itemBadge", :item="item")
       span.item-content(:class="itemContentClass")
     span.item-label(v-if="label") {{ label }}
-div(v-else)
-  .item-wrapper
-    .item.item-empty
-      .item-content
-    span.item-label(v-if="label") {{ label }}
-
 </template>
 
 <script>
diff --git a/website/client/components/inventory/items/index.vue b/website/client/components/inventory/items/index.vue
index 55436b3bb0d..9066eb0cbe2 100644
--- a/website/client/components/inventory/items/index.vue
+++ b/website/client/components/inventory/items/index.vue
@@ -40,7 +40,7 @@
           v-if="group.open || index < itemsPerLine",
           :item="item",
           :key="item.key",
-          :itemContentClass="`Pet_${group.classPrefix}_${item.key}`"
+          :itemContentClass="`${group.classPrefix}${item.key}`"
           :selected="true",
         )
           template(slot="popoverContent", scope="ctx") 
@@ -69,17 +69,21 @@ import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import Item from 'client/components/inventory/item';
 
+const allowedSpecialItems = ['snowball', 'spookySparkles', 'shinySeed', 'seafoam'];
+
 const groups = [
-  ['eggs', 'Egg'],
-  ['hatchingPotions', 'HatchingPotion'],
-  ['food', 'Food'],
-].map(([group, classPrefix]) => {
+  ['eggs', 'Pet_Egg_'],
+  ['hatchingPotions', 'Pet_HatchingPotion_'],
+  ['food', 'Pet_Food_'],
+  ['special', 'inventory_special_', allowedSpecialItems],
+].map(([group, classPrefix, allowedItems]) => {
   return {
     key: group,
     quantity: 0,
     selected: true,
     open: false,
     classPrefix,
+    allowedItems,
   };
 });
 
@@ -119,7 +123,7 @@ export default {
         const contentItems = this.content[groupKey];
 
         each(this.user.items[groupKey], (itemQuantity, itemKey) => {
-          if (itemQuantity > 0) {
+          if (itemQuantity > 0 && (!group.allowedItems || group.allowedItems.indexOf(itemKey) !== -1)) {
             const item = contentItems[itemKey];
 
             const isSearched = !searchText || item.text().toLowerCase().indexOf(searchText) !== -1;
diff --git a/website/client/components/inventory/equipment/badge.vue b/website/client/components/inventory/starBadge.vue
similarity index 97%
rename from website/client/components/inventory/equipment/badge.vue
rename to website/client/components/inventory/starBadge.vue
index a7d1dbc67e4..7da197f3bc5 100644
--- a/website/client/components/inventory/equipment/badge.vue
+++ b/website/client/components/inventory/starBadge.vue
@@ -10,6 +10,7 @@ span.badge.badge-pill.badge-item.badge-star(
 @import '~client/assets/scss/colors.scss';
 
 .badge-star {
+  cursor: pointer;
   display: none;
   left: -9px;
   color: $gray-400;