diff --git a/src/app/pages/product-details/product-details.component.html b/src/app/pages/product-details/product-details.component.html
index c1bea892..75c494f6 100644
--- a/src/app/pages/product-details/product-details.component.html
+++ b/src/app/pages/product-details/product-details.component.html
@@ -423,6 +423,28 @@ <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-g
                     </div>
                 }
             }
+
+            @if(usageMetrics.length > 0){
+                <h2 class="text-4xl font-extrabold text-primary-100 dark:text-primary-50 text-center pb-8 pt-12">Usage metrics</h2>
+                <div class="container mx-auto px-4">
+                    <div class="flex flex-wrap -mx-4 justify-center">
+                        @for (metric of usageMetrics; track metric.id) {
+                            <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
+                                <div class="border border-gray-200 rounded-lg shadow bg-white dark:bg-secondary-200 dark:border-gray-800 shadow-md p-8 h-full">
+                                    <h3 [ngClass]="{
+                                        'break-all': hasLongWord(metric.name, 20),
+                                        'break-words': !hasLongWord(metric.name, 20)
+                                        }" class="text-2xl font-bold mb-4 dark:text-white break-words">{{metric.name}}</h3>
+                                    <markdown [ngClass]="{
+                                        'break-all': hasLongWord(metric.description, 20),
+                                        'break-words': !hasLongWord(metric.description, 20)
+                                        }" class="text-gray-700 dark:text-gray-200 text-wrap break-words" [data]="metric.description"></markdown>
+                                </div>
+                            </div>
+                        }
+                    </div>
+                </div>
+            }
             
         </div>
 
@@ -443,19 +465,19 @@ <h2 class="text-4xl font-extrabold text-primary-100 text-center pb-8 pt-12 dark:
                                         @if (val?.isDefault == true) {
                                             <div class="flex items-center pl-4">
                                                 <input disabled checked id="disabled-checked-checkbox" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 dark:bg-gray-600 dark:border-gray-800 rounded-full focus:ring-blue-500 focus:ring-2">
-                                                @if(val.value){
-                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-secondary-200 dark:border-gray-800 text-wrap break-words">{{val.value}} ({{val.unitOfMeasure}})</label>
+                                                @if(val.value !== undefined && val.value !== null){
+                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-secondary-200 dark:border-gray-800 text-wrap break-words">{{val.value}}{{val.unitOfMeasure ? ' (' + val.unitOfMeasure + ')' : ''}}</label>
                                                 } @else {
-                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-secondary-200 dark:border-gray-800 text-wrap break-words">{{val.valueFrom}} - {{val.valueTo}} ({{val?.unitOfMeasure}})</label>
+                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-secondary-200 dark:border-gray-800 text-wrap break-words">{{val.valueFrom}} - {{val.valueTo}}{{val.unitOfMeasure ? ' (' + val.unitOfMeasure + ')' : ''}}</label>
                                                 }
                                             </div>
                                         } @else {
                                             <div class="flex items-center pl-4">
                                                 <input disabled id="disabled-checkbox" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-600 dark:border-gray-800 border-gray-300 rounded-full focus:ring-blue-500 focus:ring-2">
-                                                @if(val.value){
-                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 text-wrap break-words">{{val.value}} ({{val.unitOfMeasure}})</label>
+                                                @if(val.value !== undefined && val.value !== null){
+                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 text-wrap break-words">{{val.value}}{{val.unitOfMeasure ? ' (' + val.unitOfMeasure + ')' : ''}}</label>
                                                 } @else {
-                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 text-wrap break-words">{{val.valueFrom}} - {{val.valueTo}} ({{val?.unitOfMeasure}})</label>
+                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 text-wrap break-words">{{val.valueFrom}} - {{val.valueTo}}{{val.unitOfMeasure ? ' (' + val.unitOfMeasure + ')' : ''}}</label>
                                                 }
                                             </div>
                                         }
@@ -659,5 +681,3 @@ <h2 #relationshipsContent class="text-4xl font-extrabold text-primary-100 text-c
     [width]="'w-2/3'"
     (closeDrawer)="closeDrawer()">
   </app-price-plan-drawer>
-
-
diff --git a/src/app/pages/product-details/product-details.component.spec.ts b/src/app/pages/product-details/product-details.component.spec.ts
index 05328452..7c454d00 100644
--- a/src/app/pages/product-details/product-details.component.spec.ts
+++ b/src/app/pages/product-details/product-details.component.spec.ts
@@ -12,6 +12,7 @@ import { LocalStorageService } from 'src/app/services/local-storage.service';
 import { ShoppingCartServiceService } from 'src/app/services/shopping-cart-service.service';
 import { EventMessageService } from 'src/app/services/event-message.service';
 import { AccountServiceService } from 'src/app/services/account-service.service';
+import { UsageServiceService } from 'src/app/services/usage-service.service';
 import { environment } from 'src/environments/environment';
 
 describe('ProductDetailsComponent', () => {
@@ -23,6 +24,7 @@ describe('ProductDetailsComponent', () => {
   let cartSpy: jasmine.SpyObj<ShoppingCartServiceService>;
   let eventMessageSpy: jasmine.SpyObj<EventMessageService>;
   let accountSpy: jasmine.SpyObj<AccountServiceService>;
+  let usageSpy: jasmine.SpyObj<UsageServiceService>;
   let routerSpy: jasmine.SpyObj<Router>;
   let locationSpy: jasmine.SpyObj<Location>;
   let messages$: Subject<any>;
@@ -34,6 +36,7 @@ describe('ProductDetailsComponent', () => {
       'getProductById',
       'getProductSpecification',
       'getProductPrice',
+      'getOfferingPrice',
       'getServiceSpec',
       'getResourceSpec',
       'getComplianceLevel',
@@ -50,6 +53,7 @@ describe('ProductDetailsComponent', () => {
       'emitRemovedCartItem',
     ]);
     accountSpy = jasmine.createSpyObj<AccountServiceService>('AccountServiceService', ['getOrgInfo']);
+    usageSpy = jasmine.createSpyObj<UsageServiceService>('UsageServiceService', ['getUsageSpec']);
     routerSpy = jasmine.createSpyObj<Router>('Router', ['navigate']);
     locationSpy = jasmine.createSpyObj<Location>('Location', ['back']);
 
@@ -62,6 +66,7 @@ describe('ProductDetailsComponent', () => {
     cartSpy.removeItemShoppingCart.and.resolveTo();
     cartSpy.getShoppingCart.and.resolveTo([]);
     accountSpy.getOrgInfo.and.resolveTo({ id: 'org-1', tradingName: 'Org One' } as any);
+    usageSpy.getUsageSpec.and.resolveTo({ id: 'usage-1', description: 'Usage spec description' });
 
     await TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
@@ -74,6 +79,7 @@ describe('ProductDetailsComponent', () => {
         { provide: ShoppingCartServiceService, useValue: cartSpy },
         { provide: EventMessageService, useValue: eventMessageSpy },
         { provide: AccountServiceService, useValue: accountSpy },
+        { provide: UsageServiceService, useValue: usageSpy },
         { provide: Router, useValue: routerSpy },
         { provide: Location, useValue: locationSpy },
         {
@@ -380,6 +386,74 @@ describe('ProductDetailsComponent', () => {
     expect(component.goToRelationships).not.toHaveBeenCalled();
   });
 
+  it('loadUsageMetrics should collect linked metrics and deduplicate by usageSpecId + metric name', async () => {
+    apiSpy.getOfferingPrice.and.callFake(async (id: string) => {
+      if (id === 'price-comp-1') {
+        return {
+          usageSpecId: 'usage-1',
+          unitOfMeasure: { units: 'RAM_gb_hour' },
+          description: 'Fallback RAM description',
+        };
+      }
+      return {
+        usageSpecId: 'usage-2',
+        unitOfMeasure: { units: 'CPU_core_hour' },
+        description: 'Fallback CPU description',
+      };
+    });
+    usageSpy.getUsageSpec.and.callFake(async (id: string) => {
+      if (id === 'usage-1') {
+        return { id: 'usage-1', description: 'RAM metric description' };
+      }
+      return { id: 'usage-2', description: 'CPU metric description' };
+    });
+
+    await component.loadUsageMetrics([
+      {
+        bundledPopRelationship: [{ id: 'price-comp-1' }, { id: 'price-comp-2' }, { id: 'price-comp-1' }],
+      },
+    ]);
+
+    expect(component.usageMetrics.length).toBe(2);
+    expect(component.usageMetrics).toContain(jasmine.objectContaining({
+      usageSpecId: 'usage-1',
+      name: 'RAM_gb_hour',
+      description: 'RAM metric description',
+    }));
+    expect(component.usageMetrics).toContain(jasmine.objectContaining({
+      usageSpecId: 'usage-2',
+      name: 'CPU_core_hour',
+      description: 'CPU metric description',
+    }));
+    expect(usageSpy.getUsageSpec).toHaveBeenCalledTimes(2);
+  });
+
+  it('loadUsageMetrics should fallback to product offering price description when usage spec cannot be loaded', async () => {
+    usageSpy.getUsageSpec.and.rejectWith(new Error('cannot load usage spec'));
+
+    await component.loadUsageMetrics([
+      {
+        usageSpecId: 'usage-1',
+        unitOfMeasure: { units: 'Requests_hour' },
+        description: 'Requests per hour description',
+      },
+    ]);
+
+    expect(component.usageMetrics.length).toBe(1);
+    expect(component.usageMetrics[0].name).toBe('Requests_hour');
+    expect(component.usageMetrics[0].description).toBe('Requests per hour description');
+  });
+
+  it('loadUsageMetrics should ignore entries without usageSpecId or metric unit name', async () => {
+    await component.loadUsageMetrics([
+      { usageSpecId: 'usage-1' },
+      { unitOfMeasure: { units: 'GB_hour' } },
+      { usageSpecId: 'usage-2', unitOfMeasure: { amount: 1 } },
+    ] as any[]);
+
+    expect(component.usageMetrics).toEqual([]);
+  });
+
   it('hasLongWord and normalizeName should handle edge cases', () => {
     expect(component.hasLongWord('short words', 20)).toBeFalse();
     expect(component.hasLongWord('averyveryverylongword', 10)).toBeTrue();
diff --git a/src/app/pages/product-details/product-details.component.ts b/src/app/pages/product-details/product-details.component.ts
index 9d5267b0..7c78cf8b 100644
--- a/src/app/pages/product-details/product-details.component.ts
+++ b/src/app/pages/product-details/product-details.component.ts
@@ -20,6 +20,14 @@ import { environment } from 'src/environments/environment';
 import { Location } from '@angular/common';
 import {firstValueFrom, Subject} from "rxjs";
 import { takeUntil } from 'rxjs/operators';
+import { UsageServiceService } from 'src/app/services/usage-service.service';
+
+interface UsageMetricCard {
+  id: string;
+  usageSpecId: string;
+  name: string;
+  description: string;
+}
 
 @Component({
   selector: 'app-product-details',
@@ -75,6 +83,7 @@ export class ProductDetailsComponent implements OnInit, OnDestroy {
   checkCustom:boolean=false;
   textDivHeight:any;
   prodChars:any[]=[];
+  usageMetrics: UsageMetricCard[] = [];
   selfAtt:any='';
 
   errorMessage:any='';
@@ -119,6 +128,7 @@ export class ProductDetailsComponent implements OnInit, OnDestroy {
     private cartService: ShoppingCartServiceService,
     private eventMessage: EventMessageService,
     private accService: AccountServiceService,
+    private usageService: UsageServiceService,
     private location: Location
   ) {
     this.showTermsMore=false;
@@ -256,6 +266,7 @@ export class ProductDetailsComponent implements OnInit, OnDestroy {
         }
       }
     }
+    await this.loadUsageMetrics(prices);
 
     if(this.prodSpec.productSpecCharacteristic != undefined) {
       // Avoid displaying the compliance credential && Avoid showing "- enabled" chars
@@ -377,6 +388,98 @@ export class ProductDetailsComponent implements OnInit, OnDestroy {
     }
   }
 
+  async loadUsageMetrics(prices: any[] | undefined): Promise<void> {
+    if (!prices || prices.length === 0) {
+      this.usageMetrics = [];
+      return;
+    }
+
+    const metricsMap = new Map<string, UsageMetricCard>();
+    const usageSpecCache = new Map<string, any>();
+
+    for (const price of prices) {
+      await this.collectUsageMetricsFromPrice(price, metricsMap, usageSpecCache);
+    }
+
+    this.usageMetrics = Array.from(metricsMap.values());
+  }
+
+  private async collectUsageMetricsFromPrice(
+    price: any,
+    metricsMap: Map<string, UsageMetricCard>,
+    usageSpecCache: Map<string, any>
+  ): Promise<void> {
+    if (!price) {
+      return;
+    }
+
+    const bundledRelationships = Array.isArray(price.bundledPopRelationship) ? price.bundledPopRelationship : [];
+    if (bundledRelationships.length > 0) {
+      for (const relationship of bundledRelationships) {
+        if (!relationship?.id) {
+          continue;
+        }
+        try {
+          const linkedPrice = await this.api.getOfferingPrice(relationship.id);
+          await this.addMetricFromPrice(linkedPrice, metricsMap, usageSpecCache);
+        } catch (error) {
+          console.error('Error loading linked product offering price', error);
+        }
+      }
+      return;
+    }
+
+    await this.addMetricFromPrice(price, metricsMap, usageSpecCache);
+  }
+
+  private async addMetricFromPrice(
+    price: any,
+    metricsMap: Map<string, UsageMetricCard>,
+    usageSpecCache: Map<string, any>
+  ): Promise<void> {
+    const usageSpecId = price?.usageSpecId;
+    const metricName = this.getMetricName(price?.unitOfMeasure);
+
+    if (!usageSpecId || !metricName) {
+      return;
+    }
+
+    const metricKey = `${usageSpecId}:${metricName}`;
+    if (metricsMap.has(metricKey)) {
+      return;
+    }
+
+    let usageSpec = usageSpecCache.get(usageSpecId);
+    if (usageSpec === undefined) {
+      try {
+        usageSpec = await this.usageService.getUsageSpec(usageSpecId);
+      } catch (error) {
+        usageSpec = null;
+      }
+      usageSpecCache.set(usageSpecId, usageSpec);
+    }
+
+    metricsMap.set(metricKey, {
+      id: metricKey,
+      usageSpecId,
+      name: metricName,
+      description: usageSpec?.description || price?.description || 'No description available.',
+    });
+  }
+
+  private getMetricName(unitOfMeasure: any): string {
+    if (!unitOfMeasure) {
+      return '';
+    }
+    if (typeof unitOfMeasure === 'string') {
+      return unitOfMeasure;
+    }
+    if (typeof unitOfMeasure?.units === 'string') {
+      return unitOfMeasure.units;
+    }
+    return '';
+  }
+
   toggleQuoteModal(){
     //Show quote modal
     this.showQuoteModal = true;
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html
index e04f4d37..ad743e8a 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html
@@ -30,10 +30,10 @@
         <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white pb-4">{{ 'CREATE_PROD_SPEC._new' | translate }}</h2>
         <ol class="flex items-start w-full text-sm font-medium text-center text-gray-500 dark:text-gray-400">
             @for (step of steps; track i; let i = $index) {
-              <li 
+              <li
                   (click)="handleStepClick(i)"
                   [class.cursor-not-allowed]="!canNavigate(i)"
-                  [class.opacity-50]="!canNavigate(i)"          
+                  [class.opacity-50]="!canNavigate(i)"
                   [class.text-primary-100]="currentStep === i"
                   class="flex-1 cursor-pointer">
                 <span class="flex items-center justify-center w-8 h-8 md:w-10 md:h-10 mx-auto border-2 border-primary-100 dark:border-primary-50 shrink-0 rounded-full"
@@ -68,7 +68,7 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white pb-4">{{ 'CR
                             <label for="prod-number" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._id_number' | translate }}</label>
                             <input data-cy="inputIdNumber" formControlName="number" type="text" id="prod-number"
                             class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                        
+
                         </div>
                         <label for="prod-name" class="font-bold text-lg col-span-2 dark:text-white">{{ 'CREATE_PROD_SPEC._product_description' | translate }}</label>
                         <app-markdown-textarea class="col-span-2" formControlName="description"></app-markdown-textarea>
@@ -111,9 +111,9 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white pb-4">{{ 'CR
                                             {{ 'OFFERINGS._no_prod' | translate }}
                                         </div>
                                     </div>
-                                </div>                    
+                                </div>
                             }@else{
-                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">                        
+                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">
                                 <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                                     <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                     <tr>
@@ -162,7 +162,7 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white pb-4">{{ 'CR
                                                 }
                                             </td>
                                             <td class="hidden lg:table-cell px-6 py-4">
-                                                {{prod.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}} 
+                                                {{prod.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}}
                                             </td>
                                             <td class="px-6 py-4">
                                                 <input id="select-checkbox" [checked]="isProdInBundle(prod)" type="checkbox" value="" (click)="addProdToBundle(prod)" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
@@ -213,7 +213,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                         <p class="mb-2 text-gray-800 dark:text-gray-200">
                             {{ selfAtt ? selfAtt.productSpecCharacteristicValue[0].value : 'Upload your self attestation document' }}
                         </p>
-                        
+
                         <div class="flex items-center justify-between">
                             <button data-cy="productSpecUploadFirst" (click)="toggleUploadSelfAtt();$event.stopPropagation();" type="button" class="text-white file-select-button mr-4 bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-1 text-center inline-flex items-center">
                                 <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -224,8 +224,8 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                 <button (click)="removeSelfAtt()" type="button" class="text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-full text-sm p-1 text-center inline-flex items-center">
                                     <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
-                                    </svg>                                                                                                
-                                </button> 
+                                    </svg>
+                                </button>
                             }
                         </div>
 
@@ -259,8 +259,8 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                             </div>
                         }
                     }
-                    
-                    <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white dark:bg-secondary-300 m-4">                        
+
+                    <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white dark:bg-secondary-300 m-4">
                         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                             <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                 <tr>
@@ -287,7 +287,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                         <td class="px-6 py-4 text-wrap break-all">
                                             {{sel.url}}
                                             <!--<input readonly type="text" [(ngModel)]="selectedISOS[idx].url" value="{{sel.url}}" [id]="'iso-'+sel.name"
-                                            class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-2 border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" /> -->                                     
+                                            class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-2 border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" /> -->
                                         </td>
                                         <td class="px-6 py-4 inline-flex">
                                             <button data-cy="productSpecUploadSecond" (click)="toggleUploadFile(sel);$event.stopPropagation();" type="button" class="text-white file-select-button mr-4 bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-1 text-center inline-flex items-center">
@@ -299,7 +299,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                                 <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
                                                 </svg>
-                                            </button>                                              
+                                            </button>
                                         </td>
                                     </tr>
                                 } @empty {
@@ -323,10 +323,10 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                         <!-- Group container to enable hover effects -->
                         <div class="relative inline-block group">
                             <!-- Tooltip (Only exists if checkValidISOS() is true and only appears on hover) -->
-                            <div *ngIf="checkValidISOS()" 
-                                class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 
-                                    bg-gray-900 text-white text-xs rounded-lg p-2 shadow-lg z-50 
-                                    transition-opacity duration-200 w-max max-w-xs whitespace-normal break-words 
+                            <div *ngIf="checkValidISOS()"
+                                class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2
+                                    bg-gray-900 text-white text-xs rounded-lg p-2 shadow-lg z-50
+                                    transition-opacity duration-200 w-max max-w-xs whitespace-normal break-words
                                     opacity-0 invisible group-hover:opacity-100 group-hover:visible">
                                     {{ 'CREATE_PROD_SPEC._file_check' | translate }}
                                 <!-- Tooltip Arrow -->
@@ -351,7 +351,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                         <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                             You added the following additional certifications:
                         </h3>
-                        <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white dark:bg-secondary-300 m-4"> 
+                        <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white dark:bg-secondary-300 m-4">
                         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                             <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                 <tr>
@@ -376,14 +376,14 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                             {{normalizeName(cert.name)}}
                                         </td>
                                         <td class="px-6 py-4 text-wrap break-all">
-                                            {{cert.url}}                                      
+                                            {{cert.url}}
                                         </td>
-                                        <td class="px-6 py-4 inline-flex">                                        
+                                        <td class="px-6 py-4 inline-flex">
                                             <button (click)="removeCert(cert)" type="button" class="text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-full text-sm p-1 text-center inline-flex items-center">
                                                 <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
-                                                </svg>                                                                                                
-                                            </button>                                              
+                                                </svg>
+                                            </button>
                                         </td>
                                     </tr>
                                 }
@@ -397,7 +397,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                 Add an additional certification
                                 <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
-                                </svg>                                  
+                                </svg>
                             </button>
                         </div>
                     } @else {
@@ -405,12 +405,12 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                             <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                 Add an additional certification:
                             </h3>
-                            <div class="lg:flex lg:grid lg:grid-cols-2 w-full gap-4 align-items-middle align-middle border border-gray-200 rounded-lg p-4">                            
+                            <div class="lg:flex lg:grid lg:grid-cols-2 w-full gap-4 align-items-middle align-middle border border-gray-200 rounded-lg p-4">
                                 <div class="h-fit">
                                     <label for="cert-name" class="font-bold text-lg dark:text-white">{{ 'PROFILE._name' | translate }}</label>
                                     <input #certificationName type="text" id="cert-name" [formControl]="certFileName"
                                     [ngClass]="certFileName.invalid == true ? 'border-red-600' : 'border-gray-300'"
-                                    class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />    
+                                    class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
                                 </div>
                                 @if(isoToCreate==''){
                                     <ngx-file-drop class="p-4 w-full" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event,'attach')" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
@@ -422,11 +422,11 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                                 <div class="flex w-full justify-center">
                                                     <p class="text-gray-500 mr-2 w-fit">{{ 'UPDATE_PROD_SPEC._drop_files' | translate }}
                                                         <button (click)="openFileSelector()" class="font-medium text-primary-100 dark:text-primary-50 hover:underline">{{ 'UPDATE_PROD_SPEC._select_files' | translate }}</button>
-                                                    </p> 
+                                                    </p>
                                                 </div>
                                             </div>
                                         </ng-template>
-                                    </ngx-file-drop> 
+                                    </ngx-file-drop>
                                 } @else {
                                     <div class="relative w-full items-center p-4 text-sm text-primary-100 rounded-lg bg-blue-50 dark:bg-secondary-200 dark:text-primary-50" role="alert">
                                         <span class="sr-only">Info</span>
@@ -436,7 +436,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                         <button (click)="clearAdditionalCert(true)" class="z-10 absolute top-2 right-2 p-1 font-bold text-white bg-red-500 rounded-3xl">
                                             <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
-                                            </svg>                                  
+                                            </svg>
                                         </button>
                                     </div>
                                 }
@@ -448,16 +448,16 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                         Save
                                         <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                             <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M11 16h2m6.707-9.293-2.414-2.414A1 1 0 0 0 16.586 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7.414a1 1 0 0 0-.293-.707ZM16 20v-6a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v6h8ZM9 4h6v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z"/>
-                                        </svg>                                                                   
+                                        </svg>
                                     </button>
-                                    <button type="button" (click)="clearAdditionalCert(false);showCert=false;"                                    
+                                    <button type="button" (click)="clearAdditionalCert(false);showCert=false;"
                                     class="flex ml-4 text-gray-900 justify-end bg-gray-400 hover:bg-primary-50 focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
-                                        Discard                                                                 
+                                        Discard
                                     </button>
                                 </div>
                         </div>
                     }
-    
+
                 }
                 @if ((currentStep === 2 && !BUNDLE_ENABLED) || (currentStep === 3 && BUNDLE_ENABLED)) {
                     @if (prodChars.length === 0){
@@ -473,7 +473,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                           </div>
                         </div>
                     } @else {
-                        <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">                        
+                        <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">
                             <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                                 <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                     <tr>
@@ -505,7 +505,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                                 'break-all': hasLongWord(prod.description, 20),
                                                 'break-words': !hasLongWord(prod.description, 20)
                                                 }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
-                                                {{prod.description}}                                       
+                                                {{prod.description}}
                                             </td>
                                             <td class="px-6 py-4 text-wrap break-all">
                                                 @for (char of prod.productSpecCharacteristicValue; track char; let last=$last) {
@@ -522,31 +522,31 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                                             } @else {
                                                                 {{char.value}}
                                                             }
-                                                        }                                                    
+                                                        }
                                                     } @else {
                                                         @if(!last){
                                                             {{char.valueFrom}} - {{char.valueTo}} (<i>{{char?.unitOfMeasure}}</i>),
                                                         } @else {
                                                             {{char.valueFrom}} - {{char.valueTo}} (<i>{{char?.unitOfMeasure}}</i>)
                                                         }
-                                                    }                                                
-                                                }                                   
+                                                    }
+                                                }
                                             </td>
                                             <td class="px-6 py-4">
                                                 <button (click)="deleteChar(prod)" class="font-bold text-white bg-red-500 rounded-3xl">
                                                     <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
-                                                    </svg>                                  
-                                                </button>    
+                                                    </svg>
+                                                </button>
                                             </td>
                                         </tr>
                                         }
                                     }
                                 </tbody>
                             </table>
-                        </div>                        
+                        </div>
                     }
-                    @if(showCreateChar==false){
+                    @if(!showCreateChar){
                         <div class="flex w-full justify-items-center justify-center">
                             <button data-cy="btnNewCharacteristic" type="button" (click)="showCreateChar=!showCreateChar" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
                                 {{ 'CREATE_PROD_SPEC._new_char' | translate }}
@@ -564,11 +564,12 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                             </div>
                             <div>
                                 <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._type' | translate }}</label>
-                                <select data-cy="charType" id="type" (change)="onTypeChange($event)"
+                                <select data-cy="charType" id="type" [(ngModel)]="charTypeSelected" [ngModelOptions]="{standalone: true}" (change)="onTypeChange($event)"
                                 class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                    <option selected value="string">String</option>
+                                    <option value="string">String</option>
                                     <option value="number">Number</option>
                                     <option value="range">Number range</option>
+                                    <option value="boolean">Boolean</option>
                                 </select>
                             </div>
                             <div class="col-span-2">
@@ -576,40 +577,42 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                 <textarea data-cy="charDescription" id="description" formControlName="description" rows="4" maxLength="500"
                                 class="mb-2 min-h-fit bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"></textarea>
                             </div>
-                            <div class="col-span-2 flex align-items-middle h-fit">
-                                <label for="is-optional" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._make_optional' | translate }}</label>
-                                <label class="inline-flex items-center me-5 cursor-pointer ml-4">
-                                    <input type="checkbox" id="is-optional" [(ngModel)]="isOptional" [ngModelOptions]="{standalone: true}" class="sr-only peer">
-                                    <div class="relative w-11 h-6 bg-gray-400 dark:bg-gray-700 rounded-full peer peer-focus:ring-4 peer-focus:ring-primary-100 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-100"></div>
-                                </label>
-                            </div>
-                            @if(isOptional){
-                                <div>
-                                    <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._default_value' | translate }}</label>
-                                    <select [(ngModel)]="optionalDftTrue" [ngModelOptions]="{standalone: true}"
-                                    class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                        <option [value]="false">{{ 'CREATE_PROD_SPEC._default_false' | translate }}</option>
-                                        <option [value]="true">{{ 'CREATE_PROD_SPEC._default_true' | translate }}</option>
-                                    </select>
+                            @if(charTypeSelected !== 'boolean'){
+                                <div class="col-span-2 flex align-items-middle h-fit">
+                                    <label for="is-optional" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._make_optional' | translate }}</label>
+                                    <label class="inline-flex items-center me-5 cursor-pointer ml-4">
+                                        <input type="checkbox" id="is-optional" [(ngModel)]="isOptional" [ngModelOptions]="{standalone: true}" class="sr-only peer">
+                                        <div class="relative w-11 h-6 bg-gray-400 dark:bg-gray-700 rounded-full peer peer-focus:ring-4 peer-focus:ring-primary-100 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-100"></div>
+                                    </label>
                                 </div>
+                                @if(isOptional){
+                                    <div>
+                                        <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._default_value' | translate }}</label>
+                                        <select [(ngModel)]="optionalDftTrue" [ngModelOptions]="{standalone: true}"
+                                        class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                            <option [value]="false">{{ 'CREATE_PROD_SPEC._default_false' | translate }}</option>
+                                            <option [value]="true">{{ 'CREATE_PROD_SPEC._default_true' | translate }}</option>
+                                        </select>
+                                    </div>
+                                }
                             }
                         </form>
                         <div class="m-4">
-                            @if(creatingChars.length>0){
+                            @if(creatingChars.length > 0 && charTypeSelected !== 'boolean'){
                                 <label for="values" class="font-bold text-lg dark:text-white">Values</label>
                                 <div class="flex flex-col items-start pl-4  shadow-md sm:rounded-lg w-full bg-white dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border border-gray-300 mb-2">
-                                    @if(rangeCharSelected){
+                                    @if(charTypeSelected === 'range'){
                                         @for (char of creatingChars; track char; let idx = $index) {
                                             <div class="flex w-full justify-between">
                                                 <div class="align-items-middle align-middle">
-                                                    <input [checked]="char?.isDefault" (click)="selectDefaultChar(char,idx)" id="disabled-checked-checkbox" type="checkbox" value="" 
+                                                    <input [checked]="char?.isDefault" (click)="selectDefaultChar(char,idx)" id="disabled-checked-checkbox" type="checkbox" value=""
                                                     class="align-middle w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-full focus:ring-blue-500 focus:ring-2">
-                                                    <label for="disabled-checked-checkbox" class="ms-2 align-middle text-sm font-medium text-gray-700 dark:text-white text-wrap break-all">{{char.valueFrom}} - {{char.valueTo}} (<i>{{char?.unitOfMeasure}}</i>)</label>    
+                                                    <label for="disabled-checked-checkbox" class="ms-2 align-middle text-sm font-medium text-gray-700 dark:text-white text-wrap break-all">{{char.valueFrom}} - {{char.valueTo}} (<i>{{char?.unitOfMeasure}}</i>)</label>
                                                 </div>
                                                 <button (click)="removeCharValue(char,idx)" class="m-2 text-white bg-red-500 rounded-3xl">
                                                     <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
-                                                    </svg>                                  
+                                                    </svg>
                                                 </button>
                                             </div>
                                         }
@@ -617,26 +620,26 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                         @for (char of creatingChars; track char; let idx = $index) {
                                             <div class="flex w-full justify-between">
                                                 <div class="align-items-middle align-middle">
-                                                    <input [checked]="char?.isDefault" (click)="selectDefaultChar(char,idx)" id="disabled-checked-checkbox" type="checkbox" value="" 
+                                                    <input [checked]="char?.isDefault" (click)="selectDefaultChar(char,idx)" id="disabled-checked-checkbox" type="checkbox" value=""
                                                     class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-full focus:ring-blue-500 focus:ring-2">
-                                                    @if(numberCharSelected){
+                                                    @if(charTypeSelected === 'number'){
                                                         <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-white text-wrap break-all">{{char.value}} (<i>{{char?.unitOfMeasure}}</i>)</label>
                                                     } @else {
                                                         <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-white text-wrap break-all">{{char.value}}</label>
-                                                    }    
+                                                    }
                                                 </div>
                                                 <button (click)="removeCharValue(char,idx)" class="m-2 text-white bg-red-500 rounded-3xl">
                                                     <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
-                                                    </svg>                                  
+                                                    </svg>
                                                 </button>
                                             </div>
                                         }
                                     }
                                 </div>
                             }
-                            <label for="values" [ngClass]="rangeCharSelected && creatingChars.length==1 ? 'hidden' : ''" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._add_values' | translate }}</label>
-                            @if(stringCharSelected){
+                            <label for="values" [ngClass]="((charTypeSelected === 'range' && creatingChars.length==1) || charTypeSelected === 'boolean') ? 'hidden' : ''" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._add_values' | translate }}</label>
+                            @if(charTypeSelected === 'string'){
                                 <div class="flex flex-row items-center align-items-middle">
                                     <input data-cy="charStringValue" type="text" id="value" [(ngModel)]="stringValue"
                                     class="mr-4 bg-gray-50 border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
@@ -646,7 +649,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                         </svg>
                                     </button>
                                 </div>
-                            } @else if (numberCharSelected){
+                            } @else if (charTypeSelected === 'number'){
                                 <div class="flex flex-col md:flex-row items-center align-items-middle">
                                     <div class="flex w-full mb-2 md:mb-0">
                                         <span class="inline-flex items-center px-3 text-sm text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md">
@@ -669,7 +672,15 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                         </svg>
                                     </button>
                                 </div>
-                            } @else if (rangeCharSelected && creatingChars.length==0){
+                            } @else if (charTypeSelected === 'boolean'){
+                                <div class="col-span-2 flex align-items-middle h-fit">
+                                    <label for="boolean-default" class="font-bold text-lg dark:text-white">Default value</label>
+                                    <label class="inline-flex items-center me-5 cursor-pointer ml-4">
+                                        <input data-cy="charBooleanDefault" id="boolean-default" type="checkbox" [(ngModel)]="booleanDefaultTrue" [ngModelOptions]="{standalone: true}" (change)="onBooleanDefaultChange()" class="sr-only peer">
+                                        <div class="relative w-11 h-6 bg-gray-400 dark:bg-gray-700 rounded-full peer peer-focus:ring-4 peer-focus:ring-primary-100 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-100"></div>
+                                    </label>
+                                </div>
+                            } @else if (charTypeSelected === 'range' && creatingChars.length==0){
                                 <div class="flex flex-col md:flex-row items-center align-items-middle">
                                     <div class="flex w-full mb-2 md:mb-0">
                                         <span class="inline-flex items-center px-3 text-sm text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md">
@@ -707,7 +718,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                     </svg>
                                 </button>
                             </div>
-    
+
                         </div>
                     }
                     <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
@@ -717,9 +728,9 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                             </svg>
                         </button>
-                    </div>-->                    
+                    </div>-->
                 }
-            
+
                 @if ((currentStep === 3 && !BUNDLE_ENABLED) || (currentStep === 4 && BUNDLE_ENABLED)) {
                     @if(loadingResourceSpec){
                         <div role="status" class="w-full h-fit flex justify-center align-middle">
@@ -740,7 +751,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                         {{ 'OFFERINGS._no_res' | translate }}
                                     </div>
                                 </div>
-                            </div>                    
+                            </div>
                         }@else{
                         <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">
                         <table data-cy="tableResourceSpecs" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
@@ -781,7 +792,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                             }
                                         </td>
                                         <td class="hidden lg:table-cell px-6 py-4">
-                                            {{res.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}} 
+                                            {{res.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}}
                                         </td>
                                         <td class="px-6 py-4">
                                             <input id="select-checkbox" [checked]="isResSelected(res)" type="checkbox" value="" (click)="addResToSelected(res)" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
@@ -842,7 +853,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                         {{ 'OFFERINGS._no_serv' | translate }}
                                     </div>
                                 </div>
-                            </div>                    
+                            </div>
                         }@else{
                         <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">
                             <table data-cy="tableServiceSpecs" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
@@ -883,7 +894,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                             }
                                         </td>
                                         <td class="hidden lg:table-cell px-6 py-4">
-                                            {{serv.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}} 
+                                            {{serv.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}}
                                         </td>
                                         <td class="px-6 py-4">
                                             <input id="select-checkbox" [checked]="isServSelected(serv)" type="checkbox" value="" (click)="addServToSelected(serv)" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
@@ -931,7 +942,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_pro
                             <svg data-popover-target="popover-default" class="flex self-center w-6 h-6 text-primary-100" clip-rule="evenodd" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                             </svg>
-                        </div> 
+                        </div>
                         <div data-popover id="popover-default" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
                             <div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
                                 <h3 class="font-semibold text-gray-900 dark:text-white">{{ 'CREATE_PROD_SPEC._file_res' | translate }}</h3>
@@ -942,14 +953,14 @@ <h3 class="font-semibold text-gray-900 dark:text-white">{{ 'CREATE_PROD_SPEC._fi
                             </div>
                             <div data-popper-arrow></div>
                         </div>
-                    </div>                     
+                    </div>
                     @if(showImgPreview){
                         <div class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl px-8 pb-8 pt-40 max-w-sm mx-auto m-4 shadow-lg">
                             <img src="{{imgPreview}}" class="absolute inset-0 h-full w-full object-cover">
                             <button (click)="removeImg()" class="z-10 absolute top-2 right-2 p-1 font-bold text-white bg-red-500 rounded-3xl">
                                 <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
-                                </svg>                                  
+                                </svg>
                             </button>
                         </div>
                     } @else {
@@ -963,7 +974,7 @@ <h3 class="font-semibold text-gray-900 dark:text-white">{{ 'CREATE_PROD_SPEC._fi
                                         <div class="flex w-full justify-center">
                                             <p class="text-gray-500 mr-2 w-fit">{{ 'CREATE_PROD_SPEC._drop_files' | translate }}
                                                 <button data-cy="productSpecAttachSelectFile" (click)="openFileSelector()" class="font-medium text-primary-100 dark:text-primary-50 hover:underline">{{ 'CREATE_PROD_SPEC._select_files' | translate }}</button>
-                                            </p> 
+                                            </p>
                                         </div>
                                     </div>
                                 </ng-template>
@@ -978,7 +989,7 @@ <h3 class="font-semibold text-gray-900 dark:text-white">{{ 'CREATE_PROD_SPEC._fi
                                 <!-- Tooltip Arrow -->
                                 <div class="absolute left-1/2 transform -translate-x-1/2 translate-y-1 w-2 h-2 bg-gray-900 rotate-45"></div>
                             </div>
-                        
+
                             <div class="flex items-center h-fit w-full justify-between">
                                 <!-- Input Field -->
                                 <input #imgURL type="text" id="att-name"
@@ -987,20 +998,20 @@ <h3 class="font-semibold text-gray-900 dark:text-white">{{ 'CREATE_PROD_SPEC._fi
                                     class="w-full bg-gray-50 border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5"
                                     [ngClass]="attImageName.invalid && attImageName.touched ? 'border-red-500' : 'dark:border-secondary-200'"
                                 />
-                                
+
                                 <!-- Submit Button -->
                                 <button (click)="saveImgFromURL()"
-                                    [disabled]="!attImageName.valid" 
+                                    [disabled]="!attImageName.valid"
                                     [ngClass]="!attImageName.valid ? 'opacity-50' : 'hover:bg-primary-50'"
                                     class="text-white bg-primary-100 rounded-3xl p-1 ml-2 h-fit">
                                     <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5"/>                                    
-                                    </svg>                                  
+                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5"/>
+                                    </svg>
                                 </button>
                             </div>
                         </div>
-                                                                      
-                        
+
+
                     }
                     <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att' | translate }}</h4>
                     @if(prodAttachments.length == 0){
@@ -1016,7 +1027,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                             </div>
                         </div>
                     } @else {
-                        <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">                        
+                        <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">
                             <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                                 <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                     <tr>
@@ -1041,20 +1052,20 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                                 {{att.name}}
                                             </td>
                                             <td class="px-6 py-4 text-wrap break-all">
-                                                {{att.url}} 
+                                                {{att.url}}
                                             </td>
                                             <td class="px-6 py-4">
                                                 <button (click)="removeAtt(att)" class="font-bold text-white bg-red-500 rounded-3xl">
                                                     <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
-                                                    </svg>                                  
-                                                </button>    
+                                                    </svg>
+                                                </button>
                                             </td>
                                         </tr>
                                     }
                                 </tbody>
                             </table>
-                            </div>                        
+                            </div>
                     }
                     @if(showNewAtt==false){
                         <div class="flex w-full justify-items-center justify-center">
@@ -1062,17 +1073,17 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                 {{ 'CREATE_PROD_SPEC._new_att' | translate }}
                                 <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
-                                </svg>                                  
+                                </svg>
                             </button>
                         </div>
                     } @else {
                         <div class="m-4 w-full">
-                            <div class="lg:flex lg:grid lg:grid-cols-2 w-full gap-4 align-items-middle align-middle border border-gray-200 dark:border-secondary-200 rounded-lg p-4">                            
+                            <div class="lg:flex lg:grid lg:grid-cols-2 w-full gap-4 align-items-middle align-middle border border-gray-200 dark:border-secondary-200 rounded-lg p-4">
                                 <div class="h-fit">
                                     <label for="att-name" class="font-bold text-lg dark:text-white">{{ 'PROFILE._name' | translate }}</label>
                                     <input #attachName type="text" id="att-name" [formControl]="attFileName"
                                     [ngClass]="attFileName.invalid == true ? 'border-red-600' : 'border-gray-300'"
-                                    class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />    
+                                    class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
                                 </div>
                                 @if(attachToCreate.url==''){
                                     <ngx-file-drop class="p-4 w-full" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event,'attach')" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
@@ -1084,7 +1095,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                                 <div class="flex w-full justify-center">
                                                     <p class="text-gray-500 mr-2 w-fit">{{ 'CREATE_PROD_SPEC._drop_files' | translate }}
                                                         <button (click)="openFileSelector()" class="font-medium text-primary-100 dark:text-primary-50 hover:underline">{{ 'CREATE_PROD_SPEC._select_files' | translate }}</button>
-                                                    </p> 
+                                                    </p>
                                                 </div>
                                             </div>
                                         </ng-template>
@@ -1098,7 +1109,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                         <button (click)="clearAtt()" class="z-10 absolute top-2 right-2 p-1 font-bold text-white bg-red-500 rounded-3xl">
                                             <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
-                                            </svg>                                  
+                                            </svg>
                                         </button>
                                     </div>
                                 }
@@ -1111,7 +1122,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                     {{ 'CREATE_PROD_SPEC._save_att' | translate }}
                                     <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                         <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M11 16h2m6.707-9.293-2.414-2.414A1 1 0 0 0 16.586 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7.414a1 1 0 0 0-.293-.707ZM16 20v-6a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v6h8ZM9 4h6v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z"/>
-                                    </svg>                                                                   
+                                    </svg>
                                 </button>
                             </div>
                         </div>
@@ -1123,7 +1134,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                             </svg>
                         </button>
-                    </div> --> 
+                    </div> -->
                 }
                 @if ((currentStep === 6 && !BUNDLE_ENABLED) || (currentStep === 7 && BUNDLE_ENABLED)) {
                     <div class="m-4">
@@ -1140,7 +1151,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                               </div>
                             </div>
                         } @else {
-                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">                        
+                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">
                                 <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                                     <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                         <tr>
@@ -1185,7 +1196,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                                     }
                                                 </td>
                                                 <td class="hidden lg:table-cell px-6 py-4">
-                                                    {{rel.productSpec.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}} 
+                                                    {{rel.productSpec.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}}
                                                 </td>
                                                 <td class="px-6 py-4">
                                                     <button data-cy="productSpecDeleteRelationship" (click)="deleteRel(rel)" class="font-bold text-white bg-red-500 rounded-3xl">
@@ -1211,7 +1222,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                             </div>
                         } @else {
                             <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._relationship_type' | translate }}</label>
-                            <select id="type" (change)="onRelChange($event)" 
+                            <select id="type" (change)="onRelChange($event)"
                             class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                                 <option selected value="migration">Migration</option>
                                 <option value="dependency">Dependency</option>
@@ -1237,9 +1248,9 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                                 {{ 'OFFERINGS._no_prod_rel' | translate }}
                                             </div>
                                         </div>
-                                    </div>                    
+                                    </div>
                                 }@else{
-                                <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mt-4">                        
+                                <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mt-4">
                                     <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                                         <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                             <tr>
@@ -1256,7 +1267,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                         </thead>
                                         <tbody>
                                             @for (rel of prodSpecRels; track rel) {
-                                                <tr class="border-b hover:bg-gray-200 dark:border-gray-700 dark:hover:bg-secondary-200" (click)="selectRelationship(rel)" 
+                                                <tr class="border-b hover:bg-gray-200 dark:border-gray-700 dark:hover:bg-secondary-200" (click)="selectRelationship(rel)"
                                                     [ngClass]="rel.id == selectedProdSpec.id ? 'bg-gray-300 dark:bg-secondary-200' : 'bg-white dark:bg-secondary-300'">
                                                     <td [ngClass]="{
                                                         'break-all': hasLongWord(rel.name, 20),
@@ -1272,7 +1283,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                                         }
                                                     </td>
                                                     <td class="px-6 py-4 hidden md:table-cell">
-                                                        {{rel.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}} 
+                                                        {{rel.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}}
                                                     </td>
                                                 </tr>
                                             }
@@ -1361,7 +1372,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                 }
                             </div>
                         </div>
-                        
+
                         <div class="mb-4">
                             <label class="font-bold text-lg mr-4 dark:text-white">{{ 'CREATE_PROD_SPEC._status' | translate }}</label>
                             @if(productSpecToCreate?.lifecycleStatus == 'Active'){
@@ -1377,7 +1388,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
 
                         @if(productSpecToCreate?.description !=''){
                             <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_description' | translate }}</label>
-                            <div class="px-4 py-2 bg-white rounded-lg p-4 dark:bg-secondary-300 border dark:border-secondary-200"> 
+                            <div class="px-4 py-2 bg-white rounded-lg p-4 dark:bg-secondary-300 border dark:border-secondary-200">
                                 <markdown [ngClass]="{
                                     'break-all': hasLongWord(productSpecToCreate?.description, 20),
                                     'break-words': !hasLongWord(productSpecToCreate?.description, 20)
@@ -1394,7 +1405,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
 
                         @if(prodSpecsBundle.length>0){
                             <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._bundle' | translate }}</label>
-                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mb-4">                        
+                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mb-4">
                                 <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                                     <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                         <tr>
@@ -1430,12 +1441,12 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                         }
                                     </tbody>
                                 </table>
-                            </div>  
+                            </div>
                         }
-                        
+
                         @if(prodChars.length>0){
                             <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._chars' | translate }}</label>
-                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mb-4">                        
+                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mb-4">
                                 <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                                     <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                         <tr>
@@ -1463,7 +1474,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                                     'break-all': hasLongWord(prod.description, 20),
                                                     'break-words': !hasLongWord(prod.description, 20)
                                                     }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
-                                                    {{prod.description}}                                       
+                                                    {{prod.description}}
                                                 </td>
                                                 <td class="px-6 py-4 text-wrap break-all">
                                                     @for (char of prod.productSpecCharacteristicValue; track char; let last = $last) {
@@ -1480,15 +1491,15 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                                                 } @else {
                                                                     {{char.value}}
                                                                 }
-                                                            }                                                    
+                                                            }
                                                         } @else {
                                                             @if(!last){
                                                                 {{char.valueFrom}} - {{char.valueTo}} (<i>{{char?.unitOfMeasure}}</i>),
                                                             } @else {
                                                                 {{char.valueFrom}} - {{char.valueTo}} (<i>{{char?.unitOfMeasure}}</i>)
                                                             }
-                                                        }                                                
-                                                    }                                   
+                                                        }
+                                                    }
                                                 </td>
                                             </tr>
                                         }
@@ -1499,7 +1510,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
 
                         @if(selectedResourceSpecs.length>0){
                             <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._resource' | translate }}</label>
-                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mb-4">                        
+                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mb-4">
                                 <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                                     <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                         <tr>
@@ -1521,12 +1532,12 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                         }
                                     </tbody>
                                 </table>
-                            </div>  
+                            </div>
                         }
 
                         @if(selectedServiceSpecs.length>0){
                             <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._service' | translate }}</label>
-                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mb-4">                        
+                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mb-4">
                                 <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                                     <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                         <tr>
@@ -1548,12 +1559,12 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                         }
                                     </tbody>
                                 </table>
-                            </div>  
+                            </div>
                         }
 
                         @if(prodAttachments.length>0){
                             <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._attachments' | translate }}</label>
-                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mb-4">                        
+                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mb-4">
                                 <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                                     <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                         <tr>
@@ -1575,18 +1586,18 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                                     {{att.name}}
                                                 </td>
                                                 <td class="px-6 py-4 text-wrap break-all">
-                                                    {{att.url}} 
+                                                    {{att.url}}
                                                 </td>
                                             </tr>
                                         }
                                     </tbody>
                                 </table>
-                            </div>  
+                            </div>
                         }
 
                         @if(prodRelationships.length>0){
                             <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._relationships' | translate }}</label>
-                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mb-4">                        
+                            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white mb-4">
                                 <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
                                     <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                                         <tr>
@@ -1628,7 +1639,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                                     }
                                                 </td>
                                                 <td class="hidden lg:table-cell px-6 py-4">
-                                                    {{rel.productSpec.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}} 
+                                                    {{rel.productSpec.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}}
                                                 </td>
                                             </tr>
                                         }
@@ -1665,7 +1676,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                     </svg>
                     {{ 'CREATE_OFFER._previous' | translate }}
                 </button>
-        
+
                 <button data-cy="btnNext"
                         (click)="goToStep(currentStep + 1)"
                         [disabled]="currentStep === steps.length - 1 || !validateCurrentStep() || !canNavigate(currentStep) || isStepDisabled()"
@@ -1686,12 +1697,12 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                     (click)="createProduct()"
                     [disabled]="isStepDisabled() || loading"
                     [ngClass]="loading || isStepDisabled() ? 'opacity-50' : 'hover:bg-primary-50'"
-            
+
                     class="px-4 py-2 text-base font-medium text-white rounded-lg bg-primary-100">
                         {{ 'CREATE_PROD_SPEC._create_prod' | translate }}
                     </button>
                 }
-            </div>          
+            </div>
         </div>
     </div>
 
@@ -1699,7 +1710,7 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
 
 <!-- BILL ADDRESS DELETE modal -->
 @if (showUploadFile){
-    <div id="upload-file-modal" [ngClass]="showUploadFile ? 'backdrop-blur-sm': ''" tabindex="-1" aria-hidden="true" 
+    <div id="upload-file-modal" [ngClass]="showUploadFile ? 'backdrop-blur-sm': ''" tabindex="-1" aria-hidden="true"
     class="flex overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-40 justify-center items-center w-full md:inset-0 h-modal md:h-full shadow-2xl">
         <div class="relative p-4 w-full max-w-md h-full md:h-auto" (click)="$event.stopPropagation();">
             <!-- Modal content -->
@@ -1714,14 +1725,14 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                     <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
                         <svg class="w-12 h-12 text-primary-100 mx-auto" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h3a3 3 0 0 0 0-6h-.025a5.56 5.56 0 0 0 .025-.5A5.5 5.5 0 0 0 7.207 9.021C7.137 9.017 7.071 9 7 9a4 4 0 1 0 0 8h2.167M12 19v-9m0 0-2 2m2-2 2 2"/>
-                        </svg>                        
+                        </svg>
                         <p class="text-gray-500 mr-4">{{ 'CREATE_PROD_SPEC._drop_files' | translate }}
                             <button data-cy="productSpecSelectFile" (click)="openFileSelector()" class="font-medium text-primary-100 dark:text-primary-50 hover:underline">{{ 'CREATE_PROD_SPEC._select_files' | translate }}</button>
-                        </p>                       
+                        </p>
                     </ng-template>
-                </ngx-file-drop>  
+                </ngx-file-drop>
+
 
-              
                 <div class="flex justify-center items-center space-x-4">
                     <button data-cy="productSpecCancelUpload" (click)="showUploadFile=false;$event.stopPropagation();" type="button" class="py-2 px-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10">
                         {{ 'CREATE_PROD_SPEC._cancel' | translate }}
@@ -1737,4 +1748,4 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
 }
 @if(showError){
     <error-message class="flex justify-center items-center fixed w-fit top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50" [message]="errorMessage"></error-message>
-}
\ No newline at end of file
+}
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.spec.ts b/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.spec.ts
index a43b9899..fade3de3 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.spec.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.spec.ts
@@ -1,78 +1,1040 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { EventMessageService } from 'src/app/services/event-message.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { of, Subject, throwError } from 'rxjs';
 
 import { CreateProductSpecComponent } from './create-product-spec.component';
+import { ApiServiceService } from 'src/app/services/product-service.service';
+import { ProductSpecServiceService } from 'src/app/services/product-spec-service.service';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+import { EventMessageService } from 'src/app/services/event-message.service';
+import { AttachmentServiceService } from 'src/app/services/attachment-service.service';
+import { ServiceSpecServiceService } from 'src/app/services/service-spec-service.service';
+import { ResourceSpecServiceService } from 'src/app/services/resource-spec-service.service';
+import { PaginationService } from 'src/app/services/pagination.service';
+
+class SyncFileReaderMock {
+  onload: ((event: any) => void) | null = null;
+
+  readAsDataURL(_file: File): void {
+    if (this.onload) {
+      this.onload({ target: { result: 'data:text/plain;base64,Zm9v' } });
+    }
+  }
+}
 
 describe('CreateProductSpecComponent', () => {
   let component: CreateProductSpecComponent;
   let fixture: ComponentFixture<CreateProductSpecComponent>;
-  let eventMessage: EventMessageService;
+
+  let messagesSubject: Subject<any>;
+  let apiSpy: jasmine.SpyObj<ApiServiceService>;
+  let prodSpecServiceSpy: jasmine.SpyObj<ProductSpecServiceService>;
+  let localStorageSpy: jasmine.SpyObj<LocalStorageService>;
+  let eventMessageSpy: jasmine.SpyObj<EventMessageService>;
+  let attachmentServiceSpy: jasmine.SpyObj<AttachmentServiceService>;
+  let servSpecServiceSpy: jasmine.SpyObj<ServiceSpecServiceService>;
+  let resSpecServiceSpy: jasmine.SpyObj<ResourceSpecServiceService>;
+  let paginationServiceSpy: jasmine.SpyObj<PaginationService>;
+  let originalFileReader: any;
+
+  const defaultPaginationData = {
+    page_check: true,
+    items: [{ id: 'item-1' }],
+    nextItems: [{ id: 'item-2' }],
+    page: 10
+  };
+
+  const mockDroppedFile = (file: any): any => {
+    return {
+      relativePath: file.name,
+      fileEntry: {
+        isFile: true,
+        file: (cb: (f: any) => void) => cb(file)
+      }
+    };
+  };
 
   beforeEach(async () => {
+    messagesSubject = new Subject<any>();
+    apiSpy = jasmine.createSpyObj<ApiServiceService>('ApiServiceService', ['getProducts']);
+    prodSpecServiceSpy = jasmine.createSpyObj<ProductSpecServiceService>('ProductSpecServiceService', ['getProdSpecByUser', 'postProdSpec']);
+    localStorageSpy = jasmine.createSpyObj<LocalStorageService>('LocalStorageService', ['getObject']);
+    eventMessageSpy = jasmine.createSpyObj<EventMessageService>('EventMessageService', ['emitSellerProductSpec'], { messages$: messagesSubject.asObservable() });
+    attachmentServiceSpy = jasmine.createSpyObj<AttachmentServiceService>('AttachmentServiceService', ['uploadFile']);
+    servSpecServiceSpy = jasmine.createSpyObj<ServiceSpecServiceService>('ServiceSpecServiceService', ['getServiceSpecByUser']);
+    resSpecServiceSpy = jasmine.createSpyObj<ResourceSpecServiceService>('ResourceSpecServiceService', ['getResourceSpecByUser']);
+    paginationServiceSpy = jasmine.createSpyObj<PaginationService>('PaginationService', ['getItemsPaginated']);
+
+    localStorageSpy.getObject.and.returnValue({});
+    attachmentServiceSpy.uploadFile.and.returnValue(of({ content: 'https://uploaded.file' }));
+    prodSpecServiceSpy.postProdSpec.and.returnValue(of({ id: 'created' }));
+    paginationServiceSpy.getItemsPaginated.and.resolveTo(defaultPaginationData);
+
     await TestBed.configureTestingModule({
+      declarations: [CreateProductSpecComponent],
+      imports: [RouterTestingModule, TranslateModule.forRoot()],
       schemas: [NO_ERRORS_SCHEMA],
-      imports: [HttpClientTestingModule, RouterTestingModule, TranslateModule.forRoot()],
-      declarations: [CreateProductSpecComponent]
-    })
-    .compileComponents();
-    
+      providers: [
+        { provide: ApiServiceService, useValue: apiSpy },
+        { provide: ProductSpecServiceService, useValue: prodSpecServiceSpy },
+        { provide: LocalStorageService, useValue: localStorageSpy },
+        { provide: EventMessageService, useValue: eventMessageSpy },
+        { provide: AttachmentServiceService, useValue: attachmentServiceSpy },
+        { provide: ServiceSpecServiceService, useValue: servSpecServiceSpy },
+        { provide: ResourceSpecServiceService, useValue: resSpecServiceSpy },
+        { provide: PaginationService, useValue: paginationServiceSpy }
+      ]
+    }).compileComponents();
+
     fixture = TestBed.createComponent(CreateProductSpecComponent);
     component = fixture.componentInstance;
-    eventMessage = TestBed.inject(EventMessageService);
+    component.attachName = { nativeElement: { value: '' } } as any;
+    component.imgURL = { nativeElement: { value: '' } } as any;
+    component.certificationName = { nativeElement: { value: '' } } as any;
+  });
+
+  beforeEach(() => {
+    originalFileReader = (window as any).FileReader;
+    (window as any).FileReader = SyncFileReaderMock as any;
+  });
+
+  afterEach(() => {
+    (window as any).FileReader = originalFileReader;
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  it('onClick should hide emoji and upload panel when open', () => {
+  it('should load available ISOs in constructor and react to ChangedSession event', () => {
+    expect(component.availableISOS.length).toBeGreaterThan(0);
+    const initSpy = spyOn(component, 'initPartyInfo');
+    messagesSubject.next({ type: 'ChangedSession' });
+    expect(initSpy).toHaveBeenCalled();
+  });
+
+  it('should stop event subscription on destroy', () => {
+    const initSpy = spyOn(component, 'initPartyInfo');
+    messagesSubject.next({ type: 'ChangedSession' });
+    expect(initSpy).toHaveBeenCalledTimes(1);
+    component.ngOnDestroy();
+    messagesSubject.next({ type: 'ChangedSession' });
+    expect(initSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('onClick should hide emoji/upload panels and trigger detectChanges', () => {
     component.showEmoji = true;
     component.showUploadFile = true;
     const detectSpy = spyOn((component as any).cdr, 'detectChanges');
-
     component.onClick();
-
     expect(component.showEmoji).toBeFalse();
     expect(component.showUploadFile).toBeFalse();
+    expect(detectSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('ngOnInit should configure steps with bundle enabled', () => {
+    component.BUNDLE_ENABLED = true;
+    const initSpy = spyOn(component, 'initPartyInfo');
+    component.ngOnInit();
+    expect(component.steps.length).toBe(9);
+    expect(component.steps).toContain('Bundle');
+    expect(initSpy).toHaveBeenCalled();
+  });
+
+  it('ngOnInit should configure steps without bundle', () => {
+    component.BUNDLE_ENABLED = false;
+    component.ngOnInit();
+    expect(component.steps.length).toBe(8);
+    expect(component.steps).not.toContain('Bundle');
+  });
+
+  it('initPartyInfo should set partyId when logged directly', () => {
+    localStorageSpy.getObject.and.returnValue({
+      expire: Math.floor(Date.now() / 1000) + 500,
+      logged_as: 'user-1',
+      id: 'user-1',
+      partyId: 'party-direct',
+      organizations: []
+    });
+    component.initPartyInfo();
+    expect(component.partyId).toBe('party-direct');
+  });
+
+  it('initPartyInfo should set org partyId when logged as organization', () => {
+    localStorageSpy.getObject.and.returnValue({
+      expire: Math.floor(Date.now() / 1000) + 500,
+      logged_as: 'org-1',
+      id: 'user-1',
+      partyId: 'party-direct',
+      organizations: [{ id: 'org-1', partyId: 'party-org' }]
+    });
+    component.initPartyInfo();
+    expect(component.partyId).toBe('party-org');
+  });
+
+  it('initPartyInfo should ignore expired/empty sessions', () => {
+    component.partyId = 'kept-party';
+    localStorageSpy.getObject.and.returnValue({});
+    component.initPartyInfo();
+    expect(component.partyId).toBe('kept-party');
+  });
+
+  it('goBack should emit seller product spec event', () => {
+    component.goBack();
+    expect(eventMessageSpy.emitSellerProductSpec).toHaveBeenCalledWith(true);
+  });
+
+  it('togglePreview should copy description or clear it', () => {
+    component.generalForm.patchValue({ description: 'Some markdown' });
+    component.togglePreview();
+    expect(component.description).toBe('Some markdown');
+    component.generalForm.patchValue({ description: '' });
+    component.togglePreview();
+    expect(component.description).toBe('');
+  });
+
+  it('toggleGeneral should activate only general section', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    const refreshSpy = spyOn(component, 'refreshChars');
+    component.toggleGeneral();
+    expect(selectSpy).toHaveBeenCalledWith('general-info', 'general-circle');
+    expect(component.showGeneral).toBeTrue();
+    expect(component.showBundle).toBeFalse();
+    expect(component.showSummary).toBeFalse();
+    expect(refreshSpy).toHaveBeenCalled();
+  });
+
+  it('toggleBundle should activate only bundle section', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    component.toggleBundle();
+    expect(selectSpy).toHaveBeenCalledWith('bundle', 'bundle-circle');
+    expect(component.showBundle).toBeTrue();
+    expect(component.showGeneral).toBeFalse();
+  });
+
+  it('toggleBundleCheck should load products when bundle is enabled', () => {
+    const getSpy = spyOn(component, 'getProdSpecs');
+    component.bundleChecked = false;
+    component.toggleBundleCheck();
+    expect(component.bundleChecked).toBeTrue();
+    expect(component.loadingBundle).toBeTrue();
+    expect(getSpy).toHaveBeenCalledWith(false);
+  });
+
+  it('toggleBundleCheck should clear selected bundled products when disabled', () => {
+    component.bundleChecked = true;
+    component.prodSpecsBundle = [{ id: '1' } as any];
+    component.toggleBundleCheck();
+    expect(component.bundleChecked).toBeFalse();
+    expect(component.prodSpecsBundle).toEqual([]);
+  });
+
+  it('getProdSpecs should update bundle pagination state', async () => {
+    await component.getProdSpecs(false);
+    expect(paginationServiceSpy.getItemsPaginated).toHaveBeenCalled();
+    expect(component.bundlePageCheck).toBeTrue();
+    expect(component.prodSpecs.length).toBe(1);
+    expect(component.nextProdSpecs.length).toBe(1);
+    expect(component.bundlePage).toBe(10);
+    expect(component.loadingBundle).toBeFalse();
+  });
+
+  it('nextBundle should request next products page', async () => {
+    const spy = spyOn(component, 'getProdSpecs').and.resolveTo();
+    await component.nextBundle();
+    expect(spy).toHaveBeenCalledWith(true);
+  });
+
+  it('addProdToBundle and isProdInBundle should toggle bundle products', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    const prod = { id: 'p1', href: 'h', lifecycleStatus: 'Active', name: 'Prod' };
+    component.addProdToBundle(prod);
+    expect(component.isProdInBundle(prod)).toBeTrue();
+    component.addProdToBundle(prod);
+    expect(component.isProdInBundle(prod)).toBeFalse();
+    expect(detectSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('toggleCompliance should activate only compliance section', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    component.toggleCompliance();
+    expect(selectSpy).toHaveBeenCalledWith('compliance', 'compliance-circle');
+    expect(component.showCompliance).toBeTrue();
+    expect(component.showGeneral).toBeFalse();
+  });
+
+  it('addISO should move item from available to selected and close dropdown', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.buttonISOClicked = false;
+    component.availableISOS = [{ name: 'ISO123', mandatory: true, domesupported: false }];
+    component.selectedISOS = [];
+    component.addISO({ name: 'ISO123', mandatory: true, domesupported: false });
+    expect(component.availableISOS.length).toBe(0);
+    expect(component.selectedISOS[0].name).toBe('Compliance:ISO123');
+    expect(component.buttonISOClicked).toBeTrue();
     expect(detectSpy).toHaveBeenCalled();
   });
 
-  it('onTypeChange should switch characteristic input type flags', () => {
-    component.onTypeChange({ target: { value: 'number' } });
-    expect(component.stringCharSelected).toBeFalse();
-    expect(component.numberCharSelected).toBeTrue();
-    expect(component.rangeCharSelected).toBeFalse();
+  it('removeISO should move item back to available list', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.selectedISOS = [{ name: 'Compliance:ISO123', mandatory: false, domesupported: true }];
+    component.availableISOS = [];
+    component.removeISO(component.selectedISOS[0]);
+    expect(component.selectedISOS.length).toBe(0);
+    expect(component.availableISOS[0].name).toBe('ISO123');
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('removeCert should delete additional certification', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.additionalISOS = [{ name: 'Compliance:extra', url: 'u' }];
+    component.removeCert({ name: 'Compliance:extra' });
+    expect(component.additionalISOS.length).toBe(0);
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('removeSelfAtt should remove self attestation from finishChars', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.selfAtt = { name: 'Compliance:SelfAtt' };
+    component.finishChars = [{ name: 'Compliance:SelfAtt' } as any, { name: 'Other' } as any];
+    component.removeSelfAtt();
+    expect(component.selfAtt).toBe('');
+    expect(component.finishChars.length).toBe(1);
+    expect(component.finishChars[0].name).toBe('Other');
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('checkValidISOS should detect missing URLs', () => {
+    component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
+    expect(component.checkValidISOS()).toBeTrue();
+    component.selectedISOS = [{ name: 'Compliance:ISO-A', url: 'https://doc' }];
+    expect(component.checkValidISOS()).toBeFalse();
+  });
+
+  it('dropped should reject invalid filename', () => {
+    const badFile = { name: 'bad name.txt', type: 'text/plain', size: 1000 };
+    component.currentStep = 1;
+    component.BUNDLE_ENABLED = false;
+    component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
+    component.dropped([mockDroppedFile(badFile)], component.selectedISOS[0]);
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toContain('File names can only include alphabetical characters');
+    expect(attachmentServiceSpy.uploadFile).not.toHaveBeenCalled();
+  });
+
+  it('dropped should reject files that exceed max size', () => {
+    const bigFile = { name: 'big.txt', type: 'text/plain', size: component.MAX_FILE_SIZE + 1 };
+    component.currentStep = 1;
+    component.BUNDLE_ENABLED = false;
+    component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
+    component.dropped([mockDroppedFile(bigFile)], component.selectedISOS[0]);
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toBe('File size must be under 3MB.');
+    expect(attachmentServiceSpy.uploadFile).not.toHaveBeenCalled();
+  });
+
+  it('dropped should upload compliance ISO file and set URL', () => {
+    component.currentStep = 1;
+    component.BUNDLE_ENABLED = false;
+    component.showUploadAtt = false;
+    component.showUploadFile = true;
+    component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
+    const file = { name: 'iso.pdf', type: 'application/pdf', size: 200 };
+    component.dropped([mockDroppedFile(file)], component.selectedISOS[0]);
+    expect(attachmentServiceSpy.uploadFile).toHaveBeenCalled();
+    expect(component.selectedISOS[0].url).toBe('https://uploaded.file');
+    expect(component.showUploadFile).toBeFalse();
+  });
+
+  it('dropped should upload self-attestation when uploadAtt is enabled', () => {
+    component.currentStep = 1;
+    component.BUNDLE_ENABLED = false;
+    component.showUploadAtt = true;
+    component.selfAtt = { name: 'Compliance:SelfAtt' };
+    component.finishChars = [];
+    const file = { name: 'selfatt.pdf', type: 'application/pdf', size: 200 };
+    component.dropped([mockDroppedFile(file)], 'ignored');
+    expect(component.selfAtt.name).toBe('Compliance:SelfAtt');
+    expect(component.finishChars.length).toBe(1);
+    expect(component.showUploadAtt).toBeFalse();
+    expect(component.showUploadFile).toBeFalse();
+  });
+
+  it('dropped should upload image attachment and set preview', () => {
+    component.currentStep = 5;
+    component.BUNDLE_ENABLED = false;
+    const file = { name: 'picture.png', type: 'image/png', size: 200 };
+    component.dropped([mockDroppedFile(file)], 'img');
+    expect(component.showImgPreview).toBeTrue();
+    expect(component.imgPreview).toBe('https://uploaded.file');
+    expect(component.prodAttachments.length).toBe(1);
+  });
+
+  it('dropped should reject non-image file when img selector is used', () => {
+    component.currentStep = 5;
+    component.BUNDLE_ENABLED = false;
+    const file = { name: 'doc.pdf', type: 'application/pdf', size: 200 };
+    component.dropped([mockDroppedFile(file)], 'img');
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toBe('File must have a valid image format!');
+  });
+
+  it('dropped should set attachment draft for generic files', () => {
+    component.currentStep = 5;
+    component.BUNDLE_ENABLED = false;
+    const file = { name: 'manual.pdf', type: 'application/pdf', size: 200 };
+    component.dropped([mockDroppedFile(file)], 'attachment');
+    expect(component.attachToCreate.url).toBe('https://uploaded.file');
+    expect(component.attachToCreate.attachmentType).toBe('application/pdf');
+  });
+
+  it('dropped should handle upload errors and show 413-specific message', () => {
+    attachmentServiceSpy.uploadFile.and.returnValue(throwError(() => ({ status: 413, error: { error: 'too large' } })));
+    component.currentStep = 1;
+    component.BUNDLE_ENABLED = false;
+    component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
+    const file = { name: 'iso.pdf', type: 'application/pdf', size: 200 };
+    component.dropped([mockDroppedFile(file)], component.selectedISOS[0]);
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toBe('File size too large! Must be under 3MB.');
+  });
+
+  it('dropped should ignore directory entries', () => {
+    const directoryEntry = {
+      relativePath: 'folder',
+      fileEntry: { isFile: false }
+    };
+    component.dropped([directoryEntry as any], 'ignored');
+    expect(component.files.length).toBe(1);
+  });
+
+  it('isValidFilename should validate filename with configured regex', () => {
+    expect(component.isValidFilename('valid-file_1.0.txt')).toBeTrue();
+    expect(component.isValidFilename('invalid name.txt')).toBeFalse();
+  });
+
+  it('fileOver, fileLeave and uploadFile should execute without side effects', () => {
+    spyOn(console, 'log');
+    component.fileOver({ type: 'over' });
+    component.fileLeave({ type: 'leave' });
+    component.uploadFile();
+    expect(console.log).toHaveBeenCalled();
+  });
+
+  it('toggleUploadSelfAtt and toggleUploadFile should set flags and selectedISO', () => {
+    component.toggleUploadSelfAtt();
+    expect(component.showUploadFile).toBeTrue();
+    expect(component.showUploadAtt).toBeTrue();
+    component.toggleUploadFile({ name: 'ISO-A' });
+    expect(component.selectedISO).toEqual({ name: 'ISO-A' });
+  });
+
+  it('toggleChars should activate chars section and reset char creation state', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    const refreshSpy = spyOn(component, 'refreshChars');
+    component.showCreateChar = true;
+    component.charTypeSelected = 'number';
+    component.toggleChars();
+    expect(selectSpy).toHaveBeenCalledWith('chars', 'chars-circle');
+    expect(component.showChars).toBeTrue();
+    expect(component.showCreateChar).toBeFalse();
+    expect(component.charTypeSelected).toBe('string');
+    expect(refreshSpy).toHaveBeenCalled();
+  });
+
+  it('toggleResource should reset resource pagination and request first page', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    const getSpy = spyOn(component, 'getResSpecs');
+    component.resourceSpecs = [{ id: 'old' }];
+    component.resourceSpecPage = 50;
+    component.toggleResource();
+    expect(getSpy).toHaveBeenCalledWith(false);
+    expect(component.resourceSpecs).toEqual([]);
+    expect(component.resourceSpecPage).toBe(0);
+    expect(component.showResource).toBeTrue();
+    expect(selectSpy).toHaveBeenCalledWith('resource', 'resource-circle');
+  });
+
+  it('getResSpecs and nextRes should update resource pagination state', async () => {
+    await component.getResSpecs(false);
+    expect(component.resourceSpecs.length).toBe(1);
+    const spy = spyOn(component, 'getResSpecs').and.resolveTo();
+    await component.nextRes();
+    expect(spy).toHaveBeenCalledWith(true);
+  });
+
+  it('addResToSelected and isResSelected should toggle resource selection', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    const res = { id: 'res-1', href: 'href', name: 'Resource' };
+    component.addResToSelected(res);
+    expect(component.isResSelected(res)).toBeTrue();
+    component.addResToSelected(res);
+    expect(component.isResSelected(res)).toBeFalse();
+    expect(detectSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('toggleService should reset service pagination and request first page', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    const getSpy = spyOn(component, 'getServSpecs');
+    component.serviceSpecs = [{ id: 'old' }];
+    component.serviceSpecPage = 50;
+    component.toggleService();
+    expect(getSpy).toHaveBeenCalledWith(false);
+    expect(component.serviceSpecs).toEqual([]);
+    expect(component.serviceSpecPage).toBe(0);
+    expect(component.showService).toBeTrue();
+    expect(selectSpy).toHaveBeenCalledWith('service', 'service-circle');
+  });
 
+  it('getServSpecs and nextServ should update service pagination state', async () => {
+    await component.getServSpecs(false);
+    expect(component.serviceSpecs.length).toBe(1);
+    const spy = spyOn(component, 'getServSpecs').and.resolveTo();
+    await component.nextServ();
+    expect(spy).toHaveBeenCalledWith(true);
+  });
+
+  it('addServToSelected and isServSelected should toggle service selection', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    const serv = { id: 'serv-1', href: 'href', name: 'Service' };
+    component.addServToSelected(serv);
+    expect(component.isServSelected(serv)).toBeTrue();
+    component.addServToSelected(serv);
+    expect(component.isServSelected(serv)).toBeFalse();
+    expect(detectSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('toggleAttach should activate attachment section', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    const refreshSpy = spyOn(component, 'refreshChars');
+    const timeoutSpy = spyOn(window, 'setTimeout');
+    component.toggleAttach();
+    expect(component.showAttach).toBeTrue();
+    expect(component.showGeneral).toBeFalse();
+    expect(selectSpy).toHaveBeenCalledWith('attach', 'attach-circle');
+    expect(refreshSpy).toHaveBeenCalled();
+    expect(timeoutSpy).toHaveBeenCalled();
+  });
+
+  it('removeImg should remove profile image attachment and clear preview', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.showImgPreview = true;
+    component.imgPreview = 'https://img';
+    component.prodAttachments = [{ name: 'Profile Picture', url: 'https://img', attachmentType: 'Picture' } as any];
+    component.removeImg();
+    expect(component.showImgPreview).toBeFalse();
+    expect(component.imgPreview).toBe('');
+    expect(component.prodAttachments.length).toBe(0);
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('saveImgFromURL should create profile image attachment from URL field', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.imgURL = { nativeElement: { value: 'https://site/image.png' } } as any;
+    component.saveImgFromURL();
+    expect(component.showImgPreview).toBeTrue();
+    expect(component.imgPreview).toBe('https://site/image.png');
+    expect(component.prodAttachments[0].name).toBe('Profile Picture');
+    expect(component.attImageName.value).toBeNull();
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('removeAtt should remove attachments and clear image preview when needed', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.showImgPreview = true;
+    component.imgPreview = 'https://img';
+    component.prodAttachments = [
+      { name: 'Profile Picture', url: 'https://img', attachmentType: 'Picture' } as any,
+      { name: 'Manual', url: 'https://manual', attachmentType: 'application/pdf' } as any
+    ];
+    component.removeAtt({ url: 'https://img' });
+    expect(component.showImgPreview).toBeFalse();
+    expect(component.imgPreview).toBe('');
+    expect(component.prodAttachments.length).toBe(1);
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('saveAtt and clearAtt should manage attachment draft lifecycle', () => {
+    component.attachName = { nativeElement: { value: 'Manual' } } as any;
+    component.attachToCreate = { url: 'https://manual.pdf', attachmentType: 'application/pdf' };
+    component.showNewAtt = true;
+    component.saveAtt();
+    expect(component.prodAttachments.length).toBe(1);
+    expect(component.prodAttachments[0].name).toBe('Manual');
+    expect(component.attachToCreate.url).toBe('');
+    expect(component.showNewAtt).toBeFalse();
+    component.attachToCreate = { url: 'x', attachmentType: 'y' };
+    component.clearAtt();
+    expect(component.attachToCreate).toEqual({ url: '', attachmentType: '' });
+  });
+
+  it('saveAdditionalCert and clearAdditionalCert should manage additional cert draft', () => {
+    component.certificationName = { nativeElement: { value: 'CustomISO' } } as any;
+    component.isoToCreate = 'https://cert.url';
+    component.showCert = true;
+    component.saveAdditionalCert();
+    expect(component.additionalISOS.length).toBe(1);
+    expect(component.additionalISOS[0].name).toBe('Compliance:CustomISO');
+    expect(component.isoToCreate).toBe('');
+    expect(component.showCert).toBeFalse();
+    component.certificationName = { nativeElement: { value: 'keep' } } as any;
+    component.isoToCreate = 'x';
+    component.clearAdditionalCert(true);
+    expect(component.certificationName.nativeElement.value).toBe('keep');
+    expect(component.isoToCreate).toBe('');
+    component.certificationName = { nativeElement: { value: 'reset' } } as any;
+    component.isoToCreate = 'y';
+    component.clearAdditionalCert(false);
+    expect(component.certificationName.nativeElement.value).toBe('');
+  });
+
+  it('toggleRelationship should reset state and request related product specs', () => {
+    const getSpy = spyOn(component, 'getProdSpecsRel');
+    const selectSpy = spyOn(component, 'selectStep');
+    component.prodSpecRels = [{ id: 'old' }];
+    component.prodSpecRelPage = 50;
+    component.showCreateRel = true;
+    component.toggleRelationship();
+    expect(component.prodSpecRels).toEqual([]);
+    expect(component.prodSpecRelPage).toBe(0);
+    expect(component.showCreateRel).toBeFalse();
+    expect(component.showRelationships).toBeTrue();
+    expect(getSpy).toHaveBeenCalledWith(false);
+    expect(selectSpy).toHaveBeenCalledWith('relationships', 'relationships-circle');
+  });
+
+  it('getProdSpecsRel and nextProdSpecsRel should update relationship pagination state', async () => {
+    await component.getProdSpecsRel(false);
+    expect(component.prodSpecRels.length).toBe(1);
+    const spy = spyOn(component, 'getProdSpecsRel').and.resolveTo();
+    await component.nextProdSpecsRel();
+    expect(spy).toHaveBeenCalledWith(true);
+  });
+
+  it('selectRelationship, onRelChange, saveRel and deleteRel should manage relationships', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.selectRelationship({ id: 'r1', href: 'href', name: 'Rel1' });
+    expect(component.selectedProdSpec.id).toBe('r1');
+    component.onRelChange({ target: { value: 'dependency' } });
+    expect(component.selectedRelType).toBe('dependency');
+    component.saveRel();
+    expect(component.prodRelationships.length).toBe(1);
+    expect(component.prodRelationships[0].relationshipType).toBe('dependency');
+    expect(component.selectedRelType).toBe('migration');
+    component.deleteRel({ id: 'r1' });
+    expect(component.prodRelationships.length).toBe(0);
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('refreshChars should restore default characteristic state', () => {
+    component.stringValue = 'x';
+    component.numberValue = '2';
+    component.rangeUnit = 'ms';
+    component.charTypeSelected = 'number';
+    component.creatingChars = [{ isDefault: true } as any];
+    component.refreshChars();
+    expect(component.stringValue).toBe('');
+    expect(component.numberValue).toBe('');
+    expect(component.rangeUnit).toBe('');
+    expect(component.charTypeSelected).toBe('string');
+    expect(component.booleanDefaultTrue).toBeTrue();
+    expect(component.creatingChars).toEqual([]);
+  });
+
+  it('removeClass and addClass should update className', () => {
+    const elem = { className: 'a b c' } as HTMLElement;
+    component.removeClass(elem, 'b');
+    expect(elem.className).toBe('a c');
+    component.addClass(elem, 'new-class');
+    expect(elem.className).toContain('new-class');
+  });
+
+  it('unselectMenu and selectMenu should delegate to class helpers', () => {
+    const elem = { className: 'x active' } as HTMLElement;
+    const removeSpy = spyOn(component, 'removeClass');
+    component.unselectMenu(elem, 'active');
+    expect(removeSpy).toHaveBeenCalledWith(elem, 'active');
+    const addSpy = spyOn(component, 'addClass');
+    component.selectMenu({ className: 'x' } as HTMLElement, 'active');
+    expect(addSpy).toHaveBeenCalled();
+  });
+
+  it('selectStep should select active step and update menu classes', () => {
+    const selectSpy = spyOn(component, 'selectMenu');
+    const unselectSpy = spyOn(component, 'unselectMenu');
+    spyOn(document, 'getElementById').and.returnValue({ className: 'text-gray-500 border-gray-400' } as any);
+    component.selectStep('general-info', 'general-circle');
+    expect(selectSpy).toHaveBeenCalled();
+    expect(unselectSpy).toHaveBeenCalled();
+    expect(component.stepsElements).toContain('general-info');
+    expect(component.stepsCircles).toContain('general-circle');
+  });
+
+  it('onTypeChange should switch characteristic type and clear draft values', () => {
+    component.creatingChars = [{ isDefault: true } as any];
+    component.isOptional = true;
+    component.optionalDftTrue = true;
+    component.booleanDefaultTrue = false;
+    component.onTypeChange({ target: { value: 'number' } });
+    expect(component.charTypeSelected).toBe('number');
+    expect(component.creatingChars).toEqual([]);
+    expect(component.isOptional).toBeFalse();
+    component.onTypeChange({ target: { value: 'boolean' } });
+    expect(component.charTypeSelected).toBe('boolean');
+    expect(component.booleanDefaultTrue).toBeTrue();
+    expect(component.creatingChars.length).toBe(2);
+    expect(component.creatingChars[0].isDefault).toBeTrue();
+    expect(component.creatingChars[0].value as any).toBeTrue();
+    expect(component.creatingChars[1].isDefault).toBeFalse();
+    expect(component.creatingChars[1].value as any).toBeFalse();
     component.onTypeChange({ target: { value: 'range' } });
-    expect(component.stringCharSelected).toBeFalse();
-    expect(component.numberCharSelected).toBeFalse();
-    expect(component.rangeCharSelected).toBeTrue();
+    expect(component.charTypeSelected).toBe('range');
   });
 
-  it('goBack should emit seller product spec event', () => {
-    spyOn(eventMessage, 'emitSellerProductSpec');
+  it('onBooleanDefaultChange should switch default between true and false', () => {
+    component.charTypeSelected = 'boolean';
+    component.booleanDefaultTrue = true;
+    component.onBooleanDefaultChange();
+    expect(component.creatingChars[0].isDefault).toBeTrue();
+    expect(component.creatingChars[1].isDefault).toBeFalse();
 
-    component.goBack();
+    component.booleanDefaultTrue = false;
+    component.onBooleanDefaultChange();
+    expect(component.creatingChars[0].isDefault).toBeFalse();
+    expect(component.creatingChars[1].isDefault).toBeTrue();
+  });
 
-    expect(eventMessage.emitSellerProductSpec).toHaveBeenCalledWith(true);
+  it('addCharValue should add string values and assign default correctly', () => {
+    component.charTypeSelected = 'string';
+    component.stringValue = 'A';
+    component.addCharValue();
+    component.stringValue = 'B';
+    component.addCharValue();
+    expect(component.creatingChars.length).toBe(2);
+    expect(component.creatingChars[0].isDefault).toBeTrue();
+    expect(component.creatingChars[1].isDefault).toBeFalse();
   });
 
-  it('canNavigate should depend on general form validity and step index', () => {
-    component.currentStep = 0;
-    component.highestStep = 0;
-    expect(component.canNavigate(0)).toBeFalse();
+  it('addCharValue should add number values with units', () => {
+    component.charTypeSelected = 'number';
+    component.numberValue = '100';
+    component.numberUnit = 'ms';
+    component.addCharValue();
+    expect(component.creatingChars[0].value as any).toBe('100');
+    expect(component.creatingChars[0].unitOfMeasure).toBe('ms');
+    expect(component.numberValue).toBe('');
+    expect(component.numberUnit).toBe('');
+  });
+
+  it('addCharValue should not mutate fixed boolean values', () => {
+    component.charTypeSelected = 'boolean';
+    component.creatingChars = [
+      { isDefault: true, value: true } as any,
+      { isDefault: false, value: false } as any
+    ];
+    component.addCharValue();
+    expect(component.creatingChars.length).toBe(2);
+    expect(component.creatingChars[0].value as any).toBeTrue();
+    expect(component.creatingChars[1].value as any).toBeFalse();
+  });
 
+  it('addCharValue should validate range and reject invalid intervals', () => {
+    component.charTypeSelected = 'range';
+    component.fromValue = '10';
+    component.toValue = '5';
+    component.addCharValue();
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toContain('Invalid range');
+    expect(component.creatingChars.length).toBe(0);
+  });
+
+  it('addCharValue should add valid range values', () => {
+    component.charTypeSelected = 'range';
+    component.fromValue = '5';
+    component.toValue = '10';
+    component.rangeUnit = 'GB';
+    component.addCharValue();
+    expect(component.creatingChars.length).toBe(1);
+    expect(component.creatingChars[0].valueFrom as any).toBe('5');
+    expect(component.creatingChars[0].valueTo as any).toBe('10');
+    expect(component.creatingChars[0].unitOfMeasure).toBe('GB');
+  });
+
+  it('removeCharValue and selectDefaultChar should manage created char values', () => {
+    component.creatingChars = [
+      { isDefault: true, value: 'A' } as any,
+      { isDefault: false, value: 'B' } as any
+    ];
+    component.selectDefaultChar(component.creatingChars[1], 1);
+    expect(component.creatingChars[0].isDefault).toBeFalse();
+    expect(component.creatingChars[1].isDefault).toBeTrue();
+    component.removeCharValue(component.creatingChars[0], 0);
+    expect(component.creatingChars.length).toBe(1);
+  });
+
+  it('removeCharValue should not remove values for boolean type', () => {
+    component.charTypeSelected = 'boolean';
+    component.creatingChars = [
+      { isDefault: true, value: true } as any,
+      { isDefault: false, value: false } as any
+    ];
+    component.removeCharValue(component.creatingChars[0], 0);
+    expect(component.creatingChars.length).toBe(2);
+    expect(component.creatingChars[0].value as any).toBeTrue();
+    expect(component.creatingChars[1].value as any).toBeFalse();
+  });
+
+  it('saveChar should reject duplicated names', () => {
+    component.charsForm.patchValue({ name: 'Latency', description: 'desc' });
+    component.prodChars = [{ id: '1', name: 'Latency', productSpecCharacteristicValue: [] } as any];
+    component.creatingChars = [{ isDefault: true, value: '100' } as any];
+    component.saveChar();
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toBe('Cannot save duplicated name in characteristics');
+  });
+
+  it('saveChar should save main and optional enabled characteristic', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.charsForm.patchValue({ name: 'Bandwidth', description: 'desc' });
+    component.creatingChars = [{ isDefault: true, value: '1Gbps' } as any];
+    component.isOptional = true;
+    component.optionalDftTrue = true;
+    component.saveChar();
+    expect(component.prodChars.length).toBe(2);
+    expect(component.prodChars[0].name).toBe('Bandwidth');
+    expect(component.prodChars[1].name).toBe('Bandwidth - enabled');
+    expect(component.showCreateChar).toBeFalse();
+    expect(component.isOptional).toBeFalse();
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('saveChar should ignore optional toggle for boolean characteristics', () => {
+    component.charTypeSelected = 'boolean';
+    component.charsForm.patchValue({ name: 'Enabled', description: 'desc' });
+    component.creatingChars = [
+      { isDefault: true, value: true } as any,
+      { isDefault: false, value: false } as any
+    ];
+    component.isOptional = true;
+    component.optionalDftTrue = true;
+    component.saveChar();
+    expect(component.prodChars.length).toBe(1);
+    expect(component.prodChars[0].name).toBe('Enabled');
+  });
+
+  it('deleteChar should remove characteristic and its related enabled one', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.prodChars = [
+      { id: 'a', name: 'Bandwidth' } as any,
+      { id: 'b', name: 'Bandwidth - enabled' } as any,
+      { id: 'c', name: 'Other' } as any
+    ];
+    component.deleteChar({ id: 'a', name: 'Bandwidth' });
+    expect(component.prodChars.length).toBe(1);
+    expect(component.prodChars[0].name).toBe('Other');
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('checkInput should identify blank inputs', () => {
+    expect(component.checkInput('   ')).toBeTrue();
+    expect(component.checkInput('abc')).toBeFalse();
+  });
+
+  it('showFinish should build final product payload and activate summary step', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    const refreshSpy = spyOn(component, 'refreshChars');
+    component.partyId = 'party-1';
+    component.bundleChecked = true;
     component.generalForm.patchValue({
       name: 'My Product',
-      brand: 'Brand',
+      description: 'Desc',
       version: '1.0',
+      brand: 'Brand',
+      number: 'PN-1'
     });
+    component.prodSpecsBundle = [{ id: 'bundle-1' } as any];
+    component.prodChars = [{ id: 'char-1', name: 'Feature', productSpecCharacteristicValue: [{ value: 'x' }] } as any];
+    component.selectedISOS = [{ name: 'Compliance:ISO-1', url: 'https://iso' }];
+    component.additionalISOS = [{ name: 'Compliance:Custom', url: 'https://custom' }];
+    component.prodRelationships = [{ id: 'rel-1', href: 'href-1', name: 'RelName', relationshipType: 'migration' }];
+    component.prodAttachments = [{ name: 'Manual', url: 'https://doc', attachmentType: 'application/pdf' } as any];
+    component.selectedResourceSpecs = [{ id: 'res-1' } as any];
+    component.selectedServiceSpecs = [{ id: 'srv-1' } as any];
+    component.showFinish();
+    expect(component.finishDone).toBeTrue();
+    expect(component.showSummary).toBeTrue();
+    expect(component.productSpecToCreate).toBeDefined();
+    expect(component.productSpecToCreate?.name).toBe('My Product');
+    expect(component.productSpecToCreate?.productSpecCharacteristic?.length).toBeGreaterThan(0);
+    expect(component.productSpecToCreate?.productSpecificationRelationship?.length).toBe(1);
+    expect(component.productSpecToCreate?.resourceSpecification?.length).toBe(1);
+    expect(component.productSpecToCreate?.serviceSpecification?.length).toBe(1);
+    expect(selectSpy).toHaveBeenCalledWith('summary', 'summary-circle');
+    expect(refreshSpy).toHaveBeenCalled();
+  });
+
+  it('createProduct should call API and go back on success', () => {
+    const backSpy = spyOn(component, 'goBack');
+    component.productSpecToCreate = { name: 'Prod' } as any;
+    component.createProduct();
+    expect(prodSpecServiceSpy.postProdSpec).toHaveBeenCalledWith(component.productSpecToCreate);
+    expect(component.loading).toBeFalse();
+    expect(backSpy).toHaveBeenCalled();
+  });
+
+  it('createProduct should handle API error and show message', () => {
+    prodSpecServiceSpy.postProdSpec.and.returnValue(throwError(() => ({ error: { error: 'boom' } })));
+    component.productSpecToCreate = { name: 'Prod' } as any;
+    component.createProduct();
+    expect(component.loading).toBeFalse();
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toBe('Error: boom');
+  });
+
+  it('markdown helpers should append markdown snippets', () => {
+    component.generalForm.patchValue({ description: 'base' });
+    component.addBold();
+    expect(component.generalForm.value.description).toContain('**bold text**');
+    component.addItalic();
+    expect(component.generalForm.value.description).toContain('_italicized text_');
+    component.addList();
+    expect(component.generalForm.value.description).toContain('- First item');
+    component.addOrderedList();
+    expect(component.generalForm.value.description).toContain('1. First item');
+    component.addCode();
+    expect(component.generalForm.value.description).toContain('`code`');
+    component.addCodeBlock();
+    expect(component.generalForm.value.description).toContain('```');
+    component.addBlockquote();
+    expect(component.generalForm.value.description).toContain('> blockquote');
+    component.addLink();
+    expect(component.generalForm.value.description).toContain('[title](https://www.example.com)');
+    component.addTable();
+    expect(component.generalForm.value.description).toContain('| Syntax | Description |');
+  });
+
+  it('addEmoji should append selected emoji and close picker', () => {
+    component.generalForm.patchValue({ description: 'base' });
+    component.showEmoji = true;
+    component.addEmoji({ emoji: { native: '🚀' } });
+    expect(component.showEmoji).toBeFalse();
+    expect(component.generalForm.value.description).toContain('🚀');
+  });
+
+  it('hasLongWord should detect words over threshold', () => {
+    expect(component.hasLongWord('small words only', 20)).toBeFalse();
+    expect(component.hasLongWord('averyveryveryveryverylongword here', 10)).toBeTrue();
+    expect(component.hasLongWord(undefined, 10)).toBeFalse();
+  });
+
+  it('goToStep should block forward navigation when current step is invalid', () => {
+    component.currentStep = 0;
+    const validateSpy = spyOn(component, 'validateCurrentStep').and.returnValue(false);
+    component.goToStep(1);
+    expect(validateSpy).toHaveBeenCalled();
+    expect(component.currentStep).toBe(0);
+  });
+
+  it('goToStep should call dependent loaders for non-bundle flow', () => {
+    component.BUNDLE_ENABLED = false;
+    component.currentStep = 0;
+    component.highestStep = 0;
+    spyOn(component, 'validateCurrentStep').and.returnValue(true);
+    const refreshSpy = spyOn(component, 'refreshChars');
+    const resSpy = spyOn(component, 'getResSpecs');
+    const servSpy = spyOn(component, 'getServSpecs');
+    const relSpy = spyOn(component, 'getProdSpecsRel');
+    const finishSpy = spyOn(component, 'showFinish');
+    const timeoutSpy = spyOn(window, 'setTimeout');
+
+    component.goToStep(3);
+    expect(resSpy).toHaveBeenCalledWith(false);
+    component.goToStep(4);
+    expect(servSpy).toHaveBeenCalledWith(false);
+    component.goToStep(5);
+    expect(timeoutSpy).toHaveBeenCalled();
+    component.goToStep(6);
+    expect(relSpy).toHaveBeenCalledWith(false);
+    component.goToStep(7);
+    expect(finishSpy).toHaveBeenCalled();
+    expect(component.highestStep).toBe(7);
+    expect(refreshSpy).toHaveBeenCalled();
+  });
+
+  it('goToStep should call dependent loaders for bundle flow', () => {
+    component.BUNDLE_ENABLED = true;
+    spyOn(component, 'validateCurrentStep').and.returnValue(true);
+    const resSpy = spyOn(component, 'getResSpecs');
+    const servSpy = spyOn(component, 'getServSpecs');
+    const relSpy = spyOn(component, 'getProdSpecsRel');
+    const finishSpy = spyOn(component, 'showFinish');
+    component.goToStep(4);
+    component.goToStep(5);
+    component.goToStep(7);
+    component.goToStep(8);
+    expect(resSpy).toHaveBeenCalledWith(false);
+    expect(servSpy).toHaveBeenCalledWith(false);
+    expect(relSpy).toHaveBeenCalledWith(false);
+    expect(finishSpy).toHaveBeenCalled();
+  });
+
+  it('validateCurrentStep should validate step 0 by general form validity', () => {
+    component.currentStep = 0;
+    component.generalForm.patchValue({ name: '', brand: '', version: '' });
+    expect(component.validateCurrentStep()).toBeFalse();
+    component.generalForm.patchValue({ name: 'A', brand: 'B', version: '1.0' });
+    expect(component.validateCurrentStep()).toBeTrue();
+    component.currentStep = 5;
+    expect(component.validateCurrentStep()).toBeTrue();
+  });
+
+  it('isStepDisabled should enforce step-specific guards', () => {
+    component.currentStep = 0;
+    component.generalForm.patchValue({ name: '', brand: '', version: '' });
+    expect(component.isStepDisabled()).toBeTrue();
+    component.generalForm.patchValue({ name: 'A', brand: 'B', version: '1.0' });
+    expect(component.isStepDisabled()).toBeFalse();
+
+    component.currentStep = 1;
+    component.BUNDLE_ENABLED = true;
+    component.bundleChecked = true;
+    component.prodSpecsBundle = [{ id: '1' } as any];
+    expect(component.isStepDisabled()).toBeTrue();
+    component.prodSpecsBundle.push({ id: '2' } as any);
+    expect(component.isStepDisabled()).toBeFalse();
+
+    component.BUNDLE_ENABLED = false;
+    spyOn(component, 'checkValidISOS').and.returnValue(true);
+    expect(component.isStepDisabled()).toBeTrue();
+
+    component.currentStep = 2;
+    component.BUNDLE_ENABLED = true;
+    (component.checkValidISOS as jasmine.Spy).and.returnValue(false);
+    expect(component.isStepDisabled()).toBeFalse();
+  });
+
+  it('canNavigate and handleStepClick should honor navigation constraints', () => {
+    component.currentStep = 0;
+    component.highestStep = 0;
+    component.generalForm.patchValue({ name: '', brand: '', version: '' });
+    expect(component.canNavigate(0)).toBeFalse();
+    component.generalForm.patchValue({ name: 'A', brand: 'B', version: '1.0' });
+    component.highestStep = 2;
+    expect(component.canNavigate(2)).toBeTrue();
+
+    const goSpy = spyOn(component, 'goToStep');
+    component.handleStepClick(2);
+    expect(goSpy).toHaveBeenCalledWith(2);
+    component.generalForm.patchValue({ name: '', brand: '', version: '' });
+    component.handleStepClick(1);
+    expect(goSpy).toHaveBeenCalledTimes(1);
+  });
 
-    expect(component.canNavigate(0)).toBeTrue();
-    expect(component.canNavigate(1)).toBeFalse();
+  it('normalizeName should strip compliance prefix and trim whitespace', () => {
+    expect(component.normalizeName('Compliance: ISO 27001 ')).toBe('ISO 27001');
+    expect(component.normalizeName('compliance:Custom')).toBe('Custom');
+    expect(component.normalizeName(undefined)).toBe('');
   });
 });
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.ts
index f64e28b0..9b33c72c 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.ts
@@ -74,7 +74,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
 
   showPreview:boolean=false;
   showEmoji:boolean=false;
-  description:string='';  
+  description:string='';
   partyId:any='';
 
   //PRODUCT GENERAL INFO:
@@ -91,9 +91,10 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     name: new FormControl('', [Validators.required, Validators.maxLength(100), noWhitespaceValidator]),
     description: new FormControl('', [Validators.maxLength(500)])
   });
-  stringCharSelected:boolean=true;
-  numberCharSelected:boolean=false;
-  rangeCharSelected:boolean=false;
+
+  charTypeSelected:string='string';
+  booleanDefaultTrue:boolean=true;
+
   isOptional:boolean=false;
   optionalDftTrue:boolean=false;
   prodChars:ProductSpecificationCharacteristic[]=[];
@@ -179,7 +180,6 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
   numberUnit: string = '';
   fromValue: string = '';
   toValue: string = '';
-  booleanValue: boolean = false;
   rangeUnit: string = '';
 
   filenameRegex = /^[A-Za-z0-9_.-]+$/;
@@ -225,7 +225,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
   @ViewChild('attachName') attachName!: ElementRef;
   @ViewChild('imgURL') imgURL!: ElementRef;
   @ViewChild('certificationName') certificationName!: ElementRef;
-  
+
 
   public files: NgxFileDropEntry[] = [];
 
@@ -333,7 +333,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     if(next==false){
       this.loadingBundle=true;
     }
-    
+
     let options = {
       "filters": ['Active','Launched'],
       "partyId": this.partyId,
@@ -343,7 +343,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
 
     this.paginationService.getItemsPaginated(this.bundlePage, this.PROD_SPEC_LIMIT, next, this.prodSpecs,this.nextProdSpecs, options,
       this.prodSpecService.getProdSpecByUser.bind(this.prodSpecService)).then(data => {
-      this.bundlePageCheck=data.page_check;      
+      this.bundlePageCheck=data.page_check;
       this.prodSpecs=data.items;
       this.nextProdSpecs=data.nextItems;
       this.bundlePage=data.page;
@@ -369,7 +369,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
         lifecycleStatus: prod.lifecycleStatus,
         name: prod.name
       });
-    }    
+    }
     this.cdr.detectChanges();
     console.log(this.prodSpecsBundle)
   }
@@ -380,7 +380,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       return true
     } else {
       return false;
-    } 
+    }
   }
 
   toggleCompliance(){
@@ -424,9 +424,9 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       //if (iso.name in this.verifiedISO) {
       //  delete this.verifiedISO[iso.name]
       //}
-    }  
+    }
     this.cdr.detectChanges();
-    console.log(this.prodSpecsBundle)    
+    console.log(this.prodSpecsBundle)
   }
 
   removeCert(iso:any){
@@ -435,7 +435,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       console.log('eliminar additional cert')
       this.additionalISOS.splice(index, 1);
       console.log(this.additionalISOS)
-    }  
+    }
     this.cdr.detectChanges();
   }
 
@@ -462,18 +462,18 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     } else {
       return false;
     }
-    
+
   }
 
   public dropped(files: NgxFileDropEntry[],sel:any) {
     this.files = files;
     for (const droppedFile of files) {
- 
+
       // Is it a file?
       if (droppedFile.fileEntry.isFile) {
         const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
         fileEntry.file((file: File) => {
-          console.log('dropped')       
+          console.log('dropped')
 
           if (file) {
             const reader = new FileReader();
@@ -638,7 +638,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
             };
             reader.readAsDataURL(file);
           }
- 
+
         });
       } else {
         // It was a directory (empty directories are added, otherwise only files)
@@ -651,11 +651,11 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
   isValidFilename(filename: string): boolean {
     return this.filenameRegex.test(filename);
   }
- 
+
   public fileOver(event: any){
     console.log(event);
   }
- 
+
   public fileLeave(event: any){
     console.log('leave')
     console.log(event);
@@ -668,7 +668,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
 
   toggleUploadFile(sel:any){
     this.showUploadFile=true;
-    this.selectedISO=sel;    
+    this.selectedISO=sel;
   }
 
   uploadFile(){
@@ -688,9 +688,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.showSummary=false;
 
     this.showCreateChar=false;
-    this.stringCharSelected=true;
-    this.numberCharSelected=false;
-    this.rangeCharSelected=false;
+    this.charTypeSelected='string';
     this.showPreview=false;
     this.refreshChars();
   }
@@ -718,7 +716,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     if(next==false){
       this.loadingResourceSpec=true;
     }
-    
+
     let options = {
       "filters": ['Active','Launched'],
       "partyId": this.partyId,
@@ -728,7 +726,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
 
     this.paginationService.getItemsPaginated(this.resourceSpecPage, this.RES_SPEC_LIMIT, next, this.resourceSpecs,this.nextResourceSpecs, options,
       this.resSpecService.getResourceSpecByUser.bind(this.resSpecService)).then(data => {
-      this.resourceSpecPageCheck=data.page_check;      
+      this.resourceSpecPageCheck=data.page_check;
       this.resourceSpecs=data.items;
       this.nextResourceSpecs=data.nextItems;
       this.resourceSpecPage=data.page;
@@ -753,7 +751,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
         href: res.href,
         name: res.name
       });
-    }    
+    }
     this.cdr.detectChanges();
     console.log(this.selectedResourceSpecs)
   }
@@ -764,7 +762,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       return true
     } else {
       return false;
-    } 
+    }
   }
 
   toggleService(){
@@ -790,7 +788,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     if(next==false){
       this.loadingServiceSpec=true;
     }
-    
+
     let options = {
       "filters": ['Active','Launched'],
       "partyId": this.partyId,
@@ -800,7 +798,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
 
     this.paginationService.getItemsPaginated(this.serviceSpecPage, this.SERV_SPEC_LIMIT, next, this.serviceSpecs,this.nextServiceSpecs, options,
       this.servSpecService.getServiceSpecByUser.bind(this.servSpecService)).then(data => {
-      this.serviceSpecPageCheck=data.page_check;      
+      this.serviceSpecPageCheck=data.page_check;
       this.serviceSpecs=data.items;
       this.nextServiceSpecs=data.nextItems;
       this.serviceSpecPage=data.page;
@@ -825,7 +823,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
         href: serv.href,
         name: serv.name
       });
-    }    
+    }
     this.cdr.detectChanges();
     console.log(this.selectedServiceSpecs)
   }
@@ -836,7 +834,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       return true
     } else {
       return false;
-    } 
+    }
   }
 
   toggleAttach(){
@@ -851,13 +849,13 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.showRelationships=false;
     this.showSummary=false;
     this.showPreview=false;
-    setTimeout(() => {        
-      initFlowbite();   
+    setTimeout(() => {
+      initFlowbite();
     }, 100);
     this.refreshChars();
   }
 
-  removeImg(){    
+  removeImg(){
     this.showImgPreview=false;
     const index = this.prodAttachments.findIndex(item => item.url === this.imgPreview);
     if (index !== -1) {
@@ -890,7 +888,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
         this.cdr.detectChanges();
       }
       this.prodAttachments.splice(index, 1);
-    }  
+    }
     this.cdr.detectChanges();
   }
 
@@ -927,7 +925,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     if(!urlonly){
       this.certificationName.nativeElement.value='';
       this.certFileName.reset();
-    }    
+    }
     this.isoToCreate='';
   }
 
@@ -955,7 +953,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     if(next==false){
       this.loadingprodSpecRel=true;
     }
-    
+
     let options = {
       "filters": ['Active','Launched'],
       "partyId": this.partyId,
@@ -965,7 +963,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
 
     this.paginationService.getItemsPaginated(this.prodSpecRelPage, this.PROD_SPEC_LIMIT, next, this.prodSpecRels, this.nextProdSpecRels, options,
       this.prodSpecService.getProdSpecByUser.bind(this.prodSpecService)).then(data => {
-      this.prodSpecRelPageCheck=data.page_check;      
+      this.prodSpecRelPageCheck=data.page_check;
       this.prodSpecRels=data.items;
       this.nextProdSpecRels=data.nextItems;
       this.prodSpecRelPage=data.page;
@@ -1004,8 +1002,8 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     if (index !== -1) {
       console.log('eliminar')
       this.prodRelationships.splice(index, 1);
-    }   
-    this.cdr.detectChanges(); 
+    }
+    this.cdr.detectChanges();
   }
 
   refreshChars(){
@@ -1015,14 +1013,32 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.fromValue = '';
     this.toValue = '';
     this.rangeUnit = '';
-    this.stringCharSelected=true;
-    this.numberCharSelected=false;
-    this.rangeCharSelected=false;
+    this.charTypeSelected='string';
+    this.booleanDefaultTrue=true;
     this.isOptional=false;
     this.optionalDftTrue=false;
     this.creatingChars=[];
   }
 
+  setBooleanDefaultValues(){
+    this.creatingChars=[
+      {
+        isDefault:this.booleanDefaultTrue,
+        value:true as any
+      },
+      {
+        isDefault:!this.booleanDefaultTrue,
+        value:false as any
+      }
+    ];
+  }
+
+  onBooleanDefaultChange(){
+    if(this.charTypeSelected == 'boolean'){
+      this.setBooleanDefaultValues();
+    }
+  }
+
   removeClass(elem: HTMLElement, cls:string) {
     var str = " " + elem.className + " ";
     elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
@@ -1058,10 +1074,10 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     if (index !== -1) {
       this.stepsElements.splice(index, 1);
       this.selectMenu(document.getElementById(step),'text-primary-100 dark:text-primary-50')
-      this.unselectMenu(document.getElementById(step),'text-gray-500') 
+      this.unselectMenu(document.getElementById(step),'text-gray-500')
       for(let i=0; i<this.stepsElements.length;i++){
         this.unselectMenu(document.getElementById(this.stepsElements[i]),'text-primary-100 dark:text-primary-50')
-        this.selectMenu(document.getElementById(this.stepsElements[i]),'text-gray-500') 
+        this.selectMenu(document.getElementById(this.stepsElements[i]),'text-gray-500')
       }
       this.stepsElements.push(step);
     }
@@ -1079,29 +1095,21 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
   }
 
   onTypeChange(event: any) {
-    if(event.target.value=='string'){
-      this.stringCharSelected=true;
-      this.numberCharSelected=false;
-      this.rangeCharSelected=false;
-      this.charsForm.reset();
-    }else if (event.target.value=='number'){
-      this.stringCharSelected=false;
-      this.numberCharSelected=true;
-      this.rangeCharSelected=false;
-      this.charsForm.reset();
-    }else if (event.target.value=='range'){
-      this.stringCharSelected=false;
-      this.numberCharSelected=false;
-      this.rangeCharSelected=true;
-      this.charsForm.reset();
-    }
+    this.charTypeSelected = event.target.value;
+    this.charsForm.reset();
     this.isOptional=false;
     this.optionalDftTrue=false;
-    this.creatingChars=[];
+    if(this.charTypeSelected == 'boolean'){
+      this.booleanDefaultTrue=true;
+      this.setBooleanDefaultValues();
+    } else {
+      this.booleanDefaultTrue=true;
+      this.creatingChars=[];
+    }
   }
 
   addCharValue(){
-    if(this.stringCharSelected){
+    if(this.charTypeSelected == 'string'){
       console.log('string')
       if(this.creatingChars.length==0){
         this.creatingChars.push({
@@ -1114,8 +1122,8 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
           value:this.stringValue as any
         })
       }
-      this.stringValue='';  
-    } else if (this.numberCharSelected){
+      this.stringValue='';
+    } else if (this.charTypeSelected == 'number'){
       console.log('number')
       if(this.creatingChars.length==0){
         this.creatingChars.push({
@@ -1132,7 +1140,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       }
       this.numberUnit='';
       this.numberValue='';
-    }else if(this.rangeCharSelected){
+    }else if(this.charTypeSelected == 'range'){
       console.log('range')
       // Validate that fromValue < toValue
       const fromVal = Number(this.fromValue);
@@ -1159,12 +1167,18 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
           valueTo:this.toValue as any,
           unitOfMeasure:this.rangeUnit})
       }
+    } else if (this.charTypeSelected == 'boolean'){
+      console.log('boolean values are fixed')
+      return;
     } else {
       console.log('nothing')
     }
   }
 
   removeCharValue(char:any,idx:any){
+    if(this.charTypeSelected == 'boolean'){
+      return;
+    }
     console.log(this.creatingChars)
     this.creatingChars.splice(idx, 1);
     console.log(this.creatingChars)
@@ -1184,7 +1198,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     if(this.charsForm.value.name!=null){
 
       // In showFinish() only takes the first ocurrence in name for sending to proxy
-      // I validate the duplication here to prevent confusion in client when suddenly a characteristic with the same name dissapeared 
+      // I validate the duplication here to prevent confusion in client when suddenly a characteristic with the same name dissapeared
       if (this.prodChars.find((char)=> char.name === this.charsForm.value.name)){
         console.log('name duplicated error')
         this.errorMessage = 'Cannot save duplicated name in characteristics';
@@ -1195,14 +1209,14 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
 
       // Create the main characteristic
       this.prodChars.push({
-        id: 'urn:ngsi-ld:characteristic:'+uuidv4(),
+        id: 'urn:ngsi-ld:characteristic:' + uuidv4(),
         name: this.charsForm.value.name,
         description: this.charsForm.value.description != null ? this.charsForm.value.description : '',
         productSpecCharacteristicValue: this.creatingChars
       })
 
       // Create the X - enabled characteristic
-      if(this.isOptional){
+      if(this.isOptional && this.charTypeSelected !== 'boolean'){
         this.prodChars.push({
           id: 'urn:ngsi-ld:characteristic:'+uuidv4(),
           name: this.charsForm.value.name + ' - enabled',
@@ -1224,9 +1238,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.charsForm.reset();
     this.creatingChars=[];
     this.showCreateChar=false;
-    this.stringCharSelected=true;
-    this.numberCharSelected=false;
-    this.rangeCharSelected=false;
+    this.charTypeSelected='string';
     this.isOptional=false;
     this.optionalDftTrue=false;
     this.refreshChars();
@@ -1268,14 +1280,14 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
         const cleanedName = this.prodChars[i]?.name
         ?.replace('Compliance:', '')
         .trim();
-  
+
         const checkIso = this.availableISOS.findIndex(
           item => item.name === cleanedName
         );
         if (checkIso == -1) {
           if (this.prodChars[i].name != 'Compliance:SelfAtt') {
             console.log('--- check if deleted additional cert')
-            console.log(this.prodChars[i].name)    
+            console.log(this.prodChars[i].name)
             const checkAdditional = this.additionalISOS.findIndex(
               item => item.name === cleanedName
             );
@@ -1291,7 +1303,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
         } else {
           this.finishChars.push(this.prodChars[i])
         }
-        
+
       }
     }
     // Load compliance profile
@@ -1360,7 +1372,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
           }
         ],
         resourceSpecification: this.selectedResourceSpecs,
-        serviceSpecification: this.selectedServiceSpecs  
+        serviceSpecification: this.selectedServiceSpecs
       }
     }
     console.log('PRODUCTO A CREAR:')
@@ -1423,43 +1435,43 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n- First item\n- Second item'
-    });    
+    });
   }
 
   addOrderedList(){
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n1. First item\n2. Second item'
-    });    
+    });
   }
 
   addCode(){
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n`code`'
-    });    
+    });
   }
 
   addCodeBlock(){
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n```\ncode\n```'
-    }); 
+    });
   }
 
   addBlockquote(){
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n> blockquote'
-    });    
+    });
   }
 
   addLink(){
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + ' [title](https://www.example.com) '
-    });    
-  } 
+    });
+  }
 
   addTable(){
     const currentText = this.generalForm.value.description;
@@ -1482,7 +1494,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       return str.split(/\s+/).some(word => word.length > threshold);
     } else {
       return false
-    }   
+    }
   }
 
   goToStep(index: number) {
@@ -1494,7 +1506,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
         return; // No permitir avanzar si el paso actual no es válido
       }
     }
-    
+
     this.currentStep = index;
     if(this.currentStep>this.highestStep){
       this.highestStep=this.currentStep
@@ -1510,8 +1522,8 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     }
     //Attachment
     if((this.currentStep==6 && this.BUNDLE_ENABLED) || (this.currentStep==5 && !this.BUNDLE_ENABLED)){
-      setTimeout(() => {        
-        initFlowbite();   
+      setTimeout(() => {
+        initFlowbite();
       }, 100);
     }
     //rels
@@ -1556,7 +1568,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
 
   canNavigate(index: number) {
       return (this.generalForm?.valid &&  (index <= this.currentStep)) || (this.generalForm?.valid &&  (index <= this.highestStep));
-  }  
+  }
 
   handleStepClick(index: number): void {
     if (this.canNavigate(index)) {
@@ -1566,6 +1578,6 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
 
   normalizeName(name?: string): string {
     return name?.replace(/compliance:/i, '').trim() ?? '';
-  }  
+  }
 
-}
\ No newline at end of file
+}
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.html
index 32f1bddd..f8d15426 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.html
@@ -668,11 +668,12 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                             </div>
                             <div>
                                 <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._type' | translate }}</label>
-                                <select data-cy="charType" id="type" (change)="onTypeChange($event)"
+                                <select data-cy="charType" id="type" [(ngModel)]="charTypeSelected" [ngModelOptions]="{standalone: true}" (change)="onTypeChange($event)"
                                 class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                    <option selected value="string">String</option>
+                                    <option value="string">String</option>
                                     <option value="number">Number</option>
                                     <option value="range">Number range</option>
+                                    <option value="boolean">Boolean</option>
                                 </select>
                             </div>
                             <div class="col-span-2">
@@ -680,29 +681,31 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                 <textarea id="description" formControlName="description" rows="4" maxLength="500"
                                 class="mb-2 min-h-fit bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"></textarea>
                             </div>
-                            <div class="col-span-2 flex align-items-middle h-fit">
-                                <label for="is-optional" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._make_optional' | translate }}</label>
-                                <label class="inline-flex items-center me-5 cursor-pointer ml-4">
-                                    <input type="checkbox" id="is-optional" [(ngModel)]="isOptional" [ngModelOptions]="{standalone: true}" class="sr-only peer">
-                                    <div class="relative w-11 h-6 bg-gray-400 dark:bg-gray-700 rounded-full peer peer-focus:ring-4 peer-focus:ring-primary-100 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-100"></div>
-                                </label>
-                            </div>
-                            @if(isOptional){
-                                <div>
-                                    <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._default_value' | translate }}</label>
-                                    <select [(ngModel)]="optionalDftTrue" [ngModelOptions]="{standalone: true}"
-                                    class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                        <option [value]="false">{{ 'UPDATE_PROD_SPEC._default_false' | translate }}</option>
-                                        <option [value]="true">{{ 'UPDATE_PROD_SPEC._default_true' | translate }}</option>
-                                    </select>
+                            @if(charTypeSelected !== 'boolean'){
+                                <div class="col-span-2 flex align-items-middle h-fit">
+                                    <label for="is-optional" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._make_optional' | translate }}</label>
+                                    <label class="inline-flex items-center me-5 cursor-pointer ml-4">
+                                        <input type="checkbox" id="is-optional" [(ngModel)]="isOptional" [ngModelOptions]="{standalone: true}" class="sr-only peer">
+                                        <div class="relative w-11 h-6 bg-gray-400 dark:bg-gray-700 rounded-full peer peer-focus:ring-4 peer-focus:ring-primary-100 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-100"></div>
+                                    </label>
                                 </div>
+                                @if(isOptional){
+                                    <div>
+                                        <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._default_value' | translate }}</label>
+                                        <select [(ngModel)]="optionalDftTrue" [ngModelOptions]="{standalone: true}"
+                                        class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                            <option [value]="false">{{ 'UPDATE_PROD_SPEC._default_false' | translate }}</option>
+                                            <option [value]="true">{{ 'UPDATE_PROD_SPEC._default_true' | translate }}</option>
+                                        </select>
+                                    </div>
+                                }
                             }
                         </form>
                         <div class="m-4">
-                            @if(creatingChars.length>0){
+                            @if(creatingChars.length > 0 && charTypeSelected !== 'boolean'){
                                 <label for="values" class="font-bold text-lg dark:text-white">Values</label>
                                 <div class="flex flex-col items-start pl-4  shadow-md sm:rounded-lg w-full bg-white dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border border-gray-300 mb-2">
-                                    @if(rangeCharSelected){
+                                    @if(charTypeSelected === 'range'){
                                         @for (char of creatingChars; track char; let idx = $index) {
                                             <div class="flex w-full justify-between">
                                                 <div class="align-items-middle align-middle">
@@ -723,7 +726,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                                 <div class="align-items-middle align-middle">
                                                     <input [checked]="char?.isDefault" (click)="selectDefaultChar(char,idx)" id="disabled-checked-checkbox" type="checkbox" value=""
                                                     class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-full focus:ring-blue-500 focus:ring-2">
-                                                    @if(numberCharSelected){
+                                                    @if(charTypeSelected === 'number'){
                                                         <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-white text-wrap break-all">{{char.value}} (<i>{{char?.unitOfMeasure}}</i>)</label>
                                                     } @else {
                                                         <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-white text-wrap break-all">{{char.value}}</label>
@@ -739,8 +742,8 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                     }
                                 </div>
                             }
-                            <label for="values" [ngClass]="rangeCharSelected && creatingChars.length==1 ? 'hidden' : ''" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._add_values' | translate }}</label>
-                            @if(stringCharSelected){
+                            <label for="values" [ngClass]="((charTypeSelected === 'range' && creatingChars.length==1) || charTypeSelected === 'boolean') ? 'hidden' : ''" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._add_values' | translate }}</label>
+                            @if(charTypeSelected === 'string'){
                                 <div class="flex flex-row items-center align-items-middle">
                                     <input type="text" id="value" [(ngModel)]="stringValue"
                                     class="mr-4 bg-gray-50 border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"/>
@@ -750,7 +753,7 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                         </svg>                                                                              
                                     </button> 
                                 </div>
-                            } @else if (numberCharSelected){
+                            } @else if (charTypeSelected === 'number'){
                                 <div class="flex flex-col md:flex-row items-center align-items-middle">
                                     <div class="flex w-full mb-2 md:mb-0">
                                         <span class="inline-flex items-center px-3 text-sm text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md">
@@ -773,7 +776,15 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                                         </svg>                                                                              
                                     </button> 
                                 </div>
-                            } @else if (rangeCharSelected && creatingChars.length==0){
+                            } @else if (charTypeSelected === 'boolean'){
+                                <div class="col-span-2 flex align-items-middle h-fit">
+                                    <label for="boolean-default" class="font-bold text-lg dark:text-white">Default value is true</label>
+                                    <label class="inline-flex items-center me-5 cursor-pointer ml-4">
+                                        <input data-cy="charBooleanDefault" id="boolean-default" type="checkbox" [(ngModel)]="booleanDefaultTrue" [ngModelOptions]="{standalone: true}" (change)="onBooleanDefaultChange()" class="sr-only peer">
+                                        <div class="relative w-11 h-6 bg-gray-400 dark:bg-gray-700 rounded-full peer peer-focus:ring-4 peer-focus:ring-primary-100 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-100"></div>
+                                    </label>
+                                </div>
+                            } @else if (charTypeSelected === 'range' && creatingChars.length==0){
                                 <div class="flex flex-col md:flex-row items-center align-items-middle">
                                     <div class="flex w-full mb-2 md:mb-0">
                                         <span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border rounded-e-0 border-gray-300 border-e-0 rounded-s-md">
@@ -1797,4 +1808,4 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._add_att
 }
 @if(showError){
     <error-message class="flex justify-center items-center fixed w-fit top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50" [message]="errorMessage"></error-message>
-}
\ No newline at end of file
+}
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.spec.ts b/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.spec.ts
index 2b555315..c501fea0 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.spec.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.spec.ts
@@ -1,86 +1,1130 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { EventMessageService } from 'src/app/services/event-message.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { of, Subject, throwError } from 'rxjs';
 
 import { UpdateProductSpecComponent } from './update-product-spec.component';
+import { ApiServiceService } from 'src/app/services/product-service.service';
+import { ProductSpecServiceService } from 'src/app/services/product-spec-service.service';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+import { EventMessageService } from 'src/app/services/event-message.service';
+import { AttachmentServiceService } from 'src/app/services/attachment-service.service';
+import { ServiceSpecServiceService } from 'src/app/services/service-spec-service.service';
+import { ResourceSpecServiceService } from 'src/app/services/resource-spec-service.service';
+import { PaginationService } from 'src/app/services/pagination.service';
+import { QrVerifierService } from 'src/app/services/qr-verifier.service';
+
+class SyncFileReaderMock {
+  onload: ((event: any) => void) | null = null;
+
+  readAsDataURL(_file: File): void {
+    if (this.onload) {
+      this.onload({ target: { result: 'data:text/plain;base64,Zm9v' } });
+    }
+  }
+}
 
 describe('UpdateProductSpecComponent', () => {
   let component: UpdateProductSpecComponent;
   let fixture: ComponentFixture<UpdateProductSpecComponent>;
-  let eventMessage: EventMessageService;
+
+  let messagesSubject: Subject<any>;
+  let apiSpy: jasmine.SpyObj<ApiServiceService>;
+  let prodSpecServiceSpy: jasmine.SpyObj<ProductSpecServiceService>;
+  let localStorageSpy: jasmine.SpyObj<LocalStorageService>;
+  let eventMessageSpy: jasmine.SpyObj<EventMessageService>;
+  let attachmentServiceSpy: jasmine.SpyObj<AttachmentServiceService>;
+  let servSpecServiceSpy: jasmine.SpyObj<ServiceSpecServiceService>;
+  let resSpecServiceSpy: jasmine.SpyObj<ResourceSpecServiceService>;
+  let qrVerifierSpy: jasmine.SpyObj<QrVerifierService>;
+  let paginationServiceSpy: jasmine.SpyObj<PaginationService>;
+  let originalFileReader: any;
+
+  const defaultPaginationData = {
+    page_check: true,
+    items: [{ id: 'item-1' }],
+    nextItems: [{ id: 'item-2' }],
+    page: 10
+  };
+
+  const mockDroppedFile = (file: any): any => {
+    return {
+      relativePath: file.name,
+      fileEntry: {
+        isFile: true,
+        file: (cb: (f: any) => void) => cb(file)
+      }
+    };
+  };
 
   beforeEach(async () => {
+    messagesSubject = new Subject<any>();
+    apiSpy = jasmine.createSpyObj<ApiServiceService>('ApiServiceService', ['getProducts']);
+    prodSpecServiceSpy = jasmine.createSpyObj<ProductSpecServiceService>('ProductSpecServiceService', ['getProdSpecByUser', 'getResSpecById', 'updateProdSpec']);
+    localStorageSpy = jasmine.createSpyObj<LocalStorageService>('LocalStorageService', ['getObject']);
+    eventMessageSpy = jasmine.createSpyObj<EventMessageService>('EventMessageService', ['emitSellerProductSpec'], { messages$: messagesSubject.asObservable() });
+    attachmentServiceSpy = jasmine.createSpyObj<AttachmentServiceService>('AttachmentServiceService', ['uploadFile']);
+    servSpecServiceSpy = jasmine.createSpyObj<ServiceSpecServiceService>('ServiceSpecServiceService', ['getServiceSpecByUser']);
+    resSpecServiceSpy = jasmine.createSpyObj<ResourceSpecServiceService>('ResourceSpecServiceService', ['getResourceSpecByUser']);
+    qrVerifierSpy = jasmine.createSpyObj<QrVerifierService>('QrVerifierService', ['launchPopup', 'pollCertCredential']);
+    paginationServiceSpy = jasmine.createSpyObj<PaginationService>('PaginationService', ['getItemsPaginated']);
+
+    localStorageSpy.getObject.and.returnValue({});
+    attachmentServiceSpy.uploadFile.and.returnValue(of({ content: 'https://uploaded.file' }));
+    prodSpecServiceSpy.getResSpecById.and.resolveTo({ id: 'rel-prod', name: 'Rel Prod' } as any);
+    prodSpecServiceSpy.updateProdSpec.and.returnValue(of({ id: 'created' }));
+    qrVerifierSpy.launchPopup.and.returnValue({} as Window);
+    qrVerifierSpy.pollCertCredential.and.resolveTo({ subject: { compliance: [] }, vc: 'vc-token' });
+    paginationServiceSpy.getItemsPaginated.and.resolveTo(defaultPaginationData);
+
     await TestBed.configureTestingModule({
+      declarations: [UpdateProductSpecComponent],
+      imports: [RouterTestingModule, TranslateModule.forRoot()],
       schemas: [NO_ERRORS_SCHEMA],
-      imports: [HttpClientTestingModule, RouterTestingModule, TranslateModule.forRoot()],
-      declarations: [UpdateProductSpecComponent]
-    })
-    .compileComponents();
-    
+      providers: [
+        { provide: ApiServiceService, useValue: apiSpy },
+        { provide: ProductSpecServiceService, useValue: prodSpecServiceSpy },
+        { provide: LocalStorageService, useValue: localStorageSpy },
+        { provide: EventMessageService, useValue: eventMessageSpy },
+        { provide: AttachmentServiceService, useValue: attachmentServiceSpy },
+        { provide: ServiceSpecServiceService, useValue: servSpecServiceSpy },
+        { provide: ResourceSpecServiceService, useValue: resSpecServiceSpy },
+        { provide: QrVerifierService, useValue: qrVerifierSpy },
+        { provide: PaginationService, useValue: paginationServiceSpy }
+      ]
+    }).compileComponents();
+
     fixture = TestBed.createComponent(UpdateProductSpecComponent);
     component = fixture.componentInstance;
-    eventMessage = TestBed.inject(EventMessageService);
+    component.attachName = { nativeElement: { value: '' } } as any;
+    component.imgURL = { nativeElement: { value: '' } } as any;
+    component.certificationName = { nativeElement: { value: '' } } as any;
     component.prod = {
       id: 'prod-1',
       name: 'Product',
       description: 'Description',
       lifecycleStatus: 'Active',
+      isBundle: false,
+      brand: 'Brand',
+      version: '1.0',
+      productNumber: 'PN-1',
       productSpecCharacteristic: [],
       resourceSpecification: [],
       serviceSpecification: [],
       attachment: [],
-      productSpecificationRelationship: [],
-    };
+      bundledProductSpecification: [],
+      productSpecificationRelationship: []
+    } as any;
+  });
+
+  beforeEach(() => {
+    originalFileReader = (window as any).FileReader;
+    (window as any).FileReader = SyncFileReaderMock as any;
+  });
+
+  afterEach(() => {
+    (window as any).FileReader = originalFileReader;
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  it('onClick should hide emoji and upload panel when open', () => {
+  it('should load available ISOs in constructor and react to ChangedSession event', () => {
+    expect(component.availableISOS.length).toBeGreaterThan(0);
+    const initSpy = spyOn(component, 'initPartyInfo');
+    messagesSubject.next({ type: 'ChangedSession' });
+    expect(initSpy).toHaveBeenCalled();
+  });
+
+  it('should stop event subscription on destroy', () => {
+    const initSpy = spyOn(component, 'initPartyInfo');
+    messagesSubject.next({ type: 'ChangedSession' });
+    expect(initSpy).toHaveBeenCalledTimes(1);
+    component.ngOnDestroy();
+    messagesSubject.next({ type: 'ChangedSession' });
+    expect(initSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('onClick should hide emoji/upload panels and trigger detectChanges', () => {
     component.showEmoji = true;
     component.showUploadFile = true;
     const detectSpy = spyOn((component as any).cdr, 'detectChanges');
-
     component.onClick();
-
     expect(component.showEmoji).toBeFalse();
     expect(component.showUploadFile).toBeFalse();
-    expect(detectSpy).toHaveBeenCalled();
+    expect(detectSpy).toHaveBeenCalledTimes(2);
   });
 
-  it('onTypeChange should switch characteristic input type flags', () => {
-    component.onTypeChange({ target: { value: 'number' } });
-    expect(component.stringCharSelected).toBeFalse();
-    expect(component.numberCharSelected).toBeTrue();
-    expect(component.rangeCharSelected).toBeFalse();
+  it('ngOnInit should configure steps with bundle enabled', () => {
+    component.BUNDLE_ENABLED = true;
+    const initSpy = spyOn(component, 'initPartyInfo');
+    component.ngOnInit();
+    expect(component.steps.length).toBe(9);
+    expect(component.steps).toContain('Bundle');
+    expect(initSpy).toHaveBeenCalled();
+  });
 
-    component.onTypeChange({ target: { value: 'range' } });
-    expect(component.stringCharSelected).toBeFalse();
-    expect(component.numberCharSelected).toBeFalse();
-    expect(component.rangeCharSelected).toBeTrue();
+  it('ngOnInit should configure steps without bundle', () => {
+    component.BUNDLE_ENABLED = false;
+    component.ngOnInit();
+    expect(component.steps.length).toBe(8);
+    expect(component.steps).not.toContain('Bundle');
   });
 
-  it('goBack should emit seller product spec event', () => {
-    spyOn(eventMessage, 'emitSellerProductSpec');
+  it('initPartyInfo should set partyId when logged directly', () => {
+    localStorageSpy.getObject.and.returnValue({
+      expire: Math.floor(Date.now() / 1000) + 500,
+      logged_as: 'user-1',
+      id: 'user-1',
+      partyId: 'party-direct',
+      organizations: []
+    });
+    component.initPartyInfo();
+    expect(component.partyId).toBe('party-direct');
+  });
+
+  it('initPartyInfo should set org partyId when logged as organization', () => {
+    localStorageSpy.getObject.and.returnValue({
+      expire: Math.floor(Date.now() / 1000) + 500,
+      logged_as: 'org-1',
+      id: 'user-1',
+      partyId: 'party-direct',
+      organizations: [{ id: 'org-1', partyId: 'party-org' }]
+    });
+    component.initPartyInfo();
+    expect(component.partyId).toBe('party-org');
+  });
+
+  it('initPartyInfo should ignore expired/empty sessions', () => {
+    component.partyId = 'kept-party';
+    localStorageSpy.getObject.and.returnValue({});
+    component.initPartyInfo();
+    expect(component.partyId).toBe('kept-party');
+  });
 
+  it('goBack should emit seller product spec event', () => {
     component.goBack();
+    expect(eventMessageSpy.emitSellerProductSpec).toHaveBeenCalledWith(false);
+  });
 
-    expect(eventMessage.emitSellerProductSpec).toHaveBeenCalledWith(false);
+  it('togglePreview should copy description or clear it', () => {
+    component.generalForm.patchValue({ description: 'Some markdown' });
+    component.togglePreview();
+    expect(component.description).toBe('Some markdown');
+    component.generalForm.patchValue({ description: '' });
+    component.togglePreview();
+    expect(component.description).toBe('');
   });
 
-  it('canNavigate should depend on general form validity', () => {
-    expect(component.canNavigate(0)).toBeFalse();
+  it('toggleGeneral should activate only general section', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    const refreshSpy = spyOn(component, 'refreshChars');
+    component.toggleGeneral();
+    expect(selectSpy).toHaveBeenCalledWith('general-info', 'general-circle');
+    expect(component.showGeneral).toBeTrue();
+    expect(component.showBundle).toBeFalse();
+    expect(component.showSummary).toBeFalse();
+    expect(refreshSpy).toHaveBeenCalled();
+  });
+
+  it('toggleBundle should activate only bundle section', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    component.toggleBundle();
+    expect(selectSpy).toHaveBeenCalledWith('bundle', 'bundle-circle');
+    expect(component.showBundle).toBeTrue();
+    expect(component.showGeneral).toBeFalse();
+  });
+
+  it('toggleBundleCheck should load products when bundle is enabled', () => {
+    const getSpy = spyOn(component, 'getProdSpecs');
+    component.bundleChecked = false;
+    component.toggleBundleCheck();
+    expect(component.bundleChecked).toBeTrue();
+    expect(component.loadingBundle).toBeTrue();
+    expect(getSpy).toHaveBeenCalledWith(false);
+  });
+
+  it('toggleBundleCheck should clear selected bundled products when disabled', () => {
+    component.bundleChecked = true;
+    component.prodSpecsBundle = [{ id: '1' } as any];
+    component.toggleBundleCheck();
+    expect(component.bundleChecked).toBeFalse();
+    expect(component.prodSpecsBundle).toEqual([]);
+  });
+
+  it('getProdSpecs should update bundle pagination state', async () => {
+    await component.getProdSpecs(false);
+    expect(paginationServiceSpy.getItemsPaginated).toHaveBeenCalled();
+    expect(component.bundlePageCheck).toBeTrue();
+    expect(component.prodSpecs.length).toBe(1);
+    expect(component.nextProdSpecs.length).toBe(1);
+    expect(component.bundlePage).toBe(10);
+    expect(component.loadingBundle).toBeFalse();
+  });
+
+  it('nextBundle should request next products page', async () => {
+    const spy = spyOn(component, 'getProdSpecs').and.resolveTo();
+    await component.nextBundle();
+    expect(spy).toHaveBeenCalledWith(true);
+  });
+
+  it('addProdToBundle and isProdInBundle should toggle bundle products', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    const prod = { id: 'p1', href: 'h', lifecycleStatus: 'Active', name: 'Prod' };
+    component.addProdToBundle(prod);
+    expect(component.isProdInBundle(prod)).toBeTrue();
+    component.addProdToBundle(prod);
+    expect(component.isProdInBundle(prod)).toBeFalse();
+    expect(detectSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('toggleCompliance should activate only compliance section', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    component.toggleCompliance();
+    expect(selectSpy).toHaveBeenCalledWith('compliance', 'compliance-circle');
+    expect(component.showCompliance).toBeTrue();
+    expect(component.showGeneral).toBeFalse();
+  });
+
+  it('addISO should move item from available to selected and close dropdown', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.buttonISOClicked = false;
+    component.availableISOS = [{ name: 'ISO123', mandatory: true, domesupported: false }];
+    component.selectedISOS = [];
+    component.addISO({ name: 'ISO123', mandatory: true, domesupported: false });
+    expect(component.availableISOS.length).toBe(0);
+    expect(component.selectedISOS[0].name).toBe('Compliance:ISO123');
+    expect(component.buttonISOClicked).toBeTrue();
+    expect(detectSpy).toHaveBeenCalled();
+  });
 
+  it('removeISO should move item back to available list', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.selectedISOS = [{ name: 'Compliance:ISO123', mandatory: false, domesupported: true }];
+    component.availableISOS = [];
+    component.removeISO(component.selectedISOS[0]);
+    expect(component.selectedISOS.length).toBe(0);
+    expect(component.availableISOS[0].name).toBe('ISO123');
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('removeCert should delete additional certification', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.additionalISOS = [{ name: 'Compliance:extra', url: 'u' }];
+    component.removeCert({ name: 'Compliance:extra' });
+    expect(component.additionalISOS.length).toBe(0);
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('removeSelfAtt should remove self attestation from finishChars', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.selfAtt = { name: 'Compliance:SelfAtt' };
+    component.finishChars = [{ name: 'Compliance:SelfAtt' } as any, { name: 'Other' } as any];
+    component.removeSelfAtt();
+    expect(component.selfAtt).toBe('');
+    expect(component.finishChars.length).toBe(1);
+    expect(component.finishChars[0].name).toBe('Other');
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('checkValidISOS should detect missing URLs', () => {
+    component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
+    expect(component.checkValidISOS()).toBeTrue();
+    component.selectedISOS = [{ name: 'Compliance:ISO-A', url: 'https://doc' }];
+    expect(component.checkValidISOS()).toBeFalse();
+  });
+
+  it('dropped should reject invalid filename', () => {
+    const badFile = { name: 'bad name.txt', type: 'text/plain', size: 1000 };
+    component.currentStep = 1;
+    component.BUNDLE_ENABLED = false;
+    component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
+    component.dropped([mockDroppedFile(badFile)], component.selectedISOS[0]);
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toContain('File names can only include alphabetical characters');
+    expect(attachmentServiceSpy.uploadFile).not.toHaveBeenCalled();
+  });
+
+  it('dropped should reject files that exceed max size', () => {
+    const bigFile = { name: 'big.txt', type: 'text/plain', size: component.MAX_FILE_SIZE + 1 };
+    component.currentStep = 1;
+    component.BUNDLE_ENABLED = false;
+    component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
+    component.dropped([mockDroppedFile(bigFile)], component.selectedISOS[0]);
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toBe('File size must be under 3MB.');
+    expect(attachmentServiceSpy.uploadFile).not.toHaveBeenCalled();
+  });
+
+  it('dropped should upload compliance ISO file and set URL', () => {
+    component.currentStep = 1;
+    component.BUNDLE_ENABLED = false;
+    component.showUploadAtt = false;
+    component.showUploadFile = true;
+    component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
+    const file = { name: 'iso.pdf', type: 'application/pdf', size: 200 };
+    component.dropped([mockDroppedFile(file)], component.selectedISOS[0]);
+    expect(attachmentServiceSpy.uploadFile).toHaveBeenCalled();
+    expect(component.selectedISOS[0].url).toBe('https://uploaded.file');
+    expect(component.showUploadFile).toBeFalse();
+  });
+
+  it('dropped should upload self-attestation when uploadAtt is enabled', () => {
+    component.currentStep = 1;
+    component.BUNDLE_ENABLED = false;
+    component.showUploadAtt = true;
+    component.selfAtt = { name: 'Compliance:SelfAtt' };
+    component.finishChars = [];
+    const file = { name: 'selfatt.pdf', type: 'application/pdf', size: 200 };
+    component.dropped([mockDroppedFile(file)], 'ignored');
+    expect(component.selfAtt.name).toBe('Compliance:SelfAtt');
+    expect(component.finishChars.length).toBe(1);
+    expect(component.showUploadAtt).toBeFalse();
+    expect(component.showUploadFile).toBeFalse();
+  });
+
+  it('dropped should upload image attachment and set preview', () => {
+    component.currentStep = 5;
+    component.BUNDLE_ENABLED = false;
+    const file = { name: 'picture.png', type: 'image/png', size: 200 };
+    component.dropped([mockDroppedFile(file)], 'img');
+    expect(component.showImgPreview).toBeTrue();
+    expect(component.imgPreview).toBe('https://uploaded.file');
+    expect(component.prodAttachments.length).toBe(1);
+  });
+
+  it('dropped should reject non-image file when img selector is used', () => {
+    component.currentStep = 5;
+    component.BUNDLE_ENABLED = false;
+    const file = { name: 'doc.pdf', type: 'application/pdf', size: 200 };
+    component.dropped([mockDroppedFile(file)], 'img');
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toBe('File must have a valid image format!');
+  });
+
+  it('dropped should set attachment draft for generic files', () => {
+    component.currentStep = 5;
+    component.BUNDLE_ENABLED = false;
+    const file = { name: 'manual.pdf', type: 'application/pdf', size: 200 };
+    component.dropped([mockDroppedFile(file)], 'attachment');
+    expect(component.attachToCreate.url).toBe('https://uploaded.file');
+    expect(component.attachToCreate.attachmentType).toBe('application/pdf');
+  });
+
+  it('dropped should handle upload errors and show 413-specific message', () => {
+    attachmentServiceSpy.uploadFile.and.returnValue(throwError(() => ({ status: 413, error: { error: 'too large' } })));
+    component.currentStep = 1;
+    component.BUNDLE_ENABLED = false;
+    component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
+    const file = { name: 'iso.pdf', type: 'application/pdf', size: 200 };
+    component.dropped([mockDroppedFile(file)], component.selectedISOS[0]);
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toBe('File size too large! Must be under 3MB.');
+  });
+
+  it('dropped should ignore directory entries', () => {
+    const directoryEntry = {
+      relativePath: 'folder',
+      fileEntry: { isFile: false }
+    };
+    component.dropped([directoryEntry as any], 'ignored');
+    expect(component.files.length).toBe(1);
+  });
+
+  it('isValidFilename should validate filename with configured regex', () => {
+    expect(component.isValidFilename('valid-file_1.0.txt')).toBeTrue();
+    expect(component.isValidFilename('invalid name.txt')).toBeFalse();
+  });
+
+  it('fileOver, fileLeave and uploadFile should execute without side effects', () => {
+    spyOn(console, 'log');
+    component.fileOver({ type: 'over' });
+    component.fileLeave({ type: 'leave' });
+    component.uploadFile();
+    expect(console.log).toHaveBeenCalled();
+  });
+
+  it('toggleUploadSelfAtt and toggleUploadFile should set flags and selectedISO', () => {
+    component.toggleUploadSelfAtt();
+    expect(component.showUploadFile).toBeTrue();
+    expect(component.showUploadAtt).toBeTrue();
+    component.toggleUploadFile({ name: 'ISO-A' });
+    expect(component.selectedISO).toEqual({ name: 'ISO-A' });
+  });
+
+  it('toggleChars should activate chars section and reset char creation state', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    const refreshSpy = spyOn(component, 'refreshChars');
+    component.showCreateChar = true;
+    component.charTypeSelected = 'number';
+    component.toggleChars();
+    expect(selectSpy).toHaveBeenCalledWith('chars', 'chars-circle');
+    expect(component.showChars).toBeTrue();
+    expect(component.showCreateChar).toBeFalse();
+    expect(component.charTypeSelected).toBe('string');
+    expect(refreshSpy).toHaveBeenCalled();
+  });
+
+  it('populateProductInfo should preserve existing characteristic ids', () => {
+    component.prod = {
+      ...component.prod,
+      productSpecCharacteristic: [
+        {
+          id: 'urn:ngsi-ld:characteristic:platinum-id',
+          name: 'platinum',
+          description: 'desc',
+          productSpecCharacteristicValue: [{ isDefault: true, value: true }]
+        }
+      ]
+    } as any;
+
+    component.populateProductInfo();
+
+    expect(component.prodChars.length).toBe(1);
+    expect(component.prodChars[0].id).toBe('urn:ngsi-ld:characteristic:platinum-id');
+  });
+
+  it('setProductData should preserve selected ISO ids', () => {
+    component.finishChars = [];
+    component.prodChars = [];
+    component.selectedISOS = [
+      { id: 'urn:ngsi-ld:characteristic:iso-id', name: 'Compliance:ISO27001', url: 'https://iso' }
+    ];
     component.generalForm.patchValue({
       name: 'My Product',
+      version: '1.0',
       brand: 'Brand',
+      description: '',
+      number: ''
+    });
+
+    component.setProductData();
+
+    const isoChar = component.productSpecToUpdate?.productSpecCharacteristic?.find(
+      (item: any) => item.name === 'Compliance:ISO27001'
+    );
+    expect(isoChar?.id).toBe('urn:ngsi-ld:characteristic:iso-id');
+  });
+
+  it('setProductData should preserve Compliance:VC id when available', () => {
+    component.finishChars = [];
+    component.prodChars = [];
+    component.complianceVCId = 'urn:ngsi-ld:characteristic:vc-id';
+    component.complianceVC = 'vc-token';
+    component.generalForm.patchValue({
+      name: 'My Product',
+      version: '1.0',
+      brand: 'Brand',
+      description: '',
+      number: ''
+    });
+
+    component.setProductData();
+
+    const vcChar = component.productSpecToUpdate?.productSpecCharacteristic?.find(
+      (item: any) => item.name === 'Compliance:VC'
+    );
+    expect(vcChar?.id).toBe('urn:ngsi-ld:characteristic:vc-id');
+  });
+
+  it('toggleResource should reset resource pagination and request first page', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    const getSpy = spyOn(component, 'getResSpecs');
+    component.resourceSpecs = [{ id: 'old' }];
+    component.resourceSpecPage = 50;
+    component.toggleResource();
+    expect(getSpy).toHaveBeenCalledWith(false);
+    expect(component.resourceSpecs).toEqual([]);
+    expect(component.resourceSpecPage).toBe(0);
+    expect(component.showResource).toBeTrue();
+    expect(selectSpy).toHaveBeenCalledWith('resource', 'resource-circle');
+  });
+
+  it('getResSpecs and nextRes should update resource pagination state', async () => {
+    await component.getResSpecs(false);
+    expect(component.resourceSpecs.length).toBe(1);
+    const spy = spyOn(component, 'getResSpecs').and.resolveTo();
+    await component.nextRes();
+    expect(spy).toHaveBeenCalledWith(true);
+  });
+
+  it('addResToSelected and isResSelected should toggle resource selection', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    const res = { id: 'res-1', href: 'href', name: 'Resource' };
+    component.addResToSelected(res);
+    expect(component.isResSelected(res)).toBeTrue();
+    component.addResToSelected(res);
+    expect(component.isResSelected(res)).toBeFalse();
+    expect(detectSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('toggleService should reset service pagination and request first page', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    const getSpy = spyOn(component, 'getServSpecs');
+    component.serviceSpecs = [{ id: 'old' }];
+    component.serviceSpecPage = 50;
+    component.toggleService();
+    expect(getSpy).toHaveBeenCalledWith(false);
+    expect(component.serviceSpecs).toEqual([]);
+    expect(component.serviceSpecPage).toBe(0);
+    expect(component.showService).toBeTrue();
+    expect(selectSpy).toHaveBeenCalledWith('service', 'service-circle');
+  });
+
+  it('getServSpecs and nextServ should update service pagination state', async () => {
+    await component.getServSpecs(false);
+    expect(component.serviceSpecs.length).toBe(1);
+    const spy = spyOn(component, 'getServSpecs').and.resolveTo();
+    await component.nextServ();
+    expect(spy).toHaveBeenCalledWith(true);
+  });
+
+  it('addServToSelected and isServSelected should toggle service selection', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    const serv = { id: 'serv-1', href: 'href', name: 'Service' };
+    component.addServToSelected(serv);
+    expect(component.isServSelected(serv)).toBeTrue();
+    component.addServToSelected(serv);
+    expect(component.isServSelected(serv)).toBeFalse();
+    expect(detectSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('toggleAttach should activate attachment section', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    const refreshSpy = spyOn(component, 'refreshChars');
+    const timeoutSpy = spyOn(window, 'setTimeout');
+    component.toggleAttach();
+    expect(component.showAttach).toBeTrue();
+    expect(component.showGeneral).toBeFalse();
+    expect(selectSpy).toHaveBeenCalledWith('attach', 'attach-circle');
+    expect(refreshSpy).toHaveBeenCalled();
+    expect(timeoutSpy).toHaveBeenCalled();
+  });
+
+  it('removeImg should remove profile image attachment and clear preview', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.showImgPreview = true;
+    component.imgPreview = 'https://img';
+    component.prodAttachments = [{ name: 'Profile Picture', url: 'https://img', attachmentType: 'Picture' } as any];
+    component.removeImg();
+    expect(component.showImgPreview).toBeFalse();
+    expect(component.imgPreview).toBe('');
+    expect(component.prodAttachments.length).toBe(0);
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('saveImgFromURL should create profile image attachment from URL field', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.imgURL = { nativeElement: { value: 'https://site/image.png' } } as any;
+    component.saveImgFromURL();
+    expect(component.showImgPreview).toBeTrue();
+    expect(component.imgPreview).toBe('https://site/image.png');
+    expect(component.prodAttachments[0].name).toBe('Profile Picture');
+    expect(component.attImageName.value).toBeNull();
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('removeAtt should remove attachments and clear image preview when needed', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.showImgPreview = true;
+    component.imgPreview = 'https://img';
+    component.prodAttachments = [
+      { name: 'Profile Picture', url: 'https://img', attachmentType: 'Picture' } as any,
+      { name: 'Manual', url: 'https://manual', attachmentType: 'application/pdf' } as any
+    ];
+    component.removeAtt({ url: 'https://img' });
+    expect(component.showImgPreview).toBeFalse();
+    expect(component.imgPreview).toBe('');
+    expect(component.prodAttachments.length).toBe(1);
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('saveAtt and clearAtt should manage attachment draft lifecycle', () => {
+    component.attachName = { nativeElement: { value: 'Manual' } } as any;
+    component.attachToCreate = { url: 'https://manual.pdf', attachmentType: 'application/pdf' };
+    component.showNewAtt = true;
+    component.saveAtt();
+    expect(component.prodAttachments.length).toBe(1);
+    expect(component.prodAttachments[0].name).toBe('Manual');
+    expect(component.attachToCreate.url).toBe('');
+    expect(component.showNewAtt).toBeFalse();
+    component.attachToCreate = { url: 'x', attachmentType: 'y' };
+    component.clearAtt();
+    expect(component.attachToCreate).toEqual({ url: '', attachmentType: '' });
+  });
+
+  it('saveAdditionalCert and clearAdditionalCert should manage additional cert draft', () => {
+    component.certificationName = { nativeElement: { value: 'CustomISO' } } as any;
+    component.isoToCreate = 'https://cert.url';
+    component.showCert = true;
+    component.saveAdditionalCert();
+    expect(component.additionalISOS.length).toBe(1);
+    expect(component.additionalISOS[0].name).toBe('Compliance:CustomISO');
+    expect(component.isoToCreate).toBe('');
+    expect(component.showCert).toBeFalse();
+    component.certificationName = { nativeElement: { value: 'keep' } } as any;
+    component.isoToCreate = 'x';
+    component.clearAdditionalCert(true);
+    expect(component.certificationName.nativeElement.value).toBe('keep');
+    expect(component.isoToCreate).toBe('');
+    component.certificationName = { nativeElement: { value: 'reset' } } as any;
+    component.isoToCreate = 'y';
+    component.clearAdditionalCert(false);
+    expect(component.certificationName.nativeElement.value).toBe('');
+  });
+
+  it('toggleRelationship should reset state and request related product specs', () => {
+    const getSpy = spyOn(component, 'getProdSpecsRel');
+    const selectSpy = spyOn(component, 'selectStep');
+    component.prodSpecRels = [{ id: 'old' }];
+    component.prodSpecRelPage = 50;
+    component.showCreateRel = true;
+    component.toggleRelationship();
+    expect(component.prodSpecRels).toEqual([]);
+    expect(component.prodSpecRelPage).toBe(0);
+    expect(component.showCreateRel).toBeFalse();
+    expect(component.showRelationships).toBeTrue();
+    expect(getSpy).toHaveBeenCalledWith(false);
+    expect(selectSpy).toHaveBeenCalledWith('relationships', 'relationships-circle');
+  });
+
+  it('getProdSpecsRel and nextProdSpecsRel should update relationship pagination state', async () => {
+    await component.getProdSpecsRel(false);
+    expect(component.prodSpecRels.length).toBe(1);
+    const spy = spyOn(component, 'getProdSpecsRel').and.resolveTo();
+    await component.nextProdSpecsRel();
+    expect(spy).toHaveBeenCalledWith(true);
+  });
+
+  it('selectRelationship, onRelChange, saveRel and deleteRel should manage relationships', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.selectRelationship({ id: 'r1', href: 'href', name: 'Rel1' });
+    expect(component.selectedProdSpec.id).toBe('r1');
+    component.onRelChange({ target: { value: 'dependency' } });
+    expect(component.selectedRelType).toBe('dependency');
+    component.saveRel();
+    expect(component.prodRelationships.length).toBe(1);
+    expect(component.prodRelationships[0].relationshipType).toBe('dependency');
+    expect(component.selectedRelType).toBe('migration');
+    component.deleteRel({ id: 'r1' });
+    expect(component.prodRelationships.length).toBe(0);
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('refreshChars should restore default characteristic state', () => {
+    component.stringValue = 'x';
+    component.numberValue = '2';
+    component.rangeUnit = 'ms';
+    component.charTypeSelected = 'number';
+    component.creatingChars = [{ isDefault: true } as any];
+    component.refreshChars();
+    expect(component.stringValue).toBe('');
+    expect(component.numberValue).toBe('');
+    expect(component.rangeUnit).toBe('');
+    expect(component.charTypeSelected).toBe('string');
+    expect(component.booleanDefaultTrue).toBeTrue();
+    expect(component.creatingChars).toEqual([]);
+  });
+
+  it('removeClass and addClass should update className', () => {
+    const elem = { className: 'a b c' } as HTMLElement;
+    component.removeClass(elem, 'b');
+    expect(elem.className).toBe('a c');
+    component.addClass(elem, 'new-class');
+    expect(elem.className).toContain('new-class');
+  });
+
+  it('unselectMenu and selectMenu should delegate to class helpers', () => {
+    const elem = { className: 'x active' } as HTMLElement;
+    const removeSpy = spyOn(component, 'removeClass');
+    component.unselectMenu(elem, 'active');
+    expect(removeSpy).toHaveBeenCalledWith(elem, 'active');
+    const addSpy = spyOn(component, 'addClass');
+    component.selectMenu({ className: 'x' } as HTMLElement, 'active');
+    expect(addSpy).toHaveBeenCalled();
+  });
+
+  it('selectStep should select active step and update menu classes', () => {
+    const selectSpy = spyOn(component, 'selectMenu');
+    const unselectSpy = spyOn(component, 'unselectMenu');
+    spyOn(document, 'getElementById').and.returnValue({ className: 'text-gray-500 border-gray-400' } as any);
+    component.selectStep('general-info', 'general-circle');
+    expect(selectSpy).toHaveBeenCalled();
+    expect(unselectSpy).toHaveBeenCalled();
+    expect(component.stepsElements).toContain('general-info');
+    expect(component.stepsCircles).toContain('general-circle');
+  });
+
+  it('onTypeChange should switch characteristic type and clear draft values', () => {
+    component.creatingChars = [{ isDefault: true } as any];
+    component.isOptional = true;
+    component.optionalDftTrue = true;
+    component.booleanDefaultTrue = false;
+    component.onTypeChange({ target: { value: 'number' } });
+    expect(component.charTypeSelected).toBe('number');
+    expect(component.creatingChars).toEqual([]);
+    expect(component.isOptional).toBeFalse();
+    component.onTypeChange({ target: { value: 'boolean' } });
+    expect(component.charTypeSelected).toBe('boolean');
+    expect(component.booleanDefaultTrue).toBeTrue();
+    expect(component.creatingChars.length).toBe(2);
+    expect(component.creatingChars[0].isDefault).toBeTrue();
+    expect(component.creatingChars[0].value as any).toBeTrue();
+    expect(component.creatingChars[1].isDefault).toBeFalse();
+    expect(component.creatingChars[1].value as any).toBeFalse();
+    component.onTypeChange({ target: { value: 'range' } });
+    expect(component.charTypeSelected).toBe('range');
+  });
+
+  it('onBooleanDefaultChange should switch default between true and false', () => {
+    component.charTypeSelected = 'boolean';
+    component.booleanDefaultTrue = true;
+    component.onBooleanDefaultChange();
+    expect(component.creatingChars[0].isDefault).toBeTrue();
+    expect(component.creatingChars[1].isDefault).toBeFalse();
+
+    component.booleanDefaultTrue = false;
+    component.onBooleanDefaultChange();
+    expect(component.creatingChars[0].isDefault).toBeFalse();
+    expect(component.creatingChars[1].isDefault).toBeTrue();
+  });
+
+  it('addCharValue should add string values and assign default correctly', () => {
+    component.charTypeSelected = 'string';
+    component.stringValue = 'A';
+    component.addCharValue();
+    component.stringValue = 'B';
+    component.addCharValue();
+    expect(component.creatingChars.length).toBe(2);
+    expect(component.creatingChars[0].isDefault).toBeTrue();
+    expect(component.creatingChars[1].isDefault).toBeFalse();
+  });
+
+  it('addCharValue should add number values with units', () => {
+    component.charTypeSelected = 'number';
+    component.numberValue = '100';
+    component.numberUnit = 'ms';
+    component.addCharValue();
+    expect(component.creatingChars[0].value as any).toBe('100');
+    expect(component.creatingChars[0].unitOfMeasure).toBe('ms');
+    expect(component.numberValue).toBe('');
+    expect(component.numberUnit).toBe('');
+  });
+
+  it('addCharValue should not mutate fixed boolean values', () => {
+    component.charTypeSelected = 'boolean';
+    component.creatingChars = [
+      { isDefault: true, value: true } as any,
+      { isDefault: false, value: false } as any
+    ];
+    component.addCharValue();
+    expect(component.creatingChars.length).toBe(2);
+    expect(component.creatingChars[0].value as any).toBeTrue();
+    expect(component.creatingChars[1].value as any).toBeFalse();
+  });
+
+  it('addCharValue should validate range and reject invalid intervals', () => {
+    component.charTypeSelected = 'range';
+    component.fromValue = '10';
+    component.toValue = '5';
+    component.addCharValue();
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toContain('Invalid range');
+    expect(component.creatingChars.length).toBe(0);
+  });
+
+  it('addCharValue should add valid range values', () => {
+    component.charTypeSelected = 'range';
+    component.fromValue = '5';
+    component.toValue = '10';
+    component.rangeUnit = 'GB';
+    component.addCharValue();
+    expect(component.creatingChars.length).toBe(1);
+    expect(component.creatingChars[0].valueFrom as any).toBe('5');
+    expect(component.creatingChars[0].valueTo as any).toBe('10');
+    expect(component.creatingChars[0].unitOfMeasure).toBe('GB');
+  });
+
+  it('removeCharValue and selectDefaultChar should manage created char values', () => {
+    component.creatingChars = [
+      { isDefault: true, value: 'A' } as any,
+      { isDefault: false, value: 'B' } as any
+    ];
+    component.selectDefaultChar(component.creatingChars[1], 1);
+    expect(component.creatingChars[0].isDefault).toBeFalse();
+    expect(component.creatingChars[1].isDefault).toBeTrue();
+    component.removeCharValue(component.creatingChars[0], 0);
+    expect(component.creatingChars.length).toBe(1);
+  });
+
+  it('removeCharValue should not remove values for boolean type', () => {
+    component.charTypeSelected = 'boolean';
+    component.creatingChars = [
+      { isDefault: true, value: true } as any,
+      { isDefault: false, value: false } as any
+    ];
+    component.removeCharValue(component.creatingChars[0], 0);
+    expect(component.creatingChars.length).toBe(2);
+    expect(component.creatingChars[0].value as any).toBeTrue();
+    expect(component.creatingChars[1].value as any).toBeFalse();
+  });
+
+  it('saveChar should allow duplicated names in update flow', () => {
+    component.charsForm.patchValue({ name: 'Latency', description: 'desc' });
+    component.prodChars = [{ id: '1', name: 'Latency', productSpecCharacteristicValue: [] } as any];
+    component.creatingChars = [{ isDefault: true, value: '100' } as any];
+    component.saveChar();
+    expect(component.showError).toBeFalse();
+    expect(component.prodChars.length).toBe(2);
+  });
+
+  it('saveChar should save main and optional enabled characteristic', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.charsForm.patchValue({ name: 'Bandwidth', description: 'desc' });
+    component.creatingChars = [{ isDefault: true, value: '1Gbps' } as any];
+    component.isOptional = true;
+    component.optionalDftTrue = true;
+    component.saveChar();
+    expect(component.prodChars.length).toBe(2);
+    expect(component.prodChars[0].name).toBe('Bandwidth');
+    expect(component.prodChars[1].name).toBe('Bandwidth - enabled');
+    expect(component.showCreateChar).toBeFalse();
+    expect(component.isOptional).toBeFalse();
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('saveChar should ignore optional toggle for boolean characteristics', () => {
+    component.charTypeSelected = 'boolean';
+    component.charsForm.patchValue({ name: 'Enabled', description: 'desc' });
+    component.creatingChars = [
+      { isDefault: true, value: true } as any,
+      { isDefault: false, value: false } as any
+    ];
+    component.isOptional = true;
+    component.optionalDftTrue = true;
+    component.saveChar();
+    expect(component.prodChars.length).toBe(1);
+    expect(component.prodChars[0].name).toBe('Enabled');
+  });
+
+  it('deleteChar should remove characteristic and its related enabled one', () => {
+    const detectSpy = spyOn((component as any).cdr, 'detectChanges');
+    component.prodChars = [
+      { id: 'a', name: 'Bandwidth' } as any,
+      { id: 'b', name: 'Bandwidth - enabled' } as any,
+      { id: 'c', name: 'Other' } as any
+    ];
+    component.deleteChar({ id: 'a', name: 'Bandwidth' });
+    expect(component.prodChars.length).toBe(1);
+    expect(component.prodChars[0].name).toBe('Other');
+    expect(detectSpy).toHaveBeenCalled();
+  });
+
+  it('checkInput should identify blank inputs', () => {
+    expect(component.checkInput('   ')).toBeTrue();
+    expect(component.checkInput('abc')).toBeFalse();
+  });
+
+  it('showFinish should build final product payload and activate summary step', () => {
+    const selectSpy = spyOn(component, 'selectStep');
+    const refreshSpy = spyOn(component, 'refreshChars');
+    component.partyId = 'party-1';
+    component.bundleChecked = true;
+    component.generalForm.patchValue({
+      name: 'My Product',
+      description: 'Desc',
       version: '1.0',
+      brand: 'Brand',
+      number: 'PN-1'
+    });
+    component.prodSpecsBundle = [{ id: 'bundle-1' } as any];
+    component.prodChars = [{ id: 'char-1', name: 'Feature', productSpecCharacteristicValue: [{ value: 'x' }] } as any];
+    component.selectedISOS = [{ name: 'Compliance:ISO-1', url: 'https://iso' }];
+    component.additionalISOS = [{ name: 'Compliance:Custom', url: 'https://custom' }];
+    component.prodRelationships = [{ id: 'rel-1', href: 'href-1', name: 'RelName', relationshipType: 'migration' }];
+    component.prodAttachments = [{ name: 'Manual', url: 'https://doc', attachmentType: 'application/pdf' } as any];
+    component.selectedResourceSpecs = [{ id: 'res-1' } as any];
+    component.selectedServiceSpecs = [{ id: 'srv-1' } as any];
+    component.showFinish();
+    expect(component.showSummary).toBeTrue();
+    expect(component.productSpecToUpdate).toBeDefined();
+    expect(component.productSpecToUpdate?.name).toBe('My Product');
+    expect(component.productSpecToUpdate?.productSpecCharacteristic?.length).toBeGreaterThan(0);
+    expect(component.productSpecToUpdate?.productSpecificationRelationship?.length).toBe(1);
+    expect(component.productSpecToUpdate?.resourceSpecification?.length).toBe(1);
+    expect(component.productSpecToUpdate?.serviceSpecification?.length).toBe(1);
+    expect(selectSpy).toHaveBeenCalledWith('summary', 'summary-circle');
+    expect(refreshSpy).toHaveBeenCalled();
+  });
+
+  it('updateProduct should call API and go back on success', () => {
+    const backSpy = spyOn(component, 'goBack');
+    component.prod = { id: 'prod-1' } as any;
+    spyOn(component, 'setProductData').and.callFake(() => {
+      component.productSpecToUpdate = { name: 'Prod' } as any;
     });
+    component.updateProduct();
+    expect(prodSpecServiceSpy.updateProdSpec).toHaveBeenCalledWith(component.productSpecToUpdate, 'prod-1');
+    expect(component.loading).toBeFalse();
+    expect(backSpy).toHaveBeenCalled();
+  });
+
+  it('updateProduct should handle API error and show message', () => {
+    prodSpecServiceSpy.updateProdSpec.and.returnValue(throwError(() => ({ error: { error: 'boom' } })));
+    component.prod = { id: 'prod-1' } as any;
+    spyOn(component, 'setProductData').and.callFake(() => {
+      component.productSpecToUpdate = { name: 'Prod' } as any;
+    });
+    component.updateProduct();
+    expect(component.loading).toBeFalse();
+    expect(component.showError).toBeTrue();
+    expect(component.errorMessage).toBe('Error: boom');
+  });
+
+  it('markdown helpers should append markdown snippets', () => {
+    component.generalForm.patchValue({ description: 'base' });
+    component.addBold();
+    expect(component.generalForm.value.description).toContain('**bold text**');
+    component.addItalic();
+    expect(component.generalForm.value.description).toContain('_italicized text_');
+    component.addList();
+    expect(component.generalForm.value.description).toContain('- First item');
+    component.addOrderedList();
+    expect(component.generalForm.value.description).toContain('1. First item');
+    component.addCode();
+    expect(component.generalForm.value.description).toContain('`code`');
+    component.addCodeBlock();
+    expect(component.generalForm.value.description).toContain('```');
+    component.addBlockquote();
+    expect(component.generalForm.value.description).toContain('> blockquote');
+    component.addLink();
+    expect(component.generalForm.value.description).toContain('[title](https://www.example.com)');
+    component.addTable();
+    expect(component.generalForm.value.description).toContain('| Syntax | Description |');
+  });
+
+  it('addEmoji should append selected emoji and close picker', () => {
+    component.generalForm.patchValue({ description: 'base' });
+    component.showEmoji = true;
+    component.addEmoji({ emoji: { native: '🚀' } });
+    expect(component.showEmoji).toBeFalse();
+    expect(component.generalForm.value.description).toContain('🚀');
+  });
+
+  it('hasLongWord should detect words over threshold', () => {
+    expect(component.hasLongWord('small words only', 20)).toBeFalse();
+    expect(component.hasLongWord('averyveryveryveryverylongword here', 10)).toBeTrue();
+    expect(component.hasLongWord(undefined, 10)).toBeFalse();
+  });
+
+  it('goToStep should update current step without validating current form', () => {
+    component.currentStep = 0;
+    const validateSpy = spyOn(component, 'validateCurrentStep').and.returnValue(false);
+    component.goToStep(1);
+    expect(validateSpy).not.toHaveBeenCalled();
+    expect(component.currentStep).toBe(1);
+  });
+
+  it('goToStep should call dependent loaders for non-bundle flow', () => {
+    component.BUNDLE_ENABLED = false;
+    component.currentStep = 0;
+    component.highestStep = 0;
+    spyOn(component, 'validateCurrentStep').and.returnValue(true);
+    const refreshSpy = spyOn(component, 'refreshChars');
+    const resSpy = spyOn(component, 'getResSpecs');
+    const servSpy = spyOn(component, 'getServSpecs');
+    const relSpy = spyOn(component, 'getProdSpecsRel');
+    const finishSpy = spyOn(component, 'showFinish');
+    const timeoutSpy = spyOn(window, 'setTimeout');
+
+    component.goToStep(3);
+    expect(resSpy).toHaveBeenCalledWith(false);
+    component.goToStep(4);
+    expect(servSpy).toHaveBeenCalledWith(false);
+    component.goToStep(5);
+    expect(timeoutSpy).toHaveBeenCalled();
+    component.goToStep(6);
+    expect(relSpy).toHaveBeenCalledWith(false);
+    component.goToStep(7);
+    expect(finishSpy).toHaveBeenCalled();
+    expect(component.highestStep).toBe(7);
+    expect(refreshSpy).toHaveBeenCalled();
+  });
+
+  it('goToStep should call dependent loaders for bundle flow', () => {
+    component.BUNDLE_ENABLED = true;
+    spyOn(component, 'validateCurrentStep').and.returnValue(true);
+    const resSpy = spyOn(component, 'getResSpecs');
+    const servSpy = spyOn(component, 'getServSpecs');
+    const relSpy = spyOn(component, 'getProdSpecsRel');
+    const finishSpy = spyOn(component, 'showFinish');
+    component.goToStep(4);
+    component.goToStep(5);
+    component.goToStep(7);
+    component.goToStep(8);
+    expect(resSpy).toHaveBeenCalledWith(false);
+    expect(servSpy).toHaveBeenCalledWith(false);
+    expect(relSpy).toHaveBeenCalledWith(false);
+    expect(finishSpy).toHaveBeenCalled();
+  });
+
+  it('validateCurrentStep should validate step 0 by general form validity', () => {
+    component.currentStep = 0;
+    component.generalForm.patchValue({ name: '', brand: '', version: '' });
+    expect(component.validateCurrentStep()).toBeFalse();
+    component.generalForm.patchValue({ name: 'A', brand: 'B', version: '1.0' });
+    expect(component.validateCurrentStep()).toBeTrue();
+    component.currentStep = 5;
+    expect(component.validateCurrentStep()).toBeTrue();
+  });
+
+  it('isStepDisabled should enforce step-specific guards', () => {
+    component.currentStep = 0;
+    component.generalForm.patchValue({ name: '', brand: '', version: '' });
+    expect(component.isStepDisabled()).toBeTrue();
+    component.generalForm.patchValue({ name: 'A', brand: 'B', version: '1.0' });
+    expect(component.isStepDisabled()).toBeFalse();
+
+    component.currentStep = 1;
+    component.BUNDLE_ENABLED = true;
+    component.bundleChecked = true;
+    component.prodSpecsBundle = [{ id: '1' } as any];
+    expect(component.isStepDisabled()).toBeTrue();
+    component.prodSpecsBundle.push({ id: '2' } as any);
+    expect(component.isStepDisabled()).toBeFalse();
+
+    component.BUNDLE_ENABLED = false;
+    spyOn(component, 'checkValidISOS').and.returnValue(true);
+    expect(component.isStepDisabled()).toBeTrue();
+
+    component.currentStep = 2;
+    component.BUNDLE_ENABLED = true;
+    (component.checkValidISOS as jasmine.Spy).and.returnValue(false);
+    expect(component.isStepDisabled()).toBeFalse();
+  });
+
+  it('canNavigate and handleStepClick should honor navigation constraints', () => {
+    component.currentStep = 0;
+    component.highestStep = 0;
+    component.generalForm.patchValue({ name: '', brand: '', version: '' });
+    expect(component.canNavigate(0)).toBeFalse();
+    component.generalForm.patchValue({ name: 'A', brand: 'B', version: '1.0' });
+    component.highestStep = 2;
+    expect(component.canNavigate(2)).toBeTrue();
+
+    const goSpy = spyOn(component, 'goToStep');
+    component.handleStepClick(2);
+    expect(goSpy).toHaveBeenCalledWith(2);
+    component.generalForm.patchValue({ name: '', brand: '', version: '' });
+    component.handleStepClick(1);
+    expect(goSpy).toHaveBeenCalledTimes(1);
+  });
 
-    expect(component.canNavigate(0)).toBeTrue();
+  it('normalizeName should strip compliance prefix and trim whitespace', () => {
+    expect(component.normalizeName('Compliance: ISO 27001 ')).toBe('ISO 27001');
+    expect(component.normalizeName('compliance:Custom')).toBe('Custom');
+    expect(component.normalizeName(undefined)).toBe('');
   });
 });
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.ts
index 08a0c3b8..9d59622c 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.ts
@@ -86,9 +86,8 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     name: new FormControl('', [Validators.required, Validators.maxLength(100), noWhitespaceValidator]),
     description: new FormControl('', [Validators.maxLength(500)])
   });
-  stringCharSelected:boolean=true;
-  numberCharSelected:boolean=false;
-  rangeCharSelected:boolean=false;
+  charTypeSelected:string='string';
+  booleanDefaultTrue:boolean=true;
   isOptional:boolean=false;
   optionalDftTrue:boolean=false;
   prodChars:ProductSpecificationCharacteristic[]=[];
@@ -115,6 +114,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
   verifiedISO:string[] = [];
   selectedISO:any;
   complianceVC:any = null;
+  complianceVCId:string = '';
   showUploadFile:boolean=false;
   selfAtt:any;
   checkExistingSelfAtt:boolean=false;
@@ -177,7 +177,6 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
   numberUnit: string = '';
   fromValue: string = '';
   toValue: string = '';
-  booleanValue: boolean = false;
   rangeUnit: string = '';
 
   filenameRegex = /^[A-Za-z0-9_.-]+$/;
@@ -303,6 +302,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
       for(let i = 0; i < this.prod.productSpecCharacteristic.length; i++) {
         // Check if this is a VC
         if (this.prod.productSpecCharacteristic[i].name == 'Compliance:VC') {
+          this.complianceVCId = this.prod.productSpecCharacteristic[i].id || '';
           // Decode the token
           try {
             const decoded = jwtDecode(this.prod.productSpecCharacteristic[i].productSpecCharacteristicValue[0].value)
@@ -350,6 +350,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
         if (index !== -1) {
           console.log('adding sel iso')
           this.selectedISOS.push({
+            id: this.prod.productSpecCharacteristic[i].id,
             name: this.prod.productSpecCharacteristic[i].name,
             url: this.prod.productSpecCharacteristic[i].productSpecCharacteristicValue[0].value,
             mandatory: this.availableISOS[index].mandatory,
@@ -363,6 +364,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
           console.log('--- additional isos')
           console.log(this.prod.productSpecCharacteristic[i])
           this.additionalISOS.push({
+            id: this.prod.productSpecCharacteristic[i].id,
             name: this.prod.productSpecCharacteristic[i].name,
             url: this.prod.productSpecCharacteristic[i].productSpecCharacteristicValue[0].value
           })
@@ -382,7 +384,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
         const index = this.selectedISOS.findIndex(item => item.name === this.prod.productSpecCharacteristic[i].name);
         if (index == -1) {
           this.prodChars.push({
-            id: 'urn:ngsi-ld:characteristic:'+uuidv4(),
+            id: this.prod.productSpecCharacteristic[i].id ? this.prod.productSpecCharacteristic[i].id : 'urn:ngsi-ld:characteristic:'+uuidv4(),
             name: this.prod.productSpecCharacteristic[i].name,
             description: this.prod.productSpecCharacteristic[i].description ? this.prod.productSpecCharacteristic[i].description : '',
             productSpecCharacteristicValue: this.prod.productSpecCharacteristic[i].productSpecCharacteristicValue
@@ -885,9 +887,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     this.showSummary=false;
 
     this.showCreateChar=false;
-    this.stringCharSelected=true;
-    this.numberCharSelected=false;
-    this.rangeCharSelected=false;
+    this.charTypeSelected='string';
     this.showPreview=false;
     this.refreshChars();
     initFlowbite();
@@ -1222,14 +1222,32 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     this.fromValue = '';
     this.toValue = '';
     this.rangeUnit = '';
-    this.stringCharSelected=true;
-    this.numberCharSelected=false;
-    this.rangeCharSelected=false;
+    this.charTypeSelected='string';
+    this.booleanDefaultTrue=true;
     this.isOptional=false;
     this.optionalDftTrue=false;
     this.creatingChars=[];
   }
 
+  setBooleanDefaultValues(){
+    this.creatingChars=[
+      {
+        isDefault:this.booleanDefaultTrue,
+        value:true as any
+      },
+      {
+        isDefault:!this.booleanDefaultTrue,
+        value:false as any
+      }
+    ];
+  }
+
+  onBooleanDefaultChange(){
+    if(this.charTypeSelected == 'boolean'){
+      this.setBooleanDefaultValues();
+    }
+  }
+
   removeClass(elem: HTMLElement, cls:string) {
     var str = " " + elem.className + " ";
     elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
@@ -1286,30 +1304,22 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
   }
 
   onTypeChange(event: any) {
-    if(event.target.value=='string'){
-      this.stringCharSelected=true;
-      this.numberCharSelected=false;
-      this.rangeCharSelected=false;
-      this.charsForm.reset();
-    }else if (event.target.value=='number'){
-      this.stringCharSelected=false;
-      this.numberCharSelected=true;
-      this.rangeCharSelected=false;
-      this.charsForm.reset();
-    }else if (event.target.value=='range'){
-      this.stringCharSelected=false;
-      this.numberCharSelected=false;
-      this.rangeCharSelected=true;
-      this.charsForm.reset();
-    }
+    this.charTypeSelected = event.target.value;
+    this.charsForm.reset();
     this.isOptional=false;
     this.optionalDftTrue=false;
-    this.creatingChars=[];
+    if(this.charTypeSelected == 'boolean'){
+      this.booleanDefaultTrue=true;
+      this.setBooleanDefaultValues();
+    } else {
+      this.booleanDefaultTrue=true;
+      this.creatingChars=[];
+    }
   }
 
 
   addCharValue(){
-    if(this.stringCharSelected){
+    if(this.charTypeSelected == 'string'){
       console.log('string')
       if(this.creatingChars.length==0){
         this.creatingChars.push({
@@ -1323,7 +1333,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
         })
       }
       this.stringValue='';  
-    } else if (this.numberCharSelected){
+    } else if (this.charTypeSelected == 'number'){
       console.log('number')
       if(this.creatingChars.length==0){
         this.creatingChars.push({
@@ -1340,7 +1350,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
       }
       this.numberUnit='';
       this.numberValue='';
-    }else if(this.rangeCharSelected){
+    }else if(this.charTypeSelected == 'range'){
       console.log('range')
       // Validate that fromValue < toValue
       const fromVal = Number(this.fromValue);
@@ -1367,24 +1377,18 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
           valueTo:this.toValue as any,
           unitOfMeasure:this.rangeUnit})
       } 
-    }else{
-      console.log('boolean')
-      if(this.creatingChars.length==0){
-        this.creatingChars.push({
-          isDefault:true,
-          value:this.booleanValue as any
-        })
-      } else{
-        this.creatingChars.push({
-          isDefault:false,
-          value:this.booleanValue as any
-        })
-      }
+    } else if (this.charTypeSelected == 'boolean'){
+      console.log('boolean values are fixed')
+      return;
+    } else {
+      console.log('nothing')
     }
-    this.booleanValue=false;
   }
 
   removeCharValue(char:any,idx:any){
+    if(this.charTypeSelected == 'boolean'){
+      return;
+    }
     console.log(this.creatingChars)
     this.creatingChars.splice(idx, 1);
     console.log(this.creatingChars)
@@ -1411,7 +1415,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
       })
 
       // create X - enabled characteristic
-      if(this.isOptional){
+      if(this.isOptional && this.charTypeSelected !== 'boolean'){
         this.prodChars.push({
           id: 'urn:ngsi-ld:characteristic:'+uuidv4(),
           name: this.charsForm.value.name + ' - enabled',
@@ -1433,9 +1437,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     this.charsForm.reset();
     this.creatingChars=[];
     this.showCreateChar=false;
-    this.stringCharSelected=true;
-    this.numberCharSelected=false;
-    this.rangeCharSelected=false;
+    this.charTypeSelected='string';
     this.isOptional=false;
     this.optionalDftTrue=false;
     this.refreshChars();
@@ -1523,7 +1525,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
       const index = this.finishChars.findIndex(item => item.name === this.selectedISOS[i].name);
       if (index == -1) {
         this.finishChars.push({
-          id: 'urn:ngsi-ld:characteristic:'+uuidv4(),
+          id: this.selectedISOS[i].id ? this.selectedISOS[i].id : 'urn:ngsi-ld:characteristic:'+uuidv4(),
           name: this.selectedISOS[i].name,
           productSpecCharacteristicValue: [{
             isDefault: true,
@@ -1541,7 +1543,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
       const index = this.finishChars.findIndex(item => item.name === this.additionalISOS[i].name);
       if (index == -1) {
         this.finishChars.push({
-          id: 'urn:ngsi-ld:characteristic:'+uuidv4(),
+          id: this.additionalISOS[i].id ? this.additionalISOS[i].id : 'urn:ngsi-ld:characteristic:'+uuidv4(),
           name: this.additionalISOS[i].name,
           productSpecCharacteristicValue: [{
             isDefault: true,
@@ -1555,7 +1557,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     // Load compliance VCs
     if(this.complianceVC != null) {
       this.finishChars.push({
-        id: `urn:ngsi-ld:characteristic:${uuidv4()}`,
+        id: this.complianceVCId ? this.complianceVCId : `urn:ngsi-ld:characteristic:${uuidv4()}`,
         name: `Compliance:VC`,
         productSpecCharacteristicValue: [{
           isDefault: true,
diff --git a/src/app/services/price-plan-metrics.service.spec.ts b/src/app/services/price-plan-metrics.service.spec.ts
new file mode 100644
index 00000000..1a958f03
--- /dev/null
+++ b/src/app/services/price-plan-metrics.service.spec.ts
@@ -0,0 +1,145 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PricePlanMetricsService } from './price-plan-metrics.service';
+import { ApiServiceService } from 'src/app/services/product-service.service';
+
+describe('PricePlanMetricsService', () => {
+  let service: PricePlanMetricsService;
+  let apiSpy: jasmine.SpyObj<ApiServiceService>;
+
+  beforeEach(() => {
+    apiSpy = jasmine.createSpyObj<ApiServiceService>('ApiServiceService', ['getOfferingPrice']);
+    apiSpy.getOfferingPrice.and.resolveTo(null);
+
+    TestBed.configureTestingModule({
+      providers: [
+        PricePlanMetricsService,
+        { provide: ApiServiceService, useValue: apiSpy },
+      ],
+    });
+    service = TestBed.inject(PricePlanMetricsService);
+  });
+
+  it('should return empty list when no price plan is provided', async () => {
+    const result = await service.getAppliedMetrics(undefined, []);
+    expect(result).toEqual([]);
+  });
+
+  it('should return usage metric for direct usage price plan when no characteristic filters exist', async () => {
+    const result = await service.getAppliedMetrics(
+      {
+        id: 'pp-1',
+        priceType: 'usage',
+        usageSpecId: 'usage-1',
+        unitOfMeasure: { units: 'RAM_gb_hour' },
+      },
+      []
+    );
+
+    expect(result).toEqual([
+      {
+        priceId: 'pp-1',
+        usageSpecId: 'usage-1',
+        unitOfMeasure: 'RAM_gb_hour',
+        value: 0,
+      },
+    ]);
+  });
+
+  it('should filter bundled usage metrics based on matching string/number/boolean characteristic values', async () => {
+    apiSpy.getOfferingPrice.and.callFake(async (id: string) => {
+      if (id === 'cpu') {
+        return {
+          id: 'cpu',
+          priceType: 'usage',
+          usageSpecId: 'u-cpu',
+          unitOfMeasure: { units: 'CPU_core_hour' },
+          prodSpecCharValueUse: [
+            { id: 'char-region', productSpecCharacteristicValue: [{ value: 'eu' }] },
+            { id: 'char-size', productSpecCharacteristicValue: [{ value: 4 }] },
+            { id: 'char-spot', productSpecCharacteristicValue: [{ value: true }] },
+          ],
+        };
+      }
+      return {
+        id: 'ram',
+        priceType: 'usage',
+        usageSpecId: 'u-ram',
+        unitOfMeasure: { units: 'RAM_gb_hour' },
+        prodSpecCharValueUse: [
+          { id: 'char-region', productSpecCharacteristicValue: [{ value: 'us' }] },
+        ],
+      };
+    });
+
+    const result = await service.getAppliedMetrics(
+      {
+        id: 'bundle-main',
+        bundledPopRelationship: [{ id: 'cpu' }, { id: 'ram' }],
+      },
+      [
+        { id: 'char-region', value: 'eu' },
+        { id: 'char-size', value: '4' },
+        { id: 'char-spot', value: 'true' },
+      ]
+    );
+
+    expect(result).toEqual([
+      {
+        priceId: 'cpu',
+        usageSpecId: 'u-cpu',
+        unitOfMeasure: 'CPU_core_hour',
+        value: 0,
+      },
+    ]);
+  });
+
+  it('should match range constraints using valueFrom/valueTo boundaries', async () => {
+    apiSpy.getOfferingPrice.and.resolveTo({
+      id: 'storage',
+      priceType: 'usage',
+      usageSpecId: 'u-storage',
+      unitOfMeasure: { units: 'Storage_gb_hour' },
+      prodSpecCharValueUse: [
+        {
+          id: 'char-storage',
+          productSpecCharacteristicValue: [{ valueFrom: 50, valueTo: 100 }],
+        },
+      ],
+    });
+
+    const appliedAtBoundary = await service.getAppliedMetrics(
+      { id: 'bundle-1', bundledPopRelationship: [{ id: 'storage' }] },
+      [{ id: 'char-storage', value: 100 }]
+    );
+    expect(appliedAtBoundary.length).toBe(1);
+
+    const notAppliedOutside = await service.getAppliedMetrics(
+      { id: 'bundle-2', bundledPopRelationship: [{ id: 'storage' }] },
+      [{ id: 'char-storage', value: 101 }]
+    );
+    expect(notAppliedOutside).toEqual([]);
+  });
+
+  it('should not apply usage metric when characteristic ids do not match', async () => {
+    apiSpy.getOfferingPrice.and.resolveTo({
+      id: 'usage-optional',
+      priceType: 'usage',
+      usageSpecId: 'u-optional',
+      unitOfMeasure: { units: 'RAM_gb_hour' },
+      prodSpecCharValueUse: [
+        {
+          id: 'old-platinum-id',
+          productSpecCharacteristicValue: [{ value: true }],
+        },
+      ],
+    });
+
+    const result = await service.getAppliedMetrics(
+      { id: 'bundle-3', bundledPopRelationship: [{ id: 'usage-optional' }] },
+      [{ id: 'new-platinum-id', value: true }]
+    );
+
+    expect(result).toEqual([]);
+  });
+});
diff --git a/src/app/services/price-plan-metrics.service.ts b/src/app/services/price-plan-metrics.service.ts
new file mode 100644
index 00000000..de29489a
--- /dev/null
+++ b/src/app/services/price-plan-metrics.service.ts
@@ -0,0 +1,203 @@
+import { Injectable } from '@angular/core';
+import { ApiServiceService } from 'src/app/services/product-service.service';
+
+export interface SelectedCharacteristicValue {
+  id: string;
+  value: any;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PricePlanMetricsService {
+  private usagePriceComponentsCache = new Map<string, any[]>();
+
+  constructor(private api: ApiServiceService) {}
+
+  async getAppliedMetrics(pricePlan: any, selectedCharacteristics: SelectedCharacteristicValue[]): Promise<any[]> {
+    const usageComponents = await this.getUsagePriceComponents(pricePlan);
+    if (usageComponents.length === 0) {
+      return [];
+    }
+
+    const selectedById = new Map<string, any>();
+    for (const item of selectedCharacteristics || []) {
+      if (item?.id) {
+        selectedById.set(item.id, item.value);
+      }
+    }
+
+    return usageComponents
+      .filter((priceComponent) => this.isPriceComponentApplied(priceComponent, selectedById))
+      .map((priceComponent) => ({
+        priceId: priceComponent?.id,
+        usageSpecId: priceComponent?.usageSpecId,
+        unitOfMeasure: this.getMetricName(priceComponent?.unitOfMeasure),
+        value: 0,
+      }));
+  }
+
+  clearCache(pricePlanId?: string): void {
+    if (pricePlanId) {
+      this.usagePriceComponentsCache.delete(pricePlanId);
+      return;
+    }
+    this.usagePriceComponentsCache.clear();
+  }
+
+  private async getUsagePriceComponents(pricePlan: any): Promise<any[]> {
+    if (!pricePlan) {
+      return [];
+    }
+
+    const pricePlanId = pricePlan?.id ? String(pricePlan.id) : '';
+    if (pricePlanId && this.usagePriceComponentsCache.has(pricePlanId)) {
+      return this.usagePriceComponentsCache.get(pricePlanId) || [];
+    }
+
+    const priceComponents = await this.resolvePriceComponents(pricePlan);
+    const usageComponents = priceComponents.filter((component) => this.isUsagePriceComponent(component));
+
+    if (pricePlanId) {
+      this.usagePriceComponentsCache.set(pricePlanId, usageComponents);
+    }
+
+    return usageComponents;
+  }
+
+  private async resolvePriceComponents(pricePlan: any): Promise<any[]> {
+    if (!pricePlan) {
+      return [];
+    }
+
+    const bundledRelationships = Array.isArray(pricePlan?.bundledPopRelationship)
+      ? pricePlan.bundledPopRelationship
+      : [];
+
+    if (bundledRelationships.length === 0) {
+      return [pricePlan];
+    }
+
+    const resolvedComponents: any[] = [];
+    for (const relationship of bundledRelationships) {
+      if (!relationship?.id) {
+        continue;
+      }
+      try {
+        const component = await this.api.getOfferingPrice(relationship.id);
+        if (component) {
+          resolvedComponents.push(component);
+        }
+      } catch (error) {
+        console.error('Error loading price component for applied metrics evaluation', error);
+      }
+    }
+
+    return resolvedComponents;
+  }
+
+  private isUsagePriceComponent(component: any): boolean {
+    const priceType = String(component?.priceType || '').toLowerCase();
+    return priceType === 'usage' && !!component?.usageSpecId && !!this.getMetricName(component?.unitOfMeasure);
+  }
+
+  private isPriceComponentApplied(component: any, selectedById: Map<string, any>): boolean {
+    const characteristicUses = Array.isArray(component?.prodSpecCharValueUse)
+      ? component.prodSpecCharValueUse
+      : [];
+
+    if (characteristicUses.length === 0) {
+      return true;
+    }
+
+    return characteristicUses.every((charUse: any) => this.matchesCharacteristicUse(charUse, selectedById));
+  }
+
+  private matchesCharacteristicUse(charUse: any, selectedById: Map<string, any>): boolean {
+    const characteristicId = charUse?.id;
+    if (!characteristicId) {
+      return false;
+    }
+
+    if (!selectedById.has(characteristicId)) {
+      return false;
+    }
+
+    const selectedValue = selectedById.get(characteristicId);
+    const requiredValues = Array.isArray(charUse?.productSpecCharacteristicValue)
+      ? charUse.productSpecCharacteristicValue
+      : [];
+
+    if (requiredValues.length === 0) {
+      return true;
+    }
+
+    return requiredValues.some((requiredValue: any) => this.matchesRequiredValue(selectedValue, requiredValue));
+  }
+
+  private matchesRequiredValue(selectedValue: any, requiredValue: any): boolean {
+    const hasRange = requiredValue?.valueFrom !== undefined || requiredValue?.valueTo !== undefined;
+    if (hasRange) {
+      const numericSelected = Number(selectedValue);
+      if (Number.isNaN(numericSelected)) {
+        return false;
+      }
+      const hasMin = requiredValue?.valueFrom !== undefined;
+      const hasMax = requiredValue?.valueTo !== undefined;
+      if (hasMin && numericSelected < Number(requiredValue.valueFrom)) {
+        return false;
+      }
+      if (hasMax && numericSelected > Number(requiredValue.valueTo)) {
+        return false;
+      }
+      return true;
+    }
+
+    if (requiredValue?.value === undefined) {
+      return false;
+    }
+
+    const expected = requiredValue.value;
+
+    if (typeof expected === 'boolean') {
+      const normalizedSelected = this.normalizeBoolean(selectedValue);
+      return normalizedSelected !== null && normalizedSelected === expected;
+    }
+
+    if (typeof expected === 'number') {
+      const numericSelected = Number(selectedValue);
+      return !Number.isNaN(numericSelected) && numericSelected === expected;
+    }
+
+    return String(selectedValue) === String(expected);
+  }
+
+  private normalizeBoolean(value: any): boolean | null {
+    if (typeof value === 'boolean') {
+      return value;
+    }
+    if (typeof value === 'string') {
+      const normalized = value.toLowerCase();
+      if (normalized === 'true') {
+        return true;
+      }
+      if (normalized === 'false') {
+        return false;
+      }
+    }
+    return null;
+  }
+
+  private getMetricName(unitOfMeasure: any): string {
+    if (!unitOfMeasure) {
+      return '';
+    }
+    if (typeof unitOfMeasure === 'string') {
+      return unitOfMeasure;
+    }
+    if (typeof unitOfMeasure?.units === 'string') {
+      return unitOfMeasure.units;
+    }
+    return '';
+  }
+}
diff --git a/src/app/shared/characteristic/characteristic.component.html b/src/app/shared/characteristic/characteristic.component.html
index cdc537cd..92a718d1 100644
--- a/src/app/shared/characteristic/characteristic.component.html
+++ b/src/app/shared/characteristic/characteristic.component.html
@@ -9,7 +9,19 @@ <h4 class="text-lg font-semibold text-primary-100 dark:text-gray-300">{{ charact
     </div>
     @if(!isDisabled){
     <!-- Slider -->
-    @if (isSlider()){
+    @if (isBoolean()){
+      <div class="flex items-center">
+        <label class="inline-flex items-center cursor-pointer">
+          <input
+            type="checkbox"
+            [formControl]="control"
+            (change)="onControlCommit()"
+            class="sr-only peer"
+          />
+          <div class="relative w-9 h-5 bg-gray-300 border border-gray-400 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-600 dark:border-gray-500 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[1px] after:start-[1px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:after:border-gray-500 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
+        </label>
+      </div>
+    } @else if (isSlider()){
       <div class="flex items-center space-x-2">
         <input
           type="range"
@@ -17,7 +29,7 @@ <h4 class="text-lg font-semibold text-primary-100 dark:text-gray-300">{{ charact
           [max]="getSliderRange()?.max"
           [formControl]="control"
           (change)="onControlCommit()"
-          class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+          class="w-full h-2 bg-gray-300 border border-gray-300 rounded-lg appearance-none cursor-pointer dark:bg-gray-600 dark:border-gray-500"
         />
         <span class="min-w-24 flex justify-center text-sm text-gray-600 dark:text-gray-400">{{ control.value }} {{ getUnit() }}</span>
       </div>
@@ -30,7 +42,7 @@ <h4 class="text-lg font-semibold text-primary-100 dark:text-gray-300">{{ charact
         >
           <option
             *ngFor="let val of characteristic.productSpecCharacteristicValue"
-            [value]="val.value"
+            [ngValue]="val.value"
           >
             {{ val.value }} {{ getUnit() }}
           </option>
diff --git a/src/app/shared/characteristic/characteristic.component.spec.ts b/src/app/shared/characteristic/characteristic.component.spec.ts
index d4e60119..255952f1 100644
--- a/src/app/shared/characteristic/characteristic.component.spec.ts
+++ b/src/app/shared/characteristic/characteristic.component.spec.ts
@@ -3,6 +3,7 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MarkdownModule } from 'ngx-markdown';
 
 import { CharacteristicComponent } from './characteristic.component';
 
@@ -13,7 +14,13 @@ describe('CharacteristicComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
-      imports: [CharacteristicComponent, HttpClientTestingModule, RouterTestingModule, TranslateModule.forRoot()]
+      imports: [
+        CharacteristicComponent,
+        HttpClientTestingModule,
+        RouterTestingModule,
+        TranslateModule.forRoot(),
+        MarkdownModule.forRoot(),
+      ]
     })
     .compileComponents();
     
@@ -24,4 +31,62 @@ describe('CharacteristicComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('ngOnInit should keep false as default value for boolean characteristics', () => {
+    component.characteristic = {
+      id: 'bool-1',
+      name: 'platinum',
+      description: '',
+      productSpecCharacteristicValue: [
+        { isDefault: false, value: true },
+        { isDefault: true, value: false },
+      ],
+    } as any;
+
+    component.ngOnInit();
+
+    expect(component.isBoolean()).toBeTrue();
+    expect(component.control.value).toBeFalse();
+  });
+
+  it('onControlCommit should emit boolean value', () => {
+    component.characteristic = {
+      id: 'bool-1',
+      name: 'platinum',
+      description: '',
+      productSpecCharacteristicValue: [
+        { isDefault: true, value: true },
+        { isDefault: false, value: false },
+      ],
+    } as any;
+    component.ngOnInit();
+    const emitSpy = spyOn(component.valueChange, 'emit');
+
+    component.control.setValue(false);
+    component.onControlCommit();
+
+    expect(emitSpy).toHaveBeenCalledWith({
+      characteristicId: 'bool-1',
+      selectedValue: false,
+    });
+  });
+
+  it('template should render checkbox toggle for boolean characteristics', () => {
+    component.characteristic = {
+      id: 'bool-1',
+      name: 'platinum',
+      description: '',
+      productSpecCharacteristicValue: [
+        { isDefault: true, value: true },
+        { isDefault: false, value: false },
+      ],
+    } as any;
+
+    fixture.detectChanges();
+
+    const checkbox = fixture.nativeElement.querySelector('input[type="checkbox"]');
+    const select = fixture.nativeElement.querySelector('select');
+    expect(checkbox).toBeTruthy();
+    expect(select).toBeNull();
+  });
 });
diff --git a/src/app/shared/characteristic/characteristic.component.ts b/src/app/shared/characteristic/characteristic.component.ts
index c5d635e7..d0c7f051 100644
--- a/src/app/shared/characteristic/characteristic.component.ts
+++ b/src/app/shared/characteristic/characteristic.component.ts
@@ -43,11 +43,10 @@ export class CharacteristicComponent implements OnInit {
   control = new FormControl();
 
   ngOnInit(): void {
-    const defaultValue = this.characteristic.productSpecCharacteristicValue?.find(
+    const defaultCharacteristicValue = this.characteristic.productSpecCharacteristicValue?.find(
       (val) => val.isDefault
-    )?.value || this.characteristic.productSpecCharacteristicValue?.find(
-      (val) => val.isDefault
-    )?.valueFrom;
+    );
+    const defaultValue = defaultCharacteristicValue?.value ?? defaultCharacteristicValue?.valueFrom;
 
     console.log('defaultValue: ', defaultValue);
     if (defaultValue !== undefined) {
@@ -74,6 +73,14 @@ export class CharacteristicComponent implements OnInit {
     return values?.some((val) => val.valueFrom !== undefined && val.valueTo !== undefined) || false;
   }
 
+  isBoolean(): boolean {
+    const values = this.characteristic.productSpecCharacteristicValue;
+    if (!values || values.length === 0) {
+      return false;
+    }
+    return values.every((val) => typeof val.value === 'boolean');
+  }
+
   getSliderRange(): { min: number; max: number } | null {
     const range = this.characteristic.productSpecCharacteristicValue?.find(
       (val) => val.valueFrom !== undefined && val.valueTo !== undefined
diff --git a/src/app/shared/price-plan-drawer/price-plan-drawer.component.html b/src/app/shared/price-plan-drawer/price-plan-drawer.component.html
index 2f1c13a8..77bef516 100644
--- a/src/app/shared/price-plan-drawer/price-plan-drawer.component.html
+++ b/src/app/shared/price-plan-drawer/price-plan-drawer.component.html
@@ -71,27 +71,78 @@
         </div>
       } @else if(filteredCharacteristics.length > 0) {
         <p class="mt-6 text-sm text-gray-500 dark:text-gray-400">Please select the characteristics you need to suit this offer to you.</p>
-        <div class="rounded-lg border border-dashed border-primary-100 bg-white p-2 m-2 dark:bg-gray-800 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 mb-4">
-          @for (ch of filteredCharacteristics ; track ch.id; let i = $index) {
-            @if(!ch.name?.endsWith('- enabled')){
-              <div data-cy="offerChar" class="flex flex-row w-full items-start">
-                @if(canBeDisabledChars.includes(ch.id)){
-                  <label class="inline-flex items-center cursor-pointer w-fit justify-start items-start my-4 mr-2">
-                    <input type="checkbox" [checked]="!disabledCharacteristics.includes(ch.id)" (change)="onToggleChange($event, ch.name)" class="sr-only peer">
-                    <div class="relative w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
-                  </label>
+        <div class="rounded-lg border border-dashed border-primary-100 bg-white p-3 m-2 dark:bg-gray-800 space-y-4 mb-4">
+          @if (booleanCharacteristics.length > 0) {
+            <div class="space-y-2">
+              <p class="text-xs font-semibold uppercase tracking-wide text-primary-100 dark:text-gray-300">Boolean toggles</p>
+              <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-2">
+                @for (ch of booleanCharacteristics ; track ch.id) {
+                  <div data-cy="offerChar" class="flex w-full items-start gap-2 rounded-lg border border-gray-200 bg-white dark:bg-gray-800/80 dark:border-gray-700 p-2">
+                    <div class="flex-1 min-w-0">
+                      <app-characteristic
+                        [characteristic]="ch"
+                        [readOnly]="false"
+                        [isDisabled]="disabledCharacteristics.includes(ch.id)"
+                        [canBeDisabled]="canBeDisabledChars.includes(ch.id)"
+                        (valueChange)="onValueChange($event)">
+                      </app-characteristic>
+                    </div>
+                  </div>
                 }
-                <div class="flex w-full">
-                  <app-characteristic
-                  [characteristic]="ch"
-                  [readOnly]="false"
-                  [isDisabled]="disabledCharacteristics.includes(ch.id)"
-                  [canBeDisabled]="canBeDisabledChars.includes(ch.id)"
-                  (valueChange)="onValueChange($event)">
-                  </app-characteristic>
-                </div>
               </div>
-            }
+            </div>
+          }
+          @if (choiceCharacteristics.length > 0) {
+            <div class="space-y-2">
+              <p class="text-xs font-semibold uppercase tracking-wide text-primary-100 dark:text-gray-300">Choices</p>
+              <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-2">
+                @for (ch of choiceCharacteristics ; track ch.id) {
+                  <div data-cy="offerChar" class="flex w-full items-start gap-2 rounded-lg border border-gray-200 bg-white dark:bg-gray-800/80 dark:border-gray-700 p-2">
+                    @if(canBeDisabledChars.includes(ch.id) && !isBooleanCharacteristic(ch)){
+                      <label class="inline-flex items-center cursor-pointer w-fit justify-start items-start mt-1">
+                        <input type="checkbox" [checked]="!disabledCharacteristics.includes(ch.id)" (change)="onToggleChange($event, ch.name)" class="sr-only peer">
+                        <div class="relative w-9 h-5 bg-gray-300 border border-gray-400 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-600 dark:border-gray-500 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[1px] after:start-[1px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:after:border-gray-500 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
+                      </label>
+                    }
+                    <div class="flex-1 min-w-0">
+                      <app-characteristic
+                        [characteristic]="ch"
+                        [readOnly]="false"
+                        [isDisabled]="disabledCharacteristics.includes(ch.id)"
+                        [canBeDisabled]="canBeDisabledChars.includes(ch.id)"
+                        (valueChange)="onValueChange($event)">
+                      </app-characteristic>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+          @if (rangeCharacteristics.length > 0) {
+            <div class="space-y-2">
+              <p class="text-xs font-semibold uppercase tracking-wide text-primary-100 dark:text-gray-300">Ranges</p>
+              <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-2">
+                @for (ch of rangeCharacteristics ; track ch.id) {
+                  <div data-cy="offerChar" class="flex w-full items-start gap-2 rounded-lg border border-gray-200 bg-white dark:bg-gray-800/80 dark:border-gray-700 p-2">
+                    @if(canBeDisabledChars.includes(ch.id) && !isBooleanCharacteristic(ch)){
+                      <label class="inline-flex items-center cursor-pointer w-fit justify-start items-start mt-1">
+                        <input type="checkbox" [checked]="!disabledCharacteristics.includes(ch.id)" (change)="onToggleChange($event, ch.name)" class="sr-only peer">
+                        <div class="relative w-9 h-5 bg-gray-300 border border-gray-400 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-600 dark:border-gray-500 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[1px] after:start-[1px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:after:border-gray-500 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
+                      </label>
+                    }
+                    <div class="flex-1 min-w-0">
+                      <app-characteristic
+                        [characteristic]="ch"
+                        [readOnly]="false"
+                        [isDisabled]="disabledCharacteristics.includes(ch.id)"
+                        [canBeDisabled]="canBeDisabledChars.includes(ch.id)"
+                        (valueChange)="onValueChange($event)">
+                      </app-characteristic>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
           }
         </div>
       }
diff --git a/src/app/shared/price-plan-drawer/price-plan-drawer.component.spec.ts b/src/app/shared/price-plan-drawer/price-plan-drawer.component.spec.ts
index 17496af0..f78a7a02 100644
--- a/src/app/shared/price-plan-drawer/price-plan-drawer.component.spec.ts
+++ b/src/app/shared/price-plan-drawer/price-plan-drawer.component.spec.ts
@@ -7,8 +7,7 @@ import { of, throwError } from 'rxjs';
 import { PriceServiceService } from 'src/app/services/price-service.service';
 import { ShoppingCartServiceService } from 'src/app/services/shopping-cart-service.service';
 import { EventMessageService } from 'src/app/services/event-message.service';
-import { UsageServiceService } from 'src/app/services/usage-service.service';
-import { ApiServiceService } from 'src/app/services/product-service.service';
+import { PricePlanMetricsService } from 'src/app/services/price-plan-metrics.service';
 import { MarkdownService } from 'ngx-markdown';
 
 import { PricePlanDrawerComponent } from './price-plan-drawer.component';
@@ -20,8 +19,7 @@ describe('PricePlanDrawerComponent', () => {
   let eventMessageSpy: jasmine.SpyObj<EventMessageService>;
 
   const priceServiceSpy = jasmine.createSpyObj<PriceServiceService>('PriceServiceService', ['calculatePrice']);
-  const usageServiceSpy = jasmine.createSpyObj<UsageServiceService>('UsageServiceService', ['getUsageSpec']);
-  const apiServiceSpy = jasmine.createSpyObj<ApiServiceService>('ApiServiceService', ['getOfferingPrice']);
+  const pricePlanMetricsSpy = jasmine.createSpyObj<PricePlanMetricsService>('PricePlanMetricsService', ['getAppliedMetrics']);
 
   beforeEach(async () => {
     cartServiceSpy = jasmine.createSpyObj<ShoppingCartServiceService>('ShoppingCartServiceService', ['addItemShoppingCart']);
@@ -29,7 +27,7 @@ describe('PricePlanDrawerComponent', () => {
 
     priceServiceSpy.calculatePrice.and.returnValue(of({ orderTotalPrice: [] }));
     cartServiceSpy.addItemShoppingCart.and.resolveTo();
-    apiServiceSpy.getOfferingPrice.and.resolveTo({});
+    pricePlanMetricsSpy.getAppliedMetrics.and.resolveTo([]);
 
     await TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
@@ -38,8 +36,7 @@ describe('PricePlanDrawerComponent', () => {
         { provide: PriceServiceService, useValue: priceServiceSpy },
         { provide: ShoppingCartServiceService, useValue: cartServiceSpy },
         { provide: EventMessageService, useValue: eventMessageSpy },
-        { provide: UsageServiceService, useValue: usageServiceSpy },
-        { provide: ApiServiceService, useValue: apiServiceSpy },
+        { provide: PricePlanMetricsService, useValue: pricePlanMetricsSpy },
         { provide: MarkdownService, useValue: {} },
       ]
     })
@@ -117,7 +114,29 @@ describe('PricePlanDrawerComponent', () => {
     ]);
   });
 
-  it('onToggleChange should disable and re-enable characteristic and trigger recalculation', () => {
+  it('updateOrderChars should convert string boolean values to real booleans', () => {
+    component.filteredCharacteristics = [
+      {
+        id: 'platinum',
+        name: 'platinum',
+        productSpecCharacteristicValue: [{ value: true }, { value: false }],
+      },
+    ] as any;
+    component.form.setControl(
+      'characteristics',
+      (component as any).fb.group({
+        platinum: 'true',
+      })
+    );
+
+    component.updateOrderChars();
+
+    expect(component.orderChars).toEqual([
+      { name: 'platinum', value: true, valueType: 'boolean' },
+    ]);
+  });
+
+  it('onToggleChange should disable and re-enable characteristic and trigger recalculation', async () => {
     component.filteredCharacteristics = [
       { id: 'range-main', name: 'Range Main', productSpecCharacteristicValue: [] },
       { id: 'range-enabled', name: 'Range Main - enabled', productSpecCharacteristicValue: [] },
@@ -130,11 +149,11 @@ describe('PricePlanDrawerComponent', () => {
     );
     const calculateSpy = spyOn(component, 'calculatePrice').and.resolveTo();
 
-    component.onToggleChange({ target: { checked: false } } as any, 'Range Main');
+    await component.onToggleChange({ target: { checked: false } } as any, 'Range Main');
     expect(component.form.get('characteristics')?.get('range-enabled')?.value).toBeFalse();
     expect(component.disabledCharacteristics).toContain('range-main');
 
-    component.onToggleChange({ target: { checked: true } } as any, 'Range Main');
+    await component.onToggleChange({ target: { checked: true } } as any, 'Range Main');
     expect(component.form.get('characteristics')?.get('range-enabled')?.value).toBeTrue();
     expect(component.disabledCharacteristics).not.toContain('range-main');
     expect(calculateSpy).toHaveBeenCalledTimes(2);
@@ -266,12 +285,9 @@ describe('PricePlanDrawerComponent', () => {
       priceType: 'usage',
       bundledPopRelationship: [{ id: 'pop-1' }, { id: 'pop-2' }],
     };
-    apiServiceSpy.getOfferingPrice.and.callFake(async (id: string) => {
-      if (id === 'pop-1') {
-        return { id: 'pop-1', usageSpecId: 'usage-1', unitOfMeasure: { units: 'GB' } };
-      }
-      return { id: 'pop-2' };
-    });
+    pricePlanMetricsSpy.getAppliedMetrics.and.resolveTo([
+      { priceId: 'pop-1', usageSpecId: 'usage-1', unitOfMeasure: 'GB', value: 0 },
+    ]);
     spyOn(component, 'filterCharacteristics');
     spyOn(component, 'calculatePrice').and.resolveTo();
 
@@ -296,7 +312,7 @@ describe('PricePlanDrawerComponent', () => {
   });
 
   it('onMetricChange should update metric value and trigger recalculation', () => {
-    const metric = { value: 0, unitOfMeasure: 'GB' };
+    const metric = { value: 0, unitOfMeasure: 'GB', usageSpecId: 'u1' };
     const calculateSpy = spyOn(component, 'calculatePrice').and.resolveTo();
 
     component.onMetricChange({ target: { valueAsNumber: 25 } } as any, metric);
@@ -305,21 +321,44 @@ describe('PricePlanDrawerComponent', () => {
     expect(calculateSpy).toHaveBeenCalled();
   });
 
-  it('onValueChange should update form characteristic control and trigger recalculation', () => {
+  it('onValueChange should update form characteristic control and trigger recalculation', async () => {
     component.form.setControl(
       'characteristics',
       (component as any).fb.group({
         c1: 1,
       })
     );
+    component.filteredCharacteristics = [{ id: 'c1', name: 'Char 1', productSpecCharacteristicValue: [] }] as any;
+    component.selectedPricePlan = { id: 'pp-1' };
+    pricePlanMetricsSpy.getAppliedMetrics.and.resolveTo([{ usageSpecId: 'u1', unitOfMeasure: 'GB', value: 0 }]);
     const calculateSpy = spyOn(component, 'calculatePrice').and.resolveTo();
 
-    component.onValueChange({ characteristicId: 'c1', selectedValue: 7 });
+    await component.onValueChange({ characteristicId: 'c1', selectedValue: 7 });
 
     expect(component.form.get('characteristics')?.get('c1')?.value).toBe(7);
+    expect(pricePlanMetricsSpy.getAppliedMetrics).toHaveBeenCalled();
+    const selectedCharsArg = pricePlanMetricsSpy.getAppliedMetrics.calls.mostRecent().args[1];
+    expect(selectedCharsArg).toEqual([{ id: 'c1', value: 7 }]);
     expect(calculateSpy).toHaveBeenCalled();
   });
 
+  it('onValueChange should update metrics using applied metrics service response', async () => {
+    component.form.setControl(
+      'characteristics',
+      (component as any).fb.group({
+        c1: 'small',
+      })
+    );
+    component.filteredCharacteristics = [{ id: 'c1', name: 'Size', productSpecCharacteristicValue: [] }] as any;
+    component.selectedPricePlan = { id: 'pp-1' };
+    pricePlanMetricsSpy.getAppliedMetrics.and.resolveTo([{ usageSpecId: 'u2', unitOfMeasure: 'CPU', value: 0 }]);
+    spyOn(component, 'calculatePrice').and.resolveTo();
+
+    await component.onValueChange({ characteristicId: 'c1', selectedValue: 'large' });
+
+    expect(component.metrics).toEqual([{ usageSpecId: 'u2', unitOfMeasure: 'CPU', value: 0 }]);
+  });
+
   it('calculatePrice should return early for free offers', async () => {
     component.isFree = true;
     component.price = [{ stale: true }];
diff --git a/src/app/shared/price-plan-drawer/price-plan-drawer.component.ts b/src/app/shared/price-plan-drawer/price-plan-drawer.component.ts
index 92921b15..e1195f4b 100644
--- a/src/app/shared/price-plan-drawer/price-plan-drawer.component.ts
+++ b/src/app/shared/price-plan-drawer/price-plan-drawer.component.ts
@@ -10,8 +10,7 @@ import {EventMessageService} from "../../services/event-message.service";
 import { cartProduct } from 'src/app/models/interfaces';
 import { v4 as uuidv4 } from 'uuid';
 import { certifications } from 'src/app/models/certification-standards.const';
-import { UsageServiceService } from 'src/app/services/usage-service.service'
-import { ApiServiceService } from 'src/app/services/product-service.service'
+import { PricePlanMetricsService } from 'src/app/services/price-plan-metrics.service';
 type Product = components["schemas"]["ProductOffering"];
 type ProductSpecification = components["schemas"]["ProductSpecification"];
 type ProductOfferingTerm = components["schemas"]["ProductOfferingTerm"];
@@ -64,6 +63,9 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
 
   characteristics: ProductSpecificationCharacteristic[] = []; // Características dinámicas
   filteredCharacteristics: ProductSpecificationCharacteristic[] = [];
+  booleanCharacteristics: ProductSpecificationCharacteristic[] = [];
+  choiceCharacteristics: ProductSpecificationCharacteristic[] = [];
+  rangeCharacteristics: ProductSpecificationCharacteristic[] = [];
   disabledCharacteristics: any[] = [];
   canBeDisabledChars: any[]=[];
 
@@ -81,8 +83,7 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
     private cartService: ShoppingCartServiceService,
     private eventMessage: EventMessageService,
     private cdr: ChangeDetectorRef,
-    private usageService: UsageServiceService,
-    private api: ApiServiceService) {
+    private pricePlanMetricsService: PricePlanMetricsService) {
     // Crear el formulario padre
     this.form = this.fb.group({
       selectedPricePlan: [null, Validators.required], // Plan de precios seleccionado
@@ -201,6 +202,11 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
 
   filterCharacteristics() {
     this.filteredCharacteristics = [];
+    this.booleanCharacteristics = [];
+    this.choiceCharacteristics = [];
+    this.rangeCharacteristics = [];
+    this.disabledCharacteristics = [];
+    this.canBeDisabledChars = [];
   
     // Set disabled prefixes
     const disabledPrefixes = this.characteristics
@@ -255,9 +261,48 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
     });
   
     this.form.setControl('characteristics', characteristicsGroup);
+    this.groupCharacteristics();
   }
 
-  onToggleChange(event: Event, charName: any): void {
+  isBooleanCharacteristic(characteristic: ProductSpecificationCharacteristic): boolean {
+    const values = characteristic.productSpecCharacteristicValue;
+    if (!values || values.length === 0) {
+      return false;
+    }
+    return values.every((val: any) => typeof val?.value === 'boolean');
+  }
+
+  isRangeCharacteristic(characteristic: ProductSpecificationCharacteristic): boolean {
+    return characteristic.productSpecCharacteristicValue?.some(
+      (val: any) => val?.valueFrom !== undefined && val?.valueTo !== undefined
+    ) ?? false;
+  }
+
+  private isEnabledCharacteristic(characteristic: ProductSpecificationCharacteristic): boolean {
+    return characteristic.name?.endsWith('- enabled') ?? false;
+  }
+
+  private groupCharacteristics(): void {
+    const selectableCharacteristics = this.filteredCharacteristics.filter(
+      (characteristic) => !this.isEnabledCharacteristic(characteristic)
+    );
+
+    this.booleanCharacteristics = selectableCharacteristics.filter((characteristic) =>
+      this.isBooleanCharacteristic(characteristic)
+    );
+    this.rangeCharacteristics = selectableCharacteristics.filter(
+      (characteristic) =>
+        !this.isBooleanCharacteristic(characteristic) &&
+        this.isRangeCharacteristic(characteristic)
+    );
+    this.choiceCharacteristics = selectableCharacteristics.filter(
+      (characteristic) =>
+        !this.isBooleanCharacteristic(characteristic) &&
+        !this.isRangeCharacteristic(characteristic)
+    );
+  }
+
+  async onToggleChange(event: Event, charName: any): Promise<void> {
     const inputElement = event.target as HTMLInputElement;
     const isChecked = inputElement.checked;
     let char = this.filteredCharacteristics.find(char => char.name == charName+' - enabled')
@@ -283,7 +328,8 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
         );
       }
     }
-    this.calculatePrice();
+    await this.refreshAppliedMetrics();
+    await this.calculatePrice();
   }
 
   // Handle price plan selection
@@ -305,46 +351,10 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
     }
 
     this.filterCharacteristics();
-
-    if(pricePlan.bundledPopRelationship){
-      for(let i=0;i<pricePlan.bundledPopRelationship.length;i++){
-        let comp = await this.api.getOfferingPrice(pricePlan.bundledPopRelationship[i].id)
-        if(comp.usageSpecId && comp.unitOfMeasure){
-          //let usageSpec = await this.usageService.getUsageSpec(comp.usageSpecId)
-          this.metrics.push({
-            priceId: comp.id,
-            usageSpecId: comp.usageSpecId,
-            //name: usageSpec.name,
-            unitOfMeasure: comp.unitOfMeasure.units,
-            value: 0  
-          })
-        }
-      }
-    }  
-
-    console.log('metrics----')
-    console.log(this.metrics)
-
-    /*if(this.metrics.length>0){
-      this.selectedMetric=this.metrics[0]
-      this.selectedUnitOfMeasure=this.metrics[0].unitOfMeasure
-      const grouped = this.metrics.reduce((acc, metric) => {
-        const key = metric.usageSpecId;
-      
-        if (!acc[key]) {
-          acc[key] = [];
-        }
-      
-        acc[key].push(metric);
-      
-        return acc;
-      }, {} as Record<string, typeof this.metrics>);
-      this.groupedMetrics=grouped;        
-    }  */
-
     this.selectedPricePlan = pricePlan;
+    await this.refreshAppliedMetrics();
     console.log(this.selectedPricePlan);
-    this.calculatePrice();
+    await this.calculatePrice();
   }
 
   onUsageSpecChange(event: Event): void {
@@ -367,7 +377,7 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
   
 
   // Handle characteristic value changes
-  onValueChange(event: { characteristicId: string; selectedValue: any }): void {
+  async onValueChange(event: { characteristicId: string; selectedValue: any }): Promise<void> {
     const characteristicsGroup = this.form.get('characteristics') as FormGroup;
     characteristicsGroup.get(event.characteristicId)?.setValue(event.selectedValue);
 
@@ -394,7 +404,67 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
       }
     }    
     console.log(char)*/
-    this.calculatePrice();
+    await this.refreshAppliedMetrics();
+    await this.calculatePrice();
+  }
+
+  private metricKey(metric: any): string {
+    if (!metric?.usageSpecId || !metric?.unitOfMeasure) {
+      return '';
+    }
+    return `${metric.usageSpecId}:${metric.unitOfMeasure}`;
+  }
+
+  private getSelectedCharacteristicsForMetrics(): { id: string; value: any }[] {
+    const selectedCharacteristics = this.form.get('characteristics')?.value || {};
+    const selectedCharacteristicValues: { id: string; value: any }[] = [];
+
+    for (const characteristicId of this.getKeys(selectedCharacteristics)) {
+      if (this.disabledCharacteristics.includes(characteristicId)) {
+        continue;
+      }
+      selectedCharacteristicValues.push({
+        id: characteristicId,
+        value: selectedCharacteristics[characteristicId],
+      });
+    }
+
+    return selectedCharacteristicValues;
+  }
+
+  private async refreshAppliedMetrics(): Promise<void> {
+    if (!this.selectedPricePlan) {
+      this.metrics = [];
+      return;
+    }
+
+    const selectedCharacteristicValues = this.getSelectedCharacteristicsForMetrics();
+    const previousMetricValues = new Map<string, number>();
+    for (const metric of this.metrics) {
+      const metricKey = this.metricKey(metric);
+      if (metricKey) {
+        previousMetricValues.set(metricKey, metric.value ?? 0);
+      }
+    }
+
+    try {
+      const appliedMetrics = await this.pricePlanMetricsService.getAppliedMetrics(
+        this.selectedPricePlan,
+        selectedCharacteristicValues
+      );
+      this.metrics = (Array.isArray(appliedMetrics) ? appliedMetrics : []).map((metric: any) => {
+        const metricKey = this.metricKey(metric);
+        if (!metricKey) {
+          return metric;
+        }
+        return {
+          ...metric,
+          value: previousMetricValues.has(metricKey) ? previousMetricValues.get(metricKey) : (metric.value ?? 0),
+        };
+      });
+    } catch (error) {
+      console.error('Error refreshing applied metrics', error);
+    }
   }
 
   hasLongWord(str: string | undefined, threshold = 20) {
@@ -439,7 +509,20 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
       console.log(this.filteredCharacteristics[idx])
       if(!this.disabledCharacteristics.includes(this.filteredCharacteristics[idx].id)){
         let value = this.getValues(selectedCharacteristics)[i]
-        let valueType = this.filteredCharacteristics[idx].valueType
+        const characteristic = this.filteredCharacteristics[idx];
+        const hasBooleanValues = characteristic.productSpecCharacteristicValue?.some(
+          (charValue: any) => typeof charValue?.value === 'boolean'
+        ) ?? false;
+
+        // Defensive conversion for boolean selects serialized as "true"/"false".
+        if (hasBooleanValues && typeof value === 'string') {
+          const normalized = value.toLowerCase();
+          if (normalized === 'true' || normalized === 'false') {
+            value = normalized === 'true';
+          }
+        }
+
+        let valueType = characteristic.valueType
   
         if (!valueType && typeof value === 'boolean') {
           valueType = 'boolean'
@@ -453,9 +536,9 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
           value=0
         }
 
-        if(!this.filteredCharacteristics[idx].name?.endsWith('- enabled')){
+        if(!characteristic.name?.endsWith('- enabled')){
           this.orderChars.push({
-            "name": this.filteredCharacteristics[idx].name,
+            "name": characteristic.name,
             "value": value,
             "valueType": valueType,
           })