diff --git a/apps/datahub-e2e/src/e2e/home.cy.ts b/apps/datahub-e2e/src/e2e/home.cy.ts
index cbab84159c..339b81e756 100644
--- a/apps/datahub-e2e/src/e2e/home.cy.ts
+++ b/apps/datahub-e2e/src/e2e/home.cy.ts
@@ -78,7 +78,7 @@ describe('home', () => {
     })
   })
 
-  describe.only('my favorites button', () => {
+  describe('my favorites button', () => {
     beforeEach(() => {
       cy.login()
       cy.clearFavorites()
diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.html b/apps/datahub/src/app/record/record-apis/record-apis.component.html
index 23dd9ac594..8b0c13d6fa 100644
--- a/apps/datahub/src/app/record/record-apis/record-apis.component.html
+++ b/apps/datahub/src/app/record/record-apis/record-apis.component.html
@@ -27,3 +27,27 @@
   >
   </gn-ui-api-card>
 </gn-ui-carousel>
+<div
+  class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
+  *ngIf="facade.selectedApiLink$ | async"
+>
+  <div class="flex flex-col container-lg px-4 lg:mx-auto gap-6">
+    <div class="flex flex-wrap justify-between mb-6 sm:mb-2 ng-star-inserted">
+      <p class="text-[28px] text-title font-title" translate>
+        record.metadata.api.form.title
+      </p>
+      <button type="button" class="text-main" (click)="closeForm()">
+        <span class="text-sm text-primary" translate
+          >record.metadata.api.form.closeButton</span
+        >
+        <mat-icon
+          class="material-symbols-outlined ml-1 align-middle leading-none text-primary"
+          >close</mat-icon
+        >
+      </button>
+    </div>
+    <gn-ui-record-api-form
+      [apiLink]="facade.selectedApiLink$ | async"
+    ></gn-ui-record-api-form>
+  </div>
+</div>
diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts b/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts
index da34ff5128..04e0592148 100644
--- a/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts
+++ b/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts
@@ -51,4 +51,12 @@ describe('RecordApisComponent', () => {
       expect(apiLink).toEqual(serviceDistributionMock)
     })
   })
+
+  describe('#closeForm', () => {
+    it('should pass undefined to facade.selectedApiLink$', async () => {
+      component.closeRecordApiForm()
+      const apiLink = await firstValueFrom(facade.selectedApiLink$)
+      expect(apiLink).toBeUndefined()
+    })
+  })
 })
diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.ts b/apps/datahub/src/app/record/record-apis/record-apis.component.ts
index 7d0f8928f1..3b6d1ddef4 100644
--- a/apps/datahub/src/app/record/record-apis/record-apis.component.ts
+++ b/apps/datahub/src/app/record/record-apis/record-apis.component.ts
@@ -1,10 +1,4 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  Output,
-  EventEmitter,
-  Input,
-} from '@angular/core'
+import { Component, ChangeDetectionStrategy } from '@angular/core'
 import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/model/record'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
@@ -20,4 +14,8 @@ export class RecordApisComponent {
   openRecordApiForm(link: DatasetServiceDistribution) {
     this.facade.selectedApiLink$.next(link)
   }
+
+  closeRecordApiForm() {
+    this.facade.selectedApiLink$.next(undefined)
+  }
 }
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
index 757db1212f..e310d7e4c9 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -127,30 +127,6 @@
       ></datahub-record-apis>
     </div>
   </div>
-  <div
-    class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
-    *ngIf="facade.selectedApiLink$ | async"
-  >
-    <div class="flex flex-col container-lg px-4 lg:mx-auto gap-6">
-      <div class="flex flex-wrap justify-between mb-6 sm:mb-2 ng-star-inserted">
-        <p class="text-[28px] text-title font-title" translate>
-          record.metadata.api.form.title
-        </p>
-        <button type="button" class="text-main" (click)="closeForm()">
-          <span class="text-sm text-primary" translate
-            >record.metadata.api.form.closeButton</span
-          >
-          <mat-icon
-            class="material-symbols-outlined ml-1 align-middle leading-none text-primary"
-            >close</mat-icon
-          >
-        </button>
-      </div>
-      <gn-ui-record-api-form
-        [apiLink]="facade.selectedApiLink$ | async"
-      ></gn-ui-record-api-form>
-    </div>
-  </div>
 
   <div id="related-records" *ngIf="displayRelated$ | async">
     <div>
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts
index d0dacda8c4..f750b16e12 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts
@@ -647,12 +647,4 @@ describe('RecordMetadataComponent', () => {
       })
     })
   })
-
-  describe('#closeForm', () => {
-    it('should pass undefined to facade.selectedApiLink$', async () => {
-      component.closeForm()
-      const apiLink = await firstValueFrom(facade.selectedApiLink$)
-      expect(apiLink).toBeUndefined()
-    })
-  })
 })
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
index 9863f3b691..f703214e67 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
@@ -1,20 +1,11 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-} from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { SourcesService } from '@geonetwork-ui/feature/catalog'
 import { SearchService } from '@geonetwork-ui/feature/search'
 import { ErrorType, MetadataQualityDisplay } from '@geonetwork-ui/ui/elements'
 import { BehaviorSubject, combineLatest } from 'rxjs'
 import { filter, map, mergeMap } from 'rxjs/operators'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
-import {
-  Organization,
-  DatasetServiceDistribution,
-} from '@geonetwork-ui/common/domain/model/record'
+import { Organization } from '@geonetwork-ui/common/domain/model/record'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
 @Component({
@@ -25,7 +16,6 @@ import { MdViewFacade } from '@geonetwork-ui/feature/record'
 })
 export class RecordMetadataComponent {
   @Input() metadataQualityDisplay: MetadataQualityDisplay
-  @Output() apiLink = new EventEmitter<DatasetServiceDistribution>()
 
   displayMap$ = combineLatest([
     this.facade.mapApiLinks$,
@@ -94,10 +84,6 @@ export class RecordMetadataComponent {
       : this.facade.selectedApiLink$.next(val)
   }
 
-  closeForm() {
-    this.facade.selectedApiLink$.next(undefined)
-  }
-
   get hasMetadataQualityWidget() {
     return this.metadataQualityDisplay?.widget === true
   }
diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.html b/libs/ui/elements/src/lib/api-card/api-card.component.html
index 26fb22ad2f..520576df97 100644
--- a/libs/ui/elements/src/lib/api-card/api-card.component.html
+++ b/libs/ui/elements/src/lib/api-card/api-card.component.html
@@ -22,7 +22,7 @@
       <button
         *ngIf="displayApiFormButton"
         type="button"
-        (click)="openPanel()"
+        (click)="openRecordApiFormPanel()"
         [ngClass]="{
           'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
             displayText
diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.spec.ts b/libs/ui/elements/src/lib/api-card/api-card.component.spec.ts
index 402012b35d..2da1df059b 100644
--- a/libs/ui/elements/src/lib/api-card/api-card.component.spec.ts
+++ b/libs/ui/elements/src/lib/api-card/api-card.component.spec.ts
@@ -36,7 +36,7 @@ describe('ApiCardComponent', () => {
   })
 
   it('should toggle currentlyActive and emit openRecordApiForm event', () => {
-    component.openPanel()
+    component.openRecordApiFormPanel()
 
     expect(component.currentlyActive).toBe(true)
     expect(openRecordApiFormEmit.emit).toHaveBeenCalled()
diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.ts b/libs/ui/elements/src/lib/api-card/api-card.component.ts
index 1582f48990..e6fd0ce640 100644
--- a/libs/ui/elements/src/lib/api-card/api-card.component.ts
+++ b/libs/ui/elements/src/lib/api-card/api-card.component.ts
@@ -34,7 +34,7 @@ export class ApiCardComponent implements OnInit, OnChanges {
       changes.currentLink.currentValue === this.link ? true : false
   }
 
-  openPanel() {
+  openRecordApiFormPanel() {
     this.currentlyActive = !this.currentlyActive
     this.openRecordApiForm.emit(this.currentlyActive ? this.link : undefined)
   }