diff --git a/apps/datafeeder/src/app/app-routing.module.ts b/apps/datafeeder/src/app/app-routing.module.ts
index ca106c5939..29e37967a5 100644
--- a/apps/datafeeder/src/app/app-routing.module.ts
+++ b/apps/datafeeder/src/app/app-routing.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core'
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { UploadDataPageComponent } from './presentation/pages/upload-data-page/upload-data.page'
 import { AnalysisProgressPageComponent } from './presentation/pages/analysis-progress-page/analysis-progress.page'
@@ -50,5 +50,6 @@ const routes: Routes = [
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppRoutingModule {}
diff --git a/apps/datafeeder/src/app/app.component.html b/apps/datafeeder/src/app/app.component.html
index 3f1a5e7ba7..46e9de1d37 100644
--- a/apps/datafeeder/src/app/app.component.html
+++ b/apps/datafeeder/src/app/app.component.html
@@ -1,7 +1,2 @@
-<iframe
-  [style.height]="headerHeight"
-  [src]="headerSrc | safe: 'resourceUrl'"
-  scrolling="no"
-  frameborder="0"
-></iframe>
+<geor-header [style.height]="headerHeight" active-app="import"></geor-header>
 <router-outlet></router-outlet>
diff --git a/apps/datafeeder/src/app/app.component.spec.ts b/apps/datafeeder/src/app/app.component.spec.ts
index 9f8f6294a3..3aeff0c087 100644
--- a/apps/datafeeder/src/app/app.component.spec.ts
+++ b/apps/datafeeder/src/app/app.component.spec.ts
@@ -3,12 +3,14 @@ import { RouterTestingModule } from '@angular/router/testing'
 import { AppComponent } from './app.component'
 import { UtilSharedModule } from '@geonetwork-ui/util/shared'
 import SETTINGS from '../settings'
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [RouterTestingModule, UtilSharedModule],
       declarations: [AppComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents()
   })
 
@@ -31,5 +33,11 @@ describe('AppComponent', () => {
     it(`should have SETTINGS.headerSrc as src`, () => {
       expect(app.headerSrc).toEqual(SETTINGS.headerSrc)
     })
+    it(`should have SETTINGS.headerScript as script`, () => {
+      expect(app.headerScript).toEqual(SETTINGS.headerScript)
+    })
+    it(`should have SETTINGS.useLegacyHeader as useLegacyHeader`, () => {
+      expect(app.useLegacyHeader).toEqual(SETTINGS.useLegacyHeader)
+    })
   })
 })
diff --git a/apps/datafeeder/src/app/app.component.ts b/apps/datafeeder/src/app/app.component.ts
index e0dc21366e..910c85dfc9 100644
--- a/apps/datafeeder/src/app/app.component.ts
+++ b/apps/datafeeder/src/app/app.component.ts
@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, SecurityContext } from '@angular/core'
 import { ThemeService } from '@geonetwork-ui/util/shared'
 import SETTINGS from '../settings'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 
 @Component({
   selector: 'gn-ui-root',
@@ -11,8 +12,35 @@ export class AppComponent implements OnInit {
   title = 'datafeeder'
   headerSrc = SETTINGS.headerSrc
   headerHeight = SETTINGS.headerHeight
+  headerScript = SETTINGS.headerScript
+  useLegacyHeader = SETTINGS.useLegacyHeader
+  headerLogo = SETTINGS.headerLogo
 
+  constructor(private _sanitizer: DomSanitizer) {}
   ngOnInit() {
     ThemeService.applyCssVariables('#1EA9D5', '#EF7749', '#2E353A', '#fff')
+    this.loadScript()
+  }
+
+  transform(value: string): SafeHtml {
+    return this._sanitizer.sanitize(
+      SecurityContext.HTML,
+      this._sanitizer.bypassSecurityTrustUrl(value)
+    )
+  }
+
+  private loadScript() {
+    const georHeader = document.getElementsByTagName('geor-header')
+    if (georHeader[0]) {
+      georHeader[0].setAttribute('legacy-header', String(this.useLegacyHeader))
+      georHeader[0].setAttribute('legacy-url', this.headerSrc)
+      georHeader[0].setAttribute('logo-url', this.headerLogo)
+    }
+
+    const headerJSTag = document.createElement('script')
+    headerJSTag.type = 'text/javascript'
+    headerJSTag.async = true
+    headerJSTag.src = SETTINGS.headerScript
+    document.body.appendChild(headerJSTag)
   }
 }
diff --git a/apps/datafeeder/src/app/app.module.ts b/apps/datafeeder/src/app/app.module.ts
index fd93e37bd7..c7f46ef60e 100644
--- a/apps/datafeeder/src/app/app.module.ts
+++ b/apps/datafeeder/src/app/app.module.ts
@@ -1,5 +1,9 @@
 import { BrowserModule } from '@angular/platform-browser'
-import { importProvidersFrom, NgModule } from '@angular/core'
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  importProvidersFrom,
+  NgModule,
+} from '@angular/core'
 import { ApiModule, Configuration } from '@geonetwork-ui/data-access/datafeeder'
 import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
 import { StoreModule } from '@ngrx/store'
@@ -89,5 +93,6 @@ export function apiConfigurationFactory() {
   ],
   providers: [importProvidersFrom(FeatureAuthModule)],
   bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppModule {}
diff --git a/apps/datafeeder/src/index.html b/apps/datafeeder/src/index.html
index c39b4d6cad..4f23c949dd 100644
--- a/apps/datafeeder/src/index.html
+++ b/apps/datafeeder/src/index.html
@@ -11,6 +11,10 @@
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Permanent+Marker&display=swap"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
+      rel="stylesheet"
+    />
     <script src="assets/env.js"></script>
   </head>
   <body class="m-0 h-full flex flex-col">
diff --git a/apps/datafeeder/src/settings.ts b/apps/datafeeder/src/settings.ts
index 90168dc5f4..226d3218b7 100644
--- a/apps/datafeeder/src/settings.ts
+++ b/apps/datafeeder/src/settings.ts
@@ -5,7 +5,10 @@ const SETTING_API = `${environment.apiUrl}/config/frontend`
 
 class Settings {
   headerHeight = '90px'
-  headerSrc = '/header/?active=import'
+  headerSrc = '/header/'
+  headerScript = 'https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js'
+  useLegacyHeader = false
+  headerLogo = 'https://www.georchestra.org/public/georchestra-logo.svg'
   encodings = [
     {
       label: 'UTF-8',
diff --git a/support-services/datafeeder/datadir/default.properties b/support-services/datafeeder/datadir/default.properties
index 7b3627c308..76326d2a3b 100644
--- a/support-services/datafeeder/datadir/default.properties
+++ b/support-services/datafeeder/datadir/default.properties
@@ -3,6 +3,9 @@ instanceName=geOrchestra
 language=en
 headerHeight=90
 headerUrl=/header/
+headerScript=https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js
+headerLogo=https://www.georchestra.org/public/georchestra-logo.svg
+useLegacyHeader=false
 administratorEmail=georchestra@georchestra-127-0-1-1.traefik.me
 ### PostgreSQL properties
 pgsqlHost=database