diff --git a/website/views/options/profile.jade b/website/views/options/profile.jade
index b251ec978a..8867593f24 100644
--- a/website/views/options/profile.jade
+++ b/website/views/options/profile.jade
@@ -20,7 +20,7 @@ mixin customizeProfile(mobile)
           +gemCost(2)
             button.btn.btn-xs(ng-click='#{unlockPath(path, colors)}')!= env.t('unlockSet',{cost:5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
         each color in colors
-          button.customize-option(type='button', class='#{path=="skin" ? "skin_"+color : "customize-option hair hair_bangs_1_"+color}', ng-class='{locked: !user.purchased.#{path}["#{color}"]}', ng-if='#{status!="disabled"} || user.purchased.#{path}["#{color}"]', ng-click='unlock("#{path}.#{color}")')
+          button.customize-option(type='button', class='#{path=="skin" ? "skin_"+color : "customize-option hair hair_bangs_1_"+color}', ng-class='{locked: !user.purchased.#{path}["#{color}"], selectableInventory: user.preferences.#{path} == "#{color}"}', ng-if='#{status!="disabled"} || user.purchased.#{path}["#{color}"]', ng-click='unlock("#{path}.#{color}")')
 
   div(class=mobile ? 'padding' : 'container-fluid row')
     .col-md-4
@@ -36,7 +36,7 @@ mixin customizeProfile(mobile)
         li.customize-menu
           menu(label=env.t('shirts'))
             each shirt in ['black', 'blue', 'green', 'pink', 'white', 'yellow']
-              button.customize-option(class='{{user.preferences.size}}_shirt_'+shirt, type='button', ng-click='set({"preferences.shirt":"'+shirt+'"})')
+              button.customize-option(class='{{user.preferences.size}}_shirt_'+shirt, type='button', ng-click='set({"preferences.shirt":"'+shirt+'"})', ng-class='{selectableInventory: user.preferences.shirt == "#{shirt}"}')
 
           menu(label=env.t('specialShirts'))
             - var specialShirts = ['convict', 'cross', 'fire', 'horizon', 'ocean', 'purple', 'rainbow', 'redblue', 'thunder', 'tropical', 'zombie']
@@ -44,7 +44,7 @@ mixin customizeProfile(mobile)
               +gemCost(2)
                 button.btn.btn-xs(ng-click='#{unlockPath("shirt",specialShirts)}')!= env.t('unlockSet',{cost:5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
             each shirt in specialShirts
-              button.customize-option(type='button', class='{{user.preferences.size}}_shirt_'+shirt, ng-class='{locked: !user.purchased.shirt.'+shirt+'}', ng-click='unlock("shirt.'+shirt+'")')
+              button.customize-option(type='button', class='{{user.preferences.size}}_shirt_'+shirt, ng-class='{locked: !user.purchased.shirt.'+shirt+', selectableInventory: user.preferences.shirt == "#{shirt}"}', ng-click='unlock("shirt.'+shirt+'")')
 
       h3(class=mobile?'item item-divider':'')=env.t('accessories')
 
@@ -54,7 +54,7 @@ mixin customizeProfile(mobile)
           span(ng-hide='#{showPath("user.items.gear.owned", gearGroup("animal"), "&&")}')
             +gemCost(2)
               button.btn.btn-xs(ng-click='#{unlockPath("items.gear.owned", gearGroup("animal"))}')!= env.t('unlockSet', {cost: 5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
-          button.customize-option(ng-repeat='item in ::getGearArray("animal")' ng-class="{locked: user.items.gear.owned[item.key] == undefined}", popover='{{::item.notes()}}', popover-title='{{::item.text()}}', popover-trigger='mouseenter', popover-placement='right', popover-append-to-body='true', ng-click='purchase(item.type,item)', class='shop_{{::item.key}}')
+          button.customize-option(ng-repeat='item in ::getGearArray("animal")' ng-class="{locked: user.items.gear.owned[item.key] == undefined, selectableInventory: user.preferences.costume ? user.items.gear.costume.headAccessory == item.key : user.items.gear.equipped.headAccessory == item.key}", popover='{{::item.notes()}}', popover-title='{{::item.text()}}', popover-trigger='mouseenter', popover-placement='right', popover-append-to-body='true', ng-click='purchase(item.type,item)', class='shop_{{::item.key}}')
 
     .col-md-4
         h3(class=mobile?'item item-divider':'')=env.t('bodyHead')
@@ -66,11 +66,11 @@ mixin customizeProfile(mobile)
           li.customize-menu
             menu(label=env.t('color'))
               each color in ['white','brown','blond','red','black']
-                button(type='button', class='#{path=="skin" ? "skin_"+color : "customize-option hair hair_bangs_1_"+color}', ng-click='set({"preferences.hair.color": "#{color}"})')
+                button(type='button', class='#{path=="skin" ? "skin_"+color : "customize-option hair hair_bangs_1_"+color}', ng-click='set({"preferences.hair.color": "#{color}"})', ng-class='{selectableInventory: user.preferences.hair.color == "#{color}"}') 
               each color in ['candycane','frost','winternight','holly']
-                button(type='button', ng-if='user.purchased.hair.color.#{color}', class='customize-option hair hair_bangs_1_#{color}', ng-click='unlock("hair.color.#{color}")')
+                button(type='button', ng-if='user.purchased.hair.color.#{color}', class='customize-option hair hair_bangs_1_#{color}', ng-click='unlock("hair.color.#{color}")', ng-class='{selectableInventory: user.preferences.hair.color == "#{color}"}')
               each color in ['pblue','pgreen','porange','ppink','ppurple','pyellow']
-                button(type='button', ng-if='user.purchased.hair.color.#{color}', class='customize-option hair hair_bangs_1_#{color}', ng-click='unlock("hair.color.#{color}")')
+                button(type='button', ng-if='user.purchased.hair.color.#{color}', class='customize-option hair hair_bangs_1_#{color}', ng-click='unlock("hair.color.#{color}")', ng-class='{selectableInventory: user.preferences.hair.color == "#{color}"}')
           +buyPref('hair.color', ['rainbow','yellow','green','purple','blue','TRUred'], 'rainbowColors')
           +buyPref('hair.color', ['pblue2','pgreen2','porange2','ppink2','ppurple2','pyellow2'], 'shimmerColors', 'disabled')
           +buyPref('hair.color', ['candycorn','ghostwhite','halloween','midnight','pumpkin','zombie'], 'hauntedColors', 'disabled')
@@ -81,15 +81,15 @@ mixin customizeProfile(mobile)
 
             // Bangs
             menu(label=env.t('hairBangs'))
-              button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.bangs":0})')
+              button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.bangs":0})', ng-class='{selectableInventory: user.preferences.hair.bangs == 0}')
               each num in [1,2,3]
-                button(class='hair_bangs_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-click='set({"preferences.hair.bangs":#{num}})')
+                button(class='hair_bangs_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-click='set({"preferences.hair.bangs":#{num}})', ng-class='{selectableInventory: user.preferences.hair.bangs == "#{num}"}')
 
             // Base hairstyles (free)
             menu(label=env.t('hairBase'))
-              button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.base":0})')
+              button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.base":0})', ng-class='{selectableInventory: user.preferences.hair.base == 0}')
               each num in [1,3]
-                button(class='hair_base_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-click='set({"preferences.hair.base":#{num}})')
+                button(class='hair_base_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-click='set({"preferences.hair.base":#{num}})', ng-class='{selectableInventory: user.preferences.hair.base == "#{num}"}')
 
             // Purchasable hairstyles
             menu(label=env.t('hairSet1'))
@@ -98,22 +98,22 @@ mixin customizeProfile(mobile)
                 +gemCost(2)
                   button.btn.btn-xs(ng-click='#{unlockPath("hair.base",styles)}')!= env.t('unlockSet',{cost:5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
               each num in styles
-                button(class='hair_base_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.base["#{num}"]}', ng-click='unlock("hair.base.#{num}")')
+                button(class='hair_base_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.base["#{num}"], selectableInventory: user.preferences.hair.base == "#{num}"}', ng-click='unlock("hair.base.#{num}")')
             menu(label=env.t('hairSet2'))
               - var styles = [9,10,11,12,13,14]
               span(ng-hide='#{showPath("user.purchased.hair.base", styles, "&&")}')
                 +gemCost(2)
                   button.btn.btn-xs(ng-click='#{unlockPath("hair.base", styles)}')!= env.t('unlockSet', {cost: 5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
               each num in styles
-                button(class='hair_base_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.base["#{num}"]}', ng-click='unlock("hair.base.#{num}")')
+                button(class='hair_base_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.base["#{num}"], selectableInventory: user.preferences.hair.base == "#{num}"}', ng-click='unlock("hair.base.#{num}")')
 
 
           // Flower
           li.customize-menu
             menu(label=env.t('flower'))
-              button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.flower":0})')
+              button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.flower":0})', ng-class='{selectableInventory: user.preferences.hair.flower == 0}')
               each num in [1,2,3,4,5,6]
-                button(class='hair_flower_#{num} customize-option', type='button', ng-click='set({"preferences.hair.flower":#{num}})')
+                button(class='hair_flower_#{num} customize-option', type='button', ng-click='set({"preferences.hair.flower":#{num}})', ng-class='{selectableInventory: user.preferences.hair.flower == "#{num}"}')
 
           li.customize-menu
             menu(label=env.t('bodyFacialHair'))
@@ -123,15 +123,15 @@ mixin customizeProfile(mobile)
 
             // Beard
             menu(label=env.t('beard'))
-              button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.beard":0})')
+              button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.beard":0})', ng-class='{selectableInventory: user.preferences.hair.beard == 0}')
               each num in [1,2,3]
-                button(class='hair_beard_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.beard["#{num}"]}', ng-click='unlock("hair.beard.#{num}")')
+                button(class='hair_beard_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.beard["#{num}"], selectableInventory: user.preferences.hair.beard == "#{num}"}', ng-click='unlock("hair.beard.#{num}")')
 
             // Mustache
             menu(label=env.t('mustache'))
-              button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.mustache":0})')
+              button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.mustache":0})', ng-class='{selectableInventory: user.preferences.hair.mustache == 0}')
               each num in [1,2]
-                button(class='hair_mustache_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.mustache["#{num}"]}', ng-click='unlock("hair.mustache.#{num}")')
+                button(class='hair_mustache_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.mustache["#{num}"], selectableInventory: user.preferences.hair.mustache == "#{num}"}', ng-click='unlock("hair.mustache.#{num}")')
 
     .col-md-4
         h3(class=mobile?'item item-divider':'')=env.t('bodySkin')
@@ -140,7 +140,7 @@ mixin customizeProfile(mobile)
           li.customize-menu
             menu(label=env.t('basicSkins'))
               each color in ['ddc994','f5a76e','ea8349','c06534','98461a','915533','c3e1dc','6bd049']
-                button.customize-option(type='button', class='skin_#{color}', ng-click='set({"preferences.skin":"#{color}"})')
+                button.customize-option(type='button', class='skin_#{color}', ng-click='set({"preferences.skin":"#{color}"})', ng-class='{selectableInventory: user.preferences.skin == "#{color}"}')
 
           // Always-available premium skins
           +buyPref('skin', ['eb052b','f69922','f5d70f','0ff591','2b43f6','d7a9f7','800ed0','rainbow'], 'rainbowSkins')