diff --git a/changelogs/unreleased/-1xc2eqg.yml b/changelogs/unreleased/-1xc2eqg.yml
new file mode 100644
index 000000000..0850dc886
--- /dev/null
+++ b/changelogs/unreleased/-1xc2eqg.yml
@@ -0,0 +1,6 @@
+---
+title: Implemented logic to show product variants on the basis of the selected attribute(#1xc2eqg)
+ticket_id: "#1xc2eqg"
+merge_request: 34
+author: Disha
+type: added
diff --git a/src/views/product-details.vue b/src/views/product-details.vue
index 47fe6aeb3..ad91cd148 100644
--- a/src/views/product-details.vue
+++ b/src/views/product-details.vue
@@ -33,7 +33,7 @@
               <ion-list-header>{{ $t("Colors") }}</ion-list-header>
               <ion-item lines="none">
                   <ion-row>
-                    <ion-chip v-bind:key="colorFeature" v-for="colorFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/COLOR/')"> <ion-label>{{ colorFeature }}</ion-label></ion-chip>
+                    <ion-chip v-bind:key="colorFeature" v-for="colorFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/COLOR/')" @click="filter(colorFeature, 'color')"> <ion-label>{{ colorFeature }}</ion-label></ion-chip>
                   </ion-row>
               </ion-item>
             </ion-list>
@@ -41,7 +41,7 @@
               <ion-list-header>{{ $t("Sizes") }} </ion-list-header>
               <ion-item lines="none">
                   <ion-row>
-                    <ion-chip v-bind:key="sizeFeature" v-for="sizeFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/SIZE/')"> <ion-label>{{ sizeFeature }}</ion-label></ion-chip>
+                    <ion-chip v-bind:key="sizeFeature" v-for="sizeFeature in $filters.getFeaturesList(current.product.featureHierarchy, '1/SIZE/')" @click="filter(sizeFeature, 'size')"> <ion-label>{{ sizeFeature }}</ion-label></ion-chip>
                   </ion-row>
               </ion-item>
             </ion-list>
@@ -116,7 +116,7 @@
 
       <!-- Variant -->
       <div v-else>
-        <ion-card  v-bind:key="item.groupValue" v-for="item in current.list.items">
+        <ion-card  v-bind:key="item.groupValue" v-for="item in filteredProducts.list.items">
           <div class="variant-info">
             <ion-item lines="none">
               <ion-thumbnail slot="start">
@@ -253,7 +253,11 @@ export default defineComponent({
       selectedVariants: {} as any,
       cusotmerLoyaltyOptions : JSON.parse(process.env?.VUE_APP_CUST_LOYALTY_OPTIONS),
       cusotmerLoyalty: '',
-      hasPromisedDate: true
+      hasPromisedDate: true,
+      filters:{
+        color: [] as any,
+        size: [] as any
+      } as any
     }
   },
   computed: {
@@ -264,10 +268,36 @@ export default defineComponent({
       isJobPending: 'job/isJobPending',
       jobTotal: 'job/getTotal',
       userProfile: 'user/getUserProfile',
-      selectedBrand: 'user/getSelectedBrand'
-    })
+      selectedBrand: 'user/getSelectedBrand',
+    }),
+    filteredProducts () {
+      const filteredProducts = JSON.parse(JSON.stringify(this.current));
+      if(this.filters.size.length || this.filters.color.length){
+        filteredProducts.list.items = this.current.list.items.map((item: any)=>{
+          const product = this.getProduct(item.groupValue);
+          const hasSize = this.filters.size.some((sizeFeature: any) => {
+            return product.productFeatures.includes("Size/" + sizeFeature)
+          })
+          const hasColor = this.filters.color.some((colorFeature: any) => {
+            return product.productFeatures.includes("Color/" + colorFeature)
+          })
+          if (hasSize || hasColor) return item;
+          else return null
+        }).filter((product: any) => product);
+      }
+      return filteredProducts;
+    }
   },
   methods: {
+    filter (featureValue: any, type: any) {
+      if (this.filters[type].includes(featureValue)) {
+        const index = this.filters[type].indexOf(featureValue);
+        this.filters[type].splice(index,1);
+      }
+      else {
+        this.filters[type].push(featureValue);
+      }
+    },
     async getVariantProducts() {
       const payload = {
         groupByField: 'productId',