diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/models/shops/ShopItem.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/models/shops/ShopItem.kt
index dfb2137cf..7f3ffa05b 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/models/shops/ShopItem.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/models/shops/ShopItem.kt
@@ -32,7 +32,7 @@ open class ShopItem : RealmObject(), BaseObject {
             } else {
                 "shop_$key"
             }
-            return if (purchaseType == "customization") {
+            return if (purchaseType == "customization" && name?.startsWith("icon_") == false) {
                 "icon_$name"
             } else {
                 name
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/shops/PurchaseDialogCustomizationContent.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/shops/PurchaseDialogCustomizationContent.kt
index f69aaae3e..e8cfa3745 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/shops/PurchaseDialogCustomizationContent.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/shops/PurchaseDialogCustomizationContent.kt
@@ -60,12 +60,12 @@ class PurchaseDialogCustomizationContent(context: Context) : PurchaseDialogConte
             layerMap[it] = shopItem.imageName?.replace("shop_", "")?.replace("icon_", "")
             if (path.contains("color")) {
                 val hairColor = shopItem.key.split("_").last()
-                if ((user.preferences?.hair?.base ?: 0) > 0) {
-                    layerMap[AvatarView.LayerType.HAIR_BASE] = "hair_base_" + user.preferences?.hair?.base + "_" + hairColor
-                }
                 if ((user.preferences?.hair?.bangs ?: 0) > 0) {
                     layerMap[AvatarView.LayerType.HAIR_BANGS] = "hair_bangs_" + user.preferences?.hair?.bangs + "_" + hairColor
                 }
+                if ((user.preferences?.hair?.base ?: 0) > 0) {
+                    layerMap[AvatarView.LayerType.HAIR_BASE] = "hair_base_" + user.preferences?.hair?.base + "_" + hairColor
+                }
                 if ((user.preferences?.hair?.mustache ?: 0) > 0) {
                     layerMap[AvatarView.LayerType.HAIR_MUSTACHE] = "hair_mustache_" + user.preferences?.hair?.mustache + "_" + hairColor
                 }
diff --git a/common/src/main/java/com/habitrpg/common/habitica/views/AvatarView.kt b/common/src/main/java/com/habitrpg/common/habitica/views/AvatarView.kt
index b0b9997e2..26f891d49 100644
--- a/common/src/main/java/com/habitrpg/common/habitica/views/AvatarView.kt
+++ b/common/src/main/java/com/habitrpg/common/habitica/views/AvatarView.kt
@@ -15,6 +15,7 @@ import android.util.AttributeSet
 import android.util.Log
 import android.widget.FrameLayout
 import android.widget.ImageView
+import androidx.constraintlayout.helper.widget.Layer
 import androidx.core.view.marginStart
 import androidx.core.view.marginTop
 import coil.dispose
@@ -156,7 +157,8 @@ class AvatarView : FrameLayout {
 
         numberLayersInProcess.set(layerMap.size)
 
-        for ((layerKey, layerName) in layerMap) {
+        for (layerKey in LAYER_ORDER) {
+            val layerName = layerMap[layerKey] ?: continue
             val layerNumber = i++
 
             val imageView =
@@ -249,15 +251,16 @@ class AvatarView : FrameLayout {
         }
 
         var backgroundName = avatar.preferences?.background
+        if (showBackground && backgroundName?.isNotEmpty() == true) {
+            backgroundName = substituteOrReturn(spriteSubstitutions["backgrounds"], backgroundName)
+            layerMap[LayerType.BACKGROUND] = "background_$backgroundName"
+            if (resetHasAttributes) hasBackground = true
+        }
         if (!preview.isNullOrEmpty()) {
             for ((key, value) in preview ?: emptyMap()) {
                 layerMap[key] = value
                 if (resetHasAttributes && key == LayerType.BACKGROUND) hasBackground = true
             }
-        } else if (showBackground && backgroundName?.isNotEmpty() == true) {
-            backgroundName = substituteOrReturn(spriteSubstitutions["backgrounds"], backgroundName)
-            layerMap[LayerType.BACKGROUND] = "background_$backgroundName"
-            if (resetHasAttributes) hasBackground = true
         }
 
         if (showSleeping && avatar.sleep) {
@@ -367,13 +370,12 @@ class AvatarView : FrameLayout {
 
             if (hair != null) {
                 val hairColor = hair.color
-
-                if (hair.isAvailable(hair.base)) {
-                    layerMap[LayerType.HAIR_BASE] = "hair_base_" + hair.base + "_" + hairColor
-                }
                 if (hair.isAvailable(hair.bangs)) {
                     layerMap[LayerType.HAIR_BANGS] = "hair_bangs_" + hair.bangs + "_" + hairColor
                 }
+                if (hair.isAvailable(hair.base)) {
+                    layerMap[LayerType.HAIR_BASE] = "hair_base_" + hair.base + "_" + hairColor
+                }
                 if (hair.isAvailable(hair.mustache)) {
                     layerMap[LayerType.HAIR_MUSTACHE] = "hair_mustache_" + hair.mustache + "_" + hairColor
                 }
@@ -572,5 +574,31 @@ class AvatarView : FrameLayout {
         private val FULL_HERO_RECT = Rect(0, 0, 140, 147)
         private val COMPACT_HERO_RECT = Rect(0, 0, 114, 114)
         private val HERO_ONLY_RECT = Rect(0, 0, 90, 90)
+
+        private val LAYER_ORDER = listOf<LayerType>(
+            LayerType.BACKGROUND,
+            LayerType.MOUNT_BODY,
+            LayerType.CHAIR,
+            LayerType.BACK,
+            LayerType.SKIN,
+            LayerType.SHIRT,
+            LayerType.ARMOR,
+            LayerType.HEAD_0,
+            LayerType.HAIR_BANGS,
+            LayerType.HAIR_BASE,
+            LayerType.HAIR_MUSTACHE,
+            LayerType.HAIR_BEARD,
+            LayerType.BODY,
+            LayerType.EYEWEAR,
+            LayerType.VISUAL_BUFF,
+            LayerType.HEAD,
+            LayerType.HEAD_ACCESSORY,
+            LayerType.HAIR_FLOWER,
+            LayerType.SHIELD,
+            LayerType.WEAPON,
+            LayerType.MOUNT_HEAD,
+            LayerType.ZZZ,
+            LayerType.PET,
+        )
     }
 }