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 30cdc4d61d..be91e024a8 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
@@ -28,13 +28,12 @@
   </gn-ui-api-card>
 </gn-ui-carousel>
 <div
-  class="content transition-all duration-300 w-screen mx-auto -ml-[calc(50vw-50%)] overflow-hidden"
+  *ngIf="displayApiIgnForm"
+  class="fixed inset-0 overflow-hidden justify-center items-center flex z-50"
   [ngClass]="selectedApiLink ? 'ease-in' : 'ease-out'"
-  [style.maxHeight]="maxHeight"
-  [style.opacity]="opacity"
 >
-  <div class="bg-primary-opacity-10 py-8">
-    <div class="flex flex-col px-4 gap-8 container-lg lg:mx-auto">
+  <div class="py-8 w-full h-full bg-slate-200 bg-opacity-50 w-full">
+    <div class="flex flex-col px-4 gap-8 container-lg lg:mx-auto bg-white">
       <div class="flex flex-wrap justify-between sm:mb-2 ng-star-inserted">
         <p
           class="text-[21px] text-title font-title"
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 72c1970d3e..786a172fce 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
@@ -18,8 +18,8 @@ import { CarouselComponent } from '@geonetwork-ui/ui/layout'
 export class RecordApisComponent implements OnInit {
   @ViewChild(CarouselComponent) carousel: CarouselComponent
 
-  maxHeight = '0px'
-  opacity = 0
+  maxHeight = '700px'
+  opacity = 1
   displayApiIgnForm: boolean
   selectedApiLink: DatasetServiceDistribution
 
@@ -31,8 +31,8 @@ export class RecordApisComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.setStyle(undefined)
     this.selectedApiLink = undefined
+    this.displayApiIgnForm = false
   }
 
   get hasPagination() {
@@ -55,17 +55,11 @@ export class RecordApisComponent implements OnInit {
     this.displayApiIgnForm =
       link.accessServiceProtocol === 'GPFDL' ? true : false
     this.selectedApiLink = link
-    this.setStyle(link)
   }
 
   closeRecordApiForm() {
     this.selectedApiLink = undefined
-    this.setStyle(undefined)
-  }
-
-  setStyle(link: DatasetServiceDistribution) {
-    this.maxHeight = link === undefined ? '0px' : '700px'
-    this.opacity = link === undefined ? 0 : 1
+    this.displayApiIgnForm = false
   }
 
   changeStepOrPage(direction: string) {