diff --git a/src/store/modules/product/actions.ts b/src/store/modules/product/actions.ts
index 49da7505..d626aae1 100644
--- a/src/store/modules/product/actions.ts
+++ b/src/store/modules/product/actions.ts
@@ -248,6 +248,18 @@ const actions: ActionTree<ProductState, RootState> = {
           product = resp.data.response.docs.find((product: any) => product.productId === payload.productId)
           variants = resp.data.response.docs.filter((product: any) => product.productId !== payload.productId)
         }
+        const features = [['0/COLOR/', '1/COLOR/Black/', '0/SIZE/', '1/SIZE/29/', '0/TYPE/', '1/TYPE/Z/'],
+        ['0/COLOR/', '1/COLOR/Black/', '0/SIZE/', '1/SIZE/28/', '0/TYPE/', '1/TYPE/X/'],
+        ['0/COLOR/', '1/COLOR/Black/', '0/SIZE/', '1/SIZE/28/', '0/TYPE/', '1/TYPE/Y/'],
+        ['0/COLOR/', '1/COLOR/Orange/', '0/SIZE/', '1/SIZE/28/', '0/TYPE/', '1/TYPE/Y/'],
+        ['0/COLOR/', '1/COLOR/Orange/', '0/SIZE/', '1/SIZE/29/', '0/TYPE/', '1/TYPE/Z/'],
+        ['0/COLOR/', '1/COLOR/White/', '0/SIZE/', '1/SIZE/29/', '0/TYPE/', '1/TYPE/Z/']]
+
+        let ind = 0
+        variants.map((variant: any) => {
+          variant.featureHierarchy = features[ind]
+          ind++
+        })
         product.variants = variants
         commit(types.PRODUCT_CURRENT_CTLGPRDCT_UPDATED, product)
         commit(types.PRODUCT_ADD_TO_CACHED_MULTIPLE, { products: [product, ...product.variants] })
diff --git a/src/views/catalog-product-details.vue b/src/views/catalog-product-details.vue
index c8cb3f79..5b1ba853 100644
--- a/src/views/catalog-product-details.vue
+++ b/src/views/catalog-product-details.vue
@@ -21,13 +21,13 @@
             <p>{{ currentVariant.sku }}</p>
           </div>
 
-          <div class="product-features" :key="featureValues" v-for="[featureType, featureValues] in Object.entries(features)">
+          <div class="product-features" :key="featureCategory" v-for="[featureCategory, featureOptions] in Object.entries(features)">
             <ion-list>
-              <ion-list-header>{{ featureType.charAt(0) + featureType.substring(1).toLowerCase() }}</ion-list-header>
+              <ion-list-header>{{ featureCategory.charAt(0) + featureCategory.substring(1).toLowerCase() }}</ion-list-header>
               <ion-item lines="none">
                 <ion-row>
-                  <ion-chip :outline="selectedVariant[featureType] !== featureValue" :key="featureValue" v-for="featureValue in featureValues" @click="selectedVariant[featureType] !== featureValue && applyFeature(featureValue, featureType)">
-                    <ion-label class="ion-text-wrap">{{ featureValue }}</ion-label>
+                  <ion-chip :outline="selectedVariant[featureCategory] !== featureOption" :key="featureOption" v-for="featureOption in featureOptions" @click="selectedVariant[featureCategory] !== featureOption && applyFeature(featureOption, featureCategory)">
+                    <ion-label class="ion-text-wrap">{{ featureOption }}</ion-label>
                   </ion-chip>
                 </ion-row>
               </ion-item>
@@ -480,65 +480,17 @@ export default defineComponent({
     async getVariantDetails() {
       await this.store.dispatch('product/setCurrentCatalogProduct', { productId:  this.productId})
       if (this.product.variants) {
-        
+        await this.getVariantFeature()
         await this.getFeatures()
-        this.updateFeatures()
       }
     },
-    applyFeature(featureValue: string, featureType: string) {
-      this.selectedFeature = featureType
-      this.selectedVariant[featureType] = featureValue
+    applyFeature(featureOption: string, featureCategory: string) {
+      this.selectedFeature = featureCategory
+      this.selectedVariant[featureCategory] = featureOption
 
-      this.updateFeatures()
-    },
-    updateFeatures() {    
-      Object.entries(this.selectedVariant).map((feature, featureIndex) => {
-        const nextFeature = Object.entries(this.selectedVariant).find((currentFeature, currentFeatureIndex) => currentFeatureIndex === featureIndex + 1)
-        
-        if(nextFeature){
-          const nextFeatureType = nextFeature[0]
-          const availableVariants = this.product.variants.filter((variant: any) => {
-            let isVariantAvailable = true
-            Object.entries(this.selectedVariant).map((currentFeature, currentFeatureIndex) => {
-              if(currentFeatureIndex <= featureIndex && getFeature(variant.featureHierarchy, `1/${currentFeature[0]}`) != currentFeature[1]){
-                isVariantAvailable = false
-              }
-            })
-            return isVariantAvailable
-          })
-          
-          const nextFeatureAvailableValues = [] as any
-          availableVariants.map((variant: any) => {
-            if(!nextFeatureAvailableValues.includes(getFeature(variant.featureHierarchy , `1/${nextFeatureType}`))){
-              nextFeatureAvailableValues.push(getFeature(variant.featureHierarchy , `1/${nextFeatureType}`))
-            }
-          })
-          this.features[nextFeatureType] = nextFeatureType === 'SIZE' ? sortSizes(nextFeatureAvailableValues) : nextFeatureAvailableValues
-        }  
-      })
-      this.updateVariant()
+      this.getFeatures()
     },
-    getFeatures() {
-      let features = {} as any
-      this.product.variants.map((variant: any) => {
-        variant.featureHierarchy.map((featureItem: any) => {
-          if(featureItem.startsWith('1/')){
-            const featureType = featureItem.split('/')[1]
-            const featureValue = featureItem.split('/')[2]
-            
-            if (!features[featureType]) features[featureType] = [featureValue]
-            else if (!features[featureType].includes(featureValue)) features[featureType].push(featureValue) 
-          }
-        })
-      })
-
-      features = Object.keys(features).sort().reduce((result: any, key) => {
-        result[key] = features[key];
-        return result;
-      }, {});
-      
-      Object.keys(features).forEach((feature) => this.features[feature] = features[feature].sort())
-      
+    getVariantFeature() {
       let selectedVariant = this.product.variants.find((variant: any) => variant.productId === this.variantId)     
       let selectedVariantFeatures = {} as any
       
@@ -555,7 +507,7 @@ export default defineComponent({
             selectedVariantFeatures[featureItemSplitted[1]] = featureItemSplitted[2]
           }
         })
-
+  
         selectedVariantFeatures = Object.keys(selectedVariantFeatures).sort().reduce((result:any, key) => {
           result[key] = selectedVariantFeatures[key];
           return result;
@@ -563,6 +515,45 @@ export default defineComponent({
         this.selectedVariant = selectedVariantFeatures
       }
     },
+    async getFeatures() {
+      const selectedVariantFeatures = this.selectedVariant
+      const features = {} as any
+      Object.entries(selectedVariantFeatures).map((feature, featureIndex) => {
+        const featureCategory = feature[0]
+        if(featureIndex === 0){
+          this.product.variants.map((variant: any) => {
+            const featureOption = getFeature(variant.featureHierarchy, `1/${featureCategory}`)
+
+            if (!features[featureCategory]) features[featureCategory] = [featureOption]
+            else if (!features[featureCategory].includes(featureOption)) features[featureCategory].push(featureOption) 
+          })
+        }
+        const nextFeature = Object.entries(selectedVariantFeatures).find((currentFeature, currentFeatureIndex) => currentFeatureIndex === featureIndex + 1)
+        
+        if(nextFeature){
+          const nextFeatureCategory = nextFeature[0]
+          const availableVariants = this.product.variants.filter((variant: any) => {
+            let isVariantAvailable = true
+            Object.entries(this.selectedVariant).map((currentFeature, currentFeatureIndex) => {
+              if(currentFeatureIndex <= featureIndex && getFeature(variant.featureHierarchy, `1/${currentFeature[0]}`) != currentFeature[1]){
+                isVariantAvailable = false
+              }
+            })
+            return isVariantAvailable
+          })
+          
+          const nextFeatureAvailableValues = [] as any
+          availableVariants.map((variant: any) => {
+            if(!nextFeatureAvailableValues.includes(getFeature(variant.featureHierarchy , `1/${nextFeatureCategory}`))){
+              nextFeatureAvailableValues.push(getFeature(variant.featureHierarchy , `1/${nextFeatureCategory}`))
+            }
+          })
+          features[nextFeatureCategory] = nextFeatureCategory === 'SIZE' ? sortSizes(nextFeatureAvailableValues) : nextFeatureAvailableValues
+        }   
+      })
+      this.features = features
+      await this.updateVariant()
+    },
     async updateVariant() {
       let variant
       if (this.selectedFeature) {