diff --git a/cypress/e2e/blog.cy.ts b/cypress/e2e/blog.cy.ts
index cfc50071..53770ae9 100644
--- a/cypress/e2e/blog.cy.ts
+++ b/cypress/e2e/blog.cy.ts
@@ -1,5 +1,5 @@
 import { loginAcc, blogEntry, local_items } from "../support/constants"
-import * as moment from 'moment';
+import moment from 'moment';
 
 describe('/blog',{
     viewportHeight: 800,
diff --git a/cypress/e2e/dashboard.cy.ts b/cypress/e2e/dashboard.cy.ts
index 192d61b3..ee3a10a5 100644
--- a/cypress/e2e/dashboard.cy.ts
+++ b/cypress/e2e/dashboard.cy.ts
@@ -1,5 +1,5 @@
 import { category_launched, init_config, init_stat, local_items, login_token, product_offering, checkHeaderPostLogin, checkHeaderPreLogin, loginAcc } from "../support/constants"
-import * as moment from 'moment';
+import moment from 'moment';
 
 describe('/dashboard',{
     viewportHeight: 800,
diff --git a/cypress/support/constants.ts b/cypress/support/constants.ts
index 17fd72bf..c7509316 100644
--- a/cypress/support/constants.ts
+++ b/cypress/support/constants.ts
@@ -32,6 +32,7 @@ export const init_config = {
     'quotesEnabled': false,
     'tenderingEnabled': false,
     'dataSpaceEnabled': false,
+    'dspEnabled': false,
     'launchValidationEnabled': false,
     'tenderDevButtonsOpenCloseEnabled': false,
     'aiEnabled': false,
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 90af9824..51382324 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -9,7 +9,7 @@ import { Router } from '@angular/router';
 import { LoginInfo } from 'src/app/models/interfaces';
 import { ApiServiceService } from 'src/app/services/product-service.service';
 import { RefreshLoginServiceService } from "src/app/services/refresh-login-service.service";
-import * as moment from 'moment';
+import moment from 'moment';
 import {ThemeService} from "./services/theme.service";
 import {environment} from "../environments/environment";
 import { filter } from 'rxjs'; 
diff --git a/src/app/data/featuresConfig.ts b/src/app/data/featuresConfig.ts
index 4ecb89d3..220523f3 100644
--- a/src/app/data/featuresConfig.ts
+++ b/src/app/data/featuresConfig.ts
@@ -5,6 +5,7 @@ export type FeatureFlagKey =
   | 'quotesEnabled'
   | 'tenderingEnabled'
   | 'dataSpaceEnabled'
+  | 'dspEnabled'
   | 'launchValidationEnabled'
   | 'tenderDevButtonsOpenCloseEnabled'
   | 'aiEnabled';
@@ -45,6 +46,11 @@ export const FEATURE_FLAG_DEFINITIONS: FeatureFlagDefinition[] = [
     label: 'Data space',
     description: 'Enable data space fields in organization and offer forms.'
   },
+  {
+    key: 'dspEnabled',
+    label: 'DSP',
+    description: 'Enable DSP-related data space contract and schema fields.'
+  },
   {
     key: 'launchValidationEnabled',
     label: 'Launch validation',
@@ -76,6 +82,7 @@ export function readFeaturesConfig(config: any): FeaturesConfig {
   result.quotesEnabled = readBoolean(source, 'quotesEnabled');
   result.tenderingEnabled = readBoolean(source, 'tenderingEnabled');
   result.dataSpaceEnabled = readBoolean(source, 'dataSpaceEnabled');
+  result.dspEnabled = readBoolean(source, 'dspEnabled');
   result.launchValidationEnabled = readBoolean(source, 'launchValidationEnabled');
   result.tenderDevButtonsOpenCloseEnabled = readBoolean(source, 'tenderDevButtonsOpenCloseEnabled');
   result.aiEnabled = readBoolean(source, 'aiEnabled');
@@ -91,6 +98,7 @@ export function applyRuntimeFeaturesConfig(config: any): void {
   environment.QUOTES_ENABLED = features.quotesEnabled ?? false;
   environment.TENDER_ENABLED = features.tenderingEnabled ?? false;
   environment.DATA_SPACE_ENABLED = features.dataSpaceEnabled ?? false;
+  environment.DSP_ENABLED = features.dspEnabled ?? environment.DSP_ENABLED;
   environment.LAUNCH_VALIDATION_ENABLED = features.launchValidationEnabled ?? false;
   environment.TENDER_DEV_BUTTONS_OPEN_CLOSE_ENABLED = features.tenderDevButtonsOpenCloseEnabled ?? false;
   environment.AI_SEARCH_ENABLED = features.aiEnabled ?? false;
diff --git a/src/app/guard/auth.guard.spec.ts b/src/app/guard/auth.guard.spec.ts
index d5c42b54..f7f3af10 100644
--- a/src/app/guard/auth.guard.spec.ts
+++ b/src/app/guard/auth.guard.spec.ts
@@ -3,7 +3,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { LocalStorageService } from '../services/local-storage.service';
 import { AuthGuard } from './auth.guard';
 
diff --git a/src/app/guard/auth.guard.ts b/src/app/guard/auth.guard.ts
index e45221d9..e2f01f6d 100644
--- a/src/app/guard/auth.guard.ts
+++ b/src/app/guard/auth.guard.ts
@@ -3,7 +3,7 @@ import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from
 import {LocalStorageService} from "../services/local-storage.service";
 import { Observable } from 'rxjs';
 import { LoginInfo } from '../models/interfaces';
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 
 @Injectable({
diff --git a/src/app/interceptors/requests-interceptor.spec.ts b/src/app/interceptors/requests-interceptor.spec.ts
index 769e7152..85376c60 100644
--- a/src/app/interceptors/requests-interceptor.spec.ts
+++ b/src/app/interceptors/requests-interceptor.spec.ts
@@ -1,7 +1,7 @@
 import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 import { PROVIDER_COUNTRY_LIST_URL } from '../models/search-organizations-filters.model';
 import { LocalStorageService } from '../services/local-storage.service';
diff --git a/src/app/interceptors/requests-interceptor.ts b/src/app/interceptors/requests-interceptor.ts
index 0a97a64a..40a30ca4 100644
--- a/src/app/interceptors/requests-interceptor.ts
+++ b/src/app/interceptors/requests-interceptor.ts
@@ -8,7 +8,7 @@ import {
 import { Observable } from 'rxjs';
 import {LocalStorageService} from "../services/local-storage.service";
 import { LoginInfo } from '../models/interfaces';
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 
 export function shouldAttachAuthHeaders(requestUrl: string, internalBaseUrls: string[]): boolean {
diff --git a/src/app/models/formFields/form-field.model.ts b/src/app/models/formFields/form-field.model.ts
new file mode 100644
index 00000000..d95774b1
--- /dev/null
+++ b/src/app/models/formFields/form-field.model.ts
@@ -0,0 +1,37 @@
+interface BaseFormField {
+  name: string;
+  label: string;
+  required?: boolean;
+  colSpan?: number;
+  defaultValue?: any;
+}
+
+export interface StringFormField extends BaseFormField {
+  type: 'string';
+  maxLength?: number;
+  placeholder?: string;
+}
+
+export interface NumberFormField extends BaseFormField {
+  type: 'number';
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectableFormField extends BaseFormField {
+  type: 'select';
+  options: SelectOption[];
+  multiple?: boolean;
+}
+
+export interface BooleanFormField extends BaseFormField {
+  type: 'boolean';
+}
+
+export type FormField = StringFormField | NumberFormField | SelectableFormField | BooleanFormField;
diff --git a/src/app/models/paginated-list.spec.ts b/src/app/models/paginated-list.spec.ts
new file mode 100644
index 00000000..64c6692f
--- /dev/null
+++ b/src/app/models/paginated-list.spec.ts
@@ -0,0 +1,196 @@
+import { TestBed } from '@angular/core/testing';
+import { PaginatedList } from './paginated-list';
+
+describe('PaginatedList', () => {
+  const PAGE_SIZE = 10;
+
+  function makeItems(count: number, offset = 0): string[] {
+    return Array.from({ length: count }, (_, i) => `item-${offset + i}`);
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should start with empty items, loading false and hasMore false', () => {
+    const list = new PaginatedList(() => Promise.resolve([]), PAGE_SIZE);
+    expect(list.items()).toEqual([]);
+    expect(list.loading()).toBeFalse();
+    expect(list.loadingMore()).toBeFalse();
+    expect(list.hasMore()).toBeFalse();
+  });
+
+  it('load should set loading=true during fetch and false when done', async () => {
+    const loadingStates: boolean[] = [];
+    const fetcher = jasmine.createSpy().and.callFake(() => {
+      loadingStates.push(list.loading());
+      return Promise.resolve([]);
+    });
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+    expect(loadingStates[0]).toBeTrue();
+    expect(list.loading()).toBeFalse();
+  });
+
+  it('load should populate items from the first fetch call', async () => {
+    const page0 = makeItems(10);
+    const fetcher = jasmine.createSpy()
+      .and.returnValues(Promise.resolve(page0), Promise.resolve([]));
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+    expect(list.items()).toEqual(page0);
+  });
+
+  it('load should set hasMore=true when prefetch returns non-null items', async () => {
+    const fetcher = jasmine.createSpy()
+      .and.returnValues(Promise.resolve(makeItems(10)), Promise.resolve(makeItems(10, 10)));
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+    expect(list.hasMore()).toBeTrue();
+  });
+
+  it('load should set hasMore=false when prefetch returns empty array', async () => {
+    const fetcher = jasmine.createSpy()
+      .and.returnValues(Promise.resolve(makeItems(5)), Promise.resolve([]));
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+    expect(list.hasMore()).toBeFalse();
+  });
+
+  it('load should set hasMore=false when prefetch returns array of nulls', async () => {
+    const fetcher = jasmine.createSpy()
+      .and.returnValues(Promise.resolve(makeItems(5)), Promise.resolve([null, null] as any));
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+    expect(list.hasMore()).toBeFalse();
+  });
+
+  it('load should reset items and state on reload', async () => {
+    const fetcher = jasmine.createSpy()
+      .and.returnValues(
+        Promise.resolve(makeItems(10)),    // first load: page 0
+        Promise.resolve(makeItems(10, 10)), // first load: prefetch
+        Promise.resolve(makeItems(10, 20)), // loadMore: next prefetch
+        Promise.resolve(makeItems(3, 30)),  // second load: page 0
+        Promise.resolve([])                // second load: prefetch
+      );
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+    await list.loadMore();
+    await list.load();
+    expect(list.items()).toEqual(makeItems(3, 30));
+  });
+
+  it('load should set loading=false even when fetcher rejects', async () => {
+    const fetcher = jasmine.createSpy().and.returnValue(Promise.reject(new Error('fail')));
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    try {
+      await list.load();
+    } catch {
+      // expected
+    }
+    expect(list.loading()).toBeFalse();
+  });
+
+  it('loadMore should do nothing when hasMore is false', async () => {
+    const fetcher = jasmine.createSpy()
+      .and.returnValues(Promise.resolve(makeItems(5)), Promise.resolve([]));
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+    const callCount = fetcher.calls.count();
+
+    await list.loadMore();
+    expect(fetcher.calls.count()).toBe(callCount);
+    expect(list.items()).toEqual(makeItems(5));
+  });
+
+  it('loadMore should set loadingMore=true during fetch and false when done', async () => {
+    let resolveSecond!: (v: string[]) => void;
+    const fetcher = jasmine.createSpy()
+      .and.returnValues(
+        Promise.resolve(makeItems(10)),
+        Promise.resolve(makeItems(10, 10)),
+        new Promise<string[]>(r => { resolveSecond = r; })
+      );
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+
+    const morePromise = list.loadMore();
+    expect(list.loadingMore()).toBeTrue();
+    resolveSecond([]);
+    await morePromise;
+    expect(list.loadingMore()).toBeFalse();
+  });
+
+  it('loadMore should append prefetched items to existing items', async () => {
+    const page0 = makeItems(10);
+    const page1 = makeItems(10, 10);
+    const fetcher = jasmine.createSpy()
+      .and.returnValues(
+        Promise.resolve(page0),
+        Promise.resolve(page1),
+        Promise.resolve([])
+      );
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+    await list.loadMore();
+    expect(list.items()).toEqual([...page0, ...page1]);
+  });
+
+  it('loadMore should update hasMore based on next prefetch result', async () => {
+    const fetcher = jasmine.createSpy()
+      .and.returnValues(
+        Promise.resolve(makeItems(10)),
+        Promise.resolve(makeItems(10, 10)),
+        Promise.resolve(makeItems(5, 20)),
+        Promise.resolve([])
+      );
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+    expect(list.hasMore()).toBeTrue();
+    await list.loadMore();
+    expect(list.hasMore()).toBeTrue();
+    await list.loadMore();
+    expect(list.hasMore()).toBeFalse();
+  });
+
+  it('loadMore should set loadingMore=false even when fetcher rejects', async () => {
+    const fetcher = jasmine.createSpy()
+      .and.returnValues(
+        Promise.resolve(makeItems(10)),
+        Promise.resolve(makeItems(10, 10)),
+        Promise.reject(new Error('fail'))
+      );
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+    try {
+      await list.loadMore();
+    } catch {
+      // expected
+    }
+    expect(list.loadingMore()).toBeFalse();
+  });
+
+  it('load should call fetcher with page 0 first, then pageSize', async () => {
+    const fetcher = jasmine.createSpy()
+      .and.returnValues(Promise.resolve([]), Promise.resolve([]));
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+    expect(fetcher.calls.argsFor(0)).toEqual([0]);
+    expect(fetcher.calls.argsFor(1)).toEqual([PAGE_SIZE]);
+  });
+
+  it('loadMore should advance the page cursor on each call', async () => {
+    const fetcher = jasmine.createSpy()
+      .and.returnValues(
+        Promise.resolve(makeItems(10)),
+        Promise.resolve(makeItems(10, 10)),
+        Promise.resolve(makeItems(10, 20)),
+        Promise.resolve([])
+      );
+    const list = new PaginatedList(fetcher, PAGE_SIZE);
+    await list.load();
+    await list.loadMore();
+    expect(fetcher.calls.argsFor(2)).toEqual([PAGE_SIZE * 2]);
+  });
+});
diff --git a/src/app/models/paginated-list.ts b/src/app/models/paginated-list.ts
new file mode 100644
index 00000000..de59c6e6
--- /dev/null
+++ b/src/app/models/paginated-list.ts
@@ -0,0 +1,49 @@
+import { signal } from '@angular/core';
+
+export class PaginatedList<T> {
+  readonly items = signal<T[]>([]);
+  readonly loading = signal(false);
+  readonly loadingMore = signal(false);
+  readonly hasMore = signal(false);
+
+  private page = 0;
+  private prefetched: T[] = [];
+  private readonly fetcher: (page: number) => Promise<T[]>;
+  private readonly pageSize: number;
+
+  constructor(fetcher: (page: number) => Promise<T[]>, pageSize: number) {
+    this.fetcher = fetcher;
+    this.pageSize = pageSize;
+  }
+
+  async load(): Promise<void> {
+    this.loading.set(true);
+    this.page = 0;
+    this.items.set([]);
+    this.prefetched = [];
+
+    try {
+      this.items.set(await this.fetcher(0));
+      this.page = this.pageSize;
+      this.prefetched = await this.fetcher(this.page);
+      this.page += this.pageSize;
+      this.hasMore.set(this.prefetched.some(item => item != null));
+    } finally {
+      this.loading.set(false);
+    }
+  }
+
+  async loadMore(): Promise<void> {
+    if (!this.hasMore()) return;
+    this.loadingMore.set(true);
+
+    try {
+      this.items.set([...this.items(), ...this.prefetched]);
+      this.prefetched = await this.fetcher(this.page);
+      this.page += this.pageSize;
+      this.hasMore.set(this.prefetched.some(item => item != null));
+    } finally {
+      this.loadingMore.set(false);
+    }
+  }
+}
diff --git a/src/app/pages/admin/categories/create-category/create-category.component.ts b/src/app/pages/admin/categories/create-category/create-category.component.ts
index 99d74ee5..8dbf7be6 100644
--- a/src/app/pages/admin/categories/create-category/create-category.component.ts
+++ b/src/app/pages/admin/categories/create-category/create-category.component.ts
@@ -6,7 +6,7 @@ import {EventMessageService} from "src/app/services/event-message.service";
 import { LoginInfo } from 'src/app/models/interfaces';
 import { initFlowbite } from 'flowbite';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
diff --git a/src/app/pages/admin/categories/update-category/update-category.component.ts b/src/app/pages/admin/categories/update-category/update-category.component.ts
index 21710408..70189e15 100644
--- a/src/app/pages/admin/categories/update-category/update-category.component.ts
+++ b/src/app/pages/admin/categories/update-category/update-category.component.ts
@@ -6,7 +6,7 @@ import {EventMessageService} from "src/app/services/event-message.service";
 import { LoginInfo } from 'src/app/models/interfaces';
 import { initFlowbite } from 'flowbite';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
diff --git a/src/app/pages/catalogs/catalogs.component.html b/src/app/pages/catalogs/catalogs.component.html
index 494796a4..6352b22c 100644
--- a/src/app/pages/catalogs/catalogs.component.html
+++ b/src/app/pages/catalogs/catalogs.component.html
@@ -85,7 +85,7 @@ <h1 data-cy="cataloguesAllHeader" class="mb-2 text-center mt-4 text-4xl font-ext
         </div>
       }
     } @else {
-        <div role="status" class="w-full h-full pt-8 flex justify-center align-middle">
+        <div role="status" data-cy="loadMoreLoading" class="w-full h-full pt-8 flex justify-center align-middle">
           <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
               <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
diff --git a/src/app/pages/catalogs/catalogs.component.ts b/src/app/pages/catalogs/catalogs.component.ts
index 6defd054..e5e6574b 100644
--- a/src/app/pages/catalogs/catalogs.component.ts
+++ b/src/app/pages/catalogs/catalogs.component.ts
@@ -63,21 +63,23 @@ export class CatalogsComponent implements OnInit{
   async getCatalogs(next:boolean){
     if(next==false){
       this.loading=true;
-    }    
+    }
 
     let options = {
       "keywords": this.filter
     }
-    this.paginationService.getItemsPaginated(this.page,this.CATALOG_LIMIT,next,this.catalogs,this.nextCatalogs, options,
-      this.api.getCatalogs.bind(this.api)).then(data => {
-      this.page_check=data.page_check;      
+    try {
+      const data = await this.paginationService.getItemsPaginated(this.page,this.CATALOG_LIMIT,next,this.catalogs,this.nextCatalogs, options,
+        this.api.getCatalogs.bind(this.api));
+      this.page_check=data.page_check;
       this.catalogs=data.items.filter((catalog:Catalog) => (catalog.id !== environment.DFT_CATALOG_ID)
       );
       this.nextCatalogs=data.nextItems;
       this.page=data.page;
+    } finally {
       this.loading=false;
       this.loading_more=false;
-    })
+    }
   }
 
   filterCatalogs(){
@@ -91,6 +93,7 @@ export class CatalogsComponent implements OnInit{
   }
 
   async next(){
+    this.loading_more = true;
     await this.getCatalogs(true);
   }
 
diff --git a/src/app/pages/checkout/checkout.component.ts b/src/app/pages/checkout/checkout.component.ts
index 10ea60da..51503461 100644
--- a/src/app/pages/checkout/checkout.component.ts
+++ b/src/app/pages/checkout/checkout.component.ts
@@ -13,7 +13,7 @@ import {environment} from "../../../environments/environment";
 import {TYPES} from "../../models/types.const";
 import {AccountServiceService} from "../../services/account-service.service";
 import {NumberFormatStyle} from "@angular/common";
-import * as moment from "moment/moment";
+import moment from 'moment';
 import {ProductOrderService} from "../../services/product-order-service.service";
 import {BillingAddressComponent} from "./billing-address/billing-address.component";
 import {BillingAccountFormComponent} from "../../shared/billing-account-form/billing-account-form.component";
diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts
index f75bac90..ed58c728 100644
--- a/src/app/pages/dashboard/dashboard.component.ts
+++ b/src/app/pages/dashboard/dashboard.component.ts
@@ -5,7 +5,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { initFlowbite } from 'flowbite';
-import * as moment from 'moment';
+import moment from 'moment';
 import { map, Subject, takeUntil } from 'rxjs';
 import { LoginInfo } from 'src/app/models/interfaces';
 import { ProductOffering } from 'src/app/models/product.model';
diff --git a/src/app/pages/dome-blog/blog-entry-detail/blog-entry-detail.component.ts b/src/app/pages/dome-blog/blog-entry-detail/blog-entry-detail.component.ts
index 095edd3c..64a2b18c 100644
--- a/src/app/pages/dome-blog/blog-entry-detail/blog-entry-detail.component.ts
+++ b/src/app/pages/dome-blog/blog-entry-detail/blog-entry-detail.component.ts
@@ -5,7 +5,7 @@ import { DomeBlogServiceService } from "src/app/services/dome-blog-service.servi
 import { MarkdownComponent } from "ngx-markdown";
 import { LocalStorageService } from "src/app/services/local-storage.service";
 import { LoginInfo } from "src/app/models/interfaces";
-import * as moment from 'moment';
+import moment from 'moment';
 import { ConfirmDialogComponent } from "src/app/shared/confirm-dialog/confirm-dialog.component";
 import { Meta, Title } from "@angular/platform-browser";
 
diff --git a/src/app/pages/dome-blog/dome-blog.component.ts b/src/app/pages/dome-blog/dome-blog.component.ts
index 47c763ef..147e5dfc 100644
--- a/src/app/pages/dome-blog/dome-blog.component.ts
+++ b/src/app/pages/dome-blog/dome-blog.component.ts
@@ -5,7 +5,7 @@ import {EventMessageService} from "src/app/services/event-message.service";
 import {LocalStorageService} from "src/app/services/local-storage.service";
 import { DomeBlogServiceService } from "src/app/services/dome-blog-service.service"
 import { LoginInfo } from 'src/app/models/interfaces';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Subject } from 'rxjs';
 import { ConfirmDialogComponent } from "src/app/shared/confirm-dialog/confirm-dialog.component";
 
diff --git a/src/app/pages/dome-blog/entry-form/entry-form.component.ts b/src/app/pages/dome-blog/entry-form/entry-form.component.ts
index fe88f290..4be0c4d3 100644
--- a/src/app/pages/dome-blog/entry-form/entry-form.component.ts
+++ b/src/app/pages/dome-blog/entry-form/entry-form.component.ts
@@ -7,7 +7,7 @@ import {LocalStorageService} from "src/app/services/local-storage.service";
 import { ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LoginInfo } from 'src/app/models/interfaces';
-import * as moment from 'moment';
+import moment from 'moment';
 import { ConfirmDialogComponent } from "src/app/shared/confirm-dialog/confirm-dialog.component";
 import { environment } from "src/environments/environment";
 
diff --git a/src/app/pages/product-details/product-details.component.ts b/src/app/pages/product-details/product-details.component.ts
index 5cf0d272..8c15a670 100644
--- a/src/app/pages/product-details/product-details.component.ts
+++ b/src/app/pages/product-details/product-details.component.ts
@@ -15,7 +15,7 @@ import { LoginInfo, cartProduct,productSpecCharacteristicValueCart } from '../..
 import { ShoppingCartServiceService } from 'src/app/services/shopping-cart-service.service';
 import { AccountServiceService } from 'src/app/services/account-service.service';
 import {EventMessageService} from "../../services/event-message.service";
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 import { Location } from '@angular/common';
 import {firstValueFrom, Subject} from "rxjs";
diff --git a/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html b/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html
index db90ae49..8d4baeeb 100644
--- a/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html
+++ b/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html
@@ -213,7 +213,7 @@ <h5 class="text-xl font-semibold tracking-tight text-primary-100 dark:text-white
                 </div>
                 }
             } @else {
-                <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+                <div role="status" data-cy="loadMoreLoading" class="w-full h-full flex justify-center align-middle mt-2">
                 <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
                     <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
diff --git a/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.ts b/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.ts
index ed79b4ce..ee889d69 100644
--- a/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.ts
+++ b/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.ts
@@ -12,7 +12,7 @@ import { Router } from '@angular/router';
 import { initFlowbite } from 'flowbite';
 import { environment } from 'src/environments/environment';
 type ProductOffering = components["schemas"]["ProductOffering"];
-import * as moment from 'moment';
+import moment from 'moment';
 import { FormControl } from '@angular/forms';
 import { LocalStorageService } from 'src/app/services/local-storage.service';
 import {faIdCard, faSort, faSwatchbook} from "@fortawesome/pro-solid-svg-icons";
@@ -93,14 +93,30 @@ export class InventoryProductsComponent implements OnInit, OnDestroy {
     })
   }
 
+  private searchInputListener = (_e: Event) => {
+    console.log(`Input updated`)
+    if (this.searchField.value == '') {
+      this.keywordFilter = undefined;
+      this.getInventory(false);
+    }
+  }
+
   ngOnInit() {
     if(this.prodId==undefined){
       this.checkFrom=false;
     }
     this.initInventory();
+    const input = document.querySelector('[type=search]')
+    if (input != undefined) {
+      input.addEventListener('input', this.searchInputListener);
+    }
   }
 
   ngOnDestroy(){
+    const input = document.querySelector('[type=search]')
+    if (input != undefined) {
+      input.removeEventListener('input', this.searchInputListener);
+    }
     this.destroy$.next();
     this.destroy$.complete();
   }
@@ -118,17 +134,6 @@ export class InventoryProductsComponent implements OnInit, OnDestroy {
       }
       this.getInventory(false);
     }
-    let input = document.querySelector('[type=search]')
-    if(input!=undefined){
-      input.addEventListener('input', e => {
-        // Easy way to get the value of the element who trigger the current `e` event
-        console.log(`Input updated`)
-        if(this.searchField.value==''){
-          this.keywordFilter=undefined;
-          this.getInventory(false);
-        }
-      });
-    }
     initFlowbite();
   }
 
@@ -208,7 +213,12 @@ export class InventoryProductsComponent implements OnInit, OnDestroy {
   }
 
   async next(){
-    await this.getInventory(true);
+    this.loading_more = true;
+    try {
+      await this.getInventory(true);
+    } finally {
+      this.loading_more = false;
+    }
   }
 
   filterInventoryByKeywords(){
diff --git a/src/app/pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component.ts b/src/app/pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component.ts
index 924aacb9..42654191 100644
--- a/src/app/pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component.ts
+++ b/src/app/pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component.ts
@@ -15,7 +15,7 @@ import { LoginInfo, cartProduct,productSpecCharacteristicValueCart } from 'src/a
 import { ProductInventoryServiceService } from 'src/app/services/product-inventory-service.service'
 import {EventMessageService} from "src/app/services/event-message.service";
 import { jwtDecode } from "jwt-decode";
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 import { Location } from '@angular/common';
 
diff --git a/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.html b/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.html
index b8588211..f7107ae3 100644
--- a/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.html
+++ b/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.html
@@ -163,7 +163,7 @@ <h6 class="mb-3 text-sm font-medium text-gray-900 dark:text-white">
                         </div>
                         }
                     } @else {
-                        <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+                        <div data-cy="loadMoreLoading" role="status" class="w-full h-full flex justify-center align-middle mt-2">
                         <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
                             <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
diff --git a/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.ts b/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.ts
index 498f5c51..f2fb04c4 100644
--- a/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.ts
+++ b/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.ts
@@ -9,7 +9,7 @@ import {EventMessageService} from "src/app/services/event-message.service";
 import {faIdCard, faSort, faSwatchbook} from "@fortawesome/pro-solid-svg-icons";
 import { initFlowbite } from 'flowbite';
 import { environment } from 'src/environments/environment';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -101,18 +101,21 @@ export class InventoryResourcesComponent implements OnInit, OnDestroy {
       "filters": this.status
     }
     
-    this.paginationService.getItemsPaginated(this.page, this.INVENTORY_LIMIT, next, this.resources, this.nextResources, options,
-      this.inventoryService.getResourceInventory.bind(this.inventoryService)).then(data => {
-      this.page_check=data.page_check;      
+    try {
+      const data = await this.paginationService.getItemsPaginated(this.page, this.INVENTORY_LIMIT, next, this.resources, this.nextResources, options,
+        this.inventoryService.getResourceInventory.bind(this.inventoryService));
+      this.page_check=data.page_check;
       this.resources=data.items;
       this.nextResources=data.nextItems;
       this.page=data.page;
+      console.log(this.resources)
+    } finally {
       this.loading=false;
       this.loading_more=false;
-      console.log(this.resources)
-    })
+    }
   }
   async next(){
+    this.loading_more = true;
     await this.getInventory(true);
   }
 
diff --git a/src/app/pages/product-inventory/inventory-services/inventory-services.component.html b/src/app/pages/product-inventory/inventory-services/inventory-services.component.html
index 7f1e242d..41bcee8f 100644
--- a/src/app/pages/product-inventory/inventory-services/inventory-services.component.html
+++ b/src/app/pages/product-inventory/inventory-services/inventory-services.component.html
@@ -162,7 +162,7 @@ <h6 class="mb-3 text-sm font-medium text-gray-900 dark:text-white">
                         </div>
                         }
                     } @else {
-                        <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+                        <div role="status" data-cy="loadMoreLoading" class="w-full h-full flex justify-center align-middle mt-2">
                         <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
                             <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
diff --git a/src/app/pages/product-inventory/inventory-services/inventory-services.component.ts b/src/app/pages/product-inventory/inventory-services/inventory-services.component.ts
index 860c425c..79e22419 100644
--- a/src/app/pages/product-inventory/inventory-services/inventory-services.component.ts
+++ b/src/app/pages/product-inventory/inventory-services/inventory-services.component.ts
@@ -9,7 +9,7 @@ import {EventMessageService} from "src/app/services/event-message.service";
 import {faIdCard, faSort, faSwatchbook} from "@fortawesome/pro-solid-svg-icons";
 import { initFlowbite } from 'flowbite';
 import { environment } from 'src/environments/environment';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -98,17 +98,20 @@ export class InventoryServicesComponent implements OnInit, OnDestroy {
       "filters": this.status
     }
     
-    this.paginationService.getItemsPaginated(this.page, this.INVENTORY_LIMIT, next, this.services, this.nextServices, options,
-      this.inventoryService.getServiceInventory.bind(this.inventoryService)).then(data => {
-      this.page_check=data.page_check;      
+    try {
+      const data = await this.paginationService.getItemsPaginated(this.page, this.INVENTORY_LIMIT, next, this.services, this.nextServices, options,
+        this.inventoryService.getServiceInventory.bind(this.inventoryService));
+      this.page_check=data.page_check;
       this.services=data.items;
       this.nextServices=data.nextItems;
       this.page=data.page;
+    } finally {
       this.loading=false;
       this.loading_more=false;
-    })
+    }
   }
   async next(){
+    this.loading_more = true;
     await this.getInventory(true);
   }
 
diff --git a/src/app/pages/product-orders/product-orders.component.ts b/src/app/pages/product-orders/product-orders.component.ts
index 3ee3e139..d949892a 100644
--- a/src/app/pages/product-orders/product-orders.component.ts
+++ b/src/app/pages/product-orders/product-orders.component.ts
@@ -14,7 +14,7 @@ type ProductOffering = components["schemas"]["ProductOffering"];
 import { phoneNumbers, countries } from 'src/app/models/country.const'
 import { initFlowbite } from 'flowbite';
 import {EventMessageService} from "src/app/services/event-message.service";
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 import {faIdCard, faSort, faSwatchbook} from "@fortawesome/pro-solid-svg-icons";
 import { TranslateModule } from '@ngx-translate/core';
diff --git a/src/app/pages/product-orders/sections/invoices-info/invoices-info.component.ts b/src/app/pages/product-orders/sections/invoices-info/invoices-info.component.ts
index e9f482a9..71f136a5 100644
--- a/src/app/pages/product-orders/sections/invoices-info/invoices-info.component.ts
+++ b/src/app/pages/product-orders/sections/invoices-info/invoices-info.component.ts
@@ -15,7 +15,7 @@ type ProductOffering = components["schemas"]["ProductOffering"];
 import { phoneNumbers, countries } from 'src/app/models/country.const'
 import { initFlowbite } from 'flowbite';
 import {EventMessageService} from "src/app/services/event-message.service";
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 import {faIdCard, faSort, faSwatchbook, faEdit, faSave} from "@fortawesome/pro-solid-svg-icons";
 import { TranslateModule } from '@ngx-translate/core';
diff --git a/src/app/pages/product-orders/sections/order-info/order-info.component.ts b/src/app/pages/product-orders/sections/order-info/order-info.component.ts
index cb24e89d..90eb8f50 100644
--- a/src/app/pages/product-orders/sections/order-info/order-info.component.ts
+++ b/src/app/pages/product-orders/sections/order-info/order-info.component.ts
@@ -14,7 +14,7 @@ type ProductOffering = components["schemas"]["ProductOffering"];
 import { phoneNumbers, countries } from 'src/app/models/country.const'
 import {Drawer, initFlowbite, Modal} from 'flowbite';
 import {EventMessageService} from "src/app/services/event-message.service";
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 import {faIdCard, faSort, faSwatchbook} from "@fortawesome/pro-solid-svg-icons";
 import { TranslateModule } from '@ngx-translate/core';
diff --git a/src/app/pages/search-catalog/search-catalog.component.ts b/src/app/pages/search-catalog/search-catalog.component.ts
index b6de1a20..ad1a6d67 100644
--- a/src/app/pages/search-catalog/search-catalog.component.ts
+++ b/src/app/pages/search-catalog/search-catalog.component.ts
@@ -12,7 +12,7 @@ import {AccountServiceService} from "src/app/services/account-service.service"
 import {Category, LoginInfo} from "../../models/interfaces";
 import { environment } from 'src/environments/environment';
 import { Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { SearchStateService } from "../../services/search-state.service"
diff --git a/src/app/pages/search/search.component.html b/src/app/pages/search/search.component.html
index 90963f4a..9ab1bd71 100644
--- a/src/app/pages/search/search.component.html
+++ b/src/app/pages/search/search.component.html
@@ -4,7 +4,8 @@
 
     <nav class="flex items-center gap-2 pt-4 pb-4 text-[16px] text-[#526179]">
       <a [routerLink]="marketplaceHomeUrl" class="hover:text-[#1f4fbf] transition-colors">Marketplace</a>
-      <svg class="h-4 w-4 text-[#526179]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+      <svg class="h-4 w-4 text-[#526179]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+        stroke-width="2.5" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
       </svg>
       <span class="font-medium text-[#1f4fbf]">{{ activeCategoryName || 'All Categories' }}</span>
@@ -13,136 +14,165 @@
     <div class="flex flex-wrap items-center justify-between gap-4 pb-4">
       <div class="relative flex items-center gap-3 min-w-0">
         <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-[#eef2fb] text-[#1f4fbf]">
-          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" />
+          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+            stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round"
+              d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" />
           </svg>
         </div>
-        <button data-cy="searchCategoryDropdown" (click)="toggleCategoryDropdown($event)" class="flex items-center gap-2 min-w-0">
+        <button data-cy="searchCategoryDropdown" (click)="toggleCategoryDropdown($event)"
+          class="flex items-center gap-2 min-w-0">
           <h1 class="text-[24px] font-bold text-[#0b1220] sm:text-[30px] truncate">
             {{ activeCategoryName || 'All Categories' }}
           </h1>
-          <svg class="h-5 w-5 text-[#526179] shrink-0 transition-transform" [ngClass]="showCategoryDropdown ? 'rotate-180' : ''" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+          <svg class="h-5 w-5 text-[#526179] shrink-0 transition-transform"
+            [ngClass]="showCategoryDropdown ? 'rotate-180' : ''" xmlns="http://www.w3.org/2000/svg" fill="none"
+            viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
           </svg>
         </button>
 
         @if (showCategoryDropdown) {
-          <div (click)="$event.stopPropagation()" class="absolute top-full left-0 mt-2 z-50 w-[420px] rounded-2xl bg-white shadow-[0_4px_12px_rgba(0,0,0,0.15)] max-h-[520px] overflow-hidden">
-            <div class="p-2 flex flex-col gap-2 max-h-[520px] overflow-y-auto overscroll-contain">
+        <div (click)="$event.stopPropagation()"
+          class="absolute top-full left-0 mt-2 z-50 w-[420px] rounded-2xl bg-white shadow-[0_4px_12px_rgba(0,0,0,0.15)] max-h-[520px] overflow-hidden">
+          <div class="p-2 flex flex-col gap-2 max-h-[520px] overflow-y-auto overscroll-contain">
             <button data-cy="searchAllCategories" (mousedown)="selectCategory(null)"
               [ngClass]="!activeCategoryName ? 'bg-[#DDE6F6]' : 'hover:bg-[#EBF0F7]'"
               class="flex w-full items-center gap-4 rounded-lg px-4 h-14 text-[16px] text-[#0b1220] transition-colors">
-              <svg class="h-6 w-6 text-[#1f4fbf] shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" />
+              <svg class="h-6 w-6 text-[#1f4fbf] shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none"
+                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" />
               </svg>
               <span class="font-medium">All Categories</span>
               @if (!activeCategoryName) {
-                <svg class="h-5 w-5 ml-auto text-[#1f4fbf]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
-                </svg>
+              <svg class="h-5 w-5 ml-auto text-[#1f4fbf]" xmlns="http://www.w3.org/2000/svg" fill="none"
+                viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+              </svg>
               }
             </button>
             @for (cat of rootCategories; track cat.id) {
-              <button data-cy="searchCategoryItem" (mousedown)="selectCategory(cat)"
-                [ngClass]="activeCategoryName === cat.name ? 'bg-[#DDE6F6]' : 'hover:bg-[#EBF0F7]'"
-                class="flex w-full items-center gap-4 rounded-lg px-4 h-14 text-[16px] text-[#0b1220] transition-colors">
-                <fa-icon [icon]="iconForCategory(cat.name)" class="text-[20px] text-[#526179] shrink-0"></fa-icon>
-                <span>{{ cat.name }}</span>
-              </button>
+            <button data-cy="searchCategoryItem" (mousedown)="selectCategory(cat)"
+              [ngClass]="activeCategoryName === cat.name ? 'bg-[#DDE6F6]' : 'hover:bg-[#EBF0F7]'"
+              class="flex w-full items-center gap-4 rounded-lg px-4 h-14 text-[16px] text-[#0b1220] transition-colors">
+              <fa-icon [icon]="iconForCategory(cat.name)" class="text-[20px] text-[#526179] shrink-0"></fa-icon>
+              <span>{{ cat.name }}</span>
+            </button>
             }
-            </div>
           </div>
+        </div>
         }
       </div>
 
       @if (searchEnabled) {
-        <form class="w-full sm:w-auto sm:min-w-[440px]" (ngSubmit)="onUnifiedSearch($event)">
-          <div class="relative">
-            @if (aiSearchEnabled) {
-              <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-                <svg class="w-4 h-4 text-purple-500" 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="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"/>
-                </svg>
-              </div>
-            }
-            <input type="search" [formControl]="searchField"
-              (keydown.enter)="onUnifiedSearch($event)"
-              [ngClass]="aiSearchEnabled ? 'ps-10 border-purple-300 focus:ring-purple-500 focus:border-purple-500' : 'border-gray-200 focus:ring-[#00ADD3] focus:border-[#00ADD3]'"
-              class="block w-full rounded-[12px] border bg-white py-3.5 pl-5 pr-14 text-[16px] text-gray-900 placeholder:text-gray-400 shadow-sm hover:shadow-md focus:shadow-none transition-shadow outline-none"
-              placeholder="{{ aiSearchEnabled ? ('DASHBOARD._ai_search_ph' | translate) : ('DASHBOARD._search_ph' | translate) }}">
-            <button type="submit" class="absolute top-0 end-0 h-full px-4 flex items-center justify-center rounded-e-[12px] text-gray-400 hover:text-[#1f4fbf] transition-colors">
-              @if (aiSearchLoading) {
-                <svg class="w-4 h-4 animate-spin" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                </svg>
-              } @else {
-                <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
-                </svg>
-              }
-              <span class="sr-only">{{ 'DASHBOARD._search' | translate }}</span>
-            </button>
+      <form class="w-full sm:w-auto sm:min-w-[440px]" (ngSubmit)="onUnifiedSearch($event)">
+        <div class="relative">
+          @if (aiSearchEnabled) {
+          <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+            <svg class="w-4 h-4 text-purple-500" 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="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
+            </svg>
           </div>
-        </form>
+          }
+          <input type="search" [formControl]="searchField" (keydown.enter)="onUnifiedSearch($event)"
+            [ngClass]="aiSearchEnabled ? 'ps-10 border-purple-300 focus:ring-purple-500 focus:border-purple-500' : 'border-gray-200 focus:ring-[#00ADD3] focus:border-[#00ADD3]'"
+            class="block w-full rounded-[12px] border bg-white py-3.5 pl-5 pr-14 text-[16px] text-gray-900 placeholder:text-gray-400 shadow-sm hover:shadow-md focus:shadow-none transition-shadow outline-none"
+            placeholder="{{ aiSearchEnabled ? ('DASHBOARD._ai_search_ph' | translate) : ('DASHBOARD._search_ph' | translate) }}">
+          <button type="submit"
+            class="absolute top-0 end-0 h-full px-4 flex items-center justify-center rounded-e-[12px] text-gray-400 hover:text-[#1f4fbf] transition-colors">
+            @if (aiSearchLoading) {
+            <svg class="w-4 h-4 animate-spin" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+              viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+              </path>
+            </svg>
+            } @else {
+            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
+            </svg>
+            }
+            <span class="sr-only">{{ 'DASHBOARD._search' | translate }}</span>
+          </button>
+        </div>
+      </form>
       }
     </div>
 
     @if (toolbarFilters.length > 0) {
-    <div class="flex items-center justify-between rounded-2xl bg-white border border-[#EBECEE] shadow-sm p-3 flex-wrap gap-y-2">
+    <div
+      class="flex items-center justify-between rounded-2xl bg-white border border-[#EBECEE] shadow-sm p-3 flex-wrap gap-y-2">
       <div class="flex items-center gap-2">
         @for (filter of toolbarFilters; track filter.key) {
-          <div class="relative shrink-0">
-            <button data-cy="searchToolbarFilter" [attr.data-filter-key]="filter.key" (click)="toggleToolbarFilterDropdown(filter, $event)"
-              [ngClass]="filter.selectedIds.length > 0 ? 'border-[#1f4fbf] bg-[#EBF0F7] text-[#1f4fbf]' : 'border-gray-200 text-[#324153] hover:border-[#1f4fbf] hover:text-[#1f4fbf]'"
-              class="flex items-center gap-2 h-10 rounded-lg border pl-4 pr-3 text-[16px] font-normal transition-colors">
-              {{ filter.label }}
-              @if (filter.selectedIds.length > 0) {
-                <span class="inline-flex h-[22px] min-w-[22px] items-center justify-center rounded-full bg-[#B6CAEC] px-1.5 text-[12px] font-semibold text-[#1f4fbf]">{{ filter.selectedIds.length }}</span>
-                <span (click)="clearToolbarFilterSelection(filter, $event)" class="inline-flex h-5 w-5 items-center justify-center rounded-full hover:bg-[#DDE6F6] cursor-pointer">
-                  <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        <div class="relative shrink-0">
+          <button data-cy="searchToolbarFilter" [attr.data-filter-key]="filter.key"
+            (click)="toggleToolbarFilterDropdown(filter, $event)"
+            [ngClass]="filter.selectedIds.length > 0 ? 'border-[#1f4fbf] bg-[#EBF0F7] text-[#1f4fbf]' : 'border-gray-200 text-[#324153] hover:border-[#1f4fbf] hover:text-[#1f4fbf]'"
+            class="flex items-center gap-2 h-10 rounded-lg border pl-4 pr-3 text-[16px] font-normal transition-colors">
+            {{ filter.label }}
+            @if (filter.selectedIds.length > 0) {
+            <span
+              class="inline-flex h-[22px] min-w-[22px] items-center justify-center rounded-full bg-[#B6CAEC] px-1.5 text-[12px] font-semibold text-[#1f4fbf]">{{
+              filter.selectedIds.length }}</span>
+            <span (click)="clearToolbarFilterSelection(filter, $event)"
+              class="inline-flex h-5 w-5 items-center justify-center rounded-full hover:bg-[#DDE6F6] cursor-pointer">
+              <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+              </svg>
+            </span>
+            } @else {
+            <svg class="h-4 w-4 transition-transform" [ngClass]="filter.open ? 'rotate-180' : ''"
+              xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
+              stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+            </svg>
+            }
+          </button>
+          @if (filter.open) {
+          <div (click)="$event.stopPropagation()"
+            class="absolute top-full left-0 mt-2 z-[60] w-[260px] rounded-xl bg-white shadow-[0_4px_12px_rgba(0,0,0,0.15)] overflow-hidden">
+            <div class="p-2 flex flex-col gap-1 max-h-[360px] overflow-y-auto">
+              @for (option of filter.options; track option.id) {
+              <button data-cy="searchToolbarFilterOption" [attr.data-option-id]="option.id"
+                (click)="toggleToolbarOption(filter, option, $event)"
+                [ngClass]="isToolbarOptionSelected(filter, option) ? 'bg-[#DDE6F6]' : 'hover:bg-[#EBF0F7]'"
+                class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-[14px] text-[#0b1220] transition-colors">
+                <div class="flex h-4 w-4 shrink-0 items-center justify-center rounded border"
+                  [ngClass]="isToolbarOptionSelected(filter, option) ? 'bg-[#1f4fbf] border-[#1f4fbf] text-white' : 'border-gray-300 bg-white'">
+                  @if (isToolbarOptionSelected(filter, option)) {
+                  <svg class="h-2.5 w-2.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                    stroke-width="3" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                   </svg>
-                </span>
-              } @else {
-                <svg class="h-4 w-4 transition-transform" [ngClass]="filter.open ? 'rotate-180' : ''" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
-                </svg>
-              }
-            </button>
-            @if (filter.open) {
-              <div (click)="$event.stopPropagation()" class="absolute top-full left-0 mt-2 z-[60] w-[260px] rounded-xl bg-white shadow-[0_4px_12px_rgba(0,0,0,0.15)] overflow-hidden">
-                <div class="p-2 flex flex-col gap-1 max-h-[360px] overflow-y-auto">
-                  @for (option of filter.options; track option.id) {
-                    <button data-cy="searchToolbarFilterOption" [attr.data-option-id]="option.id" (click)="toggleToolbarOption(filter, option, $event)"
-                      [ngClass]="isToolbarOptionSelected(filter, option) ? 'bg-[#DDE6F6]' : 'hover:bg-[#EBF0F7]'"
-                      class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-[14px] text-[#0b1220] transition-colors">
-                      <div class="flex h-4 w-4 shrink-0 items-center justify-center rounded border"
-                        [ngClass]="isToolbarOptionSelected(filter, option) ? 'bg-[#1f4fbf] border-[#1f4fbf] text-white' : 'border-gray-300 bg-white'">
-                        @if (isToolbarOptionSelected(filter, option)) {
-                          <svg class="h-2.5 w-2.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
-                          </svg>
-                        }
-                      </div>
-                      <span class="text-left">{{ option.name }}</span>
-                    </button>
                   }
                 </div>
-              </div>
-            }
+                <span class="text-left">{{ option.name }}</span>
+              </button>
+              }
+            </div>
           </div>
+          }
+        </div>
         }
       </div>
       <div class="shrink-0">
-          <button (click)="clearFilters()" class="flex items-center gap-2 text-[16px] font-normal text-[#1f4fbf] hover:text-[#163b99] transition-colors">
-            <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182" />
-            </svg>
-            Clear all
-          </button>
-        </div>
+        <button (click)="clearFilters()"
+          class="flex items-center gap-2 text-[16px] font-normal text-[#1f4fbf] hover:text-[#163b99] transition-colors">
+          <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+            stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182" />
+          </svg>
+          Clear all
+        </button>
       </div>
+    </div>
     }
 
   </div>
@@ -151,32 +181,39 @@ <h1 class="text-[24px] font-bold text-[#0b1220] sm:text-[30px] truncate">
     <div class="flex gap-6 items-stretch min-h-[calc(100vh-280px)]">
 
       @if (showDrawer) {
-        <div (click)="$event.stopPropagation();" class="fixed h-screen w-3/4 top-0 left-0 z-50 p-4 overflow-y-auto bg-white dark:bg-gray-800" tabindex="-1">
-          <button type="button" (click)="showDrawer=!showDrawer" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white">
-            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-            </svg>
-            <span class="sr-only">{{ 'DASHBOARD._close_menu' | translate }}</span>
-          </button>
-          <bae-categories-filter [catalogId]="DFT_CATALOG"></bae-categories-filter>
-        </div>
+      <div (click)="$event.stopPropagation();"
+        class="fixed h-screen w-3/4 top-0 left-0 z-50 p-4 overflow-y-auto bg-white dark:bg-gray-800" tabindex="-1">
+        <button type="button" (click)="showDrawer=!showDrawer"
+          class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white">
+          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+          </svg>
+          <span class="sr-only">{{ 'DASHBOARD._close_menu' | translate }}</span>
+        </button>
+        <bae-categories-filter [catalogId]="DFT_CATALOG"></bae-categories-filter>
+      </div>
       } @else if (activeCategoryName) {
-        <aside class="hidden md:block w-[260px] lg:w-[300px] shrink-0 self-stretch">
-          <div class="rounded-xl border border-gray-200 bg-white p-5 min-h-full">
-            <div class="mb-4 flex items-center justify-between">
-              <h3 class="text-[18px] font-semibold text-[#0b1220]">Filters</h3>
-              <button (click)="clearSubcategoryFilters()" class="text-[14px] font-medium text-[#1f4fbf] hover:text-[#163b99] transition-colors">Clear all</button>
-            </div>
-            <bae-categories-filter [showTitle]="false" [simpleMode]="true" [catalogId]="DFT_CATALOG" [selectedRootId]="activeCategoryId" [selectedRootName]="activeCategoryName"></bae-categories-filter>
+      <aside class="hidden md:block w-[260px] lg:w-[300px] shrink-0 self-stretch">
+        <div class="rounded-xl border border-gray-200 bg-white p-5 min-h-full">
+          <div class="mb-4 flex items-center justify-between">
+            <h3 class="text-[18px] font-semibold text-[#0b1220]">Filters</h3>
+            <button (click)="clearSubcategoryFilters()"
+              class="text-[14px] font-medium text-[#1f4fbf] hover:text-[#163b99] transition-colors">Clear all</button>
           </div>
-        </aside>
+          <bae-categories-filter [showTitle]="false" [simpleMode]="true" [catalogId]="DFT_CATALOG"
+            [selectedRootId]="activeCategoryId" [selectedRootName]="activeCategoryName"></bae-categories-filter>
+        </div>
+      </aside>
       }
 
       <div class="min-w-0 flex-1">
 
-        <button (click)="showDrawer=!showDrawer; $event.stopPropagation();" type="button" class="mb-4 md:hidden flex items-center gap-2 px-3 py-2 text-sm font-medium text-[#1f4fbf] border border-[#1f4fbf] rounded-lg">
+        <button (click)="showDrawer=!showDrawer; $event.stopPropagation();" type="button"
+          class="mb-4 md:hidden flex items-center gap-2 px-3 py-2 text-sm font-medium text-[#1f4fbf] border border-[#1f4fbf] rounded-lg">
           <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M1 1h15M1 7h15M1 13h15" />
           </svg>
           Categories
         </button>
@@ -185,7 +222,7 @@ <h3 class="text-[18px] font-semibold text-[#0b1220]">Filters</h3>
           <div class="flex items-center gap-4">
             <span class="text-[16px] text-[#526179]">
               @if (!loading) {
-                {{ visibleProducts.length }} results
+              {{ visibleProducts.length }} results
               }
             </span>
             <!--
@@ -224,14 +261,22 @@ <h3 class="text-[18px] font-semibold text-[#0b1220]">Filters</h3>
           </div>
           <div class="flex items-center gap-4">
             <div class="flex items-center gap-0.5 rounded-lg border border-gray-200 bg-white p-1">
-              <button (click)="viewMode='grid'" [ngClass]="viewMode==='grid' ? 'bg-[#eef2fb] text-[#1f4fbf]' : 'text-gray-400 hover:text-gray-600'" class="rounded p-2 transition-colors">
-                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" />
+              <button (click)="viewMode='grid'"
+                [ngClass]="viewMode==='grid' ? 'bg-[#eef2fb] text-[#1f4fbf]' : 'text-gray-400 hover:text-gray-600'"
+                class="rounded p-2 transition-colors">
+                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                  stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" />
                 </svg>
               </button>
-              <button (click)="viewMode='list'" [ngClass]="viewMode==='list' ? 'bg-[#eef2fb] text-[#1f4fbf]' : 'text-gray-400 hover:text-gray-600'" class="rounded p-2 transition-colors">
-                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+              <button (click)="viewMode='list'"
+                [ngClass]="viewMode==='list' ? 'bg-[#eef2fb] text-[#1f4fbf]' : 'text-gray-400 hover:text-gray-600'"
+                class="rounded p-2 transition-colors">
+                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                  stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                 </svg>
               </button>
             </div>
@@ -239,149 +284,178 @@ <h3 class="text-[18px] font-semibold text-[#0b1220]">Filters</h3>
         </div>
 
         @if (loading) {
-          <div class="flex justify-center py-16">
-            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-[#1f4fbf]" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-              <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-            </svg>
-            <span class="sr-only">Loading...</span>
-          </div>
+        <div class="flex justify-center py-16">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-[#1f4fbf]"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
         } @else {
 
-          @if (aiSearchEnabled && aiAnswer) {
-            <div class="w-full mb-4 p-4 bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-purple-900/20 dark:to-indigo-900/20 border border-purple-200 dark:border-purple-700 rounded-lg shadow-sm">
-              <div class="flex items-start gap-3">
-                <div class="flex-shrink-0 w-8 h-8 bg-purple-100 dark:bg-purple-800 rounded-full flex items-center justify-center">
-                  <svg class="w-4 h-4 text-purple-600 dark:text-purple-300" 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="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"/>
-                  </svg>
-                </div>
-                <div class="flex-1 min-w-0">
-                  <h4 class="text-sm font-semibold text-purple-800 dark:text-purple-200 mb-2">{{ 'DASHBOARD._ai_answer' | translate }}</h4>
-                  <div class="ai-answer-content text-sm text-gray-700 dark:text-gray-300 prose prose-sm dark:prose-invert max-w-none">
-                    <markdown [data]="aiAnswer"></markdown>
-                  </div>
-                </div>
-                <button type="button" (click)="aiAnswer = ''" class="flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
-                  <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-                  </svg>
-                </button>
-              </div>
+        @if (aiSearchEnabled && aiAnswer) {
+        <div
+          class="w-full mb-4 p-4 bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-purple-900/20 dark:to-indigo-900/20 border border-purple-200 dark:border-purple-700 rounded-lg shadow-sm">
+          <div class="flex items-start gap-3">
+            <div
+              class="flex-shrink-0 w-8 h-8 bg-purple-100 dark:bg-purple-800 rounded-full flex items-center justify-center">
+              <svg class="w-4 h-4 text-purple-600 dark:text-purple-300" 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="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
+              </svg>
             </div>
-          }
-
-          @if (aiSearchEnabled && aiSearchLoading) {
-            <div class="w-full mb-4 p-4 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
-              <div class="flex items-center gap-3">
-                <svg class="w-5 h-5 text-purple-500 animate-spin" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                </svg>
-                <span class="text-sm text-gray-600 dark:text-gray-400">{{ 'DASHBOARD._ai_thinking' | translate }}</span>
+            <div class="flex-1 min-w-0">
+              <h4 class="text-sm font-semibold text-purple-800 dark:text-purple-200 mb-2">{{ 'DASHBOARD._ai_answer' |
+                translate }}</h4>
+              <div
+                class="ai-answer-content text-sm text-gray-700 dark:text-gray-300 prose prose-sm dark:prose-invert max-w-none">
+                <markdown [data]="aiAnswer"></markdown>
               </div>
             </div>
-          }
-
-          @if (aiSearchEnabled && aiTotalPages > 1) {
-            <nav class="flex justify-center pb-4" aria-label="Pagination">
-              <ul class="inline-flex -space-x-px text-sm">
-                <li>
-                  <button (click)="changeAiPage(aiCurrentPage - 1)" [disabled]="aiCurrentPage === 1"
-                    class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
-                    {{ 'DASHBOARD._prev' | translate }}
-                  </button>
-                </li>
-                @for (p of [].constructor(aiTotalPages); track $index) {
-                  @if ($index + 1 === aiCurrentPage || $index + 1 === 1 || $index + 1 === aiTotalPages || ($index + 1 >= aiCurrentPage - 2 && $index + 1 <= aiCurrentPage + 2)) {
-                    <li>
-                      <button (click)="changeAiPage($index + 1)"
-                        [ngClass]="$index + 1 === aiCurrentPage ? 'text-blue-600 border-blue-300 bg-blue-50' : 'text-gray-500 bg-white border-gray-300 hover:bg-gray-100 hover:text-gray-700'"
-                        class="flex items-center justify-center px-3 h-8 leading-tight border">
-                        {{ $index + 1 }}
-                      </button>
-                    </li>
-                  } @else if ($index + 1 === aiCurrentPage - 3 || $index + 1 === aiCurrentPage + 3) {
-                    <li>
-                      <span class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300">...</span>
-                    </li>
-                  }
-                }
-                <li>
-                  <button (click)="changeAiPage(aiCurrentPage + 1)" [disabled]="aiCurrentPage === aiTotalPages"
-                    class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
-                    {{ 'DASHBOARD._next' | translate }}
-                  </button>
-                </li>
-              </ul>
-            </nav>
-          }
+            <button type="button" (click)="aiAnswer = ''"
+              class="flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+              <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                viewBox="0 0 14 14">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        }
 
-          <div [ngClass]="viewMode === 'list' ? 'flex flex-col gap-4' : (activeCategoryName ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4' : 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4')">
-            @for (prod of visibleProducts; track prod.id; let index = $index) {
-              <bae-off-card data-cy="baeCard" [productOff]="prod" [cardId]="index" [viewMode]="viewMode" class="w-full h-full"></bae-off-card>
-            } @empty {
-              <div data-cy="searchNoOffersFound" class="col-span-3 py-16 text-center text-gray-500 dark:text-gray-400">
-                {{ 'DASHBOARD._not_found' | translate }}
-              </div>
-            }
+        @if (aiSearchEnabled && aiSearchLoading) {
+        <div class="w-full mb-4 p-4 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+          <div class="flex items-center gap-3">
+            <svg class="w-5 h-5 text-purple-500 animate-spin" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+              fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+              </path>
+            </svg>
+            <span class="text-sm text-gray-600 dark:text-gray-400">{{ 'DASHBOARD._ai_thinking' | translate }}</span>
           </div>
+        </div>
+        }
 
-          @if (aiSearchEnabled && aiTotalPages > 1) {
-            <nav class="flex justify-center pt-4 pb-12" aria-label="Pagination">
-              <ul class="inline-flex -space-x-px text-sm">
-                <li>
-                  <button (click)="changeAiPage(aiCurrentPage - 1)" [disabled]="aiCurrentPage === 1"
-                    class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
-                    {{ 'DASHBOARD._prev' | translate }}
-                  </button>
-                </li>
-                @for (p of [].constructor(aiTotalPages); track $index) {
-                  @if ($index + 1 === aiCurrentPage || $index + 1 === 1 || $index + 1 === aiTotalPages || ($index + 1 >= aiCurrentPage - 2 && $index + 1 <= aiCurrentPage + 2)) {
-                    <li>
-                      <button (click)="changeAiPage($index + 1)"
-                        [ngClass]="$index + 1 === aiCurrentPage ? 'text-blue-600 border-blue-300 bg-blue-50' : 'text-gray-500 bg-white border-gray-300 hover:bg-gray-100 hover:text-gray-700'"
-                        class="flex items-center justify-center px-3 h-8 leading-tight border">
-                        {{ $index + 1 }}
-                      </button>
-                    </li>
-                  } @else if ($index + 1 === aiCurrentPage - 3 || $index + 1 === aiCurrentPage + 3) {
-                    <li>
-                      <span class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300">...</span>
-                    </li>
-                  }
-                }
-                <li>
-                  <button (click)="changeAiPage(aiCurrentPage + 1)" [disabled]="aiCurrentPage === aiTotalPages"
-                    class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
-                    {{ 'DASHBOARD._next' | translate }}
-                  </button>
-                </li>
-              </ul>
-            </nav>
+        @if (aiSearchEnabled && aiTotalPages > 1) {
+        <nav class="flex justify-center pb-4" aria-label="Pagination">
+          <ul class="inline-flex -space-x-px text-sm">
+            <li>
+              <button (click)="changeAiPage(aiCurrentPage - 1)" [disabled]="aiCurrentPage === 1"
+                class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                {{ 'DASHBOARD._prev' | translate }}
+              </button>
+            </li>
+            @for (p of [].constructor(aiTotalPages); track $index) {
+            @if ($index + 1 === aiCurrentPage || $index + 1 === 1 || $index + 1 === aiTotalPages || ($index + 1 >=
+            aiCurrentPage - 2 && $index + 1 <= aiCurrentPage + 2)) { <li>
+              <button (click)="changeAiPage($index + 1)"
+                [ngClass]="$index + 1 === aiCurrentPage ? 'text-blue-600 border-blue-300 bg-blue-50' : 'text-gray-500 bg-white border-gray-300 hover:bg-gray-100 hover:text-gray-700'"
+                class="flex items-center justify-center px-3 h-8 leading-tight border">
+                {{ $index + 1 }}
+              </button>
+              </li>
+              } @else if ($index + 1 === aiCurrentPage - 3 || $index + 1 === aiCurrentPage + 3) {
+              <li>
+                <span
+                  class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300">...</span>
+              </li>
+              }
+              }
+              <li>
+                <button (click)="changeAiPage(aiCurrentPage + 1)" [disabled]="aiCurrentPage === aiTotalPages"
+                  class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                  {{ 'DASHBOARD._next' | translate }}
+                </button>
+              </li>
+          </ul>
+        </nav>
+        }
+
+        <div
+          [ngClass]="viewMode === 'list' ? 'flex flex-col gap-4' : (activeCategoryName ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4' : 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4')">
+          @for (prod of visibleProducts; track prod.id; let index = $index) {
+          <bae-off-card data-cy="baeCard" [productOff]="prod" [cardId]="index" [viewMode]="viewMode"
+            class="w-full h-full"></bae-off-card>
+          } @empty {
+          <div data-cy="searchNoOffersFound" class="col-span-3 py-16 text-center text-gray-500 dark:text-gray-400">
+            {{ 'DASHBOARD._not_found' | translate }}
+          </div>
           }
+        </div>
 
-          @if (!aiSearchEnabled) {
-            @if (!loading_more) {
-              @if (page_check) {
-                <div class="flex pb-12 justify-center mt-6">
-                  <button data-cy="loadMore" (click)="next()" class="flex cursor-pointer items-center justify-center px-4 h-9 text-sm font-medium text-[#1f4fbf] bg-white border border-[#1f4fbf] rounded-lg hover:bg-[#eef2fb] transition-colors">
-                    Load more
-                    <svg class="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>
-                  </button>
-                </div>
+        @if (aiSearchEnabled && aiTotalPages > 1) {
+        <nav class="flex justify-center pt-4 pb-12" aria-label="Pagination">
+          <ul class="inline-flex -space-x-px text-sm">
+            <li>
+              <button (click)="changeAiPage(aiCurrentPage - 1)" [disabled]="aiCurrentPage === 1"
+                class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                {{ 'DASHBOARD._prev' | translate }}
+              </button>
+            </li>
+            @for (p of [].constructor(aiTotalPages); track $index) {
+            @if ($index + 1 === aiCurrentPage || $index + 1 === 1 || $index + 1 === aiTotalPages || ($index + 1 >=
+            aiCurrentPage - 2 && $index + 1 <= aiCurrentPage + 2)) { <li>
+              <button (click)="changeAiPage($index + 1)"
+                [ngClass]="$index + 1 === aiCurrentPage ? 'text-blue-600 border-blue-300 bg-blue-50' : 'text-gray-500 bg-white border-gray-300 hover:bg-gray-100 hover:text-gray-700'"
+                class="flex items-center justify-center px-3 h-8 leading-tight border">
+                {{ $index + 1 }}
+              </button>
+              </li>
+              } @else if ($index + 1 === aiCurrentPage - 3 || $index + 1 === aiCurrentPage + 3) {
+              <li>
+                <span
+                  class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300">...</span>
+              </li>
               }
-            } @else {
-              <div class="flex justify-center mt-6">
-                <svg aria-hidden="true" class="w-8 h-8 text-gray-200 animate-spin fill-[#1f4fbf]" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                  <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                </svg>
-              </div>
-            }
-          }
+              }
+              <li>
+                <button (click)="changeAiPage(aiCurrentPage + 1)" [disabled]="aiCurrentPage === aiTotalPages"
+                  class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                  {{ 'DASHBOARD._next' | translate }}
+                </button>
+              </li>
+          </ul>
+        </nav>
+        }
+
+        @if (!aiSearchEnabled) {
+        @if (!loading_more) {
+        @if (page_check) {
+        <div class="flex pb-12 justify-center mt-6">
+          <button data-cy="loadMore" (click)="next()"
+            class="flex cursor-pointer items-center justify-center px-4 h-9 text-sm font-medium text-[#1f4fbf] bg-white border border-[#1f4fbf] rounded-lg hover:bg-[#eef2fb] transition-colors">
+            Load more
+            <svg class="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>
+          </button>
+        </div>
+        }
+        } @else {
+        <div class="flex justify-center mt-6" data-cy="loadMoreLoading">
+          <svg aria-hidden="true" class="w-8 h-8 text-gray-200 animate-spin fill-[#1f4fbf]" viewBox="0 0 100 101"
+            fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+        </div>
+        }
+        }
 
         }
       </div>
@@ -391,10 +465,8 @@ <h4 class="text-sm font-semibold text-purple-800 dark:text-purple-200 mb-2">{{ '
 </div>
 
 @if (feedback) {
-  <feedback-modal
-    rateMessage="Based on your recent experience, how likely are you to recommend DOME to a colleague or a partner?"
-    writeMessage="How can we improve DOME?"
-    type="campaign"
-    class="fixed inset-0 flex items-center justify-center z-40">
-  </feedback-modal>
+<feedback-modal
+  rateMessage="Based on your recent experience, how likely are you to recommend DOME to a colleague or a partner?"
+  writeMessage="How can we improve DOME?" type="campaign" class="fixed inset-0 flex items-center justify-center z-40">
+</feedback-modal>
 }
diff --git a/src/app/pages/search/search.component.ts b/src/app/pages/search/search.component.ts
index b4f71df4..2555988a 100644
--- a/src/app/pages/search/search.component.ts
+++ b/src/app/pages/search/search.component.ts
@@ -1,28 +1,26 @@
-import { Component, OnInit, ChangeDetectorRef, SimpleChanges, OnChanges, HostListener, AfterViewInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {CategoriesFilterComponent} from "../../shared/categories-filter/categories-filter.component";
-import {components} from "../../models/product-catalog";
-type ProductOffering = components["schemas"]["ProductOffering"];
-import { ApiServiceService } from 'src/app/services/product-service.service';
-import { PaginationService } from 'src/app/services/pagination.service'
-import {LocalStorageService} from "../../services/local-storage.service";
-import {Category} from "../../models/interfaces";
-import {EventMessageService} from "../../services/event-message.service";
-import { SearchStateService } from "../../services/search-state.service"
-import { LoginServiceService } from "src/app/services/login-service.service"
-import { environment } from 'src/environments/environment';
-import { ActivatedRoute, NavigationStart } from '@angular/router';
+import { ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { Router } from '@angular/router';
-import { LoginInfo, FeedbackInfo } from 'src/app/models/interfaces';
-import * as moment from 'moment';
+
+import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
+import moment from 'moment';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { FeedbackInfo, LoginInfo } from 'src/app/models/interfaces';
+import { LoginServiceService } from "src/app/services/login-service.service";
+import { PaginationService } from 'src/app/services/pagination.service';
+import { ApiServiceService } from 'src/app/services/product-service.service';
+import { environment } from 'src/environments/environment';
+import { Category } from "../../models/interfaces";
+import { components } from "../../models/product-catalog";
+import { EventMessageService } from "../../services/event-message.service";
+import { LocalStorageService } from "../../services/local-storage.service";
+import { SearchStateService } from "../../services/search-state.service";
+type ProductOffering = components["schemas"]["ProductOffering"];
 
-import { AiSearchService } from 'src/app/services/ai-search.service';
-import { PriceServiceService } from 'src/app/services/price-service.service';
 import { availableFilters, searchCategoriesConfig } from 'src/app/data/availableFilters';
 import { iconForCategory } from 'src/app/data/categoryIcons';
+import { AiSearchService } from 'src/app/services/ai-search.service';
+import { PriceServiceService } from 'src/app/services/price-service.service';
 import { ThemeService } from 'src/app/services/theme.service';
 
 type ToolbarFilter = {
@@ -42,21 +40,21 @@ type ToolbarFilter = {
 })
 export class SearchComponent implements OnInit, OnDestroy {
 
-  products: ProductOffering[]=[];
-  nextProducts: ProductOffering[]=[];
+  products: ProductOffering[] = [];
+  nextProducts: ProductOffering[] = [];
   loading: boolean = false;
   loading_more: boolean = false;
-  page_check:boolean = true;
-  page: number=0;
+  page_check: boolean = true;
+  page: number = 0;
   PRODUCT_LIMIT: number = environment.PRODUCT_LIMIT;
   DFT_CATALOG: String = environment.DFT_CATALOG_ID;
-  showDrawer:boolean=false;
+  showDrawer: boolean = false;
   searchEnabled = environment.SEARCH_ENABLED;
-  keywords:any=undefined;
+  keywords: any = undefined;
   searchField = new FormControl();
   showPanel = false;
-  feedback:boolean=false;
-  providerThemeName=environment.providerThemeName;
+  feedback: boolean = false;
+  providerThemeName = environment.providerThemeName;
   private navigatingToDetail = false;
   private destroy$ = new Subject<void>();
 
@@ -117,31 +115,31 @@ export class SearchComponent implements OnInit, OnDestroy {
     private themeService: ThemeService) {
     this.initToolbarFilters();
     this.eventMessage.messages$
-    .pipe(takeUntil(this.destroy$))
-    .subscribe(async ev => {
-      if (ev.type === 'AddedFilter' || ev.type === 'RemovedFilter') {
-        this.syncSelectionsFromStorage();
-        this.checkPanel();
-      }
-      if (ev.type === 'FiltersCommitted') {
-        this.syncSelectionsFromStorage();
-        // Use AI search if enabled, otherwise use standard search
-        if (this.aiSearchEnabled) {
-          await this.runInitialAiSearch();
-        } else {
-          await this.getProducts(false);
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(async ev => {
+        if (ev.type === 'AddedFilter' || ev.type === 'RemovedFilter') {
+          this.syncSelectionsFromStorage();
+          this.checkPanel();
         }
-        this.checkPanel();
-      }
-    })
+        if (ev.type === 'FiltersCommitted') {
+          this.syncSelectionsFromStorage();
+          // Use AI search if enabled, otherwise use standard search
+          if (this.aiSearchEnabled) {
+            await this.runInitialAiSearch();
+          } else {
+            await this.getProducts(false);
+          }
+          this.checkPanel();
+        }
+      })
     this.eventMessage.messages$
-    .pipe(takeUntil(this.destroy$))
-    .subscribe(ev => {
-      if(ev.type === 'CloseFeedback') {
-        this.feedback = false;
-      }
-    })
-  } 
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(ev => {
+        if (ev.type === 'CloseFeedback') {
+          this.feedback = false;
+        }
+      })
+  }
 
   async ngOnInit() {
     this.themeService.currentTheme$
@@ -151,26 +149,26 @@ export class SearchComponent implements OnInit, OnDestroy {
       });
 
     this.router.events
-    .pipe(takeUntil(this.destroy$))
-    .subscribe(event => {
-      if (event instanceof NavigationStart) {
-        // Detecta navegación al detalle del producto
-        if (event.url.startsWith('/search/urn:ngsi-ld:product-offering')) {
-          this.navigatingToDetail = true;
-        } else {
-          this.navigatingToDetail = false;
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(event => {
+        if (event instanceof NavigationStart) {
+          // Detecta navegación al detalle del producto
+          if (event.url.startsWith('/search/urn:ngsi-ld:product-offering')) {
+            this.navigatingToDetail = true;
+          } else {
+            this.navigatingToDetail = false;
+          }
         }
-      }
-    });
-    
-    this.products=[];
-    this.nextProducts=[];
+      });
+
+    this.products = [];
+    this.nextProducts = [];
     /*await this.api.slaCheck().then(data => {
       console.log(data)
     })*/
     this.checkPanel();
     this.loadRootCategories();
-    if(this.route.snapshot.paramMap.get('keywords')){
+    if (this.route.snapshot.paramMap.get('keywords')) {
       this.keywords = this.route.snapshot.paramMap.get('keywords');
       this.searchField.setValue(this.keywords);
     }
@@ -216,10 +214,10 @@ export class SearchComponent implements OnInit, OnDestroy {
     })*/
 
     let input = document.querySelector('[type=search]')
-    if(input!=undefined){
+    if (input != undefined) {
       input.addEventListener('input', async e => {
-        if(this.searchField.value==''){
-          this.keywords=undefined;
+        if (this.searchField.value == '') {
+          this.keywords = undefined;
           this.updateQueryParams(this.keywords)
           // Clear AI search state and restore categories
           this.aiAnswer = '';
@@ -237,40 +235,40 @@ export class SearchComponent implements OnInit, OnDestroy {
       //this.localStorage.setObject('feedback', {});
 
       // The user is logged in
-      if ((JSON.stringify(userInfo) != '{}' && (((userInfo.expire - moment().unix())-4) > 0))) {
-        if(environment.feedbackCampaign){
+      if ((JSON.stringify(userInfo) != '{}' && (((userInfo.expire - moment().unix()) - 4) > 0))) {
+        if (environment.feedbackCampaign) {
           let feedbackInfo = this.localStorage.getObject('feedback') as FeedbackInfo;
           console.log('---------------------- feedbackInfo')
           console.log(feedbackInfo)
-    
-          if(JSON.stringify(feedbackInfo) === '{}'){
+
+          if (JSON.stringify(feedbackInfo) === '{}') {
             let wantsFeedback = {
               "expire": environment?.feedbackCampaignExpiration ?? moment().add(1, 'week').unix(),
             }
-            this.localStorage.setObject('feedback',wantsFeedback);
-            this.feedback=true;
+            this.localStorage.setObject('feedback', wantsFeedback);
+            this.feedback = true;
           } else {
             if ("expire" in feedbackInfo) {
               let expiration = feedbackInfo?.expire ?? 0
-              if(((expiration - moment().unix())-4) < 0 && ((environment.feedbackCampaignExpiration - moment().unix())-4) > 0){
-                let wantsFeedback : FeedbackInfo = {
+              if (((expiration - moment().unix()) - 4) < 0 && ((environment.feedbackCampaignExpiration - moment().unix()) - 4) > 0) {
+                let wantsFeedback: FeedbackInfo = {
                   "expire": environment?.feedbackCampaignExpiration,
                 }
-                if("approval" in feedbackInfo){
-                  wantsFeedback.approval=feedbackInfo.approval
+                if ("approval" in feedbackInfo) {
+                  wantsFeedback.approval = feedbackInfo.approval
                 }
-                this.localStorage.setObject('feedback',wantsFeedback)
+                this.localStorage.setObject('feedback', wantsFeedback)
               }
             } else {
-              let wantsFeedback : FeedbackInfo = {
+              let wantsFeedback: FeedbackInfo = {
                 "expire": environment?.feedbackCampaignExpiration,
               }
-              if("approval" in feedbackInfo){
-                wantsFeedback.approval=feedbackInfo.approval
+              if ("approval" in feedbackInfo) {
+                wantsFeedback.approval = feedbackInfo.approval
               }
-              this.localStorage.setObject('feedback',wantsFeedback)
+              this.localStorage.setObject('feedback', wantsFeedback)
             }
-    
+
             if ("approval" in feedbackInfo) {
               /*if (feedbackInfo.approval === true) {
                 this.feedback = true;
@@ -279,11 +277,11 @@ export class SearchComponent implements OnInit, OnDestroy {
               }*/
               this.feedback = false;
             } else {
-              this.feedback = true; 
+              this.feedback = true;
             }
-            
+
           }
-          
+
         }
       }
     });
@@ -291,7 +289,7 @@ export class SearchComponent implements OnInit, OnDestroy {
 
   @HostListener('document:click')
   onClick() {
-    if(this.showDrawer){
+    if (this.showDrawer) {
       this.showDrawer = false;
     }
     const anyOpen = this.showCategoryDropdown || this.showSortDropdown || this.toolbarFilters.some(filter => filter.open);
@@ -472,7 +470,7 @@ export class SearchComponent implements OnInit, OnDestroy {
       .map(option => option.name);
   }
 
-  ngOnDestroy(){
+  ngOnDestroy() {
     this.productsRequestVersion = 0;
 
     if (this.navigatingToDetail) {
@@ -480,7 +478,7 @@ export class SearchComponent implements OnInit, OnDestroy {
     }
 
     let storedFilters = this.localStorage.getObject('selected_categories') as Category[] || [];
-    for(let i=0;i<storedFilters.length;i++){
+    for (let i = 0; i < storedFilters.length; i++) {
       this.localStorage.removeCategoryFilter(storedFilters[i]);
       this.eventMessage.emitRemovedFilter(storedFilters[i]);
     }
@@ -492,11 +490,11 @@ export class SearchComponent implements OnInit, OnDestroy {
     this.destroy$.complete();
   }
 
-  async getProducts(next:boolean){
+  async getProducts(next: boolean) {
     const requestVersion = ++this.productsRequestVersion;
     const filters = this.localStorage.getObject('selected_categories') as Category[] || [];
-    if(next==false){
-      this.loading=true;
+    if (next == false) {
+      this.loading = true;
     }
     if (!next) {
       this.state.clear();
@@ -526,8 +524,12 @@ export class SearchComponent implements OnInit, OnDestroy {
         return;
       }
 
+      // On "load more", data.items is already enriched: it's this.products merged with the
+      // previously-prefetched (and already-enriched) this.nextProducts. Only the freshly
+      // fetched data.nextItems (the next prefetch page) is still raw and needs enriching -
+      // re-enriching data.items too would redo work for every item ever loaded on each click.
       const [products, nextProducts] = await Promise.all([
-        this.api.getProductsDetails(data.items),
+        next ? Promise.resolve(data.items) : this.api.getProductsDetails(data.items),
         this.api.getProductsDetails(data.nextItems)
       ]);
 
@@ -558,21 +560,22 @@ export class SearchComponent implements OnInit, OnDestroy {
     }
   }
 
-  async next(){
+  async next() {
+    this.loading_more = true;
     await this.getProducts(true);
   }
 
   async filterSearch(event: any) {
     event.preventDefault()
-    if(this.searchField.value!='' && this.searchField.value != null){
+    if (this.searchField.value != '' && this.searchField.value != null) {
       console.log('FILTER KEYWORDS')
-      this.keywords=this.searchField.value;
+      this.keywords = this.searchField.value;
       this.updateQueryParams(this.keywords)
       //let filters = this.localStorage.getObject('selected_categories') as Category[] || [] ;
       await this.getProducts(false);
     } else {
       console.log('EMPTY  FILTER KEYWORDS')
-      this.keywords=undefined;
+      this.keywords = undefined;
       this.updateQueryParams(this.keywords)
       //let filters = this.localStorage.getObject('selected_categories') as Category[] || [] ;
       await this.getProducts(false);
@@ -590,13 +593,13 @@ export class SearchComponent implements OnInit, OnDestroy {
       // Navigate without the param
       this.router.navigate(['/search'], { replaceUrl: true });
     }
-  }  
+  }
 
   checkPanel() {
-    const filters = this.localStorage.getObject('selected_categories') as Category[] || [] ;
+    const filters = this.localStorage.getObject('selected_categories') as Category[] || [];
     const oldState = this.showPanel;
     this.showPanel = filters.length > 0;
-    if(this.showPanel != oldState) {
+    if (this.showPanel != oldState) {
       this.eventMessage.emitFilterShown(this.showPanel);
       this.localStorage.setItem('is_filter_panel_shown', this.showPanel.toString())
     }
diff --git a/src/app/pages/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.ts b/src/app/pages/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.ts
index 679607a4..b4da2538 100644
--- a/src/app/pages/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.ts
@@ -5,7 +5,7 @@ import {LocalStorageService} from "src/app/services/local-storage.service";
 import {EventMessageService} from "src/app/services/event-message.service";
 import { LoginInfo } from 'src/app/models/interfaces';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import { noWhitespaceValidator } from 'src/app/validators/validators';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
diff --git a/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.html b/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.html
index dcba43f5..f592db65 100644
--- a/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.html
@@ -184,7 +184,7 @@ <h6 class="mb-3 text-sm font-medium text-gray-900 dark:text-white">
         </div>
         }
     } @else {
-        <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+        <div role="status" data-cy="loadMoreLoading" class="w-full h-full flex justify-center align-middle mt-2">
         <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
             <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
diff --git a/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.ts b/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.ts
index e594df35..c6157099 100644
--- a/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.ts
@@ -55,11 +55,27 @@ export class SellerCatalogsComponent implements OnInit, OnDestroy {
     })
   }
 
+  private searchInputListener = (_e: Event) => {
+    console.log(`Input updated`)
+    if (this.searchField.value == '') {
+      this.filter = undefined;
+      this.getCatalogs(false);
+    }
+  }
+
   ngOnInit() {
     this.initCatalogs();
+    const input = document.querySelector('[type=search]')
+    if (input != undefined) {
+      input.addEventListener('input', this.searchInputListener);
+    }
   }
 
   ngOnDestroy(){
+    const input = document.querySelector('[type=search]')
+    if (input != undefined) {
+      input.removeEventListener('input', this.searchInputListener);
+    }
     this.destroy$.next();
     this.destroy$.complete();
   }
@@ -85,17 +101,6 @@ export class SellerCatalogsComponent implements OnInit, OnDestroy {
     }
 
     this.getCatalogs(false);
-    let input = document.querySelector('[type=search]')
-    if(input!=undefined){
-      input.addEventListener('input', e => {
-        // Easy way to get the value of the element who trigger the current `e` event
-        console.log(`Input updated`)
-        if(this.searchField.value==''){
-          this.filter=undefined;
-          this.getCatalogs(false);
-        }
-      });
-    }
     initFlowbite();
   }
 
@@ -115,18 +120,21 @@ export class SellerCatalogsComponent implements OnInit, OnDestroy {
       "partyId": this.partyId
     }
 
-    this.paginationService.getItemsPaginated(this.page, this.CATALOG_LIMIT, next, this.catalogs, this.nextCatalogs, options,
-      this.api.getCatalogsByUser.bind(this.api)).then(data => {
-      this.page_check=data.page_check;      
+    try {
+      const data = await this.paginationService.getItemsPaginated(this.page, this.CATALOG_LIMIT, next, this.catalogs, this.nextCatalogs, options,
+        this.api.getCatalogsByUser.bind(this.api));
+      this.page_check=data.page_check;
       this.catalogs=data.items;
       this.nextCatalogs=data.nextItems;
       this.page=data.page;
+    } finally {
       this.loading=false;
       this.loading_more=false;
-    })
+    }
   }
 
   async next(){
+    this.loading_more = true;
     await this.getCatalogs(true);
   }
 
diff --git a/src/app/pages/seller-offerings/offerings/seller-catalogs/update-catalog/update-catalog.component.ts b/src/app/pages/seller-offerings/offerings/seller-catalogs/update-catalog/update-catalog.component.ts
index 2e8ba3fb..037ec171 100644
--- a/src/app/pages/seller-offerings/offerings/seller-catalogs/update-catalog/update-catalog.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-catalogs/update-catalog/update-catalog.component.ts
@@ -5,7 +5,7 @@ import {LocalStorageService} from "src/app/services/local-storage.service";
 import {EventMessageService} from "src/app/services/event-message.service";
 import { LoginInfo } from 'src/app/models/interfaces';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import { noWhitespaceValidator } from 'src/app/validators/validators';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
diff --git a/src/app/pages/seller-offerings/offerings/seller-offer/create-offer/create-offer.component.ts b/src/app/pages/seller-offerings/offerings/seller-offer/create-offer/create-offer.component.ts
index 7c65e293..c0f7780b 100644
--- a/src/app/pages/seller-offerings/offerings/seller-offer/create-offer/create-offer.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-offer/create-offer/create-offer.component.ts
@@ -13,7 +13,7 @@ import { PaginationService } from 'src/app/services/pagination.service';
 import { LoginInfo } from 'src/app/models/interfaces';
 import { initFlowbite } from 'flowbite';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import { v4 as uuidv4 } from 'uuid';
 import { currencies } from 'currencies.json';
 import { certifications } from 'src/app/models/certification-standards.const';
diff --git a/src/app/pages/seller-offerings/offerings/seller-offer/new-price-plan/new-price-plan.component.ts b/src/app/pages/seller-offerings/offerings/seller-offer/new-price-plan/new-price-plan.component.ts
index 28c4ab67..38a7547d 100644
--- a/src/app/pages/seller-offerings/offerings/seller-offer/new-price-plan/new-price-plan.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-offer/new-price-plan/new-price-plan.component.ts
@@ -13,7 +13,7 @@ import { PaginationService } from 'src/app/services/pagination.service';
 import { LoginInfo } from 'src/app/models/interfaces';
 import { initFlowbite } from 'flowbite';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import { v4 as uuidv4 } from 'uuid';
 import { currencies } from 'currencies.json';
 import { certifications } from 'src/app/models/certification-standards.const';
diff --git a/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.html b/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.html
index 34d5c0d3..9f393679 100644
--- a/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.html
@@ -230,7 +230,7 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
             </div>
             }
         } @else {
-            <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+            <div data-cy="loadMoreLoading" role="status" class="w-full h-full flex justify-center align-middle mt-2">
             <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
                 <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
diff --git a/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.ts b/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.ts
index 58aa8b31..ae3639f0 100644
--- a/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.ts
@@ -60,11 +60,27 @@ export class SellerOfferComponent implements OnInit, OnDestroy {
     })
   }
 
+  private searchInputListener = (_e: Event) => {
+    console.log(`Input updated`)
+    if (this.searchField.value == '') {
+      this.filter = undefined;
+      this.getOffers(false);
+    }
+  }
+
   ngOnInit() {
     this.initOffers();
+    const input = document.querySelector('[type=search]')
+    if (input != undefined) {
+      input.addEventListener('input', this.searchInputListener);
+    }
   }
 
   ngOnDestroy(){
+    const input = document.querySelector('[type=search]')
+    if (input != undefined) {
+      input.removeEventListener('input', this.searchInputListener);
+    }
     this.destroy$.next();
     this.destroy$.complete();
   }
@@ -81,17 +97,6 @@ export class SellerOfferComponent implements OnInit, OnDestroy {
     this.offers=[];
     this.nextOffers=[];
     this.getOffers(false);
-    let input = document.querySelector('[type=search]')
-    if(input!=undefined){
-      input.addEventListener('input', e => {
-        // Easy way to get the value of the element who trigger the current `e` event
-        console.log(`Input updated`)
-        if(this.searchField.value==''){
-          this.filter=undefined;
-          this.getOffers(false);
-        }
-      });
-    }
     initFlowbite();
   }
 
@@ -123,24 +128,27 @@ export class SellerOfferComponent implements OnInit, OnDestroy {
       "isBundle": this.isBundle
     }
     
-    this.paginationService.getItemsPaginated(this.page, this.PROD_SPEC_LIMIT, next, this.offers,this.nextOffers, options,
-      this.api.getProductOfferByOwner.bind(this.api)).then(async data => {
-      this.page_check=data.page_check;      
+    try {
+      const data = await this.paginationService.getItemsPaginated(this.page, this.PROD_SPEC_LIMIT, next, this.offers,this.nextOffers, options,
+        this.api.getProductOfferByOwner.bind(this.api));
+      this.page_check=data.page_check;
       this.offers=data.items;
       this.nextOffers=data.nextItems;
       this.page=data.page;
-      this.loading=false;
-      this.loading_more=false;
 
       this.customMap={}
       for (const offer of this.offers) {
         this.customMap[offer.id] = await this.priceService.isCustomOffering(offer);
       }
-    })
+    } finally {
+      this.loading=false;
+      this.loading_more=false;
+    }
 
   }
 
   async next(){
+    this.loading_more = true;
     await this.getOffers(true);
   }
 
diff --git a/src/app/pages/seller-offerings/offerings/seller-offer/update-offer/update-offer.component.ts b/src/app/pages/seller-offerings/offerings/seller-offer/update-offer/update-offer.component.ts
index 5fe4e25c..b58d4a07 100644
--- a/src/app/pages/seller-offerings/offerings/seller-offer/update-offer/update-offer.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-offer/update-offer/update-offer.component.ts
@@ -13,7 +13,7 @@ import { PaginationService } from 'src/app/services/pagination.service';
 import { LoginInfo, ProductOfferingPrice_DTO } from 'src/app/models/interfaces';
 import { initFlowbite } from 'flowbite';
 import { FormGroup, FormControl, Validators, AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import { v4 as uuidv4 } from 'uuid';
 import { currencies } from 'currencies.json';
 import { lastValueFrom, Subject } from 'rxjs';
diff --git a/src/app/pages/seller-offerings/offerings/seller-offer/update-price-plan/update-price-plan.component.ts b/src/app/pages/seller-offerings/offerings/seller-offer/update-price-plan/update-price-plan.component.ts
index 27cf8586..6de7cae1 100644
--- a/src/app/pages/seller-offerings/offerings/seller-offer/update-price-plan/update-price-plan.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-offer/update-price-plan/update-price-plan.component.ts
@@ -13,7 +13,7 @@ import { PaginationService } from 'src/app/services/pagination.service';
 import { LoginInfo } from 'src/app/models/interfaces';
 import { initFlowbite } from 'flowbite';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import { v4 as uuidv4 } from 'uuid';
 import { currencies } from 'currencies.json';
 import { certifications } from 'src/app/models/certification-standards.const';
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 e274d01d..57c82295 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
@@ -1,80 +1,103 @@
-
 <div>
-    <!-- Breadcrumb -->
-    <div class="pb-4">
-        <nav class="flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-secondary-50 dark:bg-secondary-100 dark:border-gray-800 dark:text-white" aria-label="Breadcrumb">
-            <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
-            <li class="inline-flex items-center">
-                <button (click)="goBack()" class="inline-flex items-center text-sm font-medium text-gray-500 dark:text-white hover:text-primary-100 dark:hover:text-primary-50">
-                <svg class="w-3 h-3 mr-2 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 10">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 1 1 5l4 4m6-8L7 5l4 4"/>
-                </svg>
-                {{ 'CREATE_PROD_SPEC._back' | translate }}
-                </button>
-            </li>
-            <li aria-current="page">
-                <div class="flex items-center">
-                <svg class="rtl:rotate-180  w-3 h-3 mx-1 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
-                </svg>
-                <span class="ms-1 text-sm font-medium text-gray-500 dark:text-white md:ms-2 ">{{ 'CREATE_PROD_SPEC._create' | translate }}</span>
-                </div>
-            </li>
-            </ol>
-        </nav>
-    </div>
+  <!-- Breadcrumb -->
+  <div class="pb-4">
+    <nav
+      class="flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-secondary-50 dark:bg-secondary-100 dark:border-gray-800 dark:text-white"
+      aria-label="Breadcrumb">
+      <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+        <li class="inline-flex items-center">
+          <button (click)="goBack()"
+            class="inline-flex items-center text-sm font-medium text-gray-500 dark:text-white hover:text-primary-100 dark:hover:text-primary-50">
+            <svg class="w-3 h-3 mr-2 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+              viewBox="0 0 12 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
+                d="M5 1 1 5l4 4m6-8L7 5l4 4" />
+            </svg>
+            {{ 'CREATE_PROD_SPEC._back' | translate }}
+          </button>
+        </li>
+        <li aria-current="page">
+          <div class="flex items-center">
+            <svg class="rtl:rotate-180  w-3 h-3 mx-1 text-gray-400 dark:text-white" aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="m1 9 4-4-4-4" />
+            </svg>
+            <span class="ms-1 text-sm font-medium text-gray-500 dark:text-white md:ms-2 ">{{ 'CREATE_PROD_SPEC._create'
+              | translate }}</span>
+          </div>
+        </li>
+      </ol>
+    </nav>
+  </div>
   <!-- End Breadcrumb -->
 
 
-    <div class="bg-secondary-50 dark:bg-secondary-100 border border-secondary-50 dark:border-gray-800 mt-4 p-8 rounded-lg">
-        <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
-                  (click)="handleStepClick(i)"
-                  [class.cursor-not-allowed]="!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"
-                      [class.bg-primary-100]="currentStep === i"
-                      [class.text-white]="currentStep === i">
-                  {{ i + 1 }}
-                </span>
-                <span class="md:block mt-2 hidden">{{ step }}</span>
-              </li>
-            }
-          </ol>
-        <div class="md:pb-8">
-            <div>
-                @if (currentStep === 0) {
-                    <form class="m-4 md:grid md:grid-cols-2 gap-4" [formGroup]="generalForm">
-                        <div>
-                            <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_name' | translate }}</label>
-                            <input data-cy="inputName" formControlName="name" type="text" id="prod-name" maxLength="100"
-                            [ngClass]="generalForm.get('name')?.invalid == true && generalForm.value.name!='' ? '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" />
-                            <label for="prod-version" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_version' | translate }}</label>
-                            <input data-cy="inputVersion" formControlName="version" type="text" id="prod-version"
-                            [ngClass]="generalForm.get('version')?.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" />
+  <div
+    class="bg-secondary-50 dark:bg-secondary-100 border border-secondary-50 dark:border-gray-800 mt-4 p-8 rounded-lg">
+    <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 (click)="handleStepClick(i)" [class.cursor-not-allowed]="!canNavigate(i)" [class.opacity-50]="!canNavigate(i)"
+        [class.text-primary-100]="currentStepIdx === 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"
+          [class.bg-primary-100]="currentStepIdx === i" [class.text-white]="currentStepIdx === i">
+          {{ i + 1 }}
+        </span>
+        <span class="md:block mt-2 hidden">{{ step.label }}</span>
+      </li>
+      }
+    </ol>
+    <div class="md:pb-8">
+      <div>
+        @if (currentStep.id === 'general') {
+        <form class="m-4 md:grid md:grid-cols-2 gap-4" [formGroup]="generalForm">
+          <div>
+            <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_name' |
+              translate }}</label>
+            <input data-cy="inputName" formControlName="name" type="text" id="prod-name" maxLength="100"
+              [ngClass]="generalForm.get('name')?.invalid == true && generalForm.value.name!='' ? '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" />
+            <label for="prod-version" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_version' |
+              translate }}</label>
+            <input data-cy="inputVersion" formControlName="version" type="text" id="prod-version"
+              [ngClass]="generalForm.get('version')?.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" />
 
-                        </div>
-                        <div>
-                            <label for="prod-brand" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_brand' | translate }}</label>
-                            <input data-cy="inputBrand" formControlName="brand" type="text" id="prod-brand"
-                            [ngClass]="generalForm.get('brand')?.invalid == true && generalForm.value.brand!='' ? '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" />
-                            <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>
+          <div>
+            <label for="prod-brand" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_brand' |
+              translate }}</label>
+            <input data-cy="inputBrand" formControlName="brand" type="text" id="prod-brand"
+              [ngClass]="generalForm.get('brand')?.invalid == true && generalForm.value.brand!='' ? '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" />
+            <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>
+          </div>
 
-                    </form>
-                    <!--<div class="flex w-full justify-items-end justify-end">
+          @if(dspEnable) {
+            <div class="col-span-2 flex items-center h-fit">
+              <label for="dsp-compatible" class="font-bold text-lg dark:text-white">DSP Compatible</label>
+              <label class="inline-flex items-center me-5 cursor-pointer ml-4">
+                <input type="checkbox" id="dsp-compatible" formControlName="dspCompatible" 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>
+          }
+          <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>
+
+
+        </form>
+        <!--<div class="flex w-full justify-items-end justify-end">
                         <button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)" [disabled]="!generalForm.valid" [ngClass]="!generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end align-end 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._next' | 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 14 10">
@@ -82,120 +105,151 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white pb-4">{{ 'CR
                             </svg>
                         </button>
                     </div> -->
-                }
-                @if (currentStep === 1 && BUNDLE_ENABLED) {
-                    <div class="col-span-2 flex align-items-middle h-fit m-4">
-                        <label for="prod-brand" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._is_bundled' | translate }}</label>
-                        <label class="inline-flex items-center me-5 cursor-pointer ml-4">
-                            <input type="checkbox" (change)="toggleBundleCheck()" [checked]="bundleChecked" 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(bundleChecked){
-                        @if(loadingBundle){
-                            <div role="status" class="w-full h-fit flex justify-center align-middle">
-                                <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                                </svg>
-                                <span class="sr-only">Loading...</span>
-                            </div>
-                        } @else {
-                            @if(prodSpecs.length==0){
-                                <div class="flex justify-center w-full m-4">
-                                    <div class="flex 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">
-                                        <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                                        </svg>
-                                        <div>
-                                            {{ 'OFFERINGS._no_prod' | translate }}
-                                        </div>
-                                    </div>
-                                </div>
-                            }@else{
-                            <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>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                        </th>
-                                        <th scope="col" class="hidden md:table-cell px-6 py-3">
-                                            {{ 'CREATE_PROD_SPEC._status' | translate }}
-                                        </th>
-                                        <th scope="col" class="hidden md:table-cell px-6 py-3">
-                                            {{ 'CREATE_PROD_SPEC._type' | translate }}
-                                        </th>
-                                        <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                            {{ 'CREATE_PROD_SPEC._last_update' | translate }}
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'CREATE_PROD_SPEC._select' | translate }}
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    @for (prod of prodSpecs; track prod.id) {
-                                        <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td [ngClass]="{
+        }
+        @if (currentStep.id === 'bundle') {
+        <div class="col-span-2 flex align-items-middle h-fit m-4">
+          <label for="prod-brand" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._is_bundled' |
+            translate }}</label>
+          <label class="inline-flex items-center me-5 cursor-pointer ml-4">
+            <input type="checkbox" (change)="toggleBundleCheck()" [checked]="bundleChecked" 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(bundleChecked){
+        @if(loadingBundle){
+        <div role="status" class="w-full h-fit flex justify-center align-middle">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
+        } @else {
+        @if(prodSpecs.length==0){
+        <div class="flex justify-center w-full m-4">
+          <div
+            class="flex 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">
+            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+            </svg>
+            <div>
+              {{ 'OFFERINGS._no_prod' | translate }}
+            </div>
+          </div>
+        </div>
+        }@else{
+        <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>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="hidden md:table-cell px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._status' | translate }}
+                </th>
+                <th scope="col" class="hidden md:table-cell px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._type' | translate }}
+                </th>
+                <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._last_update' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._select' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (prod of prodSpecs; track prod.id) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                                 'break-all': hasLongWord(prod.name, 20),
                                                 'break-words': !hasLongWord(prod.name, 20)
                                                 }" class="px-6 py-4 text-wrap break-words">
-                                                {{prod.name}}
-                                            </td>
-                                            <td class="hidden md:table-cell px-6 py-4">
-                                                @if(prod.lifecycleStatus == 'Active'){
-                                                    <span class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{prod.lifecycleStatus}}</span>
-                                                } @else if(prod.lifecycleStatus == 'Launched') {
-                                                    <span class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{prod.lifecycleStatus}}</span>
-                                                } @else if(prod.lifecycleStatus == 'Retired') {
-                                                    <span class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{prod.lifecycleStatus}}</span>
-                                                } @else if(prod.lifecycleStatus == 'Obsolete') {
-                                                    <span class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{prod.lifecycleStatus}}</span>
-                                                }
-                                            </td>
-                                            <td class="hidden md:table-cell px-6 py-4">
-                                                @if(prod.isBundle == false){
-                                                    <span class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{ 'CREATE_PROD_SPEC._simple' | translate }}</span>
-                                                } @else {
-                                                    <span class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{ 'CREATE_PROD_SPEC._bundle' | translate }}</span>
-                                                }
-                                            </td>
-                                            <td class="hidden lg:table-cell px-6 py-4">
-                                                {{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">
-                                            </td>
-                                        </tr>
-                                    }
-                                </tbody>
-                            </table>
-                            </div>
-                            }
-                        }
-                        @if (!loadingBundle_more) {
-                            @if (bundlePageCheck) {
-                            <div class="flex pt-6 pb-2 justify-center align-middle">
-                                <button (click)="nextBundle()" class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
-                                    {{ 'CREATE_PROD_SPEC._load_more' | translate }}
-                                <svg class="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>
-                                </button>
-                            </div>
-                            }
-                        } @else {
-                            <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
-                            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                            </svg>
-                            <span class="sr-only">Loading...</span>
-                            </div>
-                        }
-                    }
-                    <!--<div class="flex w-full justify-items-end justify-end ml-4">
+                  {{prod.name}}
+                </td>
+                <td class="hidden md:table-cell px-6 py-4">
+                  @if(prod.lifecycleStatus == 'Active'){
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{prod.lifecycleStatus}}</span>
+                  } @else if(prod.lifecycleStatus == 'Launched') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{prod.lifecycleStatus}}</span>
+                  } @else if(prod.lifecycleStatus == 'Retired') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{prod.lifecycleStatus}}</span>
+                  } @else if(prod.lifecycleStatus == 'Obsolete') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{prod.lifecycleStatus}}</span>
+                  }
+                </td>
+                <td class="hidden md:table-cell px-6 py-4">
+                  @if(prod.isBundle == false){
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{
+                    'CREATE_PROD_SPEC._simple' | translate }}</span>
+                  } @else {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{
+                    'CREATE_PROD_SPEC._bundle' | translate }}</span>
+                  }
+                </td>
+                <td class="hidden lg:table-cell px-6 py-4">
+                  {{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">
+                </td>
+              </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        }
+        }
+        @if (!loadingBundle_more) {
+        @if (bundlePageCheck) {
+        <div class="flex pt-6 pb-2 justify-center align-middle">
+          <button (click)="nextBundle()"
+            class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
+            {{ 'CREATE_PROD_SPEC._load_more' | translate }}
+            <svg class="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>
+          </button>
+        </div>
+        }
+        } @else {
+        <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
+        }
+        }
+        <!--<div class="flex w-full justify-items-end justify-end ml-4">
                         <button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)" [disabled]="prodSpecsBundle.length<2 && bundleChecked" [ngClass]="(prodSpecsBundle.length<2 && bundleChecked) ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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._next' | 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 14 10">
@@ -203,138 +257,167 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white pb-4">{{ 'CR
                             </svg>
                         </button>
                     </div>-->
-                }
-                @if (isCurrentStep('compliance')) {
-                    <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
-                        {{ 'CREATE_PROD_SPEC._self_attestation' | translate }}
-                    </h3>
-                    <div class="flex items-center justify-between ml-4 border border-1 p-2 rounded-lg shadow bg-white dark:bg-secondary-200 shadow-md">
+        }
+        @if (currentStep.id === 'compliance') {
+        <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
+          {{ 'CREATE_PROD_SPEC._self_attestation' | translate }}
+        </h3>
+        <div
+          class="flex items-center justify-between ml-4 border border-1 p-2 rounded-lg shadow bg-white dark:bg-secondary-200 shadow-md">
 
-                        <p class="mb-2 text-gray-800 dark:text-gray-200">
-                            {{ selfAtt ? selfAtt.productSpecCharacteristicValue[0].value : 'Upload your self attestation document' }}
-                        </p>
+          <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">
-                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v9m-5 0H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2M8 9l4-5 4 5m1 8h.01"/>
-                                </svg>
-                            </button>
-                            @if(selfAtt){
-                                <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>
-                            }
-                        </div>
+          <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">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M12 5v9m-5 0H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2M8 9l4-5 4 5m1 8h.01" />
+              </svg>
+            </button>
+            @if(selfAtt){
+            <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>
+            }
+          </div>
 
-                    </div>
-                    @if(availableISOS.length>0){
-                        <button id="dropdownButtonISO" (click)="buttonISOClicked=!buttonISOClicked" data-dropdown-toggle="dropdownISO" class="text-white w-full m-4 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 justify-between" type="button">
-                            {{ 'CREATE_PROD_SPEC._add_comp' | translate }}
-                            <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
-                            </svg>
-                        </button>
-                        @if(buttonISOClicked){
-                            <!-- Dropdown menu -->
-                            <div id="dropdownISO" class="z-10 w-full ml-4 mr-4 bg-secondary-50 dark:bg-secondary-300 divide-y divide-gray-100 rounded-lg shadow">
-                                <ul class="p-3 space-y-3 text-sm text-gray-700" aria-labelledby="dropdownButtonISO">
-                                    @for (iso of availableISOS; track iso;) {
-                                        <li>
-                                            <div class="flex items-center justify-between">
-                                                <label for="checkbox-item-1" class="ms-2 text-sm" [ngClass]="iso.domesupported == true ? 'text-primary-100 font-bold' : 'text-gray-900 dark:text-white font-medium'">
-                                                    {{iso.name}}
-                                                </label>
-                                                <button data-cy="productSpecCharAddISO" (click)="addISO(iso)" type="button" class="text-white 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="18" height="18" 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>
-                                                </button>
-                                            </div>
-                                        </li>
-                                    }
-                                </ul>
-                            </div>
-                        }
-                    }
+        </div>
+        @if(availableISOS.length>0){
+        <button id="dropdownButtonISO" (click)="buttonISOClicked=!buttonISOClicked" data-dropdown-toggle="dropdownISO"
+          class="text-white w-full m-4 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 justify-between"
+          type="button">
+          {{ 'CREATE_PROD_SPEC._add_comp' | translate }}
+          <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+            viewBox="0 0 10 6">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="m1 1 4 4 4-4" />
+          </svg>
+        </button>
+        @if(buttonISOClicked){
+        <!-- Dropdown menu -->
+        <div id="dropdownISO"
+          class="z-10 w-full ml-4 mr-4 bg-secondary-50 dark:bg-secondary-300 divide-y divide-gray-100 rounded-lg shadow">
+          <ul class="p-3 space-y-3 text-sm text-gray-700" aria-labelledby="dropdownButtonISO">
+            @for (iso of availableISOS; track iso;) {
+            <li>
+              <div class="flex items-center justify-between">
+                <label for="checkbox-item-1" class="ms-2 text-sm"
+                  [ngClass]="iso.domesupported == true ? 'text-primary-100 font-bold' : 'text-gray-900 dark:text-white font-medium'">
+                  {{iso.name}}
+                </label>
+                <button data-cy="productSpecCharAddISO" (click)="addISO(iso)" type="button"
+                  class="text-white 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="18"
+                    height="18" 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>
+                </button>
+              </div>
+            </li>
+            }
+          </ul>
+        </div>
+        }
+        }
 
-                    <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>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'CREATE_PROD_SPEC._value' | translate }}
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'CREATE_PROD_SPEC._actions' | translate }}
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                @for (sel of selectedISOS; track sel.name; let idx = $index) {
-                                    <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td [ngClass]="{
+        <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>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._value' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._actions' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (sel of selectedISOS; track sel.name; let idx = $index) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                             'break-all': hasLongWord(sel.name, 20),
                                             'break-words': !hasLongWord(sel.name, 20)
                                             }" class="px-6 py-4 text-wrap break-words">
-                                            {{normalizeName(sel.name)}}
-                                        </td>
-                                        <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"
+                  {{normalizeName(sel.name)}}
+                </td>
+                <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" /> -->
-                                        </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">
-                                                <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="M12 5v9m-5 0H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2M8 9l4-5 4 5m1 8h.01"/>
-                                                </svg>
-                                            </button>
-                                            <button data-cy="productSpecDeleteCompliance" (click)="removeISO(sel)" 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>
-                                        </td>
-                                    </tr>
-                                } @empty {
-                                    <div class="flex justify-center w-full m-4 dark:bg-secondary-300">
-                                        <div class="flex 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">
-                                          <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                                          </svg>
-                                          <span class="sr-only">Info</span>
-                                          <div>
-                                              {{ 'CREATE_PROD_SPEC._no_comp_profile' | translate }}
-                                          </div>
-                                        </div>
-                                    </div>
-                                }
-                            </tbody>
-                        </table>
-                    </div>
-                    <!-- Wrapper for button & tooltip -->
-                    <div class="relative flex w-full justify-end 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
+                </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">
+                    <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="M12 5v9m-5 0H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2M8 9l4-5 4 5m1 8h.01" />
+                    </svg>
+                  </button>
+                  <button data-cy="productSpecDeleteCompliance" (click)="removeISO(sel)" 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>
+                </td>
+              </tr>
+              } @empty {
+              <div class="flex justify-center w-full m-4 dark:bg-secondary-300">
+                <div
+                  class="flex 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">
+                  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+                  </svg>
+                  <span class="sr-only">Info</span>
+                  <div>
+                    {{ 'CREATE_PROD_SPEC._no_comp_profile' | translate }}
+                  </div>
+                </div>
+              </div>
+              }
+            </tbody>
+          </table>
+        </div>
+        <!-- Wrapper for button & tooltip -->
+        <div class="relative flex w-full justify-end 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
                                     opacity-0 invisible group-hover:opacity-100 group-hover:visible">
-                                    {{ 'CREATE_PROD_SPEC._file_check' | translate }}
-                                <!-- 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>
+              {{ 'CREATE_PROD_SPEC._file_check' | translate }}
+              <!-- 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>
 
-                            <!-- Button -->
-                            <!--<button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)"
+            <!-- Button -->
+            <!--<button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)"
                                     [disabled]="checkValidISOS()"
                                     [ngClass]="checkValidISOS() ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary-50'"
                                     class="flex text-white bg-primary-100 focus:ring-4 focus:outline-none
@@ -345,414 +428,497 @@ <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(additionalISOS.length>0){
-                        <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">
-                        <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>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._value' | translate }}
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._actions' | translate }}
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                @for (cert of additionalISOS; track cert.name; let idx = $index) {
-                                    <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td [ngClass]="{
+          </div>
+        </div>
+        @if(additionalISOS.length>0){
+        <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">
+          <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>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._value' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._actions' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (cert of additionalISOS; track cert.name; let idx = $index) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                             'break-all': hasLongWord(cert.name, 20),
                                             'break-words': !hasLongWord(cert.name, 20)
                                             }" class="px-6 py-4 text-wrap break-words">
-                                            {{normalizeName(cert.name)}}
-                                        </td>
-                                        <td class="px-6 py-4 text-wrap break-all">
-                                            {{cert.url}}
-                                        </td>
-                                        <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>
-                                        </td>
-                                    </tr>
-                                }
-                            </tbody>
-                        </table>
-                        </div>
-                    }
-                    @if(showCert==false){
-                        <div class="flex w-full justify-items-center justify-center">
-                            <button type="button" (click)="showCert=!showCert" 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">
-                                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>
-                            </button>
-                        </div>
-                    } @else {
-                        <div class="m-4 w-full">
-                            <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="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" />
-                                </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)">
-                                        <ng-template class="w-full" ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-                                            <div class="w-full flex flex-col justify-items-center justify-center">
-                                                <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>
-                                                <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>
-                                                </div>
-                                            </div>
-                                        </ng-template>
-                                    </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>
-                                        <label class="text-wrap break-all">
-                                            {{isoToCreate}}
-                                        </label>
-                                        <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>
-                                        </button>
-                                    </div>
-                                }
-                                </div>
-                                <div class="flex w-full justify-items-center justify-center mt-4">
-                                    <button type="button" (click)="saveAdditionalCert()"
-                                    [disabled]="!certFileName.valid || isoToCreate == ''" [ngClass]="!certFileName.valid || isoToCreate == '' ? 'opacity-50' : 'hover:bg-primary-50'"
-                                    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">
-                                        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>
-                                    </button>
-                                    <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
-                                    </button>
-                                </div>
-                        </div>
-                    }
+                  {{normalizeName(cert.name)}}
+                </td>
+                <td class="px-6 py-4 text-wrap break-all">
+                  {{cert.url}}
+                </td>
+                <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>
+                </td>
+              </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        }
+        @if(showCert==false){
+        <div class="flex w-full justify-items-center justify-center">
+          <button type="button" (click)="showCert=!showCert"
+            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">
+            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>
+          </button>
+        </div>
+        } @else {
+        <div class="m-4 w-full">
+          <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="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" />
+            </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)">
+              <ng-template class="w-full" ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+                <div class="w-full flex flex-col justify-items-center justify-center">
+                  <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>
+                  <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>
+                  </div>
+                </div>
+              </ng-template>
+            </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>
+              <label class="text-wrap break-all">
+                {{isoToCreate}}
+              </label>
+              <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>
+              </button>
+            </div>
+            }
+          </div>
+          <div class="flex w-full justify-items-center justify-center mt-4">
+            <button type="button" (click)="saveAdditionalCert()" [disabled]="!certFileName.valid || isoToCreate == ''"
+              [ngClass]="!certFileName.valid || isoToCreate == '' ? 'opacity-50' : 'hover:bg-primary-50'"
+              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">
+              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>
+            </button>
+            <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
+            </button>
+          </div>
+        </div>
+        }
 
-                }
-                @if (isCurrentStep('characteristics') || isCurrentStep('dataspace')) {
-                    @if (getFilteredCharacteristicsForCurrentStep().length === 0){
-                        <div class="flex justify-center w-full m-4">
-                          <div class="flex 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">
-                            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                              <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                            </svg>
-                            <span class="sr-only">Info</span>
-                            <div>
-                                {{ 'CREATE_PROD_SPEC._no_chars' | translate }}
-                            </div>
-                          </div>
-                        </div>
-                    } @else {
-                        <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>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                        </th>
-                                        <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                            {{ 'CREATE_PROD_SPEC._product_description' | translate }}
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'CREATE_PROD_SPEC._values' | translate }}
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'CREATE_PROD_SPEC._actions' | translate }}
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    @for (prod of getFilteredCharacteristicsForCurrentStep(); track prod.id) {
-                                        <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td [ngClass]="{
+        }
+        @if (currentStep.id === 'characteristics' || currentStep.id === 'dataspace') {
+        @if (getFilteredCharacteristicsForCurrentStep().length === 0){
+        <div class="flex justify-center w-full m-4">
+          <div
+            class="flex 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">
+            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+            </svg>
+            <span class="sr-only">Info</span>
+            <div>
+              {{ 'CREATE_PROD_SPEC._no_chars' | translate }}
+            </div>
+          </div>
+        </div>
+        } @else {
+        <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>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._product_description' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._values' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._actions' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (prod of getFilteredCharacteristicsForCurrentStep(); track prod.id) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                                 'break-all': hasLongWord(prod.name, 20),
                                                 'break-words': !hasLongWord(prod.name, 20)
                                                 }" class="px-6 py-4 max-w-1/6 text-wrap break-words">
-                                                {{prod.name}}
-                                            </td>
-                                            <td [ngClass]="{
+                  {{prod.name}}
+                </td>
+                <td [ngClass]="{
                                                 '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}}
-                                            </td>
-                                            <td class="px-6 py-4 text-wrap break-all">
-                                                @for (char of prod.productSpecCharacteristicValue; track char; let last=$last) {
-                                                    @if(char.value || char.value == 0){
-                                                        @if(isJsonCharacteristicType(prod.valueType)){
-                                                            @if(!last){
-                                                                {{getValuePreview(char.value)}},
-                                                            } @else {
-                                                                {{getValuePreview(char.value)}}
-                                                            }
-                                                        } @else if(char.unitOfMeasure){
-                                                            @if(!last){
-                                                                {{char.value}} (<i>{{char?.unitOfMeasure}}</i>),
-                                                            } @else {
-                                                                {{char.value}} (<i>{{char?.unitOfMeasure}}</i>)
-                                                            }
-                                                        } @else {
-                                                            @if(!last){
-                                                                {{char.value}},
-                                                            } @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>
-                                            </td>
-                                        </tr>
-                                    }
-                                </tbody>
-                            </table>
-                        </div>
-                    }
-                    @if(!showCreateChar){
-                        <div class="flex w-full justify-items-center justify-center">
-                            <button data-cy="btnNewCharacteristic" type="button" (click)="toggleCreateCharacteristicForm()" 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">
-                                {{ isDataspaceConfigurationStep() ? 'Add Dataspace Configuration' : ('CREATE_PROD_SPEC._new_char' | 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>
-                            </button>
-                        </div>
-                    } @else {
-                        <form class="m-4 grid grid-cols-2 gap-4" [formGroup]="charsForm">
-                            <div>
-                                <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_name' | translate }}</label>
-                                <input data-cy="charName" formControlName="name" type="text" id="prod-name" maxLength="100"
-                                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>
-                            <div>
-                                <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._type' | translate }}</label>
-                                <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">
-                                    @if(isDataspaceConfigurationStep()){
-                                        <option value="endpointUrl">Endpoint URL</option>
-                                        <option value="upstreamAddress">Upstream Address</option>
-                                        <option value="endpointDescription">Endpoint Description</option>
-                                        <option value="targetSpecification">Target Specification</option>
-                                        <option value="serviceConfiguration">Service Configuration</option>
-                                        <option value="credentialsConfiguration">Credentials Configuration</option>
-                                        <option value="authorizationPolicy">Authorization Policy</option>
-                                    } @else {
-                                        <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">
-                                <label for="description" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_description' | translate }}</label>
-                                <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>
-                            @if(!isDataspaceConfigurationStep() && charTypeSelected !== 'boolean' && !isJsonCharacteristicType(charTypeSelected)){
-                                <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 && 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(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=""
-                                                    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>
-                                                </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>
-                                                </button>
-                                            </div>
-                                        }
-                                    } @else {
-                                        @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=""
-                                                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-full focus:ring-blue-500 focus:ring-2">
-                                                    @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 if (isJsonCharacteristicType(charTypeSelected)) {
-                                                        <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-white text-wrap break-all">{{getValuePreview(char.value)}}</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>
-                                                </button>
-                                            </div>
-                                        }
-                                    }
-                                </div>
-                            }
-                            <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(isTextCharacteristicType(charTypeSelected)){
-                                <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" />
-                                    <button data-cy="btnAddStringValue" (click)="addCharValue()" [disabled]="!stringValue" [ngClass]="!stringValue ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button" class="text-white w-fit h-full 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-6 h-6 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="M5 12h14m-7 7V5"/>
-                                        </svg>
-                                    </button>
-                                </div>
-                            } @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">
-                                            {{ 'CREATE_PROD_SPEC._value' | translate }}
-                                        </span>
-                                        <input data-cy="charNumberValue" type="number" pattern="[0-9]*" id="value" [(ngModel)]="numberValue"
-                                        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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    </div>
-                                    <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">
-                                            {{ 'CREATE_PROD_SPEC._unit' | translate }}
-                                        </span>
-                                        <input data-cy="charNumberUnit" type="text" id="value" [(ngModel)]="numberUnit"
-                                        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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    </div>
+                  {{prod.description}}
+                </td>
+                <td class="px-6 py-4 text-wrap break-all">
+                  @for (char of prod.productSpecCharacteristicValue; track char; let last=$last) {
+                  @if(char.value || char.value == 0){
+                  @if(isJsonCharacteristicType(prod.valueType)){
+                  @if(!last){
+                  {{getValuePreview(char.value)}},
+                  } @else {
+                  {{getValuePreview(char.value)}}
+                  }
+                  } @else if(char.unitOfMeasure){
+                  @if(!last){
+                  {{char.value}} (<i>{{char?.unitOfMeasure}}</i>),
+                  } @else {
+                  {{char.value}} (<i>{{char?.unitOfMeasure}}</i>)
+                  }
+                  } @else {
+                  @if(!last){
+                  {{char.value}},
+                  } @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>
+                </td>
+              </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        }
+        @if(!showCreateChar){
+        <div class="flex w-full justify-items-center justify-center">
+          <button data-cy="btnNewCharacteristic" type="button" (click)="toggleCreateCharacteristicForm()"
+            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">
+            {{ isDataspaceConfigurationStep() ? 'Add Dataspace Configuration' : ('CREATE_PROD_SPEC._new_char' |
+            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>
+          </button>
+        </div>
+        } @else {
+        <form class="m-4 grid grid-cols-2 gap-4" [formGroup]="charsForm">
+          <div>
+            <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_name' |
+              translate }}</label>
+            <input data-cy="charName" formControlName="name" type="text" id="prod-name" maxLength="100"
+              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>
+          <div>
+            <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._type' | translate }}</label>
+            <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">
+              @if(isDataspaceConfigurationStep()){
+              <option value="credentialsConfiguration">Credentials Configuration</option>
+              <option value="authorizationPolicy">Authorization Policy</option>
+              } @else {
+              <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">
+            <label for="description" class="font-bold text-lg dark:text-white">{{
+              'CREATE_PROD_SPEC._product_description' | translate }}</label>
+            <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>
+          @if(!isDataspaceConfigurationStep() && charTypeSelected !== 'boolean' &&
+          !isJsonCharacteristicType(charTypeSelected)){
+          <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 && 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(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=""
+                  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>
+              </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>
+              </button>
+            </div>
+            }
+            } @else {
+            @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=""
+                  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-full focus:ring-blue-500 focus:ring-2">
+                @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 if (isJsonCharacteristicType(charTypeSelected)) {
+                <label for="disabled-checked-checkbox"
+                  class="ms-2 text-sm font-medium text-gray-700 dark:text-white text-wrap break-all">{{getValuePreview(char.value)}}</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>
+              </button>
+            </div>
+            }
+            }
+          </div>
+          }
+          <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(isTextCharacteristicType(charTypeSelected)){
+          <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" />
+            <button data-cy="btnAddStringValue" (click)="addCharValue()" [disabled]="!stringValue"
+              [ngClass]="!stringValue ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button"
+              class="text-white w-fit h-full 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-6 h-6 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="M5 12h14m-7 7V5" />
+              </svg>
+            </button>
+          </div>
+          } @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">
+                {{ 'CREATE_PROD_SPEC._value' | translate }}
+              </span>
+              <input data-cy="charNumberValue" type="number" pattern="[0-9]*" id="value" [(ngModel)]="numberValue"
+                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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+            </div>
+            <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">
+                {{ 'CREATE_PROD_SPEC._unit' | translate }}
+              </span>
+              <input data-cy="charNumberUnit" type="text" id="value" [(ngModel)]="numberUnit"
+                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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+            </div>
 
-                                    <button data-cy="btnAddNumberValue" (click)="addCharValue()" [disabled]="(numberValue === '' || numberValue === null || numberValue === undefined) || !numberUnit" [ngClass]="(numberValue === '' || numberValue === null || numberValue === undefined) || !numberUnit ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button" class="text-white w-fit h-full 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-6 h-6 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="M5 12h14m-7 7V5"/>
-                                        </svg>
-                                    </button>
-                                </div>
-                            } @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">
-                                            {{ 'CREATE_PROD_SPEC._from' | translate }}
-                                        </span>
-                                        <input data-cy="charRangeFrom" type="number" pattern="[0-9]*" id="value" [(ngModel)]="fromValue"
-                                        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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    </div>
-                                    <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">
-                                            {{ 'CREATE_PROD_SPEC._to' | translate }}
-                                        </span>
-                                        <input data-cy="charRangeTo" type="number" pattern="[0-9]*" id="value" [(ngModel)]="toValue"
-                                        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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    </div>
-                                    <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">
-                                            {{ 'CREATE_PROD_SPEC._unit' | translate }}
-                                        </span>
-                                        <input data-cy="charRangeUnit" type="text" id="value" [(ngModel)]="rangeUnit"
-                                        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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    </div>
-                                    <button data-cy="btnAddRangeValue" (click)="addCharValue()" [disabled]="(fromValue === '' || fromValue === null || fromValue === undefined) || (toValue === '' || toValue === null || toValue === undefined) || !rangeUnit" [ngClass]="(fromValue === '' || fromValue === null || fromValue === undefined) || (toValue === '' || toValue === null || toValue === undefined) || !rangeUnit ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'"  type="button" class="text-white w-fit h-full 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-6 h-6 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="M5 12h14m-7 7V5"/>
-                                        </svg>
-                                    </button>
-                                </div>
-                            } @else if (isJsonCharacteristicType(charTypeSelected)){
-                                @if(creatingChars.length === 0){
-                                    <div class="flex flex-col w-full">
-                                        <label for="json-value" class="font-bold text-sm dark:text-white mb-2">{{ 'CREATE_PROD_SPEC._json_value' | translate }}</label>
-                                        <textarea id="json-value" [(ngModel)]="jsonValue" rows="10"
-                                        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 font-mono"
-                                        placeholder='{"example": "Enter your JSON here"}'></textarea>
-                                        <button (click)="addCharValue()" [disabled]="!jsonValue" [ngClass]="!jsonValue ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button" class="text-white w-fit bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center inline-flex items-center">
-                                            <svg class="w-4 h-4 mr-2 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="M5 12h14m-7 7V5"/>
-                                            </svg>
-                                            {{ 'CREATE_PROD_SPEC._add_json' | translate }}
-                                        </button>
-                                    </div>
-                                }
-                            }
-                            <div class="flex w-full justify-items-center justify-center mt-4">
-                                <button data-cy="btnSaveCharacteristic" type="button" (click)="saveChar()"  [disabled]="!charsForm.valid || creatingChars.length==0" [ngClass]="!charsForm.valid || creatingChars.length==0 ? 'opacity-50' : 'hover:bg-primary-50'" 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._save_char' | 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>
-                                </button>
-                            </div>
+            <button data-cy="btnAddNumberValue" (click)="addCharValue()"
+              [disabled]="(numberValue === '' || numberValue === null || numberValue === undefined) || !numberUnit"
+              [ngClass]="(numberValue === '' || numberValue === null || numberValue === undefined) || !numberUnit ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'"
+              type="button"
+              class="text-white w-fit h-full 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-6 h-6 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="M5 12h14m-7 7V5" />
+              </svg>
+            </button>
+          </div>
+          } @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">
+                {{ 'CREATE_PROD_SPEC._from' | translate }}
+              </span>
+              <input data-cy="charRangeFrom" type="number" pattern="[0-9]*" id="value" [(ngModel)]="fromValue"
+                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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+            </div>
+            <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">
+                {{ 'CREATE_PROD_SPEC._to' | translate }}
+              </span>
+              <input data-cy="charRangeTo" type="number" pattern="[0-9]*" id="value" [(ngModel)]="toValue"
+                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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+            </div>
+            <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">
+                {{ 'CREATE_PROD_SPEC._unit' | translate }}
+              </span>
+              <input data-cy="charRangeUnit" type="text" id="value" [(ngModel)]="rangeUnit"
+                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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+            </div>
+            <button data-cy="btnAddRangeValue" (click)="addCharValue()"
+              [disabled]="(fromValue === '' || fromValue === null || fromValue === undefined) || (toValue === '' || toValue === null || toValue === undefined) || !rangeUnit"
+              [ngClass]="(fromValue === '' || fromValue === null || fromValue === undefined) || (toValue === '' || toValue === null || toValue === undefined) || !rangeUnit ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'"
+              type="button"
+              class="text-white w-fit h-full 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-6 h-6 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="M5 12h14m-7 7V5" />
+              </svg>
+            </button>
+          </div>
+          } @else if (isJsonCharacteristicType(charTypeSelected)){
+          @if(creatingChars.length === 0){
+          <div class="flex flex-col w-full">
+            <label for="json-value" class="font-bold text-sm dark:text-white mb-2">{{ 'CREATE_PROD_SPEC._json_value' |
+              translate }}</label>
+            <textarea id="json-value" [(ngModel)]="jsonValue" rows="10"
+              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 font-mono"
+              placeholder='{"example": "Enter your JSON here"}'></textarea>
+            <button (click)="addCharValue()" [disabled]="!jsonValue"
+              [ngClass]="!jsonValue ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button"
+              class="text-white w-fit bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center inline-flex items-center">
+              <svg class="w-4 h-4 mr-2 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="M5 12h14m-7 7V5" />
+              </svg>
+              {{ 'CREATE_PROD_SPEC._add_json' | translate }}
+            </button>
+          </div>
+          }
+          }
+          <div class="flex w-full justify-items-center justify-center mt-4">
+            <button data-cy="btnSaveCharacteristic" type="button" (click)="saveChar()"
+              [disabled]="!charsForm.valid || creatingChars.length==0"
+              [ngClass]="!charsForm.valid || creatingChars.length==0 ? 'opacity-50' : 'hover:bg-primary-50'"
+              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._save_char' | 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>
+            </button>
+          </div>
 
-                        </div>
-                    }
-                    <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
+        </div>
+        }
+        <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
                         <button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)" class="flex text-white justify-end 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._next' | 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 14 10">
@@ -760,102 +926,127 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                             </svg>
                         </button>
                     </div>-->
-                }
+        }
 
-                @if (isCurrentStep('resource')) {
-                    @if(loadingResourceSpec){
-                        <div role="status" class="w-full h-fit flex justify-center align-middle">
-                            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                            </svg>
-                            <span class="sr-only">Loading...</span>
-                        </div>
-                    } @else {
-                        @if(resourceSpecs.length==0){
-                            <div class="flex justify-center w-full m-4">
-                                <div class="flex 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">
-                                    <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                                    </svg>
-                                    <div>
-                                        {{ 'OFFERINGS._no_res' | translate }}
-                                    </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">
-                            <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
-                                <tr>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                    </th>
-                                    <th scope="col" class="hidden md:table-cell px-6 py-3">
-                                        {{ 'CREATE_PROD_SPEC._status' | translate }}
-                                    </th>
-                                    <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                        {{ 'CREATE_PROD_SPEC._last_update' | translate }}
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'CREATE_PROD_SPEC._select' | translate }}
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                @for (res of resourceSpecs; track res.id) {
-                                    <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td [ngClass]="{
+        @if (currentStep.id === 'resource') {
+        @if(loadingResourceSpec){
+        <div role="status" class="w-full h-fit flex justify-center align-middle">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
+        } @else {
+        @if(resourceSpecs.length==0){
+        <div class="flex justify-center w-full m-4">
+          <div
+            class="flex 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">
+            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+            </svg>
+            <div>
+              {{ 'OFFERINGS._no_res' | translate }}
+            </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">
+            <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
+              <tr>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="hidden md:table-cell px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._status' | translate }}
+                </th>
+                <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._last_update' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._select' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (res of resourceSpecs; track res.id) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                             'break-all': hasLongWord(res.name, 20),
                                             'break-words': !hasLongWord(res.name, 20)
                                             }" class="px-6 py-4 text-wrap break-words">
-                                            {{res.name}}
-                                        </td>
-                                        <td class="hidden md:table-cell px-6 py-4">
-                                            @if(res.lifecycleStatus == 'Active'){
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{res.lifecycleStatus}}</span>
-                                            } @else if(res.lifecycleStatus == 'Launched') {
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{res.lifecycleStatus}}</span>
-                                            } @else if(res.lifecycleStatus == 'Retired') {
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{res.lifecycleStatus}}</span>
-                                            } @else if(res.lifecycleStatus == 'Obsolete') {
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{res.lifecycleStatus}}</span>
-                                            }
-                                        </td>
-                                        <td class="hidden lg:table-cell px-6 py-4">
-                                            {{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">
-                                        </td>
-                                    </tr>
-                                }
-                            </tbody>
-                        </table>
-                        </div>
-                        }
-                        }
-                        @if (!loadingResourceSpec_more) {
-                            @if (resourceSpecPageCheck) {
-                            <div class="flex pt-6 pb-2 justify-center align-middle">
-                                <button data-cy="loadMore" (click)="nextRes()" class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
-                                {{ 'CREATE_PROD_SPEC._load_more' | translate }}
-                                <svg class="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>
-                                </button>
-                            </div>
-                            }
-                        } @else {
-                            <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
-                            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                            </svg>
-                            <span class="sr-only">Loading...</span>
-                            </div>
-                        }
-                    <!--<div class="flex w-full justify-items-end justify-end ml-4">
+                  {{res.name}}
+                </td>
+                <td class="hidden md:table-cell px-6 py-4">
+                  @if(res.lifecycleStatus == 'Active'){
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{res.lifecycleStatus}}</span>
+                  } @else if(res.lifecycleStatus == 'Launched') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{res.lifecycleStatus}}</span>
+                  } @else if(res.lifecycleStatus == 'Retired') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{res.lifecycleStatus}}</span>
+                  } @else if(res.lifecycleStatus == 'Obsolete') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{res.lifecycleStatus}}</span>
+                  }
+                </td>
+                <td class="hidden lg:table-cell px-6 py-4">
+                  {{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">
+                </td>
+              </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        }
+        }
+        @if (!loadingResourceSpec_more) {
+        @if (resourceSpecPageCheck) {
+        <div class="flex pt-6 pb-2 justify-center align-middle">
+          <button data-cy="loadMore" (click)="nextRes()"
+            class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
+            {{ 'CREATE_PROD_SPEC._load_more' | translate }}
+            <svg class="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>
+          </button>
+        </div>
+        }
+        } @else {
+        <div role="status" class="w-full h-full flex justify-center align-middle mt-2" data-cy="loadMoreLoading">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
+        }
+        <!--<div class="flex w-full justify-items-end justify-end ml-4">
                         <button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)" class="flex text-white justify-end 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._next' | 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 14 10">
@@ -863,101 +1054,127 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                             </svg>
                         </button>
                     </div>-->
-                }
-                @if (isCurrentStep('service')) {
-                    @if(loadingServiceSpec){
-                        <div role="status" class="w-full h-fit flex justify-center align-middle">
-                            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                            </svg>
-                            <span class="sr-only">Loading...</span>
-                            </div>
-                    } @else {
-                        @if(serviceSpecs.length==0){
-                            <div class="flex justify-center w-full m-4">
-                                <div class="flex 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">
-                                    <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                                    </svg>
-                                    <div>
-                                        {{ 'OFFERINGS._no_serv' | translate }}
-                                    </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">
-                                <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
-                                <tr>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                    </th>
-                                    <th scope="col" class="hidden md:table-cell px-6 py-3">
-                                        {{ 'CREATE_PROD_SPEC._status' | translate }}
-                                    </th>
-                                    <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                        {{ 'CREATE_PROD_SPEC._last_update' | translate }}
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'CREATE_PROD_SPEC._select' | translate }}
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                @for (serv of serviceSpecs; track serv.id) {
-                                    <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td [ngClass]="{
+        }
+
+        @if (currentStep.id === 'service') {
+        @if(loadingServiceSpec){
+        <div role="status" class="w-full h-fit flex justify-center align-middle">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
+        } @else {
+        @if(serviceSpecs.length==0){
+        <div class="flex justify-center w-full m-4">
+          <div
+            class="flex 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">
+            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+            </svg>
+            <div>
+              {{ 'OFFERINGS._no_serv' | translate }}
+            </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">
+            <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
+              <tr>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="hidden md:table-cell px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._status' | translate }}
+                </th>
+                <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._last_update' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._select' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (serv of serviceSpecs; track serv.id) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                             'break-all': hasLongWord(serv.name, 20),
                                             'break-words': !hasLongWord(serv.name, 20)
                                             }" class="px-6 py-4 text-wrap break-words">
-                                            {{serv.name}}
-                                        </td>
-                                        <td class="hidden md:table-cell px-6 py-4">
-                                            @if(serv.lifecycleStatus == 'Active'){
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{serv.lifecycleStatus}}</span>
-                                            } @else if(serv.lifecycleStatus == 'Launched') {
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{serv.lifecycleStatus}}</span>
-                                            } @else if(serv.lifecycleStatus == 'Retired') {
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{serv.lifecycleStatus}}</span>
-                                            } @else if(serv.lifecycleStatus == 'Obsolete') {
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{serv.lifecycleStatus}}</span>
-                                            }
-                                        </td>
-                                        <td class="hidden lg:table-cell px-6 py-4">
-                                            {{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">
-                                        </td>
-                                    </tr>
-                                }
-                            </tbody>
-                        </table>
-                        </div>
-                        }
-                        }
-                        @if (!loadingServiceSpec_more) {
-                            @if (serviceSpecPageCheck) {
-                            <div class="flex pt-6 pb-2 justify-center align-middle">
-                                <button (click)="nextServ()" class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
-                                    {{ 'CREATE_PROD_SPEC._load_more' | translate }}
-                                <svg class="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>
-                                </button>
-                            </div>
-                            }
-                        } @else {
-                            <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
-                            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                            </svg>
-                            <span class="sr-only">Loading...</span>
-                            </div>
-                        }
-                    <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
+                  {{serv.name}}
+                </td>
+                <td class="hidden md:table-cell px-6 py-4">
+                  @if(serv.lifecycleStatus == 'Active'){
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{serv.lifecycleStatus}}</span>
+                  } @else if(serv.lifecycleStatus == 'Launched') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{serv.lifecycleStatus}}</span>
+                  } @else if(serv.lifecycleStatus == 'Retired') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{serv.lifecycleStatus}}</span>
+                  } @else if(serv.lifecycleStatus == 'Obsolete') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{serv.lifecycleStatus}}</span>
+                  }
+                </td>
+                <td class="hidden lg:table-cell px-6 py-4">
+                  {{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">
+                </td>
+              </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        }
+        }
+        @if (!loadingServiceSpec_more) {
+        @if (serviceSpecPageCheck) {
+        <div class="flex pt-6 pb-2 justify-center align-middle">
+          <button (click)="nextServ()"
+            class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
+            {{ 'CREATE_PROD_SPEC._load_more' | translate }}
+            <svg class="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>
+          </button>
+        </div>
+        }
+        } @else {
+        <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
+        }
+        <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
                         <button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)" class="flex text-white justify-end 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._next' | 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 14 10">
@@ -965,200 +1182,402 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                             </svg>
                         </button>
                     </div>-->
+        }
+        @if (currentStep.id === 'dsp_config') {
+        <div class="m-4">
+          <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left mb-4">DSP Config</h3>
+
+          @if (endpointUrls.length > 0) {
+          <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white dark:bg-secondary-300 mb-4">
+            <table class="table-fixed w-full text-sm text-left 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>
+                  <th scope="col" class="w-96 px-6 py-3">Endpoint URL</th>
+                  <th scope="col" class="px-6 py-3">Description</th>
+                  <th scope="col" class="w-48 px-2 py-3 text-center">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (entry of endpointUrls; track entry; let idx = $index) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td class="px-6 py-4 break-all">{{ entry.url }}</td>
+                  <td class="px-6 py-4 break-words">{{ entry.description }}</td>
+                  <td class="px-2 py-4 text-center">
+                    <button (click)="removeEndpointUrl(idx)" 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>
+                  </td>
+                </tr>
                 }
-                @if (isCurrentStep('attachments')) {
-                    <div class="inline-flex">
-                        <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_prod_img' | translate }}</h4>
-                        <div class="ml-4 flex">
-                            <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 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>
-                            </div>
-                            <div class="px-3 py-2 inline-block">
-                                <p class="inline-block">{{ 'CREATE_PROD_SPEC._restrictions' | translate }}
-                                </p>
-                            </div>
-                            <div data-popper-arrow></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>
-                            </button>
-                        </div>
-                    } @else {
-                        <div class="flex w-full justify-center justify-items-center">
-                            <ngx-file-drop class="m-4 p-4 w-full" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event,'img')" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
-                                <ng-template class="w-full" ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-                                    <div class="w-full flex flex-col justify-items-center justify-center">
-                                        <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>
-                                        <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>
-                                        </div>
-                                    </div>
-                                </ng-template>
-                            </ngx-file-drop>
-                        </div>
-                        <label class="font-bold ml-6 dark:text-white">{{ 'CREATE_PROD_SPEC._add_prod_img_url' | translate }}</label>
-                        <div class="relative w-full ml-6 mt-2 mb-2">
-                            <!-- Tooltip (Above the Input, Positioned Up) -->
-                            <div *ngIf="attImageName.invalid && attImageName.touched"
-                                class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max bg-gray-900 text-white text-xs rounded-lg p-2 shadow-lg z-50">
-                                {{ 'CREATE_PROD_SPEC._file_name' | translate }}
-                                <!-- 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>
+              </tbody>
+            </table>
+          </div>
+          }
 
-                            <div class="flex items-center h-fit w-full justify-between">
-                                <!-- Input Field -->
-                                <input #imgURL type="text" id="att-name"
-                                    [formControl]="attImageName"
-                                    (blur)="attImageName.markAsTouched()"
-                                    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'"
-                                />
+          <div class="flex flex-col gap-2">
+            <div class="flex gap-4">
+              <div class="flex flex-col w-1/2">
+                <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._dsp_endpoint_name' | translate
+                  }}</label>
+                <input data-cy="dspEndpointName" [value]="newEndpointName" (input)="newEndpointName = $any($event.target).value" type="url"
+                  [placeholder]="'CREATE_PROD_SPEC._dsp_endpoint_name_placeholder' | translate"
+                  class="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>
+              <div class="flex flex-col w-1/2">
+                <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._dsp_endpoint_url' | translate
+                  }}</label>
+                <input data-cy="dspEndpointUrl" [value]="newEndpointUrl" (input)="newEndpointUrl = $any($event.target).value" type="url"
+                  [placeholder]="'CREATE_PROD_SPEC._dsp_endpoint_url_placeholder' | translate"
+                  class="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>
+            </div>
+            <div>
+              <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._dsp_endpoint_description' |
+                translate }}</label>
+              <textarea data-cy="dspEndpointDescription" [value]="newEndpointDescription" (input)="newEndpointDescription = $any($event.target).value"
+                rows="3" [placeholder]="'CREATE_PROD_SPEC._dsp_endpoint_description_placeholder' | translate"
+                maxlength="100000"
+                class="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="flex justify-center">
+              <button data-cy="dspAddEndpoint" type="button" (click)="addEndpointUrl()"
+                [disabled]="!newEndpointUrl.trim() || !newEndpointDescription.trim()"
+                [class.opacity-50]="!newEndpointUrl.trim() || !newEndpointDescription.trim()"
+                [class.cursor-not-allowed]="!newEndpointUrl.trim() || !newEndpointDescription.trim()"
+                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._dsp_add_endpoint' | translate }}
+                <svg class="w-4 h-4 ml-2 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="M5 12h14m-7 7V5" />
+                </svg>
+              </button>
+            </div>
+          </div>
 
-                                <!-- Submit Button -->
-                                <button (click)="saveImgFromURL()"
-                                    [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>
-                                </button>
-                            </div>
-                        </div>
+          @if (endpointUrls.length === 0) {
+          <p class="mt-2 text-sm text-red-500">At least one endpoint URL is required.</p>
+          }
 
+          <hr class="my-6 border-gray-200 dark:border-gray-700" />
 
-                    }
-                    <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att' | translate }}</h4>
-                    @if(prodAttachments.length == 0){
-                        <div class="flex justify-center w-full ml-6 mt-2 mb-2 mr-4">
-                            <div class="flex 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">
-                              <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                              </svg>
-                              <span class="sr-only">Info</span>
-                              <div>
-                                {{ 'CREATE_PROD_SPEC._no_att' | translate }}
-                              </div>
-                            </div>
-                        </div>
-                    } @else {
-                        <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>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'CREATE_PROD_SPEC._value' | translate }}
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'CREATE_PROD_SPEC._actions' | translate }}
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    @for (att of prodAttachments; track att) {
-                                        <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td [ngClass]="{
+          <form [formGroup]="dspConfigForm" class="flex flex-col gap-4">
+            <div class="flex gap-4">
+              <div class="w-3/6">
+                <label class="font-bold text-lg dark:text-white">Upstream Address</label>
+                <input data-cy="dspUpstreamAddress" formControlName="upstreamAddress" type="text"
+                  class="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"
+                  [ngClass]="dspConfigForm.get('upstreamAddress')?.invalid && dspConfigForm.get('upstreamAddress')?.value !== '' ? 'border-red-600' : ''" />
+              </div>
+              <div class="w-2/6">
+                <label class="font-bold text-lg dark:text-white">Transfer path</label>
+                <input data-cy="dspTransferPath" formControlName="transferPath" type="text"
+                  class="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"
+                  [ngClass]="dspConfigForm.get('transferPath')?.invalid && dspConfigForm.get('transferPath')?.value !== '' ? 'border-red-600' : ''" />
+              </div>
+              <div class="w-2/6">
+                <label class="font-bold text-lg dark:text-white">Transfer Type</label>
+                <select data-cy="dspTransferType" formControlName="transferType"
+                  class="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 *ngFor="let type of transferTypes" [value]="type">{{ type }}</option>
+                </select>
+              </div>
+            </div>
+            <div>
+              <label class="font-bold text-lg dark:text-white">Target Specification</label>
+              <textarea data-cy="dspTargetSpecification" formControlName="targetSpecification" rows="4"
+                class="font-mono bg-gray-50 dark:bg-secondary-300 border dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                [ngClass]="dspConfigForm.get('targetSpecification')?.invalid && dspConfigForm.get('targetSpecification')?.touched ? 'border-red-600' : 'border-gray-300 dark:border-secondary-200'"
+                placeholder='{"key": "value"}'></textarea>
+              @if (dspConfigForm.get('targetSpecification')?.touched) {
+              @if (dspConfigForm.get('targetSpecification')?.errors?.['required']) {
+              <p class="mt-1 text-sm text-red-500">This field is required</p>
+              } @else if (dspConfigForm.get('targetSpecification')?.errors?.['invalidJson']) {
+              <p class="mt-1 text-sm text-red-500">Invalid JSON</p>
+              }
+              }
+            </div>
+            <div>
+              <label class="font-bold text-lg dark:text-white">Service Configuration</label>
+              <textarea data-cy="dspServiceConfiguration" formControlName="serviceConfiguration" rows="4"
+                class="font-mono bg-gray-50 dark:bg-secondary-300 border dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                [ngClass]="dspConfigForm.get('serviceConfiguration')?.invalid && dspConfigForm.get('serviceConfiguration')?.touched ? 'border-red-600' : 'border-gray-300 dark:border-secondary-200'"
+                placeholder='{"key": "value"}'></textarea>
+              @if (dspConfigForm.get('serviceConfiguration')?.touched) {
+              @if (dspConfigForm.get('serviceConfiguration')?.errors?.['required']) {
+              <p class="mt-1 text-sm text-red-500">This field is required</p>
+              } @else if (dspConfigForm.get('serviceConfiguration')?.errors?.['invalidJson']) {
+              <p class="mt-1 text-sm text-red-500">Invalid JSON</p>
+              }
+              }
+            </div>
+            <div>
+              <label class="font-bold text-lg dark:text-white">Credentials Configuration</label>
+              <textarea data-cy="dspCredentialsConfig" formControlName="credentialsConfig" rows="4"
+                class="font-mono bg-gray-50 dark:bg-secondary-300 border dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                [ngClass]="dspConfigForm.get('credentialsConfig')?.invalid && dspConfigForm.get('credentialsConfig')?.touched ? 'border-red-600' : 'border-gray-300 dark:border-secondary-200'"
+                placeholder='{"key": "value"}'></textarea>
+              @if (dspConfigForm.get('credentialsConfig')?.touched) {
+              @if (dspConfigForm.get('credentialsConfig')?.errors?.['required']) {
+              <p class="mt-1 text-sm text-red-500">This field is required</p>
+              } @else if (dspConfigForm.get('credentialsConfig')?.errors?.['invalidJson']) {
+              <p class="mt-1 text-sm text-red-500">Invalid JSON</p>
+              }
+              }
+            </div>
+            <div>
+              <label class="font-bold text-lg dark:text-white">Policy Configuration</label>
+              <textarea data-cy="dspPolicyConfig" formControlName="policyConfig" rows="4"
+                class="font-mono bg-gray-50 dark:bg-secondary-300 border dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                [ngClass]="dspConfigForm.get('policyConfig')?.invalid && dspConfigForm.get('policyConfig')?.touched ? 'border-red-600' : 'border-gray-300 dark:border-secondary-200'"
+                placeholder='{"key": "value"}'></textarea>
+              @if (dspConfigForm.get('policyConfig')?.touched) {
+              @if (dspConfigForm.get('policyConfig')?.errors?.['required']) {
+              <p class="mt-1 text-sm text-red-500">This field is required</p>
+              } @else if (dspConfigForm.get('policyConfig')?.errors?.['invalidJson']) {
+              <p class="mt-1 text-sm text-red-500">Invalid JSON</p>
+              }
+              }
+            </div>
+          </form>
+        </div>
+        }
+
+        @if (currentStep.id === 'attachments') {
+        <div class="inline-flex">
+          <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_prod_img' | translate }}</h4>
+          <div class="ml-4 flex">
+            <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 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>
+            </div>
+            <div class="px-3 py-2 inline-block">
+              <p class="inline-block">{{ 'CREATE_PROD_SPEC._restrictions' | translate }}
+              </p>
+            </div>
+            <div data-popper-arrow></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>
+          </button>
+        </div>
+        } @else {
+        <div class="flex w-full justify-center justify-items-center">
+          <ngx-file-drop class="m-4 p-4 w-full" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event,'img')"
+            (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+            <ng-template class="w-full" ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+              <div class="w-full flex flex-col justify-items-center justify-center">
+                <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>
+                <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>
+                </div>
+              </div>
+            </ng-template>
+          </ngx-file-drop>
+        </div>
+        <label class="font-bold ml-6 dark:text-white">{{ 'CREATE_PROD_SPEC._add_prod_img_url' | translate }}</label>
+        <div class="relative w-full ml-6 mt-2 mb-2">
+          <!-- Tooltip (Above the Input, Positioned Up) -->
+          <div *ngIf="attImageName.invalid && attImageName.touched"
+            class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max bg-gray-900 text-white text-xs rounded-lg p-2 shadow-lg z-50">
+            {{ 'CREATE_PROD_SPEC._file_name' | translate }}
+            <!-- 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" [formControl]="attImageName" (blur)="attImageName.markAsTouched()"
+              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"
+              [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>
+            </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){
+        <div class="flex justify-center w-full ml-6 mt-2 mb-2 mr-4">
+          <div
+            class="flex 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">
+            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+            </svg>
+            <span class="sr-only">Info</span>
+            <div>
+              {{ 'CREATE_PROD_SPEC._no_att' | translate }}
+            </div>
+          </div>
+        </div>
+        } @else {
+        <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>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._value' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'CREATE_PROD_SPEC._actions' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (att of prodAttachments; track att) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                                 'break-all': hasLongWord(att.name, 20),
                                                 'break-words': !hasLongWord(att.name, 20)
                                                 }" class="px-6 py-4 text-wrap break-words">
-                                                {{att.name}}
-                                            </td>
-                                            <td class="px-6 py-4 text-wrap break-all">
-                                                {{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>
-                                            </td>
-                                        </tr>
-                                    }
-                                </tbody>
-                            </table>
-                            </div>
-                    }
-                    @if(showNewAtt==false){
-                        <div class="flex w-full justify-items-center justify-center">
-                            <button data-cy="productSpecAddNewAttachment" type="button" (click)="showNewAtt=!showNewAtt" 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_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>
-                            </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="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" />
-                                </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)">
-                                        <ng-template class="w-full" ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-                                            <div class="w-full flex flex-col justify-items-center justify-center">
-                                                <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>
-                                                <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>
-                                                </div>
-                                            </div>
-                                        </ng-template>
-                                    </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>
-                                        <label class="text-wrap break-all">
-                                            {{attachToCreate.url}}
-                                        </label>
-                                        <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>
-                                        </button>
-                                    </div>
-                                }
+                  {{att.name}}
+                </td>
+                <td class="px-6 py-4 text-wrap break-all">
+                  {{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>
+                </td>
+              </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        }
+        @if(showNewAtt==false){
+        <div class="flex w-full justify-items-center justify-center">
+          <button data-cy="productSpecAddNewAttachment" type="button" (click)="showNewAtt=!showNewAtt"
+            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_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>
+          </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="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" />
+            </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)">
+              <ng-template class="w-full" ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+                <div class="w-full flex flex-col justify-items-center justify-center">
+                  <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>
+                  <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>
+                  </div>
+                </div>
+              </ng-template>
+            </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>
+              <label class="text-wrap break-all">
+                {{attachToCreate.url}}
+              </label>
+              <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>
+              </button>
+            </div>
+            }
 
-                            </div>
-                            <div class="flex w-full justify-items-center justify-center mt-4">
-                                <button type="button" (click)="saveAtt()"
-                                [disabled]="!attFileName.valid || attachToCreate.url == ''" [ngClass]="!attFileName.valid || attachToCreate.url == '' ? 'opacity-50' : 'hover:bg-primary-50'"
-                                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._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>
-                                </button>
-                            </div>
-                        </div>
-                    }
-                    <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
+          </div>
+          <div class="flex w-full justify-items-center justify-center mt-4">
+            <button type="button" (click)="saveAtt()" [disabled]="!attFileName.valid || attachToCreate.url == ''"
+              [ngClass]="!attFileName.valid || attachToCreate.url == '' ? 'opacity-50' : 'hover:bg-primary-50'"
+              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._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>
+            </button>
+          </div>
+        </div>
+        }
+        <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
                         <button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)" class="flex text-white justify-end 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._next' | 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 14 10">
@@ -1166,194 +1585,235 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                             </svg>
                         </button>
                     </div> -->
-                }
-                @if (isCurrentStep('relationships')) {
-                    <div class="m-4">
-                        @if (prodRelationships.length === 0){
-                            <div class="flex justify-center w-full mb-4">
-                              <div class="flex 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">
-                                <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                  <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                                </svg>
-                                <span class="sr-only">Info</span>
-                                <div>
-                                    {{ 'CREATE_PROD_SPEC._no_relatioships' | translate }}
-                                </div>
-                              </div>
-                            </div>
-                        } @else {
-                            <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._relationship_type' | translate }}
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                            <th scope="col" class="hidden md:table-cell px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._type' | translate }}
-                                            </th>
-                                            <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._last_update' | translate }}
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._actions' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (rel of prodRelationships; track rel) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4">
-                                                    {{rel.relationshipType}}
-                                                </td>
-                                                <td [ngClass]="{
+        }
+        @if (currentStep.id === 'relationships') {
+        <div class="m-4">
+          @if (prodRelationships.length === 0){
+          <div class="flex justify-center w-full mb-4">
+            <div
+              class="flex 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">
+              <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+              </svg>
+              <span class="sr-only">Info</span>
+              <div>
+                {{ 'CREATE_PROD_SPEC._no_relatioships' | translate }}
+              </div>
+            </div>
+          </div>
+          } @else {
+          <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._relationship_type' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                  <th scope="col" class="hidden md:table-cell px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._type' | translate }}
+                  </th>
+                  <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._last_update' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._actions' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (rel of prodRelationships; track rel) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td class="px-6 py-4">
+                    {{rel.relationshipType}}
+                  </td>
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(rel.productSpec.name, 20),
                                                     'break-words': !hasLongWord(rel.productSpec.name, 20)
                                                     }" class="px-6 py-4 text-wrap break-words">
-                                                    {{rel.productSpec.name}}
-                                                </td>
-                                                <td class="hidden md:table-cell px-6 py-4">
-                                                    @if(rel.productSpec.lifecycleStatus == 'Active'){
-                                                        <span class="bg-blue-100 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{rel.productSpec.lifecycleStatus}}</span>
-                                                    } @else if(rel.productSpec.lifecycleStatus == 'Launched') {
-                                                        <span class="bg-blue-100 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{rel.productSpec.lifecycleStatus}}</span>
-                                                    } @else if(rel.productSpec.lifecycleStatus == 'Retired') {
-                                                        <span class="bg-blue-100 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{rel.productSpec.lifecycleStatus}}</span>
-                                                    } @else if(rel.productSpec.lifecycleStatus == 'Obsolete') {
-                                                        <span class="bg-blue-100 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{rel.productSpec.lifecycleStatus}}</span>
-                                                    }
-                                                </td>
-                                                <td class="hidden lg:table-cell px-6 py-4">
-                                                    {{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">
-                                                        <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>
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>
-                        }
-                        @if(showCreateRel==false){
-                            <div class="flex w-full justify-items-center justify-center">
-                                <button data-cy="productSpecAddRelationship" type="button" (click)="showCreateRel=!showCreateRel" 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._add_relationship' | 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>
-                                </button>
-                            </div>
-                        } @else {
-                            <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._relationship_type' | translate }}</label>
-                            <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>
-                                <option value="exclusivity">Exclusivity</option>
-                                <option value="substitution">Substitution</option>
-                            </select>
-                            @if(loadingprodSpecRel){
-                                <div role="status" class="w-full h-fit flex justify-center align-middle">
-                                    <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                                    </svg>
-                                    <span class="sr-only">Loading...</span>
-                                    </div>
-                            } @else {
-                                @if(prodSpecRels.length==0){
-                                    <div class="flex justify-center w-full m-4">
-                                        <div class="flex 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">
-                                            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                                            </svg>
-                                            <div>
-                                                {{ 'OFFERINGS._no_prod_rel' | translate }}
-                                            </div>
-                                        </div>
-                                    </div>
-                                }@else{
-                                <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>
-                                                <th scope="col" class="px-6 py-3">
-                                                    {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                                </th>
-                                                <th scope="col" class="px-6 py-3">
-                                                    {{ 'CREATE_PROD_SPEC._type' | translate }}
-                                                </th>
-                                                <th scope="col" class="px-6 py-3 hidden md:table-cell">
-                                                    {{ 'CREATE_PROD_SPEC._last_update' | translate }}
-                                                </th>
-                                            </tr>
-                                        </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)"
-                                                    [ngClass]="rel.id == selectedProdSpec.id ? 'bg-gray-300 dark:bg-secondary-200' : 'bg-white dark:bg-secondary-300'">
-                                                    <td [ngClass]="{
+                    {{rel.productSpec.name}}
+                  </td>
+                  <td class="hidden md:table-cell px-6 py-4">
+                    @if(rel.productSpec.lifecycleStatus == 'Active'){
+                    <span
+                      class="bg-blue-100 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{rel.productSpec.lifecycleStatus}}</span>
+                    } @else if(rel.productSpec.lifecycleStatus == 'Launched') {
+                    <span
+                      class="bg-blue-100 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{rel.productSpec.lifecycleStatus}}</span>
+                    } @else if(rel.productSpec.lifecycleStatus == 'Retired') {
+                    <span
+                      class="bg-blue-100 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{rel.productSpec.lifecycleStatus}}</span>
+                    } @else if(rel.productSpec.lifecycleStatus == 'Obsolete') {
+                    <span
+                      class="bg-blue-100 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{rel.productSpec.lifecycleStatus}}</span>
+                    }
+                  </td>
+                  <td class="hidden lg:table-cell px-6 py-4">
+                    {{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">
+                      <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>
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+          }
+          @if(showCreateRel==false){
+          <div class="flex w-full justify-items-center justify-center">
+            <button data-cy="productSpecAddRelationship" type="button" (click)="showCreateRel=!showCreateRel"
+              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._add_relationship' | 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>
+            </button>
+          </div>
+          } @else {
+          <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._relationship_type' | translate
+            }}</label>
+          <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>
+            <option value="exclusivity">Exclusivity</option>
+            <option value="substitution">Substitution</option>
+          </select>
+          @if(loadingprodSpecRel){
+          <div role="status" class="w-full h-fit flex justify-center align-middle">
+            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+              viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                fill="currentColor" />
+              <path
+                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                fill="currentFill" />
+            </svg>
+            <span class="sr-only">Loading...</span>
+          </div>
+          } @else {
+          @if(prodSpecRels.length==0){
+          <div class="flex justify-center w-full m-4">
+            <div
+              class="flex 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">
+              <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+              </svg>
+              <div>
+                {{ 'OFFERINGS._no_prod_rel' | translate }}
+              </div>
+            </div>
+          </div>
+          }@else{
+          <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._type' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3 hidden md:table-cell">
+                    {{ 'CREATE_PROD_SPEC._last_update' | translate }}
+                  </th>
+                </tr>
+              </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)"
+                  [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),
                                                         'break-words': !hasLongWord(rel.name, 20)
                                                         }" class="px-6 py-4 text-wrap break-words">
-                                                        {{rel.name}}
-                                                    </td>
-                                                    <td class="px-6 py-4">
-                                                        @if(rel.isBundle == false){
-                                                            <span class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">Simple</span>
-                                                        } @else {
-                                                            <span class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">Bundle</span>
-                                                        }
-                                                    </td>
-                                                    <td class="px-6 py-4 hidden md:table-cell">
-                                                        {{rel.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}}
-                                                    </td>
-                                                </tr>
-                                            }
-                                        </tbody>
-                                    </table>
-                                </div>
-                                }
-                                @if (!loadingprodSpecRel_more) {
-                                    @if (prodSpecRelPageCheck) {
-                                    <div class="flex pt-6 pb-2 justify-center align-middle">
-                                        <button (click)="nextProdSpecsRel()" class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
-                                            {{ 'CREATE_PROD_SPEC._load_more' | translate }}
-                                        <svg class="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>
-                                        </button>
-                                    </div>
-                                    }
-                                } @else {
-                                    <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
-                                    <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                                    </svg>
-                                    <span class="sr-only">Loading...</span>
-                                    </div>
-                                }
-                            }
-                            <div class="flex w-full justify-items-center justify-center mt-4">
-                                <button data-cy="productSpecSaveRelationship" type="button" (click)="saveRel()" [disabled]="prodSpecRels.length==0 || selectedProdSpec.id == ''" [ngClass]="prodSpecRels.length==0 || selectedProdSpec.id == '' ? 'opacity-50' : 'hover:bg-primary-50'" 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._save_relationship' | 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>
-                                </button>
-                            </div>
-                        }
-                    </div>
-                    <!--<div class="flex w-full justify-items-end justify-end ml-4">
+                    {{rel.name}}
+                  </td>
+                  <td class="px-6 py-4">
+                    @if(rel.isBundle == false){
+                    <span
+                      class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">Simple</span>
+                    } @else {
+                    <span
+                      class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">Bundle</span>
+                    }
+                  </td>
+                  <td class="px-6 py-4 hidden md:table-cell">
+                    {{rel.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+          }
+          @if (!loadingprodSpecRel_more) {
+          @if (prodSpecRelPageCheck) {
+          <div class="flex pt-6 pb-2 justify-center align-middle">
+            <button (click)="nextProdSpecsRel()"
+              class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
+              {{ 'CREATE_PROD_SPEC._load_more' | translate }}
+              <svg class="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>
+            </button>
+          </div>
+          }
+          } @else {
+          <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+              viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                fill="currentColor" />
+              <path
+                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                fill="currentFill" />
+            </svg>
+            <span class="sr-only">Loading...</span>
+          </div>
+          }
+          }
+          <div class="flex w-full justify-items-center justify-center mt-4">
+            <button data-cy="productSpecSaveRelationship" type="button" (click)="saveRel()"
+              [disabled]="prodSpecRels.length==0 || selectedProdSpec.id == ''"
+              [ngClass]="prodSpecRels.length==0 || selectedProdSpec.id == '' ? 'opacity-50' : 'hover:bg-primary-50'"
+              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._save_relationship' | 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>
+            </button>
+          </div>
+          }
+        </div>
+        <!--<div class="flex w-full justify-items-end justify-end ml-4">
                         <button data-cy="btnFinish" type="button" (click)="goToStep(currentStep + 1)" class="flex text-white justify-end 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._finish' | 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 14 10">
@@ -1361,331 +1821,365 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                             </svg>
                         </button>
                     </div> -->
-                }
-                @if (isCurrentStep('summary')) {
-                    <div class="m-8">
-                        @if(loading){
-                            <div role="status" class="w-full h-full flex justify-center align-middle">
-                                <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                                </svg>
-                                <span class="sr-only">Loading...</span>
-                                </div>
-                        } @else {
-                        <div class="mb-4 md:grid md:grid-cols-2 gap-4">
-                            <div>
-                                <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_name' | translate }}</label>
-                                <label [ngClass]="{
+        }
+        @if (currentStep.id === 'summary') {
+        <div class="m-8">
+          @if(loading){
+          <div role="status" class="w-full h-full flex justify-center align-middle">
+            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+              viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                fill="currentColor" />
+              <path
+                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                fill="currentFill" />
+            </svg>
+            <span class="sr-only">Loading...</span>
+          </div>
+          } @else {
+          <div class="mb-4 md:grid md:grid-cols-2 gap-4">
+            <div>
+              <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_name' | translate
+                }}</label>
+              <label [ngClass]="{
                                     'break-all': hasLongWord(productSpecToCreate?.name, 20),
                                     'break-words': !hasLongWord(productSpecToCreate?.name, 20)
-                                    }" class="mb-2 bg-gray-50 text-wrap break-words 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">
-                                    {{productSpecToCreate?.name}}
-                                </label>
-                                <label for="prod-version" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_version' | translate }}</label>
-                                <label class="mb-2 bg-gray-50 text-wrap break-all 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">
-                                    {{productSpecToCreate?.version}}
-                                </label>
-                            </div>
-                            <div>
-                                <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_brand' | translate }}</label>
-                                <label [ngClass]="{
+                                    }"
+                class="mb-2 bg-gray-50 text-wrap break-words 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">
+                {{productSpecToCreate?.name}}
+              </label>
+              <label for="prod-version" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_version'
+                | translate }}</label>
+              <label
+                class="mb-2 bg-gray-50 text-wrap break-all 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">
+                {{productSpecToCreate?.version}}
+              </label>
+            </div>
+            <div>
+              <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_brand' | translate
+                }}</label>
+              <label [ngClass]="{
                                     'break-all': hasLongWord(productSpecToCreate?.brand, 20),
                                     'break-words': !hasLongWord(productSpecToCreate?.brand, 20)
-                                    }" class="mb-2 bg-gray-50 text-wrap break-words 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" >
-                                    {{productSpecToCreate?.brand}}
-                                </label>
-                                @if(productSpecToCreate?.productNumber!=''){
-                                <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._id_number' | translate }}</label>
-                                <label class="mb-2 bg-gray-50 text-wrap break-all 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">
-                                    {{productSpecToCreate?.productNumber}}
-                                </label>
-                                }
-                            </div>
-                        </div>
+                                    }"
+                class="mb-2 bg-gray-50 text-wrap break-words 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">
+                {{productSpecToCreate?.brand}}
+              </label>
+              @if(productSpecToCreate?.productNumber!=''){
+              <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._id_number' | translate }}</label>
+              <label
+                class="mb-2 bg-gray-50 text-wrap break-all 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">
+                {{productSpecToCreate?.productNumber}}
+              </label>
+              }
+            </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'){
-                                <span class="bg-blue-100 dark:bg-secondary-100 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{productSpecToCreate?.lifecycleStatus}}</span>
-                            } @else if(productSpecToCreate?.lifecycleStatus == 'Launched') {
-                                <span class="bg-blue-100 dark:bg-secondary-100 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{productSpecToCreate?.lifecycleStatus}}</span>
-                            } @else if(productSpecToCreate?.lifecycleStatus == 'Retired') {
-                                <span class="bg-blue-100 dark:bg-secondary-100 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{productSpecToCreate?.lifecycleStatus}}</span>
-                            } @else if(productSpecToCreate?.lifecycleStatus == 'Obsolete') {
-                                <span class="bg-blue-100 dark:bg-secondary-100 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{productSpecToCreate?.lifecycleStatus}}</span>
-                            }
-                        </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'){
+            <span
+              class="bg-blue-100 dark:bg-secondary-100 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{productSpecToCreate?.lifecycleStatus}}</span>
+            } @else if(productSpecToCreate?.lifecycleStatus == 'Launched') {
+            <span
+              class="bg-blue-100 dark:bg-secondary-100 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{productSpecToCreate?.lifecycleStatus}}</span>
+            } @else if(productSpecToCreate?.lifecycleStatus == 'Retired') {
+            <span
+              class="bg-blue-100 dark:bg-secondary-100 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{productSpecToCreate?.lifecycleStatus}}</span>
+            } @else if(productSpecToCreate?.lifecycleStatus == 'Obsolete') {
+            <span
+              class="bg-blue-100 dark:bg-secondary-100 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{productSpecToCreate?.lifecycleStatus}}</span>
+            }
+          </div>
 
-                        @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">
-                                <markdown [ngClass]="{
+          @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">
+            <markdown [ngClass]="{
                                     'break-all': hasLongWord(productSpecToCreate?.description, 20),
                                     'break-words': !hasLongWord(productSpecToCreate?.description, 20)
-                                    }" class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900" [data]="productSpecToCreate?.description"></markdown>
-                            </div>
-                        }
+                                    }"
+              class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900"
+              [data]="productSpecToCreate?.description"></markdown>
+          </div>
+          }
 
-                        @if(imgPreview!=''){
-                            <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._profile_pic' | translate }}</label>
-                            <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">
-                            </div>
-                        }
+          @if(imgPreview!=''){
+          <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._profile_pic' | translate }}</label>
+          <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">
+          </div>
+          }
 
-                        @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">
-                                <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._status' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (bun of prodSpecsBundle; track bun) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td [ngClass]="{
+          @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">
+            <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._status' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (bun of prodSpecsBundle; track bun) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(bun.name, 20),
                                                     'break-words': !hasLongWord(bun.name, 20)
                                                     }" class="px-6 py-4 text-wrap break-words">
-                                                    {{bun.name}}
-                                                </td>
-                                                <td class="px-6 py-4">
-                                                    @if(bun.lifecycleStatus == 'Active'){
-                                                        <span class="bg-blue-100 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{bun.lifecycleStatus}}</span>
-                                                    } @else if(bun.lifecycleStatus == 'Launched') {
-                                                        <span class="bg-blue-100 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{bun.lifecycleStatus}}</span>
-                                                    } @else if(bun.lifecycleStatus == 'Retired') {
-                                                        <span class="bg-blue-100 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{bun.lifecycleStatus}}</span>
-                                                    } @else if(bun.lifecycleStatus == 'Obsolete') {
-                                                        <span class="bg-blue-100 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{bun.lifecycleStatus}}</span>
-                                                    }
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>
-                        }
+                    {{bun.name}}
+                  </td>
+                  <td class="px-6 py-4">
+                    @if(bun.lifecycleStatus == 'Active'){
+                    <span
+                      class="bg-blue-100 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{bun.lifecycleStatus}}</span>
+                    } @else if(bun.lifecycleStatus == 'Launched') {
+                    <span
+                      class="bg-blue-100 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{bun.lifecycleStatus}}</span>
+                    } @else if(bun.lifecycleStatus == 'Retired') {
+                    <span
+                      class="bg-blue-100 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{bun.lifecycleStatus}}</span>
+                    } @else if(bun.lifecycleStatus == 'Obsolete') {
+                    <span
+                      class="bg-blue-100 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{bun.lifecycleStatus}}</span>
+                    }
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </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">
-                                <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                            <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._product_description' | translate }}
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._values' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (prod of productSpecToCreate?.productSpecCharacteristic; track prod;) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td [ngClass]="{
+          @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">
+            <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                  <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._product_description' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._values' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (prod of productSpecToCreate?.productSpecCharacteristic; track prod;) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(prod.name, 20),
                                                     'break-words': !hasLongWord(prod.name, 20)
                                                     }" class="px-6 py-4 text-wrap break-words">
-                                                    {{prod.name}}
-                                                </td>
-                                                <td [ngClass]="{
+                    {{prod.name}}
+                  </td>
+                  <td [ngClass]="{
                                                     '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}}
-                                                </td>
-                                                <td class="px-6 py-4 text-wrap break-all">
-                                                    @for (char of prod.productSpecCharacteristicValue; track char; let last = $last) {
-                                                        @if(char.value || char.value == 0){
-                                                            @if(isJsonCharacteristicType(prod.valueType)){
-                                                                @if(!last){
-                                                                    {{getValuePreview(char.value)}},
-                                                                } @else {
-                                                                    {{getValuePreview(char.value)}}
-                                                                }
-                                                            } @else if(char.unitOfMeasure){
-                                                                @if(!last){
-                                                                    {{char.value}} (<i>{{char?.unitOfMeasure}}</i>),
-                                                                } @else {
-                                                                    {{char.value}} (<i>{{char?.unitOfMeasure}}</i>)
-                                                                }
-                                                            } @else {
-                                                                @if(!last){
-                                                                    {{char.value}},
-                                                                } @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>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>
-                        }
+                    {{prod.description}}
+                  </td>
+                  <td class="px-6 py-4 text-wrap break-all">
+                    @for (char of prod.productSpecCharacteristicValue; track char; let last = $last) {
+                    @if(char.value || char.value == 0){
+                    @if(isJsonCharacteristicType(prod.valueType)){
+                    @if(!last){
+                    {{getValuePreview(char.value)}},
+                    } @else {
+                    {{getValuePreview(char.value)}}
+                    }
+                    } @else if(char.unitOfMeasure){
+                    @if(!last){
+                    {{char.value}} (<i>{{char?.unitOfMeasure}}</i>),
+                    } @else {
+                    {{char.value}} (<i>{{char?.unitOfMeasure}}</i>)
+                    }
+                    } @else {
+                    @if(!last){
+                    {{char.value}},
+                    } @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>
+                }
+              </tbody>
+            </table>
+          </div>
+          }
 
-                        @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">
-                                <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (res of selectedResourceSpecs; track res) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td [ngClass]="{
+          @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">
+            <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (res of selectedResourceSpecs; track res) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(res.name, 20),
                                                     'break-words': !hasLongWord(res.name, 20)
                                                     }" class="px-6 py-4 text-wrap break-words">
-                                                    {{res.name}}
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>
-                        }
+                    {{res.name}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </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">
-                                <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (serv of selectedServiceSpecs; track serv) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td [ngClass]="{
+          @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">
+            <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (serv of selectedServiceSpecs; track serv) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(serv.name, 20),
                                                     'break-words': !hasLongWord(serv.name, 20)
                                                     }" class="px-6 py-4 text-wrap break-words">
-                                                    {{serv.name}}
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>
-                        }
+                    {{serv.name}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </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">
-                                <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._value' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (att of productSpecToCreate?.attachment; track att) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td [ngClass]="{
+          @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">
+            <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._value' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (att of productSpecToCreate?.attachment; track att) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(att.name, 20),
                                                     'break-words': !hasLongWord(att.name, 20)
                                                     }" class="px-6 py-4 text-wrap break-words">
-                                                    {{att.name}}
-                                                </td>
-                                                <td class="px-6 py-4 text-wrap break-all">
-                                                    {{att.url}}
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>
-                        }
+                    {{att.name}}
+                  </td>
+                  <td class="px-6 py-4 text-wrap break-all">
+                    {{att.url}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </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">
-                                <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._relationship_type' | translate }}
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                            <th scope="col" class="hidden md:table-cell px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._type' | translate }}
-                                            </th>
-                                            <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                                {{ 'CREATE_PROD_SPEC._last_update' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (rel of prodRelationships; track rel) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4">
-                                                    {{rel.relationshipType}}
-                                                </td>
-                                                <td [ngClass]="{
+          @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">
+            <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._relationship_type' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                  <th scope="col" class="hidden md:table-cell px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._type' | translate }}
+                  </th>
+                  <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                    {{ 'CREATE_PROD_SPEC._last_update' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (rel of prodRelationships; track rel) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td class="px-6 py-4">
+                    {{rel.relationshipType}}
+                  </td>
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(rel.productSpec.name, 20),
                                                     'break-words': !hasLongWord(rel.productSpec.name, 20)
                                                     }" class="px-6 py-4 text-wrap break-words">
-                                                    {{rel.productSpec.name}}
-                                                </td>
-                                                <td class="hidden md:table-cell px-6 py-4">
-                                                    @if(rel.productSpec.lifecycleStatus == 'Active'){
-                                                        <span class="bg-blue-100 dark:bg-secondary-200 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{rel.productSpec.lifecycleStatus}}</span>
-                                                    } @else if(rel.productSpec.lifecycleStatus == 'Launched') {
-                                                        <span class="bg-blue-100 dark:bg-secondary-200 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{rel.productSpec.lifecycleStatus}}</span>
-                                                    } @else if(rel.productSpec.lifecycleStatus == 'Retired') {
-                                                        <span class="bg-blue-100 dark:bg-secondary-200 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{rel.productSpec.lifecycleStatus}}</span>
-                                                    } @else if(rel.productSpec.lifecycleStatus == 'Obsolete') {
-                                                        <span class="bg-blue-100 dark:bg-secondary-200 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{rel.productSpec.lifecycleStatus}}</span>
-                                                    }
-                                                </td>
-                                                <td class="hidden lg:table-cell px-6 py-4">
-                                                    {{rel.productSpec.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}}
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>
-                        }
-                        }
-                        <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
+                    {{rel.productSpec.name}}
+                  </td>
+                  <td class="hidden md:table-cell px-6 py-4">
+                    @if(rel.productSpec.lifecycleStatus == 'Active'){
+                    <span
+                      class="bg-blue-100 dark:bg-secondary-200 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{rel.productSpec.lifecycleStatus}}</span>
+                    } @else if(rel.productSpec.lifecycleStatus == 'Launched') {
+                    <span
+                      class="bg-blue-100 dark:bg-secondary-200 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{rel.productSpec.lifecycleStatus}}</span>
+                    } @else if(rel.productSpec.lifecycleStatus == 'Retired') {
+                    <span
+                      class="bg-blue-100 dark:bg-secondary-200 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{rel.productSpec.lifecycleStatus}}</span>
+                    } @else if(rel.productSpec.lifecycleStatus == 'Obsolete') {
+                    <span
+                      class="bg-blue-100 dark:bg-secondary-200 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{rel.productSpec.lifecycleStatus}}</span>
+                    }
+                  </td>
+                  <td class="hidden lg:table-cell px-6 py-4">
+                    {{rel.productSpec.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+          }
+          }
+          <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
                             <button data-cy="btnCreateProduct" type="button" (click)="createProduct();" [disabled]="loading" class="flex text-white justify-end 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 disabled:opacity-50 disabled:cursor-not-allowed">
                                 {{ 'CREATE_PROD_SPEC._create_prod' | 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 14 10">
@@ -1693,96 +2187,101 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                 </svg>
                             </button>
                         </div>-->
-                    </div>
-                }
+        </div>
+        }
 
-            </div>
-            <!-- Navigation Buttons -->
-            <div class="flex justify-end mt-6 space-x-4">
-                <button (click)="goToStep(currentStep - 1)"
-                        [disabled]="currentStep === 0"
-                        [ngClass]="{
-                        'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== 0,
-                        'text-gray-300 dark:text-gray-600 cursor-not-allowed': currentStep === 0
+      </div>
+      <!-- Navigation Buttons -->
+      <div class="flex justify-end mt-6 space-x-4">
+        <button (click)="goToStep(currentStepIdx - 1)" [disabled]="currentStepIdx === 0" [ngClass]="{
+                        'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStepIdx !== 0,
+                        'text-gray-300 dark:text-gray-600 cursor-not-allowed': currentStepIdx === 0
                         }"
-                        class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg  bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 ">
-                    <svg class="min-w-4 w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-                    <path fill="currentColor"
-                            d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3
-                            256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
-                    </svg>
-                    {{ 'CREATE_OFFER._previous' | translate }}
-                </button>
+          class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg  bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 ">
+          <svg class="min-w-4 w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+            <path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3
+                            256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" />
+          </svg>
+          {{ 'CREATE_OFFER._previous' | translate }}
+        </button>
 
-                <button data-cy="btnNext"
-                        (click)="goToStep(currentStep + 1)"
-                        [disabled]="currentStep === steps.length - 1 || !validateCurrentStep() || !canNavigate(currentStep) || isStepDisabled()"
-                        [ngClass]="{
-                        'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== steps.length - 1 && (validateCurrentStep() || canNavigate(currentStep)),
-                        'cursor-not-allowed opacity-50': currentStep === steps.length - 1 || (!validateCurrentStep() || !canNavigate(currentStep))
+        <button data-cy="btnNext" (click)="goToStep(currentStepIdx + 1)"
+          [disabled]="currentStepIdx === steps.length - 1 || !validateCurrentStep() || !canNavigate(currentStepIdx) || isStepDisabled()"
+          [ngClass]="{
+                        'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStepIdx !== steps.length - 1 && (validateCurrentStep() || canNavigate(currentStepIdx)),
+                        'cursor-not-allowed opacity-50': currentStepIdx === steps.length - 1 || (!validateCurrentStep() || !canNavigate(currentStepIdx))
                         }"
-                        class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
-                    {{ 'CREATE_OFFER._next_step' | translate }}
-                <svg class="min-w-4 w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-                    <path fill="currentColor"
-                        d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7
-                        256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
-                </svg>
-                </button>
-                @if (isCurrentStep('summary')) {
-                    <button data-cy="btnCreateProduct"
-                    (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>
+          class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
+          {{ 'CREATE_OFFER._next_step' | translate }}
+          <svg class="min-w-4 w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+            <path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7
+                        256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
+          </svg>
+        </button>
+        @if (currentStep.id === 'summary') {
+        <button data-cy="btnCreateProduct" (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>
 
 <!-- BILL ADDRESS DELETE modal -->
 @if (showUploadFile){
-    <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 -->
-            <div class="relative p-4 text-center bg-secondary-50 rounded-lg shadow sm:p-5">
-                <button type="button" (click)="showUploadFile=false;$event.stopPropagation();" class="text-gray-400 absolute top-2.5 right-2.5 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
-                    <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-                    </svg>
-                    <span class="sr-only">{{ 'CREATE_PROD_SPEC._close_modal' | translate }}</span>
-                </button>
-                <ngx-file-drop class="m-4 p-4" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event,selectedISO)" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
-                    <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>
-                        <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>
-                    </ng-template>
-                </ngx-file-drop>
+<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 -->
+    <div class="relative p-4 text-center bg-secondary-50 rounded-lg shadow sm:p-5">
+      <button type="button" (click)="showUploadFile=false;$event.stopPropagation();"
+        class="text-gray-400 absolute top-2.5 right-2.5 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
+        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd"
+            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+            clip-rule="evenodd"></path>
+        </svg>
+        <span class="sr-only">{{ 'CREATE_PROD_SPEC._close_modal' | translate }}</span>
+      </button>
+      <ngx-file-drop class="m-4 p-4" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event,selectedISO)"
+        (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+        <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>
+          <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>
+        </ng-template>
+      </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 }}
-                    </button>
-                    <button data-cy="productSpecConfirmUpload" (click)="uploadFile()" type="submit" class="py-2 px-3 text-sm font-medium text-center text-white bg-primary-100 hover:bg-primary-50 rounded-lg focus:ring-4 focus:outline-none focus:ring-primary-50">
-                        {{ 'CREATE_PROD_SPEC._upload' | translate }}
-                    </button>
-                </div>
-            </div>
-        </div>
+      <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 }}
+        </button>
+        <button data-cy="productSpecConfirmUpload" (click)="uploadFile()" type="submit"
+          class="py-2 px-3 text-sm font-medium text-center text-white bg-primary-100 hover:bg-primary-50 rounded-lg focus:ring-4 focus:outline-none focus:ring-primary-50">
+          {{ 'CREATE_PROD_SPEC._upload' | translate }}
+        </button>
+      </div>
     </div>
+  </div>
+</div>
 
 }
 @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>
+<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>
 }
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 9b8d111f..494e3f9b 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,18 +1,18 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { of, Subject, throwError } from 'rxjs';
 
-import { CreateProductSpecComponent } from './create-product-spec.component';
+import { AttachmentServiceService } from 'src/app/services/attachment-service.service';
+import { EventMessageService } from 'src/app/services/event-message.service';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+import { PaginationService } from 'src/app/services/pagination.service';
 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 { ServiceSpecServiceService } from 'src/app/services/service-spec-service.service';
+import { CreateProductSpecComponent } from './create-product-spec.component';
 
 class SyncFileReaderMock {
   onload: ((event: any) => void) | null = null;
@@ -96,6 +96,7 @@ describe('CreateProductSpecComponent', () => {
   });
 
   beforeEach(() => {
+    component.steps = [{ label: 'General Info', id: 'general' }] as any;
     originalFileReader = (window as any).FileReader;
     (window as any).FileReader = SyncFileReaderMock as any;
   });
@@ -140,8 +141,8 @@ describe('CreateProductSpecComponent', () => {
     const initSpy = spyOn(component, 'initPartyInfo');
     component.ngOnInit();
     expect(component.steps.length).toBe(9);
-    expect(component.steps).toContain('Bundle');
-    expect(component.steps).not.toContain('Dataspace Configuration');
+    expect(component.steps).toContain(jasmine.objectContaining({ label: 'Bundle' }));
+    expect(component.steps).not.toContain(jasmine.objectContaining({ label: 'Dataspace Configuration' }));
     expect(initSpy).toHaveBeenCalled();
   });
 
@@ -150,8 +151,8 @@ describe('CreateProductSpecComponent', () => {
     component.DATA_SPACE_ENABLED = false;
     component.ngOnInit();
     expect(component.steps.length).toBe(8);
-    expect(component.steps).not.toContain('Bundle');
-    expect(component.steps).not.toContain('Dataspace Configuration');
+    expect(component.steps).not.toContain(jasmine.objectContaining({ label: 'Bundle' }));
+    expect(component.steps).not.toContain(jasmine.objectContaining({ label: 'Dataspace Configuration' }));
   });
 
   it('ngOnInit should configure steps with dataspace enabled and bundle enabled', () => {
@@ -159,8 +160,8 @@ describe('CreateProductSpecComponent', () => {
     component.DATA_SPACE_ENABLED = true;
     component.ngOnInit();
     expect(component.steps.length).toBe(10);
-    expect(component.steps).toContain('Bundle');
-    expect(component.steps).toContain('Dataspace Configuration');
+    expect(component.steps).toContain(jasmine.objectContaining({ label: 'Bundle' }));
+    expect(component.steps).toContain(jasmine.objectContaining({ label: 'Dataspace Configuration' }));
   });
 
   it('ngOnInit should configure steps with dataspace enabled and no bundle', () => {
@@ -168,8 +169,8 @@ describe('CreateProductSpecComponent', () => {
     component.DATA_SPACE_ENABLED = true;
     component.ngOnInit();
     expect(component.steps.length).toBe(9);
-    expect(component.steps).not.toContain('Bundle');
-    expect(component.steps).toContain('Dataspace Configuration');
+    expect(component.steps).not.toContain(jasmine.objectContaining({ label: 'Bundle' }));
+    expect(component.steps).toContain(jasmine.objectContaining({ label: 'Dataspace Configuration' }));
   });
 
   it('initPartyInfo should set partyId when logged directly', () => {
@@ -337,7 +338,7 @@ describe('CreateProductSpecComponent', () => {
 
   it('dropped should reject invalid filename', () => {
     const badFile = { name: 'bad name.txt', type: 'text/plain', size: 1000 };
-    component.currentStep = 1;
+    component['currentStepIdx'] = 1;
     component.BUNDLE_ENABLED = false;
     component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
     component.dropped([mockDroppedFile(badFile)], component.selectedISOS[0]);
@@ -348,7 +349,7 @@ describe('CreateProductSpecComponent', () => {
 
   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['currentStepIdx'] = 1;
     component.BUNDLE_ENABLED = false;
     component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
     component.dropped([mockDroppedFile(bigFile)], component.selectedISOS[0]);
@@ -358,7 +359,8 @@ describe('CreateProductSpecComponent', () => {
   });
 
   it('dropped should upload compliance ISO file and set URL', () => {
-    component.currentStep = 1;
+    component.steps = [{ label: 'Compliance profile', id: 'compliance' }] as any;
+    component['currentStepIdx'] = 0;
     component.BUNDLE_ENABLED = false;
     component.showUploadAtt = false;
     component.showUploadFile = true;
@@ -371,7 +373,8 @@ describe('CreateProductSpecComponent', () => {
   });
 
   it('dropped should upload self-attestation when uploadAtt is enabled', () => {
-    component.currentStep = 1;
+    component.steps = [{ label: 'Compliance profile', id: 'compliance' }] as any;
+    component['currentStepIdx'] = 0;
     component.BUNDLE_ENABLED = false;
     component.showUploadAtt = true;
     component.selfAtt = { name: 'Compliance:SelfAtt' };
@@ -385,7 +388,8 @@ describe('CreateProductSpecComponent', () => {
   });
 
   it('dropped should upload image attachment and set preview', () => {
-    component.currentStep = 5;
+    component.steps = [{ label: 'Attachments', id: 'attachments' }] as any;
+    component['currentStepIdx'] = 0;
     component.BUNDLE_ENABLED = false;
     const file = { name: 'picture.png', type: 'image/png', size: 200 };
     component.dropped([mockDroppedFile(file)], 'img');
@@ -395,7 +399,8 @@ describe('CreateProductSpecComponent', () => {
   });
 
   it('dropped should reject non-image file when img selector is used', () => {
-    component.currentStep = 5;
+    component.steps = [{ label: 'Attachments', id: 'attachments' }] as any;
+    component['currentStepIdx'] = 0;
     component.BUNDLE_ENABLED = false;
     const file = { name: 'doc.pdf', type: 'application/pdf', size: 200 };
     component.dropped([mockDroppedFile(file)], 'img');
@@ -404,7 +409,8 @@ describe('CreateProductSpecComponent', () => {
   });
 
   it('dropped should set attachment draft for generic files', () => {
-    component.currentStep = 5;
+    component.steps = [{ label: 'Attachments', id: 'attachments' }] as any;
+    component['currentStepIdx'] = 0;
     component.BUNDLE_ENABLED = false;
     const file = { name: 'manual.pdf', type: 'application/pdf', size: 200 };
     component.dropped([mockDroppedFile(file)], 'attachment');
@@ -414,7 +420,8 @@ describe('CreateProductSpecComponent', () => {
 
   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.steps = [{ label: 'Compliance profile', id: 'compliance' }] as any;
+    component['currentStepIdx'] = 0;
     component.BUNDLE_ENABLED = false;
     component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
     const file = { name: 'iso.pdf', type: 'application/pdf', size: 200 };
@@ -669,12 +676,12 @@ describe('CreateProductSpecComponent', () => {
     component.BUNDLE_ENABLED = false;
     component.DATA_SPACE_ENABLED = true;
     component.ngOnInit();
-    component.currentStep = 3;
+    component['currentStepIdx'] = 3;
     component.charTypeSelected = 'number';
 
     component.refreshChars();
 
-    expect(component.charTypeSelected).toBe('endpointUrl');
+    expect(component.charTypeSelected).toBe('credentialsConfiguration');
   });
 
   it('getFilteredCharacteristicsForCurrentStep should split default and dataspace characteristics', () => {
@@ -688,11 +695,11 @@ describe('CreateProductSpecComponent', () => {
       { id: '4', name: 'Policy', valueType: 'authorizationPolicy' }
     ] as any;
 
-    component.currentStep = 2;
-    expect(component.getFilteredCharacteristicsForCurrentStep().map(char => char.name)).toEqual(['Latency']);
+    component['currentStepIdx'] = 2;
+    expect(component.getFilteredCharacteristicsForCurrentStep().map(char => char.name)).toEqual(['Latency', 'DCP endpoint']);
 
-    component.currentStep = 3;
-    expect(component.getFilteredCharacteristicsForCurrentStep().map(char => char.name)).toEqual(['DCP endpoint', 'Policy']);
+    component['currentStepIdx'] = 3;
+    expect(component.getFilteredCharacteristicsForCurrentStep().map(char => char.name)).toEqual(['Policy']);
   });
 
   it('removeClass and addClass should update className', () => {
@@ -886,7 +893,7 @@ describe('CreateProductSpecComponent', () => {
   });
 
   it('addCharValue should parse and add JSON values for targetSpecification', () => {
-    component.charTypeSelected = 'targetSpecification';
+    component.charTypeSelected = 'credentialsConfiguration';
     component.jsonValue = '{"@type":"AssetCollection","refinement":[]}';
 
     component.addCharValue();
@@ -1189,17 +1196,19 @@ describe('CreateProductSpecComponent', () => {
   });
 
   it('goToStep should block forward navigation when current step is invalid', () => {
-    component.currentStep = 0;
+    component['currentStepIdx'] = 0;
     const validateSpy = spyOn(component, 'validateCurrentStep').and.returnValue(false);
     component.goToStep(1);
     expect(validateSpy).toHaveBeenCalled();
-    expect(component.currentStep).toBe(0);
+    expect(component.currentStepIdx).toBe(0);
   });
 
   it('goToStep should call dependent loaders for non-bundle flow', () => {
     component.BUNDLE_ENABLED = false;
-    component.currentStep = 0;
-    component.highestStep = 0;
+    component.DATA_SPACE_ENABLED = false;
+    component.ngOnInit();
+    component['currentStepIdx'] = 0;
+    component.highestStepIdx = 0;
     spyOn(component, 'validateCurrentStep').and.returnValue(true);
     const refreshSpy = spyOn(component, 'refreshChars');
     const resSpy = spyOn(component, 'getResSpecs');
@@ -1218,12 +1227,14 @@ describe('CreateProductSpecComponent', () => {
     expect(relSpy).toHaveBeenCalledWith(false);
     component.goToStep(7);
     expect(finishSpy).toHaveBeenCalled();
-    expect(component.highestStep).toBe(7);
+    expect(component.highestStepIdx).toBe(7);
     expect(refreshSpy).toHaveBeenCalled();
   });
 
   it('goToStep should call dependent loaders for bundle flow', () => {
     component.BUNDLE_ENABLED = true;
+    component.DATA_SPACE_ENABLED = false;
+    component.ngOnInit();
     spyOn(component, 'validateCurrentStep').and.returnValue(true);
     const resSpy = spyOn(component, 'getResSpecs');
     const servSpy = spyOn(component, 'getServSpecs');
@@ -1240,47 +1251,54 @@ describe('CreateProductSpecComponent', () => {
   });
 
   it('validateCurrentStep should validate step 0 by general form validity', () => {
-    component.currentStep = 0;
+    component.steps = [
+      { label: 'General Info', id: 'general' },
+      { label: 'Compliance profile', id: 'compliance' },
+      { label: 'Characteristics', id: 'characteristics' },
+      { label: 'Resource specifications', id: 'resource' },
+      { label: 'Service specifications', id: 'service' },
+      { label: 'Attachments', id: 'attachments' }
+    ] as any;
+    component['currentStepIdx'] = 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;
+    component['currentStepIdx'] = 5;
     expect(component.validateCurrentStep()).toBeTrue();
   });
 
   it('isStepDisabled should enforce step-specific guards', () => {
-    component.currentStep = 0;
+    component.steps = [{ label: 'General Info', id: 'general' }] as any;
+    component['currentStepIdx'] = 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.steps = [{ label: 'Bundle', id: 'bundle' }] as any;
+    component['currentStepIdx'] = 0;
     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;
+    component.steps = [{ label: 'Compliance profile', id: 'compliance' }] as any;
+    component['currentStepIdx'] = 0;
     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['currentStepIdx'] = 0;
+    component.highestStepIdx = 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;
+    component.highestStepIdx = 2;
     expect(component.canNavigate(2)).toBeTrue();
 
     const goSpy = spyOn(component, 'goToStep');
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 74b83125..530fcf08 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
@@ -1,25 +1,23 @@
-import { Component, OnInit, ChangeDetectorRef, HostListener, ElementRef, ViewChild, OnDestroy } from '@angular/core';
-import { Router } from '@angular/router';
-import {components} from "src/app/models/product-catalog";
-import { environment } from 'src/environments/environment';
-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 { LoginInfo } from 'src/app/models/interfaces';
+import { ChangeDetectorRef, Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { initFlowbite } from 'flowbite';
-import { FormGroup, FormControl, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
-import { NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop';
-import { certifications } from 'src/app/models/certification-standards.const'
-import * as moment from 'moment';
-import { v4 as uuidv4 } from 'uuid';
-import { noWhitespaceValidator } from 'src/app/validators/validators';
+import moment from 'moment';
+import { FileSystemDirectoryEntry, FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { certifications } from 'src/app/models/certification-standards.const';
+import { LoginInfo } from 'src/app/models/interfaces';
+import { components } from "src/app/models/product-catalog";
+import { AttachmentServiceService } from "src/app/services/attachment-service.service";
+import { EventMessageService } from "src/app/services/event-message.service";
+import { LocalStorageService } from "src/app/services/local-storage.service";
+import { PaginationService } from 'src/app/services/pagination.service';
+import { ProductSpecServiceService } from 'src/app/services/product-spec-service.service';
+import { ResourceSpecServiceService } from 'src/app/services/resource-spec-service.service';
+import { ServiceSpecServiceService } from 'src/app/services/service-spec-service.service';
+import { jsonValidator, noWhitespaceValidator } from 'src/app/validators/validators';
+import { environment } from 'src/environments/environment';
+import { v4 as uuidv4 } from 'uuid';
 
 type CharacteristicValueSpecification = components["schemas"]["CharacteristicValueSpecification"];
 type ProductSpecification_Create = components["schemas"]["ProductSpecification_Create"];
@@ -29,7 +27,12 @@ type ServiceSpecificationRef = components["schemas"]["ServiceSpecificationRef"];
 type ResourceSpecificationRef = components["schemas"]["ResourceSpecificationRef"];
 type ProductSpecificationRelationship = components["schemas"]["ProductSpecificationRelationship"];
 type AttachmentRefOrValue = components["schemas"]["AttachmentRefOrValue"];
-type ProductSpecFormStep = 'general' | 'bundle' | 'compliance' | 'characteristics' | 'dataspace' | 'resource' | 'service' | 'attachments' | 'relationships' | 'summary';
+type ProductSpecFormStep = 'general' | 'bundle' | 'compliance' | 'characteristics' | 'dataspace' | 'resource' | 'service' | 'attachments' | 'relationships' | 'summary' | 'dsp_config';
+
+interface Step {
+  label: string;
+  id: ProductSpecFormStep;
+}
 
 @Component({
   selector: 'create-product-spec',
@@ -42,50 +45,70 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
   PROD_SPEC_LIMIT: number = environment.PROD_SPEC_LIMIT;
   SERV_SPEC_LIMIT: number = environment.SERV_SPEC_LIMIT;
   RES_SPEC_LIMIT: number = environment.RES_SPEC_LIMIT;
-  BUNDLE_ENABLED: boolean= environment.BUNDLE_ENABLED;
+  BUNDLE_ENABLED: boolean = environment.BUNDLE_ENABLED;
   DATA_SPACE_ENABLED: boolean = environment.DATA_SPACE_ENABLED;
-  MAX_FILE_SIZE: number=environment.MAX_FILE_SIZE;
+  MAX_FILE_SIZE: number = environment.MAX_FILE_SIZE;
 
   //CONTROL VARIABLES:
-  showGeneral:boolean=true;
-  showBundle:boolean=false;
-  showCompliance:boolean=false;
-  showChars:boolean=false;
-  showResource:boolean=false;
-  showService:boolean=false;
-  showAttach:boolean=false;
-  showRelationships:boolean=false;
-  showSummary:boolean=false;
+  showGeneral: boolean = true;
+  showBundle: boolean = false;
+  showCompliance: boolean = false;
+  showChars: boolean = false;
+  showResource: boolean = false;
+  showService: boolean = false;
+  showAttach: boolean = false;
+  showRelationships: boolean = false;
+  showSummary: boolean = false;
 
   //Check if step was done
-  generalDone:boolean=false;
-  bundleDone:boolean=false;
-  complianceDone:boolean=false;
-  charsDone:boolean=false;
-  resourceDone:boolean=false;
-  serviceDone:boolean=false;
-  attachDone:boolean=false;
-  relationshipDone:boolean=false;
-  finishDone:boolean=false;
-
-  stepsElements:string[]=['general-info','bundle','compliance','chars','resource','service','attach','relationships','summary'];
-  stepsCircles:string[]=['general-circle','bundle-circle','compliance-circle','chars-circle','resource-circle','service-circle','attach-circle','relationships-circle','summary-circle'];
-  currentStep = 0;
-  highestStep = 0;
-  steps:any[] = [];
-
-  showPreview:boolean=false;
-  showEmoji:boolean=false;
-  description:string='';
-  partyId:any='';
+  generalDone: boolean = false;
+  bundleDone: boolean = false;
+  complianceDone: boolean = false;
+  charsDone: boolean = false;
+  resourceDone: boolean = false;
+  serviceDone: boolean = false;
+  attachDone: boolean = false;
+  relationshipDone: boolean = false;
+  finishDone: boolean = false;
+
+  stepsElements: string[] = ['general-info', 'bundle', 'compliance', 'chars', 'resource', 'service', 'attach', 'relationships', 'summary'];
+  stepsCircles: string[] = ['general-circle', 'bundle-circle', 'compliance-circle', 'chars-circle', 'resource-circle', 'service-circle', 'attach-circle', 'relationships-circle', 'summary-circle'];
+
+  currentStepIdx = 0;
+  get currentStep(): Step { return this.steps[this.currentStepIdx]; }
+  highestStepIdx = 0;
+
+  steps: Step[] = [];
+
+  showPreview: boolean = false;
+  showEmoji: boolean = false;
+  description: string = '';
+  partyId: any = '';
 
   //PRODUCT GENERAL INFO:
   generalForm = new FormGroup({
     name: new FormControl('', [Validators.required, Validators.maxLength(100), noWhitespaceValidator]),
     brand: new FormControl('', [Validators.required, noWhitespaceValidator]),
-    version: new FormControl('0.1', [Validators.required,Validators.pattern('^-?[0-9]\\d*(\\.\\d*)?$'), noWhitespaceValidator]),
+    version: new FormControl('0.1', [Validators.required, Validators.pattern('^-?[0-9]\\d*(\\.\\d*)?$'), noWhitespaceValidator]),
     number: new FormControl(''),
     description: new FormControl('', Validators.maxLength(100000)),
+    dspCompatible: new FormControl(false),
+  });
+
+  //DSP CONFIG INFO:
+  newEndpointUrl: string = '';
+  newEndpointDescription: string = '';
+  newEndpointName: string = '';
+  endpointUrls: { url: string; description: string, name: string }[] = [];
+  readonly transferTypes: string[] = ['HttpData-PULL', 'HttpData-PUSH'];
+  dspConfigForm = new FormGroup({
+    upstreamAddress: new FormControl('', [Validators.required]),
+    transferPath: new FormControl(''),
+    transferType: new FormControl('HttpData-PULL', [Validators.required]),
+    targetSpecification: new FormControl('', [Validators.required, jsonValidator]),
+    serviceConfiguration: new FormControl('', [Validators.required, jsonValidator]),
+    credentialsConfig: new FormControl('', [Validators.required, jsonValidator]),
+    policyConfig: new FormControl('', [Validators.required, jsonValidator]),
   });
 
   //CHARS INFO
@@ -93,87 +116,87 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     name: new FormControl('', [Validators.required, Validators.maxLength(100), noWhitespaceValidator]),
     description: new FormControl('', [Validators.maxLength(500)])
   });
-  charTypeSelected:string='string';
-  booleanDefaultTrue:boolean=true;
+  charTypeSelected: string = 'string';
+  booleanDefaultTrue: boolean = true;
 
-  isOptional:boolean=false;
-  optionalDftTrue:boolean=false;
-  prodChars:ProductSpecificationCharacteristic[]=[];
-  finishChars:ProductSpecificationCharacteristic[]=[];
-  creatingChars:CharacteristicValueSpecification[]=[];
-  showCreateChar:boolean=false;
+  isOptional: boolean = false;
+  optionalDftTrue: boolean = false;
+  prodChars: ProductSpecificationCharacteristic[] = [];
+  finishChars: ProductSpecificationCharacteristic[] = [];
+  creatingChars: CharacteristicValueSpecification[] = [];
+  showCreateChar: boolean = false;
 
   //BUNDLE INFO:
-  bundleChecked:boolean=false;
-  bundlePage=0;
-  bundlePageCheck:boolean=false;
-  loadingBundle:boolean=false;
-  loadingBundle_more:boolean=false;
-  prodSpecs:any[]=[];
-  nextProdSpecs:any[]=[];
+  bundleChecked: boolean = false;
+  bundlePage = 0;
+  bundlePageCheck: boolean = false;
+  loadingBundle: boolean = false;
+  loadingBundle_more: boolean = false;
+  prodSpecs: any[] = [];
+  nextProdSpecs: any[] = [];
   //final selected products inside bundle
-  prodSpecsBundle:BundledProductSpecification[]=[];
+  prodSpecsBundle: BundledProductSpecification[] = [];
 
   //COMPLIANCE PROFILE INFO:
-  buttonISOClicked:boolean=false;
-  availableISOS:any[]=[];
-  selectedISOS:any[]=[];
-  additionalISOS:any[]=[];
-  selectedISO:any;
-  showUploadFile:boolean=false;
-  disableCompNext:boolean=true;
-  selfAtt:any;
-  showUploadAtt:boolean=false;
-  isoToCreate:string='';
-  showCert:boolean=false;
+  buttonISOClicked: boolean = false;
+  availableISOS: any[] = [];
+  selectedISOS: any[] = [];
+  additionalISOS: any[] = [];
+  selectedISO: any;
+  showUploadFile: boolean = false;
+  disableCompNext: boolean = true;
+  selfAtt: any;
+  showUploadAtt: boolean = false;
+  isoToCreate: string = '';
+  showCert: boolean = false;
 
   //SERVICE INFO:
-  serviceSpecPage=0;
-  serviceSpecPageCheck:boolean=false;
-  loadingServiceSpec:boolean=false;
-  loadingServiceSpec_more:boolean=false;
-  serviceSpecs:any[]=[];
-  nextServiceSpecs:any[]=[];
-  selectedServiceSpecs:ServiceSpecificationRef[]=[];
+  serviceSpecPage = 0;
+  serviceSpecPageCheck: boolean = false;
+  loadingServiceSpec: boolean = false;
+  loadingServiceSpec_more: boolean = false;
+  serviceSpecs: any[] = [];
+  nextServiceSpecs: any[] = [];
+  selectedServiceSpecs: ServiceSpecificationRef[] = [];
 
   //RESOURCE INFO:
-  resourceSpecPage=0;
-  resourceSpecPageCheck:boolean=false;
-  loadingResourceSpec:boolean=false;
-  loadingResourceSpec_more:boolean=false;
-  resourceSpecs:any[]=[];
-  nextResourceSpecs:any[]=[];
-  selectedResourceSpecs:ResourceSpecificationRef[]=[];
+  resourceSpecPage = 0;
+  resourceSpecPageCheck: boolean = false;
+  loadingResourceSpec: boolean = false;
+  loadingResourceSpec_more: boolean = false;
+  resourceSpecs: any[] = [];
+  nextResourceSpecs: any[] = [];
+  selectedResourceSpecs: ResourceSpecificationRef[] = [];
 
   //RELATIONSHIPS INFO:
-  prodRelationships:any[]=[];
-  relToCreate:any;
-  showCreateRel:boolean=false;
-  prodSpecRelPage=0;
-  prodSpecRelPageCheck:boolean=false;
-  loadingprodSpecRel:boolean=false;
-  loadingprodSpecRel_more:boolean=false;
-  prodSpecRels:any[]=[];
-  nextProdSpecRels:any[]=[];
-  selectedProdSpec:any={id:''};
-  selectedRelType:any='migration';
+  prodRelationships: any[] = [];
+  relToCreate: any;
+  showCreateRel: boolean = false;
+  prodSpecRelPage = 0;
+  prodSpecRelPageCheck: boolean = false;
+  loadingprodSpecRel: boolean = false;
+  loadingprodSpecRel_more: boolean = false;
+  prodSpecRels: any[] = [];
+  nextProdSpecRels: any[] = [];
+  selectedProdSpec: any = { id: '' };
+  selectedRelType: any = 'migration';
 
   //ATTACHMENT INFO
-  showImgPreview:boolean=false;
-  showNewAtt:boolean=false;
-  imgPreview:any='';
-  prodAttachments:AttachmentRefOrValue[]=[];
-  attachToCreate:AttachmentRefOrValue={url:'',attachmentType:''};
+  showImgPreview: boolean = false;
+  showNewAtt: boolean = false;
+  imgPreview: any = '';
+  prodAttachments: AttachmentRefOrValue[] = [];
+  attachToCreate: AttachmentRefOrValue = { url: '', attachmentType: '' };
   attFileName = new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z0-9 _.-]*')]);
   certFileName = new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z0-9 _.-]*')]);
   attImageName = new FormControl('', [Validators.required, Validators.pattern('^https?:\\/\\/.*\\.(?:png|jpg|jpeg|gif|bmp|webp)$')])
 
   //FINAL PRODUCT USING API CALL STRUCTURE
-  productSpecToCreate:ProductSpecification_Create | undefined;
+  productSpecToCreate: ProductSpecification_Create | undefined;
 
-  errorMessage:any='';
-  showError:boolean=false;
-  loading:boolean=false;
+  errorMessage: any = '';
+  showError: boolean = false;
+  loading: boolean = false;
 
   //CHARS
   stringValue: string = '';
@@ -184,17 +207,10 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
   rangeUnit: string = '';
   jsonValue: string = '';
   readonly dataSpaceCharacteristicTypes: string[] = [
-    'endpointUrl',
-    'upstreamAddress',
-    'endpointDescription',
-    'targetSpecification',
-    'serviceConfiguration',
     'credentialsConfiguration',
     'authorizationPolicy'
   ];
   readonly dataSpaceJsonCharacteristicTypes: string[] = [
-    'targetSpecification',
-    'serviceConfiguration',
     'credentialsConfiguration',
     'authorizationPolicy'
   ];
@@ -202,39 +218,40 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
   filenameRegex = /^[A-Za-z0-9_.-]+$/;
   private destroy$ = new Subject<void>();
 
+  get dspEnable(): boolean {
+    return environment.DSP_ENABLED && this.DATA_SPACE_ENABLED;
+  }
+
   constructor(
-    private router: Router,
-    private api: ApiServiceService,
     private prodSpecService: ProductSpecServiceService,
     private cdr: ChangeDetectorRef,
     private localStorage: LocalStorageService,
     private eventMessage: EventMessageService,
-    private elementRef: ElementRef,
     private attachmentService: AttachmentServiceService,
     private servSpecService: ServiceSpecServiceService,
     private resSpecService: ResourceSpecServiceService,
     private paginationService: PaginationService
   ) {
-    for(let i=0; i<certifications.length; i++){
+    for (let i = 0; i < certifications.length; i++) {
       this.availableISOS.push(certifications[i])
     }
     this.eventMessage.messages$
-    .pipe(takeUntil(this.destroy$))
-    .subscribe(ev => {
-      if(ev.type === 'ChangedSession') {
-        this.initPartyInfo();
-      }
-    })
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(ev => {
+        if (ev.type === 'ChangedSession') {
+          this.initPartyInfo();
+        }
+      })
   }
 
   @HostListener('document:click')
   onClick() {
-    if(this.showEmoji==true){
-      this.showEmoji=false;
+    if (this.showEmoji == true) {
+      this.showEmoji = false;
       this.cdr.detectChanges();
     }
-    if(this.showUploadFile==true){
-      this.showUploadFile=false;
+    if (this.showUploadFile == true) {
+      this.showUploadFile = false;
       this.cdr.detectChanges();
     }
   }
@@ -252,15 +269,15 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.initPartyInfo();
   }
 
-  ngOnDestroy(){
+  ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();
   }
 
-  initPartyInfo(){
+  initPartyInfo() {
     let aux = this.localStorage.getObject('login_items') as LoginInfo;
-    if(JSON.stringify(aux) != '{}' && (((aux.expire - moment().unix())-4) > 0)) {
-      if(aux.logged_as==aux.id){
+    if (JSON.stringify(aux) != '{}' && (((aux.expire - moment().unix()) - 4) > 0)) {
+      if (aux.logged_as == aux.id) {
         this.partyId = aux.partyId;
       } else {
         let loggedOrg = aux.organizations.find((element: { id: any; }) => element.id == aux.logged_as)
@@ -273,84 +290,84 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.eventMessage.emitSellerProductSpec(true);
   }
 
-  togglePreview(){
-    if(this.generalForm.value.description){
-      this.description=this.generalForm.value.description;
+  togglePreview() {
+    if (this.generalForm.value.description) {
+      this.description = this.generalForm.value.description;
     } else {
-      this.description=''
-    }
-  }
-
-  toggleGeneral(){
-    this.selectStep('general-info','general-circle');
-    this.showBundle=false;
-    this.showGeneral=true;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=false;
-    this.showPreview=false;
+      this.description = ''
+    }
+  }
+
+  toggleGeneral() {
+    this.selectStep('general-info', 'general-circle');
+    this.showBundle = false;
+    this.showGeneral = true;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = false;
+    this.showPreview = false;
     this.refreshChars();
   }
 
-  toggleBundle(){
-    this.selectStep('bundle','bundle-circle');
-    this.showBundle=true;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=false;
-    this.showPreview=false;
+  toggleBundle() {
+    this.selectStep('bundle', 'bundle-circle');
+    this.showBundle = true;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = false;
+    this.showPreview = false;
     this.refreshChars();
   }
 
-  toggleBundleCheck(){
-    this.prodSpecs=[];
-    this.bundlePage=0;
-    this.bundleChecked=!this.bundleChecked;
-    if(this.bundleChecked==true){
-      this.loadingBundle=true;
+  toggleBundleCheck() {
+    this.prodSpecs = [];
+    this.bundlePage = 0;
+    this.bundleChecked = !this.bundleChecked;
+    if (this.bundleChecked == true) {
+      this.loadingBundle = true;
       this.getProdSpecs(false);
     } else {
-      this.prodSpecsBundle=[];
+      this.prodSpecsBundle = [];
     }
   }
 
-  async getProdSpecs(next:boolean){
-    if(next==false){
-      this.loadingBundle=true;
+  async getProdSpecs(next: boolean) {
+    if (next == false) {
+      this.loadingBundle = true;
     }
 
     let options = {
-      "filters": ['Active','Launched'],
+      "filters": ['Active', 'Launched'],
       "partyId": this.partyId,
       //"sort": undefined,
       //"isBundle": false
     }
 
-    this.paginationService.getItemsPaginated(this.bundlePage, this.PROD_SPEC_LIMIT, next, this.prodSpecs,this.nextProdSpecs, options,
+    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.prodSpecs=data.items;
-      this.nextProdSpecs=data.nextItems;
-      this.bundlePage=data.page;
-      this.loadingBundle=false;
-      this.loadingBundle_more=false;
-    })
+        this.bundlePageCheck = data.page_check;
+        this.prodSpecs = data.items;
+        this.nextProdSpecs = data.nextItems;
+        this.bundlePage = data.page;
+        this.loadingBundle = false;
+        this.loadingBundle_more = false;
+      })
   }
 
-  async nextBundle(){
+  async nextBundle() {
     await this.getProdSpecs(true);
   }
 
-  addProdToBundle(prod:any){
+  addProdToBundle(prod: any) {
     const index = this.prodSpecsBundle.findIndex(item => item.id === prod.id);
     if (index !== -1) {
       console.log('eliminar')
@@ -368,7 +385,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     console.log(this.prodSpecsBundle)
   }
 
-  isProdInBundle(prod:any){
+  isProdInBundle(prod: any) {
     const index = this.prodSpecsBundle.findIndex(item => item.id === prod.id);
     if (index !== -1) {
       return true
@@ -377,43 +394,43 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     }
   }
 
-  toggleCompliance(){
-    this.selectStep('compliance','compliance-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=true;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=false;
-    this.showPreview=false;
+  toggleCompliance() {
+    this.selectStep('compliance', 'compliance-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = true;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = false;
+    this.showPreview = false;
     this.refreshChars();
   }
 
-  addISO(iso:any){
+  addISO(iso: any) {
     const index = this.availableISOS.findIndex(item => item.name === iso.name);
     if (index !== -1) {
       console.log('seleccionar')
       this.availableISOS.splice(index, 1);
-      this.selectedISOS.push({name: 'Compliance:'+iso.name, url: '', mandatory: iso.mandatory, domesupported: iso.domesupported});
+      this.selectedISOS.push({ name: 'Compliance:' + iso.name, url: '', mandatory: iso.mandatory, domesupported: iso.domesupported });
     }
-    this.buttonISOClicked=!this.buttonISOClicked;
+    this.buttonISOClicked = !this.buttonISOClicked;
     this.cdr.detectChanges();
     console.log(this.availableISOS)
     console.log(this.selectedISOS)
   }
 
-  removeISO(iso:any){
+  removeISO(iso: any) {
     const cleanedName = iso.name
-    .replace('Compliance:', '')
-    .trim();
+      .replace('Compliance:', '')
+      .trim();
     const index = this.selectedISOS.findIndex(item => item.name === iso.name);
     if (index !== -1) {
       console.log('seleccionar')
       this.selectedISOS.splice(index, 1);
-      this.availableISOS.push({name: cleanedName, mandatory: iso.mandatory, domesupported: iso.domesupported});
+      this.availableISOS.push({ name: cleanedName, mandatory: iso.mandatory, domesupported: iso.domesupported });
 
       //if (iso.name in this.verifiedISO) {
       //  delete this.verifiedISO[iso.name]
@@ -423,7 +440,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     console.log(this.prodSpecsBundle)
   }
 
-  removeCert(iso:any){
+  removeCert(iso: any) {
     const index = this.additionalISOS.findIndex(item => item.name === iso.name);
     if (index !== -1) {
       console.log('eliminar additional cert')
@@ -433,7 +450,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.cdr.detectChanges();
   }
 
-  removeSelfAtt(){
+  removeSelfAtt() {
     console.log('remove self att')
     console.log(this.selfAtt)
     const index = this.finishChars.findIndex(item => item.name === this.selfAtt.name);
@@ -442,16 +459,16 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       console.log('seleccionar')
       this.finishChars.splice(index, 1);
     }
-    this.selfAtt='';
+    this.selfAtt = '';
     this.cdr.detectChanges();
     console.log(this.finishChars)
   }
 
-  checkValidISOS():boolean{
+  checkValidISOS(): boolean {
     let invalid = this.selectedISOS.find((p => {
       return p.url === ''
     }));
-    if(invalid){
+    if (invalid) {
       return true;
     } else {
       return false;
@@ -467,7 +484,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     return !!selfAttestationValue;
   }
 
-  public dropped(files: NgxFileDropEntry[],sel:any) {
+  public dropped(files: NgxFileDropEntry[], sel: any) {
     this.files = files;
     for (const droppedFile of files) {
 
@@ -483,157 +500,157 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
               const base64String: string = e.target.result.split(',')[1];
               console.log('BASE 64....')
               console.log(base64String); // You can use this base64 string as needed
-              let prod_name='';
-              if(this.generalForm.value.name!=null){
-                prod_name=this.generalForm.value.name.replaceAll(/\s/g,'')+'_';
+              let prod_name = '';
+              if (this.generalForm.value.name != null) {
+                prod_name = this.generalForm.value.name.replaceAll(/\s/g, '') + '_';
               }
               let fileBody = {
                 content: {
-                  name: uuidv4()+'_'+file.name,
+                  name: uuidv4() + '_' + file.name,
                   data: base64String
                 },
                 contentType: file.type,
                 isPublic: true
               }
-              if(!this.isValidFilename(fileBody.content.name)){
-                this.errorMessage='File names can only include alphabetical characters (A-Z, a-z) and a limited set of symbols, such as underscores (_), hyphens (-), and periods (.)';
+              if (!this.isValidFilename(fileBody.content.name)) {
+                this.errorMessage = 'File names can only include alphabetical characters (A-Z, a-z) and a limited set of symbols, such as underscores (_), hyphens (-), and periods (.)';
                 console.error('There was an error while uploading file!');
-                this.showError=true;
+                this.showError = true;
                 setTimeout(() => {
                   this.showError = false;
                 }, 3000);
                 return;
               }
               //IF FILES ARE HIGHER THAN 3MB THROW AN ERROR
-              if(file.size>this.MAX_FILE_SIZE){
-                this.errorMessage='File size must be under 3MB.';
+              if (file.size > this.MAX_FILE_SIZE) {
+                this.errorMessage = 'File size must be under 3MB.';
                 console.error('There was an error while uploading file!');
-                this.showError=true;
+                this.showError = true;
                 setTimeout(() => {
                   this.showError = false;
                 }, 3000);
                 return;
               }
-              if(this.isCurrentStep('compliance') && !this.showUploadAtt){
+              if (this.currentStep.id === 'compliance' && !this.showUploadAtt) {
                 const index = this.selectedISOS.findIndex(item => item.name === sel.name);
                 this.attachmentService.uploadFile(fileBody).subscribe({
                   next: data => {
-                    if(index!==-1){
-                      this.selectedISOS[index].url=data.content;
+                    if (index !== -1) {
+                      this.selectedISOS[index].url = data.content;
                       //this.selectedISOS[index].attachmentType=file.type;
-                      this.showUploadFile=false;
+                      this.showUploadFile = false;
                       this.cdr.detectChanges();
                       console.log('uploaded')
                     } else {
-                      this.isoToCreate=data.content;
+                      this.isoToCreate = data.content;
                     }
                   },
                   error: error => {
-                      console.error('There was an error while uploading the file!', error);
-                      if(error.error.error){
-                        console.log(error)
-                        this.errorMessage='Error: '+error.error.error;
-                      } else {
-                        this.errorMessage='There was an error while uploading the file!';
-                      }
-                      if (error.status === 413) {
-                        this.errorMessage='File size too large! Must be under 3MB.';
-                      }
-                      this.showError=true;
-                      setTimeout(() => {
-                        this.showError = false;
-                      }, 3000);
+                    console.error('There was an error while uploading the file!', error);
+                    if (error.error.error) {
+                      console.log(error)
+                      this.errorMessage = 'Error: ' + error.error.error;
+                    } else {
+                      this.errorMessage = 'There was an error while uploading the file!';
+                    }
+                    if (error.status === 413) {
+                      this.errorMessage = 'File size too large! Must be under 3MB.';
+                    }
+                    this.showError = true;
+                    setTimeout(() => {
+                      this.showError = false;
+                    }, 3000);
                   }
                 });
               }
-              if(this.isCurrentStep('compliance') && this.showUploadAtt){
+              if (this.currentStep.id === 'compliance' && this.showUploadAtt) {
                 const index = this.finishChars.findIndex(item => item.name === this.selfAtt.name);
                 this.attachmentService.uploadFile(fileBody).subscribe({
                   next: data => {
-                      console.log(data)
-                      if (index !== -1) {
-                        this.selfAtt.productSpecCharacteristicValue=[{
+                    console.log(data)
+                    if (index !== -1) {
+                      this.selfAtt.productSpecCharacteristicValue = [{
+                        isDefault: true,
+                        value: data.content
+                      }];
+                      this.finishChars[index] = this.selfAtt;
+                    } else {
+                      this.selfAtt = {
+                        id: 'urn:ngsi-ld:characteristic:' + uuidv4(),
+                        name: 'Compliance:SelfAtt',
+                        productSpecCharacteristicValue: [{
                           isDefault: true,
                           value: data.content
-                        }];
-                        this.finishChars[index] = this.selfAtt;
-                      } else {
-                        this.selfAtt = {
-                          id: 'urn:ngsi-ld:characteristic:'+uuidv4(),
-                          name: 'Compliance:SelfAtt',
-                          productSpecCharacteristicValue: [{
-                            isDefault: true,
-                            value: data.content
-                          }]
-                        }
-                        this.finishChars.push(this.selfAtt)
+                        }]
                       }
-                      this.showUploadFile=false;
-                      this.showUploadAtt=false;
-                      this.cdr.detectChanges();
-                      console.log('uploaded')
+                      this.finishChars.push(this.selfAtt)
+                    }
+                    this.showUploadFile = false;
+                    this.showUploadAtt = false;
+                    this.cdr.detectChanges();
+                    console.log('uploaded')
                   },
                   error: error => {
-                      console.error('There was an error while uploading the file!', error);
-                      if(error.error.error){
-                        console.log(error)
-                        this.errorMessage='Error: '+error.error.error;
-                      } else {
-                        this.errorMessage='There was an error while uploading the file!';
-                      }
-                      if (error.status === 413) {
-                        this.errorMessage='File size too large! Must be under 3MB.';
-                      }
-                      this.showError=true;
-                      setTimeout(() => {
-                        this.showError = false;
-                      }, 3000);
+                    console.error('There was an error while uploading the file!', error);
+                    if (error.error.error) {
+                      console.log(error)
+                      this.errorMessage = 'Error: ' + error.error.error;
+                    } else {
+                      this.errorMessage = 'There was an error while uploading the file!';
+                    }
+                    if (error.status === 413) {
+                      this.errorMessage = 'File size too large! Must be under 3MB.';
+                    }
+                    this.showError = true;
+                    setTimeout(() => {
+                      this.showError = false;
+                    }, 3000);
                   }
                 });
               }
-              if(this.isCurrentStep('attachments')){
+              if (this.currentStep.id === 'attachments') {
                 console.log(file)
                 this.attachmentService.uploadFile(fileBody).subscribe({
                   next: data => {
-                      console.log(data)
-                      if(sel=='img'){
-                        if(file.type.startsWith("image")){
-                          this.showImgPreview=true;
-                          this.imgPreview=data.content;
-                          this.prodAttachments.push({
-                            name: 'Profile Picture',
-                            url: this.imgPreview,
-                            attachmentType: file.type
-                          })
-                        } else {
-                          this.errorMessage='File must have a valid image format!';
-                          this.showError=true;
-                          setTimeout(() => {
-                            this.showError = false;
-                          }, 3000);
-                        }
+                    console.log(data)
+                    if (sel == 'img') {
+                      if (file.type.startsWith("image")) {
+                        this.showImgPreview = true;
+                        this.imgPreview = data.content;
+                        this.prodAttachments.push({
+                          name: 'Profile Picture',
+                          url: this.imgPreview,
+                          attachmentType: file.type
+                        })
                       } else {
-                        this.attachToCreate={url:data.content,attachmentType:file.type};
+                        this.errorMessage = 'File must have a valid image format!';
+                        this.showError = true;
+                        setTimeout(() => {
+                          this.showError = false;
+                        }, 3000);
                       }
+                    } else {
+                      this.attachToCreate = { url: data.content, attachmentType: file.type };
+                    }
 
-                      this.cdr.detectChanges();
-                      console.log('uploaded')
+                    this.cdr.detectChanges();
+                    console.log('uploaded')
                   },
                   error: error => {
-                      console.error('There was an error while uploading!', error);
-                      if(error.error.error){
-                        console.log(error)
-                        this.errorMessage='Error: '+error.error.error;
-                      } else {
-                        this.errorMessage='There was an error while uploading the file!';
-                      }
-                      if (error.status === 413) {
-                        this.errorMessage='File size too large! Must be under 3MB.';
-                      }
-                      this.showError=true;
-                      setTimeout(() => {
-                        this.showError = false;
-                      }, 3000);
+                    console.error('There was an error while uploading!', error);
+                    if (error.error.error) {
+                      console.log(error)
+                      this.errorMessage = 'Error: ' + error.error.error;
+                    } else {
+                      this.errorMessage = 'There was an error while uploading the file!';
+                    }
+                    if (error.status === 413) {
+                      this.errorMessage = 'File size too large! Must be under 3MB.';
+                    }
+                    this.showError = true;
+                    setTimeout(() => {
+                      this.showError = false;
+                    }, 3000);
                   }
                 });
               }
@@ -654,51 +671,51 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     return this.filenameRegex.test(filename);
   }
 
-  public fileOver(event: any){
+  public fileOver(event: any) {
     console.log(event);
   }
 
-  public fileLeave(event: any){
+  public fileLeave(event: any) {
     console.log('leave')
     console.log(event);
   }
 
-  toggleUploadSelfAtt(){
-    this.showUploadFile=true;
-    this.showUploadAtt=true;
+  toggleUploadSelfAtt() {
+    this.showUploadFile = true;
+    this.showUploadAtt = true;
   }
 
-  toggleUploadFile(sel:any){
-    this.showUploadFile=true;
-    this.selectedISO=sel;
+  toggleUploadFile(sel: any) {
+    this.showUploadFile = true;
+    this.selectedISO = sel;
   }
 
-  uploadFile(){
+  uploadFile() {
     console.log('uploading...')
   }
 
-  toggleChars(){
-    this.selectStep('chars','chars-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=true;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=false;
-
-    this.showCreateChar=false;
-    this.charTypeSelected='string';
-    this.showPreview=false;
+  toggleChars() {
+    this.selectStep('chars', 'chars-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = true;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = false;
+
+    this.showCreateChar = false;
+    this.charTypeSelected = 'string';
+    this.showPreview = false;
     this.refreshChars();
   }
 
-  toggleCreateCharacteristicForm(){
+  toggleCreateCharacteristicForm() {
     this.showCreateChar = !this.showCreateChar;
     if (this.showCreateChar) {
-      this.charTypeSelected = this.getInitialCharacteristicTypeForCurrentStep();
+      this.charTypeSelected = this.dataSpaceCharacteristicTypes[0];
       this.creatingChars = [];
       this.isOptional = false;
       this.optionalDftTrue = false;
@@ -709,53 +726,56 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     }
   }
 
-  toggleResource(){
-    this.loadingResourceSpec=true;
-    this.resourceSpecs=[];
-    this.resourceSpecPage=0;
+  toggleResource() {
+    this.loadingResourceSpec = true;
+    this.resourceSpecs = [];
+    this.resourceSpecPage = 0;
     this.getResSpecs(false);
-    this.selectStep('resource','resource-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=true;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=false;
-    this.showPreview=false;
+    this.selectStep('resource', 'resource-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = true;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = false;
+    this.showPreview = false;
     this.refreshChars();
   }
 
-  async getResSpecs(next:boolean){
-    if(next==false){
-      this.loadingResourceSpec=true;
+  async getResSpecs(next: boolean) {
+    if (next == false) {
+      this.loadingResourceSpec = true;
     }
 
     let options = {
-      "filters": ['Active','Launched'],
+      "filters": ['Active', 'Launched'],
       "partyId": this.partyId,
       //"sort": undefined,
       //"isBundle": false
     }
 
-    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.resourceSpecs=data.items;
-      this.nextResourceSpecs=data.nextItems;
-      this.resourceSpecPage=data.page;
-      this.loadingResourceSpec=false;
-      this.loadingResourceSpec_more=false;
-    })
+    try {
+      const data = await this.paginationService.getItemsPaginated(this.resourceSpecPage, this.RES_SPEC_LIMIT, next, this.resourceSpecs, this.nextResourceSpecs, options,
+        this.resSpecService.getResourceSpecByUser.bind(this.resSpecService));
+      this.resourceSpecPageCheck = data.page_check;
+      this.resourceSpecs = data.items;
+      this.nextResourceSpecs = data.nextItems;
+      this.resourceSpecPage = data.page;
+    } finally {
+      this.loadingResourceSpec = false;
+      this.loadingResourceSpec_more = false;
+    }
   }
 
-  async nextRes(){
+  async nextRes() {
+    this.loadingResourceSpec_more = true;
     await this.getResSpecs(true);
   }
 
-  addResToSelected(res:any){
+  addResToSelected(res: any) {
     const index = this.selectedResourceSpecs.findIndex(item => item.id === res.id);
     if (index !== -1) {
       console.log('eliminar')
@@ -772,7 +792,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     console.log(this.selectedResourceSpecs)
   }
 
-  isResSelected(res:any){
+  isResSelected(res: any) {
     const index = this.selectedResourceSpecs.findIndex(item => item.id === res.id);
     if (index !== -1) {
       return true
@@ -781,53 +801,53 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     }
   }
 
-  toggleService(){
-    this.loadingServiceSpec=true;
-    this.serviceSpecs=[];
-    this.serviceSpecPage=0;
+  toggleService() {
+    this.loadingServiceSpec = true;
+    this.serviceSpecs = [];
+    this.serviceSpecPage = 0;
     this.getServSpecs(false);
-    this.selectStep('service','service-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=true;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=false;
-    this.showPreview=false;
+    this.selectStep('service', 'service-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = true;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = false;
+    this.showPreview = false;
     this.refreshChars();
   }
 
-  async getServSpecs(next:boolean){
-    if(next==false){
-      this.loadingServiceSpec=true;
+  async getServSpecs(next: boolean) {
+    if (next == false) {
+      this.loadingServiceSpec = true;
     }
 
     let options = {
-      "filters": ['Active','Launched'],
+      "filters": ['Active', 'Launched'],
       "partyId": this.partyId,
       //"sort": undefined,
       //"isBundle": false
     }
 
-    this.paginationService.getItemsPaginated(this.serviceSpecPage, this.SERV_SPEC_LIMIT, next, this.serviceSpecs,this.nextServiceSpecs, options,
+    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.serviceSpecs=data.items;
-      this.nextServiceSpecs=data.nextItems;
-      this.serviceSpecPage=data.page;
-      this.loadingServiceSpec=false;
-      this.loadingServiceSpec_more=false;
-    })
+        this.serviceSpecPageCheck = data.page_check;
+        this.serviceSpecs = data.items;
+        this.nextServiceSpecs = data.nextItems;
+        this.serviceSpecPage = data.page;
+        this.loadingServiceSpec = false;
+        this.loadingServiceSpec_more = false;
+      })
   }
 
-  async nextServ(){
+  async nextServ() {
     await this.getServSpecs(true);
   }
 
-  addServToSelected(serv:any){
+  addServToSelected(serv: any) {
     const index = this.selectedServiceSpecs.findIndex(item => item.id === serv.id);
     if (index !== -1) {
       console.log('eliminar')
@@ -844,7 +864,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     console.log(this.selectedServiceSpecs)
   }
 
-  isServSelected(serv:any){
+  isServSelected(serv: any) {
     const index = this.selectedServiceSpecs.findIndex(item => item.id === serv.id);
     if (index !== -1) {
       return true
@@ -853,38 +873,38 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     }
   }
 
-  toggleAttach(){
-    this.selectStep('attach','attach-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=true;
-    this.showRelationships=false;
-    this.showSummary=false;
-    this.showPreview=false;
+  toggleAttach() {
+    this.selectStep('attach', 'attach-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = true;
+    this.showRelationships = false;
+    this.showSummary = false;
+    this.showPreview = false;
     setTimeout(() => {
       initFlowbite();
     }, 100);
     this.refreshChars();
   }
 
-  removeImg(){
-    this.showImgPreview=false;
+  removeImg() {
+    this.showImgPreview = false;
     const index = this.prodAttachments.findIndex(item => item.url === this.imgPreview);
     if (index !== -1) {
       console.log('eliminar')
       this.prodAttachments.splice(index, 1);
     }
-    this.imgPreview='';
+    this.imgPreview = '';
     this.cdr.detectChanges();
   }
 
-  saveImgFromURL(){
-    this.showImgPreview=true;
-    this.imgPreview=this.imgURL.nativeElement.value;
+  saveImgFromURL() {
+    this.showImgPreview = true;
+    this.imgPreview = this.imgURL.nativeElement.value;
     this.prodAttachments.push({
       name: 'Profile Picture',
       url: this.imgPreview,
@@ -894,13 +914,13 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.cdr.detectChanges();
   }
 
-  removeAtt(att:any){
+  removeAtt(att: any) {
     const index = this.prodAttachments.findIndex(item => item.url === att.url);
     if (index !== -1) {
       console.log('eliminar')
-      if(this.prodAttachments[index].name=='Profile Picture'){
-        this.showImgPreview=false;
-        this.imgPreview='';
+      if (this.prodAttachments[index].name == 'Profile Picture') {
+        this.showImgPreview = false;
+        this.imgPreview = '';
         this.cdr.detectChanges();
       }
       this.prodAttachments.splice(index, 1);
@@ -908,70 +928,70 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.cdr.detectChanges();
   }
 
-  saveAtt(){
+  saveAtt() {
     console.log('saving')
     this.prodAttachments.push({
       name: this.attachName.nativeElement.value,
       url: this.attachToCreate.url,
       attachmentType: this.attachToCreate.attachmentType
     })
-    this.attachName.nativeElement.value='';
-    this.attachToCreate={url:'',attachmentType:''};
-    this.showNewAtt=false;
+    this.attachName.nativeElement.value = '';
+    this.attachToCreate = { url: '', attachmentType: '' };
+    this.showNewAtt = false;
     this.attFileName.reset();
   }
 
-  clearAtt(){
-    this.attachToCreate={url:'',attachmentType:''};
+  clearAtt() {
+    this.attachToCreate = { url: '', attachmentType: '' };
   }
 
-  saveAdditionalCert(){
+  saveAdditionalCert() {
     console.log('saving')
     this.additionalISOS.push({
-      name: 'Compliance:'+this.certificationName.nativeElement.value,
+      name: 'Compliance:' + this.certificationName.nativeElement.value,
       url: this.isoToCreate
     })
-    this.certificationName.nativeElement.value='';
-    this.isoToCreate='';
+    this.certificationName.nativeElement.value = '';
+    this.isoToCreate = '';
     this.certFileName.reset();
-    this.showCert=false;
+    this.showCert = false;
   }
 
-  clearAdditionalCert(urlonly:boolean){
-    if(!urlonly){
-      this.certificationName.nativeElement.value='';
+  clearAdditionalCert(urlonly: boolean) {
+    if (!urlonly) {
+      this.certificationName.nativeElement.value = '';
       this.certFileName.reset();
     }
-    this.isoToCreate='';
+    this.isoToCreate = '';
   }
 
-  toggleRelationship(){
-    this.prodSpecRels=[];
-    this.prodSpecRelPage=0;
-    this.showCreateRel=false;
-    this.loadingprodSpecRel=true;
+  toggleRelationship() {
+    this.prodSpecRels = [];
+    this.prodSpecRelPage = 0;
+    this.showCreateRel = false;
+    this.loadingprodSpecRel = true;
     this.getProdSpecsRel(false);
-    this.selectStep('relationships','relationships-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=true;
-    this.showSummary=false;
-    this.showPreview=false;
+    this.selectStep('relationships', 'relationships-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = true;
+    this.showSummary = false;
+    this.showPreview = false;
     this.refreshChars();
   }
 
-  async getProdSpecsRel(next:boolean){
-    if(next==false){
-      this.loadingprodSpecRel=true;
+  async getProdSpecsRel(next: boolean) {
+    if (next == false) {
+      this.loadingprodSpecRel = true;
     }
 
     let options = {
-      "filters": ['Active','Launched'],
+      "filters": ['Active', 'Launched'],
       "partyId": this.partyId,
       //"sort": undefined,
       //"isBundle": false
@@ -979,41 +999,41 @@ 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.prodSpecRels=data.items;
-      this.nextProdSpecRels=data.nextItems;
-      this.prodSpecRelPage=data.page;
-      this.loadingprodSpecRel=false;
-      this.loadingprodSpecRel_more=false;
-    })
+        this.prodSpecRelPageCheck = data.page_check;
+        this.prodSpecRels = data.items;
+        this.nextProdSpecRels = data.nextItems;
+        this.prodSpecRelPage = data.page;
+        this.loadingprodSpecRel = false;
+        this.loadingprodSpecRel_more = false;
+      })
   }
 
-  selectRelationship(rel:any){
-    this.selectedProdSpec=rel;
+  selectRelationship(rel: any) {
+    this.selectedProdSpec = rel;
   }
 
-  async nextProdSpecsRel(){
+  async nextProdSpecsRel() {
     await this.getProdSpecsRel(true);
   }
 
   onRelChange(event: any) {
     console.log('relation type changed')
-    this.selectedRelType=event.target.value
+    this.selectedRelType = event.target.value
   }
 
-  saveRel(){
-    this.showCreateRel=false;
+  saveRel() {
+    this.showCreateRel = false;
     this.prodRelationships.push({
       id: this.selectedProdSpec.id,
       href: this.selectedProdSpec.href,
       relationshipType: this.selectedRelType,
       productSpec: this.selectedProdSpec
     });
-    this.selectedRelType='migration';
+    this.selectedRelType = 'migration';
     console.log(this.prodRelationships)
   }
 
-  deleteRel(rel:any){
+  deleteRel(rel: any) {
     const index = this.prodRelationships.findIndex(item => item.id === rel.id);
     if (index !== -1) {
       console.log('eliminar')
@@ -1022,90 +1042,90 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.cdr.detectChanges();
   }
 
-  refreshChars(){
-    this.stringValue= '';
+  refreshChars() {
+    this.stringValue = '';
     this.numberValue = '';
     this.numberUnit = '';
     this.fromValue = '';
     this.toValue = '';
     this.rangeUnit = '';
     this.jsonValue = '';
-    this.charTypeSelected=this.getInitialCharacteristicTypeForCurrentStep();
-    this.booleanDefaultTrue=true;
-    this.isOptional=false;
-    this.optionalDftTrue=false;
-    this.creatingChars=[];
+    this.charTypeSelected = this.getInitialCharacteristicTypeForCurrentStep();
+    this.booleanDefaultTrue = true;
+    this.isOptional = false;
+    this.optionalDftTrue = false;
+    this.creatingChars = [];
   }
 
-  setBooleanDefaultValues(){
-    this.creatingChars=[
+  setBooleanDefaultValues() {
+    this.creatingChars = [
       {
-        isDefault:this.booleanDefaultTrue,
-        value:true as any
+        isDefault: this.booleanDefaultTrue,
+        value: true as any
       },
       {
-        isDefault:!this.booleanDefaultTrue,
-        value:false as any
+        isDefault: !this.booleanDefaultTrue,
+        value: false as any
       }
     ];
   }
 
-  onBooleanDefaultChange(){
-    if(this.charTypeSelected == 'boolean'){
+  onBooleanDefaultChange() {
+    if (this.charTypeSelected == 'boolean') {
       this.setBooleanDefaultValues();
     }
   }
 
-  removeClass(elem: HTMLElement, cls:string) {
+  removeClass(elem: HTMLElement, cls: string) {
     var str = " " + elem.className + " ";
     elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
   }
 
-  addClass(elem: HTMLElement, cls:string) {
-      elem.className += (" " + cls);
+  addClass(elem: HTMLElement, cls: string) {
+    elem.className += (" " + cls);
   }
 
-  unselectMenu(elem:HTMLElement | null,cls:string){
-    if(elem != null){
-      if(elem.className.match(cls)){
-        this.removeClass(elem,cls)
+  unselectMenu(elem: HTMLElement | null, cls: string) {
+    if (elem != null) {
+      if (elem.className.match(cls)) {
+        this.removeClass(elem, cls)
       } else {
         console.log('already unselected')
       }
     }
   }
 
-  selectMenu(elem:HTMLElement| null,cls:string){
-    if(elem != null){
-      if(elem.className.match(cls)){
+  selectMenu(elem: HTMLElement | null, cls: string) {
+    if (elem != null) {
+      if (elem.className.match(cls)) {
         console.log('already selected')
       } else {
-        this.addClass(elem,cls)
+        this.addClass(elem, cls)
       }
     }
   }
 
   //STEPS CSS EFFECTS:
-  selectStep(step:string,stepCircle:string){
+  selectStep(step: string, stepCircle: string) {
     const index = this.stepsElements.findIndex(item => item === step);
     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')
-      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(step), 'text-primary-100 dark:text-primary-50')
+      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.stepsElements.push(step);
     }
     const circleIndex = this.stepsCircles.findIndex(item => item === stepCircle);
     if (index !== -1) {
       this.stepsCircles.splice(circleIndex, 1);
-      this.selectMenu(document.getElementById(stepCircle),'border-primary-100 dark:border-primary-50')
-      this.unselectMenu(document.getElementById(stepCircle),'border-gray-400');
-      for(let i=0; i<this.stepsCircles.length;i++){
-        this.unselectMenu(document.getElementById(this.stepsCircles[i]),'border-primary-100 dark:border-primary-50')
-        this.selectMenu(document.getElementById(this.stepsCircles[i]),'border-gray-400');
+      this.selectMenu(document.getElementById(stepCircle), 'border-primary-100 dark:border-primary-50')
+      this.unselectMenu(document.getElementById(stepCircle), 'border-gray-400');
+      for (let i = 0; i < this.stepsCircles.length; i++) {
+        this.unselectMenu(document.getElementById(this.stepsCircles[i]), 'border-primary-100 dark:border-primary-50')
+        this.selectMenu(document.getElementById(this.stepsCircles[i]), 'border-gray-400');
       }
       this.stepsCircles.push(stepCircle);
     }
@@ -1121,14 +1141,14 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     this.toValue = '';
     this.rangeUnit = '';
     this.jsonValue = '';
-    this.isOptional=false;
-    this.optionalDftTrue=false;
-    if(this.charTypeSelected == 'boolean'){
-      this.booleanDefaultTrue=true;
+    this.isOptional = false;
+    this.optionalDftTrue = false;
+    if (this.charTypeSelected == 'boolean') {
+      this.booleanDefaultTrue = true;
       this.setBooleanDefaultValues();
     } else {
-      this.booleanDefaultTrue=true;
-      this.creatingChars=[];
+      this.booleanDefaultTrue = true;
+      this.creatingChars = [];
     }
   }
 
@@ -1147,15 +1167,11 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
   }
 
   isDataspaceConfigurationStep(): boolean {
-    return this.isCurrentStep('dataspace');
-  }
-
-  isDefaultCharacteristicsStep(): boolean {
-    return this.isCurrentStep('characteristics');
+    return this.currentStep.id === 'dataspace';
   }
 
   isTextCharacteristicType(type: string | undefined): boolean {
-    return type === 'string' || type === 'endpointUrl' || type === 'upstreamAddress' || type === 'endpointDescription';
+    return type === 'string' || type === 'endpointUrl' || type === 'upstreamAddress' || type === 'endpointDescription' || type === 'transferPath';
   }
 
   getFilteredCharacteristicsForCurrentStep(): ProductSpecificationCharacteristic[] {
@@ -1168,71 +1184,30 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
 
   getInitialCharacteristicTypeForCurrentStep(): string {
     if (this.isDataspaceConfigurationStep()) {
-      return this.dataSpaceCharacteristicTypes[0];
+      return 'credentialsConfiguration';
     }
     return 'string';
   }
 
-  private getFormSteps(): string[] {
-    const steps: string[] = ['General Info'];
+  private getFormSteps(): Step[] {
+
+    const steps: Step[] = [{ label: 'General Info', id: 'general' }];
     if (this.BUNDLE_ENABLED) {
-      steps.push('Bundle');
+      steps.push({ label: 'Bundle', id: 'bundle' });
     }
-    steps.push('Compliance profile');
-    steps.push('Characteristics');
+    steps.push({ label: 'Compliance profile', id: 'compliance' });
+    steps.push({ label: 'Characteristics', id: 'characteristics' });
     if (this.DATA_SPACE_ENABLED) {
-      steps.push('Dataspace Configuration');
+      steps.push({ label: 'Dataspace Configuration', id: 'dataspace' });
     }
-    steps.push('Resource specifications');
-    steps.push('Service specifications');
-    steps.push('Attachments');
-    steps.push('Relationships');
-    steps.push('Summary');
+    steps.push({ label: 'Resource specifications', id: 'resource' });
+    steps.push({ label: 'Service specifications', id: 'service' });
+    steps.push({ label: 'Attachments', id: 'attachments' });
+    steps.push({ label: 'Relationships', id: 'relationships' });
+    steps.push({ label: 'Summary', id: 'summary' });
     return steps;
   }
 
-  private getStepIndex(step: ProductSpecFormStep): number {
-    const bundleOffset = this.BUNDLE_ENABLED ? 1 : 0;
-    const complianceIndex = 1 + bundleOffset;
-    const characteristicsIndex = complianceIndex + 1;
-    const dataspaceIndex = this.DATA_SPACE_ENABLED ? characteristicsIndex + 1 : -1;
-    const resourceIndex = characteristicsIndex + (this.DATA_SPACE_ENABLED ? 2 : 1);
-    const serviceIndex = resourceIndex + 1;
-    const attachmentsIndex = serviceIndex + 1;
-    const relationshipsIndex = attachmentsIndex + 1;
-    const summaryIndex = relationshipsIndex + 1;
-
-    switch (step) {
-      case 'general':
-        return 0;
-      case 'bundle':
-        return this.BUNDLE_ENABLED ? 1 : -1;
-      case 'compliance':
-        return complianceIndex;
-      case 'characteristics':
-        return characteristicsIndex;
-      case 'dataspace':
-        return dataspaceIndex;
-      case 'resource':
-        return resourceIndex;
-      case 'service':
-        return serviceIndex;
-      case 'attachments':
-        return attachmentsIndex;
-      case 'relationships':
-        return relationshipsIndex;
-      case 'summary':
-        return summaryIndex;
-      default:
-        return -1;
-    }
-  }
-
-  isCurrentStep(step: ProductSpecFormStep): boolean {
-    const index = this.getStepIndex(step);
-    return index >= 0 && this.currentStep === index;
-  }
-
   private getSchemaLocationForType(type: string): string | null {
     if (type === 'credentialsConfiguration') {
       return 'https://raw.githubusercontent.com/FIWARE/contract-management/refs/heads/main/schemas/credentials/credentialConfigCharacteristic.json';
@@ -1243,39 +1218,39 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     return null;
   }
 
-  addCharValue(){
-    if(this.isTextCharacteristicType(this.charTypeSelected)){
+  addCharValue() {
+    if (this.isTextCharacteristicType(this.charTypeSelected)) {
       console.log('string')
-      if(this.creatingChars.length==0){
+      if (this.creatingChars.length == 0) {
         this.creatingChars.push({
-          isDefault:true,
-          value:this.stringValue as any
+          isDefault: true,
+          value: this.stringValue as any
         })
-      } else{
+      } else {
         this.creatingChars.push({
-          isDefault:false,
-          value:this.stringValue as any
+          isDefault: false,
+          value: this.stringValue as any
         })
       }
-      this.stringValue='';
-    } else if (this.charTypeSelected == 'number'){
+      this.stringValue = '';
+    } else if (this.charTypeSelected == 'number') {
       console.log('number')
-      if(this.creatingChars.length==0){
+      if (this.creatingChars.length == 0) {
         this.creatingChars.push({
-          isDefault:true,
-          value:this.numberValue as any,
-          unitOfMeasure:this.numberUnit
+          isDefault: true,
+          value: this.numberValue as any,
+          unitOfMeasure: this.numberUnit
         })
-      } else{
+      } else {
         this.creatingChars.push({
-          isDefault:false,
-          value:this.numberValue as any,
-          unitOfMeasure:this.numberUnit
+          isDefault: false,
+          value: this.numberValue as any,
+          unitOfMeasure: this.numberUnit
         })
       }
-      this.numberUnit='';
-      this.numberValue='';
-    }else if(this.charTypeSelected == 'range'){
+      this.numberUnit = '';
+      this.numberValue = '';
+    } else if (this.charTypeSelected == 'range') {
       console.log('range')
       // Validate that fromValue < toValue
       const fromVal = Number(this.fromValue);
@@ -1284,29 +1259,30 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
         console.log('range validation error: valueFrom >= valueTo')
         this.errorMessage = 'Invalid range: "From" value must be less than "To" value';
         this.showError = true;
-        setTimeout(() => {this.showError = false}, 3000);
+        setTimeout(() => { this.showError = false }, 3000);
         return;
       }
 
-      if(this.creatingChars.length==0){
+      if (this.creatingChars.length == 0) {
         this.creatingChars.push({
-          isDefault:true,
-          valueFrom:this.fromValue as any,
-          valueTo:this.toValue as any,
-          unitOfMeasure:this.rangeUnit
+          isDefault: true,
+          valueFrom: this.fromValue as any,
+          valueTo: this.toValue as any,
+          unitOfMeasure: this.rangeUnit
         })
-      } else{
+      } else {
         this.creatingChars.push({
-          isDefault:false,
-          valueFrom:this.fromValue as any,
-          valueTo:this.toValue as any,
-          unitOfMeasure:this.rangeUnit})
+          isDefault: false,
+          valueFrom: this.fromValue as any,
+          valueTo: this.toValue as any,
+          unitOfMeasure: this.rangeUnit
+        })
       }
     } else if (this.isJsonCharacteristicType(this.charTypeSelected)) {
       if (this.creatingChars.length > 0) {
         this.errorMessage = 'Only one JSON value is allowed';
         this.showError = true;
-        setTimeout(() => {this.showError = false}, 3000);
+        setTimeout(() => { this.showError = false }, 3000);
         return;
       }
       try {
@@ -1319,10 +1295,10 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       } catch (error) {
         this.errorMessage = 'Invalid JSON format';
         this.showError = true;
-        setTimeout(() => {this.showError = false}, 3000);
+        setTimeout(() => { this.showError = false }, 3000);
         return;
       }
-    } else if (this.charTypeSelected == 'boolean'){
+    } else if (this.charTypeSelected == 'boolean') {
       console.log('boolean values are fixed')
       return;
     } else {
@@ -1330,8 +1306,8 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     }
   }
 
-  removeCharValue(char:any,idx:any){
-    if(this.charTypeSelected == 'boolean'){
+  removeCharValue(char: any, idx: any) {
+    if (this.charTypeSelected == 'boolean') {
       return;
     }
     console.log(this.creatingChars)
@@ -1339,26 +1315,26 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     console.log(this.creatingChars)
   }
 
-  selectDefaultChar(char:any,idx:any){
-    for(let i=0;i<this.creatingChars.length;i++){
-      if(i==idx){
-        this.creatingChars[i].isDefault=true;
+  selectDefaultChar(char: any, idx: any) {
+    for (let i = 0; i < this.creatingChars.length; i++) {
+      if (i == idx) {
+        this.creatingChars[i].isDefault = true;
       } else {
-        this.creatingChars[i].isDefault=false;
+        this.creatingChars[i].isDefault = false;
       }
     }
   }
 
-  saveChar(){
-    if(this.charsForm.value.name!=null){
+  saveChar() {
+    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
-      if (this.prodChars.find((char)=> char.name === this.charsForm.value.name)){
+      if (this.prodChars.find((char) => char.name === this.charsForm.value.name)) {
         console.log('name duplicated error')
         this.errorMessage = 'Cannot save duplicated name in characteristics';
         this.showError = true;
-        setTimeout(() => {this.showError = false}, 3000);
+        setTimeout(() => { this.showError = false }, 3000);
         return
       }
 
@@ -1371,7 +1347,8 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       };
 
       const schemaLocation = this.getSchemaLocationForType(this.charTypeSelected);
-      if (this.isDataSpaceCharacteristicType(this.charTypeSelected)) {
+      const primitiveTypes = ['string', 'number', 'boolean', 'range'];
+      if (!primitiveTypes.includes(this.charTypeSelected)) {
         characteristic.valueType = this.charTypeSelected;
       }
       if (schemaLocation) {
@@ -1381,9 +1358,9 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       this.prodChars.push(characteristic);
 
       // Create the X - enabled characteristic
-      if(this.isOptional && this.charTypeSelected !== 'boolean' && !this.isJsonCharacteristicType(this.charTypeSelected)){
+      if (this.isOptional && primitiveTypes.includes(this.charTypeSelected) && this.charTypeSelected !== 'boolean') {
         this.prodChars.push({
-          id: 'urn:ngsi-ld:characteristic:'+uuidv4(),
+          id: 'urn:ngsi-ld:characteristic:' + uuidv4(),
           name: this.charsForm.value.name + ' - enabled',
           description: 'Optional toggle for ' + this.charsForm.value.name,
           productSpecCharacteristicValue: [
@@ -1393,7 +1370,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
             },
             {
               isDefault: !this.optionalDftTrue,
-              value:false as any
+              value: false as any
             }
           ]
         })
@@ -1401,16 +1378,16 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     }
 
     this.charsForm.reset();
-    this.creatingChars=[];
-    this.showCreateChar=false;
-    this.charTypeSelected='string';
-    this.isOptional=false;
-    this.optionalDftTrue=false;
+    this.creatingChars = [];
+    this.showCreateChar = false;
+    this.charTypeSelected = 'string';
+    this.isOptional = false;
+    this.optionalDftTrue = false;
     this.refreshChars();
     this.cdr.detectChanges();
   }
 
-  deleteChar(char:any){
+  deleteChar(char: any) {
     const index = this.prodChars.findIndex(item => item.id === char.id);
     if (index !== -1) {
       console.log('eliminar')
@@ -1418,8 +1395,8 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     }
 
     // If deleting a main characteristic, also delete its "- enabled" variant if it exists
-    if(!char.name.endsWith('- enabled')){
-      const relatedEnabledIndex = this.prodChars.findIndex(item => item.name === char.name+' - enabled');
+    if (!char.name.endsWith('- enabled')) {
+      const relatedEnabledIndex = this.prodChars.findIndex(item => item.name === char.name + ' - enabled');
       if (relatedEnabledIndex !== -1) {
         console.log('eliminar related enabled')
         this.prodChars.splice(relatedEnabledIndex, 1);
@@ -1434,18 +1411,18 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     return value.trim().length === 0;
   }
 
-  showFinish(){
-    this.relationshipDone=true;
-    this.finishDone=true;
+  showFinish() {
+    this.relationshipDone = true;
+    this.finishDone = true;
     this.finishChars = [];
     console.log('--- set product data')
     console.log(this.prodChars)
-    for(let i=0; i< this.prodChars.length; i++){
+    for (let i = 0; i < this.prodChars.length; i++) {
       const index = this.finishChars.findIndex(item => item.name === this.prodChars[i].name);
       if (index == -1) {
         const cleanedName = this.prodChars[i]?.name
-        ?.replace('Compliance:', '')
-        .trim();
+          ?.replace('Compliance:', '')
+          .trim();
 
         const checkIso = this.availableISOS.findIndex(
           item => item.name === cleanedName
@@ -1457,10 +1434,10 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
             const checkAdditional = this.additionalISOS.findIndex(
               item => item.name === cleanedName
             );
-            if(checkAdditional != -1){
+            if (checkAdditional != -1) {
               this.finishChars.push(this.prodChars[i])
             }
-            if(!this.prodChars[i].name?.startsWith('Compliance:')){
+            if (!this.prodChars[i].name?.startsWith('Compliance:')) {
               this.finishChars.push(this.prodChars[i])
             }
           } else {
@@ -1473,11 +1450,11 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       }
     }
     // Load compliance profile
-    for(let i = 0; i < this.selectedISOS.length; i++){
+    for (let i = 0; i < this.selectedISOS.length; i++) {
       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: 'urn:ngsi-ld:characteristic:' + uuidv4(),
           name: this.selectedISOS[i].name,
           productSpecCharacteristicValue: [{
             isDefault: true,
@@ -1487,7 +1464,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       }
     }
 
-    for(let i=0; i<this.additionalISOS.length;i++){
+    for (let i = 0; i < this.additionalISOS.length; i++) {
       console.log('- finish chars antes')
       console.log(this.finishChars)
       console.log('añadiendo additional a finish chars')
@@ -1495,7 +1472,7 @@ export class CreateProductSpecComponent 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: 'urn:ngsi-ld:characteristic:' + uuidv4(),
           name: this.additionalISOS[i].name,
           productSpecCharacteristicValue: [{
             isDefault: true,
@@ -1534,7 +1511,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     }
 
     let rels = [];
-    for(let i=0; i<this.prodRelationships.length;i++){
+    for (let i = 0; i < this.prodRelationships.length; i++) {
       rels.push({
         id: this.prodRelationships[i].id,
         href: this.prodRelationships[i].href,
@@ -1544,8 +1521,8 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     }
     console.log('rels')
     console.log(rels)
-    if(this.generalForm.value.name!=null && this.generalForm.value.version!=null && this.generalForm.value.brand!=null){
-      this.productSpecToCreate={
+    if (this.generalForm.value.name != null && this.generalForm.value.version != null && this.generalForm.value.brand != null) {
+      this.productSpecToCreate = {
         name: this.generalForm.value.name,
         description: this.generalForm.value.description != null ? this.generalForm.value.description : '',
         version: this.generalForm.value.version,
@@ -1559,50 +1536,130 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
         attachment: this.prodAttachments,
         relatedParty: [
           {
-              id: this.partyId,
-              //href: "http://proxy.docker:8004/party/individual/urn:ngsi-ld:individual:803ee97b-1671-4526-ba3f-74681b22ccf3",
-              role: environment.SELLER_ROLE,
-              "@referredType": ''
+            id: this.partyId,
+            //href: "http://proxy.docker:8004/party/individual/urn:ngsi-ld:individual:803ee97b-1671-4526-ba3f-74681b22ccf3",
+            role: environment.SELLER_ROLE,
+            "@referredType": ''
           }
         ],
         resourceSpecification: this.selectedResourceSpecs,
         serviceSpecification: this.selectedServiceSpecs
       }
     }
+    if (this.generalForm.value.dspCompatible) {
+      this.productSpecToCreate!.productSpecCharacteristic = this.productSpecToCreate?.productSpecCharacteristic || [];
+      (this.productSpecToCreate! as any).externalId = uuidv4();
+      this.productSpecToCreate!['@schemaLocation'] = environment.DSP_SCHEMA;
+      this.endpointUrls.forEach(endpoint => {
+        this.productSpecToCreate!.productSpecCharacteristic!.push({
+          id: uuidv4(),
+          description: endpoint.description,
+          valueType: 'endpointUrl',
+          name: endpoint.name,
+          productSpecCharacteristicValue: [
+            { value: endpoint.url! as any, isDefault: true }
+          ]
+        })
+      })
+      const dspConfigValue = this.dspConfigForm.value;
+      this.productSpecToCreate!.productSpecCharacteristic!.push(
+        {
+          id: "upstreamAddress",
+          name: "Address of the upstream serving the data",
+          valueType: "upstreamAddress",
+          productSpecCharacteristicValue: [
+            { value: dspConfigValue.upstreamAddress! as any, isDefault: true }
+          ]
+        },
+        {
+          id: "targetSpecification",
+          name: "Detailed specification of the ODRL target. Allows to over services via OID4VC",
+          valueType: "targetSpecification",
+          productSpecCharacteristicValue: [
+            { value: JSON.parse(dspConfigValue.targetSpecification!), isDefault: true }
+          ]
+        },
+        {
+          id: "serviceConfiguration",
+          name: "Service config to be used in the credentials config service when provisioning transfers through OID4VC",
+          valueType: "serviceConfiguration",
+          productSpecCharacteristicValue: [
+            { value: JSON.parse(dspConfigValue.serviceConfiguration!), isDefault: true }
+          ]
+        },
+        {
+          id: "credentialsConfig",
+          name: "Credentials Config",
+          valueType: "credentialsConfig",
+          "@schemaLocation": "https://raw.githubusercontent.com/FIWARE/contract-management/refs/heads/main/schemas/credentials/credentialConfigCharacteristic.json",
+          productSpecCharacteristicValue: [
+            { value: JSON.parse(dspConfigValue.credentialsConfig!), isDefault: true }
+          ]
+        },
+        {
+          id: "policyConfig",
+          name: "Policy for creation of K8S clusters.",
+          valueType: "authorizationPolicy",
+          "@schemaLocation": "https://raw.githubusercontent.com/FIWARE/contract-management/refs/heads/policy-support/schemas/odrl/policyCharacteristic.json",
+          productSpecCharacteristicValue: [
+            { value: JSON.parse(dspConfigValue.policyConfig!), isDefault: true }
+          ]
+        },
+        {
+          id: 'transferType',
+          name: 'transferType',
+          valueType: 'transferType',
+          productSpecCharacteristicValue: [
+            { value: dspConfigValue.transferType as any, isDefault: true }
+          ]
+        }
+      )
+
+      if (dspConfigValue.transferPath) {
+        this.productSpecToCreate!.productSpecCharacteristic!.push({
+          id: 'transferPath',
+          name: 'transferPath',
+          valueType: 'transferPath',
+          productSpecCharacteristicValue: [
+            { value: dspConfigValue.transferPath as any, isDefault: true }
+          ]
+        })
+      }
+    }
     console.log('PRODUCTO A CREAR:')
     console.log(this.productSpecToCreate)
     console.log(this.imgPreview)
-    this.selectStep('summary','summary-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=true;
-    this.showPreview=false;
+    this.selectStep('summary', 'summary-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = true;
+    this.showPreview = false;
     this.refreshChars();
   }
 
-  createProduct(){
-    this.loading=true;
+  createProduct() {
+    this.loading = true;
     this.prodSpecService.postProdSpec(this.productSpecToCreate).subscribe({
       next: data => {
-        this.loading=false;
+        this.loading = false;
         this.goBack();
       },
       error: error => {
         console.error('There was an error while creating!', error);
-        if(error.error.error){
+        if (error.error.error) {
           console.log(error)
-          this.errorMessage='Error: '+error.error.error;
+          this.errorMessage = 'Error: ' + error.error.error;
         } else {
-          this.errorMessage='There was an error while creating the product!';
+          this.errorMessage = 'There was an error while creating the product!';
         }
-        this.loading=false;
-        this.showError=true;
+        this.loading = false;
+        this.showError = true;
         setTimeout(() => {
           this.showError = false;
         }, 3000);
@@ -1625,58 +1682,58 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     });
   }
 
-  addList(){
+  addList() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n- First item\n- Second item'
     });
   }
 
-  addOrderedList(){
+  addOrderedList() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n1. First item\n2. Second item'
     });
   }
 
-  addCode(){
+  addCode() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n`code`'
     });
   }
 
-  addCodeBlock(){
+  addCodeBlock() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n```\ncode\n```'
     });
   }
 
-  addBlockquote(){
+  addBlockquote() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n> blockquote'
     });
   }
 
-  addLink(){
+  addLink() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + ' [title](https://www.example.com) '
     });
   }
 
-  addTable(){
+  addTable() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n| Syntax | Description |\n| ----------- | ----------- |\n| Header | Title |\n| Paragraph | Text |'
     });
   }
 
-  addEmoji(event:any){
+  addEmoji(event: any) {
     console.log(event)
-    this.showEmoji=false;
+    this.showEmoji = false;
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + event.emoji.native
@@ -1684,7 +1741,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
   }
 
   hasLongWord(str: string | undefined, threshold = 20) {
-    if(str){
+    if (str) {
       return str.split(/\s+/).some(word => word.length > threshold);
     } else {
       return false
@@ -1712,7 +1769,7 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
 
   goToStep(index: number) {
     // Solo validar en modo creación
-    if (index > this.currentStep) {
+    if (index > this.currentStepIdx) {
       // Validar el paso actual
       const currentStepValid = this.validateCurrentStep();
       if (!currentStepValid) {
@@ -1720,66 +1777,93 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       }
     }
 
-    this.currentStep = index;
-    if(this.currentStep>this.highestStep){
-      this.highestStep=this.currentStep
+    if (this.currentStep.id === 'general' && this.dspEnable) {
+      if (this.generalForm.value.dspCompatible) {
+        this.addStepAfter({ label: 'DSP Config', id: 'dsp_config' }, 'characteristics');
+        this.removeStep('dataspace')
+      } else {
+        this.removeStep('dsp_config');
+        this.addStepAfter({ label: 'Dataspace Configuration', id: 'dataspace' }, 'characteristics')
+      }
+    }
+
+    this.currentStepIdx = index;
+    if (this.currentStepIdx > this.highestStepIdx) {
+      this.highestStepIdx = index
     }
     this.refreshChars();
-    if (this.isCurrentStep('compliance')) {
+    if (this.currentStep.id === 'compliance') {
       setTimeout(() => {
         initFlowbite();
       }, 100);
     }
     //Resource
-    if(this.isCurrentStep('resource')){
+    if (this.currentStep.id === 'resource') {
       this.getResSpecs(false);
     }
     //Service
-    if(this.isCurrentStep('service')){
+    if (this.currentStep.id === 'service') {
       this.getServSpecs(false);
     }
     //Attachment
-    if(this.isCurrentStep('attachments')){
+    if (this.currentStep.id === 'attachments') {
       setTimeout(() => {
         initFlowbite();
       }, 100);
     }
     //rels
-    if(this.isCurrentStep('relationships')){
+    if (this.currentStep.id === 'relationships') {
       this.getProdSpecsRel(false);
     }
     //finish
-    if(this.isCurrentStep('summary')){
+    if (this.currentStep.id === 'summary') {
       this.showFinish();
     }
   }
 
   validateCurrentStep(): boolean {
-    switch (this.currentStep) {
-      case 0: // General Info
+    switch (this.currentStep.id) {
+      case 'general':
         return this.generalForm?.valid || false;
+      case 'dsp_config':
+        return this.endpointUrls.length > 0 && this.dspConfigForm.valid;
       default:
         return true;
     }
   }
 
   isStepDisabled(): boolean {
-    switch (this.currentStep) {
-      case 0: // General Info
+    switch (this.currentStep.id) {
+      case 'general':
         return !this.generalForm?.valid || false;
+      case 'bundle':
+        return this.prodSpecsBundle.length < 2 && this.bundleChecked;
+      case 'compliance':
+        return this.checkValidISOS();
+      case 'dsp_config':
+        return this.endpointUrls.length === 0;
       default:
-        if (this.BUNDLE_ENABLED && this.currentStep === this.getStepIndex('bundle')) {
-          return this.prodSpecsBundle.length<2 && this.bundleChecked;
-        }
-        if (this.currentStep === this.getStepIndex('compliance')) {
-          return this.checkValidISOS();
-        }
         return false;
     }
   }
 
+  addEndpointUrl(): void {
+    const url = this.newEndpointUrl.trim();
+    const description = this.newEndpointDescription.trim();
+    const name = this.newEndpointName.trim();
+    if (!url || !description || !name) return;
+    this.endpointUrls = [...this.endpointUrls, { url, description, name }];
+    this.newEndpointUrl = '';
+    this.newEndpointDescription = '';
+    this.newEndpointName = '';
+  }
+
+  removeEndpointUrl(idx: number): void {
+    this.endpointUrls = this.endpointUrls.filter((_, i) => i !== idx);
+  }
+
   canNavigate(index: number) {
-      return (this.generalForm?.valid &&  (index <= this.currentStep)) || (this.generalForm?.valid &&  (index <= this.highestStep));
+    return (this.generalForm?.valid && (index <= this.currentStepIdx)) || (this.generalForm?.valid && (index <= this.highestStepIdx));
   }
 
   handleStepClick(index: number): void {
@@ -1792,4 +1876,24 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
     return name?.replace(/compliance:/i, '').trim() ?? '';
   }
 
+  private addStepAfter(step: Step, stepAfter?: ProductSpecFormStep): void {
+    if (!stepAfter) { this.steps.push(step) }
+    const alreadyAdded = this.steps.some(s => s.id === step.id);
+    if (alreadyAdded) return;
+    const serviceIdx = this.steps.findIndex(s => s.id === stepAfter);
+    this.steps = [
+      ...this.steps.slice(0, serviceIdx + 1),
+      step,
+      ...this.steps.slice(serviceIdx + 1),
+    ];
+  }
+
+  private removeStep(step: ProductSpecFormStep): void {
+    const idx = this.steps.findIndex(s => s.id === step);
+    if (idx === -1) return;
+    if (this.currentStepIdx >= idx) this.currentStepIdx = idx - 1;
+    if (this.highestStepIdx >= idx) this.highestStepIdx = idx - 1;
+    this.steps = this.steps.filter(s => s.id !== step);
+  }
+
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/seller-product-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-product-spec/seller-product-spec.component.ts
index c64b7862..007d67f6 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/seller-product-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/seller-product-spec.component.ts
@@ -59,11 +59,27 @@ export class SellerProductSpecComponent implements OnInit, OnDestroy {
     })
   }
 
+  private searchInputListener = (_e: Event) => {
+    console.log(`Input updated`)
+    if (this.searchField.value == '') {
+      this.filter = undefined;
+      this.getProdSpecs(false);
+    }
+  }
+
   ngOnInit() {
     this.initProdSpecs();
+    const input = document.querySelector('[type=search]')
+    if (input != undefined) {
+      input.addEventListener('input', this.searchInputListener);
+    }
   }
 
   ngOnDestroy(){
+    const input = document.querySelector('[type=search]')
+    if (input != undefined) {
+      input.removeEventListener('input', this.searchInputListener);
+    }
     this.destroy$.next();
     this.destroy$.complete();
   }
@@ -80,17 +96,6 @@ export class SellerProductSpecComponent implements OnInit, OnDestroy {
     }
 
     this.getProdSpecs(false);
-    let input = document.querySelector('[type=search]')
-    if(input!=undefined){
-      input.addEventListener('input', e => {
-        // Easy way to get the value of the element who trigger the current `e` event
-        console.log(`Input updated`)
-        if(this.searchField.value==''){
-          this.filter=undefined;
-          this.getProdSpecs(false);
-        }
-      });
-    }
     initFlowbite();
   }
 
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 86fb854c..db3af092 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
@@ -1,156 +1,176 @@
-
 <div>
-    <!-- Breadcrumb -->
-    <div class="pb-4">
-        <nav class="flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-secondary-50 dark:bg-secondary-100 dark:border-gray-800 dark:text-white" aria-label="Breadcrumb">
-            <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
-            <li class="inline-flex items-center">
-                <button (click)="goBack()" class="inline-flex items-center text-sm font-medium text-gray-500 dark:text-white hover:text-primary-100 dark:hover:text-primary-50">
-                <svg class="w-3 h-3 mr-2 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 10">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 1 1 5l4 4m6-8L7 5l4 4"/>
-                </svg>
-                {{ 'UPDATE_PROD_SPEC._back' | translate }}
-                </button>
-            </li>
-            <li aria-current="page">
-                <div class="flex items-center">
-                <svg class="rtl:rotate-180  w-3 h-3 mx-1 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
-                </svg>
-                <span class="ms-1 text-sm font-medium text-gray-500 dark:text-white md:ms-2 ">{{ 'UPDATE_PROD_SPEC._update' | translate }}</span>
-                </div>
-            </li>
-            </ol>
-        </nav>
-    </div>
+  <!-- Breadcrumb -->
+  <div class="pb-4">
+    <nav
+      class="flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-secondary-50 dark:bg-secondary-100 dark:border-gray-800 dark:text-white"
+      aria-label="Breadcrumb">
+      <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+        <li class="inline-flex items-center">
+          <button (click)="goBack()"
+            class="inline-flex items-center text-sm font-medium text-gray-500 dark:text-white hover:text-primary-100 dark:hover:text-primary-50">
+            <svg class="w-3 h-3 mr-2 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+              viewBox="0 0 12 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
+                d="M5 1 1 5l4 4m6-8L7 5l4 4" />
+            </svg>
+            {{ 'UPDATE_PROD_SPEC._back' | translate }}
+          </button>
+        </li>
+        <li aria-current="page">
+          <div class="flex items-center">
+            <svg class="rtl:rotate-180  w-3 h-3 mx-1 text-gray-400 dark:text-white" aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="m1 9 4-4-4-4" />
+            </svg>
+            <span class="ms-1 text-sm font-medium text-gray-500 dark:text-white md:ms-2 ">{{ 'UPDATE_PROD_SPEC._update'
+              | translate }}</span>
+          </div>
+        </li>
+      </ol>
+    </nav>
+  </div>
   <!-- End Breadcrumb -->
 
 
-    <div class="bg-secondary-50 dark:bg-secondary-100 mt-4 p-8 rounded-lg">
-        <h2 class="text-3xl font-bold text-primary-100 ml-4 pb-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._update_prod' | 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 
-                  (click)="handleStepClick(i)"
-                  [class.cursor-not-allowed]="!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"
-                      [class.bg-primary-100]="currentStep === i"
-                      [class.text-white]="currentStep === i">
-                  {{ i + 1 }}
+  <div class="bg-secondary-50 dark:bg-secondary-100 mt-4 p-8 rounded-lg">
+    <h2 class="text-3xl font-bold text-primary-100 ml-4 pb-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._update_prod' |
+      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 (click)="handleStepClick(i)" [class.cursor-not-allowed]="!canNavigate(i)" [class.opacity-50]="!canNavigate(i)"
+        [class.text-primary-100]="currentStepIdx === 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"
+          [class.bg-primary-100]="currentStepIdx === i" [class.text-white]="currentStepIdx === i">
+          {{ i + 1 }}
+        </span>
+        <span class="md:block mt-2 hidden">{{ step.label }}</span>
+      </li>
+      }
+    </ol>
+    <div class="md:p-8">
+      <div>
+        @if (currentStep.id === 'general') {
+        <form class="m-4 md:grid md:grid-cols-2 gap-4" [formGroup]="generalForm">
+          <div>
+            <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_name' |
+              translate }}</label>
+            <input formControlName="name" type="text" id="prod-name" maxLength="100"
+              [ngClass]="generalForm.get('name')?.invalid == true && generalForm.value.name!='' ? '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" />
+            <label for="prod-version" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_version' |
+              translate }}</label>
+            <input formControlName="version" type="text" id="prod-version"
+              [ngClass]="generalForm.get('version')?.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" />
+
+          </div>
+          <div>
+            <label for="prod-brand" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_brand' |
+              translate }}</label>
+            <input formControlName="brand" type="text" id="prod-brand"
+              [ngClass]="generalForm.get('brand')?.invalid == true && generalForm.value.brand!='' ? '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" />
+            <label for="prod-number" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._id_number' |
+              translate }}</label>
+            <input 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 class="font-bold text-lg col-span-2 dark:text-white">{{ 'UPDATE_RES_SPEC._status' | translate
+            }}</label>
+          <div class="mb-2 col-span-2">
+
+            <ol
+              class="flex items-center w-full text-sm font-medium text-center text-gray-500 dark:text-gray-200 sm:text-base">
+              @if(prodStatus=='Active'){
+              <li (click)="setProdStatus('Active')"
+                class="cursor-pointer flex w-fit md:w-full items-center text-blue-500 after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
+                <span class="flex items-center">
+                  <svg class="w-6 h-6 text-blue-500" 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-width="2"
+                      d="M8.737 8.737a21.49 21.49 0 0 1 3.308-2.724m0 0c3.063-2.026 5.99-2.641 7.331-1.3 1.827 1.828.026 6.591-4.023 10.64-4.049 4.049-8.812 5.85-10.64 4.023-1.33-1.33-.736-4.218 1.249-7.253m6.083-6.11c-3.063-2.026-5.99-2.641-7.331-1.3-1.827 1.828-.026 6.591 4.023 10.64m3.308-9.34a21.497 21.497 0 0 1 3.308 2.724m2.775 3.386c1.985 3.035 2.579 5.923 1.248 7.253-1.336 1.337-4.245.732-7.295-1.275M14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
+                  </svg>
+                  {{ 'UPDATE_PROD_SPEC._active' | translate }}
                 </span>
-                <span class="md:block mt-2 hidden">{{ step }}</span>
               </li>
-            }
-          </ol>
-        <div class="md:p-8">
-            <div>
-                @if (currentStep === 0) {
-                    <form class="m-4 md:grid md:grid-cols-2 gap-4" [formGroup]="generalForm">
-                        <div>
-                            <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_name' | translate }}</label>
-                            <input formControlName="name" type="text" id="prod-name" maxLength="100"
-                            [ngClass]="generalForm.get('name')?.invalid == true && generalForm.value.name!='' ? '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" />
-                            <label for="prod-version" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_version' | translate }}</label>
-                            <input formControlName="version" type="text" id="prod-version"
-                            [ngClass]="generalForm.get('version')?.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" />
-                        
-                        </div>
-                        <div>
-                            <label for="prod-brand" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_brand' | translate }}</label>
-                            <input formControlName="brand" type="text" id="prod-brand"
-                            [ngClass]="generalForm.get('brand')?.invalid == true && generalForm.value.brand!='' ? '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" />
-                            <label for="prod-number" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._id_number' | translate }}</label>
-                            <input 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 class="font-bold text-lg col-span-2 dark:text-white">{{ 'UPDATE_RES_SPEC._status' | translate }}</label>
-                        <div class="mb-2 col-span-2">
-
-                            <ol class="flex items-center w-full text-sm font-medium text-center text-gray-500 dark:text-gray-200 sm:text-base">
-                                @if(prodStatus=='Active'){
-                                    <li (click)="setProdStatus('Active')"
-                                    class="cursor-pointer flex w-fit md:w-full items-center text-blue-500 after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
-                                        <span class="flex items-center">
-                                            <svg class="w-6 h-6 text-blue-500" 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-width="2" d="M8.737 8.737a21.49 21.49 0 0 1 3.308-2.724m0 0c3.063-2.026 5.99-2.641 7.331-1.3 1.827 1.828.026 6.591-4.023 10.64-4.049 4.049-8.812 5.85-10.64 4.023-1.33-1.33-.736-4.218 1.249-7.253m6.083-6.11c-3.063-2.026-5.99-2.641-7.331-1.3-1.827 1.828-.026 6.591 4.023 10.64m3.308-9.34a21.497 21.497 0 0 1 3.308 2.724m2.775 3.386c1.985 3.035 2.579 5.923 1.248 7.253-1.336 1.337-4.245.732-7.295-1.275M14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
-                                            </svg>                                     
-                                            {{ 'UPDATE_PROD_SPEC._active' | translate }}
-                                        </span>
-                                    </li>
-                                }@else{
-                                    <li (click)="setProdStatus('Active')"
-                                    class="cursor-pointer flex w-fit md:w-full items-center after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
-                                        <span class="flex items-center">                                    
-                                            {{ 'UPDATE_PROD_SPEC._active' | translate }}
-                                        </span>
-                                    </li>
-                                }
-                                @if(prodStatus=='Launched'){
-                                    <li (click)="setProdStatus('Launched')"
-                                    class="cursor-pointer flex w-fit md:w-full items-center text-green-700 after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
-                                        <span class="flex items-center">
-                                            <svg class="w-6 h-6 text-green-700" 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-width="2" d="M8.737 8.737a21.49 21.49 0 0 1 3.308-2.724m0 0c3.063-2.026 5.99-2.641 7.331-1.3 1.827 1.828.026 6.591-4.023 10.64-4.049 4.049-8.812 5.85-10.64 4.023-1.33-1.33-.736-4.218 1.249-7.253m6.083-6.11c-3.063-2.026-5.99-2.641-7.331-1.3-1.827 1.828-.026 6.591 4.023 10.64m3.308-9.34a21.497 21.497 0 0 1 3.308 2.724m2.775 3.386c1.985 3.035 2.579 5.923 1.248 7.253-1.336 1.337-4.245.732-7.295-1.275M14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
-                                            </svg>                                          
-                                            {{ 'UPDATE_PROD_SPEC._launched' | translate }}
-                                        </span>
-                                    </li>
-                                }@else{
-                                    <li data-cy="productSpecStatusLaunched" (click)="setProdStatus('Launched')"
-                                    class="cursor-pointer flex w-fit md:w-full items-center after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
-                                        <span class="flex items-center">
-                                            {{ 'UPDATE_PROD_SPEC._launched' | translate }}
-                                        </span>
-                                    </li>
-                                }
-                                @if(prodStatus=='Retired'){
-                                    <li (click)="setProdStatus('Retired')"
-                                    class="cursor-pointer flex w-fit md:w-full items-center text-yellow-500 after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
-                                        <span class="flex items-center">
-                                            <svg class="w-6 h-6 text-yellow-500" 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-width="2" d="M8.737 8.737a21.49 21.49 0 0 1 3.308-2.724m0 0c3.063-2.026 5.99-2.641 7.331-1.3 1.827 1.828.026 6.591-4.023 10.64-4.049 4.049-8.812 5.85-10.64 4.023-1.33-1.33-.736-4.218 1.249-7.253m6.083-6.11c-3.063-2.026-5.99-2.641-7.331-1.3-1.827 1.828-.026 6.591 4.023 10.64m3.308-9.34a21.497 21.497 0 0 1 3.308 2.724m2.775 3.386c1.985 3.035 2.579 5.923 1.248 7.253-1.336 1.337-4.245.732-7.295-1.275M14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
-                                            </svg>                                          
-                                            {{ 'UPDATE_PROD_SPEC._retired' | translate }}
-                                        </span>
-                                    </li>
-                                }@else{
-                                    <li (click)="setProdStatus('Retired')"
-                                    class="cursor-pointer flex w-fit md:w-full items-center after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
-                                        <span class="flex items-center">                                        
-                                            {{ 'UPDATE_PROD_SPEC._retired' | translate }}
-                                        </span>
-                                    </li>
-                                }
-                                @if(prodStatus=='Obsolete'){
-                                    <li (click)="setProdStatus('Obsolete')" class="cursor-pointer flex items-center">
-                                        <span class="flex items-center text-red-800">
-                                            <svg class="w-6 h-6 text-red-800" 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-width="2" d="M8.737 8.737a21.49 21.49 0 0 1 3.308-2.724m0 0c3.063-2.026 5.99-2.641 7.331-1.3 1.827 1.828.026 6.591-4.023 10.64-4.049 4.049-8.812 5.85-10.64 4.023-1.33-1.33-.736-4.218 1.249-7.253m6.083-6.11c-3.063-2.026-5.99-2.641-7.331-1.3-1.827 1.828-.026 6.591 4.023 10.64m3.308-9.34a21.497 21.497 0 0 1 3.308 2.724m2.775 3.386c1.985 3.035 2.579 5.923 1.248 7.253-1.336 1.337-4.245.732-7.295-1.275M14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
-                                            </svg>                                          
-                                            {{ 'UPDATE_PROD_SPEC._obsolete' | translate }}
-                                        </span>
-                                    </li>
-                                }@else{
-                                    <li (click)="setProdStatus('Obsolete')" class="cursor-pointer flex items-center">
-                                        <span class="flex items-center">                                        
-                                            {{ 'UPDATE_PROD_SPEC._obsolete' | translate }}
-                                        </span>
-                                    </li>
-                                }
-                            </ol>
+              }@else{
+              <li (click)="setProdStatus('Active')"
+                class="cursor-pointer flex w-fit md:w-full items-center after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
+                <span class="flex items-center">
+                  {{ 'UPDATE_PROD_SPEC._active' | translate }}
+                </span>
+              </li>
+              }
+              @if(prodStatus=='Launched'){
+              <li (click)="setProdStatus('Launched')"
+                class="cursor-pointer flex w-fit md:w-full items-center text-green-700 after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
+                <span class="flex items-center">
+                  <svg class="w-6 h-6 text-green-700" 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-width="2"
+                      d="M8.737 8.737a21.49 21.49 0 0 1 3.308-2.724m0 0c3.063-2.026 5.99-2.641 7.331-1.3 1.827 1.828.026 6.591-4.023 10.64-4.049 4.049-8.812 5.85-10.64 4.023-1.33-1.33-.736-4.218 1.249-7.253m6.083-6.11c-3.063-2.026-5.99-2.641-7.331-1.3-1.827 1.828-.026 6.591 4.023 10.64m3.308-9.34a21.497 21.497 0 0 1 3.308 2.724m2.775 3.386c1.985 3.035 2.579 5.923 1.248 7.253-1.336 1.337-4.245.732-7.295-1.275M14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
+                  </svg>
+                  {{ 'UPDATE_PROD_SPEC._launched' | translate }}
+                </span>
+              </li>
+              }@else{
+              <li data-cy="productSpecStatusLaunched" (click)="setProdStatus('Launched')"
+                class="cursor-pointer flex w-fit md:w-full items-center after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
+                <span class="flex items-center">
+                  {{ 'UPDATE_PROD_SPEC._launched' | translate }}
+                </span>
+              </li>
+              }
+              @if(prodStatus=='Retired'){
+              <li (click)="setProdStatus('Retired')"
+                class="cursor-pointer flex w-fit md:w-full items-center text-yellow-500 after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
+                <span class="flex items-center">
+                  <svg class="w-6 h-6 text-yellow-500" 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-width="2"
+                      d="M8.737 8.737a21.49 21.49 0 0 1 3.308-2.724m0 0c3.063-2.026 5.99-2.641 7.331-1.3 1.827 1.828.026 6.591-4.023 10.64-4.049 4.049-8.812 5.85-10.64 4.023-1.33-1.33-.736-4.218 1.249-7.253m6.083-6.11c-3.063-2.026-5.99-2.641-7.331-1.3-1.827 1.828-.026 6.591 4.023 10.64m3.308-9.34a21.497 21.497 0 0 1 3.308 2.724m2.775 3.386c1.985 3.035 2.579 5.923 1.248 7.253-1.336 1.337-4.245.732-7.295-1.275M14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
+                  </svg>
+                  {{ 'UPDATE_PROD_SPEC._retired' | translate }}
+                </span>
+              </li>
+              }@else{
+              <li (click)="setProdStatus('Retired')"
+                class="cursor-pointer flex w-fit md:w-full items-center after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
+                <span class="flex items-center">
+                  {{ 'UPDATE_PROD_SPEC._retired' | translate }}
+                </span>
+              </li>
+              }
+              @if(prodStatus=='Obsolete'){
+              <li (click)="setProdStatus('Obsolete')" class="cursor-pointer flex items-center">
+                <span class="flex items-center text-red-800">
+                  <svg class="w-6 h-6 text-red-800" 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-width="2"
+                      d="M8.737 8.737a21.49 21.49 0 0 1 3.308-2.724m0 0c3.063-2.026 5.99-2.641 7.331-1.3 1.827 1.828.026 6.591-4.023 10.64-4.049 4.049-8.812 5.85-10.64 4.023-1.33-1.33-.736-4.218 1.249-7.253m6.083-6.11c-3.063-2.026-5.99-2.641-7.331-1.3-1.827 1.828-.026 6.591 4.023 10.64m3.308-9.34a21.497 21.497 0 0 1 3.308 2.724m2.775 3.386c1.985 3.035 2.579 5.923 1.248 7.253-1.336 1.337-4.245.732-7.295-1.275M14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
+                  </svg>
+                  {{ 'UPDATE_PROD_SPEC._obsolete' | translate }}
+                </span>
+              </li>
+              }@else{
+              <li (click)="setProdStatus('Obsolete')" class="cursor-pointer flex items-center">
+                <span class="flex items-center">
+                  {{ 'UPDATE_PROD_SPEC._obsolete' | translate }}
+                </span>
+              </li>
+              }
+            </ol>
 
-                        </div>
-                        <label for="prod-name" class="font-bold text-lg col-span-2 dark:text-white">{{ 'UPDATE_PROD_SPEC._product_description' | translate }}</label>
-                        <app-markdown-textarea class="col-span-2" formControlName="description"></app-markdown-textarea>
+          </div>
+          <label for="prod-name" class="font-bold text-lg col-span-2 dark:text-white">{{
+            'UPDATE_PROD_SPEC._product_description' | translate }}</label>
+          <app-markdown-textarea class="col-span-2" formControlName="description"></app-markdown-textarea>
 
-                    </form>
-                    <!--<div class="flex w-full justify-items-end justify-end">
+        </form>
+        <!--<div class="flex w-full justify-items-end justify-end">
                         <button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)" [disabled]="!generalForm.valid" [ngClass]="!generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end align-end 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">
                             {{ 'UPDATE_PROD_SPEC._next' | 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 14 10">
@@ -158,107 +178,133 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 pb-4 dark:text-white">{{ 'UP
                             </svg>
                         </button>
                     </div>-->
-                }
-                @if (currentStep === 1 && BUNDLE_ENABLED) {
-                    <div class="col-span-2 flex align-items-middle h-fit m-4">
-                        <label for="prod-brand" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._is_bundled' | translate }}</label>
-                        <label class="inline-flex items-center me-5 ml-4">
-                            <input type="checkbox" disabled [checked]="bundleChecked" value="" 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(bundleChecked){
-                        @if(loadingBundle){
-                            <div role="status" class="w-full h-fit flex justify-center align-middle">
-                                <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                                </svg>
-                                <span class="sr-only">Loading...</span>
-                            </div>
-                        } @else {
-                            <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>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                        </th>
-                                        <th scope="col" class="hidden md:table-cell px-6 py-3">
-                                            {{ 'UPDATE_PROD_SPEC._status' | translate }}
-                                        </th>
-                                        <th scope="col" class="hidden md:table-cell px-6 py-3">
-                                            {{ 'UPDATE_PROD_SPEC._type' | translate }}
-                                        </th>
-                                        <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                            {{ 'UPDATE_PROD_SPEC._last_update' | translate }}
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'UPDATE_PROD_SPEC._select' | translate }}
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    @for (prod of prodSpecs; track prod.id) {
-                                        <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td [ngClass]="{
+        }
+        @if (currentStep.id === 'bundle') {
+        <div class="col-span-2 flex align-items-middle h-fit m-4">
+          <label for="prod-brand" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._is_bundled' |
+            translate }}</label>
+          <label class="inline-flex items-center me-5 ml-4">
+            <input type="checkbox" disabled [checked]="bundleChecked" value="" 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(bundleChecked){
+        @if(loadingBundle){
+        <div role="status" class="w-full h-fit flex justify-center align-middle">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
+        } @else {
+        <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>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="hidden md:table-cell px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._status' | translate }}
+                </th>
+                <th scope="col" class="hidden md:table-cell px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._type' | translate }}
+                </th>
+                <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._last_update' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._select' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (prod of prodSpecs; track prod.id) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                                 'break-all': hasLongWord(prod.name, 20),
                                                 'break-words': !hasLongWord(prod.name, 20)
                                                 }" class="px-6 py-4 text-wrap break-words">
-                                                {{prod.name}}
-                                            </td>
-                                            <td class="hidden md:table-cell px-6 py-4">
-                                                @if(prod.lifecycleStatus == 'Active'){
-                                                    <span class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{prod.lifecycleStatus}}</span>
-                                                } @else if(prod.lifecycleStatus == 'Launched') {
-                                                    <span class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{prod.lifecycleStatus}}</span>
-                                                } @else if(prod.lifecycleStatus == 'Retired') {
-                                                    <span class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{prod.lifecycleStatus}}</span>
-                                                } @else if(prod.lifecycleStatus == 'Obsolete') {
-                                                    <span class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{prod.lifecycleStatus}}</span>
-                                                }
-                                            </td>
-                                            <td class="hidden md:table-cell px-6 py-4">
-                                                @if(prod.isBundle == false){
-                                                    <span class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{ 'UPDATE_PROD_SPEC._simple' | translate }}</span>
-                                                } @else {
-                                                    <span class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{ 'UPDATE_PROD_SPEC._bundle' | translate }}</span>
-                                                }
-                                            </td>
-                                            <td class="hidden lg:table-cell px-6 py-4">
-                                                {{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="" disabled 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">
-                                            </td>
-                                        </tr>
-                                    }
-                                </tbody>
-                            </table>
-                            </div>
-                        }
-                        @if (!loadingBundle_more) {
-                            @if (bundlePageCheck) {
-                            <div class="flex pt-6 pb-2 justify-center align-middle">
-                                <button (click)="nextBundle()" class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
-                                    {{ 'UPDATE_PROD_SPEC._load_more' | translate }}
-                                <svg class="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>
-                                </button>
-                            </div>
-                            }
-                        } @else {
-                            <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
-                            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                            </svg>
-                            <span class="sr-only">Loading...</span>
-                            </div>
-                        }
-                    }
-                    <!--<div class="flex w-full justify-items-end justify-end ml-4">
+                  {{prod.name}}
+                </td>
+                <td class="hidden md:table-cell px-6 py-4">
+                  @if(prod.lifecycleStatus == 'Active'){
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{prod.lifecycleStatus}}</span>
+                  } @else if(prod.lifecycleStatus == 'Launched') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{prod.lifecycleStatus}}</span>
+                  } @else if(prod.lifecycleStatus == 'Retired') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{prod.lifecycleStatus}}</span>
+                  } @else if(prod.lifecycleStatus == 'Obsolete') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{prod.lifecycleStatus}}</span>
+                  }
+                </td>
+                <td class="hidden md:table-cell px-6 py-4">
+                  @if(prod.isBundle == false){
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{
+                    'UPDATE_PROD_SPEC._simple' | translate }}</span>
+                  } @else {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{
+                    'UPDATE_PROD_SPEC._bundle' | translate }}</span>
+                  }
+                </td>
+                <td class="hidden lg:table-cell px-6 py-4">
+                  {{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="" disabled
+                    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">
+                </td>
+              </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        }
+        @if (!loadingBundle_more) {
+        @if (bundlePageCheck) {
+        <div class="flex pt-6 pb-2 justify-center align-middle">
+          <button (click)="nextBundle()"
+            class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
+            {{ 'UPDATE_PROD_SPEC._load_more' | translate }}
+            <svg class="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>
+          </button>
+        </div>
+        }
+        } @else {
+        <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
+        }
+        }
+        <!--<div class="flex w-full justify-items-end justify-end ml-4">
                         <button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)" [disabled]="prodSpecsBundle.length<2 && bundleChecked" [ngClass]="(prodSpecsBundle.length<2 && bundleChecked) ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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">
                             {{ 'UPDATE_PROD_SPEC._next' | 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 14 10">
@@ -266,191 +312,219 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 pb-4 dark:text-white">{{ 'UP
                             </svg>
                         </button>
                     </div>-->
-                }
-                @if (isCurrentStep('compliance')) {
-                    <div class="flex w-full items-center px-4 mb-3">
-                        <div class="flex items-center">
-                            @if(complianceVC && complianceLevel=='BL'){
-                                <img
-                                    class="h-[1.9rem] max-w-[12rem] object-contain rounded-md"
-                                    src="assets/logos/baseline.png"
-                                    alt="Baseline logo"
-                                />
-                            } @else if(complianceVC && complianceLevel=='P') {
-                                <img
-                                    class="h-[1.9rem] max-w-[12rem] object-contain rounded-md"
-                                    src="assets/logos/prof.png"
-                                    alt="Professional logo"
-                                />
-                            } @else if(complianceVC && complianceLevel=='PP') {
-                                <img
-                                    class="h-[1.9rem] max-w-[12rem] object-contain rounded-md"
-                                    src="assets/logos/profplus.png"
-                                    alt="Professional plus logo"
-                                />
-                            }
-                        </div>
-                        <div class="ml-auto flex items-center gap-2">
-                        <button type="button" (click)="openRequestValidationModal(); $event.stopPropagation();"
-                        [disabled]="!hasSelfAttestation() || hasUnsavedComplianceProfileChanges()"
-                        [ngClass]="(!hasSelfAttestation() || hasUnsavedComplianceProfileChanges()) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary-50'"
-                        class="flex text-white justify-end bg-primary-100 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">
-                            Request Validation
-                            <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="M5 11.917 9.724 16.5 19 7.5"/>
-                            </svg>
-                        </button>
+        }
+        @if (isCurrentStep('compliance')) {
+        <div class="flex w-full items-center px-4 mb-3">
+          <div class="flex items-center">
+            @if(complianceVC && complianceLevel=='BL'){
+            <img class="h-[1.9rem] max-w-[12rem] object-contain rounded-md" src="assets/logos/baseline.png"
+              alt="Baseline logo" />
+            } @else if(complianceVC && complianceLevel=='P') {
+            <img class="h-[1.9rem] max-w-[12rem] object-contain rounded-md" src="assets/logos/prof.png"
+              alt="Professional logo" />
+            } @else if(complianceVC && complianceLevel=='PP') {
+            <img class="h-[1.9rem] max-w-[12rem] object-contain rounded-md" src="assets/logos/profplus.png"
+              alt="Professional plus logo" />
+            }
+          </div>
+          <div class="ml-auto flex items-center gap-2">
+            <button type="button" (click)="openRequestValidationModal(); $event.stopPropagation();"
+              [disabled]="!hasSelfAttestation() || hasUnsavedComplianceProfileChanges()"
+              [ngClass]="(!hasSelfAttestation() || hasUnsavedComplianceProfileChanges()) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary-50'"
+              class="flex text-white justify-end bg-primary-100 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">
+              Request Validation
+              <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="M5 11.917 9.724 16.5 19 7.5" />
+              </svg>
+            </button>
 
-                        <div class="flex">
-                            <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>
-                    @if (hasUnsavedComplianceProfileChanges()) {
-                        <div class="mx-4 mb-3 p-3 text-sm text-amber-800 rounded-lg bg-amber-100 dark:bg-amber-900 dark:text-amber-200" role="alert">
-                            Request Validation is disabled because the compliance profile has unsaved changes. Update product first.
-                        </div>
-                    }
-                    <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
-                        {{ 'UPDATE_PROD_SPEC._self_attestation' | translate }}
-                    </h3>
-                    <div class="flex items-center justify-between ml-4 border border-1 p-2 rounded-lg shadow bg-white dark:bg-secondary-200 shadow-md">
+            <div class="flex">
+              <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>
+        @if (hasUnsavedComplianceProfileChanges()) {
+        <div class="mx-4 mb-3 p-3 text-sm text-amber-800 rounded-lg bg-amber-100 dark:bg-amber-900 dark:text-amber-200"
+          role="alert">
+          Request Validation is disabled because the compliance profile has unsaved changes. Update product first.
+        </div>
+        }
+        <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
+          {{ 'UPDATE_PROD_SPEC._self_attestation' | translate }}
+        </h3>
+        <div
+          class="flex items-center justify-between ml-4 border border-1 p-2 rounded-lg shadow bg-white dark:bg-secondary-200 shadow-md">
 
-                        <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 (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">
-                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v9m-5 0H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2M8 9l4-5 4 5m1 8h.01"/>
-                                </svg>                                                
-                            </button>
-                            @if(selfAtt && !checkExistingSelfAtt){
-                                <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> 
-                            }
-                        </div>
+          <p class="mb-2 text-gray-800 dark:text-gray-200">
+            {{ selfAtt ? selfAtt.productSpecCharacteristicValue[0].value : 'Upload your self attestation document' }}
+          </p>
 
-                    </div>
-                    @if(availableISOS.length>0){
-                        <button id="dropdownButtonISO" (click)="buttonISOClicked=!buttonISOClicked" data-dropdown-toggle="dropdownISO" class="text-white w-full m-4 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 justify-between" type="button">
-                            {{ 'UPDATE_PROD_SPEC._add_comp' | translate }}
-                            <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
-                            </svg>
-                        </button>
-                        @if(buttonISOClicked){
-                            <!-- Dropdown menu -->
-                            <div id="dropdownISO" class="z-10 w-full ml-4 mr-4 bg-secondary-50 dark:bg-secondary-300 divide-y divide-gray-100 rounded-lg shadow">
-                                <ul class="p-3 space-y-3 text-sm text-gray-700" aria-labelledby="dropdownButtonISO">
-                                    @for (iso of availableISOS; track iso;) {
-                                        <li>
-                                            <div class="flex items-center justify-between">
-                                                <label for="checkbox-item-1" class="ms-2 text-sm" [ngClass]="iso.domesupported == true ? 'text-primary-100 font-bold' : 'text-gray-900 font-medium'">
-                                                    {{iso.name}}
-                                                </label>
-                                                <button (click)="addISO(iso)" type="button" class="text-white 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="18" height="18" 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>
-                                                </button>
-                                            </div>
-                                        </li>
-                                    }
-                                </ul>
-                            </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">{{ 'UPDATE_PROD_SPEC._how_to_verify' | translate }}</h3>
-                        </div>
-                        <div class="px-3 py-2 inline-block">
-                            <p class="inline-block">Requesting a validation will submit your certificates and self attestation to the compliance service for validation</p>
-                        </div>
-                        <div data-popper-arrow></div>
-                    </div>                 
-                    
-                    <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>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._value' | translate }}
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._actions' | translate }}
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                @for (sel of selectedISOS; track sel.name; let idx = $index) {
-                                    <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td [ngClass]="{
+          <div class="flex items-center justify-between">
+            <button (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">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M12 5v9m-5 0H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2M8 9l4-5 4 5m1 8h.01" />
+              </svg>
+            </button>
+            @if(selfAtt && !checkExistingSelfAtt){
+            <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>
+            }
+          </div>
+
+        </div>
+        @if(availableISOS.length>0){
+        <button id="dropdownButtonISO" (click)="buttonISOClicked=!buttonISOClicked" data-dropdown-toggle="dropdownISO"
+          class="text-white w-full m-4 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 justify-between"
+          type="button">
+          {{ 'UPDATE_PROD_SPEC._add_comp' | translate }}
+          <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+            viewBox="0 0 10 6">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="m1 1 4 4 4-4" />
+          </svg>
+        </button>
+        @if(buttonISOClicked){
+        <!-- Dropdown menu -->
+        <div id="dropdownISO"
+          class="z-10 w-full ml-4 mr-4 bg-secondary-50 dark:bg-secondary-300 divide-y divide-gray-100 rounded-lg shadow">
+          <ul class="p-3 space-y-3 text-sm text-gray-700" aria-labelledby="dropdownButtonISO">
+            @for (iso of availableISOS; track iso;) {
+            <li>
+              <div class="flex items-center justify-between">
+                <label for="checkbox-item-1" class="ms-2 text-sm"
+                  [ngClass]="iso.domesupported == true ? 'text-primary-100 font-bold' : 'text-gray-900 font-medium'">
+                  {{iso.name}}
+                </label>
+                <button (click)="addISO(iso)" type="button"
+                  class="text-white 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="18"
+                    height="18" 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>
+                </button>
+              </div>
+            </li>
+            }
+          </ul>
+        </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">{{ 'UPDATE_PROD_SPEC._how_to_verify' | translate }}
+            </h3>
+          </div>
+          <div class="px-3 py-2 inline-block">
+            <p class="inline-block">Requesting a validation will submit your certificates and self attestation to the
+              compliance service for validation</p>
+          </div>
+          <div data-popper-arrow></div>
+        </div>
+
+        <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>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._value' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._actions' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (sel of selectedISOS; track sel.name; let idx = $index) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                             'break-all': hasLongWord(sel.name, 20),
                                             'break-words': !hasLongWord(sel.name, 20)
                                             }" class="px-6 py-4 text-wrap break-words">
-                                            {{normalizeName(sel.name)}}
-                                        </td>
-                                        <td class="px-6 py-4 text-wrap break-all">
-                                            {{sel.url}}                                      
-                                        </td>
-                                        <td class="px-6 py-4 inline-flex">
-                                            <button (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">
-                                                <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="M12 5v9m-5 0H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2M8 9l4-5 4 5m1 8h.01"/>
-                                                </svg>                                                
-                                            </button>
-                                            <button (click)="removeISO(sel)" 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>                                              
-                                        </td>
-                                    </tr>
-                                } @empty {
-                                    <div class="flex justify-center w-full m-4 dark:bg-secondary-300">
-                                        <div class="flex 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">
-                                          <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                                          </svg>
-                                          <span class="sr-only">Info</span>
-                                          <div>
-                                              {{ 'UPDATE_PROD_SPEC._no_comp_profile' | translate }}
-                                          </div>
-                                        </div>
-                                    </div>
-                                }
-                            </tbody>
-                        </table>
-                    </div>
+                  {{normalizeName(sel.name)}}
+                </td>
+                <td class="px-6 py-4 text-wrap break-all">
+                  {{sel.url}}
+                </td>
+                <td class="px-6 py-4 inline-flex">
+                  <button (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">
+                    <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="M12 5v9m-5 0H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2M8 9l4-5 4 5m1 8h.01" />
+                    </svg>
+                  </button>
+                  <button (click)="removeISO(sel)" 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>
+                </td>
+              </tr>
+              } @empty {
+              <div class="flex justify-center w-full m-4 dark:bg-secondary-300">
+                <div
+                  class="flex 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">
+                  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+                  </svg>
+                  <span class="sr-only">Info</span>
+                  <div>
+                    {{ 'UPDATE_PROD_SPEC._no_comp_profile' | translate }}
+                  </div>
+                </div>
+              </div>
+              }
+            </tbody>
+          </table>
+        </div>
 
-                    <!-- Wrapper for button & tooltip -->
-                    <div class="relative flex w-full justify-end 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 
+        <!-- Wrapper for button & tooltip -->
+        <div class="relative flex w-full justify-end 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
                                     opacity-0 invisible group-hover:opacity-100 group-hover:visible">
-                                    {{ 'CREATE_PROD_SPEC._file_check' | translate }}
-                                <!-- 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>
+              {{ 'CREATE_PROD_SPEC._file_check' | translate }}
+              <!-- 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>
 
-                            <!-- Button -->
-                            <!--<button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)"
+            <!-- Button -->
+            <!--<button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)"
                                     [disabled]="checkValidISOS()"
                                     [ngClass]="checkValidISOS() ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary-50'"
                                     class="flex text-white bg-primary-100 focus:ring-4 focus:outline-none
@@ -461,517 +535,624 @@ <h3 class="font-semibold text-gray-900 dark:text-white">{{ 'UPDATE_PROD_SPEC._ho
                                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                                 </svg>
                             </button>-->
-                        </div>
-                    </div>
-                    @if(additionalISOS.length>0){
-                        <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"> 
-                        <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>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._value' | translate }}
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._actions' | translate }}
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                @for (cert of additionalISOS; track cert.name; let idx = $index) {
-                                    <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td [ngClass]="{
+          </div>
+        </div>
+        @if(additionalISOS.length>0){
+        <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">
+          <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>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._value' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._actions' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (cert of additionalISOS; track cert.name; let idx = $index) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                             'break-all': hasLongWord(cert.name, 20),
                                             'break-words': !hasLongWord(cert.name, 20)
                                             }" class="px-6 py-4 text-wrap break-words">
-                                            {{normalizeName(cert.name)}}
-                                        </td>
-                                        <td class="px-6 py-4 text-wrap break-all">
-                                            {{cert.url}}                                      
-                                        </td>
-                                        <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>                                              
-                                        </td>
-                                    </tr>
-                                }
-                            </tbody>
-                        </table>
-                        </div>
-                    }
-                    @if(showCert==false){
-                        <div class="flex w-full justify-items-center justify-center">
-                            <button type="button" (click)="showCert=!showCert" 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">
-                                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>                                  
-                            </button>
-                        </div>
-                    } @else {
-                        <div class="m-4 w-full">
-                            <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="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" />    
-                                </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)">
-                                        <ng-template class="w-full" ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-                                            <div class="w-full flex flex-col justify-items-center justify-center">
-                                                <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>
-                                                <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> 
-                                                </div>
-                                            </div>
-                                        </ng-template>
-                                    </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>
-                                        <label class="text-wrap break-all">
-                                            {{isoToCreate}}
-                                        </label>
-                                        <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>                                  
-                                        </button>
-                                    </div>
-                                }
-                                </div>
-                                <div class="flex w-full justify-items-center justify-center mt-4">
-                                    <button type="button" (click)="saveAdditionalCert()"
-                                    [disabled]="!certFileName.valid || isoToCreate == ''" [ngClass]="!certFileName.valid || isoToCreate == '' ? 'opacity-50' : 'hover:bg-primary-50'"
-                                    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">
-                                        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>                                                                   
-                                    </button>
-                                    <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                                                                 
-                                    </button>
-                                </div>
-                        </div>
-                    }
-    
-                }
-                @if (isCurrentStep('characteristics') || isCurrentStep('dataspace')) {
-                    @if (getFilteredCharacteristicsForCurrentStep().length === 0){
-                        <div class="flex justify-center w-full m-4">
-                          <div class="flex 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">
-                            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                              <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                            </svg>
-                            <span class="sr-only">Info</span>
-                            <div>
-                                {{ 'UPDATE_PROD_SPEC._no_chars' | translate }}
-                            </div>
-                          </div>
-                        </div>
-                    } @else {
-                        <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>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                        </th>
-                                        <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                            {{ 'UPDATE_PROD_SPEC._product_description' | translate }}
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'UPDATE_PROD_SPEC._values' | translate }}
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'UPDATE_PROD_SPEC._actions' | translate }}
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    @for (prod of getFilteredCharacteristicsForCurrentStep(); track prod.id) {
-                                        <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td [ngClass]="{
+                  {{normalizeName(cert.name)}}
+                </td>
+                <td class="px-6 py-4 text-wrap break-all">
+                  {{cert.url}}
+                </td>
+                <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>
+                </td>
+              </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        }
+        @if(showCert==false){
+        <div class="flex w-full justify-items-center justify-center">
+          <button type="button" (click)="showCert=!showCert"
+            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">
+            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>
+          </button>
+        </div>
+        } @else {
+        <div class="m-4 w-full">
+          <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="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" />
+            </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)">
+              <ng-template class="w-full" ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+                <div class="w-full flex flex-col justify-items-center justify-center">
+                  <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>
+                  <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>
+                  </div>
+                </div>
+              </ng-template>
+            </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>
+              <label class="text-wrap break-all">
+                {{isoToCreate}}
+              </label>
+              <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>
+              </button>
+            </div>
+            }
+          </div>
+          <div class="flex w-full justify-items-center justify-center mt-4">
+            <button type="button" (click)="saveAdditionalCert()" [disabled]="!certFileName.valid || isoToCreate == ''"
+              [ngClass]="!certFileName.valid || isoToCreate == '' ? 'opacity-50' : 'hover:bg-primary-50'"
+              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">
+              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>
+            </button>
+            <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
+            </button>
+          </div>
+        </div>
+        }
+
+        }
+        @if (isCurrentStep('characteristics') || isCurrentStep('dataspace')) {
+        @if (getFilteredCharacteristicsForCurrentStep().length === 0){
+        <div class="flex justify-center w-full m-4">
+          <div
+            class="flex 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">
+            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+            </svg>
+            <span class="sr-only">Info</span>
+            <div>
+              {{ 'UPDATE_PROD_SPEC._no_chars' | translate }}
+            </div>
+          </div>
+        </div>
+        } @else {
+        <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>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._product_description' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._values' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._actions' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (prod of getFilteredCharacteristicsForCurrentStep(); track prod.id) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                                 'break-all': hasLongWord(prod.name, 20),
                                                 'break-words': !hasLongWord(prod.name, 20)
                                                 }" class="px-6 py-4 max-w-1/6 text-wrap break-words">
-                                                {{prod.name}}
-                                            </td>
-                                            <td [ngClass]="{
+                  {{prod.name}}
+                </td>
+                <td [ngClass]="{
                                                 '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}}                                       
-                                            </td>
-                                            <td class="px-6 py-4 text-wrap break-all">
-                                                @for (char of prod.productSpecCharacteristicValue; track char; let last = $last) {
-                                                    @if(char.value || char.value == 0){
-                                                        @if(isJsonCharacteristicType(prod.valueType)){
-                                                            @if(!last){
-                                                                {{getValuePreview(char.value)}},
-                                                            } @else {
-                                                                {{getValuePreview(char.value)}}
-                                                            }
-                                                        } @else if(char.unitOfMeasure){
-                                                            @if(!last){
-                                                                {{char.value}} (<i>{{char?.unitOfMeasure}}</i>),
-                                                            } @else {
-                                                                {{char.value}} (<i>{{char?.unitOfMeasure}}</i>)
-                                                            }
-                                                        } @else {
-                                                            @if(!last){
-                                                                {{char.value}},
-                                                            } @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>    
-                                            </td>
-                                        </tr>
-                                    }
-                                </tbody>
-                            </table>
-                        </div>                        
-                    }
-                    @if(showCreateChar==false){
-                        <div class="flex w-full justify-items-center justify-center">
-                            <button type="button" (click)="toggleCreateCharacteristicForm()" 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">
-                                {{ isDataspaceConfigurationStep() ? 'Add Dataspace Configuration' : ('UPDATE_PROD_SPEC._new_char' | 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>                                  
-                            </button>
-                        </div>
-                    } @else {
-                        <form class="m-4 grid grid-cols-2 gap-4" [formGroup]="charsForm">
-                            <div>
-                                <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_name' | translate }}</label>
-                                <input formControlName="name" type="text" id="prod-name" maxLength="100"
-                                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>
-                            <div>
-                                <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._type' | translate }}</label>
-                                <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">
-                                    @if(isDataspaceConfigurationStep()){
-                                        <option value="endpointUrl">Endpoint URL</option>
-                                        <option value="upstreamAddress">Upstream Address</option>
-                                        <option value="endpointDescription">Endpoint Description</option>
-                                        <option value="targetSpecification">Target Specification</option>
-                                        <option value="serviceConfiguration">Service Configuration</option>
-                                        <option value="credentialsConfiguration">Credentials Configuration</option>
-                                        <option value="authorizationPolicy">Authorization Policy</option>
-                                    } @else {
-                                        <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">
-                                <label for="description" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_description' | translate }}</label>
-                                <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>
-                            @if(!isDataspaceConfigurationStep() && charTypeSelected !== 'boolean' && !isJsonCharacteristicType(charTypeSelected)){
-                                <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 && 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(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=""
-                                                    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>    
-                                                </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>                                  
-                                                </button>
-                                            </div>
-                                        }
-                                    } @else {
-                                        @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=""
-                                                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-full focus:ring-blue-500 focus:ring-2">
-                                                    @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 if (isJsonCharacteristicType(charTypeSelected)) {
-                                                        <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-white text-wrap break-all">{{getValuePreview(char.value)}}</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>                                  
-                                                </button>
-                                            </div>
-                                        }
-                                    }
-                                </div>
-                            }
-                            <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(isTextCharacteristicType(charTypeSelected)){
-                                <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"/>
-                                    <button (click)="addCharValue()" [disabled]="!stringValue" [ngClass]="!stringValue ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button" class="text-white w-fit h-full 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-6 h-6 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="M5 12h14m-7 7V5"/>
-                                        </svg>                                                                              
-                                    </button> 
-                                </div>
-                            } @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">
-                                            {{ 'UPDATE_PROD_SPEC._value' | translate }}
-                                        </span>
-                                        <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="numberValue"
-                                        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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    </div>
-                                    <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">
-                                            {{ 'UPDATE_PROD_SPEC._unit' | translate }}
-                                        </span>
-                                        <input type="text" id="value" [(ngModel)]="numberUnit"
-                                        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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    </div>                           
-                                    
-                                    <button (click)="addCharValue()" [disabled]="(numberValue === '' || numberValue === null || numberValue === undefined) || !numberUnit" [ngClass]="(numberValue === '' || numberValue === null || numberValue === undefined) || !numberUnit ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button" class="text-white w-fit h-full 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-6 h-6 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="M5 12h14m-7 7V5"/>
-                                        </svg>                                                                              
-                                    </button> 
-                                </div>
-                            } @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">
-                                            {{ 'UPDATE_PROD_SPEC._from' | translate }}
-                                        </span>
-                                        <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="fromValue"
-                                        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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    </div>
-                                    <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">
-                                            {{ 'UPDATE_PROD_SPEC._to' | translate }}
-                                        </span>
-                                        <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="toValue"
-                                        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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    </div>
-                                    <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">
-                                            {{ 'UPDATE_PROD_SPEC._unit' | translate }}
-                                        </span>
-                                        <input type="text" id="value" [(ngModel)]="rangeUnit"
-                                        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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    </div>
-                                    <button (click)="addCharValue()" [disabled]="(fromValue === '' || fromValue === null || fromValue === undefined) || (toValue === '' || toValue === null || toValue === undefined) || !rangeUnit" [ngClass]="(fromValue === '' || fromValue === null || fromValue === undefined) || (toValue === '' || toValue === null || toValue === undefined) || !rangeUnit ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'"  type="button" class="text-white w-fit h-full 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-6 h-6 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="M5 12h14m-7 7V5"/>
-                                        </svg>                                                                              
-                                    </button> 
-                                </div>
-                            } @else if (isJsonCharacteristicType(charTypeSelected)){
-                                @if(creatingChars.length === 0){
-                                    <div class="flex flex-col w-full">
-                                        <label for="json-value" class="font-bold text-sm dark:text-white mb-2">{{ 'UPDATE_PROD_SPEC._json_value' | translate }}</label>
-                                        <textarea id="json-value" [(ngModel)]="jsonValue" rows="10"
-                                        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 font-mono"
-                                        placeholder='{"example": "Enter your JSON here"}'></textarea>
-                                        <button (click)="addCharValue()" [disabled]="!jsonValue" [ngClass]="!jsonValue ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button" class="text-white w-fit bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center inline-flex items-center">
-                                            <svg class="w-4 h-4 mr-2 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="M5 12h14m-7 7V5"/>
-                                            </svg>
-                                            {{ 'UPDATE_PROD_SPEC._add_json' | translate }}
-                                        </button>
-                                    </div>
-                                }
-                            }
-                            <div class="flex w-full justify-items-center justify-center mt-4">
-                                <button data-cy="btnSaveCharacteristic" type="button" (click)="saveChar()" [disabled]="!charsForm.valid || creatingChars.length==0" [ngClass]="!charsForm.valid || creatingChars.length==0 ? 'opacity-50' : 'hover:bg-primary-50'" 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">
-                                    {{ 'UPDATE_PROD_SPEC._save_char' | 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>
-                                </button>
-                            </div>
-    
-                        </div>
-                    }
-                    <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
+                  {{prod.description}}
+                </td>
+                <td class="px-6 py-4 text-wrap break-all">
+                  @for (char of prod.productSpecCharacteristicValue; track char; let last = $last) {
+                  @if(char.value || char.value == 0){
+                  @if(isDataSpaceCharacteristicType(prod.valueType)){
+                  @if(!last){
+                  {{getValuePreview(char.value)}},
+                  } @else {
+                  {{getValuePreview(char.value)}}
+                  }
+                  } @else if(char.unitOfMeasure){
+                  @if(!last){
+                  {{char.value}} (<i>{{char?.unitOfMeasure}}</i>),
+                  } @else {
+                  {{char.value}} (<i>{{char?.unitOfMeasure}}</i>)
+                  }
+                  } @else {
+                  @if(!last){
+                  {{char.value}},
+                  } @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>
+                </td>
+              </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        }
+        @if(showCreateChar==false){
+        <div class="flex w-full justify-items-center justify-center">
+          <button type="button" (click)="toggleCreateCharacteristicForm()"
+            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">
+            {{ isDataspaceConfigurationStep() ? 'Add Dataspace Configuration' : ('UPDATE_PROD_SPEC._new_char' |
+            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>
+          </button>
+        </div>
+        } @else {
+        <form class="m-4 grid grid-cols-2 gap-4" [formGroup]="charsForm">
+          <div>
+            <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_name' |
+              translate }}</label>
+            <input formControlName="name" type="text" id="prod-name" maxLength="100"
+              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>
+          <div>
+            <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._type' | translate }}</label>
+            <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">
+              @if(isDataspaceConfigurationStep()){
+              <option value="credentialsConfiguration">Credentials Configuration</option>
+              <option value="authorizationPolicy">Authorization Policy</option>
+              } @else {
+              <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">
+            <label for="description" class="font-bold text-lg dark:text-white">{{
+              'UPDATE_PROD_SPEC._product_description' | translate }}</label>
+            <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>
+          @if(!isDataspaceConfigurationStep() && 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 && 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(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=""
+                  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>
+              </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>
+              </button>
+            </div>
+            }
+            } @else {
+            @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=""
+                  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-full focus:ring-blue-500 focus:ring-2">
+                @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 if (isDataSpaceCharacteristicType(charTypeSelected)) {
+                <label for="disabled-checked-checkbox"
+                  class="ms-2 text-sm font-medium text-gray-700 dark:text-white text-wrap break-all">{{getValuePreview(char.value)}}</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>
+              </button>
+            </div>
+            }
+            }
+          </div>
+          }
+          <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(isTextCharacteristicType(charTypeSelected)){
+          <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" />
+            <button (click)="addCharValue()" [disabled]="!stringValue"
+              [ngClass]="!stringValue ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button"
+              class="text-white w-fit h-full 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-6 h-6 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="M5 12h14m-7 7V5" />
+              </svg>
+            </button>
+          </div>
+          } @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">
+                {{ 'UPDATE_PROD_SPEC._value' | translate }}
+              </span>
+              <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="numberValue"
+                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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+            </div>
+            <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">
+                {{ 'UPDATE_PROD_SPEC._unit' | translate }}
+              </span>
+              <input type="text" id="value" [(ngModel)]="numberUnit"
+                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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+            </div>
+
+            <button (click)="addCharValue()"
+              [disabled]="(numberValue === '' || numberValue === null || numberValue === undefined) || !numberUnit"
+              [ngClass]="(numberValue === '' || numberValue === null || numberValue === undefined) || !numberUnit ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'"
+              type="button"
+              class="text-white w-fit h-full 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-6 h-6 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="M5 12h14m-7 7V5" />
+              </svg>
+            </button>
+          </div>
+          } @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">
+                {{ 'UPDATE_PROD_SPEC._from' | translate }}
+              </span>
+              <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="fromValue"
+                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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+            </div>
+            <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">
+                {{ 'UPDATE_PROD_SPEC._to' | translate }}
+              </span>
+              <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="toValue"
+                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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+            </div>
+            <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">
+                {{ 'UPDATE_PROD_SPEC._unit' | translate }}
+              </span>
+              <input type="text" id="value" [(ngModel)]="rangeUnit"
+                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-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+            </div>
+            <button (click)="addCharValue()"
+              [disabled]="(fromValue === '' || fromValue === null || fromValue === undefined) || (toValue === '' || toValue === null || toValue === undefined) || !rangeUnit"
+              [ngClass]="(fromValue === '' || fromValue === null || fromValue === undefined) || (toValue === '' || toValue === null || toValue === undefined) || !rangeUnit ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'"
+              type="button"
+              class="text-white w-fit h-full 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-6 h-6 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="M5 12h14m-7 7V5" />
+              </svg>
+            </button>
+          </div>
+          }
+          @else if (isDataSpaceCharacteristicType(charTypeSelected)){
+          @if(creatingChars.length === 0){
+          <div class="flex flex-col w-full">
+            <label for="json-value" class="font-bold text-sm dark:text-white mb-2">{{ 'UPDATE_PROD_SPEC._json_value' |
+              translate }}</label>
+            <textarea id="json-value" [(ngModel)]="jsonValue" rows="10"
+              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 font-mono"
+              placeholder='{"example": "Enter your JSON here"}'></textarea>
+            <button (click)="addCharValue()" [disabled]="!jsonValue"
+              [ngClass]="!jsonValue ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button"
+              class="text-white w-fit bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center inline-flex items-center">
+              <svg class="w-4 h-4 mr-2 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="M5 12h14m-7 7V5" />
+              </svg>
+              {{ 'UPDATE_PROD_SPEC._add_json' | translate }}
+            </button>
+          </div>
+          }
+          }
+          <div class="flex w-full justify-items-center justify-center mt-4">
+            <button data-cy="btnSaveCharacteristic" type="button" (click)="saveChar()"
+              [disabled]="!charsForm.valid || creatingChars.length==0"
+              [ngClass]="!charsForm.valid || creatingChars.length==0 ? 'opacity-50' : 'hover:bg-primary-50'"
+              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">
+              {{ 'UPDATE_PROD_SPEC._save_char' | 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>
+            </button>
+          </div>
+
+        </div>
+        }
+        <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
                         <button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)" class="flex text-white justify-end 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">
                             {{ 'UPDATE_PROD_SPEC._next' | 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 14 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                             </svg>
                         </button>
-                    </div>  -->                  
-                }
-            
-                @if (isCurrentStep('resource')) {
-                    @if(loadingResourceSpec){
-                        <div role="status" class="w-full h-fit flex justify-center align-middle">
-                            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                            </svg>
-                            <span class="sr-only">Loading...</span>
-                        </div>
-                    } @else {
-                        @if(resourceSpecs.length==0){
-                            <div class="flex justify-center w-full m-4">
-                                <div class="flex 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">
-                                    <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                                    </svg>
-                                    <div>
-                                        {{ 'OFFERINGS._no_res' | translate }}
-                                    </div>
-                                </div>
-                            </div>                    
-                        }@else{
-                        <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>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                    </th>
-                                    <th scope="col" class="hidden md:table-cell px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._status' | translate }}
-                                    </th>
-                                    <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._last_update' | translate }}
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._select' | translate }}
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                @for (res of resourceSpecs; track res.id) {
-                                    <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td [ngClass]="{
+                    </div>  -->
+        }
+
+        @if (isCurrentStep('resource')) {
+        @if(loadingResourceSpec){
+        <div role="status" class="w-full h-fit flex justify-center align-middle">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
+        } @else {
+        @if(resourceSpecs.length==0){
+        <div class="flex justify-center w-full m-4">
+          <div
+            class="flex 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">
+            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+            </svg>
+            <div>
+              {{ 'OFFERINGS._no_res' | translate }}
+            </div>
+          </div>
+        </div>
+        }@else{
+        <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>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="hidden md:table-cell px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._status' | translate }}
+                </th>
+                <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._last_update' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._select' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (res of resourceSpecs; track res.id) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                             'break-all': hasLongWord(res.name, 20),
                                             'break-words': !hasLongWord(res.name, 20)
                                             }" class="px-6 py-4 text-wrap break-words">
-                                            {{res.name}}
-                                        </td>
-                                        <td class="hidden md:table-cell px-6 py-4">
-                                            @if(res.lifecycleStatus == 'Active'){
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{res.lifecycleStatus}}</span>
-                                            } @else if(res.lifecycleStatus == 'Launched') {
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{res.lifecycleStatus}}</span>
-                                            } @else if(res.lifecycleStatus == 'Retired') {
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{res.lifecycleStatus}}</span>
-                                            } @else if(res.lifecycleStatus == 'Obsolete') {
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{res.lifecycleStatus}}</span>
-                                            }
-                                        </td>
-                                        <td class="hidden lg:table-cell px-6 py-4">
-                                            {{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">
-                                        </td>
-                                    </tr>
-                                }
-                            </tbody>
-                        </table>
-                        </div>
-                        }
-                        }
-                        @if (!loadingResourceSpec_more) {
-                            @if (resourceSpecPageCheck) {
-                            <div class="flex pt-6 pb-2 justify-center align-middle">
-                                <button (click)="nextRes()" class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
-                                {{ 'UPDATE_PROD_SPEC._load_more' | translate }}
-                                <svg class="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>
-                                </button>
-                            </div>
-                            }
-                        } @else {
-                            <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
-                            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                            </svg>
-                            <span class="sr-only">Loading...</span>
-                            </div>
-                        }
-                    <!--<div class="flex w-full justify-items-end justify-end ml-4">
+                  {{res.name}}
+                </td>
+                <td class="hidden md:table-cell px-6 py-4">
+                  @if(res.lifecycleStatus == 'Active'){
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{res.lifecycleStatus}}</span>
+                  } @else if(res.lifecycleStatus == 'Launched') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{res.lifecycleStatus}}</span>
+                  } @else if(res.lifecycleStatus == 'Retired') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{res.lifecycleStatus}}</span>
+                  } @else if(res.lifecycleStatus == 'Obsolete') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{res.lifecycleStatus}}</span>
+                  }
+                </td>
+                <td class="hidden lg:table-cell px-6 py-4">
+                  {{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">
+                </td>
+              </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        }
+        }
+        @if (!loadingResourceSpec_more) {
+        @if (resourceSpecPageCheck) {
+        <div class="flex pt-6 pb-2 justify-center align-middle">
+          <button (click)="nextRes()"
+            class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
+            {{ 'UPDATE_PROD_SPEC._load_more' | translate }}
+            <svg class="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>
+          </button>
+        </div>
+        }
+        } @else {
+        <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
+        }
+        <!--<div class="flex w-full justify-items-end justify-end ml-4">
                         <button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)" class="flex text-white justify-end 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">
                             {{ 'UPDATE_PROD_SPEC._next' | 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 14 10">
@@ -979,101 +1160,125 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                             </svg>
                         </button>
                     </div>-->
-                }
-                @if (isCurrentStep('service')) {
-                    @if(loadingServiceSpec){
-                        <div role="status" class="w-full h-fit flex justify-center align-middle">
-                            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                            </svg>
-                            <span class="sr-only">Loading...</span>
-                            </div>
-                    } @else {
-                        @if(serviceSpecs.length==0){
-                            <div class="flex justify-center w-full m-4">
-                                <div class="flex 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">
-                                    <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                                    </svg>
-                                    <div>
-                                        {{ 'OFFERINGS._no_serv' | translate }}
-                                    </div>
-                                </div>
-                            </div>                    
-                        }@else{
-                        <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>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                    </th>
-                                    <th scope="col" class="hidden md:table-cell px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._status' | translate }}
-                                    </th>
-                                    <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._last_update' | translate }}
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        {{ 'UPDATE_PROD_SPEC._select' | translate }}
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                @for (serv of serviceSpecs; track serv.id) {
-                                    <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td [ngClass]="{
+        }
+        @if (isCurrentStep('service')) {
+        @if(loadingServiceSpec){
+        <div role="status" class="w-full h-fit flex justify-center align-middle">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
+        } @else {
+        @if(serviceSpecs.length==0){
+        <div class="flex justify-center w-full m-4">
+          <div
+            class="flex 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">
+            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+            </svg>
+            <div>
+              {{ 'OFFERINGS._no_serv' | translate }}
+            </div>
+          </div>
+        </div>
+        }@else{
+        <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>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="hidden md:table-cell px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._status' | translate }}
+                </th>
+                <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._last_update' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._select' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (serv of serviceSpecs; track serv.id) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                             'break-all': hasLongWord(serv.name, 20),
                                             'break-words': !hasLongWord(serv.name, 20)
                                             }" class="px-6 py-4 text-wrap break-words">
-                                            {{serv.name}}
-                                        </td>
-                                        <td class="hidden md:table-cell px-6 py-4">
-                                            @if(serv.lifecycleStatus == 'Active'){
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{serv.lifecycleStatus}}</span>
-                                            } @else if(serv.lifecycleStatus == 'Launched') {
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{serv.lifecycleStatus}}</span>
-                                            } @else if(serv.lifecycleStatus == 'Retired') {
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{serv.lifecycleStatus}}</span>
-                                            } @else if(serv.lifecycleStatus == 'Obsolete') {
-                                                <span class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{serv.lifecycleStatus}}</span>
-                                            }
-                                        </td>
-                                        <td class="hidden lg:table-cell px-6 py-4">
-                                            {{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">
-                                        </td>
-                                    </tr>
-                                }
-                            </tbody>
-                        </table>
-                        </div>
-                        }
-                        }
-                        @if (!loadingServiceSpec_more) {
-                            @if (serviceSpecPageCheck) {
-                            <div class="flex pt-6 pb-2 justify-center align-middle">
-                                <button (click)="nextServ()" class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
-                                    {{ 'UPDATE_PROD_SPEC._load_more' | translate }}
-                                <svg class="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>
-                                </button>
-                            </div>
-                            }
-                        } @else {
-                            <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
-                            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                            </svg>
-                            <span class="sr-only">Loading...</span>
-                            </div>
-                        }
-                    <!--<div class="flex w-full justify-items-end justify-end ml-4">
+                  {{serv.name}}
+                </td>
+                <td class="hidden md:table-cell px-6 py-4">
+                  @if(serv.lifecycleStatus == 'Active'){
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{serv.lifecycleStatus}}</span>
+                  } @else if(serv.lifecycleStatus == 'Launched') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{serv.lifecycleStatus}}</span>
+                  } @else if(serv.lifecycleStatus == 'Retired') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{serv.lifecycleStatus}}</span>
+                  } @else if(serv.lifecycleStatus == 'Obsolete') {
+                  <span
+                    class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{serv.lifecycleStatus}}</span>
+                  }
+                </td>
+                <td class="hidden lg:table-cell px-6 py-4">
+                  {{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">
+                </td>
+              </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        }
+        }
+        @if (!loadingServiceSpec_more) {
+        @if (serviceSpecPageCheck) {
+        <div class="flex pt-6 pb-2 justify-center align-middle">
+          <button (click)="nextServ()"
+            class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
+            {{ 'UPDATE_PROD_SPEC._load_more' | translate }}
+            <svg class="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>
+          </button>
+        </div>
+        }
+        } @else {
+        <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor" />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill" />
+          </svg>
+          <span class="sr-only">Loading...</span>
+        </div>
+        }
+        <!--<div class="flex w-full justify-items-end justify-end ml-4">
                         <button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)" class="flex text-white justify-end 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">
                             {{ 'UPDATE_PROD_SPEC._next' | 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 14 10">
@@ -1081,199 +1286,406 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                             </svg>
                         </button>
                     </div>-->
+        }
+        @if (currentStep.id === 'dsp_config') {
+        <div class="m-4">
+          <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left mb-4">DSP Config</h3>
+
+          @if (endpointUrls.length > 0) {
+          <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white dark:bg-secondary-300 mb-4">
+            <table class="table-fixed w-full text-sm text-left 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>
+                  <th scope="col" class="w-96 px-6 py-3">Endpoint URL</th>
+                  <th scope="col" class="px-6 py-3">Description</th>
+                  <th scope="col" class="w-48 px-2 py-3 text-center">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (entry of endpointUrls; track entry; let idx = $index) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td class="px-6 py-4 break-all">{{ entry.url }}</td>
+                  <td class="px-6 py-4 break-words">{{ entry.description }}</td>
+                  <td class="px-2 py-4 text-center">
+                    <button (click)="removeEndpointUrl(idx)" 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>
+                  </td>
+                </tr>
                 }
-                @if (isCurrentStep('attachments')) {
-                    <div class="inline-flex">
-                        <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._add_prod_img' | translate }}</h4>
-                        <div class="ml-4 flex">
-                            <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 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">{{ 'UPDATE_PROD_SPEC._file_res' | translate }}</h3>
-                            </div>
-                            <div class="px-3 py-2 inline-block">
-                                <p class="inline-block">{{ 'UPDATE_PROD_SPEC._restrictions' | translate }}
-                                </p>
-                            </div>
-                            <div data-popper-arrow></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>                                  
-                            </button>
-                        </div>
-                    } @else {
-                        <div class="flex w-full justify-center justify-items-center">
-                            <ngx-file-drop class="m-4 p-4 w-full" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event,'img')" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
-                                <ng-template class="w-full" ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-                                    <div class="w-full flex flex-col justify-items-center justify-center">
-                                        <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>
-                                        <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> 
-                                        </div>
-                                    </div>
-                                </ng-template>
-                            </ngx-file-drop>
-                        </div>
-                        <label class="font-bold ml-6 dark:text-white">{{ 'UPDATE_PROD_SPEC._add_prod_img_url' | translate }}</label>
-                        <div class="relative w-full ml-6 mt-2 mb-2">
-                            <!-- Tooltip (Above the Input, Positioned Up) -->
-                            <div *ngIf="attImageName.invalid && attImageName.touched"
-                                class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max bg-gray-900 text-white text-xs rounded-lg p-2 shadow-lg z-50">
-                                {{ 'UPDATE_PROD_SPEC._file_name' | translate }}
-                                <!-- 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"
-                                    [formControl]="attImageName"
-                                    (blur)="attImageName.markAsTouched()"
-                                    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" 
-                                    [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>                                  
-                                </button>
-                            </div>
-                        </div>
-                    }
-                    <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._add_att' | translate }}</h4>
-                    @if(prodAttachments.length == 0){
-                        <div class="flex justify-center w-full ml-6 mt-2 mb-2 mr-4">
-                            <div class="flex 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">
-                              <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                              </svg>
-                              <span class="sr-only">Info</span>
-                              <div>
-                                {{ 'UPDATE_PROD_SPEC._no_att' | translate }}
-                              </div>
-                            </div>
-                        </div>
-                    } @else {
-                        <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>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'UPDATE_PROD_SPEC._value' | translate }}
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                            {{ 'UPDATE_PROD_SPEC._actions' | translate }}
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    @for (att of prodAttachments; track att) {
-                                        <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td [ngClass]="{
+              </tbody>
+            </table>
+          </div>
+          }
+
+          <div class="flex flex-col gap-2">
+            <div class="flex gap-4">
+              <div class="flex flex-col w-1/2">
+                <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._dsp_endpoint_name' | translate
+                  }}</label>
+                <input [value]="newEndpointName" (input)="newEndpointName = $any($event.target).value" type="text"
+                  [placeholder]="'CREATE_PROD_SPEC._dsp_endpoint_name_placeholder' | translate"
+                  class="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>
+              <div class="flex flex-col w-1/2">
+                <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._dsp_endpoint_url' | translate
+                  }}</label>
+                <input [value]="newEndpointUrl" (input)="newEndpointUrl = $any($event.target).value" type="url"
+                  [placeholder]="'CREATE_PROD_SPEC._dsp_endpoint_url_placeholder' | translate"
+                  class="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>
+            </div>
+            <div>
+              <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._dsp_endpoint_description' |
+                translate }}</label>
+              <textarea [value]="newEndpointDescription" (input)="newEndpointDescription = $any($event.target).value"
+                rows="3" [placeholder]="'CREATE_PROD_SPEC._dsp_endpoint_description_placeholder' | translate"
+                maxlength="100000"
+                class="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="flex justify-center">
+              <button type="button" (click)="addEndpointUrl()"
+                [disabled]="!newEndpointUrl.trim() || !newEndpointDescription.trim()"
+                [class.opacity-50]="!newEndpointUrl.trim() || !newEndpointDescription.trim()"
+                [class.cursor-not-allowed]="!newEndpointUrl.trim() || !newEndpointDescription.trim()"
+                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._dsp_add_endpoint' | translate }}
+                <svg class="w-4 h-4 ml-2 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="M5 12h14m-7 7V5" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          @if (endpointUrls.length === 0) {
+          <p class="mt-2 text-sm text-red-500">At least one endpoint URL is required.</p>
+          }
+
+          <hr class="my-6 border-gray-200 dark:border-gray-700" />
+
+          <form [formGroup]="dspConfigForm" class="flex flex-col gap-4">
+            <div class="flex gap-4">
+              <div class="w-3/6">
+                <label class="font-bold text-lg dark:text-white">Upstream Address</label>
+                <input formControlName="upstreamAddress" type="text"
+                  class="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.border-red-600]="dspConfigForm.get('upstreamAddress')?.invalid && dspConfigForm.get('upstreamAddress')?.value !== ''"
+                  [class.border-gray-300]="!(dspConfigForm.get('upstreamAddress')?.invalid && dspConfigForm.get('upstreamAddress')?.value !== '')" />
+              </div>
+              <div class="w-2/6">
+                <label class="font-bold text-lg dark:text-white">Transfer path</label>
+                <input formControlName="transferPath" type="text"
+                  class="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.border-red-600]="dspConfigForm.get('transferPath')?.invalid && dspConfigForm.get('transferPath')?.value !== ''"
+                  [class.border-gray-300]="!(dspConfigForm.get('transferPath')?.invalid && dspConfigForm.get('transferPath')?.value !== '')" />
+              </div>
+              <div class="w-2/6">
+                <label class="font-bold text-lg dark:text-white">Transfer Type</label>
+                <select formControlName="transferType"
+                  class="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 *ngFor="let type of transferTypes" [value]="type">{{ type }}</option>
+                </select>
+              </div>
+            </div>
+            <div>
+              <label class="font-bold text-lg dark:text-white">Target Specification</label>
+              <textarea formControlName="targetSpecification" rows="4"
+                class="font-mono bg-gray-50 dark:bg-secondary-300 border 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.border-red-600]="dspConfigForm.get('targetSpecification')?.invalid && dspConfigForm.get('targetSpecification')?.touched"
+                [class.border-gray-300]="!(dspConfigForm.get('targetSpecification')?.invalid && dspConfigForm.get('targetSpecification')?.touched)"
+                placeholder='{"key": "value"}'></textarea>
+              @if (dspConfigForm.get('targetSpecification')?.touched) {
+              @if (dspConfigForm.get('targetSpecification')?.errors?.['required']) {
+              <p class="mt-1 text-sm text-red-500">This field is required</p>
+              } @else if (dspConfigForm.get('targetSpecification')?.errors?.['invalidJson']) {
+              <p class="mt-1 text-sm text-red-500">Invalid JSON</p>
+              }
+              }
+            </div>
+            <div>
+              <label class="font-bold text-lg dark:text-white">Service Configuration</label>
+              <textarea formControlName="serviceConfiguration" rows="4"
+                class="font-mono bg-gray-50 dark:bg-secondary-300 border 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.border-red-600]="dspConfigForm.get('serviceConfiguration')?.invalid && dspConfigForm.get('serviceConfiguration')?.touched"
+                [class.border-gray-300]="!(dspConfigForm.get('serviceConfiguration')?.invalid && dspConfigForm.get('serviceConfiguration')?.touched)"
+                placeholder='{"key": "value"}'></textarea>
+              @if (dspConfigForm.get('serviceConfiguration')?.touched) {
+              @if (dspConfigForm.get('serviceConfiguration')?.errors?.['required']) {
+              <p class="mt-1 text-sm text-red-500">This field is required</p>
+              } @else if (dspConfigForm.get('serviceConfiguration')?.errors?.['invalidJson']) {
+              <p class="mt-1 text-sm text-red-500">Invalid JSON</p>
+              }
+              }
+            </div>
+            <div>
+              <label class="font-bold text-lg dark:text-white">Credentials Configuration</label>
+              <textarea formControlName="credentialsConfig" rows="4"
+                class="font-mono bg-gray-50 dark:bg-secondary-300 border 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.border-red-600]="dspConfigForm.get('credentialsConfig')?.invalid && dspConfigForm.get('credentialsConfig')?.touched"
+                [class.border-gray-300]="!(dspConfigForm.get('credentialsConfig')?.invalid && dspConfigForm.get('credentialsConfig')?.touched)"
+                placeholder='{"key": "value"}'></textarea>
+              @if (dspConfigForm.get('credentialsConfig')?.touched) {
+              @if (dspConfigForm.get('credentialsConfig')?.errors?.['required']) {
+              <p class="mt-1 text-sm text-red-500">This field is required</p>
+              } @else if (dspConfigForm.get('credentialsConfig')?.errors?.['invalidJson']) {
+              <p class="mt-1 text-sm text-red-500">Invalid JSON</p>
+              }
+              }
+            </div>
+            <div>
+              <label class="font-bold text-lg dark:text-white">Policy Configuration</label>
+              <textarea formControlName="policyConfig" rows="4"
+                class="font-mono bg-gray-50 dark:bg-secondary-300 border 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.border-red-600]="dspConfigForm.get('policyConfig')?.invalid && dspConfigForm.get('policyConfig')?.touched"
+                [class.border-gray-300]="!(dspConfigForm.get('policyConfig')?.invalid && dspConfigForm.get('policyConfig')?.touched)"
+                placeholder='{"key": "value"}'></textarea>
+              @if (dspConfigForm.get('policyConfig')?.touched) {
+              @if (dspConfigForm.get('policyConfig')?.errors?.['required']) {
+              <p class="mt-1 text-sm text-red-500">This field is required</p>
+              } @else if (dspConfigForm.get('policyConfig')?.errors?.['invalidJson']) {
+              <p class="mt-1 text-sm text-red-500">Invalid JSON</p>
+              }
+              }
+            </div>
+          </form>
+        </div>
+        }
+        @if (isCurrentStep('attachments')) {
+        <div class="inline-flex">
+          <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._add_prod_img' | translate }}</h4>
+          <div class="ml-4 flex">
+            <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 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">{{ 'UPDATE_PROD_SPEC._file_res' | translate }}
+              </h3>
+            </div>
+            <div class="px-3 py-2 inline-block">
+              <p class="inline-block">{{ 'UPDATE_PROD_SPEC._restrictions' | translate }}
+              </p>
+            </div>
+            <div data-popper-arrow></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>
+          </button>
+        </div>
+        } @else {
+        <div class="flex w-full justify-center justify-items-center">
+          <ngx-file-drop class="m-4 p-4 w-full" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event,'img')"
+            (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+            <ng-template class="w-full" ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+              <div class="w-full flex flex-col justify-items-center justify-center">
+                <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>
+                <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>
+                </div>
+              </div>
+            </ng-template>
+          </ngx-file-drop>
+        </div>
+        <label class="font-bold ml-6 dark:text-white">{{ 'UPDATE_PROD_SPEC._add_prod_img_url' | translate }}</label>
+        <div class="relative w-full ml-6 mt-2 mb-2">
+          <!-- Tooltip (Above the Input, Positioned Up) -->
+          <div *ngIf="attImageName.invalid && attImageName.touched"
+            class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max bg-gray-900 text-white text-xs rounded-lg p-2 shadow-lg z-50">
+            {{ 'UPDATE_PROD_SPEC._file_name' | translate }}
+            <!-- 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" [formControl]="attImageName" (blur)="attImageName.markAsTouched()"
+              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"
+              [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>
+            </button>
+          </div>
+        </div>
+        }
+        <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._add_att' | translate }}</h4>
+        @if(prodAttachments.length == 0){
+        <div class="flex justify-center w-full ml-6 mt-2 mb-2 mr-4">
+          <div
+            class="flex 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">
+            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+            </svg>
+            <span class="sr-only">Info</span>
+            <div>
+              {{ 'UPDATE_PROD_SPEC._no_att' | translate }}
+            </div>
+          </div>
+        </div>
+        } @else {
+        <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>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._value' | translate }}
+                </th>
+                <th scope="col" class="px-6 py-3">
+                  {{ 'UPDATE_PROD_SPEC._actions' | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (att of prodAttachments; track att) {
+              <tr
+                class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                <td [ngClass]="{
                                                 'break-all': hasLongWord(att.name, 20),
                                                 'break-words': !hasLongWord(att.name, 20)
                                                 }" class="px-6 py-4 max-w-1/6 text-wrap break-words">
-                                                {{att.name}}
-                                            </td>
-                                            <td class="px-6 py-4 text-wrap break-all">
-                                                {{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>    
-                                            </td>
-                                        </tr>
-                                    }
-                                </tbody>
-                            </table>
-                            </div>                        
-                    }
-                    @if(showNewAtt==false){
-                        <div class="flex w-full justify-items-center justify-center">
-                            <button type="button" (click)="showNewAtt=!showNewAtt" 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">
-                                {{ 'UPDATE_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>                                  
-                            </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 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 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(attachToCreate.url==''){
-                                    <ngx-file-drop class="p-4 w-full" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event,'attach')" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
-                                        <ng-template class="w-full" ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-                                            <div class="w-full flex flex-col justify-items-center justify-center">
-                                                <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>
-                                                <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> 
-                                                </div>
-                                            </div>
-                                        </ng-template>
-                                    </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>
-                                        <label class="text-wrap break-all">
-                                            {{attachToCreate.url}}
-                                        </label>
-                                        <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>                                  
-                                        </button>
-                                    </div>
-                                }
+                  {{att.name}}
+                </td>
+                <td class="px-6 py-4 text-wrap break-all">
+                  {{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>
+                </td>
+              </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        }
+        @if(showNewAtt==false){
+        <div class="flex w-full justify-items-center justify-center">
+          <button type="button" (click)="showNewAtt=!showNewAtt"
+            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">
+            {{ 'UPDATE_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>
+          </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 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 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(attachToCreate.url==''){
+            <ngx-file-drop class="p-4 w-full" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event,'attach')"
+              (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+              <ng-template class="w-full" ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+                <div class="w-full flex flex-col justify-items-center justify-center">
+                  <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>
+                  <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>
+                  </div>
+                </div>
+              </ng-template>
+            </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>
+              <label class="text-wrap break-all">
+                {{attachToCreate.url}}
+              </label>
+              <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>
+              </button>
+            </div>
+            }
 
-                            </div>
-                            <div class="flex w-full justify-items-center justify-center mt-4">
-                                <button type="button" (click)="saveAtt()"
-                                [disabled]="!attFileName.valid || attachToCreate.url == ''" [ngClass]="!attFileName.valid || attachToCreate.url == '' ? 'opacity-50' : 'hover:bg-primary-50'"
-                                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">
-                                    {{ 'UPDATE_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>                                                                   
-                                </button>
-                            </div>
-                        </div>
-                    }
-                    <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
+          </div>
+          <div class="flex w-full justify-items-center justify-center mt-4">
+            <button type="button" (click)="saveAtt()" [disabled]="!attFileName.valid || attachToCreate.url == ''"
+              [ngClass]="!attFileName.valid || attachToCreate.url == '' ? 'opacity-50' : 'hover:bg-primary-50'"
+              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">
+              {{ 'UPDATE_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>
+            </button>
+          </div>
+        </div>
+        }
+        <!--<div class="flex w-full justify-items-end justify-end ml-4 mt-4">
                         <button data-cy="btnNext" type="button" (click)="goToStep(currentStep + 1)" class="flex text-white justify-end 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">
                             {{ 'UPDATE_PROD_SPEC._next' | 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 14 10">
@@ -1281,174 +1693,210 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._add_att
                             </svg>
                         </button>
                     </div>  -->
-                }
-                @if (isCurrentStep('relationships')) {
-                    <div class="m-4">
-                        @if (prodRelationships.length === 0){
-                            <div class="flex justify-center w-full mb-4">
-                              <div class="flex 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">
-                                <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                  <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                                </svg>
-                                <span class="sr-only">Info</span>
-                                <div>
-                                    {{ 'UPDATE_PROD_SPEC._no_relatioships' | translate }}
-                                </div>
-                              </div>
-                            </div>
-                        } @else {
-                            <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._relationship_type' | translate }}
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._actions' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (rel of prodRelationships; track rel) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4">
-                                                    {{rel.relationshipType}}
-                                                </td>
-                                                <td [ngClass]="{
+        }
+        @if (isCurrentStep('relationships')) {
+        <div class="m-4">
+          @if (prodRelationships.length === 0){
+          <div class="flex justify-center w-full mb-4">
+            <div
+              class="flex 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">
+              <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+              </svg>
+              <span class="sr-only">Info</span>
+              <div>
+                {{ 'UPDATE_PROD_SPEC._no_relatioships' | translate }}
+              </div>
+            </div>
+          </div>
+          } @else {
+          <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._relationship_type' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._actions' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (rel of prodRelationships; track rel) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td class="px-6 py-4">
+                    {{rel.relationshipType}}
+                  </td>
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(rel.name, 20),
                                                     'break-words': !hasLongWord(rel.name, 20)
                                                     }" class="px-6 py-4 text-wrap break-words">
-                                                    {{rel.name}}
-                                                </td>
-                                                <td class="px-6 py-4">
-                                                    <button (click)="deleteRel(rel)" 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>    
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>
-                        }
-                        @if(showCreateRel==false){
-                            <div class="flex w-full justify-items-center justify-center">
-                                <button type="button" (click)="showCreateRel=!showCreateRel" 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">
-                                    {{ 'UPDATE_PROD_SPEC._add_relationship' | 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>                                  
-                                </button>
-                            </div>
-                        } @else {
-                            <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._relationship_type' | translate }}</label>
-                            <select id="type" (change)="onRelChange($event)"
-                            class="shadow bg-white 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">
-                                <option selected value="migration">Migration</option>
-                                <option value="dependency">Dependency</option>
-                                <option value="exclusivity">Exclusivity</option>
-                                <option value="substitution">Substitution</option>
-                            </select>
-                            @if(loadingprodSpecRel){
-                                <div role="status" class="w-full h-fit flex justify-center align-middle">
-                                    <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                                    </svg>
-                                    <span class="sr-only">Loading...</span>
-                                    </div>
-                            } @else {
-                                @if(prodSpecRels.length==0){
-                                    <div class="flex justify-center w-full m-4">
-                                        <div class="flex 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">
-                                            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                                            </svg>
-                                            <div>
-                                                {{ 'OFFERINGS._no_prod_rel' | translate }}
-                                            </div>
-                                        </div>
-                                    </div>                    
-                                }@else{
-                                <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>
-                                                <th scope="col" class="px-6 py-3">
-                                                    {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                                </th>
-                                                <th scope="col" class="hidden md:table-cell px-6 py-3">
-                                                    {{ 'UPDATE_PROD_SPEC._type' | translate }}
-                                                </th>
-                                                <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                                    {{ 'UPDATE_PROD_SPEC._last_update' | translate }}
-                                                </th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            @for (rel of prodSpecRels; track rel) {
-                                                <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 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]="{
+                    {{rel.name}}
+                  </td>
+                  <td class="px-6 py-4">
+                    <button (click)="deleteRel(rel)" 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>
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+          }
+          @if(showCreateRel==false){
+          <div class="flex w-full justify-items-center justify-center">
+            <button type="button" (click)="showCreateRel=!showCreateRel"
+              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">
+              {{ 'UPDATE_PROD_SPEC._add_relationship' | 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>
+            </button>
+          </div>
+          } @else {
+          <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._relationship_type' | translate
+            }}</label>
+          <select id="type" (change)="onRelChange($event)"
+            class="shadow bg-white 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">
+            <option selected value="migration">Migration</option>
+            <option value="dependency">Dependency</option>
+            <option value="exclusivity">Exclusivity</option>
+            <option value="substitution">Substitution</option>
+          </select>
+          @if(loadingprodSpecRel){
+          <div role="status" class="w-full h-fit flex justify-center align-middle">
+            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+              viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                fill="currentColor" />
+              <path
+                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                fill="currentFill" />
+            </svg>
+            <span class="sr-only">Loading...</span>
+          </div>
+          } @else {
+          @if(prodSpecRels.length==0){
+          <div class="flex justify-center w-full m-4">
+            <div
+              class="flex 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">
+              <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+              </svg>
+              <div>
+                {{ 'OFFERINGS._no_prod_rel' | translate }}
+              </div>
+            </div>
+          </div>
+          }@else{
+          <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                  <th scope="col" class="hidden md:table-cell px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._type' | translate }}
+                  </th>
+                  <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._last_update' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (rel of prodSpecRels; track rel) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 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),
                                                         'break-words': !hasLongWord(rel.name, 20)
                                                         }" class="px-6 py-4 text-wrap break-words">
-                                                        {{rel.name}}
-                                                    </td>
-                                                    <td class="hidden md:table-cell px-6 py-4">
-                                                        @if(rel.isBundle == false){
-                                                            <span class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">Simple</span>
-                                                        } @else {
-                                                            <span class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">Bundle</span>
-                                                        }
-                                                    </td>
-                                                    <td class="hidden lg:table-cell px-6 py-4">
-                                                        {{rel.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}} 
-                                                    </td>
-                                                </tr>
-                                            }
-                                        </tbody>
-                                    </table>
-                                </div>
-                                }
-                                @if (!loadingprodSpecRel_more) {
-                                    @if (prodSpecRelPageCheck) {
-                                    <div class="flex pt-6 pb-2 justify-center align-middle">
-                                        <button (click)="nextProdSpecsRel()" class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
-                                            {{ 'UPDATE_PROD_SPEC._load_more' | translate }}
-                                        <svg class="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>
-                                        </button>
-                                    </div>
-                                    }
-                                } @else {
-                                    <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
-                                    <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                                    </svg>
-                                    <span class="sr-only">Loading...</span>
-                                    </div>
-                                }
-                            }
-                            <div class="flex w-full justify-items-center justify-center mt-4">
-                                <button type="button" (click)="saveRel()" [disabled]="prodSpecRels.length==0 || selectedProdSpec.id == ''" [ngClass]="prodSpecRels.length==0 || selectedProdSpec.id == '' ? 'opacity-50' : 'hover:bg-primary-50'" 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">
-                                    {{ 'UPDATE_PROD_SPEC._save_relationship' | 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>                                                                   
-                                </button>
-                            </div>
-                        }
-                    </div>
-                    <!--<div class="flex w-full justify-items-end justify-end ml-4">
+                    {{rel.name}}
+                  </td>
+                  <td class="hidden md:table-cell px-6 py-4">
+                    @if(rel.isBundle == false){
+                    <span
+                      class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">Simple</span>
+                    } @else {
+                    <span
+                      class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">Bundle</span>
+                    }
+                  </td>
+                  <td class="hidden lg:table-cell px-6 py-4">
+                    {{rel.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+          }
+          @if (!loadingprodSpecRel_more) {
+          @if (prodSpecRelPageCheck) {
+          <div class="flex pt-6 pb-2 justify-center align-middle">
+            <button (click)="nextProdSpecsRel()"
+              class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
+              {{ 'UPDATE_PROD_SPEC._load_more' | translate }}
+              <svg class="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>
+            </button>
+          </div>
+          }
+          } @else {
+          <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+              viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                fill="currentColor" />
+              <path
+                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                fill="currentFill" />
+            </svg>
+            <span class="sr-only">Loading...</span>
+          </div>
+          }
+          }
+          <div class="flex w-full justify-items-center justify-center mt-4">
+            <button type="button" (click)="saveRel()" [disabled]="prodSpecRels.length==0 || selectedProdSpec.id == ''"
+              [ngClass]="prodSpecRels.length==0 || selectedProdSpec.id == '' ? 'opacity-50' : 'hover:bg-primary-50'"
+              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">
+              {{ 'UPDATE_PROD_SPEC._save_relationship' | 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>
+            </button>
+          </div>
+          }
+        </div>
+        <!--<div class="flex w-full justify-items-end justify-end ml-4">
                         <button data-cy="btnFinish" type="button" (click)="goToStep(currentStep + 1)" class="flex text-white justify-end 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">
                             {{ 'UPDATE_PROD_SPEC._finish' | 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 14 10">
@@ -1456,311 +1904,341 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._add_att
                             </svg>
                         </button>
                     </div> -->
-                }
-                @if (isCurrentStep('summary')) {
-                    <div class="m-8">
-                        @if(loading){
-                            <div role="status" class="w-full h-full flex justify-center align-middle">
-                                <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                                    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-                                </svg>
-                                <span class="sr-only">Loading...</span>
-                                </div>
-                        } @else {
-                        <div class="mb-4 md:grid md:grid-cols-2 gap-4">
-                            <div>
-                                <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_name' | translate }}</label>
-                                <label [ngClass]="{
+        }
+        @if (isCurrentStep('summary')) {
+        <div class="m-8">
+          @if(loading){
+          <div role="status" class="w-full h-full flex justify-center align-middle">
+            <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+              viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                fill="currentColor" />
+              <path
+                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                fill="currentFill" />
+            </svg>
+            <span class="sr-only">Loading...</span>
+          </div>
+          } @else {
+          <div class="mb-4 md:grid md:grid-cols-2 gap-4">
+            <div>
+              <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_name' | translate
+                }}</label>
+              <label [ngClass]="{
                                     'break-all': hasLongWord(productSpecToUpdate?.name, 20),
                                     'break-words': !hasLongWord(productSpecToUpdate?.name, 20)
-                                    }" class="mb-2 bg-gray-50 text-wrap break-words 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">
-                                    {{productSpecToUpdate?.name}}
-                                </label>
-                                <label for="prod-version" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_version' | translate }}</label>
-                                <label class="mb-2 bg-gray-50 text-wrap break-all 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">
-                                    {{productSpecToUpdate?.version}}
-                                </label>
-                            </div>
-                            <div>
-                                <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_brand' | translate }}</label>
-                                <label [ngClass]="{
+                                    }"
+                class="mb-2 bg-gray-50 text-wrap break-words 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">
+                {{productSpecToUpdate?.name}}
+              </label>
+              <label for="prod-version" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_version'
+                | translate }}</label>
+              <label
+                class="mb-2 bg-gray-50 text-wrap break-all 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">
+                {{productSpecToUpdate?.version}}
+              </label>
+            </div>
+            <div>
+              <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_brand' | translate
+                }}</label>
+              <label [ngClass]="{
                                     'break-all': hasLongWord(productSpecToUpdate?.brand, 20),
                                     'break-words': !hasLongWord(productSpecToUpdate?.brand, 20)
-                                    }" class="mb-2 bg-gray-50 text-wrap break-words 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" >
-                                    {{productSpecToUpdate?.brand}}
-                                </label>
-                                @if(productSpecToUpdate?.productNumber!=''){
-                                <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._id_number' | translate }}</label>
-                                <label class="mb-2 bg-gray-50 text-wrap break-all 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">
-                                    {{productSpecToUpdate?.productNumber}}
-                                </label>
-                                }
-                            </div>
-                        </div>
-                        
-                        <div class="mb-4">
-                            <label class="font-bold text-lg mr-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._status' | translate }}</label>
-                            @if(productSpecToUpdate?.lifecycleStatus == 'Active'){
-                                <span class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{productSpecToUpdate?.lifecycleStatus}}</span>
-                            } @else if(productSpecToUpdate?.lifecycleStatus == 'Launched') {
-                                <span class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{productSpecToUpdate?.lifecycleStatus}}</span>
-                            } @else if(productSpecToUpdate?.lifecycleStatus == 'Retired') {
-                                <span class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{productSpecToUpdate?.lifecycleStatus}}</span>
-                            } @else if(productSpecToUpdate?.lifecycleStatus == 'Obsolete') {
-                                <span class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{productSpecToUpdate?.lifecycleStatus}}</span>
-                            }
-                        </div>
+                                    }"
+                class="mb-2 bg-gray-50 text-wrap break-words 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">
+                {{productSpecToUpdate?.brand}}
+              </label>
+              @if(productSpecToUpdate?.productNumber!=''){
+              <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._id_number' | translate }}</label>
+              <label
+                class="mb-2 bg-gray-50 text-wrap break-all 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">
+                {{productSpecToUpdate?.productNumber}}
+              </label>
+              }
+            </div>
+          </div>
+
+          <div class="mb-4">
+            <label class="font-bold text-lg mr-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._status' | translate }}</label>
+            @if(productSpecToUpdate?.lifecycleStatus == 'Active'){
+            <span
+              class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{productSpecToUpdate?.lifecycleStatus}}</span>
+            } @else if(productSpecToUpdate?.lifecycleStatus == 'Launched') {
+            <span
+              class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{productSpecToUpdate?.lifecycleStatus}}</span>
+            } @else if(productSpecToUpdate?.lifecycleStatus == 'Retired') {
+            <span
+              class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{productSpecToUpdate?.lifecycleStatus}}</span>
+            } @else if(productSpecToUpdate?.lifecycleStatus == 'Obsolete') {
+            <span
+              class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{productSpecToUpdate?.lifecycleStatus}}</span>
+            }
+          </div>
 
-                        @if(productSpecToUpdate?.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 dark:bg-secondary-300 border dark:border-secondary-200 rounded-lg p-4 mb-4">                                
-                                <markdown [ngClass]="{
+          @if(productSpecToUpdate?.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 dark:bg-secondary-300 border dark:border-secondary-200 rounded-lg p-4 mb-4">
+            <markdown [ngClass]="{
                                     'break-all': hasLongWord(productSpecToUpdate?.description, 20),
                                     'break-words': !hasLongWord(productSpecToUpdate?.description, 20)
-                                    }" class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900" [data]="productSpecToUpdate?.description"></markdown>
-                            </div>
-                        }
+                                    }"
+              class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900"
+              [data]="productSpecToUpdate?.description"></markdown>
+          </div>
+          }
 
-                        @if(imgPreview!=''){
-                            <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._profile_pic' | translate }}</label>
-                            <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">
-                            </div>
-                        }
+          @if(imgPreview!=''){
+          <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._profile_pic' | translate }}</label>
+          <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">
+          </div>
+          }
 
-                        @if(prodSpecsBundle.length>0){
-                            <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._bundle' | translate }}</label>
-                            <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._status' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (bun of prodSpecsBundle; track bun) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td [ngClass]="{
+          @if(prodSpecsBundle.length>0){
+          <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._bundle' | translate }}</label>
+          <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._status' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (bun of prodSpecsBundle; track bun) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(bun.name, 20),
                                                     'break-words': !hasLongWord(bun.name, 20)
                                                     }" class="px-6 py-4 text-wrap break-words">
-                                                    {{bun.name}}
-                                                </td>
-                                                <td class="px-6 py-4">
-                                                    @if(bun.lifecycleStatus == 'Active'){
-                                                        <span class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{bun.lifecycleStatus}}</span>
-                                                    } @else if(bun.lifecycleStatus == 'Launched') {
-                                                        <span class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{bun.lifecycleStatus}}</span>
-                                                    } @else if(bun.lifecycleStatus == 'Retired') {
-                                                        <span class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{bun.lifecycleStatus}}</span>
-                                                    } @else if(bun.lifecycleStatus == 'Obsolete') {
-                                                        <span class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{bun.lifecycleStatus}}</span>
-                                                    }
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>  
-                        }
-                        
-                        @if(prodChars.length>0){
-                            <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._chars' | translate }}</label>
-                            <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                            <th scope="col" class="hidden lg:table-cell px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._product_description' | translate }}
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._values' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (prod of productSpecToUpdate?.productSpecCharacteristic; track prod;) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td [ngClass]="{
+                    {{bun.name}}
+                  </td>
+                  <td class="px-6 py-4">
+                    @if(bun.lifecycleStatus == 'Active'){
+                    <span
+                      class="bg-blue-100 dark:bg-secondary-300 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400">{{bun.lifecycleStatus}}</span>
+                    } @else if(bun.lifecycleStatus == 'Launched') {
+                    <span
+                      class="bg-blue-100 dark:bg-secondary-300 text-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-green-500">{{bun.lifecycleStatus}}</span>
+                    } @else if(bun.lifecycleStatus == 'Retired') {
+                    <span
+                      class="bg-blue-100 dark:bg-secondary-300 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{bun.lifecycleStatus}}</span>
+                    } @else if(bun.lifecycleStatus == 'Obsolete') {
+                    <span
+                      class="bg-blue-100 dark:bg-secondary-300 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500">{{bun.lifecycleStatus}}</span>
+                    }
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+          }
+
+          @if(prodChars.length>0){
+          <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._chars' | translate }}</label>
+          <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                  <th scope="col" class="hidden lg:table-cell px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._product_description' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._values' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (prod of productSpecToUpdate?.productSpecCharacteristic; track prod;) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(prod.name, 20),
                                                     'break-words': !hasLongWord(prod.name, 20)
                                                     }" class="px-6 py-4 max-w-1/6 text-wrap break-words">
-                                                    {{prod.name}}
-                                                </td>
-                                                <td [ngClass]="{
+                    {{prod.name}}
+                  </td>
+                  <td [ngClass]="{
                                                     '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}}                                       
-                                                </td>
-                                                <td class="px-6 py-4 text-wrap break-all">
-                                                    @for (char of prod.productSpecCharacteristicValue; track char; let last = $last) {
-                                                        @if(char.value || char.value == 0){
-                                                            @if(isJsonCharacteristicType(prod.valueType)){
-                                                                @if(!last){
-                                                                    {{getValuePreview(char.value)}},
-                                                                } @else {
-                                                                    {{getValuePreview(char.value)}}
-                                                                }
-                                                            } @else if(char.unitOfMeasure){
-                                                                @if(!last){
-                                                                    {{char.value}} (<i>{{char?.unitOfMeasure}}</i>),
-                                                                } @else {
-                                                                    {{char.value}} (<i>{{char?.unitOfMeasure}}</i>)
-                                                                }
-                                                            } @else {
-                                                                @if(!last){
-                                                                    {{char.value}},
-                                                                } @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>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>
-                        }
+                    {{prod.description}}
+                  </td>
+                  <td class="px-6 py-4 text-wrap break-all">
+                    @for (char of prod.productSpecCharacteristicValue; track char; let last = $last) {
+                    @if(char.value || char.value == 0){
+                    @if(isDataSpaceCharacteristicType(prod.valueType)){
+                    @if(!last){
+                    {{getValuePreview(char.value)}},
+                    } @else {
+                    {{getValuePreview(char.value)}}
+                    }
+                    } @else if(char.unitOfMeasure){
+                    @if(!last){
+                    {{char.value}} (<i>{{char?.unitOfMeasure}}</i>),
+                    } @else {
+                    {{char.value}} (<i>{{char?.unitOfMeasure}}</i>)
+                    }
+                    } @else {
+                    @if(!last){
+                    {{char.value}},
+                    } @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>
+                }
+              </tbody>
+            </table>
+          </div>
+          }
 
-                        @if(selectedResourceSpecs.length>0){
-                            <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._resource' | translate }}</label>
-                            <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (res of selectedResourceSpecs; track res) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td [ngClass]="{
+          @if(selectedResourceSpecs.length>0){
+          <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._resource' | translate }}</label>
+          <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (res of selectedResourceSpecs; track res) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(res.name, 20),
                                                     'break-words': !hasLongWord(res.name, 20)
                                                     }" class="px-6 py-4 text-wrap break-words">
-                                                    {{res.name}}
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>  
-                        }
+                    {{res.name}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+          }
 
-                        @if(selectedServiceSpecs.length>0){
-                            <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._service' | translate }}</label>
-                            <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (serv of selectedServiceSpecs; track serv) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td [ngClass]="{
+          @if(selectedServiceSpecs.length>0){
+          <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._service' | translate }}</label>
+          <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (serv of selectedServiceSpecs; track serv) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(serv.name, 20),
                                                     'break-words': !hasLongWord(serv.name, 20)
                                                     }" class="px-6 py-4 text-wrap break-words">
-                                                    {{serv.name}}
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>  
-                        }
+                    {{serv.name}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+          }
 
-                        @if(prodAttachments.length>0){
-                            <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._attachments' | translate }}</label>
-                            <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._value' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (att of productSpecToUpdate?.attachment; track att) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td [ngClass]="{
+          @if(prodAttachments.length>0){
+          <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._attachments' | translate }}</label>
+          <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._value' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (att of productSpecToUpdate?.attachment; track att) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(att.name, 20),
                                                     'break-words': !hasLongWord(att.name, 20)
                                                     }" class="px-6 py-4 max-w-1/6 text-wrap break-words">
-                                                    {{att.name}}
-                                                </td>
-                                                <td class="px-6 py-4 text-wrap break-all">
-                                                    {{att.url}} 
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>  
-                        }
+                    {{att.name}}
+                  </td>
+                  <td class="px-6 py-4 text-wrap break-all">
+                    {{att.url}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+          }
 
-                        @if(prodRelationships.length>0){
-                            <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._relationships' | translate }}</label>
-                            <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>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._relationship_type' | translate }}
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @for (rel of prodRelationships; track rel) {
-                                            <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4">
-                                                    {{rel.relationshipType}}
-                                                </td>
-                                                <td [ngClass]="{
+          @if(prodRelationships.length>0){
+          <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._relationships' | translate }}</label>
+          <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>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._relationship_type' | translate }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ 'UPDATE_PROD_SPEC._product_name' | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (rel of prodRelationships; track rel) {
+                <tr
+                  class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                  <td class="px-6 py-4">
+                    {{rel.relationshipType}}
+                  </td>
+                  <td [ngClass]="{
                                                     'break-all': hasLongWord(rel.name, 20),
                                                     'break-words': !hasLongWord(rel.name, 20)
                                                     }" class="px-6 py-4 text-wrap break-words">
-                                                    {{rel.name}}
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </div>
-                        }
-                        }
-                        <!--<div class="flex w-full justify-items-end justify-end ml-4">
+                    {{rel.name}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+          }
+          }
+          <!--<div class="flex w-full justify-items-end justify-end ml-4">
                             <button data-cy="productSpecUpdate" type="button" (click)="updateProduct();" [disabled]="isProdValid()||loading" [ngClass]="(isProdValid() || loading) ? 'opacity-50' : 'hover:bg-primary-50'"  class="flex text-white justify-end 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">
                                 {{ 'UPDATE_PROD_SPEC._update_prod' | 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 14 10">
@@ -1768,102 +2246,103 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._add_att
                                 </svg>
                             </button>
                         </div>-->
-                    </div>
-                }
+        </div>
+        }
 
-            </div>       
-            <!-- Navigation Buttons -->
-            <div class="flex justify-end mt-6 space-x-4">
-                <button (click)="goToStep(currentStep - 1)"
-                        [disabled]="currentStep === 0"
-                        [ngClass]="{
-                        'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== 0,
-                        'text-gray-300 dark:text-gray-600 cursor-not-allowed': currentStep === 0
+      </div>
+      <!-- Navigation Buttons -->
+      <div class="flex justify-end mt-6 space-x-4">
+        <button (click)="goToStep(currentStepIdx - 1)" [disabled]="currentStepIdx === 0" [ngClass]="{
+                        'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStepIdx !== 0,
+                        'text-gray-300 dark:text-gray-600 cursor-not-allowed': currentStepIdx === 0
                         }"
-                        class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg  bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 ">
-                    <svg class="min-w-4 w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-                    <path fill="currentColor"
-                            d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3
-                            256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
-                    </svg>
-                    {{ 'CREATE_OFFER._previous' | translate }}
-                </button>
-        
-                <button data-cy="btnNext"
-                        (click)="goToStep(currentStep + 1)"
-                        [disabled]="currentStep === steps.length - 1 || !canNavigate(currentStep) || isStepDisabled()"
-                        [ngClass]="{
-                        'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== steps.length - 1 && (validateCurrentStep() || canNavigate(currentStep)),
-                        'cursor-not-allowed opacity-50': currentStep === steps.length - 1 ||  !canNavigate(currentStep) || isStepDisabled()
+          class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg  bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 ">
+          <svg class="min-w-4 w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+            <path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3
+                            256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" />
+          </svg>
+          {{ 'CREATE_OFFER._previous' | translate }}
+        </button>
+
+        <button data-cy="btnNext" (click)="goToStep(currentStepIdx + 1)"
+          [disabled]="currentStepIdx === steps.length - 1 || !canNavigate(currentStepIdx) || isStepDisabled()"
+          [ngClass]="{
+                        'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStepIdx !== steps.length - 1 && (validateCurrentStep() || canNavigate(currentStepIdx)),
+                        'cursor-not-allowed opacity-50': currentStepIdx === steps.length - 1 ||  !canNavigate(currentStepIdx) || isStepDisabled()
                         }"
-                        class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
-                    {{ 'CREATE_OFFER._next_step' | translate }}
-                <svg class="min-w-4 w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-                    <path fill="currentColor"
-                        d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7
-                        256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
-                </svg>
-                </button>
-                <button data-cy="productSpecUpdate" (click)="updateProduct()"
-                [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">
-                    {{ 'UPDATE_PROD_SPEC._update_prod' | translate }}
-                </button>
-            </div>     
-        </div>
+          class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
+          {{ 'CREATE_OFFER._next_step' | translate }}
+          <svg class="min-w-4 w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+            <path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7
+                        256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
+          </svg>
+        </button>
+        <button data-cy="productSpecUpdate" (click)="updateProduct()" [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">
+          {{ 'UPDATE_PROD_SPEC._update_prod' | translate }}
+        </button>
+      </div>
     </div>
+  </div>
 
 </div>
 
-<request-validation-modal
-    [showModal]="showRequestValidationModal"
-    [productSpec]="prod"
-    [selfAtt]="selfAtt"
-    [selectedISOS]="selectedISOS"
-    [additionalISOS]="additionalISOS"
-    (closeModal)="closeRequestValidationModal()">
+<request-validation-modal [showModal]="showRequestValidationModal" [productSpec]="prod" [selfAtt]="selfAtt"
+  [selectedISOS]="selectedISOS" [additionalISOS]="additionalISOS" (closeModal)="closeRequestValidationModal()">
 </request-validation-modal>
 
 <!-- BILL ADDRESS DELETE modal -->
 @if (showUploadFile){
-    <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 -->
-            <div class="relative p-4 text-center bg-secondary-50 rounded-lg shadow sm:p-5">
-                <button type="button" (click)="showUploadFile=false;$event.stopPropagation();" class="text-gray-400 absolute top-2.5 right-2.5 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
-                    <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-                    </svg>
-                    <span class="sr-only">{{ 'UPDATE_PROD_SPEC._close_modal' | translate }}</span>
-                </button>
-                <ngx-file-drop class="m-4 p-4" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event,selectedISO)" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
-                    <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>                        
-                        <p class="text-gray-500 mr-4">{{ '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>                       
-                    </ng-template>
-                </ngx-file-drop>  
+<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 -->
+    <div class="relative p-4 text-center bg-secondary-50 rounded-lg shadow sm:p-5">
+      <button type="button" (click)="showUploadFile=false;$event.stopPropagation();"
+        class="text-gray-400 absolute top-2.5 right-2.5 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
+        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd"
+            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+            clip-rule="evenodd"></path>
+        </svg>
+        <span class="sr-only">{{ 'UPDATE_PROD_SPEC._close_modal' | translate }}</span>
+      </button>
+      <ngx-file-drop class="m-4 p-4" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event,selectedISO)"
+        (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+        <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>
+          <p class="text-gray-500 mr-4">{{ '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>
+        </ng-template>
+      </ngx-file-drop>
 
-              
-                <div class="flex justify-center items-center space-x-4">
-                    <button (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">
-                        {{ 'UPDATE_PROD_SPEC._cancel' | translate }}
-                    </button>
-                    <button (click)="uploadFile()" type="submit" class="py-2 px-3 text-sm font-medium text-center text-white bg-primary-100 hover:bg-primary-50 rounded-lg focus:ring-4 focus:outline-none focus:ring-primary-50">
-                        {{ 'UPDATE_PROD_SPEC._upload' | translate }}
-                    </button>
-                </div>
-            </div>
-        </div>
+
+      <div class="flex justify-center items-center space-x-4">
+        <button (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">
+          {{ 'UPDATE_PROD_SPEC._cancel' | translate }}
+        </button>
+        <button (click)="uploadFile()" type="submit"
+          class="py-2 px-3 text-sm font-medium text-center text-white bg-primary-100 hover:bg-primary-50 rounded-lg focus:ring-4 focus:outline-none focus:ring-primary-50">
+          {{ 'UPDATE_PROD_SPEC._upload' | translate }}
+        </button>
+      </div>
     </div>
+  </div>
+</div>
 
 }
 @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>
+<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>
 }
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 67aa8a0e..57dedd78 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
@@ -120,6 +120,7 @@ describe('UpdateProductSpecComponent', () => {
   });
 
   beforeEach(() => {
+    component.steps = [{ label: 'General Info', id: 'general' }] as any;
     originalFileReader = (window as any).FileReader;
     (window as any).FileReader = SyncFileReaderMock as any;
   });
@@ -164,8 +165,8 @@ describe('UpdateProductSpecComponent', () => {
     const initSpy = spyOn(component, 'initPartyInfo');
     component.ngOnInit();
     expect(component.steps.length).toBe(9);
-    expect(component.steps).toContain('Bundle');
-    expect(component.steps).not.toContain('Dataspace Configuration');
+    expect(component.steps).toContain(jasmine.objectContaining({ label: 'Bundle' }));
+    expect(component.steps).not.toContain(jasmine.objectContaining({ label: 'Dataspace Configuration' }));
     expect(initSpy).toHaveBeenCalled();
   });
 
@@ -174,8 +175,8 @@ describe('UpdateProductSpecComponent', () => {
     component.DATA_SPACE_ENABLED = false;
     component.ngOnInit();
     expect(component.steps.length).toBe(8);
-    expect(component.steps).not.toContain('Bundle');
-    expect(component.steps).not.toContain('Dataspace Configuration');
+    expect(component.steps).not.toContain(jasmine.objectContaining({ label: 'Bundle' }));
+    expect(component.steps).not.toContain(jasmine.objectContaining({ label: 'Dataspace Configuration' }));
   });
 
   it('ngOnInit should configure steps with dataspace enabled and bundle enabled', () => {
@@ -183,8 +184,8 @@ describe('UpdateProductSpecComponent', () => {
     component.DATA_SPACE_ENABLED = true;
     component.ngOnInit();
     expect(component.steps.length).toBe(10);
-    expect(component.steps).toContain('Bundle');
-    expect(component.steps).toContain('Dataspace Configuration');
+    expect(component.steps).toContain(jasmine.objectContaining({ label: 'Bundle' }));
+    expect(component.steps).toContain(jasmine.objectContaining({ label: 'Dataspace Configuration' }));
   });
 
   it('ngOnInit should configure steps with dataspace enabled and no bundle', () => {
@@ -192,8 +193,8 @@ describe('UpdateProductSpecComponent', () => {
     component.DATA_SPACE_ENABLED = true;
     component.ngOnInit();
     expect(component.steps.length).toBe(9);
-    expect(component.steps).not.toContain('Bundle');
-    expect(component.steps).toContain('Dataspace Configuration');
+    expect(component.steps).not.toContain(jasmine.objectContaining({ label: 'Bundle' }));
+    expect(component.steps).toContain(jasmine.objectContaining({ label: 'Dataspace Configuration' }));
   });
 
   it('initPartyInfo should set partyId when logged directly', () => {
@@ -361,7 +362,7 @@ describe('UpdateProductSpecComponent', () => {
 
   it('dropped should reject invalid filename', () => {
     const badFile = { name: 'bad name.txt', type: 'text/plain', size: 1000 };
-    component.currentStep = 1;
+    component['currentStepIdx'] = 1;
     component.BUNDLE_ENABLED = false;
     component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
     component.dropped([mockDroppedFile(badFile)], component.selectedISOS[0]);
@@ -372,7 +373,7 @@ describe('UpdateProductSpecComponent', () => {
 
   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['currentStepIdx'] = 1;
     component.BUNDLE_ENABLED = false;
     component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
     component.dropped([mockDroppedFile(bigFile)], component.selectedISOS[0]);
@@ -382,7 +383,8 @@ describe('UpdateProductSpecComponent', () => {
   });
 
   it('dropped should upload compliance ISO file and set URL', () => {
-    component.currentStep = 1;
+    component.steps = [{ label: 'Compliance profile', id: 'compliance' }] as any;
+    component['currentStepIdx'] = 0;
     component.BUNDLE_ENABLED = false;
     component.showUploadAtt = false;
     component.showUploadFile = true;
@@ -395,7 +397,8 @@ describe('UpdateProductSpecComponent', () => {
   });
 
   it('dropped should upload self-attestation when uploadAtt is enabled', () => {
-    component.currentStep = 1;
+    component.steps = [{ label: 'Compliance profile', id: 'compliance' }] as any;
+    component['currentStepIdx'] = 0;
     component.BUNDLE_ENABLED = false;
     component.showUploadAtt = true;
     component.selfAtt = { name: 'Compliance:SelfAtt' };
@@ -409,7 +412,8 @@ describe('UpdateProductSpecComponent', () => {
   });
 
   it('dropped should upload image attachment and set preview', () => {
-    component.currentStep = 5;
+    component.steps = [{ label: 'Attachments', id: 'attachments' }] as any;
+    component['currentStepIdx'] = 0;
     component.BUNDLE_ENABLED = false;
     const file = { name: 'picture.png', type: 'image/png', size: 200 };
     component.dropped([mockDroppedFile(file)], 'img');
@@ -419,7 +423,8 @@ describe('UpdateProductSpecComponent', () => {
   });
 
   it('dropped should reject non-image file when img selector is used', () => {
-    component.currentStep = 5;
+    component.steps = [{ label: 'Attachments', id: 'attachments' }] as any;
+    component['currentStepIdx'] = 0;
     component.BUNDLE_ENABLED = false;
     const file = { name: 'doc.pdf', type: 'application/pdf', size: 200 };
     component.dropped([mockDroppedFile(file)], 'img');
@@ -428,7 +433,8 @@ describe('UpdateProductSpecComponent', () => {
   });
 
   it('dropped should set attachment draft for generic files', () => {
-    component.currentStep = 5;
+    component.steps = [{ label: 'Attachments', id: 'attachments' }] as any;
+    component['currentStepIdx'] = 0;
     component.BUNDLE_ENABLED = false;
     const file = { name: 'manual.pdf', type: 'application/pdf', size: 200 };
     component.dropped([mockDroppedFile(file)], 'attachment');
@@ -438,7 +444,8 @@ describe('UpdateProductSpecComponent', () => {
 
   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.steps = [{ label: 'Compliance profile', id: 'compliance' }] as any;
+    component['currentStepIdx'] = 0;
     component.BUNDLE_ENABLED = false;
     component.selectedISOS = [{ name: 'Compliance:ISO-A', url: '' }];
     const file = { name: 'iso.pdf', type: 'application/pdf', size: 200 };
@@ -887,12 +894,12 @@ describe('UpdateProductSpecComponent', () => {
     component.BUNDLE_ENABLED = false;
     component.DATA_SPACE_ENABLED = true;
     component.ngOnInit();
-    component.currentStep = 3;
+    component['currentStepIdx'] = 3;
     component.charTypeSelected = 'number';
 
     component.refreshChars();
 
-    expect(component.charTypeSelected).toBe('endpointUrl');
+    expect(component.charTypeSelected).toBe('credentialsConfiguration');
   });
 
   it('getFilteredCharacteristicsForCurrentStep should split default and dataspace characteristics', () => {
@@ -906,11 +913,11 @@ describe('UpdateProductSpecComponent', () => {
       { id: '4', name: 'Policy', valueType: 'authorizationPolicy' }
     ] as any;
 
-    component.currentStep = 2;
-    expect(component.getFilteredCharacteristicsForCurrentStep().map(char => char.name)).toEqual(['Latency']);
+    component['currentStepIdx'] = 2;
+    expect(component.getFilteredCharacteristicsForCurrentStep().map(char => char.name)).toEqual(['Latency', 'DCP endpoint']);
 
-    component.currentStep = 3;
-    expect(component.getFilteredCharacteristicsForCurrentStep().map(char => char.name)).toEqual(['DCP endpoint', 'Policy']);
+    component['currentStepIdx'] = 3;
+    expect(component.getFilteredCharacteristicsForCurrentStep().map(char => char.name)).toEqual(['Policy']);
   });
 
   it('removeClass and addClass should update className', () => {
@@ -1007,15 +1014,13 @@ describe('UpdateProductSpecComponent', () => {
     expect(component.creatingChars[1].isDefault).toBeFalse();
   });
 
-  it('addCharValue should treat endpointUrl as text type', () => {
+  it('addCharValue should not add a value for endpointUrl in update flow', () => {
     component.charTypeSelected = 'endpointUrl';
     component.stringValue = 'https://example.org/api/dsp/2025-1';
 
     component.addCharValue();
 
-    expect(component.creatingChars.length).toBe(1);
-    expect(component.creatingChars[0].value as any).toBe('https://example.org/api/dsp/2025-1');
-    expect(component.stringValue).toBe('');
+    expect(component.creatingChars.length).toBe(0);
   });
 
   it('addCharValue should add number values with units', () => {
@@ -1104,7 +1109,7 @@ describe('UpdateProductSpecComponent', () => {
   });
 
   it('addCharValue should parse and add JSON values for targetSpecification', () => {
-    component.charTypeSelected = 'targetSpecification';
+    component.charTypeSelected = 'credentialsConfiguration';
     component.jsonValue = '{"@type":"AssetCollection","refinement":[]}';
 
     component.addCharValue();
@@ -1351,17 +1356,19 @@ describe('UpdateProductSpecComponent', () => {
   });
 
   it('goToStep should update current step without validating current form', () => {
-    component.currentStep = 0;
+    component['currentStepIdx'] = 0;
     const validateSpy = spyOn(component, 'validateCurrentStep').and.returnValue(false);
     component.goToStep(1);
     expect(validateSpy).not.toHaveBeenCalled();
-    expect(component.currentStep).toBe(1);
+    expect(component.currentStepIdx).toBe(1);
   });
 
   it('goToStep should call dependent loaders for non-bundle flow', () => {
     component.BUNDLE_ENABLED = false;
-    component.currentStep = 0;
-    component.highestStep = 0;
+    component.DATA_SPACE_ENABLED = false;
+    component.ngOnInit();
+    component['currentStepIdx'] = 0;
+    component.highestStepIdx = 0;
     spyOn(component, 'validateCurrentStep').and.returnValue(true);
     const refreshSpy = spyOn(component, 'refreshChars');
     const resSpy = spyOn(component, 'getResSpecs');
@@ -1380,12 +1387,14 @@ describe('UpdateProductSpecComponent', () => {
     expect(relSpy).toHaveBeenCalledWith(false);
     component.goToStep(7);
     expect(finishSpy).toHaveBeenCalled();
-    expect(component.highestStep).toBe(7);
+    expect(component.highestStepIdx).toBe(7);
     expect(refreshSpy).toHaveBeenCalled();
   });
 
   it('goToStep should call dependent loaders for bundle flow', () => {
     component.BUNDLE_ENABLED = true;
+    component.DATA_SPACE_ENABLED = false;
+    component.ngOnInit();
     spyOn(component, 'validateCurrentStep').and.returnValue(true);
     const resSpy = spyOn(component, 'getResSpecs');
     const servSpy = spyOn(component, 'getServSpecs');
@@ -1402,47 +1411,54 @@ describe('UpdateProductSpecComponent', () => {
   });
 
   it('validateCurrentStep should validate step 0 by general form validity', () => {
-    component.currentStep = 0;
+    component.steps = [
+      { label: 'General Info', id: 'general' },
+      { label: 'Compliance profile', id: 'compliance' },
+      { label: 'Characteristics', id: 'characteristics' },
+      { label: 'Resource specifications', id: 'resource' },
+      { label: 'Service specifications', id: 'service' },
+      { label: 'Attachments', id: 'attachments' }
+    ] as any;
+    component['currentStepIdx'] = 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;
+    component['currentStepIdx'] = 5;
     expect(component.validateCurrentStep()).toBeTrue();
   });
 
   it('isStepDisabled should enforce step-specific guards', () => {
-    component.currentStep = 0;
+    component.steps = [{ label: 'General Info', id: 'general' }] as any;
+    component['currentStepIdx'] = 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.steps = [{ label: 'Bundle', id: 'bundle' }] as any;
+    component['currentStepIdx'] = 0;
     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;
+    component.steps = [{ label: 'Compliance profile', id: 'compliance' }] as any;
+    component['currentStepIdx'] = 0;
     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['currentStepIdx'] = 0;
+    component.highestStepIdx = 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;
+    component.highestStepIdx = 2;
     expect(component.canNavigate(2)).toBeTrue();
 
     const goSpy = spyOn(component, 'goToStep');
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 87e7ecdc..0cf15844 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
@@ -1,26 +1,24 @@
-import { Component, OnInit, ChangeDetectorRef, HostListener, ElementRef, ViewChild, Input, AfterViewInit, OnDestroy } from '@angular/core';
-import { Router } from '@angular/router';
-import {components} from "src/app/models/product-catalog";
-import { environment } from 'src/environments/environment';
-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 { LoginInfo } from 'src/app/models/interfaces';
+import { ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { initFlowbite } from 'flowbite';
-import { FormGroup, FormControl, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
-import { NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop';
-import { certifications } from 'src/app/models/certification-standards.const'
-import * as moment from 'moment';
-import { v4 as uuidv4 } from 'uuid';
 import { jwtDecode } from "jwt-decode";
-import { noWhitespaceValidator } from 'src/app/validators/validators';
+import moment from 'moment';
+import { FileSystemDirectoryEntry, FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { certifications } from 'src/app/models/certification-standards.const';
+import { LoginInfo } from 'src/app/models/interfaces';
+import { components } from "src/app/models/product-catalog";
+import { AttachmentServiceService } from "src/app/services/attachment-service.service";
+import { EventMessageService } from "src/app/services/event-message.service";
+import { LocalStorageService } from "src/app/services/local-storage.service";
+import { PaginationService } from 'src/app/services/pagination.service';
+import { ProductSpecServiceService } from 'src/app/services/product-spec-service.service';
+import { ResourceSpecServiceService } from 'src/app/services/resource-spec-service.service';
+import { ServiceSpecServiceService } from 'src/app/services/service-spec-service.service';
+import { jsonValidator, noWhitespaceValidator } from 'src/app/validators/validators';
+import { environment } from 'src/environments/environment';
+import { v4 as uuidv4 } from 'uuid';
 
 
 type CharacteristicValueSpecification = components["schemas"]["CharacteristicValueSpecification"];
@@ -31,7 +29,14 @@ type ServiceSpecificationRef = components["schemas"]["ServiceSpecificationRef"];
 type ResourceSpecificationRef = components["schemas"]["ResourceSpecificationRef"];
 type ProductSpecificationRelationship = components["schemas"]["ProductSpecificationRelationship"];
 type AttachmentRefOrValue = components["schemas"]["AttachmentRefOrValue"];
-type ProductSpecFormStep = 'general' | 'bundle' | 'compliance' | 'characteristics' | 'dataspace' | 'resource' | 'service' | 'attachments' | 'relationships' | 'summary';
+type ProductSpecFormStep = 'general' | 'bundle' | 'compliance' | 'characteristics' | 'dataspace' | 'resource' | 'service' | 'attachments' | 'relationships' | 'summary' | 'dsp_config';
+
+const DSP_CHARS: string[] = ['endpointUrl', 'upstreamAddress', 'targetSpecification', 'serviceConfiguration', 'credentialsConfig', 'authorizationPolicy', 'transferPath', 'transferType']
+
+interface Step {
+  label: string;
+  id: ProductSpecFormStep;
+}
 
 @Component({
   selector: 'update-product-spec',
@@ -46,134 +51,151 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
   SERV_SPEC_LIMIT: number = environment.SERV_SPEC_LIMIT;
   RES_SPEC_LIMIT: number = environment.RES_SPEC_LIMIT;
   DOME_TRUST_LINK: string = environment.DOME_TRUST_LINK;
-  BUNDLE_ENABLED: boolean= environment.BUNDLE_ENABLED;
+  BUNDLE_ENABLED: boolean = environment.BUNDLE_ENABLED;
   DATA_SPACE_ENABLED: boolean = environment.DATA_SPACE_ENABLED;
-  MAX_FILE_SIZE: number=environment.MAX_FILE_SIZE;
+  MAX_FILE_SIZE: number = environment.MAX_FILE_SIZE;
 
   //CONTROL VARIABLES:
-  showGeneral:boolean=true;
-  showBundle:boolean=false;
-  showCompliance:boolean=false;
-  showChars:boolean=false;
-  showResource:boolean=false;
-  showService:boolean=false;
-  showAttach:boolean=false;
-  showRelationships:boolean=false;
-  showSummary:boolean=false;
-
-  stepsElements:string[]=['general-info','bundle','compliance','chars','resource','service','attach','relationships','summary'];
-  stepsCircles:string[]=['general-circle','bundle-circle','compliance-circle','chars-circle','resource-circle','service-circle','attach-circle','relationships-circle','summary-circle'];
-  currentStep = 0;
-  highestStep = 0;
-  steps:any[] = [];
-
-  showPreview:boolean=false;
-  showEmoji:boolean=false;
-  description:string='';  
-  partyId:any='';
+  showGeneral: boolean = true;
+  showBundle: boolean = false;
+  showCompliance: boolean = false;
+  showChars: boolean = false;
+  showResource: boolean = false;
+  showService: boolean = false;
+  showAttach: boolean = false;
+  showRelationships: boolean = false;
+  showSummary: boolean = false;
+
+  stepsElements: string[] = ['general-info', 'bundle', 'compliance', 'chars', 'resource', 'service', 'attach', 'relationships', 'summary'];
+  stepsCircles: string[] = ['general-circle', 'bundle-circle', 'compliance-circle', 'chars-circle', 'resource-circle', 'service-circle', 'attach-circle', 'relationships-circle', 'summary-circle'];
+  currentStepIdx = 0;
+  get currentStep(): Step { return this.steps[this.currentStepIdx]; }
+  highestStepIdx = 0;
+  steps: Step[] = [];
+
+  showPreview: boolean = false;
+  showEmoji: boolean = false;
+  description: string = '';
+  partyId: any = '';
 
   //PRODUCT GENERAL INFO:
   generalForm = new FormGroup({
     name: new FormControl('', [Validators.required, Validators.maxLength(100), noWhitespaceValidator]),
     brand: new FormControl('', [Validators.required, noWhitespaceValidator]),
-    version: new FormControl('0.1', [Validators.required,Validators.pattern('^-?[0-9]\\d*(\\.\\d*)?$'), noWhitespaceValidator]),
+    version: new FormControl('0.1', [Validators.required, Validators.pattern('^-?[0-9]\\d*(\\.\\d*)?$'), noWhitespaceValidator]),
     number: new FormControl(''),
     description: new FormControl('', Validators.maxLength(100000)),
   });
-  prodStatus:any;
+  prodStatus: any;
+
+  //DSP CONFIG INFO:
+  newEndpointUrl: string = '';
+  newEndpointDescription: string = '';
+  newEndpointName: string = '';
+  endpointUrls: { url: string; description: string; name: string, id?: string }[] = [];
+  readonly transferTypes: string[] = ['HttpData-PULL', 'HttpData-PUSH'];
+  dspConfigForm = new FormGroup({
+    upstreamAddress: new FormControl('', [Validators.required]),
+    transferPath: new FormControl(''),
+    transferType: new FormControl('HttpData-PULL', [Validators.required]),
+    targetSpecification: new FormControl('', [Validators.required, jsonValidator]),
+    serviceConfiguration: new FormControl('', [Validators.required, jsonValidator]),
+    credentialsConfig: new FormControl('', [Validators.required, jsonValidator]),
+    policyConfig: new FormControl('', [Validators.required, jsonValidator]),
+  });
 
   //CHARS INFO
   charsForm = new FormGroup({
     name: new FormControl('', [Validators.required, Validators.maxLength(100), noWhitespaceValidator]),
     description: new FormControl('', [Validators.maxLength(500)])
   });
-  charTypeSelected:string='string';
-  booleanDefaultTrue:boolean=true;
-  isOptional:boolean=false;
-  optionalDftTrue:boolean=false;
-  prodChars:ProductSpecificationCharacteristic[]=[];
-  finishChars:ProductSpecificationCharacteristic[]=[];
-  creatingChars:CharacteristicValueSpecification[]=[];
-  showCreateChar:boolean=false;
+  charTypeSelected: string = 'string';
+  booleanDefaultTrue: boolean = true;
+  isOptional: boolean = false;
+  optionalDftTrue: boolean = false;
+  prodChars: ProductSpecificationCharacteristic[] = [];
+  finishChars: ProductSpecificationCharacteristic[] = [];
+  creatingChars: CharacteristicValueSpecification[] = [];
+  showCreateChar: boolean = false;
 
   //BUNDLE INFO:
-  bundleChecked:boolean=false;
-  bundlePage=0;
-  bundlePageCheck:boolean=false;
-  loadingBundle:boolean=false;
-  loadingBundle_more:boolean=false;
-  prodSpecs:any[]=[];
-  nextProdSpecs:any[]=[];
+  bundleChecked: boolean = false;
+  bundlePage = 0;
+  bundlePageCheck: boolean = false;
+  loadingBundle: boolean = false;
+  loadingBundle_more: boolean = false;
+  prodSpecs: any[] = [];
+  nextProdSpecs: any[] = [];
   //final selected products inside bundle
-  prodSpecsBundle:BundledProductSpecification[]=[];
+  prodSpecsBundle: BundledProductSpecification[] = [];
 
   //COMPLIANCE PROFILE INFO:
-  buttonISOClicked:boolean=false;
-  availableISOS:any[]=[];
-  selectedISOS:any[]=[];
-  additionalISOS:any[]=[];
-  verifiedISO:string[] = [];
-  complianceLevel:string='NL';
-  selectedISO:any;
-  complianceVC:any = null;
-  complianceVCId:string = '';
-  showUploadFile:boolean=false;
-  showRequestValidationModal:boolean=false;
-  selfAtt:any;
-  checkExistingSelfAtt:boolean=false;
-  showUploadAtt:boolean=false;
-  isoToCreate:string='';
-  showCert:boolean=false;
-  initialComplianceEvidenceSignature:string='';
+  buttonISOClicked: boolean = false;
+  availableISOS: any[] = [];
+  selectedISOS: any[] = [];
+  additionalISOS: any[] = [];
+  verifiedISO: string[] = [];
+  complianceLevel: string = 'NL';
+  selectedISO: any;
+  complianceVC: any = null;
+  complianceVCId: string = '';
+  showUploadFile: boolean = false;
+  showRequestValidationModal: boolean = false;
+  selfAtt: any;
+  checkExistingSelfAtt: boolean = false;
+  showUploadAtt: boolean = false;
+  isoToCreate: string = '';
+  showCert: boolean = false;
+  initialComplianceEvidenceSignature: string = '';
 
   //SERVICE INFO:
-  serviceSpecPage=0;
-  serviceSpecPageCheck:boolean=false;
-  loadingServiceSpec:boolean=false;
-  loadingServiceSpec_more:boolean=false;
-  serviceSpecs:any[]=[];
-  nextServiceSpecs:any[]=[];
-  selectedServiceSpecs:ServiceSpecificationRef[]=[];
+  serviceSpecPage = 0;
+  serviceSpecPageCheck: boolean = false;
+  loadingServiceSpec: boolean = false;
+  loadingServiceSpec_more: boolean = false;
+  serviceSpecs: any[] = [];
+  nextServiceSpecs: any[] = [];
+  selectedServiceSpecs: ServiceSpecificationRef[] = [];
 
   //RESOURCE INFO:
-  resourceSpecPage=0;
-  resourceSpecPageCheck:boolean=false;
-  loadingResourceSpec:boolean=false;
-  loadingResourceSpec_more:boolean=false;
-  resourceSpecs:any[]=[];
-  nextResourceSpecs:any[]=[];
-  selectedResourceSpecs:ResourceSpecificationRef[]=[];
-
-  //RELATIONSHIPS INFO:  
-  relToCreate:any;
-  showCreateRel:boolean=false;
-  prodSpecRelPage=0;
-  prodSpecRelPageCheck:boolean=false;
-  loadingprodSpecRel:boolean=false;
-  loadingprodSpecRel_more:boolean=false;
-  prodSpecRels:any[]=[];
-  nextProdSpecRels:any[]=[];
-  selectedProdSpec:any={id:''};
-  selectedRelType:any='migration';
+  resourceSpecPage = 0;
+  resourceSpecPageCheck: boolean = false;
+  loadingResourceSpec: boolean = false;
+  loadingResourceSpec_more: boolean = false;
+  resourceSpecs: any[] = [];
+  nextResourceSpecs: any[] = [];
+  selectedResourceSpecs: ResourceSpecificationRef[] = [];
+
+  //RELATIONSHIPS INFO:
+  relToCreate: any;
+  showCreateRel: boolean = false;
+  prodSpecRelPage = 0;
+  prodSpecRelPageCheck: boolean = false;
+  loadingprodSpecRel: boolean = false;
+  loadingprodSpecRel_more: boolean = false;
+  prodSpecRels: any[] = [];
+  nextProdSpecRels: any[] = [];
+  selectedProdSpec: any = { id: '' };
+  selectedRelType: any = 'migration';
   //Final relationships
-  prodRelationships:any[]=[];
+  prodRelationships: any[] = [];
 
   //ATTACHMENT INFO
-  showImgPreview:boolean=false;
-  showNewAtt:boolean=false;
-  imgPreview:any='';
-  prodAttachments:AttachmentRefOrValue[]=[];
-  attachToCreate:AttachmentRefOrValue={url:'',attachmentType:''};
+  showImgPreview: boolean = false;
+  showNewAtt: boolean = false;
+  imgPreview: any = '';
+  prodAttachments: AttachmentRefOrValue[] = [];
+  attachToCreate: AttachmentRefOrValue = { url: '', attachmentType: '' };
   attFileName = new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z0-9 _.-]*')]);
   certFileName = new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z0-9 _.-]*')]);
   attImageName = new FormControl('', [Validators.required, Validators.pattern('^https?:\\/\\/.*\\.(?:png|jpg|jpeg|gif|bmp|webp)$')])
 
   //FINAL PRODUCT USING API CALL STRUCTURE
-  productSpecToUpdate:ProductSpecification_Update | undefined;
+  productSpecToUpdate: ProductSpecification_Update | undefined;
 
-  errorMessage:any='';
-  showError:boolean=false;
-  loading:boolean=false;
+  errorMessage: any = '';
+  showError: boolean = false;
+  loading: boolean = false;
 
   //CHARS
   stringValue: string = '';
@@ -184,17 +206,6 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
   rangeUnit: string = '';
   jsonValue: string = '';
   readonly dataSpaceCharacteristicTypes: string[] = [
-    'endpointUrl',
-    'upstreamAddress',
-    'endpointDescription',
-    'targetSpecification',
-    'serviceConfiguration',
-    'credentialsConfiguration',
-    'authorizationPolicy'
-  ];
-  readonly dataSpaceJsonCharacteristicTypes: string[] = [
-    'targetSpecification',
-    'serviceConfiguration',
     'credentialsConfiguration',
     'authorizationPolicy'
   ];
@@ -203,44 +214,41 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
 
   constructor(
-    private router: Router,
-    private api: ApiServiceService,
     private prodSpecService: ProductSpecServiceService,
     private cdr: ChangeDetectorRef,
     private localStorage: LocalStorageService,
     private eventMessage: EventMessageService,
-    private elementRef: ElementRef,
     private attachmentService: AttachmentServiceService,
     private servSpecService: ServiceSpecServiceService,
     private resSpecService: ResourceSpecServiceService,
     private paginationService: PaginationService
   ) {
-    for(let i=0; i<certifications.length; i++){
+    for (let i = 0; i < certifications.length; i++) {
       this.availableISOS.push(certifications[i])
     }
     this.eventMessage.messages$
-    .pipe(takeUntil(this.destroy$))
-    .subscribe(ev => {
-      if(ev.type === 'ChangedSession') {
-        this.initPartyInfo();
-      }
-    })
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(ev => {
+        if (ev.type === 'ChangedSession') {
+          this.initPartyInfo();
+        }
+      })
   }
 
   @HostListener('document:click')
   onClick() {
-    if(this.showEmoji==true){
-      this.showEmoji=false;
+    if (this.showEmoji == true) {
+      this.showEmoji = false;
       this.cdr.detectChanges();
     }
-    if(this.showUploadFile==true){
-      this.showUploadFile=false;
+    if (this.showUploadFile == true) {
+      this.showUploadFile = false;
       this.cdr.detectChanges();
     }
   }
 
   @ViewChild('attachName') attachName!: ElementRef;
-  @ViewChild('imgURL') imgURL!: ElementRef;  
+  @ViewChild('imgURL') imgURL!: ElementRef;
   @ViewChild('certificationName') certificationName!: ElementRef;
 
   public files: NgxFileDropEntry[] = [];
@@ -253,15 +261,15 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     initFlowbite();
   }
 
-  ngOnDestroy(){
+  ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();
   }
 
-  initPartyInfo(){
+  initPartyInfo() {
     let aux = this.localStorage.getObject('login_items') as LoginInfo;
-    if(JSON.stringify(aux) != '{}' && (((aux.expire - moment().unix())-4) > 0)) {
-      if(aux.logged_as==aux.id){
+    if (JSON.stringify(aux) != '{}' && (((aux.expire - moment().unix()) - 4) > 0)) {
+      if (aux.logged_as == aux.id) {
         this.partyId = aux.partyId;
       } else {
         let loggedOrg = aux.organizations.find((element: { id: any; }) => element.id == aux.logged_as)
@@ -270,32 +278,32 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     }
   }
 
-  populateProductInfo(){
+  populateProductInfo() {
     //GENERAL INFORMATION
     this.generalForm.controls['name'].setValue(this.prod.name);
     this.generalForm.controls['description'].setValue(this.prod.description);
     this.generalForm.controls['brand'].setValue(this.prod.brand ? this.prod.brand : '');
     this.generalForm.controls['version'].setValue(this.prod.version ? this.prod.version : '');
     this.generalForm.controls['number'].setValue(this.prod.productNumber ? this.prod.productNumber : '');
-    this.prodStatus=this.prod.lifecycleStatus;
+    this.prodStatus = this.prod.lifecycleStatus;
 
     //BUNDLE
-    if(this.prod.isBundle==true){
+    if (this.prod.isBundle == true) {
       //this.bundleChecked=true;
       this.toggleBundleCheck();
       //Ver como añadir los productos al bundle
-      this.prodSpecsBundle=this.prod.bundledProductSpecification;
+      this.prodSpecsBundle = this.prod.bundledProductSpecification;
       //prod.bundledProductSpecification
 
       console.log('is bundle')
     }
 
     //COMPLIANCE PROFILE
-    if(this.prod.productSpecCharacteristic){     
+    if (this.prod.productSpecCharacteristic) {
       console.log(certifications)
       console.log('--')
       console.log(this.prod.productSpecCharacteristic)
-      for(let i = 0; i < this.prod.productSpecCharacteristic.length; i++) {
+      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 || '';
@@ -312,7 +320,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
           //let cert = certifications.find(item => `${item.name}:VC` === this.prod.productSpecCharacteristic[i].name)
           //if (cert) {
           //  const val = this.prod.productSpecCharacteristic[i].productSpecCharacteristicValue[0].value
-            //this.verifiedISO[cert.name] = val
+          //this.verifiedISO[cert.name] = val
           //}
           continue
         }
@@ -339,8 +347,8 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
           this.availableISOS.splice(index, 1);
         } else if (this.prod.productSpecCharacteristic[i].name == 'Compliance:SelfAtt') {
           this.selfAtt = JSON.parse(JSON.stringify(this.prod.productSpecCharacteristic[i]));
-          this.checkExistingSelfAtt=true;
-        } else if(this.prod.productSpecCharacteristic[i].name.startsWith('Compliance:')){
+          this.checkExistingSelfAtt = true;
+        } else if (this.prod.productSpecCharacteristic[i].name.startsWith('Compliance:')) {
           console.log('--- additional isos')
           console.log(this.prod.productSpecCharacteristic[i])
           this.additionalISOS.push({
@@ -361,47 +369,51 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     this.initialComplianceEvidenceSignature = this.getCurrentComplianceEvidenceSignature();
 
     //CHARS
-    if(this.prod.productSpecCharacteristic){
-      for(let i=0; i < this.prod.productSpecCharacteristic.length; i++){
-        const index = this.selectedISOS.findIndex(item => item.name === this.prod.productSpecCharacteristic[i].name);
+    if (this.prod.productSpecCharacteristic) {
+      let chars = this.prod.productSpecCharacteristic;
+      if (this.prod.externalId) {
+        chars = chars.filter((char: any) => !DSP_CHARS.includes(char.valueType));
+      }
+      chars.forEach((char: any) => {
+        const index = this.selectedISOS.findIndex(item => item.name === char.name);
         if (index == -1) {
           this.prodChars.push({
-            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 : '',
-            valueType: this.prod.productSpecCharacteristic[i].valueType,
-            '@schemaLocation': this.prod.productSpecCharacteristic[i]['@schemaLocation'],
-            productSpecCharacteristicValue: this.prod.productSpecCharacteristic[i].productSpecCharacteristicValue
+            id: char.id ? char.id : 'urn:ngsi-ld:characteristic:' + uuidv4(),
+            name: char.name,
+            description: char.description ? char.description : '',
+            valueType: char.valueType,
+            '@schemaLocation': char['@schemaLocation'],
+            productSpecCharacteristicValue: char.productSpecCharacteristicValue
           });
         }
-      }
+      });
     }
 
     //RESOURCE
-    if(this.prod.resourceSpecification){
-      this.selectedResourceSpecs=this.prod.resourceSpecification;
+    if (this.prod.resourceSpecification) {
+      this.selectedResourceSpecs = this.prod.resourceSpecification;
     }
 
     //SERVICE
-    if(this.prod.serviceSpecification){
-      this.selectedServiceSpecs=this.prod.serviceSpecification;
+    if (this.prod.serviceSpecification) {
+      this.selectedServiceSpecs = this.prod.serviceSpecification;
     }
 
     //ATTACHMENTS
-    if(this.prod.attachment){
-      this.prodAttachments=this.prod.attachment;
+    if (this.prod.attachment) {
+      this.prodAttachments = this.prod.attachment;
       const index = this.prodAttachments.findIndex(item => item.name === 'Profile Picture');
       if (index !== -1) {
-        this.imgPreview=this.prodAttachments[index].url;
-        this.showImgPreview=true;
+        this.imgPreview = this.prodAttachments[index].url;
+        this.showImgPreview = true;
       }
     }
 
     //RELATIONSHIPS
     console.log('----- RELACIONES')
     console.log(this.prod.productSpecificationRelationship)
-    if(this.prod.productSpecificationRelationship){
-      for(let i=0; i< this.prod.productSpecificationRelationship.length; i++){
+    if (this.prod.productSpecificationRelationship) {
+      for (let i = 0; i < this.prod.productSpecificationRelationship.length; i++) {
         this.prodSpecService.getResSpecById(this.prod.productSpecificationRelationship[i].id).then(data => {
 
           this.prodRelationships.push({
@@ -416,10 +428,13 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
       }
     }
 
+    if (this.prod.externalId) {
+      this.addDspConfigStep();
+    }
   }
 
-  setProdStatus(status:any){
-    this.prodStatus=status;
+  setProdStatus(status: any) {
+    this.prodStatus = status;
     this.cdr.detectChanges();
   }
 
@@ -427,86 +442,86 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     this.eventMessage.emitSellerProductSpec(false);
   }
 
-  togglePreview(){
-    if(this.generalForm.value.description){
-      this.description=this.generalForm.value.description;
+  togglePreview() {
+    if (this.generalForm.value.description) {
+      this.description = this.generalForm.value.description;
     } else {
-      this.description=''
-    }  
-  }
-
-  toggleGeneral(){
-    this.selectStep('general-info','general-circle');
-    this.showBundle=false;
-    this.showGeneral=true;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=false;
-    this.showPreview=false;
+      this.description = ''
+    }
+  }
+
+  toggleGeneral() {
+    this.selectStep('general-info', 'general-circle');
+    this.showBundle = false;
+    this.showGeneral = true;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = false;
+    this.showPreview = false;
     this.refreshChars();
     initFlowbite();
   }
 
-  toggleBundle(){
-    this.selectStep('bundle','bundle-circle');
-    this.showBundle=true;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=false;
-    this.showPreview=false;
+  toggleBundle() {
+    this.selectStep('bundle', 'bundle-circle');
+    this.showBundle = true;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = false;
+    this.showPreview = false;
     this.refreshChars();
     initFlowbite();
   }
 
-  toggleBundleCheck(){
-    this.prodSpecs=[];
-    this.bundlePage=0;
-    this.bundleChecked=!this.bundleChecked;
-    if(this.bundleChecked==true){
-      this.loadingBundle=true;
+  toggleBundleCheck() {
+    this.prodSpecs = [];
+    this.bundlePage = 0;
+    this.bundleChecked = !this.bundleChecked;
+    if (this.bundleChecked == true) {
+      this.loadingBundle = true;
       this.getProdSpecs(false);
     } else {
-      this.prodSpecsBundle=[];
+      this.prodSpecsBundle = [];
     }
   }
 
-  async getProdSpecs(next:boolean){
-    if(next==false){
-      this.loadingBundle=true;
+  async getProdSpecs(next: boolean) {
+    if (next == false) {
+      this.loadingBundle = true;
     }
-    
+
     let options = {
-      "filters": ['Active','Launched'],
+      "filters": ['Active', 'Launched'],
       "partyId": this.partyId,
       //"sort": undefined,
       //"isBundle": false
     }
 
-    this.paginationService.getItemsPaginated(this.bundlePage, this.PROD_SPEC_LIMIT, next, this.prodSpecs,this.nextProdSpecs, options,
+    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.prodSpecs=data.items;
-      this.nextProdSpecs=data.nextItems;
-      this.bundlePage=data.page;
-      this.loadingBundle=false;
-      this.loadingBundle_more=false;
-    })
+        this.bundlePageCheck = data.page_check;
+        this.prodSpecs = data.items;
+        this.nextProdSpecs = data.nextItems;
+        this.bundlePage = data.page;
+        this.loadingBundle = false;
+        this.loadingBundle_more = false;
+      })
   }
 
-  async nextBundle(){
+  async nextBundle() {
     await this.getProdSpecs(true);
   }
 
-  addProdToBundle(prod:any){
+  addProdToBundle(prod: any) {
     const index = this.prodSpecsBundle.findIndex(item => item.id === prod.id);
     if (index !== -1) {
       console.log('eliminar')
@@ -519,104 +534,104 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
         lifecycleStatus: prod.lifecycleStatus,
         name: prod.name
       });
-    }    
+    }
     this.cdr.detectChanges();
     console.log(this.prodSpecsBundle)
   }
 
-  isProdInBundle(prod:any){
+  isProdInBundle(prod: any) {
     const index = this.prodSpecsBundle.findIndex(item => item.id === prod.id);
     if (index !== -1) {
       return true
     } else {
       return false;
-    } 
-  }
-
-  toggleCompliance(){
-    this.selectStep('compliance','compliance-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=true;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=false;
-    this.showPreview=false;
-    setTimeout(() => {        
-      initFlowbite();   
+    }
+  }
+
+  toggleCompliance() {
+    this.selectStep('compliance', 'compliance-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = true;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = false;
+    this.showPreview = false;
+    setTimeout(() => {
+      initFlowbite();
     }, 100);
     this.refreshChars();
   }
 
-  addISO(iso:any){
+  addISO(iso: any) {
     const index = this.availableISOS.findIndex(item => item.name === iso.name);
     if (index !== -1) {
       console.log('seleccionar')
       this.availableISOS.splice(index, 1);
-      this.selectedISOS.push({name: 'Compliance:'+iso.name, url: '', mandatory: iso.mandatory, domesupported: iso.domesupported});
+      this.selectedISOS.push({ name: 'Compliance:' + iso.name, url: '', mandatory: iso.mandatory, domesupported: iso.domesupported });
     }
-    this.buttonISOClicked=!this.buttonISOClicked;
+    this.buttonISOClicked = !this.buttonISOClicked;
     this.cdr.detectChanges();
     console.log(this.availableISOS)
     console.log(this.selectedISOS)
   }
 
-  removeISO(iso:any){
+  removeISO(iso: any) {
     const cleanedName = iso.name
-    .replace('Compliance:', '')
-    .trim();
+      .replace('Compliance:', '')
+      .trim();
     const index = this.selectedISOS.findIndex(item => item.name === iso.name);
     if (index !== -1) {
       console.log('seleccionar')
       this.selectedISOS.splice(index, 1);
-      this.availableISOS.push({name: cleanedName, mandatory: iso.mandatory, domesupported: iso.domesupported});
+      this.availableISOS.push({ name: cleanedName, mandatory: iso.mandatory, domesupported: iso.domesupported });
 
       //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){
+  removeCert(iso: any) {
     const index = this.additionalISOS.findIndex(item => item.name === iso.name);
     if (index !== -1) {
       console.log('eliminar additional cert')
       this.additionalISOS.splice(index, 1);
       console.log(this.additionalISOS)
-    }  
+    }
     this.cdr.detectChanges();
   }
 
-  removeSelfAtt(){
+  removeSelfAtt() {
     const index = this.finishChars.findIndex(item => item.name === this.selfAtt.name);
     if (index !== -1) {
       console.log('seleccionar')
       this.finishChars.splice(index, 1);
     }
-    this.selfAtt='';
+    this.selfAtt = '';
     this.cdr.detectChanges();
     console.log(this.finishChars)
   }
 
-  checkValidISOS():boolean{
+  checkValidISOS(): boolean {
     let invalid = this.selectedISOS.find((p => {
       return p.url === ''
     }));
-    if(invalid){
+    if (invalid) {
       return true;
     } else {
       return false;
-    }    
+    }
   }
 
-  addISOValue(sel:any){
+  addISOValue(sel: any) {
     const index = this.selectedISOS.findIndex(item => item.name === sel.name);
-    const nativeElement = document.getElementById('iso-'+sel.name);
+    const nativeElement = document.getElementById('iso-' + sel.name);
     console.log(sel.url)
     console.log(this.selectedISOS)
   }
@@ -677,15 +692,15 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     return this.verifiedISO.indexOf(sel.name) > -1
   }
 
-  public dropped(files: NgxFileDropEntry[],sel:any) {
+  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();
@@ -693,164 +708,164 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
               const base64String: string = e.target.result.split(',')[1];
               console.log('BASE 64....')
               console.log(base64String); // You can use this base64 string as needed
-              let prod_name='';
-              if(this.generalForm.value.name!=null){
-                prod_name=this.generalForm.value.name.replaceAll(/\s/g,'')+'_';
+              let prod_name = '';
+              if (this.generalForm.value.name != null) {
+                prod_name = this.generalForm.value.name.replaceAll(/\s/g, '') + '_';
               }
               let fileBody = {
                 content: {
-                  name: uuidv4()+'_'+file.name,
+                  name: uuidv4() + '_' + file.name,
                   data: base64String
                 },
                 contentType: file.type,
                 isPublic: true
-              }                            
-              if(!this.isValidFilename(fileBody.content.name)){
-                this.errorMessage='File names can only include alphabetical characters (A-Z, a-z) and a limited set of symbols, such as underscores (_), hyphens (-), and periods (.)';
+              }
+              if (!this.isValidFilename(fileBody.content.name)) {
+                this.errorMessage = 'File names can only include alphabetical characters (A-Z, a-z) and a limited set of symbols, such as underscores (_), hyphens (-), and periods (.)';
                 console.error('There was an error while uploading file!');
-                this.showError=true;
+                this.showError = true;
                 setTimeout(() => {
                   this.showError = false;
                 }, 3000);
                 return;
               }
               //IF FILES ARE HIGHER THAN 3MB THROW AN ERROR
-              if(file.size>this.MAX_FILE_SIZE){
-                this.errorMessage='File size must be under 3MB.';
+              if (file.size > this.MAX_FILE_SIZE) {
+                this.errorMessage = 'File size must be under 3MB.';
                 console.error('There was an error while uploading file!');
-                this.showError=true;
+                this.showError = true;
                 setTimeout(() => {
                   this.showError = false;
                 }, 3000);
                 return;
               }
-              if(this.isCurrentStep('compliance') && !this.showUploadAtt){
+              if (this.isCurrentStep('compliance') && !this.showUploadAtt) {
                 const index = this.selectedISOS.findIndex(item => item.name === sel.name);
                 this.attachmentService.uploadFile(fileBody).subscribe({
                   next: data => {
-                      console.log(data)
-                      if(index!==-1){
-                        this.selectedISOS[index].url=data.content;
-                        //this.selectedISOS[index].attachmentType=file.type;
-                        this.showUploadFile=false;
-                        this.cdr.detectChanges();
-                        console.log('uploaded')
-                      } else {
-                        this.isoToCreate=data.content;
-                      }
+                    console.log(data)
+                    if (index !== -1) {
+                      this.selectedISOS[index].url = data.content;
+                      //this.selectedISOS[index].attachmentType=file.type;
+                      this.showUploadFile = false;
+                      this.cdr.detectChanges();
+                      console.log('uploaded')
+                    } else {
+                      this.isoToCreate = data.content;
+                    }
                   },
                   error: error => {
-                      console.error('There was an error while uploading file!', error);
-                      if(error.error.error){
-                        console.log(error)
-                        this.errorMessage='Error: '+error.error.error;
-                      } else {
-                        this.errorMessage='There was an error while uploading the file!';
-                      }
-                      if (error.status === 413) {
-                        this.errorMessage='File size too large! Must be under 3MB.';
-                      }
-                      this.showError=true;
-                      setTimeout(() => {
-                        this.showError = false;
-                      }, 3000);
+                    console.error('There was an error while uploading file!', error);
+                    if (error.error.error) {
+                      console.log(error)
+                      this.errorMessage = 'Error: ' + error.error.error;
+                    } else {
+                      this.errorMessage = 'There was an error while uploading the file!';
+                    }
+                    if (error.status === 413) {
+                      this.errorMessage = 'File size too large! Must be under 3MB.';
+                    }
+                    this.showError = true;
+                    setTimeout(() => {
+                      this.showError = false;
+                    }, 3000);
                   }
                 });
               }
-              if(this.isCurrentStep('compliance') && this.showUploadAtt){
+              if (this.isCurrentStep('compliance') && this.showUploadAtt) {
                 const index = this.finishChars.findIndex(item => item.name === this.selfAtt.name);
                 this.attachmentService.uploadFile(fileBody).subscribe({
                   next: data => {
-                      if (index !== -1) {
-                        this.selfAtt.productSpecCharacteristicValue=[{
+                    if (index !== -1) {
+                      this.selfAtt.productSpecCharacteristicValue = [{
+                        isDefault: true,
+                        value: data.content
+                      }];
+                      this.finishChars[index] = this.selfAtt;
+                    } else {
+                      this.selfAtt = {
+                        id: 'urn:ngsi-ld:characteristic:' + uuidv4(),
+                        name: 'Compliance:SelfAtt',
+                        productSpecCharacteristicValue: [{
                           isDefault: true,
                           value: data.content
-                        }];
-                        this.finishChars[index] = this.selfAtt;
-                      } else {
-                        this.selfAtt = {
-                          id: 'urn:ngsi-ld:characteristic:'+uuidv4(),
-                          name: 'Compliance:SelfAtt',
-                          productSpecCharacteristicValue: [{
-                            isDefault: true,
-                            value: data.content
-                          }]
-                        }
-                        this.finishChars.push(this.selfAtt)
+                        }]
                       }
-                      this.showUploadFile=false;
-                      this.showUploadAtt=false;
-                      this.cdr.detectChanges();
-                      console.log('uploaded')
+                      this.finishChars.push(this.selfAtt)
+                    }
+                    this.showUploadFile = false;
+                    this.showUploadAtt = false;
+                    this.cdr.detectChanges();
+                    console.log('uploaded')
                   },
                   error: error => {
-                      console.error('There was an error while uploading the file!', error);
-                      if(error.error.error){
-                        console.log(error)
-                        this.errorMessage='Error: '+error.error.error;
-                      } else {
-                        this.errorMessage='There was an error while uploading the file!';
-                      }
-                      if (error.status === 413) {
-                        this.errorMessage='File size too large! Must be under 3MB.';
-                      }
-                      this.showError=true;
-                      setTimeout(() => {
-                        this.showError = false;
-                      }, 3000);
+                    console.error('There was an error while uploading the file!', error);
+                    if (error.error.error) {
+                      console.log(error)
+                      this.errorMessage = 'Error: ' + error.error.error;
+                    } else {
+                      this.errorMessage = 'There was an error while uploading the file!';
+                    }
+                    if (error.status === 413) {
+                      this.errorMessage = 'File size too large! Must be under 3MB.';
+                    }
+                    this.showError = true;
+                    setTimeout(() => {
+                      this.showError = false;
+                    }, 3000);
                   }
                 });
               }
-              if(this.isCurrentStep('attachments')){
+              if (this.isCurrentStep('attachments')) {
                 console.log(file)
                 this.attachmentService.uploadFile(fileBody).subscribe({
                   next: data => {
-                      console.log(data)
-                      if(sel == 'img'){
-                        if(file.type.startsWith("image")){
-                          this.showImgPreview=true;
-                          this.imgPreview=data.content;
-                          this.prodAttachments.push({
-                            name: 'Profile Picture',
-                            url: this.imgPreview,
-                            attachmentType: file.type
-                          })
-                        } else {
-                          this.errorMessage='File must have a valid image format!';
-                          this.showError=true;
-                          setTimeout(() => {
-                            this.showError = false;
-                          }, 3000);
-                        }
+                    console.log(data)
+                    if (sel == 'img') {
+                      if (file.type.startsWith("image")) {
+                        this.showImgPreview = true;
+                        this.imgPreview = data.content;
+                        this.prodAttachments.push({
+                          name: 'Profile Picture',
+                          url: this.imgPreview,
+                          attachmentType: file.type
+                        })
                       } else {
-                        this.attachToCreate={url:data.content,attachmentType:file.type};
+                        this.errorMessage = 'File must have a valid image format!';
+                        this.showError = true;
+                        setTimeout(() => {
+                          this.showError = false;
+                        }, 3000);
                       }
+                    } else {
+                      this.attachToCreate = { url: data.content, attachmentType: file.type };
+                    }
 
-                      this.cdr.detectChanges();
-                      console.log('uploaded')
+                    this.cdr.detectChanges();
+                    console.log('uploaded')
                   },
                   error: error => {
-                      console.error('There was an error while uploading file!', error);
-                      if(error.error.error){
-                        console.log(error)
-                        this.errorMessage='Error: '+error.error.error;
-                      } else {
-                        this.errorMessage='There was an error while uploading the file!';
-                      }
-                      if (error.status === 413) {
-                        this.errorMessage='File size too large! Must be under 3MB.';
-                      }
-                      this.showError=true;
-                      setTimeout(() => {
-                        this.showError = false;
-                      }, 3000);
+                    console.error('There was an error while uploading file!', error);
+                    if (error.error.error) {
+                      console.log(error)
+                      this.errorMessage = 'Error: ' + error.error.error;
+                    } else {
+                      this.errorMessage = 'There was an error while uploading the file!';
+                    }
+                    if (error.status === 413) {
+                      this.errorMessage = 'File size too large! Must be under 3MB.';
+                    }
+                    this.showError = true;
+                    setTimeout(() => {
+                      this.showError = false;
+                    }, 3000);
                   }
                 });
               }
             };
             reader.readAsDataURL(file);
           }
- 
+
         });
       } else {
         // It was a directory (empty directories are added, otherwise only files)
@@ -863,50 +878,50 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
   isValidFilename(filename: string): boolean {
     return this.filenameRegex.test(filename);
   }
- 
-  public fileOver(event: any){
+
+  public fileOver(event: any) {
     console.log(event);
   }
- 
-  public fileLeave(event: any){
+
+  public fileLeave(event: any) {
     console.log('leave')
     console.log(event);
   }
 
-  toggleUploadSelfAtt(){
-    this.showUploadFile=true;
-    this.showUploadAtt=true;
+  toggleUploadSelfAtt() {
+    this.showUploadFile = true;
+    this.showUploadAtt = true;
   }
 
-  toggleUploadFile(sel:any){
-    this.showUploadFile=true;
-    this.selectedISO=sel;
+  toggleUploadFile(sel: any) {
+    this.showUploadFile = true;
+    this.selectedISO = sel;
   }
 
-  uploadFile(){
+  uploadFile() {
     console.log('uploading...')
   }
 
-  toggleChars(){
-    this.selectStep('chars','chars-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=true;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=false;
-
-    this.showCreateChar=false;
-    this.charTypeSelected='string';
-    this.showPreview=false;
+  toggleChars() {
+    this.selectStep('chars', 'chars-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = true;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = false;
+
+    this.showCreateChar = false;
+    this.charTypeSelected = 'string';
+    this.showPreview = false;
     this.refreshChars();
     initFlowbite();
   }
 
-  toggleCreateCharacteristicForm(){
+  toggleCreateCharacteristicForm() {
     this.showCreateChar = !this.showCreateChar;
     if (this.showCreateChar) {
       this.charTypeSelected = this.getInitialCharacteristicTypeForCurrentStep();
@@ -920,54 +935,54 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     }
   }
 
-  toggleResource(){
-    this.loadingResourceSpec=true;
-    this.resourceSpecs=[];
-    this.resourceSpecPage=0;
+  toggleResource() {
+    this.loadingResourceSpec = true;
+    this.resourceSpecs = [];
+    this.resourceSpecPage = 0;
     this.getResSpecs(false);
-    this.selectStep('resource','resource-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=true;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=false;
-    this.showPreview=false;
+    this.selectStep('resource', 'resource-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = true;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = false;
+    this.showPreview = false;
     this.refreshChars();
     initFlowbite();
   }
 
-  async getResSpecs(next:boolean){
-    if(next==false){
-      this.loadingResourceSpec=true;
+  async getResSpecs(next: boolean) {
+    if (next == false) {
+      this.loadingResourceSpec = true;
     }
-    
+
     let options = {
-      "filters": ['Active','Launched'],
+      "filters": ['Active', 'Launched'],
       "partyId": this.partyId,
       //"sort": undefined,
       //"isBundle": false
     }
 
-    this.paginationService.getItemsPaginated(this.resourceSpecPage, this.RES_SPEC_LIMIT, next, this.resourceSpecs,this.nextResourceSpecs, options,
+    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.resourceSpecs=data.items;
-      this.nextResourceSpecs=data.nextItems;
-      this.resourceSpecPage=data.page;
-      this.loadingResourceSpec=false;
-      this.loadingResourceSpec_more=false;
-    })
+        this.resourceSpecPageCheck = data.page_check;
+        this.resourceSpecs = data.items;
+        this.nextResourceSpecs = data.nextItems;
+        this.resourceSpecPage = data.page;
+        this.loadingResourceSpec = false;
+        this.loadingResourceSpec_more = false;
+      })
   }
 
-  async nextRes(){
+  async nextRes() {
     await this.getResSpecs(true);
   }
 
-  addResToSelected(res:any){
+  addResToSelected(res: any) {
     const index = this.selectedResourceSpecs.findIndex(item => item.id === res.id);
     if (index !== -1) {
       console.log('eliminar')
@@ -979,72 +994,72 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
         href: res.href,
         name: res.name
       });
-    }    
+    }
     this.cdr.detectChanges();
     console.log(this.selectedResourceSpecs)
   }
 
-  isResSelected(res:any){
+  isResSelected(res: any) {
     const index = this.selectedResourceSpecs.findIndex(item => item.id === res.id);
     if (index !== -1) {
       return true
     } else {
       return false;
-    } 
+    }
   }
 
-  toggleService(){
-    this.loadingServiceSpec=true;
-    this.serviceSpecs=[];
-    this.serviceSpecPage=0;
+  toggleService() {
+    this.loadingServiceSpec = true;
+    this.serviceSpecs = [];
+    this.serviceSpecPage = 0;
     this.getServSpecs(false);
-    this.selectStep('service','service-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=true;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=false;
-    this.showPreview=false;
+    this.selectStep('service', 'service-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = true;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = false;
+    this.showPreview = false;
     this.refreshChars();
     initFlowbite();
   }
 
-  async getServSpecs(next:boolean){
-    if(next==false){
-      this.loadingServiceSpec=true;
+  async getServSpecs(next: boolean) {
+    if (next == false) {
+      this.loadingServiceSpec = true;
     }
-    
+
     let options = {
-      "filters": ['Active','Launched'],
+      "filters": ['Active', 'Launched'],
       "partyId": this.partyId,
       //"sort": undefined,
       //"isBundle": false
     }
 
-    this.paginationService.getItemsPaginated(this.serviceSpecPage, this.SERV_SPEC_LIMIT, next, this.serviceSpecs,this.nextServiceSpecs, options,
+    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.serviceSpecs=data.items;
-      this.nextServiceSpecs=data.nextItems;
-      this.serviceSpecPage=data.page;
-      this.loadingServiceSpec=false;
-      this.loadingServiceSpec_more=false;
-    })
+        this.serviceSpecPageCheck = data.page_check;
+        this.serviceSpecs = data.items;
+        this.nextServiceSpecs = data.nextItems;
+        this.serviceSpecPage = data.page;
+        this.loadingServiceSpec = false;
+        this.loadingServiceSpec_more = false;
+      })
   }
 
-  async nextServ(){
-    this.loadingServiceSpec_more=true;
-    this.serviceSpecPage=this.serviceSpecPage+this.SERV_SPEC_LIMIT;
+  async nextServ() {
+    this.loadingServiceSpec_more = true;
+    this.serviceSpecPage = this.serviceSpecPage + this.SERV_SPEC_LIMIT;
     this.cdr.detectChanges;
     console.log(this.serviceSpecPage)
     await this.getServSpecs(true);
   }
 
-  addServToSelected(serv:any){
+  addServToSelected(serv: any) {
     const index = this.selectedServiceSpecs.findIndex(item => item.id === serv.id);
     if (index !== -1) {
       console.log('eliminar')
@@ -1056,52 +1071,52 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
         href: serv.href,
         name: serv.name
       });
-    }    
+    }
     this.cdr.detectChanges();
     console.log(this.selectedServiceSpecs)
   }
 
-  isServSelected(serv:any){
+  isServSelected(serv: any) {
     const index = this.selectedServiceSpecs.findIndex(item => item.id === serv.id);
     if (index !== -1) {
       return true
     } else {
       return false;
-    } 
-  }
-
-  toggleAttach(){
-    this.selectStep('attach','attach-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=true;
-    this.showRelationships=false;
-    this.showSummary=false;
-    this.showPreview=false;
-    setTimeout(() => {        
-      initFlowbite();   
+    }
+  }
+
+  toggleAttach() {
+    this.selectStep('attach', 'attach-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = true;
+    this.showRelationships = false;
+    this.showSummary = false;
+    this.showPreview = false;
+    setTimeout(() => {
+      initFlowbite();
     }, 100);
     this.refreshChars();
   }
 
-  removeImg(){    
-    this.showImgPreview=false;
+  removeImg() {
+    this.showImgPreview = false;
     const index = this.prodAttachments.findIndex(item => item.url === this.imgPreview);
     if (index !== -1) {
       console.log('eliminar')
       this.prodAttachments.splice(index, 1);
     }
-    this.imgPreview='';
+    this.imgPreview = '';
     this.cdr.detectChanges();
   }
 
-  saveImgFromURL(){
-    this.showImgPreview=true;
-    this.imgPreview=this.imgURL.nativeElement.value;
+  saveImgFromURL() {
+    this.showImgPreview = true;
+    this.imgPreview = this.imgURL.nativeElement.value;
     this.prodAttachments.push({
       name: 'Profile Picture',
       url: this.imgPreview,
@@ -1111,85 +1126,85 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     this.cdr.detectChanges();
   }
 
-  removeAtt(att:any){
+  removeAtt(att: any) {
     const index = this.prodAttachments.findIndex(item => item.url === att.url);
     if (index !== -1) {
       console.log('eliminar')
-      if(this.prodAttachments[index].name=='Profile Picture'){
-        this.showImgPreview=false;
-        this.imgPreview='';
+      if (this.prodAttachments[index].name == 'Profile Picture') {
+        this.showImgPreview = false;
+        this.imgPreview = '';
         this.cdr.detectChanges();
       }
       this.prodAttachments.splice(index, 1);
-    }  
+    }
     this.cdr.detectChanges();
   }
 
-  saveAtt(){
+  saveAtt() {
     console.log('saving')
     this.prodAttachments.push({
       name: this.attachName.nativeElement.value,
       url: this.attachToCreate.url,
       attachmentType: this.attachToCreate.attachmentType
     })
-    this.attachName.nativeElement.value='';
-    this.attachToCreate={url:'',attachmentType:''};
-    this.showNewAtt=false;
+    this.attachName.nativeElement.value = '';
+    this.attachToCreate = { url: '', attachmentType: '' };
+    this.showNewAtt = false;
     this.attFileName.reset();
   }
 
-  clearAtt(){
-    this.attachToCreate={url:'',attachmentType:''};
+  clearAtt() {
+    this.attachToCreate = { url: '', attachmentType: '' };
   }
 
-  saveAdditionalCert(){
+  saveAdditionalCert() {
     console.log('saving')
     this.additionalISOS.push({
-      name: 'Compliance:'+this.certificationName.nativeElement.value,
+      name: 'Compliance:' + this.certificationName.nativeElement.value,
       url: this.isoToCreate
     })
-    this.certificationName.nativeElement.value='';
-    this.isoToCreate='';
+    this.certificationName.nativeElement.value = '';
+    this.isoToCreate = '';
     this.certFileName.reset();
-    this.showCert=false;
+    this.showCert = false;
   }
 
-  clearAdditionalCert(urlonly:boolean){
-    if(!urlonly){
-      this.certificationName.nativeElement.value='';
+  clearAdditionalCert(urlonly: boolean) {
+    if (!urlonly) {
+      this.certificationName.nativeElement.value = '';
       this.certFileName.reset();
-    }    
-    this.isoToCreate='';
+    }
+    this.isoToCreate = '';
   }
 
-  toggleRelationship(){
-    this.prodSpecRels=[];
-    this.prodSpecRelPage=0;
-    this.showCreateRel=false;
-    this.loadingprodSpecRel=true;
+  toggleRelationship() {
+    this.prodSpecRels = [];
+    this.prodSpecRelPage = 0;
+    this.showCreateRel = false;
+    this.loadingprodSpecRel = true;
     this.getProdSpecsRel(false);
-    this.selectStep('relationships','relationships-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=true;
-    this.showSummary=false;
-    this.showPreview=false;
+    this.selectStep('relationships', 'relationships-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = true;
+    this.showSummary = false;
+    this.showPreview = false;
     this.refreshChars();
     initFlowbite();
   }
 
-  async getProdSpecsRel(next:boolean){
-    if(next==false){
-      this.loadingprodSpecRel=true;
+  async getProdSpecsRel(next: boolean) {
+    if (next == false) {
+      this.loadingprodSpecRel = true;
     }
-    
+
     let options = {
-      "filters": ['Active','Launched'],
+      "filters": ['Active', 'Launched'],
       "partyId": this.partyId,
       //"sort": undefined,
       //"isBundle": false
@@ -1197,135 +1212,135 @@ export class UpdateProductSpecComponent 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.prodSpecRels=data.items;
-      this.nextProdSpecRels=data.nextItems;
-      this.prodSpecRelPage=data.page;
-      this.loadingprodSpecRel=false;
-      this.loadingprodSpecRel_more=false;
-    })
+        this.prodSpecRelPageCheck = data.page_check;
+        this.prodSpecRels = data.items;
+        this.nextProdSpecRels = data.nextItems;
+        this.prodSpecRelPage = data.page;
+        this.loadingprodSpecRel = false;
+        this.loadingprodSpecRel_more = false;
+      })
   }
 
-  selectRelationship(rel:any){
-    this.selectedProdSpec=rel;
+  selectRelationship(rel: any) {
+    this.selectedProdSpec = rel;
   }
 
-  async nextProdSpecsRel(){
+  async nextProdSpecsRel() {
     await this.getProdSpecsRel(true);
   }
 
   onRelChange(event: any) {
     console.log('relation type changed')
-    this.selectedRelType=event.target.value;
+    this.selectedRelType = event.target.value;
     this.cdr.detectChanges();
   }
 
-  saveRel(){
-    this.showCreateRel=false;
+  saveRel() {
+    this.showCreateRel = false;
     this.prodRelationships.push({
       id: this.selectedProdSpec.id,
       href: this.selectedProdSpec.href,
       relationshipType: this.selectedRelType,
       name: this.selectedProdSpec.name
-      //productSpec: this.selectedProdSpec      
+      //productSpec: this.selectedProdSpec
     });
-    this.selectedRelType='migration';
+    this.selectedRelType = 'migration';
     console.log(this.prodRelationships)
   }
 
-  deleteRel(rel:any){
+  deleteRel(rel: any) {
     const index = this.prodRelationships.findIndex(item => item.id === rel.id);
     if (index !== -1) {
       console.log('eliminar')
       this.prodRelationships.splice(index, 1);
-    }   
-    this.cdr.detectChanges(); 
+    }
+    this.cdr.detectChanges();
   }
 
-  refreshChars(){
-    this.stringValue= '';
+  refreshChars() {
+    this.stringValue = '';
     this.numberValue = '';
     this.numberUnit = '';
     this.fromValue = '';
     this.toValue = '';
     this.rangeUnit = '';
     this.jsonValue = '';
-    this.charTypeSelected=this.getInitialCharacteristicTypeForCurrentStep();
-    this.booleanDefaultTrue=true;
-    this.isOptional=false;
-    this.optionalDftTrue=false;
-    this.creatingChars=[];
+    this.charTypeSelected = this.getInitialCharacteristicTypeForCurrentStep();
+    this.booleanDefaultTrue = true;
+    this.isOptional = false;
+    this.optionalDftTrue = false;
+    this.creatingChars = [];
   }
 
-  setBooleanDefaultValues(){
-    this.creatingChars=[
+  setBooleanDefaultValues() {
+    this.creatingChars = [
       {
-        isDefault:this.booleanDefaultTrue,
-        value:true as any
+        isDefault: this.booleanDefaultTrue,
+        value: true as any
       },
       {
-        isDefault:!this.booleanDefaultTrue,
-        value:false as any
+        isDefault: !this.booleanDefaultTrue,
+        value: false as any
       }
     ];
   }
 
-  onBooleanDefaultChange(){
-    if(this.charTypeSelected == 'boolean'){
+  onBooleanDefaultChange() {
+    if (this.charTypeSelected == 'boolean') {
       this.setBooleanDefaultValues();
     }
   }
 
-  removeClass(elem: HTMLElement, cls:string) {
+  removeClass(elem: HTMLElement, cls: string) {
     var str = " " + elem.className + " ";
     elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
   }
 
-  addClass(elem: HTMLElement, cls:string) {
-      elem.className += (" " + cls);
+  addClass(elem: HTMLElement, cls: string) {
+    elem.className += (" " + cls);
   }
 
-  unselectMenu(elem:HTMLElement | null,cls:string){
-    if(elem != null){
-      if(elem.className.match(cls)){
-        this.removeClass(elem,cls)
+  unselectMenu(elem: HTMLElement | null, cls: string) {
+    if (elem != null) {
+      if (elem.className.match(cls)) {
+        this.removeClass(elem, cls)
       } else {
         console.log('already unselected')
       }
     }
   }
 
-  selectMenu(elem:HTMLElement| null,cls:string){
-    if(elem != null){
-      if(elem.className.match(cls)){
+  selectMenu(elem: HTMLElement | null, cls: string) {
+    if (elem != null) {
+      if (elem.className.match(cls)) {
         console.log('already selected')
       } else {
-        this.addClass(elem,cls)
+        this.addClass(elem, cls)
       }
     }
   }
-  
+
   //STEPS CSS EFFECTS:
-  selectStep(step:string,stepCircle:string){
+  selectStep(step: string, stepCircle: string) {
     const index = this.stepsElements.findIndex(item => item === step);
     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') 
-      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(step), 'text-primary-100 dark:text-primary-50')
+      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.stepsElements.push(step);
     }
     const circleIndex = this.stepsCircles.findIndex(item => item === stepCircle);
     if (index !== -1) {
       this.stepsCircles.splice(circleIndex, 1);
-      this.selectMenu(document.getElementById(stepCircle),'border-primary-100 dark:border-primary-50')
-      this.unselectMenu(document.getElementById(stepCircle),'border-gray-400');
-      for(let i=0; i<this.stepsCircles.length;i++){
-        this.unselectMenu(document.getElementById(this.stepsCircles[i]),'border-primary-100 dark:border-primary-50')
-        this.selectMenu(document.getElementById(this.stepsCircles[i]),'border-gray-400');
+      this.selectMenu(document.getElementById(stepCircle), 'border-primary-100 dark:border-primary-50')
+      this.unselectMenu(document.getElementById(stepCircle), 'border-gray-400');
+      for (let i = 0; i < this.stepsCircles.length; i++) {
+        this.unselectMenu(document.getElementById(this.stepsCircles[i]), 'border-primary-100 dark:border-primary-50')
+        this.selectMenu(document.getElementById(this.stepsCircles[i]), 'border-gray-400');
       }
       this.stepsCircles.push(stepCircle);
     }
@@ -1341,22 +1356,15 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     this.toValue = '';
     this.rangeUnit = '';
     this.jsonValue = '';
-    this.isOptional=false;
-    this.optionalDftTrue=false;
-    if(this.charTypeSelected == 'boolean'){
-      this.booleanDefaultTrue=true;
+    this.isOptional = false;
+    this.optionalDftTrue = false;
+    if (this.charTypeSelected == 'boolean') {
+      this.booleanDefaultTrue = true;
       this.setBooleanDefaultValues();
     } else {
-      this.booleanDefaultTrue=true;
-      this.creatingChars=[];
-    }
-  }
-
-  isJsonCharacteristicType(type: string | undefined): boolean {
-    if (!type) {
-      return false;
+      this.booleanDefaultTrue = true;
+      this.creatingChars = [];
     }
-    return this.dataSpaceJsonCharacteristicTypes.includes(type);
   }
 
   isDataSpaceCharacteristicType(type: string | undefined): boolean {
@@ -1375,7 +1383,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
   }
 
   isTextCharacteristicType(type: string | undefined): boolean {
-    return type === 'string' || type === 'endpointUrl' || type === 'upstreamAddress' || type === 'endpointDescription';
+    return type === 'string';
   }
 
   getFilteredCharacteristicsForCurrentStep(): ProductSpecificationCharacteristic[] {
@@ -1388,69 +1396,31 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
 
   getInitialCharacteristicTypeForCurrentStep(): string {
     if (this.isDataspaceConfigurationStep()) {
-      return this.dataSpaceCharacteristicTypes[0];
+      return 'credentialsConfiguration';
     }
     return 'string';
   }
 
-  private getFormSteps(): string[] {
-    const steps: string[] = ['General Info'];
+  private getFormSteps(): Step[] {
+    const steps: Step[] = [{ label: 'General Info', id: 'general' }];
     if (this.BUNDLE_ENABLED) {
-      steps.push('Bundle');
-    }
-    steps.push('Compliance profile');
-    steps.push('Characteristics');
-    if (this.DATA_SPACE_ENABLED) {
-      steps.push('Dataspace Configuration');
-    }
-    steps.push('Resource specifications');
-    steps.push('Service specifications');
-    steps.push('Attachments');
-    steps.push('Relationships');
-    steps.push('Summary');
+      steps.push({ label: 'Bundle', id: 'bundle' });
+    }
+    steps.push({ label: 'Compliance profile', id: 'compliance' });
+    steps.push({ label: 'Characteristics', id: 'characteristics' });
+    if (this.DATA_SPACE_ENABLED && !this.prod.externalId) {
+      steps.push({ label: 'Dataspace Configuration', id: 'dataspace' });
+    }
+    steps.push({ label: 'Resource specifications', id: 'resource' });
+    steps.push({ label: 'Service specifications', id: 'service' });
+    steps.push({ label: 'Attachments', id: 'attachments' });
+    steps.push({ label: 'Relationships', id: 'relationships' });
+    steps.push({ label: 'Summary', id: 'summary' });
     return steps;
   }
 
-  private getStepIndex(step: ProductSpecFormStep): number {
-    const bundleOffset = this.BUNDLE_ENABLED ? 1 : 0;
-    const complianceIndex = 1 + bundleOffset;
-    const characteristicsIndex = complianceIndex + 1;
-    const dataspaceIndex = this.DATA_SPACE_ENABLED ? characteristicsIndex + 1 : -1;
-    const resourceIndex = characteristicsIndex + (this.DATA_SPACE_ENABLED ? 2 : 1);
-    const serviceIndex = resourceIndex + 1;
-    const attachmentsIndex = serviceIndex + 1;
-    const relationshipsIndex = attachmentsIndex + 1;
-    const summaryIndex = relationshipsIndex + 1;
-
-    switch (step) {
-      case 'general':
-        return 0;
-      case 'bundle':
-        return this.BUNDLE_ENABLED ? 1 : -1;
-      case 'compliance':
-        return complianceIndex;
-      case 'characteristics':
-        return characteristicsIndex;
-      case 'dataspace':
-        return dataspaceIndex;
-      case 'resource':
-        return resourceIndex;
-      case 'service':
-        return serviceIndex;
-      case 'attachments':
-        return attachmentsIndex;
-      case 'relationships':
-        return relationshipsIndex;
-      case 'summary':
-        return summaryIndex;
-      default:
-        return -1;
-    }
-  }
-
   isCurrentStep(step: ProductSpecFormStep): boolean {
-    const index = this.getStepIndex(step);
-    return index >= 0 && this.currentStep === index;
+    return this.currentStep?.id === step;
   }
 
   private getSchemaLocationForType(type: string): string | null {
@@ -1464,39 +1434,39 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
   }
 
 
-  addCharValue(){
-    if(this.isTextCharacteristicType(this.charTypeSelected)){
+  addCharValue() {
+    if (this.isTextCharacteristicType(this.charTypeSelected)) {
       console.log('string')
-      if(this.creatingChars.length==0){
+      if (this.creatingChars.length == 0) {
         this.creatingChars.push({
-          isDefault:true,
-          value:this.stringValue as any
+          isDefault: true,
+          value: this.stringValue as any
         })
-      } else{
+      } else {
         this.creatingChars.push({
-          isDefault:false,
-          value:this.stringValue as any
+          isDefault: false,
+          value: this.stringValue as any
         })
       }
-      this.stringValue='';  
-    } else if (this.charTypeSelected == 'number'){
+      this.stringValue = '';
+    } else if (this.charTypeSelected == 'number') {
       console.log('number')
-      if(this.creatingChars.length==0){
+      if (this.creatingChars.length == 0) {
         this.creatingChars.push({
-          isDefault:true,
-          value:this.numberValue as any,
-          unitOfMeasure:this.numberUnit
+          isDefault: true,
+          value: this.numberValue as any,
+          unitOfMeasure: this.numberUnit
         })
-      } else{
+      } else {
         this.creatingChars.push({
-          isDefault:false,
-          value:this.numberValue as any,
-          unitOfMeasure:this.numberUnit
+          isDefault: false,
+          value: this.numberValue as any,
+          unitOfMeasure: this.numberUnit
         })
       }
-      this.numberUnit='';
-      this.numberValue='';
-    }else if(this.charTypeSelected == 'range'){
+      this.numberUnit = '';
+      this.numberValue = '';
+    } else if (this.charTypeSelected == 'range') {
       console.log('range')
       // Validate that fromValue < toValue
       const fromVal = Number(this.fromValue);
@@ -1505,29 +1475,30 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
         console.log('range validation error: valueFrom >= valueTo')
         this.errorMessage = 'Invalid range: "From" value must be less than "To" value';
         this.showError = true;
-        setTimeout(() => {this.showError = false}, 3000);
+        setTimeout(() => { this.showError = false }, 3000);
         return;
       }
 
-      if(this.creatingChars.length==0){
+      if (this.creatingChars.length == 0) {
         this.creatingChars.push({
-          isDefault:true,
-          valueFrom:this.fromValue as any,
-          valueTo:this.toValue as any,
-          unitOfMeasure:this.rangeUnit
+          isDefault: true,
+          valueFrom: this.fromValue as any,
+          valueTo: this.toValue as any,
+          unitOfMeasure: this.rangeUnit
         })
-      } else{
+      } else {
         this.creatingChars.push({
-          isDefault:false,
-          valueFrom:this.fromValue as any,
-          valueTo:this.toValue as any,
-          unitOfMeasure:this.rangeUnit})
-      } 
-    } else if (this.isJsonCharacteristicType(this.charTypeSelected)) {
+          isDefault: false,
+          valueFrom: this.fromValue as any,
+          valueTo: this.toValue as any,
+          unitOfMeasure: this.rangeUnit
+        })
+      }
+    } else if (this.isDataSpaceCharacteristicType(this.charTypeSelected)) {
       if (this.creatingChars.length > 0) {
         this.errorMessage = 'Only one JSON value is allowed';
         this.showError = true;
-        setTimeout(() => {this.showError = false}, 3000);
+        setTimeout(() => { this.showError = false }, 3000);
         return;
       }
       try {
@@ -1540,10 +1511,10 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
       } catch (error) {
         this.errorMessage = 'Invalid JSON format';
         this.showError = true;
-        setTimeout(() => {this.showError = false}, 3000);
+        setTimeout(() => { this.showError = false }, 3000);
         return;
       }
-    } else if (this.charTypeSelected == 'boolean'){
+    } else if (this.charTypeSelected == 'boolean') {
       console.log('boolean values are fixed')
       return;
     } else {
@@ -1551,8 +1522,8 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     }
   }
 
-  removeCharValue(char:any,idx:any){
-    if(this.charTypeSelected == 'boolean'){
+  removeCharValue(char: any, idx: any) {
+    if (this.charTypeSelected == 'boolean') {
       return;
     }
     console.log(this.creatingChars)
@@ -1560,28 +1531,29 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     console.log(this.creatingChars)
   }
 
-  selectDefaultChar(char:any,idx:any){
-    for(let i=0;i<this.creatingChars.length;i++){
-      if(i==idx){
-        this.creatingChars[i].isDefault=true;
+  selectDefaultChar(char: any, idx: any) {
+    for (let i = 0; i < this.creatingChars.length; i++) {
+      if (i == idx) {
+        this.creatingChars[i].isDefault = true;
       } else {
-        this.creatingChars[i].isDefault=false;
+        this.creatingChars[i].isDefault = false;
       }
     }
   }
 
-  saveChar(){
-    if(this.charsForm.value.name!=null){
+  saveChar() {
+    if (this.charsForm.value.name != null) {
       // Create the main characteristic
       const characteristic: any = {
-        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
       };
 
       const schemaLocation = this.getSchemaLocationForType(this.charTypeSelected);
-      if (this.isDataSpaceCharacteristicType(this.charTypeSelected)) {
+      const primitiveTypes = ['string', 'number', 'boolean', 'range'];
+      if (!primitiveTypes.includes(this.charTypeSelected)) {
         characteristic.valueType = this.charTypeSelected;
       }
       if (schemaLocation) {
@@ -1591,9 +1563,9 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
       this.prodChars.push(characteristic);
 
       // create X - enabled characteristic
-      if(this.isOptional && this.charTypeSelected !== 'boolean' && !this.isJsonCharacteristicType(this.charTypeSelected)){
+      if (this.isOptional && primitiveTypes.includes(this.charTypeSelected) && this.charTypeSelected !== 'boolean') {
         this.prodChars.push({
-          id: 'urn:ngsi-ld:characteristic:'+uuidv4(),
+          id: 'urn:ngsi-ld:characteristic:' + uuidv4(),
           name: this.charsForm.value.name + ' - enabled',
           description: 'Optional toggle for ' + this.charsForm.value.name,
           productSpecCharacteristicValue: [
@@ -1603,7 +1575,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
             },
             {
               isDefault: !this.optionalDftTrue,
-              value:false as any
+              value: false as any
             }
           ]
         })
@@ -1611,16 +1583,16 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     }
 
     this.charsForm.reset();
-    this.creatingChars=[];
-    this.showCreateChar=false;
-    this.charTypeSelected='string';
-    this.isOptional=false;
-    this.optionalDftTrue=false;
+    this.creatingChars = [];
+    this.showCreateChar = false;
+    this.charTypeSelected = 'string';
+    this.isOptional = false;
+    this.optionalDftTrue = false;
     this.refreshChars();
     this.cdr.detectChanges();
   }
 
-  deleteChar(char:any){
+  deleteChar(char: any) {
     const index = this.prodChars.findIndex(item => item.id === char.id);
     if (index !== -1) {
       console.log('eliminar')
@@ -1628,8 +1600,8 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     }
 
     // If deleting a main characteristic, also delete its "- enabled" variant if it exists
-    if(!char.name.endsWith('- enabled')){
-      const relatedEnabledIndex = this.prodChars.findIndex(item => item.name === char.name+' - enabled');
+    if (!char.name.endsWith('- enabled')) {
+      const relatedEnabledIndex = this.prodChars.findIndex(item => item.name === char.name + ' - enabled');
       if (relatedEnabledIndex !== -1) {
         console.log('eliminar related enabled')
         this.prodChars.splice(relatedEnabledIndex, 1);
@@ -1646,46 +1618,46 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
 
   showFinish() {
     this.setProductData();
-    this.selectStep('summary','summary-circle');
-    this.showBundle=false;
-    this.showGeneral=false;
-    this.showCompliance=false;
-    this.showChars=false;
-    this.showResource=false;
-    this.showService=false;
-    this.showAttach=false;
-    this.showRelationships=false;
-    this.showSummary=true;
-    this.showPreview=false;
+    this.selectStep('summary', 'summary-circle');
+    this.showBundle = false;
+    this.showGeneral = false;
+    this.showCompliance = false;
+    this.showChars = false;
+    this.showResource = false;
+    this.showService = false;
+    this.showAttach = false;
+    this.showRelationships = false;
+    this.showSummary = true;
+    this.showPreview = false;
     this.refreshChars();
     initFlowbite();
   }
 
-  setProductData(){
+  setProductData() {
     this.finishChars = [];
     console.log('--- set product data')
     console.log(this.prodChars)
-    for(let i=0; i< this.prodChars.length; i++){
+    for (let i = 0; i < this.prodChars.length; i++) {
       const index = this.finishChars.findIndex(item => item.name === this.prodChars[i].name);
       if (index == -1) {
         const cleanedName = this.prodChars[i]?.name
-        ?.replace('Compliance:', '')
-        .trim();
-  
+          ?.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
             );
-            if(checkAdditional != -1){
+            if (checkAdditional != -1) {
               this.finishChars.push(this.prodChars[i])
             }
-            if(!this.prodChars[i].name?.startsWith('Compliance:')){
+            if (!this.prodChars[i].name?.startsWith('Compliance:')) {
               this.finishChars.push(this.prodChars[i])
             }
           } else {
@@ -1694,15 +1666,15 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
         } else {
           this.finishChars.push(this.prodChars[i])
         }
-        
+
       }
     }
     // Load compliance profile
-    for(let i = 0; i < this.selectedISOS.length; i++){
+    for (let i = 0; i < this.selectedISOS.length; i++) {
       const index = this.finishChars.findIndex(item => item.name === this.selectedISOS[i].name);
       if (index == -1) {
         this.finishChars.push({
-          id: this.selectedISOS[i].id ? this.selectedISOS[i].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,
@@ -1712,7 +1684,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
       }
     }
 
-    for(let i=0; i<this.additionalISOS.length;i++){
+    for (let i = 0; i < this.additionalISOS.length; i++) {
       console.log('- finish chars antes')
       console.log(this.finishChars)
       console.log('añadiendo additional a finish chars')
@@ -1720,7 +1692,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: this.additionalISOS[i].id ? this.additionalISOS[i].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,
@@ -1759,7 +1731,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     }
 
     // Load compliance VCs
-    if(this.complianceVC != null) {
+    if (this.complianceVC != null) {
       this.finishChars.push({
         id: this.complianceVCId ? this.complianceVCId : `urn:ngsi-ld:characteristic:${uuidv4()}`,
         name: `Compliance:VC`,
@@ -1770,9 +1742,86 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
       })
     }
 
-    if(this.generalForm.value.name!=null && this.generalForm.value.version!=null && this.generalForm.value.brand!=null){
+    if (this.prod.externalId) {
+      this.endpointUrls.forEach(endpoint => {
+        this.finishChars.push({
+          id: endpoint.id,
+          description: endpoint.description,
+          valueType: 'endpointUrl',
+          name: endpoint.name,
+          productSpecCharacteristicValue: [
+            { value: endpoint.url! as any, isDefault: true }
+          ]
+        })
+      })
+      const dspConfigValue = this.dspConfigForm.value
+      this.finishChars.push(
+        {
+          id: "upstreamAddress",
+          name: "Address of the upstream serving the data",
+          valueType: "upstreamAddress",
+          productSpecCharacteristicValue: [
+            { value: dspConfigValue.upstreamAddress! as any, isDefault: true }
+          ]
+        },
+        {
+          id: "targetSpecification",
+          name: "Detailed specification of the ODRL target. Allows to over services via OID4VC",
+          valueType: "targetSpecification",
+          productSpecCharacteristicValue: [
+            { value: JSON.parse(dspConfigValue.targetSpecification!), isDefault: true }
+          ]
+        },
+        {
+          id: "serviceConfiguration",
+          name: "Service config to be used in the credentials config service when provisioning transfers through OID4VC",
+          valueType: "serviceConfiguration",
+          productSpecCharacteristicValue: [
+            { value: JSON.parse(dspConfigValue.serviceConfiguration!), isDefault: true }
+          ]
+        },
+        {
+          id: "credentialsConfig",
+          name: "Credentials Config",
+          valueType: "credentialsConfig",
+          "@schemaLocation": "https://raw.githubusercontent.com/FIWARE/contract-management/refs/heads/main/schemas/credentials/credentialConfigCharacteristic.json",
+          productSpecCharacteristicValue: [
+            { value: JSON.parse(dspConfigValue.credentialsConfig!), isDefault: true }
+          ]
+        },
+        {
+          id: "policyConfig",
+          name: "Policy for creation of K8S clusters.",
+          valueType: "authorizationPolicy",
+          "@schemaLocation": "https://raw.githubusercontent.com/FIWARE/contract-management/refs/heads/policy-support/schemas/odrl/policyCharacteristic.json",
+          productSpecCharacteristicValue: [
+            { value: JSON.parse(dspConfigValue.policyConfig!), isDefault: true }
+          ]
+        },
+        {
+          id: 'transferType',
+          name: 'transferType',
+          valueType: 'transferType',
+          productSpecCharacteristicValue: [
+            { value: dspConfigValue.transferType as any, isDefault: true }
+          ]
+        }
+      )
+      if (dspConfigValue.transferPath) {
+        this.finishChars.push({
+          id: 'transferPath',
+          name: 'transferPath',
+          valueType: 'transferPath',
+          productSpecCharacteristicValue: [
+            { value: dspConfigValue.transferPath as any, isDefault: true }
+          ]
+        })
+      }
+    }
+
+    if (this.generalForm.value.name != null && this.generalForm.value.version != null && this.generalForm.value.brand != null) {
       let rels = [];
-      for(let i=0; i<this.prodRelationships.length;i++){
+      for (let i = 0; i < this.prodRelationships.length; i++) {
         rels.push({
           id: this.prodRelationships[i].id,
           href: this.prodRelationships[i].href,
@@ -1798,10 +1847,10 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     }
   }
 
-  isProdValid(){
-    if(this.generalForm.valid){
-      if(this.bundleChecked){
-        if(this.prodSpecsBundle.length<2){
+  isProdValid() {
+    if (this.generalForm.valid) {
+      if (this.bundleChecked) {
+        if (this.prodSpecsBundle.length < 2) {
           return true;
         } else {
           return false;
@@ -1814,25 +1863,25 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     }
   }
 
-  updateProduct(){
+  updateProduct() {
     this.setProductData();
-    this.loading=true;
+    this.loading = true;
     this.prodSpecService.updateProdSpec(this.productSpecToUpdate, this.prod.id).subscribe({
       next: data => {
-        this.loading=false;
+        this.loading = false;
         this.goBack();
         console.log('actualiado producto')
       },
       error: error => {
         console.error('There was an error while updating!', error);
-        if(error.error.error){
+        if (error.error.error) {
           console.log(error)
-          this.errorMessage='Error: '+error.error.error;
+          this.errorMessage = 'Error: ' + error.error.error;
         } else {
-          this.errorMessage='There was an error while uploading the product!';
+          this.errorMessage = 'There was an error while uploading the product!';
         }
-        this.loading=false;
-        this.showError=true;
+        this.loading = false;
+        this.showError = true;
         setTimeout(() => {
           this.showError = false;
         }, 3000);
@@ -1841,16 +1890,14 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
   }
 
   isStepDisabled(): boolean {
-    switch (this.currentStep) {
-      case 0: // General Info
+    switch (this.currentStep.id) {
+      case 'general':
         return !this.generalForm?.valid || false;
+      case 'bundle':
+        return this.prodSpecsBundle.length < 2 && this.bundleChecked;
+      case 'compliance':
+        return this.checkValidISOS();
       default:
-        if (this.BUNDLE_ENABLED && this.currentStep === this.getStepIndex('bundle')) {
-          return this.prodSpecsBundle.length<2 && this.bundleChecked;
-        }
-        if (this.currentStep === this.getStepIndex('compliance')) {
-          return this.checkValidISOS();
-        }
         return false;
     }
   }
@@ -1870,58 +1917,58 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     });
   }
 
-  addList(){
+  addList() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n- First item\n- Second item'
-    });    
+    });
   }
 
-  addOrderedList(){
+  addOrderedList() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n1. First item\n2. Second item'
-    });    
+    });
   }
 
-  addCode(){
+  addCode() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n`code`'
-    });    
+    });
   }
 
-  addCodeBlock(){
+  addCodeBlock() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n```\ncode\n```'
-    }); 
+    });
   }
 
-  addBlockquote(){
+  addBlockquote() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n> blockquote'
-    });    
+    });
   }
 
-  addLink(){
+  addLink() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + ' [title](https://www.example.com) '
-    });    
-  } 
+    });
+  }
 
-  addTable(){
+  addTable() {
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + '\n| Syntax | Description |\n| ----------- | ----------- |\n| Header | Title |\n| Paragraph | Text |'
     });
   }
 
-  addEmoji(event:any){
+  addEmoji(event: any) {
     console.log(event)
-    this.showEmoji=false;
+    this.showEmoji = false;
     const currentText = this.generalForm.value.description;
     this.generalForm.patchValue({
       description: currentText + event.emoji.native
@@ -1929,11 +1976,11 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
   }
 
   hasLongWord(str: string | undefined, threshold = 20) {
-    if(str){
+    if (str) {
       return str.split(/\s+/).some(word => word.length > threshold);
     } else {
       return false
-    }   
+    }
   }
 
   getValuePreview(value: any, maxLength = 80): string {
@@ -1956,44 +2003,44 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
   }
 
   goToStep(index: number) {
-    
-    this.currentStep = index;
-    if(this.currentStep>this.highestStep){
-      this.highestStep=this.currentStep
+
+    this.currentStepIdx = index;
+    if (this.currentStepIdx > this.highestStepIdx) {
+      this.highestStepIdx = this.currentStepIdx;
     }
     this.refreshChars();
-    if(this.isCurrentStep('compliance')){
-      setTimeout(() => {        
-        initFlowbite();   
+    if (this.isCurrentStep('compliance')) {
+      setTimeout(() => {
+        initFlowbite();
       }, 100);
     }
     //Resource
-    if(this.isCurrentStep('resource')){
+    if (this.isCurrentStep('resource')) {
       this.getResSpecs(false);
     }
     //Service
-    if(this.isCurrentStep('service')){
+    if (this.isCurrentStep('service')) {
       this.getServSpecs(false);
     }
     //Attachment
-    if(this.isCurrentStep('attachments')){
-      setTimeout(() => {        
-        initFlowbite();   
+    if (this.isCurrentStep('attachments')) {
+      setTimeout(() => {
+        initFlowbite();
       }, 100);
     }
     //rels
-    if(this.isCurrentStep('relationships')){
+    if (this.isCurrentStep('relationships')) {
       this.getProdSpecsRel(false);
     }
     //finish
-    if(this.isCurrentStep('summary')){
+    if (this.isCurrentStep('summary')) {
       this.showFinish();
     }
   }
 
   validateCurrentStep(): boolean {
-    switch (this.currentStep) {
-      case 0: // General Info
+    switch (this.currentStep.id) {
+      case 'general':
         return this.generalForm?.valid || false;
       default:
         return true;
@@ -2002,7 +2049,7 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
 
   canNavigate(index: number) {
     return this.generalForm?.valid
-  }  
+  }
 
   handleStepClick(index: number): void {
     if (this.canNavigate(index)) {
@@ -2065,4 +2112,53 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
     return `${name.toLowerCase()}::${value}`;
   }
 
+  addEndpointUrl(): void {
+    const url = this.newEndpointUrl.trim();
+    const description = this.newEndpointDescription.trim();
+    const name = this.newEndpointName.trim();
+    if (!url || !description) return;
+    this.endpointUrls = [...this.endpointUrls, { url, description, name, id: uuidv4() }];
+    this.newEndpointUrl = '';
+    this.newEndpointDescription = '';
+    this.newEndpointName = '';
+  }
+
+  removeEndpointUrl(idx: number): void {
+    this.endpointUrls = this.endpointUrls.filter((_, i) => i !== idx);
+  }
+
+  private addDspConfigStep(): void {
+    const alreadyAdded = this.steps.some(s => s.id === 'dsp_config');
+    if (alreadyAdded) return;
+    const serviceIdx = this.steps.findIndex(s => s.id === 'service');
+    this.steps = [
+      ...this.steps.slice(0, serviceIdx + 1),
+      { label: 'DSP Config', id: 'dsp_config' as ProductSpecFormStep },
+      ...this.steps.slice(serviceIdx + 1),
+    ];
+    const patch: any = {}
+    if (this.prod?.productSpecCharacteristic) {
+      this.prod.productSpecCharacteristic.forEach((char: any) => {
+        const value: string = char.productSpecCharacteristicValue?.[0]?.value ?? '';
+        switch (char.valueType) {
+          case 'endpointUrl':
+            this.endpointUrls.push({ name: char.name ?? '', url: value, description: char.description ?? '', id: char.id });
+            break;
+          case 'upstreamAddress':
+          case 'transferPath':
+          case 'transferType':
+            patch[char.valueType] = value;
+            break;
+          case 'targetSpecification':
+          case 'serviceConfiguration':
+          case 'credentialsConfig':
+            patch[char.valueType] = JSON.stringify(value);
+            break;
+          case 'authorizationPolicy':
+            patch['policyConfig'] = JSON.stringify(value);
+        }
+      });
+    }
+    this.dspConfigForm.patchValue(patch);
+  }
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.ts
index dd42cdab..45fc1402 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.ts
@@ -5,7 +5,7 @@ import {EventMessageService} from "src/app/services/event-message.service";
 import { ResourceSpecServiceService } from 'src/app/services/resource-spec-service.service';
 import { LoginInfo } from 'src/app/models/interfaces';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import { v4 as uuidv4 } from 'uuid';
 import { noWhitespaceValidator } from 'src/app/validators/validators';
 import { Subject } from 'rxjs';
diff --git a/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html
index c6bbd25c..8d8de7b8 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html
@@ -197,7 +197,7 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
             </div>
             }
         } @else {
-            <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+            <div data-cy="loadMoreLoading" role="status" class="w-full h-full flex justify-center align-middle mt-2">
             <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
                 <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
diff --git a/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.ts
index c285ec64..bc899eff 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.ts
@@ -57,11 +57,27 @@ export class SellerResourceSpecComponent implements OnInit, OnDestroy {
     })
   }
 
+  private searchInputListener = (_e: Event) => {
+    console.log(`Input updated`)
+    if (this.searchField.value == '') {
+      this.filter = undefined;
+      this.getResSpecs(false);
+    }
+  }
+
   ngOnInit() {
     this.initResources();
+    const input = document.querySelector('[type=search]')
+    if (input != undefined) {
+      input.addEventListener('input', this.searchInputListener);
+    }
   }
 
   ngOnDestroy(){
+    const input = document.querySelector('[type=search]')
+    if (input != undefined) {
+      input.removeEventListener('input', this.searchInputListener);
+    }
     this.destroy$.next();
     this.destroy$.complete();
   }
@@ -78,17 +94,6 @@ export class SellerResourceSpecComponent implements OnInit, OnDestroy {
     }
 
     this.getResSpecs(false);
-    let input = document.querySelector('[type=search]')
-    if(input!=undefined){
-      input.addEventListener('input', e => {
-        // Easy way to get the value of the element who trigger the current `e` event
-        console.log(`Input updated`)
-        if(this.searchField.value==''){
-          this.filter=undefined;
-          this.getResSpecs(false);
-        }
-      });
-    }
     initFlowbite();
   }
 
@@ -109,25 +114,28 @@ export class SellerResourceSpecComponent implements OnInit, OnDestroy {
     if(next==false){
       this.loading=true;
     }
-    
+
     let options = {
       "filters": this.status,
       "partyId": this.partyId,
       "sort": this.sort
     }
-    
-    this.paginationService.getItemsPaginated(this.page, this.RES_SPEC_LIMIT, next, this.resSpecs,this.nextResSpecs, options,
-      this.resSpecService.getResourceSpecByUser.bind(this.resSpecService)).then(data => {
-      this.page_check=data.page_check;      
+
+    try {
+      const data = await this.paginationService.getItemsPaginated(this.page, this.RES_SPEC_LIMIT, next, this.resSpecs,this.nextResSpecs, options,
+        this.resSpecService.getResourceSpecByUser.bind(this.resSpecService));
+      this.page_check=data.page_check;
       this.resSpecs=data.items;
       this.nextResSpecs=data.nextItems;
       this.page=data.page;
+    } finally {
       this.loading=false;
       this.loading_more=false;
-    })
+    }
   }
 
   async next(){
+    this.loading_more = true;
     await this.getResSpecs(true);
   }
 
diff --git a/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.ts
index 13803a0b..80bc4f58 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.ts
@@ -5,7 +5,7 @@ import {EventMessageService} from "src/app/services/event-message.service";
 import { ResourceSpecServiceService } from 'src/app/services/resource-spec-service.service';
 import { LoginInfo } from 'src/app/models/interfaces';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import { v4 as uuidv4 } from 'uuid';
 import { noWhitespaceValidator } from 'src/app/validators/validators';
 import { Subject } from 'rxjs';
diff --git a/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.ts
index 9b5a3afc..391b0b7d 100644
--- a/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.ts
@@ -5,7 +5,7 @@ import {EventMessageService} from "src/app/services/event-message.service";
 import { ServiceSpecServiceService } from 'src/app/services/service-spec-service.service';
 import { LoginInfo } from 'src/app/models/interfaces';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import { v4 as uuidv4 } from 'uuid';
 import { noWhitespaceValidator } from 'src/app/validators/validators';
 import { Subject } from 'rxjs';
diff --git a/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.ts
index 47765d18..12604f40 100644
--- a/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.ts
@@ -57,11 +57,27 @@ export class SellerServiceSpecComponent implements OnInit, OnDestroy {
     })
   }
 
+  private searchInputListener = (_e: Event) => {
+    console.log(`Input updated`)
+    if (this.searchField.value == '') {
+      this.filter = undefined;
+      this.getServSpecs(false);
+    }
+  }
+
   ngOnInit() {
     this.initServices();
+    const input = document.querySelector('[type=search]')
+    if (input != undefined) {
+      input.addEventListener('input', this.searchInputListener);
+    }
   }
 
   ngOnDestroy(){
+    const input = document.querySelector('[type=search]')
+    if (input != undefined) {
+      input.removeEventListener('input', this.searchInputListener);
+    }
     this.destroy$.next();
     this.destroy$.complete();
   }
@@ -78,17 +94,6 @@ export class SellerServiceSpecComponent implements OnInit, OnDestroy {
     }
 
     this.getServSpecs(false);
-    let input = document.querySelector('[type=search]')
-    if(input!=undefined){
-      input.addEventListener('input', e => {
-        // Easy way to get the value of the element who trigger the current `e` event
-        console.log(`Input updated`)
-        if(this.searchField.value==''){
-          this.filter=undefined;
-          this.getServSpecs(false);
-        }
-      });
-    }
     initFlowbite();
   }
 
diff --git a/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.ts
index 63cf380c..fc80b381 100644
--- a/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.ts
@@ -6,7 +6,7 @@ import { ServiceSpecServiceService } from 'src/app/services/service-spec-service
 import { LoginInfo } from 'src/app/models/interfaces';
 import { initFlowbite } from 'flowbite';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import * as moment from 'moment';
+import moment from 'moment';
 import { v4 as uuidv4 } from 'uuid';
 import { noWhitespaceValidator } from 'src/app/validators/validators';
 import { Subject } from 'rxjs';
diff --git a/src/app/pages/seller-offerings/seller-offerings.component.ts b/src/app/pages/seller-offerings/seller-offerings.component.ts
index efb962c9..9c7b72a6 100644
--- a/src/app/pages/seller-offerings/seller-offerings.component.ts
+++ b/src/app/pages/seller-offerings/seller-offerings.component.ts
@@ -8,6 +8,7 @@ import { environment } from 'src/environments/environment';
 import { ApiServiceService } from 'src/app/services/product-service.service';
 import { initFlowbite } from 'flowbite';
 import {EventMessageService} from "../../services/event-message.service";
+import moment from 'moment';
 import { firstValueFrom, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { QuoteService } from 'src/app/features/quotes/services/quote.service';
@@ -63,25 +64,25 @@ export class SellerOfferingsComponent implements OnInit, OnDestroy {
     this.eventMessage.messages$
     .pipe(takeUntil(this.destroy$))
     .subscribe(ev => {
-      if(ev.type === 'SellerProductSpec') {   
+      if(ev.type === 'SellerProductSpec') {
         this.goToProdSpec();
       }
-      if(ev.type === 'SellerCreateProductSpec' && ev.value == true) {        
+      if(ev.type === 'SellerCreateProductSpec' && ev.value == true) {
         this.goToCreateProdSpec();
       }
-      if(ev.type === 'SellerServiceSpec' && ev.value == true) {             
+      if(ev.type === 'SellerServiceSpec' && ev.value == true) {
         this.goToServiceSpec();
       }
       if(ev.type === 'SellerCreateServiceSpec' && ev.value == true) {
         this.goToCreateServSpec();
       }
-      if(ev.type === 'SellerResourceSpec' && ev.value == true) {                
+      if(ev.type === 'SellerResourceSpec' && ev.value == true) {
         this.goToResourceSpec();
       }
-      if(ev.type === 'SellerCreateResourceSpec' && ev.value == true) {        
+      if(ev.type === 'SellerCreateResourceSpec' && ev.value == true) {
         this.goToCreateResSpec();
       }
-      if(ev.type === 'SellerOffer' && ev.value == true) {      
+      if(ev.type === 'SellerOffer' && ev.value == true) {
         this.goToOffers();
       }
       if(ev.type == 'SellerCatalog' && ev.value == true){
@@ -133,7 +134,7 @@ export class SellerOfferingsComponent implements OnInit, OnDestroy {
     const state = history.state as { quoteId?: string };
     console.log('Checking state')
     console.log(state)
-    
+
     if (state && state.quoteId) {
       // If there's a quoteId in the state, open the offers section
       const quote = await firstValueFrom(this.quoteService.getQuoteById(state.quoteId));
@@ -195,7 +196,7 @@ export class SellerOfferingsComponent implements OnInit, OnDestroy {
     this.show_update_catalog=false;
     this.show_create_catalog=false;
     this.show_create_custom_offer=false;
-    this.cdr.detectChanges();  
+    this.cdr.detectChanges();
   }
 
   goToCreateCatalog(){
@@ -254,7 +255,7 @@ export class SellerOfferingsComponent implements OnInit, OnDestroy {
     this.show_update_offer=true;
     this.show_update_catalog=false;
     this.show_create_catalog=false;
-    this.cdr.detectChanges();  
+    this.cdr.detectChanges();
   }
 
   goToCreateCustomOffer(){
@@ -274,7 +275,7 @@ export class SellerOfferingsComponent implements OnInit, OnDestroy {
     this.show_update_catalog=false;
     this.show_create_catalog=false;
     this.show_create_custom_offer=true;
-    this.cdr.detectChanges();  
+    this.cdr.detectChanges();
   }
 
   goToUpdateServiceSpec(){
@@ -294,7 +295,7 @@ export class SellerOfferingsComponent implements OnInit, OnDestroy {
     this.show_update_catalog=false;
     this.show_create_catalog=false;
     this.show_create_custom_offer=false;
-    this.cdr.detectChanges(); 
+    this.cdr.detectChanges();
   }
 
   goToUpdateResourceSpec(){
@@ -314,7 +315,7 @@ export class SellerOfferingsComponent implements OnInit, OnDestroy {
     this.show_update_catalog=false;
     this.show_create_catalog=false;
     this.show_create_custom_offer=false;
-    this.cdr.detectChanges(); 
+    this.cdr.detectChanges();
   }
 
   goToCreateServSpec(){
@@ -377,8 +378,8 @@ export class SellerOfferingsComponent implements OnInit, OnDestroy {
     this.cdr.detectChanges();
   }
 
-  goToCatalogs(){  
-    this.setActiveSection('catalogs');  
+  goToCatalogs(){
+    this.setActiveSection('catalogs');
     this.selectCatalogs();
     this.show_catalogs=true;
     this.show_prod_specs=false;
@@ -414,7 +415,7 @@ export class SellerOfferingsComponent implements OnInit, OnDestroy {
   }
 
   goToProdSpec(){
-    this.setActiveSection('productspec'); 
+    this.setActiveSection('productspec');
     this.selectProdSpec();
     this.show_catalogs=false;
     this.show_prod_specs=true;
@@ -450,7 +451,7 @@ export class SellerOfferingsComponent implements OnInit, OnDestroy {
   }
 
   goToServiceSpec(){
-    this.setActiveSection('servicespec'); 
+    this.setActiveSection('servicespec');
     this.selectServiceSpec();
     this.show_catalogs=false;
     this.show_prod_specs=false;
@@ -486,7 +487,7 @@ export class SellerOfferingsComponent implements OnInit, OnDestroy {
   }
 
   goToResourceSpec(){
-    this.setActiveSection('resourcespec'); 
+    this.setActiveSection('resourcespec');
     this.selectResourceSpec();
     this.show_catalogs=false;
     this.show_prod_specs=false;
@@ -522,7 +523,7 @@ export class SellerOfferingsComponent implements OnInit, OnDestroy {
   }
 
   goToOffers(){
-    this.setActiveSection('offers'); 
+    this.setActiveSection('offers');
     this.selectOffers();
     this.show_catalogs=false;
     this.show_prod_specs=false;
diff --git a/src/app/pages/shopping-cart/shopping-cart.component.ts b/src/app/pages/shopping-cart/shopping-cart.component.ts
index 9f5dd490..3eb069c3 100644
--- a/src/app/pages/shopping-cart/shopping-cart.component.ts
+++ b/src/app/pages/shopping-cart/shopping-cart.component.ts
@@ -10,7 +10,7 @@ import { ProductOrderService } from 'src/app/services/product-order-service.serv
 import { cartProduct, billingAccountCart, LoginInfo } from '../../models/interfaces';
 import { TYPES } from 'src/app/models/types.const';
 import { initFlowbite } from 'flowbite';
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 import {LocalStorageService} from "../../services/local-storage.service";
 import { Router } from '@angular/router';
diff --git a/src/app/pages/usage-specs/usage-sections/create-usage-spec/create-usage-spec.component.ts b/src/app/pages/usage-specs/usage-sections/create-usage-spec/create-usage-spec.component.ts
index cfd7bdd5..d027e56a 100644
--- a/src/app/pages/usage-specs/usage-sections/create-usage-spec/create-usage-spec.component.ts
+++ b/src/app/pages/usage-specs/usage-sections/create-usage-spec/create-usage-spec.component.ts
@@ -8,7 +8,7 @@ import {components} from "src/app/models/product-catalog";
 import {EventMessageService} from "src/app/services/event-message.service";
 import { LocalStorageService } from 'src/app/services/local-storage.service';
 import { LoginInfo } from 'src/app/models/interfaces';
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Component({
   selector: 'create-usage-spec',
diff --git a/src/app/pages/usage-specs/usage-sections/update-usage-spec/update-usage-spec.component.ts b/src/app/pages/usage-specs/usage-sections/update-usage-spec/update-usage-spec.component.ts
index f8211fc6..d6b137ce 100644
--- a/src/app/pages/usage-specs/usage-sections/update-usage-spec/update-usage-spec.component.ts
+++ b/src/app/pages/usage-specs/usage-sections/update-usage-spec/update-usage-spec.component.ts
@@ -8,7 +8,7 @@ import {components} from "src/app/models/product-catalog";
 import {EventMessageService} from "src/app/services/event-message.service";
 import { LocalStorageService } from 'src/app/services/local-storage.service';
 import { LoginInfo } from 'src/app/models/interfaces';
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Component({
   selector: 'update-usage-spec',
diff --git a/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.ts b/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.ts
index c1ef055f..e44fe986 100644
--- a/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.ts
+++ b/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.ts
@@ -7,7 +7,7 @@ import { UsageServiceService } from 'src/app/services/usage-service.service';
 import { LocalStorageService } from 'src/app/services/local-storage.service';
 import { PaginationService } from 'src/app/services/pagination.service';
 import { LoginInfo } from 'src/app/models/interfaces';
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 
 @Component({
diff --git a/src/app/pages/usage-specs/usage-specs.component.ts b/src/app/pages/usage-specs/usage-specs.component.ts
index 49cccad4..33ff599c 100644
--- a/src/app/pages/usage-specs/usage-specs.component.ts
+++ b/src/app/pages/usage-specs/usage-specs.component.ts
@@ -13,7 +13,7 @@ import { Router } from '@angular/router';
 import { phoneNumbers, countries } from 'src/app/models/country.const'
 import { initFlowbite } from 'flowbite';
 import {EventMessageService} from "src/app/services/event-message.service";
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 import {faIdCard, faSort, faSwatchbook} from "@fortawesome/pro-solid-svg-icons";
 import { TranslateModule } from '@ngx-translate/core';
diff --git a/src/app/pages/user-profile/profile-sections/billing-info/billing-info.component.ts b/src/app/pages/user-profile/profile-sections/billing-info/billing-info.component.ts
index 2b9b0cf0..d0463260 100644
--- a/src/app/pages/user-profile/profile-sections/billing-info/billing-info.component.ts
+++ b/src/app/pages/user-profile/profile-sections/billing-info/billing-info.component.ts
@@ -11,7 +11,7 @@ type ProductOffering = components["schemas"]["ProductOffering"];
 import { phoneNumbers, countries } from 'src/app/models/country.const'
 import { initFlowbite } from 'flowbite';
 import {EventMessageService} from "src/app/services/event-message.service";
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
diff --git a/src/app/pages/user-profile/profile-sections/order-info/order-info.component.ts b/src/app/pages/user-profile/profile-sections/order-info/order-info.component.ts
index 4fef62b4..7cce72b4 100644
--- a/src/app/pages/user-profile/profile-sections/order-info/order-info.component.ts
+++ b/src/app/pages/user-profile/profile-sections/order-info/order-info.component.ts
@@ -13,7 +13,7 @@ type ProductOffering = components["schemas"]["ProductOffering"];
 import { phoneNumbers, countries } from 'src/app/models/country.const'
 import { initFlowbite } from 'flowbite';
 import {EventMessageService} from "src/app/services/event-message.service";
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 import {faIdCard, faSort, faSwatchbook} from "@fortawesome/pro-solid-svg-icons";
 import { Subject } from 'rxjs';
diff --git a/src/app/pages/user-profile/profile-sections/org-info/org-info.component.ts b/src/app/pages/user-profile/profile-sections/org-info/org-info.component.ts
index 35a2324f..c3597c7e 100644
--- a/src/app/pages/user-profile/profile-sections/org-info/org-info.component.ts
+++ b/src/app/pages/user-profile/profile-sections/org-info/org-info.component.ts
@@ -7,7 +7,7 @@ import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/fo
 import { phoneNumbers, countries } from 'src/app/models/country.const'
 import {EventMessageService} from "src/app/services/event-message.service";
 import { initFlowbite } from 'flowbite';
-import * as moment from 'moment';
+import moment from 'moment';
 import {components} from "../../../../models/party-catalog";
 import { v4 as uuidv4 } from 'uuid';
 import {getCountries, getCountryCallingCode, CountryCode} from 'libphonenumber-js'
diff --git a/src/app/pages/user-profile/profile-sections/provider-revenue-sharing/provider-revenue-sharing.component.ts b/src/app/pages/user-profile/profile-sections/provider-revenue-sharing/provider-revenue-sharing.component.ts
index e193eb8c..12adbafd 100644
--- a/src/app/pages/user-profile/profile-sections/provider-revenue-sharing/provider-revenue-sharing.component.ts
+++ b/src/app/pages/user-profile/profile-sections/provider-revenue-sharing/provider-revenue-sharing.component.ts
@@ -6,7 +6,7 @@ import {LocalStorageService} from "src/app/services/local-storage.service";
 import { LoginInfo, Report } from 'src/app/models/interfaces';
 import { RevenueSharingService } from 'src/app/services/revenue-sharing.service'
 import { RevenueReportComponent } from 'src/app/shared/revenue-report/revenue-report.component'
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Component({
   selector: 'provider-revenue-sharing',
diff --git a/src/app/pages/user-profile/profile-sections/user-info/user-info.component.ts b/src/app/pages/user-profile/profile-sections/user-info/user-info.component.ts
index 00ef803f..dc9e0a89 100644
--- a/src/app/pages/user-profile/profile-sections/user-info/user-info.component.ts
+++ b/src/app/pages/user-profile/profile-sections/user-info/user-info.component.ts
@@ -7,7 +7,7 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { phoneNumbers, countries } from 'src/app/models/country.const'
 import {EventMessageService} from "src/app/services/event-message.service";
 import { initFlowbite } from 'flowbite';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
diff --git a/src/app/pages/user-profile/user-profile.component.ts b/src/app/pages/user-profile/user-profile.component.ts
index 86b3f163..ab07aa4a 100644
--- a/src/app/pages/user-profile/user-profile.component.ts
+++ b/src/app/pages/user-profile/user-profile.component.ts
@@ -11,7 +11,7 @@ import { Router } from '@angular/router';
 type ProductOffering = components["schemas"]["ProductOffering"];
 import { initFlowbite } from 'flowbite';
 import {EventMessageService} from "../../services/event-message.service";
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 import { lastValueFrom } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
diff --git a/src/app/services/account-service.service.ts b/src/app/services/account-service.service.ts
index 0b20eccd..1365a49b 100644
--- a/src/app/services/account-service.service.ts
+++ b/src/app/services/account-service.service.ts
@@ -6,7 +6,7 @@ import { environment } from 'src/environments/environment';
 import {components} from "../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import {LocalStorageService} from "./local-storage.service";
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/app-init-runtime-config.service.spec.ts b/src/app/services/app-init-runtime-config.service.spec.ts
index 807bfbde..b3c271b3 100644
--- a/src/app/services/app-init-runtime-config.service.spec.ts
+++ b/src/app/services/app-init-runtime-config.service.spec.ts
@@ -61,6 +61,19 @@ describe('AppInitService runtime config', () => {
     expect(environment.googleTagManagerId).toBe('GTM-WPKH4HCS');
   });
 
+  it('loads DSP enabled from the feature flag config', async () => {
+    environment.DSP_ENABLED = true;
+
+    const initPromise = service.init();
+
+    const req = httpMock.expectOne(`${environment.BASE_URL}/config`);
+    req.flush(buildConfig({ dspEnabled: false }));
+
+    await initPromise;
+
+    expect(environment.DSP_ENABLED).toBeFalse();
+  });
+
   function buildConfig(overrides: Record<string, unknown> = {}): Record<string, unknown> {
     return {
       ai: {},
diff --git a/src/app/services/app-init.service.ts b/src/app/services/app-init.service.ts
index b19d167f..7f549714 100644
--- a/src/app/services/app-init.service.ts
+++ b/src/app/services/app-init.service.ts
@@ -1,10 +1,11 @@
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import * as moment from "moment";
+import moment from "moment";
 import { Observer } from "rxjs";
-import { applyRuntimeSearchFiltersConfig } from "src/app/data/availableFilters";
+
 import { applyRuntimeFeaturesConfig } from "src/app/data/featuresConfig";
 import { environment } from "src/environments/environment";
+import { applyRuntimeSearchFiltersConfig } from '../data/availableFilters';
 
 @Injectable({
   providedIn: 'root'
@@ -38,7 +39,7 @@ export class AppInitService {
                 environment.ADMIN_ROLE = config.roles?.admin;
                 environment.ORG_ADMIN_ROLE = config.roles?.orgAdmin;
                 environment.CERTIFIER_ROLE = config.roles?.certifier;
-                environment.quoteApi = config.quoteApi ?? 'http://localhost:8080/quoteManagement';
+                environment.quoteApi = config.quoteApi ?? environment.quoteApi;
                 environment.analyticsEnabled = config.analyticsEnabled ?? false;
                 environment.analytics = this.getAnalyticsUrl(config);
                 environment.feedbackCampaign = config.feedbackCampaign ?? false;
@@ -50,6 +51,8 @@ export class AppInitService {
                 environment.AI_SEARCH_API_KEY = aiConfig.aiApiKey ?? config.aiApiKey ?? '';
                 environment.AI_SEARCH_API_URL = aiConfig.aiApiUrl ?? config.aiApiUrl ?? '';
                 environment.AI_SEARCH_PROFILE = aiConfig.aiSearchProfile ?? config.aiSearchProfile ?? '';
+                environment.DSP_CONTRACT_DEFINITION_SCHEMA = config.dspContractDefinitionSchema || environment.DSP_CONTRACT_DEFINITION_SCHEMA
+                environment.DSP_SCHEMA = config.dspSchema || environment.DSP_SCHEMA
                 applyRuntimeFeaturesConfig(config);
                 applyRuntimeSearchFiltersConfig(config);
                 resolve(config);
diff --git a/src/app/services/attachment-service.service.ts b/src/app/services/attachment-service.service.ts
index 879bc258..f198baf1 100644
--- a/src/app/services/attachment-service.service.ts
+++ b/src/app/services/attachment-service.service.ts
@@ -6,7 +6,7 @@ import { environment } from 'src/environments/environment';
 import {components} from "../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import {LocalStorageService} from "./local-storage.service";
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/invoices-service.ts b/src/app/services/invoices-service.ts
index 63f7c75d..f5b8c83c 100644
--- a/src/app/services/invoices-service.ts
+++ b/src/app/services/invoices-service.ts
@@ -4,7 +4,7 @@ import { lastValueFrom, map } from 'rxjs';
 import { Category, LoginInfo } from '../models/interfaces';
 import { environment } from 'src/environments/environment';
 import {LocalStorageService} from "./local-storage.service";
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/login-service.service.ts b/src/app/services/login-service.service.ts
index a0c6e73c..d8427030 100644
--- a/src/app/services/login-service.service.ts
+++ b/src/app/services/login-service.service.ts
@@ -6,7 +6,7 @@ import { environment } from 'src/environments/environment';
 import {components} from "../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import {LocalStorageService} from "./local-storage.service";
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/pagination.service.ts b/src/app/services/pagination.service.ts
index f7217aba..8d2aaa58 100644
--- a/src/app/services/pagination.service.ts
+++ b/src/app/services/pagination.service.ts
@@ -40,10 +40,10 @@ export class PaginationService {
       if("filters" in options){
         params.push(options.filters)
       }
-      if("partyId" in options){
+      if("partyId" in options && options.partyId != null){
         params.push(options.partyId.toString())
       }
-      if("catalogId" in options){
+      if("catalogId" in options && options.catalogId != null){
         params.push(options.catalogId.toString())
       }
       if("sort" in options){
@@ -623,37 +623,35 @@ export class PaginationService {
   }
 
     async getOffers(inventory: any[]): Promise<any[]> {
-      try {
-        // Process inventory items concurrently
-        const processedInventory = await Promise.all(
-          inventory.map(async (item) => {
-            const offering = await this.api.getProductById(item.productOffering.id);
-            const productSpec = await this.api.getProductSpecification(offering.productSpecification.id);
-            
-            // Attachments
-            const attachments = productSpec?.attachment ?? [];
-    
-            // Construct product object
-            item['product'] = {
-              id: item.id,
-              name: offering.name,
-              category: offering.category,
-              description: offering.description,
-              lastUpdate: offering.lastUpdate,
-              attachment: attachments,
-              productSpecification: offering.productSpecification,
-              productOfferingTerm: offering.productOfferingTerm,
-              version: offering.version
-            };
-            return item;
-          })
-        );
-    
-        return processedInventory;
-      } catch (error) {
-        console.error("Error fetching offers:", error);
-        throw error;
-      }
+      const results = await Promise.allSettled(
+        inventory.map(async (item) => {
+          const offering = await this.api.getProductById(item.productOffering.id);
+          const productSpec = await this.api.getProductSpecification(offering.productSpecification.id);
+
+          item['product'] = {
+            id: item.id,
+            name: offering.name,
+            category: offering.category,
+            description: offering.description,
+            lastUpdate: offering.lastUpdate,
+            attachment: productSpec?.attachment ?? [],
+            productSpecification: offering.productSpecification,
+            productOfferingTerm: offering.productOfferingTerm,
+            version: offering.version
+          };
+          return item;
+        })
+      );
+
+      return results
+        .filter((r): r is PromiseFulfilledResult<any> => {
+          if (r.status === 'rejected') {
+            console.error('Error fetching offer:', r.reason);
+            return false;
+          }
+          return true;
+        })
+        .map(r => r.value);
     }
   
   /*
diff --git a/src/app/services/product-inventory-service.service.ts b/src/app/services/product-inventory-service.service.ts
index 01931fcb..c2371082 100644
--- a/src/app/services/product-inventory-service.service.ts
+++ b/src/app/services/product-inventory-service.service.ts
@@ -6,7 +6,7 @@ import { environment } from 'src/environments/environment';
 import {components} from "../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import {LocalStorageService} from "./local-storage.service";
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/product-order-service.service.ts b/src/app/services/product-order-service.service.ts
index 09181af7..8e4306c7 100644
--- a/src/app/services/product-order-service.service.ts
+++ b/src/app/services/product-order-service.service.ts
@@ -6,7 +6,7 @@ import { environment } from 'src/environments/environment';
 import {components} from "../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import {LocalStorageService} from "./local-storage.service";
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/product-spec-service.service.ts b/src/app/services/product-spec-service.service.ts
index 9634c99a..dbd1bb56 100644
--- a/src/app/services/product-spec-service.service.ts
+++ b/src/app/services/product-spec-service.service.ts
@@ -6,7 +6,7 @@ import { environment } from 'src/environments/environment';
 import {components} from "../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import {LocalStorageService} from "./local-storage.service";
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/refresh-login-service.service.ts b/src/app/services/refresh-login-service.service.ts
index 9e65e8eb..3728e9da 100644
--- a/src/app/services/refresh-login-service.service.ts
+++ b/src/app/services/refresh-login-service.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Observable, Subscription, interval } from 'rxjs';
 import { LoginServiceService } from 'src/app/services/login-service.service';
 import { LoginInfo } from '../models/interfaces';
diff --git a/src/app/services/resource-spec-service.service.ts b/src/app/services/resource-spec-service.service.ts
index 7803ffd7..c3ccd3b2 100644
--- a/src/app/services/resource-spec-service.service.ts
+++ b/src/app/services/resource-spec-service.service.ts
@@ -6,7 +6,7 @@ import { environment } from 'src/environments/environment';
 import {components} from "../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import {LocalStorageService} from "./local-storage.service";
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/revenue-sharing.service.ts b/src/app/services/revenue-sharing.service.ts
index 86f5f03e..9070301b 100644
--- a/src/app/services/revenue-sharing.service.ts
+++ b/src/app/services/revenue-sharing.service.ts
@@ -6,7 +6,7 @@ import { environment } from 'src/environments/environment';
 import {components} from "../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import {LocalStorageService} from "./local-storage.service";
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/service-spec-service.service.ts b/src/app/services/service-spec-service.service.ts
index 3daea58a..1f28af27 100644
--- a/src/app/services/service-spec-service.service.ts
+++ b/src/app/services/service-spec-service.service.ts
@@ -6,7 +6,7 @@ import { environment } from 'src/environments/environment';
 import {components} from "../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import {LocalStorageService} from "./local-storage.service";
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/shopping-cart-service.service.ts b/src/app/services/shopping-cart-service.service.ts
index 041b0682..fd8007ba 100644
--- a/src/app/services/shopping-cart-service.service.ts
+++ b/src/app/services/shopping-cart-service.service.ts
@@ -6,7 +6,7 @@ import { environment } from 'src/environments/environment';
 import {components} from "../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import {LocalStorageService} from "./local-storage.service";
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/services/usage-service.service.ts b/src/app/services/usage-service.service.ts
index 69bb14a2..78d7fb9d 100644
--- a/src/app/services/usage-service.service.ts
+++ b/src/app/services/usage-service.service.ts
@@ -6,7 +6,7 @@ import { environment } from 'src/environments/environment';
 import {components} from "../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import {LocalStorageService} from "./local-storage.service";
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/shared/billing-account-form/billing-account-form.component.ts b/src/app/shared/billing-account-form/billing-account-form.component.ts
index 86b99b10..e1be432a 100644
--- a/src/app/shared/billing-account-form/billing-account-form.component.ts
+++ b/src/app/shared/billing-account-form/billing-account-form.component.ts
@@ -18,7 +18,7 @@ import {components} from "../../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import {phoneNumbers, countries} from '../../models/country.const'
 import {initFlowbite} from 'flowbite';
-import * as moment from 'moment';
+import moment from 'moment';
 import {LoginInfo, billingAccountCart} from 'src/app/models/interfaces';
 import {EventMessageService} from "../../services/event-message.service";
 import {getCountries, getCountryCallingCode, CountryCode} from 'libphonenumber-js'
diff --git a/src/app/shared/card/card.component.ts b/src/app/shared/card/card.component.ts
index fa76e4be..f3b2438f 100644
--- a/src/app/shared/card/card.component.ts
+++ b/src/app/shared/card/card.component.ts
@@ -23,7 +23,7 @@ import { PriceServiceService } from 'src/app/services/price-service.service';
 import { initFlowbite } from 'flowbite';
 import { LoginInfo, cartProduct,productSpecCharacteristicValueCart } from '../../models/interfaces';
 import { ShoppingCartServiceService } from 'src/app/services/shopping-cart-service.service';
-import * as moment from 'moment';
+import moment from 'moment';
 import { certifications } from 'src/app/models/certification-standards.const';
 import { jwtDecode } from "jwt-decode";
 import { environment } from 'src/environments/environment';
diff --git a/src/app/shared/footer/footer.component.ts b/src/app/shared/footer/footer.component.ts
index d1465261..d1419b1b 100644
--- a/src/app/shared/footer/footer.component.ts
+++ b/src/app/shared/footer/footer.component.ts
@@ -5,7 +5,7 @@ import {
   faXTwitter,
   faYoutube,
 } from '@fortawesome/free-brands-svg-icons';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Subject, takeUntil } from 'rxjs';
 import { LoginInfo } from 'src/app/models/interfaces';
 import { LocalStorageService } from 'src/app/services/local-storage.service';
diff --git a/src/app/shared/forms/dynamic-form/build-form-group.util.spec.ts b/src/app/shared/forms/dynamic-form/build-form-group.util.spec.ts
new file mode 100644
index 00000000..86f67e25
--- /dev/null
+++ b/src/app/shared/forms/dynamic-form/build-form-group.util.spec.ts
@@ -0,0 +1,106 @@
+import { Validators } from '@angular/forms';
+import { FormField } from 'src/app/models/formFields/form-field.model';
+import { buildFormGroup } from './build-form-group.util';
+
+describe('buildFormGroup', () => {
+  it('should return an empty FormGroup when given an empty array', () => {
+    const fg = buildFormGroup([]);
+    expect(Object.keys(fg.controls).length).toBe(0);
+  });
+
+  it('should create a string control with empty string default', () => {
+    const fields: FormField[] = [{ name: 'title', label: 'Title', type: 'string' }];
+    const fg = buildFormGroup(fields);
+    expect(fg.contains('title')).toBeTrue();
+    expect(fg.get('title')?.value).toBe('');
+  });
+
+  it('should create a number control with empty string default', () => {
+    const fields: FormField[] = [{ name: 'age', label: 'Age', type: 'number' }];
+    const fg = buildFormGroup(fields);
+    expect(fg.contains('age')).toBeTrue();
+    expect(fg.get('age')?.value).toBe('');
+  });
+
+  it('should create a boolean control with false default', () => {
+    const fields: FormField[] = [{ name: 'active', label: 'Active', type: 'boolean' }];
+    const fg = buildFormGroup(fields);
+    expect(fg.contains('active')).toBeTrue();
+    expect(fg.get('active')?.value).toBeFalse();
+  });
+
+  it('should create a single-select control with empty string default', () => {
+    const fields: FormField[] = [{
+      name: 'status', label: 'Status', type: 'select',
+      options: [{ value: 'a', label: 'A' }]
+    }];
+    const fg = buildFormGroup(fields);
+    expect(fg.get('status')?.value).toBe('');
+  });
+
+  it('should create a multi-select control with empty array default', () => {
+    const fields: FormField[] = [{
+      name: 'tags', label: 'Tags', type: 'select',
+      options: [{ value: 'a', label: 'A' }],
+      multiple: true
+    }];
+    const fg = buildFormGroup(fields);
+    expect(fg.get('tags')?.value).toEqual([]);
+  });
+
+  it('should use the provided defaultValue over the type default', () => {
+    const fields: FormField[] = [
+      { name: 'name', label: 'Name', type: 'string', defaultValue: 'hello' },
+      { name: 'count', label: 'Count', type: 'number', defaultValue: 42 },
+      { name: 'enabled', label: 'Enabled', type: 'boolean', defaultValue: true }
+    ];
+    const fg = buildFormGroup(fields);
+    expect(fg.get('name')?.value).toBe('hello');
+    expect(fg.get('count')?.value).toBe(42);
+    expect(fg.get('enabled')?.value).toBeTrue();
+  });
+
+  it('should add Validators.required when required is true', () => {
+    const fields: FormField[] = [{ name: 'name', label: 'Name', type: 'string', required: true }];
+    const fg = buildFormGroup(fields);
+    fg.get('name')?.setValue('');
+    expect(fg.get('name')?.hasError('required')).toBeTrue();
+  });
+
+  it('should not add Validators.required when required is false', () => {
+    const fields: FormField[] = [{ name: 'name', label: 'Name', type: 'string', required: false }];
+    const fg = buildFormGroup(fields);
+    fg.get('name')?.setValue('');
+    expect(fg.get('name')?.hasError('required')).toBeFalse();
+  });
+
+  it('should not add Validators.required when required is not set', () => {
+    const fields: FormField[] = [{ name: 'name', label: 'Name', type: 'string' }];
+    const fg = buildFormGroup(fields);
+    fg.get('name')?.setValue('');
+    expect(fg.get('name')?.hasError('required')).toBeFalse();
+  });
+
+  it('should create controls for all fields in the array', () => {
+    const fields: FormField[] = [
+      { name: 'f1', label: 'F1', type: 'string' },
+      { name: 'f2', label: 'F2', type: 'number' },
+      { name: 'f3', label: 'F3', type: 'boolean' }
+    ];
+    const fg = buildFormGroup(fields);
+    expect(Object.keys(fg.controls)).toEqual(['f1', 'f2', 'f3']);
+  });
+
+  it('should return a valid FormGroup when all required fields are filled', () => {
+    const fields: FormField[] = [{ name: 'name', label: 'Name', type: 'string', required: true }];
+    const fg = buildFormGroup(fields);
+    fg.get('name')?.setValue('value');
+    expect(fg.valid).toBeTrue();
+  });
+
+  it('should return an invalid FormGroup when a required field is empty', () => {
+    const fields: FormField[] = [{ name: 'name', label: 'Name', type: 'string', required: true }];
+    const fg = buildFormGroup(fields);
+    expect(fg.valid).toBeFalse();
+  });
+});
diff --git a/src/app/shared/forms/dynamic-form/build-form-group.util.ts b/src/app/shared/forms/dynamic-form/build-form-group.util.ts
new file mode 100644
index 00000000..8c604dcd
--- /dev/null
+++ b/src/app/shared/forms/dynamic-form/build-form-group.util.ts
@@ -0,0 +1,15 @@
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormField, SelectableFormField } from 'src/app/models/formFields/form-field.model';
+
+export function buildFormGroup(fields: FormField[]): FormGroup {
+  const controls: Record<string, FormControl> = {};
+  for (const field of fields) {
+    const isMultiSelect = field.type === 'select' && (field as SelectableFormField).multiple === true;
+    const defaultValue = field.defaultValue ?? (isMultiSelect ? [] : field.type === 'boolean' ? false : '');
+    controls[field.name] = new FormControl(
+      defaultValue,
+      field.required ? Validators.required : []
+    );
+  }
+  return new FormGroup(controls);
+}
diff --git a/src/app/shared/forms/dynamic-form/dynamic-form.component.html b/src/app/shared/forms/dynamic-form/dynamic-form.component.html
new file mode 100644
index 00000000..c42a2e2f
--- /dev/null
+++ b/src/app/shared/forms/dynamic-form/dynamic-form.component.html
@@ -0,0 +1,48 @@
+<div [formGroup]="formGroup" class="grid gap-4" [ngClass]="gridColsClass()">
+  @for (field of fields; track field.name) {
+  <div [ngClass]="colSpanClass(field)">
+    <label [for]="field.name" class="font-bold text-lg dark:text-white">
+      {{ field.label | translate }}
+      @if (field.required) { <span class="text-red-500">*</span> }
+    </label>
+
+    @if (field.type === 'string') {
+    <input [id]="field.name" [formControlName]="field.name" type="text" [placeholder]="$any(field).placeholder ?? ''"
+      [maxLength]="$any(field).maxLength ?? 524288"
+      class="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" />
+    }
+
+    @if (field.type === 'number') {
+    <input [id]="field.name" [formControlName]="field.name" type="number" [min]="$any(field).min ?? null"
+      [max]="$any(field).max ?? null" [step]="$any(field).step ?? 1"
+      class="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" />
+    }
+
+    @if (field.type === 'boolean') {
+    <select [id]="field.name" [formControlName]="field.name"
+      class="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">{{ '_no' | translate }}</option>
+      <option [value]="true">{{ '_yes' | translate }}</option>
+    </select>
+    }
+
+    @if (field.type === 'select') {
+    @if (asSelectable(field).multiple) {
+    <select [id]="field.name" [formControlName]="field.name" multiple
+      class="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">
+      @for (opt of asSelectable(field).options; track opt.value) {
+      <option [value]="opt.value">{{ opt.label | translate }}</option>
+      }
+    </select>
+    } @else {
+    <select [id]="field.name" [formControlName]="field.name"
+      class="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">
+      @for (opt of asSelectable(field).options; track opt.value) {
+      <option [value]="opt.value">{{ opt.label | translate }}</option>
+      }
+    </select>
+    }
+    }
+  </div>
+  }
+</div>
diff --git a/src/app/shared/forms/dynamic-form/dynamic-form.component.spec.ts b/src/app/shared/forms/dynamic-form/dynamic-form.component.spec.ts
new file mode 100644
index 00000000..c7e20a67
--- /dev/null
+++ b/src/app/shared/forms/dynamic-form/dynamic-form.component.spec.ts
@@ -0,0 +1,180 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { FormField } from 'src/app/models/formFields/form-field.model';
+import { DynamicFormComponent } from './dynamic-form.component';
+
+describe('DynamicFormComponent', () => {
+  let component: DynamicFormComponent;
+  let fixture: ComponentFixture<DynamicFormComponent>;
+
+  function buildForm(fields: FormField[]): FormGroup {
+    const controls: Record<string, FormControl> = {};
+    for (const f of fields) controls[f.name] = new FormControl('');
+    return new FormGroup(controls);
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DynamicFormComponent, TranslateModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DynamicFormComponent);
+    component = fixture.componentInstance;
+    component.fields = [];
+    component.formGroup = new FormGroup({});
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  // --- gridColsClass ---
+
+  it('gridColsClass should return grid-cols-1 by default', () => {
+    expect(component.gridColsClass()).toBe('grid-cols-1');
+  });
+
+  it('gridColsClass should return the correct class for given columns', () => {
+    component.columns = 3;
+    expect(component.gridColsClass()).toBe('grid-cols-3');
+  });
+
+  // --- colSpanClass ---
+
+  it('colSpanClass should use field.colSpan when provided', () => {
+    component.columns = 4;
+    const field: FormField = { name: 'f', label: 'F', type: 'string', colSpan: 2 };
+    expect(component.colSpanClass(field)).toBe('col-span-2');
+  });
+
+  it('colSpanClass should default to this.columns when field.colSpan is not set', () => {
+    component.columns = 3;
+    const field: FormField = { name: 'f', label: 'F', type: 'string' };
+    expect(component.colSpanClass(field)).toBe('col-span-3');
+  });
+
+  it('colSpanClass should clamp to this.columns when field.colSpan exceeds it', () => {
+    component.columns = 2;
+    const field: FormField = { name: 'f', label: 'F', type: 'string', colSpan: 10 };
+    expect(component.colSpanClass(field)).toBe('col-span-2');
+  });
+
+  it('colSpanClass should default to col-span-1 when columns is 1', () => {
+    component.columns = 1;
+    const field: FormField = { name: 'f', label: 'F', type: 'string', colSpan: 5 };
+    expect(component.colSpanClass(field)).toBe('col-span-1');
+  });
+
+  // --- asSelectable ---
+
+  it('asSelectable should cast field to SelectableFormField', () => {
+    const field: FormField = {
+      name: 'color', label: 'Color', type: 'select',
+      options: [{ value: 'red', label: 'Red' }]
+    };
+    const selectable = component.asSelectable(field);
+    expect(selectable.options[0].value).toBe('red');
+  });
+
+  // --- template rendering ---
+
+  it('should render a text input for string fields', () => {
+    const fields: FormField[] = [{ name: 'title', label: 'Title', type: 'string' }];
+    component.fields = fields;
+    component.formGroup = buildForm(fields);
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector('input[type="text"]');
+    expect(input).toBeTruthy();
+    expect(input.id).toBe('title');
+  });
+
+  it('should bind maxLength and placeholder on string input', () => {
+    const fields: FormField[] = [{ name: 'bio', label: 'Bio', type: 'string', maxLength: 200, placeholder: 'Enter bio' }];
+    component.fields = fields;
+    component.formGroup = buildForm(fields);
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector('input[type="text"]');
+    expect(input.maxLength).toBe(200);
+    expect(input.placeholder).toBe('Enter bio');
+  });
+
+  it('should render a number input for number fields', () => {
+    const fields: FormField[] = [{ name: 'age', label: 'Age', type: 'number', min: 0, max: 120, step: 1 }];
+    component.fields = fields;
+    component.formGroup = buildForm(fields);
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector('input[type="number"]');
+    expect(input).toBeTruthy();
+    expect(input.id).toBe('age');
+  });
+
+  it('should render a select for boolean fields', () => {
+    const fields: FormField[] = [{ name: 'active', label: 'Active', type: 'boolean' }];
+    component.fields = fields;
+    component.formGroup = buildForm(fields);
+    fixture.detectChanges();
+    const selects = fixture.nativeElement.querySelectorAll('select');
+    expect(selects.length).toBe(1);
+    expect(selects[0].id).toBe('active');
+  });
+
+  it('should render a single select for select fields without multiple', () => {
+    const fields: FormField[] = [{
+      name: 'status', label: 'Status', type: 'select',
+      options: [{ value: 'a', label: 'Option A' }, { value: 'b', label: 'Option B' }]
+    }];
+    component.fields = fields;
+    component.formGroup = buildForm(fields);
+    fixture.detectChanges();
+    const select = fixture.nativeElement.querySelector('select#status');
+    expect(select).toBeTruthy();
+    expect(select.multiple).toBeFalse();
+    expect(select.options.length).toBe(2);
+  });
+
+  it('should render a multiple select for select fields with multiple=true', () => {
+    const fields: FormField[] = [{
+      name: 'tags', label: 'Tags', type: 'select',
+      options: [{ value: 'x', label: 'X' }, { value: 'y', label: 'Y' }],
+      multiple: true
+    }];
+    component.fields = fields;
+    component.formGroup = new FormGroup({ tags: new FormControl([]) });
+    fixture.detectChanges();
+    const select = fixture.nativeElement.querySelector('select#tags');
+    expect(select).toBeTruthy();
+    expect(select.multiple).toBeTrue();
+  });
+
+  it('should show the required asterisk when field.required is true', () => {
+    const fields: FormField[] = [{ name: 'name', label: 'Name', type: 'string', required: true }];
+    component.fields = fields;
+    component.formGroup = buildForm(fields);
+    fixture.detectChanges();
+    const asterisk = fixture.nativeElement.querySelector('span.text-red-500');
+    expect(asterisk).toBeTruthy();
+  });
+
+  it('should not show the required asterisk when field.required is false', () => {
+    const fields: FormField[] = [{ name: 'name', label: 'Name', type: 'string', required: false }];
+    component.fields = fields;
+    component.formGroup = buildForm(fields);
+    fixture.detectChanges();
+    const asterisk = fixture.nativeElement.querySelector('span.text-red-500');
+    expect(asterisk).toBeNull();
+  });
+
+  it('should render one block per field', () => {
+    const fields: FormField[] = [
+      { name: 'f1', label: 'F1', type: 'string' },
+      { name: 'f2', label: 'F2', type: 'number' },
+      { name: 'f3', label: 'F3', type: 'boolean' }
+    ];
+    component.fields = fields;
+    component.formGroup = buildForm(fields);
+    fixture.detectChanges();
+    const labels = fixture.nativeElement.querySelectorAll('label[for]');
+    expect(labels.length).toBe(3);
+  });
+});
diff --git a/src/app/shared/forms/dynamic-form/dynamic-form.component.ts b/src/app/shared/forms/dynamic-form/dynamic-form.component.ts
new file mode 100644
index 00000000..e06790fa
--- /dev/null
+++ b/src/app/shared/forms/dynamic-form/dynamic-form.component.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { FormField, SelectableFormField } from 'src/app/models/formFields/form-field.model';
+
+@Component({
+  selector: 'app-dynamic-form',
+  templateUrl: './dynamic-form.component.html',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, TranslateModule],
+})
+export class DynamicFormComponent {
+  @Input() fields: FormField[] = [];
+  @Input() formGroup!: FormGroup;
+  @Input() columns: number = 1;
+
+  gridColsClass(): string {
+    return `grid-cols-${this.columns}`;
+  }
+
+  colSpanClass(field: FormField): string {
+    const span = field.colSpan ?? this.columns ?? 1;
+    return `col-span-${Math.min(span, this.columns)}`;
+  }
+
+  asSelectable(field: FormField): SelectableFormField {
+    return field as SelectableFormField;
+  }
+}
diff --git a/src/app/shared/forms/offer/catalogue/catalogue.component.html b/src/app/shared/forms/offer/catalogue/catalogue.component.html
index c571bfbc..a0599cf2 100644
--- a/src/app/shared/forms/offer/catalogue/catalogue.component.html
+++ b/src/app/shared/forms/offer/catalogue/catalogue.component.html
@@ -89,7 +89,7 @@
         </div>
         }
     } @else {
-        <div role="status" class="w-full h-full flex justify-center align-middle mt-2">
+        <div role="status" data-cy="loadMoreLoading" class="w-full h-full flex justify-center align-middle mt-2">
         <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
             <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
diff --git a/src/app/shared/forms/offer/catalogue/catalogue.component.ts b/src/app/shared/forms/offer/catalogue/catalogue.component.ts
index 18172f81..6355eb3b 100644
--- a/src/app/shared/forms/offer/catalogue/catalogue.component.ts
+++ b/src/app/shared/forms/offer/catalogue/catalogue.component.ts
@@ -78,25 +78,28 @@ export class CatalogueComponent implements ControlValueAccessor, OnInit, AfterVi
     if(next==false){
       this.loadingCatalog=true;
     }
-    
+
     let options = {
       "keywords": undefined,
       "filters": ['Active','Launched'],
       "partyId": this.partyId
     }
 
-    this.paginationService.getItemsPaginated(this.catalogPage, this.CATALOG_LIMIT, next, this.catalogs,this.nextCatalogs, options,
-      this.api.getCatalogsByUser.bind(this.api)).then(data => {
-      this.catalogPageCheck=data.page_check;      
+    try {
+      const data = await this.paginationService.getItemsPaginated(this.catalogPage, this.CATALOG_LIMIT, next, this.catalogs,this.nextCatalogs, options,
+        this.api.getCatalogsByUser.bind(this.api));
+      this.catalogPageCheck=data.page_check;
       this.catalogs=data.items;
       this.nextCatalogs=data.nextItems;
       this.catalogPage=data.page;
+    } finally {
       this.loadingCatalog=false;
       this.loadingCatalog_more=false;
-    })
+    }
   }
 
   async nextCatalog(){
+    this.loadingCatalog_more=true;
     await this.getSellerCatalogs(true);
   }
 
diff --git a/src/app/shared/forms/offer/custom-offer/custom-offer.component.ts b/src/app/shared/forms/offer/custom-offer/custom-offer.component.ts
index acee9bbc..5c44a261 100644
--- a/src/app/shared/forms/offer/custom-offer/custom-offer.component.ts
+++ b/src/app/shared/forms/offer/custom-offer/custom-offer.component.ts
@@ -13,7 +13,7 @@ import {components} from "src/app/models/product-catalog";
 import {EventMessageService} from "src/app/services/event-message.service";
 import {FormChangeState, PricePlanChangeState} from "../../../../models/interfaces";
 import {Subscription} from "rxjs";
-import * as moment from 'moment';
+import moment from 'moment';
 import { environment } from 'src/environments/environment';
 import { QuoteService } from 'src/app/features/quotes/services/quote.service';
 
diff --git a/src/app/shared/forms/offer/edc-contract-definition/edc-contract-definition.component.css b/src/app/shared/forms/offer/edc-contract-definition/edc-contract-definition.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/shared/forms/offer/edc-contract-definition/edc-contract-definition.component.html b/src/app/shared/forms/offer/edc-contract-definition/edc-contract-definition.component.html
new file mode 100644
index 00000000..24475a8e
--- /dev/null
+++ b/src/app/shared/forms/offer/edc-contract-definition/edc-contract-definition.component.html
@@ -0,0 +1,43 @@
+<!--@if (treatmentControl) {
+  <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'CREATE_OFFER._treatment' | translate }}</label>
+  <input data-cy="treatment" id="prod-name" type="text" [formControl]="treatmentControl" maxLength="100"
+         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 class="col-span-2 flex items-center h-fit">
+  <label for="dsp-compatible" class="font-bold text-lg dark:text-white">DSP Compatible</label>
+  <label class="inline-flex items-center me-5 cursor-pointer ml-4">
+    <input type="checkbox" id="dsp-compatible" [formControl]="dspCompatibleControl" 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(dspCompatible) {
+@if (accessControl) {
+<label class="font-bold text-lg col-span-2 dark:text-white">{{ 'Access Policy' | translate }}</label>
+<textarea data-cy="dspAccessPolicy" [formControl]="accessControl" rows="10"
+  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 font-mono"
+  [class.border-red-500]="accessControl.invalid && accessControl.touched"
+  placeholder='{"example": "Enter your JSON here"}'></textarea>
+@if (accessControl.hasError('invalidJson') && accessControl.touched) {
+<p class="mt-1 text-sm text-red-500">{{ 'Invalid JSON' | translate }}</p>
+}
+}
+@if (contractControl) {
+<label class="font-bold text-lg col-span-2 dark:text-white">{{ 'Contract Policy' | translate }}</label>
+<textarea data-cy="dspContractPolicy" [formControl]="contractControl" rows="10"
+  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 font-mono"
+  [class.border-red-500]="contractControl.invalid && contractControl.touched"
+  placeholder='{"example": "Enter your JSON here"}'></textarea>
+@if (contractControl.hasError('invalidJson') && contractControl.touched) {
+<p class="mt-1 text-sm text-red-500">{{ 'Invalid JSON' | translate }}</p>
+}
+}
+
+@if (formGroup.hasError('policiesRequired') && (accessControl?.touched || contractControl?.touched)) {
+<p class="mt-1 text-sm text-red-500">{{ 'Both Access Policy and Contract Policy are required if either is filled' |
+  translate }}</p>
+}
+
+}
diff --git a/src/app/shared/forms/offer/edc-contract-definition/edc-contract-definition.component.spec.ts b/src/app/shared/forms/offer/edc-contract-definition/edc-contract-definition.component.spec.ts
new file mode 100644
index 00000000..cdbf8748
--- /dev/null
+++ b/src/app/shared/forms/offer/edc-contract-definition/edc-contract-definition.component.spec.ts
@@ -0,0 +1,347 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { Subject } from 'rxjs';
+import { EventMessageService } from 'src/app/services/event-message.service';
+import { EdcContractDefinitionComponent } from './edc-contract-definition.component';
+
+describe('EdcContractDefinitionComponent', () => {
+  let component: EdcContractDefinitionComponent;
+  let fixture: ComponentFixture<EdcContractDefinitionComponent>;
+  let messagesSubject: Subject<any>;
+  let eventMessageSpy: jasmine.SpyObj<EventMessageService>;
+
+  function createForm(): FormGroup {
+    return new FormGroup({});
+  }
+
+  beforeEach(async () => {
+    messagesSubject = new Subject<any>();
+    eventMessageSpy = jasmine.createSpyObj<EventMessageService>(
+      'EventMessageService',
+      ['emitSellerProductSpec'],
+      { messages$: messagesSubject.asObservable() }
+    );
+
+    await TestBed.configureTestingModule({
+      schemas: [NO_ERRORS_SCHEMA],
+      imports: [EdcContractDefinitionComponent, ReactiveFormsModule, TranslateModule.forRoot()],
+      providers: [{ provide: EventMessageService, useValue: eventMessageSpy }]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EdcContractDefinitionComponent);
+    component = fixture.componentInstance;
+    component.form = createForm();
+    component.formType = 'create';
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  // --- ngOnInit: create mode, no data ---
+
+  it('ngOnInit should add dspCompatible=false, accessPolicy and contractPolicy controls in create mode', () => {
+    fixture.detectChanges();
+    expect(component.formGroup.contains('dspCompatible')).toBeTrue();
+    expect(component.formGroup.contains('accessPolicy')).toBeTrue();
+    expect(component.formGroup.contains('contractPolicy')).toBeTrue();
+    expect(component.dspCompatible).toBeFalse();
+  });
+
+  it('ngOnInit should not re-add controls if already initialized', () => {
+    fixture.detectChanges();
+    const spy = spyOn(component.formGroup, 'addControl').and.callThrough();
+    component.ngOnInit();
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  // --- ngOnInit: update mode with contractDefinition data ---
+
+  it('ngOnInit should add controls with existing data in update mode', () => {
+    component.formType = 'update';
+    component.data = {
+      productOfferingTerm: [{
+        name: 'edc:contractDefinition',
+        accessPolicy: { '@type': 'Policy' },
+        contractPolicy: { '@type': 'Policy' }
+      }]
+    };
+    fixture.detectChanges();
+    expect(component.dspCompatible).toBeTrue();
+    expect(component.accessControl?.value).toContain('"@type"');
+    expect(component.contractControl?.value).toContain('"@type"');
+  });
+
+  it('ngOnInit should add controls without data in update mode (no contractDefinition term)', () => {
+    component.formType = 'update';
+    component.data = { productOfferingTerm: [] };
+    fixture.detectChanges();
+    expect(component.dspCompatible).toBeFalse();
+  });
+
+  // --- getters ---
+
+  it('formGroup getter should return the form as FormGroup', () => {
+    fixture.detectChanges();
+    expect(component.formGroup).toBe(component.form as FormGroup);
+  });
+
+  it('dspCompatible getter should reflect dspCompatible control value', () => {
+    fixture.detectChanges();
+    component.dspCompatibleControl.setValue(true);
+    expect(component.dspCompatible).toBeTrue();
+    component.dspCompatibleControl.setValue(false);
+    expect(component.dspCompatible).toBeFalse();
+  });
+
+  it('accessControl getter should return the accessPolicy FormControl', () => {
+    fixture.detectChanges();
+    expect(component.accessControl).toBeTruthy();
+    expect(component.accessControl).toBe(component.formGroup.get('accessPolicy') as any);
+  });
+
+  it('contractControl getter should return the contractPolicy FormControl', () => {
+    fixture.detectChanges();
+    expect(component.contractControl).toBeTruthy();
+    expect(component.contractControl).toBe(component.formGroup.get('contractPolicy') as any);
+  });
+
+  // --- updatePolicyValidators via dspCompatibleControl.valueChanges ---
+
+  it('enabling dspCompatible should add required validator to policy controls', () => {
+    fixture.detectChanges();
+    component.dspCompatibleControl.setValue(true);
+    component.accessControl?.setValue('');
+    component.accessControl?.markAsTouched();
+    expect(component.accessControl?.hasError('required')).toBeTrue();
+    component.contractControl?.setValue('');
+    component.contractControl?.markAsTouched();
+    expect(component.contractControl?.hasError('required')).toBeTrue();
+  });
+
+  it('disabling dspCompatible should remove required validator and reset policy controls', () => {
+    fixture.detectChanges();
+    component.dspCompatibleControl.setValue(true);
+    component.accessControl?.setValue('{"a":1}');
+    component.contractControl?.setValue('{"b":2}');
+
+    component.dspCompatibleControl.setValue(false);
+
+    expect(component.accessControl?.hasError('required')).toBeFalse();
+    expect(component.accessControl?.value).toBe('');
+    expect(component.contractControl?.value).toBe('');
+  });
+
+  it('should mark invalid when policy controls contain invalid JSON', () => {
+    fixture.detectChanges();
+    component.dspCompatibleControl.setValue(true);
+    component.accessControl?.setValue('not json');
+    component.accessControl?.markAsTouched();
+    expect(component.accessControl?.hasError('invalidJson')).toBeTrue();
+  });
+
+  it('should mark valid when policy controls contain valid JSON', () => {
+    fixture.detectChanges();
+    component.dspCompatibleControl.setValue(true);
+    component.accessControl?.setValue('{"valid": true}');
+    component.contractControl?.setValue('{"valid": true}');
+    expect(component.accessControl?.valid).toBeTrue();
+    expect(component.contractControl?.valid).toBeTrue();
+  });
+
+  it('enabling dspCompatible sets originalValue when none existed', () => {
+    fixture.detectChanges();
+    component.dspCompatibleControl.setValue(true);
+    expect((component as any).originalValue).not.toBeNull();
+  });
+
+  // --- edit mode: formGroup.valueChanges sets hasBeenModified ---
+
+  it('should mark hasBeenModified when form changes in update mode', () => {
+    component.formType = 'update';
+    fixture.detectChanges();
+    expect((component as any).hasBeenModified).toBeFalse();
+    component.accessControl?.setValue('{}');
+    expect((component as any).hasBeenModified).toBeTrue();
+  });
+
+  it('should not mark hasBeenModified in create mode', () => {
+    fixture.detectChanges();
+    component.accessControl?.setValue('{}');
+    expect((component as any).hasBeenModified).toBeFalse();
+  });
+
+  // --- UpdateOffer event ---
+
+  it('UpdateOffer event should emit formChange when in edit mode with dirty fields', () => {
+    component.formType = 'update';
+    component.data = {
+      productOfferingTerm: [{
+        name: 'edc:contractDefinition',
+        accessPolicy: { '@type': 'Policy' },
+        contractPolicy: { '@type': 'OldPolicy' }
+      }]
+    };
+    fixture.detectChanges();
+
+    const emitSpy = spyOn(component.formChange, 'emit');
+    component.accessControl?.setValue('{"@type":"NewPolicy"}');
+
+    messagesSubject.next({ type: 'UpdateOffer' });
+
+    expect(emitSpy).toHaveBeenCalledWith(jasmine.objectContaining({
+      subformType: 'contractDefinition',
+      isDirty: true,
+      dirtyFields: jasmine.arrayContaining(['accessPolicy'])
+    }));
+  });
+
+  it('UpdateOffer event should not emit formChange when nothing changed', () => {
+    component.formType = 'update';
+    component.data = {
+      productOfferingTerm: [{
+        name: 'edc:contractDefinition',
+        accessPolicy: {},
+        contractPolicy: {}
+      }]
+    };
+    fixture.detectChanges();
+    const emitSpy = spyOn(component.formChange, 'emit');
+
+    messagesSubject.next({ type: 'UpdateOffer' });
+    expect(emitSpy).not.toHaveBeenCalled();
+  });
+
+  it('UpdateOffer event should not emit in create mode', () => {
+    fixture.detectChanges();
+    const emitSpy = spyOn(component.formChange, 'emit');
+    messagesSubject.next({ type: 'UpdateOffer' });
+    expect(emitSpy).not.toHaveBeenCalled();
+  });
+
+  it('other event types should not trigger formChange', () => {
+    component.formType = 'update';
+    component.data = {
+      productOfferingTerm: [{
+        name: 'edc:contractDefinition',
+        accessPolicy: {},
+        contractPolicy: {}
+      }]
+    };
+    fixture.detectChanges();
+    component.accessControl?.setValue('{"changed":true}');
+    const emitSpy = spyOn(component.formChange, 'emit');
+
+    messagesSubject.next({ type: 'SomethingElse' });
+    expect(emitSpy).not.toHaveBeenCalled();
+  });
+
+  // --- ngOnDestroy ---
+
+  it('ngOnDestroy should emit formChange when in edit mode with dirty fields', () => {
+    component.formType = 'update';
+    component.data = {
+      productOfferingTerm: [{
+        name: 'edc:contractDefinition',
+        accessPolicy: {},
+        contractPolicy: {}
+      }]
+    };
+    fixture.detectChanges();
+    const emitSpy = spyOn(component.formChange, 'emit');
+    component.accessControl?.setValue('{"changed":true}');
+
+    component.ngOnDestroy();
+
+    expect(emitSpy).toHaveBeenCalledWith(jasmine.objectContaining({
+      subformType: 'contractDefinition',
+      isDirty: true
+    }));
+  });
+
+  it('ngOnDestroy should not emit when in create mode', () => {
+    fixture.detectChanges();
+    const emitSpy = spyOn(component.formChange, 'emit');
+    component.ngOnDestroy();
+    expect(emitSpy).not.toHaveBeenCalled();
+  });
+
+  it('ngOnDestroy should not emit when form was not modified', () => {
+    component.formType = 'update';
+    component.data = {
+      productOfferingTerm: [{
+        name: 'edc:contractDefinition',
+        accessPolicy: {},
+        contractPolicy: {}
+      }]
+    };
+    fixture.detectChanges();
+    const emitSpy = spyOn(component.formChange, 'emit');
+    component.ngOnDestroy();
+    expect(emitSpy).not.toHaveBeenCalled();
+  });
+
+  it('ngOnDestroy should not emit when dirty fields are empty', () => {
+    // Update mode with no pre-existing contractDefinition so originalValue starts as null.
+    // Enabling dspCompatible sets originalValue with empty strings; keeping policies empty
+    // means getDirtyFields returns []. Even though form was modified, no fields differ.
+    component.formType = 'update';
+    component.data = { productOfferingTerm: [] };
+    fixture.detectChanges();
+
+    // Enabling dspCompatible sets originalValue = {accessPolicy:'', contractPolicy:'', ...}
+    // and also triggers hasBeenModified=true via formGroup.valueChanges
+    component.dspCompatibleControl.setValue(true);
+
+    // Keep policies as empty strings (identical to originalValue)
+    component.accessControl?.setValue('');
+    component.contractControl?.setValue('');
+
+    const emitSpy = spyOn(component.formChange, 'emit');
+    component.ngOnDestroy();
+    expect(emitSpy).not.toHaveBeenCalled();
+  });
+
+  it('ngOnDestroy should complete the destroy$ subject', () => {
+    fixture.detectChanges();
+    const completeSpy = spyOn((component as any).destroy$, 'complete').and.callThrough();
+    component.ngOnDestroy();
+    expect(completeSpy).toHaveBeenCalled();
+  });
+
+  it('should stop reacting to UpdateOffer events after ngOnDestroy', () => {
+    component.formType = 'update';
+    component.data = {
+      productOfferingTerm: [{
+        name: 'edc:contractDefinition',
+        accessPolicy: {},
+        contractPolicy: {}
+      }]
+    };
+    fixture.detectChanges();
+    component.accessControl?.setValue('{"changed":true}');
+    component.ngOnDestroy();
+    const emitSpy = spyOn(component.formChange, 'emit');
+    messagesSubject.next({ type: 'UpdateOffer' });
+    expect(emitSpy).not.toHaveBeenCalled();
+  });
+
+  // --- jsonToString (private via side effect) ---
+
+  it('should handle non-stringifiable data gracefully by returning empty string', () => {
+    component.formType = 'update';
+    const circular: any = {};
+    circular.self = circular;
+    component.data = {
+      productOfferingTerm: [{
+        name: 'edc:contractDefinition',
+        accessPolicy: circular,
+        contractPolicy: {}
+      }]
+    };
+    fixture.detectChanges();
+    expect(component.accessControl?.value).toBe('');
+  });
+});
diff --git a/src/app/shared/forms/offer/edc-contract-definition/edc-contract-definition.component.ts b/src/app/shared/forms/offer/edc-contract-definition/edc-contract-definition.component.ts
new file mode 100644
index 00000000..6ae18601
--- /dev/null
+++ b/src/app/shared/forms/offer/edc-contract-definition/edc-contract-definition.component.ts
@@ -0,0 +1,200 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { Subject } from "rxjs";
+import { takeUntil } from 'rxjs/operators';
+import { EventMessageService } from "src/app/services/event-message.service";
+import { jsonValidator } from "src/app/validators/validators";
+import { FormChangeState } from "../../../../models/interfaces";
+
+interface EdcContractDefinition {
+  name: 'edc:contractDefinition';
+  accessPolicy: string;
+  contractPolicy: string;
+  dspCompatible: boolean
+}
+
+@Component({
+  selector: 'app-edc-contract-definition-form',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    TranslateModule
+  ],
+  templateUrl: './edc-contract-definition.component.html',
+  styleUrl: './edc-contract-definition.component.css'
+})
+export class EdcContractDefinitionComponent implements OnInit, OnDestroy {
+  @Input() form!: AbstractControl;
+  @Input() formType!: string;
+  @Input() data: any;
+  @Output() formChange = new EventEmitter<FormChangeState>();
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private eventMessage: EventMessageService) {
+    this.eventMessage.messages$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(ev => {
+        if (ev.type === 'UpdateOffer') {
+          if (this.isEditMode && this.hasBeenModified && this.originalValue) {
+            const currentValue: EdcContractDefinition = {
+              name: 'edc:contractDefinition',
+              accessPolicy: this.accessControl?.value || '',
+              contractPolicy: this.contractControl?.value || '',
+              dspCompatible: this.dspCompatible,
+            };
+
+            const dirtyFields = this.getDirtyFields(currentValue);
+
+            if (dirtyFields.length > 0) {
+              this.formChange.emit({
+                subformType: 'contractDefinition',
+                isDirty: true,
+                dirtyFields,
+                originalValue: this.originalValue,
+                currentValue
+              });
+            }
+          }
+        }
+      })
+  }
+
+  private originalValue: EdcContractDefinition | null = null;
+  private hasBeenModified: boolean = false;
+  private isEditMode: boolean = false;
+
+  get formGroup(): FormGroup {
+    return this.form as FormGroup;
+  }
+
+  get dspCompatible(): boolean {
+    return !!this.formGroup.get('dspCompatible')?.value;
+  }
+
+  get dspCompatibleControl(): FormControl {
+    return this.formGroup.get('dspCompatible') as FormControl;
+  }
+
+  get accessControl(): FormControl | null {
+    const control = this.formGroup.get('accessPolicy');
+    return control instanceof FormControl ? control : null;
+  }
+
+  get contractControl(): FormControl | null {
+    const control = this.formGroup.get('contractPolicy');
+    return control instanceof FormControl ? control : null;
+  }
+
+  private updatePolicyValidators(checked: boolean): void {
+    const validators = checked ? [Validators.required, jsonValidator] : [jsonValidator];
+    this.accessControl?.setValidators(validators);
+    this.accessControl?.updateValueAndValidity({ emitEvent: false });
+    this.contractControl?.setValidators(validators);
+    this.contractControl?.updateValueAndValidity({ emitEvent: false });
+    if (!checked) {
+      this.accessControl?.reset('', { emitEvent: false });
+      this.contractControl?.reset('', { emitEvent: false });
+    }
+  }
+
+  ngOnInit() {
+    this.isEditMode = this.formType === 'update';
+    const alreadyInitialized = this.formGroup.contains('accessPolicy');
+
+    if (!alreadyInitialized) {
+      let contractDefinition = null;
+      if (this.isEditMode && this.data?.productOfferingTerm && Array.isArray(this.data.productOfferingTerm)) {
+        contractDefinition = this.data.productOfferingTerm.find((el: { name: any }) => el.name === 'edc:contractDefinition');
+      }
+
+      if (contractDefinition) {
+        this.formGroup.addControl('dspCompatible', new FormControl(true));
+        this.formGroup.addControl('name', new FormControl<string>('edc:contractDefinition'));
+        this.formGroup.addControl('accessPolicy', new FormControl<string>(this.jsonToString(contractDefinition.accessPolicy), [Validators.required, jsonValidator]));
+        this.formGroup.addControl('contractPolicy', new FormControl<string>(this.jsonToString(contractDefinition.contractPolicy), [Validators.required, jsonValidator]));
+        this.originalValue = {
+          name: contractDefinition.name,
+          accessPolicy: contractDefinition.accessPolicy,
+          contractPolicy: contractDefinition.contractPolicy,
+          dspCompatible: true
+        };
+      } else {
+        this.formGroup.addControl('dspCompatible', new FormControl(false));
+        this.formGroup.addControl('name', new FormControl<string>('edc:contractDefinition'));
+        this.formGroup.addControl('accessPolicy', new FormControl<string>('', [jsonValidator]));
+        this.formGroup.addControl('contractPolicy', new FormControl<string>('', [jsonValidator]));
+      }
+    }
+
+    this.updatePolicyValidators(this.dspCompatible);
+
+    this.dspCompatibleControl.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(checked => {
+        this.updatePolicyValidators(!!checked);
+        if (checked && !this.originalValue) {
+          this.originalValue = { name: 'edc:contractDefinition', accessPolicy: '', contractPolicy: '', dspCompatible: false };
+        }
+      });
+
+    if (this.isEditMode) {
+      this.formGroup.valueChanges
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => { this.hasBeenModified = true; });
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.isEditMode && this.hasBeenModified && this.originalValue) {
+      const currentValue: EdcContractDefinition = {
+        name: 'edc:contractDefinition',
+        accessPolicy: this.accessControl?.value || '',
+        contractPolicy: this.contractControl?.value || '',
+        dspCompatible: this.dspCompatible
+      };
+      const dirtyFields = this.getDirtyFields(currentValue);
+      if (dirtyFields.length > 0) {
+        this.formChange.emit({
+          subformType: 'contractDefinition',
+          isDirty: true,
+          dirtyFields,
+          originalValue: this.originalValue,
+          currentValue
+        });
+      }
+    }
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private getDirtyFields(currentValue: EdcContractDefinition): string[] {
+    const dirtyFields: string[] = [];
+
+    if (!this.originalValue) return dirtyFields;
+
+    if (currentValue.name !== this.originalValue.name) {
+      dirtyFields.push('name');
+    }
+
+    if (currentValue.accessPolicy !== this.originalValue.accessPolicy) {
+      dirtyFields.push('accessPolicy');
+    }
+
+    if (currentValue.contractPolicy !== this.originalValue.contractPolicy) {
+      dirtyFields.push('contractPolicy');
+    }
+
+    return dirtyFields;
+  }
+
+  private jsonToString(json: any) {
+    try {
+      return JSON.stringify(json, null, 2);
+    } catch (err) {
+      console.error(`Unable to stringify json: ${json}`, err)
+      return '';
+    }
+  }
+}
diff --git a/src/app/shared/forms/offer/offer.component.html b/src/app/shared/forms/offer/offer.component.html
index 7f253113..f59b1a9f 100644
--- a/src/app/shared/forms/offer/offer.component.html
+++ b/src/app/shared/forms/offer/offer.component.html
@@ -1,203 +1,161 @@
-<div class="bg-secondary-50 dark:bg-secondary-100 border border-secondary-50 dark:border-gray-800 mt-4 p-4 md:p-8 rounded-lg w-full">
+<div
+  class="bg-secondary-50 dark:bg-secondary-100 border border-secondary-50 dark:border-gray-800 mt-4 p-4 md:p-8 rounded-lg w-full">
   @if(formType === 'update'){
-    <h2 class="text-3xl font-bold text-primary-100 dark:text-white pb-4">
-      {{ 'UPDATE_OFFER._update' | translate }}
-    </h2>
+  <h2 class="text-3xl font-bold text-primary-100 dark:text-white pb-4">
+    {{ 'UPDATE_OFFER._update' | translate }}
+  </h2>
   } @else {
-    <h2 class="text-3xl font-bold text-primary-100 dark:text-white pb-4">
-      {{ 'CREATE_OFFER._create' | translate }}
-    </h2>
+  <h2 class="text-3xl font-bold text-primary-100 dark:text-white pb-4">
+    {{ 'CREATE_OFFER._create' | translate }}
+  </h2>
   }
 
-@if(loadingData){
-    <div role="status" class="w-full h-full flex justify-center align-middle">
-        <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-            <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-        </svg>
-        <span class="sr-only">Loading...</span>
-      </div>
-} @else {
+  @if(loadingData){
+  <div role="status" class="w-full h-full flex justify-center align-middle">
+    <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+      viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor" />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill" />
+    </svg>
+    <span class="sr-only">Loading...</span>
+  </div>
+  } @else {
   <!-- Stepper -->
   <form [formGroup]="productOfferForm">
-    <ol data-cy="offerSteps" class="flex items-start w-full text-sm font-medium text-center text-gray-500 dark:text-gray-400">
+    <ol data-cy="offerSteps"
+      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 
-            (click)="handleStepClick(i)"
-            [class.cursor-not-allowed]="!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"
-                [class.bg-primary-100]="currentStep === i"
-                [class.text-white]="currentStep === i">
-            {{ i + 1 }}
-          </span>
-          <span class="md:block mt-2 hidden">{{ step }}</span>
-        </li>
+      <li (click)="handleStepClick(i)" [class.cursor-not-allowed]="!canNavigate(i)" [class.opacity-50]="!canNavigate(i)"
+        [class.text-primary-100]="currentStep.id === step.id" 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"
+          [class.bg-primary-100]="currentStep.id === step.id" [class.text-white]="currentStep.id === step.id">
+          {{ i + 1 }}
+        </span>
+        <span class="md:block mt-2 hidden">{{ step.label }}</span>
+      </li>
       }
     </ol>
 
-    <h3 class="block md:hidden mt-2 text-center text-2xl text-primary-100 dark:text-white pb-4">{{ this.steps[currentStep] }}</h3>
+    <h3 class="block md:hidden mt-2 text-center text-2xl text-primary-100 dark:text-white pb-4">{{
+      currentStep.label }}</h3>
     @if(loading){
-      <div role="status" class="w-full h-full flex justify-center align-middle">
-          <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-              <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-          </svg>
-          <span class="sr-only">Loading...</span>
-          </div>
+    <div role="status" class="w-full h-full flex justify-center align-middle">
+      <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400"
+        viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor" />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill" />
+      </svg>
+      <span class="sr-only">Loading...</span>
+    </div>
     } @else {
 
     <div class="md:p-8">
 
-        <!-- Step Forms -->
-        @if (currentStep === 0) {
-          <app-general-info-form 
-            [data]="offer" 
-            [formType]="formType" 
-            [form]="productOfferForm.controls['generalInfo']"
-            (formChange)="handleSubformChange($event)">
-          </app-general-info-form>
-        } @else if (currentStep === 1) {
-          <app-prod-spec-form formControlName="prodSpec"
-                              [data]="offer"
-                              [partyId]="partyId"
-                              [formType]="formType"
-                              (formChange)="handleSubformChange($event)">
-          </app-prod-spec-form>
-        } @else if (currentStep === 2) {
-          @if(this.formType=='update'){
-            <app-category-form formControlName="category" 
-                            [data]="offer" 
-                            [formType]="formType"
-                            (formChange)="handleSubformChange($event)">
-            </app-category-form>
-          }@else{
-            <app-catalogue formControlName="catalogue" [partyId]="partyId"></app-catalogue>
-          }        
-        } @else if (currentStep === 3){
-          @if(this.formType=='update'){
-            <app-license-form [data]="offer" 
-                            [formType]="formType" 
-                            [form]="productOfferForm.controls['license']"
-                            (formChange)="handleSubformChange($event)">
-            </app-license-form>
-          }@else{
-            <app-category-form formControlName="category" 
-                            [data]="offer" 
-                            [formType]="formType"
-                            (formChange)="handleSubformChange($event)">
-            </app-category-form>
-          }
-        } @else if (currentStep === 4) {
-          @if(this.formType=='update'){
-            <app-price-plans-form 
-              [form]="productOfferForm" 
-              [prodSpec]="productOfferForm.get('prodSpec')?.value"
-              [custom]="false"
-              (formChange)="handleSubformChange($event)">
-            </app-price-plans-form>
-          }@else{
-            <app-license-form [data]="offer" 
-                            [formType]="formType" 
-                            [form]="productOfferForm.controls['license']"
-                            (formChange)="handleSubformChange($event)">
-            </app-license-form>
-          }
-        } @else if (currentStep === 5) {
-          @if(this.formType=='update'){
-            <app-procurement-mode [data]="offer" 
-              [form]="productOfferForm.controls['procurementMode']"
-              [formType]="formType"
-              (formChange)="handleSubformChange($event)">
-            </app-procurement-mode>
-          }@else{
-            <app-price-plans-form [form]="productOfferForm" 
-                                [prodSpec]="productOfferForm.get('prodSpec')?.value"
-                                [custom]="false"
-                                (formChange)="handleSubformChange($event)">
-            </app-price-plans-form>
-          }         
-        } @else if (currentStep === 6) {
-          @if(this.formType=='update'){
-            <!--<app-replication-visibility></app-replication-visibility>-->
-            <app-offer-summary [productOfferForm]="productOfferForm"></app-offer-summary>
-          }@else{
-            <!--<app-replication-visibility></app-replication-visibility>-->
-            <app-procurement-mode [data]="offer" 
-              [formType]="formType" 
-              [form]="productOfferForm.controls['procurementMode']"
-              (formChange)="handleSubformChange($event)">
-            </app-procurement-mode>
-          }
-        } @else if(currentStep === 7) {
-          <!--@if(this.formType=='update'){
-            <app-offer-summary [productOfferForm]="productOfferForm"></app-offer-summary>
-          }@else{
-            <app-replication-visibility></app-replication-visibility>
-          }-->
-          <app-offer-summary [productOfferForm]="productOfferForm"></app-offer-summary>
+      <!-- Step Forms -->
+      @switch (currentStep.id) {
+        @case (OfferStep.GENERAL_INFO) {
+          <app-general-info-form [data]="offer" [formType]="formType" [form]="productOfferForm.controls['generalInfo']"
+            (formChange)="handleSubformChange($event)" />
+        }
+        @case (OfferStep.PROD_SPEC) {
+          <app-prod-spec-form formControlName="prodSpec" [data]="offer" [partyId]="partyId" [formType]="formType"
+            (formChange)="handleSubformChange($event)" />
+        }
+        @case (OfferStep.CATALOGUE) {
+          <app-catalogue formControlName="catalogue" [partyId]="partyId" />
+        }
+        @case (OfferStep.CATEGORY) {
+          <app-category-form formControlName="category" [data]="offer" [formType]="formType"
+            (formChange)="handleSubformChange($event)" />
+        }
+        @case (OfferStep.LICENSE) {
+          <app-license-form [data]="offer" [formType]="formType" [form]="productOfferForm.controls['license']"
+            (formChange)="handleSubformChange($event)" />
+        }
+        @case (OfferStep.CONTRACT_DEFINITION) {
+          <app-edc-contract-definition-form [data]="offer" [formType]="formType"
+            [form]="productOfferForm.controls['edcContractDefinition']" (formChange)="handleSubformChange($event)" />
+        }
+        @case (OfferStep.PRICE) {
+          <app-price-plans-form [form]="productOfferForm" [prodSpec]="productOfferForm.get('prodSpec')?.value"
+            [custom]="false" (formChange)="handleSubformChange($event)" />
         }
+        @case (OfferStep.PROCUREMENT) {
+          <app-procurement-mode [data]="offer" [formType]="formType" [form]="productOfferForm.controls['procurementMode']"
+            (formChange)="handleSubformChange($event)" />
+        }
+        @case (OfferStep.SUMMARY) {
+          <app-offer-summary [productOfferForm]="productOfferForm" />
+        }
+      }
     </div>
-  }
+    }
     <!-- Navigation Buttons -->
     <div class="flex justify-end mt-6 space-x-4">
-      <button data-cy="offerPrevious" (click)="goToStep(currentStep - 1)"
-              [disabled]="currentStep === 0"
-              [ngClass]="{
-                'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== 0,
-                'text-gray-300 dark:text-gray-600 cursor-not-allowed': currentStep === 0
+      <button data-cy="offerPrevious" (click)="goToStep(currentStepIdx - 1)" [disabled]="currentStepIdx === 0"
+        [ngClass]="{
+                'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStepIdx !== 0,
+                'text-gray-300 dark:text-gray-600 cursor-not-allowed': currentStepIdx === 0
               }"
-              class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg  bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 ">
-          <svg class="min-w-4 w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-            <path fill="currentColor"
-                  d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3
-                  256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
-          </svg>
-          {{ 'CREATE_OFFER._previous' | translate }}
+        class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg  bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 ">
+        <svg class="min-w-4 w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+          <path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3
+                  256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" />
+        </svg>
+        {{ 'CREATE_OFFER._previous' | translate }}
       </button>
 
-      <button data-cy="offerNext" (click)="goToStep(currentStep + 1)"
-              [disabled]="currentStep === steps.length - 1 || (formType === 'create' && !validateCurrentStep()) || !canNavigate(currentStep)"
-              [ngClass]="{
-                'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== steps.length - 1 && (formType !== 'create' || validateCurrentStep() || canNavigate(currentStep)),
-                'cursor-not-allowed opacity-50': currentStep === steps.length - 1 || (formType === 'create' && !validateCurrentStep() || !canNavigate(currentStep))
+      <button data-cy="offerNext" (click)="goToStep(currentStepIdx + 1)"
+        [disabled]="currentStepIdx === steps.length - 1 || (formType === 'create' && !validateCurrentStep()) || !canNavigate(currentStepIdx)"
+        [ngClass]="{
+                'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStepIdx !== steps.length - 1 && (formType !== 'create' || validateCurrentStep() || canNavigate(currentStepIdx)),
+                'cursor-not-allowed opacity-50': currentStepIdx === steps.length - 1 || (formType === 'create' && !validateCurrentStep() || !canNavigate(currentStepIdx))
               }"
-              class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
-            {{ 'CREATE_OFFER._next_step' | translate }}
+        class="px-4 py-2 flex items-center justify-center text-base font-medium rounded-lg text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
+        {{ 'CREATE_OFFER._next_step' | translate }}
         <svg class="min-w-4 w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-          <path fill="currentColor"
-                d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7
-                256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
+          <path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7
+                256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
         </svg>
       </button>
-      @if(formType === 'create' && currentStep === 7 || formType === 'update'){
-        <button data-cy="offerFinish" (click)="submitForm()"
-        [disabled]="!isFormValid|| loading"
+      @if(formType === 'create' && currentStep.id === 'summary' || formType === 'update'){
+      <button data-cy="offerFinish" (click)="submitForm()" [disabled]="!isFormValid|| loading"
         [ngClass]="loading || (formType === 'update' && !isFormValid) ? 'opacity-50' : 'hover:bg-primary-50'"
-
         class="px-4 py-2 text-base font-medium text-white rounded-lg bg-primary-100">
-          {{ formType === 'create' ? 'Create Offer' : 'Update Offer' }}
-        </button>
+        {{ formType === 'create' ? 'Create Offer' : 'Update Offer' }}
+      </button>
       }
     </div>
   </form>
-}
+  }
 </div>
 
 @if(showError){
-  <div 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">
-    <div id="alert-additional-content-2" class="p-4 mb-4 text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-red-900 dark:border-red-900 dark:text-white" role="alert">
-      <div class="flex items-center">
-        <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-          <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-        </svg>
-        <h3 class="text-lg font-medium">Error</h3>
-      </div>
-      <div class="mt-2 mb-4 text-sm">
-        {{errorMessage}}
-      </div>
+<div
+  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">
+  <div id="alert-additional-content-2"
+    class="p-4 mb-4 text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-red-900 dark:border-red-900 dark:text-white"
+    role="alert">
+    <div class="flex items-center">
+      <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+        viewBox="0 0 20 20">
+        <path
+          d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+      </svg>
+      <h3 class="text-lg font-medium">Error</h3>
+    </div>
+    <div class="mt-2 mb-4 text-sm">
+      {{errorMessage}}
     </div>
   </div>
+</div>
 }
diff --git a/src/app/shared/forms/offer/offer.component.ts b/src/app/shared/forms/offer/offer.component.ts
index 91c72521..fa21f0b1 100644
--- a/src/app/shared/forms/offer/offer.component.ts
+++ b/src/app/shared/forms/offer/offer.component.ts
@@ -1,30 +1,48 @@
-import {Component, Input, OnInit, OnDestroy} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {GeneralInfoComponent} from "./general-info/general-info.component";
-import {TranslateModule} from "@ngx-translate/core";
-import {ProdSpecComponent} from "./prod-spec/prod-spec.component";
-import {NgClass, NgIf} from "@angular/common";
-import {ApiServiceService} from "../../../services/product-service.service";
-import {CategoryComponent} from "./category/category.component";
-import {LicenseComponent} from "./license/license.component";
-import {PricePlansComponent} from "./price-plans/price-plans.component";
-import {CatalogueComponent} from "./catalogue/catalogue.component";
-import {ProcurementModeComponent} from "./procurement-mode/procurement-mode.component"
-import {ReplicationVisibilityComponent} from "./replication-visibility/replication-visibility.component"
-import {OfferSummaryComponent} from "./offer-summary/offer-summary.component"
-import { lastValueFrom } from 'rxjs';
-import {components} from "src/app/models/product-catalog";
-import {EventMessageService} from "src/app/services/event-message.service";
-import {FormChangeState, PricePlanChangeState} from "../../../models/interfaces";
-import {Subscription} from "rxjs";
-import * as moment from 'moment';
-import { certifications } from 'src/app/models/certification-standards.const';
-import {Subject} from "rxjs";
+import { NgClass } from "@angular/common";
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import moment from 'moment';
+import { lastValueFrom, Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { components } from "src/app/models/product-catalog";
+import { EventMessageService } from "src/app/services/event-message.service";
+import { v4 as uuidv4 } from 'uuid';
+import { environment } from '../../../../environments/environment';
+import { FormChangeState, PricePlanChangeState } from "../../../models/interfaces";
+import { ApiServiceService } from "../../../services/product-service.service";
+import { CatalogueComponent } from "./catalogue/catalogue.component";
+import { CategoryComponent } from "./category/category.component";
+import { EdcContractDefinitionComponent } from "./edc-contract-definition/edc-contract-definition.component";
+import { GeneralInfoComponent } from "./general-info/general-info.component";
+import { LicenseComponent } from "./license/license.component";
+import { OfferSummaryComponent } from "./offer-summary/offer-summary.component";
+import { PricePlansComponent } from "./price-plans/price-plans.component";
+import { ProcurementModeComponent } from "./procurement-mode/procurement-mode.component";
+import { ProdSpecComponent } from "./prod-spec/prod-spec.component";
+import { ReplicationVisibilityComponent } from "./replication-visibility/replication-visibility.component";
 
 type ProductOffering_Create = components["schemas"]["ProductOffering_Create"];
 type ProductOfferingPrice = components["schemas"]["ProductOfferingPrice"]
- 
+
+export enum OfferStep {
+  GENERAL_INFO = 'general_info',
+  PROD_SPEC = 'prod_spec',
+  CATALOGUE = 'catalogue',
+  CATEGORY = 'category',
+  LICENSE = 'license',
+  CONTRACT_DEFINITION = 'contract_definition',
+  PRICE = 'price',
+  PROCUREMENT = 'procurement',
+  REPLICATION = 'replication',
+  SUMMARY = 'summary',
+}
+
+interface Step {
+  label: string;
+  id: OfferStep;
+}
+
 @Component({
   selector: 'app-offer-form',
   standalone: true,
@@ -40,51 +58,60 @@ type ProductOfferingPrice = components["schemas"]["ProductOfferingPrice"]
     ProcurementModeComponent,
     ReplicationVisibilityComponent,
     OfferSummaryComponent,
-    NgClass
+    NgClass,
+    EdcContractDefinitionComponent
   ],
   templateUrl: './offer.component.html',
   styleUrl: './offer.component.css'
 })
-export class OfferComponent implements OnInit, OnDestroy{
+export class OfferComponent implements OnInit, OnDestroy {
 
   @Input() formType: 'create' | 'update' = 'create';
   @Input() offer: any = {};
   @Input() partyId: any;
 
   productOfferForm: FormGroup;
-  currentStep = 0;
-  highestStep = 0;
-  steps = [
-    'General Info',
-    'Product Specification',
-    'Catalogue',
-    'Category',
-    'License',
-    'Price Plans',
-    'Procurement Mode',
-    //'Replication & Visibility',
-    'Summary'
+  highestStepIdx = 0;
+  contractDefinitionStep: Step = { label: 'Contract Definition', id: OfferStep.CONTRACT_DEFINITION };
+  steps: Step[] = [
+    { label: 'General Info', id: OfferStep.GENERAL_INFO },
+    { label: 'Product Specification', id: OfferStep.PROD_SPEC },
+    { label: 'Catalogue', id: OfferStep.CATALOGUE },
+    { label: 'Category', id: OfferStep.CATEGORY },
+    { label: 'License', id: OfferStep.LICENSE },
+    { label: 'Price Plans', id: OfferStep.PRICE },
+    { label: 'Procurement Mode', id: OfferStep.PROCUREMENT },
+    // { label: 'Replication & Visibility', id: OfferStep.REPLICATION },
+    { label: 'Summary', id: OfferStep.SUMMARY },
   ];
+  currentStepIdx = 0;
+  get currentStep(): Step { return this.steps[this.currentStepIdx]; }
+  readonly OfferStep = OfferStep;
+
   isFormValid = false;
   selectedProdSpec: any;
-  pricePlans:any = [];
-  errorMessage:any='';
-  showError:boolean=false;
-  loading:boolean=false;
-  bundleChecked:boolean=false;
-  offersBundle:any[]=[];
-  loadingData:boolean=false;
+  pricePlans: any = [];
+  errorMessage: any = '';
+  showError: boolean = false;
+  loading: boolean = false;
+  bundleChecked: boolean = false;
+  offersBundle: any[] = [];
+  loadingData: boolean = false;
 
-  offerToCreate:ProductOffering_Create | undefined;
+  offerToCreate: ProductOffering_Create | undefined;
 
   private formChanges: { [key: string]: FormChangeState } = {};
   private formSubscription: Subscription | null = null;
   private destroy$ = new Subject<void>();
   hasChanges: boolean = false;
 
+  get dspEnable(): boolean {
+    return environment.DSP_ENABLED && environment.DATA_SPACE_ENABLED
+  }
+
   constructor(private api: ApiServiceService,
-              private eventMessage: EventMessageService,
-              private fb: FormBuilder) {
+    private eventMessage: EventMessageService,
+    private fb: FormBuilder) {
 
     this.productOfferForm = this.fb.group({
       generalInfo: this.fb.group({}),
@@ -92,6 +119,7 @@ export class OfferComponent implements OnInit, OnDestroy{
       catalogue: new FormControl(null, [Validators.required]),
       category: new FormControl([]),
       license: this.fb.group({}),
+      edcContractDefinition: this.fb.group({}),
       pricePlans: new FormControl([]),
       procurementMode: this.fb.group({}),
       replicationMode: this.fb.group({})
@@ -99,26 +127,26 @@ export class OfferComponent implements OnInit, OnDestroy{
 
     // Subscribe to form validation changes
     this.productOfferForm.statusChanges
-    .pipe(takeUntil(this.destroy$))
-    .subscribe(status => {
-      if(!this.productOfferForm.controls['generalInfo'].valid || !this.productOfferForm.get('procurementMode')?.valid){
-        this.isFormValid = false
-      } else {
-        this.isFormValid = true
-      }
-    });
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(status => {
+        if (!this.productOfferForm.controls['generalInfo'].valid || !this.productOfferForm.get('procurementMode')?.valid || !this.productOfferForm.get('edcContractDefinition')?.valid) {
+          this.isFormValid = false
+        } else {
+          this.isFormValid = true
+        }
+      });
 
     // Subscribe to subform changes
     this.formSubscription = this.eventMessage.messages$
-    .pipe(takeUntil(this.destroy$))
-    .subscribe(message => {
-      console.log('subform changed-----')
-      if (message.type === 'SubformChange') {
-        const changeState = message.value as FormChangeState;
-        console.log('Received subform change:', changeState);
-        this.handleSubformChange(changeState);
-      }
-    });
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(message => {
+        console.log('subform changed-----')
+        if (message.type === 'SubformChange') {
+          const changeState = message.value as FormChangeState;
+          console.log('Received subform change:', changeState);
+          this.handleSubformChange(changeState);
+        }
+      });
   }
 
   handleSubformChange(change: FormChangeState) {
@@ -139,65 +167,89 @@ export class OfferComponent implements OnInit, OnDestroy{
 
   goToStep(index: number) {
     // Solo validar en modo creación
-    if (this.formType === 'create' && index > this.currentStep) {
-      // Validar el paso actual
+    if (this.formType === 'create' && index > this.currentStepIdx) {
       const currentStepValid = this.validateCurrentStep();
       if (!currentStepValid) {
-        return; // No permitir avanzar si el paso actual no es válido
+        return;
+      }
+    }
+
+    if (this.currentStep.id === 'prod_spec') {
+      // VERIFY EDC compatible and enable if so
+      if (this.isdEdcCompatible() && this.dspEnable) {
+        this.enableContractDefinitionStep()
+      } else {
+        this.disableContractDefinitionStep();
       }
     }
-    
-    this.currentStep = index;
-    if(this.currentStep>this.highestStep){
-      this.highestStep=this.currentStep
+    this.currentStepIdx = index;
+    if (index > this.highestStepIdx) {
+      this.highestStepIdx = index;
     }
   }
 
   validateCurrentStep(): boolean {
-    switch (this.currentStep) {
-      case 0: // General Info
+    switch (this.currentStep.id) {
+      case OfferStep.GENERAL_INFO:
         return this.productOfferForm.get('generalInfo')?.valid || false;
-      case 1: // Product Specification
+      case OfferStep.PROD_SPEC:
         return !!this.productOfferForm.get('prodSpec')?.value;
-      case 2: // Catalogue
+      case OfferStep.CATALOGUE:
         return !!this.productOfferForm.get('catalogue')?.value;
-      case 3: // Category
-        return true; // Las categorías no son obligatorias
-      case 4: // License
+      case OfferStep.CATEGORY:
+        return true;
+      case OfferStep.LICENSE:
         return this.productOfferForm.get('license')?.valid || false;
-      case 5: // Price Plans
+      case OfferStep.CONTRACT_DEFINITION:
+        return this.productOfferForm.get('edcContractDefinition')?.valid || false;
+      case OfferStep.PRICE:
         return true;
-      case 6: // Procurement Mode
+      case OfferStep.PROCUREMENT:
         return this.productOfferForm.get('procurementMode')?.valid || false;
-      /*case 7: // Replication & Visibility
-        return this.productOfferForm.get('replicationMode')?.valid || false;*/
+      // case OfferStep.REPLICATION:
+      //   return this.productOfferForm.get('replicationMode')?.valid || false;
       default:
         return true;
     }
   }
 
   canNavigate(index: number) {
-    if(this.formType == 'create'){
-      return (this.productOfferForm.get('generalInfo')?.valid &&  (index <= this.currentStep)) || (this.productOfferForm.get('generalInfo')?.valid &&  (index <= this.highestStep));
+    if (this.formType == 'create') {
+      return (this.productOfferForm.get('generalInfo')?.valid && (index <= this.currentStepIdx)) || (this.productOfferForm.get('generalInfo')?.valid && (index <= this.highestStepIdx));
     } else {
       //return this.productOfferForm.get('generalInfo')?.valid
       return this.isFormValid
     }
-  }  
+  }
 
   handleStepClick(index: number): void {
     if (this.canNavigate(index)) {
       this.goToStep(index);
     }
   }
-  
+
+  enableContractDefinitionStep(): void {
+    const alreadyAdded = this.steps.some(s => s.id === OfferStep.CONTRACT_DEFINITION);
+    if (alreadyAdded) return;
+    const licenseIdx = this.steps.findIndex(s => s.id === OfferStep.LICENSE);
+    this.steps = [
+      ...this.steps.slice(0, licenseIdx + 1),
+      this.contractDefinitionStep,
+      ...this.steps.slice(licenseIdx + 1),
+    ];
+  }
+
+  disableContractDefinitionStep(): void {
+    this.steps = this.steps.filter(s => s.id !== OfferStep.CONTRACT_DEFINITION);
+  }
+
 
   submitForm() {
     if (this.formType === 'update') {
       this.eventMessage.emitUpdateOffer(true);
       console.log('🔄 Starting offer update process...');
       console.log('📝 Current form changes:', this.formChanges);
-      
+
       // Aquí irá la lógica de actualización
       // Por ahora solo mostramos los cambios
       this.updateOffer();
@@ -209,22 +261,11 @@ export class OfferComponent implements OnInit, OnDestroy{
 
   async ngOnInit() {
     if (this.formType === 'update' && this.offer) {
-      this.loadingData=true;
-      this.steps = [
-        'General Info',
-        'Product Specification',
-        //'Catalogue',
-        'Category',
-        'License',
-        'Price Plans',
-        'Procurement Mode',
-        //'Replication & Visibility',
-        'Summary'
-      ];
+      this.loadingData = true;
+      this.steps = this.steps.filter(step => step.id !== 'catalogue');
       await this.loadOfferData();
-      this.loadingData=false;
+      this.loadingData = false;
     }
-
   }
   async loadOfferData() {
     console.log('Loading offer into form...', this.offer);
@@ -240,33 +281,33 @@ export class OfferComponent implements OnInit, OnDestroy{
     }
 
     //CATEGORIES
-    if(this.offer.category){
+    if (this.offer.category) {
       this.productOfferForm.patchValue({
         category: this.offer.category || null // Cargar si existe, o dejar en null
       });
     }
 
     //LICENSE
-    if(this.offer.productOfferingTerm){
+    if (this.offer.productOfferingTerm) {
       console.log('Found productOfferingTerm:', this.offer.productOfferingTerm);
-      
+
       // Mantener el primer término (licencia) incluso si está vacío
       //const licenseTerm = this.offer.productOfferingTerm[0];
       const licenseTerm = this.offer.productOfferingTerm.find(
         (element: { name: string; }) => element.name === 'License'
       );
-      
+
       // Filtrar el resto de términos
 
       /*const otherTerms = this.offer.productOfferingTerm.filter(
         (term: any) => term.name !== 'License'
       ) ?? [];
-    
-      
+
+
       // Reconstruir el array con el término de licencia en la posición 0
       this.offer.productOfferingTerm = [licenseTerm, ...otherTerms];*/
 
-      if(licenseTerm){
+      if (licenseTerm) {
         this.productOfferForm.patchValue({
           license: {
             treatment: 'License',
@@ -279,14 +320,14 @@ export class OfferComponent implements OnInit, OnDestroy{
             treatment: 'License',
             description: ''
           }
-        });        
+        });
       }
 
       //PROCUREMENT
       const procurementTerm = this.offer.productOfferingTerm.find(
         (element: { name: string; }) => element.name === 'procurement'
       );
-      if(procurementTerm){
+      if (procurementTerm) {
         const procurementValue = {
           id: procurementTerm.description,
           name: procurementTerm.description
@@ -303,6 +344,20 @@ export class OfferComponent implements OnInit, OnDestroy{
           }
         });
       }
+
+      // EDC Contract Definition
+      if (environment.DSP_ENABLED) {
+        const contractDefinition = this.offer.productOfferingTerm.find(
+          (element: { name: string; }) => element.name === 'edc:contractDefinition'
+        ) || { name: 'edc:contractDefinition' };
+        this.productOfferForm.patchValue(({
+          contractDefinition: {
+            name: contractDefinition.name,
+            accessPolicy: contractDefinition.accessPolicy ? JSON.stringify(contractDefinition.accessPolicy) : '',
+            contractPolicy: contractDefinition.contractPolicy ? JSON.stringify(contractDefinition.contractPolicy) : ''
+          }
+        }))
+      }
       /*console.log('Checking procurement terms...');
       this.offer.productOfferingTerm.forEach((term: any) => {
         console.log('Checking term:', term);
@@ -323,40 +378,40 @@ export class OfferComponent implements OnInit, OnDestroy{
 
     // Price Plans
     if (Array.isArray(this.offer.productOfferingPrice) && this.offer.productOfferingPrice.length > 0) {
-     for (let pop of this.offer.productOfferingPrice) {
-      let relatedPrices:any[] = [];
-       const pricePlan = await this.api.getOfferingPrice(pop.id);
-       console.log('-- price plan ----')
-       console.log(pricePlan)
-       let configProfileCheck = false;
-       if(pricePlan?.prodSpecCharValueUse && pricePlan?.prodSpecCharValueUse.length > 0){
-        configProfileCheck=true
-       } else {
-        configProfileCheck=false
-       }
-
-       let priceInfo: any = {
-        id: pricePlan.id,
-        name: pricePlan.name,
-        description: pricePlan.description,
-        lifecycleStatus: pricePlan.lifecycleStatus,
-        paymentOnline: pricePlan?.paymentOnline ?? !!pricePlan?.bundledPopRelationship,
-        productProfile: configProfileCheck ? this.mapProductProfile(pricePlan?.prodSpecCharValueUse || []) : [],     
-      }
-      
-      //Now every pricePlan is set as bundle even with only one price component
-      if(pricePlan.bundledPopRelationship){
-        for(let i=0;i<pricePlan.bundledPopRelationship.length;i++){
-          let data = await this.api.getOfferingPrice(pricePlan.bundledPopRelationship[i].id)
-            let priceComp:any = {
-              id:data.id,
-              href:data.href,
-              name:data?.name,
-              description:data?.description,
-              isBundle:data?.isBundle,
-              priceType:data?.priceType,
-              lastUpdate:data?.lastUpdate,
-              lifecycleStatus:data?.lifecycleStatus,
+      for (let pop of this.offer.productOfferingPrice) {
+        let relatedPrices: any[] = [];
+        const pricePlan = await this.api.getOfferingPrice(pop.id);
+        console.log('-- price plan ----')
+        console.log(pricePlan)
+        let configProfileCheck = false;
+        if (pricePlan?.prodSpecCharValueUse && pricePlan?.prodSpecCharValueUse.length > 0) {
+          configProfileCheck = true
+        } else {
+          configProfileCheck = false
+        }
+
+        let priceInfo: any = {
+          id: pricePlan.id,
+          name: pricePlan.name,
+          description: pricePlan.description,
+          lifecycleStatus: pricePlan.lifecycleStatus,
+          paymentOnline: pricePlan?.paymentOnline ?? !!pricePlan?.bundledPopRelationship,
+          productProfile: configProfileCheck ? this.mapProductProfile(pricePlan?.prodSpecCharValueUse || []) : [],
+        }
+
+        //Now every pricePlan is set as bundle even with only one price component
+        if (pricePlan.bundledPopRelationship) {
+          for (let i = 0; i < pricePlan.bundledPopRelationship.length; i++) {
+            let data = await this.api.getOfferingPrice(pricePlan.bundledPopRelationship[i].id)
+            let priceComp: any = {
+              id: data.id,
+              href: data.href,
+              name: data?.name,
+              description: data?.description,
+              isBundle: data?.isBundle,
+              priceType: data?.priceType,
+              lastUpdate: data?.lastUpdate,
+              lifecycleStatus: data?.lifecycleStatus,
               paymentOnline: data?.paymentOnline ?? !!data?.bundledPopRelationship,
               selectedCharacteristic: data?.prodSpecCharValueUse || null,
               currency: data?.price?.unit || 'EUR',
@@ -366,43 +421,47 @@ export class OfferComponent implements OnInit, OnDestroy{
               price: data?.price?.value,
               validFor: data?.validFor || null,
             }
-            
-            if(data?.price?.unit){
-              priceComp.currency=data?.price?.unit
+
+            if (data?.price?.unit) {
+              priceComp.currency = data?.price?.unit
             }
-  
-            if(data?.popRelationship){
+
+            if (data?.popRelationship) {
               let alter = await this.api.getOfferingPrice(data?.popRelationship[0].id)
               console.log('----- alter')
               console.log(alter)
-              if(alter.percentage){
-                priceComp.discountValue=alter?.percentage
-                priceComp.discountUnit='percentage'
-              }else{
-                priceComp.discountValue=alter?.price?.value
-                priceComp.discountUnit='fixed'
-              }            
-              priceComp.discountDuration = alter?.unitOfMeasure?.amount            
-              priceComp.discountDurationUnit = alter?.unitOfMeasure?.units            
+              if (alter.percentage) {
+                priceComp.discountValue = alter?.percentage
+                priceComp.discountUnit = 'percentage'
+              } else {
+                priceComp.discountValue = alter?.price?.value
+                priceComp.discountUnit = 'fixed'
+              }
+              priceComp.discountDuration = alter?.unitOfMeasure?.amount
+              priceComp.discountDurationUnit = alter?.unitOfMeasure?.units
               //priceComp.discountDurationUnit=alter?.
               //priceComp.discountDuration=this.calculateDiscountDuration(alter?.validFor,alter?.)
             }
             relatedPrices.push(priceComp)
+          }
         }
-      }
 
-      priceInfo.priceComponents=relatedPrices;
-      console.log(priceInfo)
-      //}
+        priceInfo.priceComponents = relatedPrices;
+        console.log(priceInfo)
+        //}
 
-      this.pricePlans.push(priceInfo);
-      console.log(this.pricePlans)
-     }
-     console.log('Price Plans existentes: ', this.pricePlans);
+        this.pricePlans.push(priceInfo);
+        console.log(this.pricePlans)
+      }
+      console.log('Price Plans existentes: ', this.pricePlans);
 
-    this.productOfferForm.patchValue({
-      pricePlans: this.pricePlans // Cargar si existe, o dejar en null
-    });
+      this.productOfferForm.patchValue({
+        pricePlans: this.pricePlans // Cargar si existe, o dejar en null
+      });
+    }
+
+    if (this.offer.externalId && this.isdEdcCompatible() && this.dspEnable) {
+      this.enableContractDefinitionStep()
     }
   }
 
@@ -443,13 +502,13 @@ export class OfferComponent implements OnInit, OnDestroy{
         units: component.discountDurationUnit
       }
     };
-  
+
     if (component.discountUnit === 'percentage') {
       priceAlter.percentage = component.discountValue;
     } else {
       priceAlter.price = { value: component.discountValue, unit: currency };
     }
-  
+
     return await lastValueFrom(this.api.postOfferingPrice(priceAlter));
   }
 
@@ -480,7 +539,7 @@ export class OfferComponent implements OnInit, OnDestroy{
       console.log(component.newValue)
       priceComp.unitOfMeasure = {
         amount: 1,
-        units: component.usageUnit ?? component.newValue.usageUnit      
+        units: component.usageUnit ?? component.newValue.usageUnit
       }
       priceComp['@baseType'] = "ProductOfferingPrice";
       priceComp['@schemaLocation'] = "https://raw.githubusercontent.com/laraminones/tmf-new-schemas/main/UsageSpecId.json";
@@ -530,9 +589,9 @@ export class OfferComponent implements OnInit, OnDestroy{
 
     if (component.newValue.priceType === 'usage') {
       console.log(component.newValue)
-      priceComp.unitOfMeasure = { 
+      priceComp.unitOfMeasure = {
         amount: 1,
-        units: component.newValue.usageUnit     
+        units: component.newValue.usageUnit
       };
 
       (priceComp as any).usageSpecId = component.newValue.usageSpecId;
@@ -550,24 +609,24 @@ export class OfferComponent implements OnInit, OnDestroy{
     }
 
     if (component.newValue.discountValue != null) {
-      let discountMock:any = {
+      let discountMock: any = {
         discountValue: component.newValue.discountValue
       }
-      if(component.newValue.discountUnit){
-        discountMock.discountUnit=component.newValue.discountUnit
+      if (component.newValue.discountUnit) {
+        discountMock.discountUnit = component.newValue.discountUnit
       }
-      if(component.newValue.discountDuration){
-        discountMock.discountDuration=component.newValue.discountDuration
+      if (component.newValue.discountDuration) {
+        discountMock.discountDuration = component.newValue.discountDuration
       }
-      if(component.newValue.discountDurationUnit){
-        discountMock.discountDurationUnit=component.newValue.discountDurationUnit
+      if (component.newValue.discountDurationUnit) {
+        discountMock.discountDurationUnit = component.newValue.discountDurationUnit
       }
       const discount = await this.createPriceAlteration(discountMock, currency);
       priceComp.popRelationship = [{ id: discount.id, href: discount.id, name: discount.name }];
     }
     console.log('update price comp')
     console.log(priceComp)
-    const updated = await lastValueFrom(this.api.updateOfferingPrice(priceComp,component.id));
+    const updated = await lastValueFrom(this.api.updateOfferingPrice(priceComp, component.id));
     return { id: updated.id, href: updated.id, name: updated.name };
   }
 
@@ -580,13 +639,13 @@ export class OfferComponent implements OnInit, OnDestroy{
       bundledPopRelationship: compRel
     };
 
-    if(plan?.priceType){
-      if(plan?.priceType == 'custom'){
-        price.priceType='custom'
+    if (plan?.priceType) {
+      if (plan?.priceType == 'custom') {
+        price.priceType = 'custom'
       }
-    } else if(plan?.newValue?.priceType){
-      if(plan?.newValue?.priceType == 'custom'){
-        price.priceType='custom'
+    } else if (plan?.newValue?.priceType) {
+      if (plan?.newValue?.priceType == 'custom') {
+        price.priceType = 'custom'
       }
     }
 
@@ -597,10 +656,10 @@ export class OfferComponent implements OnInit, OnDestroy{
           .filter((v: any) => v.isDefault)
       }));
     }
-    
 
 
-    if(plan?.newValue?.prodSpecCharValueUse){
+
+    if (plan?.newValue?.prodSpecCharValueUse) {
       price.prodSpecCharValueUse = plan?.newValue?.prodSpecCharValueUse.map((item: any) => ({
         ...item,
         productSpecCharacteristicValue: item.productSpecCharacteristicValue
@@ -614,7 +673,7 @@ export class OfferComponent implements OnInit, OnDestroy{
       price.unitOfMeasure = plan.usageUnit;
     }
 
-    if(plan?.newValue?.usageUnit){
+    if (plan?.newValue?.usageUnit) {
       price.unitOfMeasure = plan?.newValue?.usageUnit;
     }
 
@@ -627,26 +686,26 @@ export class OfferComponent implements OnInit, OnDestroy{
     console.log(plan)
     console.log(plan.id)
     console.log(compRel)
-    let price : ProductOfferingPrice = {
+    let price: ProductOfferingPrice = {
       name: plan.newValue.name,
       isBundle: true,
       bundledPopRelationship: compRel
     }
-    if(modifiedFields.includes('description')){
+    if (modifiedFields.includes('description')) {
       price.description = plan.newValue.description
     }
-    if(modifiedFields.includes('prodSpecCharValueUse') && plan.newValue.prodSpecCharValueUse != null){
+    if (modifiedFields.includes('prodSpecCharValueUse') && plan.newValue.prodSpecCharValueUse != null) {
       price.prodSpecCharValueUse = plan.newValue.prodSpecCharValueUse.map((item: any) => ({
         ...item,
         productSpecCharacteristicValue: item.productSpecCharacteristicValue.filter((v: any) => v.isDefault)
       }));
     }
-    let updatedPrice =await lastValueFrom(this.api.updateOfferingPrice(price,plan.id))
+    let updatedPrice = await lastValueFrom(this.api.updateOfferingPrice(price, plan.id))
     return updatedPrice;
   }
 
   async createOffer() {
-    this.loading=true;
+    this.loading = true;
     const plans = this.productOfferForm.value.pricePlans;
 
     if (plans.length === 0) {
@@ -724,6 +783,17 @@ export class OfferComponent implements OnInit, OnDestroy{
       ]
     };
 
+    if (this.dspEnable && this.isdEdcCompatible()) {
+      const contractDefinition = formValue.edcContractDefinition;
+      offer.productOfferingTerm.push({
+        name: contractDefinition.name,
+        contractPolicy: contractDefinition.contractPolicy ? JSON.parse(contractDefinition.contractPolicy) : '',
+        accessPolicy: contractDefinition.accessPolicy ? JSON.parse(contractDefinition.accessPolicy) : '',
+        '@schemaLocation': environment.DSP_CONTRACT_DEFINITION_SCHEMA
+      })
+      offer.externalId = uuidv4()
+      offer['@schemaLocation'] = environment.DSP_SCHEMA
+    }
     if (!this.bundleChecked && this.formType === 'create') {
       offer.productSpecification = {
         id: formValue.prodSpec.id,
@@ -741,13 +811,13 @@ export class OfferComponent implements OnInit, OnDestroy{
       next: (data) => {
         console.log('product offer created:');
         console.log(data);
-        this.loading=false;
+        this.loading = false;
         this.goBack();
       },
       error: (error) => {
         console.error('Error during offer save/update:', error);
         this.errorMessage = error?.error?.error ? 'Error: ' + error.error.error : 'An error occurred while saving the offer!';
-        this.loading=false;
+        this.loading = false;
         this.showError = true;
         setTimeout(() => (this.showError = false), 3000);
       }
@@ -766,10 +836,10 @@ export class OfferComponent implements OnInit, OnDestroy{
       month: 'months',
       year: 'years',
     };
-  
+
     // Validate the unit and map to Moment.js DurationConstructor
     const validUnit = unitMapping[unit.toLowerCase()];
-    
+
     if (validUnit) {
       return moment().add(duration, validUnit).toISOString();
     } else {
@@ -780,15 +850,15 @@ export class OfferComponent implements OnInit, OnDestroy{
   calculateDiscountDuration(validFor: { startDateTime: string, endDateTime: string }, unit: 'days' | 'hours' | 'months') {
     const start = moment(validFor.startDateTime);
     const end = moment(validFor.endDateTime);
-    
+
     // Calculate the difference based on the given unit
     const discountDuration = end.diff(start, unit);
-  
+
     return discountDuration;
   }
 
   async updateOffer() {
-    this.loading=true;
+    this.loading = true;
     console.log('🔄 Starting offer update process...');
     console.log('📝 Current form changes:', this.formChanges);
 
@@ -860,50 +930,50 @@ export class OfferComponent implements OnInit, OnDestroy{
           }));
           console.log('Cambio en el plan de precios')
           console.log(basePayload.productOfferingPrice)
-          console.log((change as PricePlanChangeState).modifiedPricePlans)          
+          console.log((change as PricePlanChangeState).modifiedPricePlans)
           let pricePlanChangeInfo = (change as PricePlanChangeState).modifiedPricePlans;
-          for(let i=0;i< pricePlanChangeInfo.length; i++){
-            let finalPriceComps:any[]=[];
-            if(pricePlanChangeInfo[i].priceComponents.added.length>0){
+          for (let i = 0; i < pricePlanChangeInfo.length; i++) {
+            let finalPriceComps: any[] = [];
+            if (pricePlanChangeInfo[i].priceComponents.added.length > 0) {
               //Crear price comp
-              for(let j=0;j< pricePlanChangeInfo[i].priceComponents.added.length; j++){
+              for (let j = 0; j < pricePlanChangeInfo[i].priceComponents.added.length; j++) {
                 //finalPriceComps.push(this.createPriceComponent(pricePlanChangeInfo[i].priceComponents.added[j],change.currentValue.currency))
-                let compCreated = await this.createPriceComponent(pricePlanChangeInfo[i].priceComponents.added[j],pricePlanChangeInfo[i]?.newValue.currency)
+                let compCreated = await this.createPriceComponent(pricePlanChangeInfo[i].priceComponents.added[j], pricePlanChangeInfo[i]?.newValue.currency)
                 finalPriceComps.push(compCreated)
-              } 
+              }
               console.log('The following price comps has been created:')
               console.log(finalPriceComps)
             }
-            if(pricePlanChangeInfo[i].priceComponents.modified.length>0){
+            if (pricePlanChangeInfo[i].priceComponents.modified.length > 0) {
               //Modificar price comp
-              for(let j=0; j < pricePlanChangeInfo[i].priceComponents.modified.length ;j++){
+              for (let j = 0; j < pricePlanChangeInfo[i].priceComponents.modified.length; j++) {
                 //Revisar que en el caso de actualizar un componente que tenga el mismo id que el price plan (que antes no fuese bundle) ahora hay que crear el componente
                 console.log('antes del check')
                 console.log(pricePlanChangeInfo[i])
                 console.log(pricePlanChangeInfo[i]?.oldValue.isBundle)
-                console.log((!pricePlanChangeInfo[i]?.oldValue.isBundle && pricePlanChangeInfo[i].priceComponents.added.length>0))
+                console.log((!pricePlanChangeInfo[i]?.oldValue.isBundle && pricePlanChangeInfo[i].priceComponents.added.length > 0))
                 console.log(pricePlanChangeInfo[i].priceComponents.modified[j].id == pricePlanChangeInfo[i].id)
-                if((pricePlanChangeInfo[i].priceComponents.modified[j].id == pricePlanChangeInfo[i].id) && (!pricePlanChangeInfo[i]?.oldValue.isBundle && pricePlanChangeInfo[i].priceComponents.added.length>0)){
+                if ((pricePlanChangeInfo[i].priceComponents.modified[j].id == pricePlanChangeInfo[i].id) && (!pricePlanChangeInfo[i]?.oldValue.isBundle && pricePlanChangeInfo[i].priceComponents.added.length > 0)) {
                   console.log('Si entra en el check')
-                  let compUpdated = await this.createPriceComponent(pricePlanChangeInfo[i].priceComponents.modified[j],pricePlanChangeInfo[i]?.newValue.currency)
+                  let compUpdated = await this.createPriceComponent(pricePlanChangeInfo[i].priceComponents.modified[j], pricePlanChangeInfo[i]?.newValue.currency)
                   finalPriceComps.push(compUpdated)
-                } else if(pricePlanChangeInfo[i].priceComponents.modified[j].id != pricePlanChangeInfo[i].id){
-                  let compUpdated = await this.updatePriceComponent(pricePlanChangeInfo[i].priceComponents.modified[j],pricePlanChangeInfo[i]?.newValue.currency)
+                } else if (pricePlanChangeInfo[i].priceComponents.modified[j].id != pricePlanChangeInfo[i].id) {
+                  let compUpdated = await this.updatePriceComponent(pricePlanChangeInfo[i].priceComponents.modified[j], pricePlanChangeInfo[i]?.newValue.currency)
                   finalPriceComps.push(compUpdated)
-                } 
-                
+                }
+
                 console.log('The following price comp has been updated:')
                 console.log(pricePlanChangeInfo[i].priceComponents.modified[j])
               }
             }
             //Modificar el plan
             if (!pricePlanChangeInfo[i].id.startsWith('temp-id')) {
-              let updatedPricePlan = await this.updatePricePlan(pricePlanChangeInfo[i],finalPriceComps,pricePlanChangeInfo[i].modifiedFields);
-            
+              let updatedPricePlan = await this.updatePricePlan(pricePlanChangeInfo[i], finalPriceComps, pricePlanChangeInfo[i].modifiedFields);
+
               console.log('Modified price plan')
               console.log(updatedPricePlan)
             } else {
-              let createdPricePlan = await this.createBundledPricePlan(pricePlanChangeInfo[i],finalPriceComps);
+              let createdPricePlan = await this.createBundledPricePlan(pricePlanChangeInfo[i], finalPriceComps);
               const created = await lastValueFrom(this.api.postOfferingPrice(createdPricePlan));
               let index = basePayload.productOfferingPrice.findIndex(
                 (plan: any) => plan.id === pricePlanChangeInfo[i].id
@@ -934,6 +1004,28 @@ export class OfferComponent implements OnInit, OnDestroy{
           }
           break;
 
+        case 'contractDefinition': {
+          if (change.currentValue.dspCompatible) {
+            const edcTerm = basePayload.productOfferingTerm.find((term: any) => term.name === 'edc:contractDefinition');
+            if (edcTerm) {
+              edcTerm.accessPolicy = JSON.parse(change.currentValue.accessPolicy);
+              edcTerm.contractPolicy = JSON.parse(change.currentValue.contractPolicy);
+            } else {
+              basePayload.productOfferingTerm.push({
+                name: change.currentValue.name,
+                contractPolicy: change.currentValue.contractPolicy ? JSON.parse(change.currentValue.contractPolicy) : '',
+                accessPolicy: change.currentValue.accessPolicy ? JSON.parse(change.currentValue.accessPolicy) : '',
+                '@schemaLocation': environment.DSP_CONTRACT_DEFINITION_SCHEMA
+              })
+            }
+          } else {
+            basePayload.productOfferingTerm = basePayload.productOfferingTerm.filter(
+              (term: any) => term.name !== 'edc:contractDefinition'
+            );
+          }
+          break;
+        }
+
         case 'replication':
           // Actualizar configuración de replicación
           // TODO: Implementar cuando se tenga la estructura de replicación
@@ -959,12 +1051,12 @@ export class OfferComponent implements OnInit, OnDestroy{
           description: basePayload.productOfferingTerm[0].description
         }
       }
-      
+
       // Filtrar el resto de términos
       const otherTerms = this.offer.productOfferingTerm.filter(
         (term: any) => term.name !== 'License'
       ) ?? [];
-      
+
       // Reconstruir el array con el término de licencia en la posición 0
       basePayload.productOfferingTerm = [licenseTerm, ...otherTerms];
     }*/
@@ -975,14 +1067,20 @@ export class OfferComponent implements OnInit, OnDestroy{
       // Llamar a la API para actualizar la oferta
       await lastValueFrom(this.api.updateProductOffering(basePayload, this.offer.id));
       console.log('✅ Offer updated successfully');
-      this.loading=false;
+      this.loading = false;
       this.goBack();
     } catch (error: any) {
       console.error('❌ Error updating offer:', error);
       this.errorMessage = error?.error?.error ? 'Error: ' + error.error.error : 'An error occurred while updating the offer!';
-      this.loading=false;
+      this.loading = false;
       this.showError = true;
       setTimeout(() => (this.showError = false), 3000);
     }
   }
+
+  private isdEdcCompatible() {
+
+    const prodSpec = this.productOfferForm.controls['prodSpec'].value
+    return prodSpec && (prodSpec as any).externalId;
+  }
 }
diff --git a/src/app/shared/forms/offer/price-plans/price-component-drawer/price-component-drawer.component.ts b/src/app/shared/forms/offer/price-plans/price-component-drawer/price-component-drawer.component.ts
index ff835e23..b9c4d1f8 100644
--- a/src/app/shared/forms/offer/price-plans/price-component-drawer/price-component-drawer.component.ts
+++ b/src/app/shared/forms/offer/price-plans/price-component-drawer/price-component-drawer.component.ts
@@ -6,7 +6,7 @@ import { LocalStorageService } from 'src/app/services/local-storage.service';
 import {TranslateModule} from "@ngx-translate/core";
 import {NgClass} from "@angular/common";
 import { initFlowbite } from 'flowbite';
-import * as moment from 'moment';
+import moment from 'moment';
 import { certifications } from 'src/app/models/certification-standards.const';
 import { LoginInfo } from 'src/app/models/interfaces';
 
diff --git a/src/app/shared/forms/offer/price-plans/tier-pricing-drawer/tier-pricing-drawer.component.ts b/src/app/shared/forms/offer/price-plans/tier-pricing-drawer/tier-pricing-drawer.component.ts
index 88bfd8c7..5ca4f663 100644
--- a/src/app/shared/forms/offer/price-plans/tier-pricing-drawer/tier-pricing-drawer.component.ts
+++ b/src/app/shared/forms/offer/price-plans/tier-pricing-drawer/tier-pricing-drawer.component.ts
@@ -5,7 +5,7 @@ import {NgClass, NgForOf, NgIf} from "@angular/common";
 import { UsageServiceService } from 'src/app/services/usage-service.service';
 import { LocalStorageService } from 'src/app/services/local-storage.service';
 import { LoginInfo } from 'src/app/models/interfaces';
-import * as moment from 'moment';
+import moment from 'moment';
 
 interface SubRange {
   id: string;
diff --git a/src/app/shared/forms/offer/prod-spec/prod-spec.component.html b/src/app/shared/forms/offer/prod-spec/prod-spec.component.html
index 1f716292..934f68de 100644
--- a/src/app/shared/forms/offer/prod-spec/prod-spec.component.html
+++ b/src/app/shared/forms/offer/prod-spec/prod-spec.component.html
@@ -93,9 +93,11 @@
           </svg>
         </button>
         @if (loadingProdSpec_more) {
-          <svg aria-hidden="true" class="w-6 h-6 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400 ml-2" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M93.9676 39.0409C96.393 38.4038..." fill="currentFill"/>
-          </svg>
+          <div data-cy="loadMoreLoading" class="flex items-center justify-center ml-2">
+            <svg aria-hidden="true" class="w-6 h-6 text-gray-200 animate-spin dark:text-gray-600 fill-secondary-400" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M93.9676 39.0409C96.393 38.4038..." fill="currentFill"/>
+            </svg>
+          </div>
         }
       </div>
     }
diff --git a/src/app/shared/forms/offer/prod-spec/prod-spec.component.ts b/src/app/shared/forms/offer/prod-spec/prod-spec.component.ts
index 937ddc56..273c6762 100644
--- a/src/app/shared/forms/offer/prod-spec/prod-spec.component.ts
+++ b/src/app/shared/forms/offer/prod-spec/prod-spec.component.ts
@@ -113,18 +113,21 @@ export class ProdSpecComponent implements ControlValueAccessor, OnInit, OnDestro
       "partyId": this.partyId
     }
 
-    this.paginationService.getItemsPaginated(this.prodSpecPage, this.PROD_SPEC_LIMIT, next, this.prodSpecs,this.nextProdSpecs, options,
-      this.prodSpecService.getProdSpecByUser.bind(this.prodSpecService)).then(data => {
-        this.prodSpecPageCheck=data.page_check;
-        this.prodSpecs=data.items;
-        this.nextProdSpecs=data.nextItems;
-        this.prodSpecPage=data.page;
-        this.loadingProdSpec=false;
-        this.loadingProdSpec_more=false;
-      })
+    try {
+      const data = await this.paginationService.getItemsPaginated(this.prodSpecPage, this.PROD_SPEC_LIMIT, next, this.prodSpecs, this.nextProdSpecs, options,
+        this.prodSpecService.getProdSpecByUser.bind(this.prodSpecService));
+      this.prodSpecPageCheck=data.page_check;
+      this.prodSpecs=data.items;
+      this.nextProdSpecs=data.nextItems;
+      this.prodSpecPage=data.page;
+    } finally {
+      this.loadingProdSpec=false;
+      this.loadingProdSpec_more=false;
+    }
   }
 
   async nextProdSpec() {
+    this.loadingProdSpec_more = true;
     await this.getSellerProdSpecs(true);
   }
 
diff --git a/src/app/shared/forms/usage-spec/usage-spec.component.ts b/src/app/shared/forms/usage-spec/usage-spec.component.ts
index 4c7a3218..549282fd 100644
--- a/src/app/shared/forms/usage-spec/usage-spec.component.ts
+++ b/src/app/shared/forms/usage-spec/usage-spec.component.ts
@@ -8,7 +8,7 @@ import {components} from "src/app/models/product-catalog";
 import {EventMessageService} from "src/app/services/event-message.service";
 import {FormChangeState, PricePlanChangeState} from "../../../models/interfaces";
 import {Subscription} from "rxjs";
-import * as moment from 'moment';
+import moment from 'moment';
 import { certifications } from 'src/app/models/certification-standards.const';
 import { UsageSpecGeneralInfoComponent } from './usage-spec-general-info/usage-spec-general-info.component'
 import { UsageSpecMetricsComponent } from './usage-spec-metrics/usage-spec-metrics.component'
diff --git a/src/app/shared/header/header.component.ts b/src/app/shared/header/header.component.ts
index 6a9aa32e..c84df7e1 100644
--- a/src/app/shared/header/header.component.ts
+++ b/src/app/shared/header/header.component.ts
@@ -20,7 +20,7 @@ import {
 } from '@fortawesome/sharp-solid-svg-icons';
 import { TranslateService } from '@ngx-translate/core';
 import { initFlowbite } from 'flowbite';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';
diff --git a/src/app/validators/validators.ts b/src/app/validators/validators.ts
index 4afbf20c..72f463ca 100644
--- a/src/app/validators/validators.ts
+++ b/src/app/validators/validators.ts
@@ -33,3 +33,14 @@ export function noWhitespaceValidator(control: AbstractControl): ValidationError
   const isValid = !isWhitespace;
   return isValid ? null : { whitespace: true };
 }
+
+export function jsonValidator(control: AbstractControl): ValidationErrors | null {
+  const value = control.value;
+  if (!value || value.trim() === '') return null;
+  try {
+    JSON.parse(value);
+    return null;
+  } catch {
+    return { invalidJson: true };
+  }
+}
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index e0d59d18..3794f49c 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -2086,7 +2086,14 @@
     "_self_attestation": "Self Attestation:",
     "_close_modal": "Close modal",
     "_cancel": "Cancel",
-    "_upload": "Upload"
+    "_upload": "Upload",
+    "_dsp_endpoint_name": "Name",
+    "_dsp_endpoint_name_placeholder": "Endpoint name",
+    "_dsp_endpoint_url": "Endpoint URL",
+    "_dsp_endpoint_url_placeholder": "https://example.com/endpoint",
+    "_dsp_endpoint_description": "Description",
+    "_dsp_endpoint_description_placeholder": "Describe this endpoint...",
+    "_dsp_add_endpoint": "Add Endpoint"
   },
   "UPDATE_PROD_SPEC": {
     "_back": "Back",
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
index e0d59d18..5b51b4b0 100644
--- a/src/assets/i18n/es.json
+++ b/src/assets/i18n/es.json
@@ -2086,7 +2086,14 @@
     "_self_attestation": "Self Attestation:",
     "_close_modal": "Close modal",
     "_cancel": "Cancel",
-    "_upload": "Upload"
+    "_upload": "Upload",
+    "_dsp_endpoint_name": "Nombre",
+    "_dsp_endpoint_name_placeholder": "Nombre del endpoint",
+    "_dsp_endpoint_url": "URL del endpoint",
+    "_dsp_endpoint_url_placeholder": "https://ejemplo.com/endpoint",
+    "_dsp_endpoint_description": "Descripción",
+    "_dsp_endpoint_description_placeholder": "Describe este endpoint...",
+    "_dsp_add_endpoint": "Añadir endpoint"
   },
   "UPDATE_PROD_SPEC": {
     "_back": "Back",
diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts
index 5e9918fc..ec8f8cc7 100644
--- a/src/environments/environment.development.ts
+++ b/src/environments/environment.development.ts
@@ -108,5 +108,8 @@ export const environment = {
   AI_SEARCH_PROFILE: 'dome_prod',
   LEAR_URL: '',
   LAUNCH_VALIDATION_ENABLED: false,
-  TENDER_DEV_BUTTONS_OPEN_CLOSE_ENABLED: true
+  TENDER_DEV_BUTTONS_OPEN_CLOSE_ENABLED: true,
+  DSP_ENABLED: true,
+  DSP_CONTRACT_DEFINITION_SCHEMA: 'https://raw.githubusercontent.com/wistefan/edc-dsc/refs/heads/init/schemas/contract-definition.json',
+  DSP_SCHEMA: 'https://raw.githubusercontent.com/wistefan/edc-dsc/refs/heads/init/schemas/external-id.json'
 };
diff --git a/src/environments/environment.production.ts b/src/environments/environment.production.ts
index 0be96f1d..ad07cc76 100644
--- a/src/environments/environment.production.ts
+++ b/src/environments/environment.production.ts
@@ -107,5 +107,8 @@ export const environment = {
   AI_SEARCH_PROFILE: 'dome_dev2',
   LEAR_URL: '',
   LAUNCH_VALIDATION_ENABLED: false,
-  TENDER_DEV_BUTTONS_OPEN_CLOSE_ENABLED: false
+  TENDER_DEV_BUTTONS_OPEN_CLOSE_ENABLED: false,
+  DSP_ENABLED: false,
+  DSP_CONTRACT_DEFINITION_SCHEMA: 'https://raw.githubusercontent.com/wistefan/edc-dsc/refs/heads/init/schemas/contract-definition.json',
+  DSP_SCHEMA: 'https://raw.githubusercontent.com/wistefan/edc-dsc/refs/heads/init/schemas/external-id.json'
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index bbb71c2d..bdbe0897 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -107,5 +107,8 @@ export const environment = {
   AI_SEARCH_PROFILE: 'dome_prod',
   LEAR_URL: '',
   LAUNCH_VALIDATION_ENABLED: false,
-  TENDER_DEV_BUTTONS_OPEN_CLOSE_ENABLED: true
+  TENDER_DEV_BUTTONS_OPEN_CLOSE_ENABLED: true,
+  DSP_ENABLED: false,
+  DSP_CONTRACT_DEFINITION_SCHEMA: 'https://raw.githubusercontent.com/wistefan/edc-dsc/refs/heads/init/schemas/contract-definition.json',
+  DSP_SCHEMA: 'https://raw.githubusercontent.com/wistefan/edc-dsc/refs/heads/init/schemas/external-id.json'
 };
diff --git a/tsconfig.json b/tsconfig.json
index c93d0f1e..9049b707 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,9 +13,9 @@
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",