diff --git a/package-lock.json b/package-lock.json
index 4ede53b72a..b82b7dfa3e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "habitica",
-  "version": "5.22.2",
+  "version": "5.22.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "habitica",
-      "version": "5.22.2",
+      "version": "5.22.3",
       "hasInstallScript": true,
       "dependencies": {
         "@babel/core": "^7.22.10",
diff --git a/package.json b/package.json
index 8457571696..22fc2361f8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "5.22.2",
+  "version": "5.22.3",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.22.10",
diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index b373accaae..e50d4d542e 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -541,10 +541,6 @@
         margin: auto -1rem -1rem;
       }
 
-      // .pt-015 {
-      //   padding-top: 0.15rem;
-      // }
-
     .gems-left {
       height: 32px;
       background-color: $green-100;
@@ -596,8 +592,10 @@ import moment from 'moment';
 import planGemLimits from '@/../../common/script/libs/planGemLimits';
 import { drops as dropEggs } from '@/../../common/script/content/eggs';
 import { drops as dropPotions } from '@/../../common/script/content/hatching-potions';
-import spellsMixin from '@/mixins/spells';
+import { avatarEditorUtilities } from '@/mixins/avatarEditUtilities';
 import numberInvalid from '@/mixins/numberInvalid';
+import spellsMixin from '@/mixins/spells';
+import sync from '@/mixins/sync';
 
 import svgClose from '@/assets/svg/close.svg';
 import svgGold from '@/assets/svg/gold.svg';
@@ -644,7 +642,15 @@ export default {
     CountdownBanner,
     numberIncrement,
   },
-  mixins: [buyMixin, currencyMixin, notifications, numberInvalid, spellsMixin],
+  mixins: [
+    avatarEditorUtilities,
+    buyMixin,
+    currencyMixin,
+    notifications,
+    numberInvalid,
+    spellsMixin,
+    sync,
+  ],
   props: {
     // eslint-disable-next-line vue/require-default-prop
     item: {
@@ -754,7 +760,7 @@ export default {
       this.selectedAmountToBuy = 1;
     },
 
-    buyItem () {
+    async buyItem () {
       // @TODO: I  think we should buying to the items.
       // Turn the items into classes, and use polymorphism
       if (this.item.buy) {
@@ -827,7 +833,10 @@ export default {
         return;
       }
 
-      if (this.genericPurchase) {
+      if (this.item.purchaseType === 'customization') {
+        await this.unlock(this.item.path);
+        this.sync();
+      } else if (this.genericPurchase) {
         this.makeGenericPurchase(this.item, 'buyModal', this.selectedAmountToBuy);
         this.purchased(this.item.text);
       }
diff --git a/website/client/src/components/shops/customizations/index.vue b/website/client/src/components/shops/customizations/index.vue
index a7d0233b3b..1c7bfc57aa 100644
--- a/website/client/src/components/shops/customizations/index.vue
+++ b/website/client/src/components/shops/customizations/index.vue
@@ -51,6 +51,7 @@
           <item-rows
             :items="customizationsItems({category, searchBy: searchTextThrottled})"
             :type="category.identifier"
+            :fold-button="category.identifier === 'background'"
             :item-width="94"
             :item-margin="24"
             :max-items-per-row="8"
@@ -87,14 +88,6 @@
     height: 216px;
   }
 
-  .item-rows {
-    max-width: 920px;
-
-    .items > div:nth-of-type(8n) {
-      margin-right: 0px;
-    }
-  }
-
   .npc {
     background-repeat: no-repeat;
   }
diff --git a/website/client/src/components/shops/market/index.vue b/website/client/src/components/shops/market/index.vue
index dae59eca2b..0a6b21f549 100644
--- a/website/client/src/components/shops/market/index.vue
+++ b/website/client/src/components/shops/market/index.vue
@@ -35,6 +35,7 @@
         :hide-pinned="hidePinned"
         :hide-locked="hideLocked"
         :search-by="searchTextThrottled"
+        class="mb-4"
       />
       <layout-section :title="$t('items')">
         <div slot="filters">
@@ -121,6 +122,10 @@
     height: 112px;
   }
 
+  .items {
+    max-width: 944px;
+  }
+
   .market {
     .avatar {
       cursor: default;
diff --git a/website/client/src/components/ui/itemRows.vue b/website/client/src/components/ui/itemRows.vue
index 0dae56b50e..52d850ab14 100644
--- a/website/client/src/components/ui/itemRows.vue
+++ b/website/client/src/components/ui/itemRows.vue
@@ -18,7 +18,7 @@
       </p>
     </div>
     <show-more-button
-      v-if="items.length > itemsPerRow"
+      v-if="foldButton && items.length > itemsPerRow"
       :show-all="showAll"
       @click="toggleItemsToShow()"
     />
@@ -29,7 +29,11 @@
   @import '~@/assets/scss/colors.scss';
 
   .item-rows {
-    margin-right: -1.5rem;
+    max-width: 944px;
+  }
+
+  .btn-show-more {
+    max-width: 920px;
   }
 </style>
 
@@ -64,6 +68,10 @@ export default {
     maxItemsPerRow: {
       type: Number,
     },
+    foldButton: {
+      type: Boolean,
+      default: true,
+    },
   },
   data () {
     return {
@@ -82,7 +90,7 @@ export default {
     },
   },
   created () {
-    this.showAll = this.$_openedItemRows_isToggled(this.type);
+    this.showAll = this.$_openedItemRows_isToggled(this.type) || !this.foldButton;
   },
   methods: {
     toggleItemsToShow () {
diff --git a/website/client/src/components/ui/layoutSection.vue b/website/client/src/components/ui/layoutSection.vue
index cabc28e630..956f06d384 100644
--- a/website/client/src/components/ui/layoutSection.vue
+++ b/website/client/src/components/ui/layoutSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="layout-section">
     <div class="clearfix">
       <h2 class="float-left mb-3 filters-title">
         {{ title }}
@@ -22,13 +22,16 @@ export default {
 </script>
 
 <style scoped lang="scss">
- @media only screen and (max-width: 768px) {
-    .filters, .filters-title {
-      float: none;
-      button {
-        margin-right: 4em;
-        margin-bottom: 1em;
-      }
+.clearfix {
+  max-width: 920px;
+}
+@media only screen and (max-width: 768px) {
+  .filters, .filters-title {
+    float: none;
+    button {
+      margin-right: 4em;
+      margin-bottom: 1em;
     }
   }
+}
 </style>
diff --git a/website/common/locales/en/customizations.json b/website/common/locales/en/customizations.json
new file mode 100644
index 0000000000..77dd044c73
--- /dev/null
+++ b/website/common/locales/en/customizations.json
@@ -0,0 +1,127 @@
+{
+  "0ff591": "Turquoise",
+  "2b43f6": "Blue",
+  "6bd049": "Green",
+  "800ed0": "Purple",
+  "98461a": "Skin Tone 6",
+  "915533": "Skin Tone 1",
+  "aurora": "Aurora",
+  "bear": "Bear",
+  "black": "Black",
+  "blond": "Blond",
+  "blue": "Blue",
+  "braid": "Braid",
+  "brown": "Brown",
+  "c06534": "Skin Tone 5",
+  "c3e1dc": "Cyan",
+  "cactus": "Cactus",
+  "candycane": "Candy Cane",
+  "candycorn": "Candy Corn",
+  "clownfish": "Clownfish",
+  "convict": "Convict",
+  "cross": "Cross",
+  "curlyLong": "Curly Long",
+  "curlyShort": "Curly Short",
+  "d7a9f7": "Lavender",
+  "dapper": "Dapper",
+  "ddc994": "Skin Tone 2",
+  "deepocean": "Deep Ocean",
+  "doubleBraid": "Double Braid",
+  "doubleBun": "Double Bun",
+  "doubleHighPonytail": "Double High Ponytail",
+  "doublePonytail": "Double Ponytail",
+  "ea8349": "Skin Tone 4",
+  "eb052b": "Red",
+  "f5a76e": "Skin Tone 3",
+  "f5d70f": "Yellow",
+  "f69922": "Orange",
+  "fauxhawk": "Fauxhawk",
+  "festive": "Festive",
+  "fire": "Fire",
+  "fox": "Fox",
+  "frost": "Frost",
+  "ghost": "Ghost",
+  "ghostwhite": "Ghost White",
+  "goatee": "Goatee",
+  "green": "Green",
+  "halloween": "Halloween",
+  "highPonytailLeft": "High Ponytail Left",
+  "highPonytailRight": "High Ponytail Right",
+  "holly": "Holly",
+  "hollygreen": "Holly Green",
+  "horizon": "Horizon",
+  "largeMustache": "Large Mustache",
+  "leftBun": "Left Bun",
+  "lion": "Lion",
+  "longBeard": "Long Beard",
+  "merblue": "Merblue",
+  "mergold": "Mergold",
+  "mergreen": "Mergreen",
+  "merruby": "Merruby",
+  "messy": "Messy",
+  "midnight": "Midnight",
+  "mohawk": "Mohawk",
+  "monster": "Monster",
+  "ocean": "Ocean",
+  "ogre": "Ogre",
+  "panda": "Panda",
+  "pastelBlue": "Pastel Blue",
+  "pastelGreen": "Pastel Green",
+  "pastelOrange": "Pastel Orange",
+  "pastelPink": "Pastel Pink",
+  "pastelPurple": "Pastel Purple",
+  "pastelRainbowChevron": "Pastel Rainbow Chevron",
+  "pastelRainbowDiagonal": "Pastel Rainbow Diagonal",
+  "pastelYellow": "Pastel Yellow",
+  "pblue": "Special Pastel Blue",
+  "pblue2": "Pastel Blue",
+  "peppermint": "Peppermint",
+  "pgreen": "Special Pastel Green",
+  "pgreen2": "Pastel Green",
+  "pig": "Pig",
+  "polar": "Polar",
+  "ponytail": "Ponytail",
+  "porange": "Special Pastel Orange",
+  "porange2": "Pastel Orange",
+  "ppink": "Special Pastel Pink",
+  "ppink2": "Pastel Pink",
+  "ppurple": "Special Pastel Purple",
+  "ppurple2": "Pastel Purple",
+  "pumpkin": "Pumpkin",
+  "pumpkin2": "Jack O' Lantern",
+  "purple": "Purple",
+  "pyellow": "Special Pastel Yellow",
+  "pyellow2": "Pastel Yellow",
+  "rainbow": "Rainbow",
+  "red": "Red",
+  "redblue": "Red and Blue",
+  "reptile": "Reptile",
+  "rightBun": "Right Bun",
+  "shadow": "Shadow",
+  "shadow2": "Shade",
+  "shark": "Shark",
+  "shortBeard": "Short Beard",
+  "skeleton": "Skeleton",
+  "skeleton2": "Bones",
+  "smallMustache": "Small Mustache",
+  "snowy": "Snowy",
+  "straightLong": "Straight Long",
+  "straightShort": "Straight Short",
+  "sugar": "Sugar",
+  "thunder": "Thunder",
+  "tiger": "Tiger",
+  "transparent": "Transparent",
+  "tropical": "Tropical",
+  "tropicalwater": "Tropical Water",
+  "TRUred": "Crimson",
+  "updo": "Updo",
+  "wavyLong": "Wavy Long",
+  "wavyShort": "Wavy Short",
+  "white": "White",
+  "winternight": "Winter Night",
+  "winterstar": "Winter Star",
+  "wolf": "Wolf",
+  "yellow": "Yellow",
+  "zombie": "Zombie",
+  "zombie2": "Undead"
+}
\ No newline at end of file
diff --git a/website/common/script/content/appearance/backgrounds.js b/website/common/script/content/appearance/backgrounds.js
index fd2f0f344d..24f174c779 100644
--- a/website/common/script/content/appearance/backgrounds.js
+++ b/website/common/script/content/appearance/backgrounds.js
@@ -666,7 +666,7 @@ const releaseDates = {
   backgrounds012024: '2024-01-04T08:00-05:00',
   backgrounds022024: '2024-02-06T08:00-05:00',
   backgrounds032024: '2024-03-05T08:00-05:00',
-  backgrounds042024: '2024-04-04T00:00-04:00',
+  backgrounds042024: '2023-04-04T00:00-04:00',
 };
 
 const flat = {};
diff --git a/website/common/script/content/appearance/hair/base.js b/website/common/script/content/appearance/hair/base.js
index b8edd502d8..9782d0b987 100644
--- a/website/common/script/content/appearance/hair/base.js
+++ b/website/common/script/content/appearance/hair/base.js
@@ -1,26 +1,27 @@
 import prefill from '../prefill';
 import sets from '../sets';
+import t from '../../translation';
 
 export default prefill({
   0: {},
-  1: {},
-  2: { price: 2, set: sets.baseHair1 },
-  3: {},
-  4: { price: 2, set: sets.baseHair1 },
-  5: { price: 2, set: sets.baseHair1 },
-  6: { price: 2, set: sets.baseHair1 },
-  7: { price: 2, set: sets.baseHair1 },
-  8: { price: 2, set: sets.baseHair1 },
-  9: { price: 2, set: sets.baseHair2 },
-  10: { price: 2, set: sets.baseHair2 },
-  11: { price: 2, set: sets.baseHair2 },
-  12: { price: 2, set: sets.baseHair2 },
-  13: { price: 2, set: sets.baseHair2 },
-  14: { price: 2, set: sets.baseHair2 },
-  15: { price: 2, set: sets.baseHair3 },
-  16: { price: 2, set: sets.baseHair3 },
-  17: { price: 2, set: sets.baseHair3 },
-  18: { price: 2, set: sets.baseHair3 },
-  19: { price: 2, set: sets.baseHair3 },
-  20: { price: 2, set: sets.baseHair3 },
+  1: { text: t('ponytail')},
+  2: { text: t('doublePonytail'), price: 2, set: sets.baseHair1 },
+  3: { text: t('braid') },
+  4: { text: t('doubleBraid'), price: 2, set: sets.baseHair1 },
+  5: { text: t('wavyLong'), price: 2, set: sets.baseHair1 },
+  6: { text: t('wavyShort'), price: 2, set: sets.baseHair1 },
+  7: { text: t('straightLong'), price: 2, set: sets.baseHair1 },
+  8: { text: t('straightShort'), price: 2, set: sets.baseHair1 },
+  9: { text: t('highPonytailLeft'), price: 2, set: sets.baseHair2 },
+  10: { text: t('leftBun'), price: 2, set: sets.baseHair2 },
+  11: { text: t('highPonytailRight'), price: 2, set: sets.baseHair2 },
+  12: { text: t('rightBun'), price: 2, set: sets.baseHair2 },
+  13: { text: t('doubleHighPonytail'), price: 2, set: sets.baseHair2 },
+  14: { text: t('doubleBun'), price: 2, set: sets.baseHair2 },
+  15: { text: t('updo'), price: 2, set: sets.baseHair3 },
+  16: { text: t('curlyLong'), price: 2, set: sets.baseHair3 },
+  17: { text: t('curlyShort'), price: 2, set: sets.baseHair3 },
+  18: { text: t('messy'), price: 2, set: sets.baseHair3 },
+  19: { text: t('mohawk'), price: 2, set: sets.baseHair3 },
+  20: { text: t('fauxhawk'), price: 2, set: sets.baseHair3 },
 });
diff --git a/website/common/script/content/appearance/hair/beard.js b/website/common/script/content/appearance/hair/beard.js
index b0de3ff35c..845f05cd0d 100644
--- a/website/common/script/content/appearance/hair/beard.js
+++ b/website/common/script/content/appearance/hair/beard.js
@@ -1,9 +1,10 @@
-import sets from '../sets';
 import prefill from '../prefill';
+import sets from '../sets';
+import t from '../../translation';
 
 export default prefill({
   0: {},
-  1: { price: 2, set: sets.facialHair },
-  2: { price: 2, set: sets.facialHair },
-  3: { price: 2, set: sets.facialHair },
+  1: { text: t('goatee'), price: 2, set: sets.facialHair },
+  2: { text: t('shortBeard'), price: 2, set: sets.facialHair },
+  3: { text: t('longBeard'), price: 2, set: sets.facialHair },
 });
diff --git a/website/common/script/content/appearance/hair/mustache.js b/website/common/script/content/appearance/hair/mustache.js
index 231b8fef8b..78c2c6c5a2 100644
--- a/website/common/script/content/appearance/hair/mustache.js
+++ b/website/common/script/content/appearance/hair/mustache.js
@@ -1,8 +1,9 @@
-import sets from '../sets';
 import prefill from '../prefill';
+import sets from '../sets';
+import t from '../../translation';
 
 export default prefill({
   0: {},
-  1: { price: 2, set: sets.facialHair },
-  2: { price: 2, set: sets.facialHair },
+  1: { text: t('smallMustache'), price: 2, set: sets.facialHair },
+  2: { text: t('largeMustache'), price: 2, set: sets.facialHair },
 });
diff --git a/website/common/script/content/appearance/prefill.js b/website/common/script/content/appearance/prefill.js
index 8823a36fd3..73d16fa110 100644
--- a/website/common/script/content/appearance/prefill.js
+++ b/website/common/script/content/appearance/prefill.js
@@ -1,4 +1,5 @@
 import forOwn from 'lodash/forOwn';
+import t from '../translation';
 
 export default function prefillAppearances (obj) {
   forOwn(obj, (value, key) => {
@@ -6,6 +7,9 @@ export default function prefillAppearances (obj) {
     if (!value.price) {
       value.price = 0;
     }
+    if (!value.text) {
+      value.text = t(key);
+    }
   });
   return obj;
 }
diff --git a/website/common/script/content/constants/events.js b/website/common/script/content/constants/events.js
index 1ab77c3bc8..cdccf581ec 100644
--- a/website/common/script/content/constants/events.js
+++ b/website/common/script/content/constants/events.js
@@ -90,7 +90,7 @@ export const EVENTS = {
   },
   aprilFools2024: {
     start: '2024-04-01T00:00-04:00',
-    end: '2024-04-02T20:00-04:00',
+    end: '2024-04-02T08:00-04:00',
     aprilFools: 'Fungi',
   },
   spring2024: {
diff --git a/website/common/script/content/gear/sets/armoire.js b/website/common/script/content/gear/sets/armoire.js
index e55f8ce35d..fb68285d2b 100644
--- a/website/common/script/content/gear/sets/armoire.js
+++ b/website/common/script/content/gear/sets/armoire.js
@@ -1806,7 +1806,7 @@ const releaseDates = {
   schoolUniform: '2024-01-04T08:00-05:00',
   whiteLoungeWear: '2024-02-06T08:00-05:00',
   hatterSet: '2024-03-05T08:00-05:00',
-  optimistSet: '2024-04-04T00:00-05:00',
+  optimistSet: '2024-03-05T00:00-05:00',
 };
 
 forEach({
diff --git a/website/common/script/libs/getItemInfo.js b/website/common/script/libs/getItemInfo.js
index 97aaa671cc..a788601274 100644
--- a/website/common/script/libs/getItemInfo.js
+++ b/website/common/script/libs/getItemInfo.js
@@ -385,7 +385,9 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
         class: `hair hair_bangs_${user.preferences.hair.bangs}_${item.key}`,
         currency: 'gems',
         option: item.key,
+        path: `hair.color.${item.key}`,
         purchaseType: 'customization',
+        text: item.text(language),
         type: 'color',
         value: item.price,
       };
@@ -397,7 +399,9 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
         class: `hair hair_base_${item.key}_${user.preferences.hair.color}`,
         currency: 'gems',
         option: item.key,
+        path: `hair.base.${item.key}`,
         purchaseType: 'customization',
+        text: item.text(language),
         type: 'base',
         value: item.price,
       };
@@ -409,7 +413,9 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
         class: `facial-hair hair_mustache_${item.key}_${user.preferences.hair.color}`,
         currency: 'gems',
         option: item.key,
+        path: `hair.mustache.${item.key}`,
         purchaseType: 'customization',
+        text: item.text(language),
         type: 'mustache',
         value: item.price,
       };
@@ -421,7 +427,9 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
         class: `facial-hair hair_beard_${item.key}_${user.preferences.hair.color}`,
         currency: 'gems',
         option: item.key,
+        path: `hair.beard.${item.key}`,
         purchaseType: 'customization',
+        text: item.text(language),
         type: 'beard',
         value: item.price,
       };
@@ -432,7 +440,9 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
         key: item.key,
         class: `skin skin_${item.key}`,
         currency: 'gems',
+        path: `skin.${item.key}`,
         purchaseType: 'customization',
+        text: item.text(language),
         type: 'skin',
         value: item.price,
       };
@@ -443,7 +453,9 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
         key: item.key,
         class: `shirt ${user.preferences.size}_shirt_${item.key}`,
         currency: 'gems',
+        path: `shirt.${item.key}`,
         purchaseType: 'customization',
+        text: item.text(language),
         type: 'shirt',
         value: item.price,
       };