diff --git a/libs/feature/record/src/lib/map-view/map-view.component.html b/libs/feature/record/src/lib/map-view/map-view.component.html
index fb1da0662..09a42dd1d 100644
--- a/libs/feature/record/src/lib/map-view/map-view.component.html
+++ b/libs/feature/record/src/lib/map-view/map-view.component.html
@@ -31,8 +31,46 @@
       >
         <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
       </button>
+      <gn-ui-button
+        type="primary"
+        (buttonClick)="resetSelection()"
+        extraClass="rounded absolute right-[0.5em] p-2 text-xs"
+      >
+        <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
+      </gn-ui-button>
       <gn-ui-feature-detail [feature]="selection"></gn-ui-feature-detail>
     </div>
+
+    <div
+      class="top-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
+      [ngClass]="{ 'right-[1em]': !selection, 'right-[16em]': selection }"
+      [hidden]="!showLegend || !legendExists"
+    >
+      <div class="flex justify-between items-center mb-2">
+        <div class="text-primary font-bold">Legend</div>
+        <gn-ui-button
+          type="primary"
+          (buttonClick)="toggleLegend()"
+          extraClass="rounded p-2 text-xs"
+        >
+          <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
+        </gn-ui-button>
+      </div>
+      <gn-ui-map-legend
+        [context]="mapContext$ | async"
+        (legendStatusChange)="onLegendStatusChange($event)"
+      ></gn-ui-map-legend>
+    </div>
+
+    <gn-ui-button
+      *ngIf="!showLegend && legendExists && !selection"
+      type="primary"
+      (buttonClick)="toggleLegend()"
+      extraClass="absolute top-[1em] right-[1em] rounded p-2 text-sm"
+    >
+      Legend
+    </gn-ui-button>
+
     <gn-ui-loading-mask
       *ngIf="loading"
       class="absolute inset-0"
diff --git a/libs/feature/record/src/lib/map-view/map-view.component.ts b/libs/feature/record/src/lib/map-view/map-view.component.ts
index 9b16ef2ab..2ea87e968 100644
--- a/libs/feature/record/src/lib/map-view/map-view.component.ts
+++ b/libs/feature/record/src/lib/map-view/map-view.component.ts
@@ -42,13 +42,14 @@ import { Feature } from 'geojson'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
 import { matClose } from '@ng-icons/material-icons/baseline'
 import { CommonModule } from '@angular/common'
-import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs'
+import { ButtonComponent, DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs'
 import { TranslateModule } from '@ngx-translate/core'
 import { ExternalViewerButtonComponent } from '../external-viewer-button/external-viewer-button.component'
 import {
   LoadingMaskComponent,
   PopupAlertComponent,
 } from '@geonetwork-ui/ui/widgets'
+import { MapLegendComponent } from '../../../../../ui/map/src/lib/components/map-legend/map-legend.component'
 
 @Component({
   selector: 'gn-ui-map-view',
@@ -66,6 +67,8 @@ import {
     LoadingMaskComponent,
     NgIconComponent,
     ExternalViewerButtonComponent,
+    MapLegendComponent,
+    ButtonComponent,
   ],
   viewProviders: [provideIcons({ matClose })],
 })
@@ -73,6 +76,19 @@ export class MapViewComponent implements AfterViewInit {
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   selection: Feature
+  showLegend = true
+  legendExists = false
+
+  toggleLegend() {
+    this.showLegend = !this.showLegend
+  }
+
+  onLegendStatusChange(status: boolean) {
+    this.legendExists = status
+    if (!status) {
+      this.showLegend = false
+    }
+  }
 
   compatibleMapLinks$ = combineLatest([
     this.mdViewFacade.mapApiLinks$,
diff --git a/libs/ui/map/src/lib/components/map-legend/map-legend.component.css b/libs/ui/map/src/lib/components/map-legend/map-legend.component.css
new file mode 100644
index 000000000..f55c49032
--- /dev/null
+++ b/libs/ui/map/src/lib/components/map-legend/map-legend.component.css
@@ -0,0 +1,3 @@
+.geosdk--legend-container {
+  overflow: auto;
+}
diff --git a/libs/ui/map/src/lib/components/map-legend/map-legend.component.html b/libs/ui/map/src/lib/components/map-legend/map-legend.component.html
new file mode 100644
index 000000000..35ed987a8
--- /dev/null
+++ b/libs/ui/map/src/lib/components/map-legend/map-legend.component.html
@@ -0,0 +1 @@
+<div *ngIf="legendHTML" [innerHTML]="legendHTML.outerHTML"></div>
diff --git a/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts b/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts
new file mode 100644
index 000000000..4e87823cb
--- /dev/null
+++ b/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { MapLegendComponent } from './map-legend.component'
+
+describe('MapLegendComponent', () => {
+  let component: MapLegendComponent
+  let fixture: ComponentFixture<MapLegendComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MapLegendComponent],
+    })
+    fixture = TestBed.createComponent(MapLegendComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts b/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts
new file mode 100644
index 000000000..11325d56d
--- /dev/null
+++ b/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts
@@ -0,0 +1,36 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core'
+import { MapContext } from '@geospatial-sdk/core'
+import { createLegendFromLayer } from '@geospatial-sdk/legend'
+import { NgIf } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-map-legend',
+  templateUrl: './map-legend.component.html',
+  standalone: true,
+  styleUrls: ['./map-legend.component.css'],
+  encapsulation: ViewEncapsulation.None,
+  imports: [NgIf],
+})
+export class MapLegendComponent implements OnChanges {
+  @Input() context: MapContext | null
+  @Output() legendStatusChange = new EventEmitter<boolean>()
+  legendHTML: HTMLElement | false
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if ('context' in changes && !changes['context'].isFirstChange()) {
+      const mapContectLayer = changes['context'].currentValue.layers[0]
+      console.log(mapContectLayer)
+      this.legendHTML = await createLegendFromLayer(mapContectLayer)
+      console.log(this.legendHTML)
+      this.legendStatusChange.emit(!!this.legendHTML)
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 11cb74711..7bdfb5662 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@camptocamp/ogc-client": "1.1.1-dev.3e2d3cc",
         "@geospatial-sdk/core": "0.0.5-dev.29",
         "@geospatial-sdk/geocoding": "0.0.5-dev.29",
+        "@geospatial-sdk/legend": "^0.0.5-dev.31",
         "@geospatial-sdk/openlayers": "0.0.5-dev.29",
         "@ltd/j-toml": "~1.35.2",
         "@messageformat/core": "^3.0.1",
@@ -4510,6 +4511,11 @@
       "resolved": "https://registry.npmjs.org/@geospatial-sdk/geocoding/-/geocoding-0.0.5-dev.29.tgz",
       "integrity": "sha512-WcxV6Ys6xN7AFLm4UOXkFspj/osCZ2f/OP3LiC63W/0MdwiAg3ajRldVX5pfDyPx2GTKv0ZYcxuFzi8P7ZLFaw=="
     },
+    "node_modules/@geospatial-sdk/legend": {
+      "version": "0.0.5-dev.31",
+      "resolved": "https://registry.npmjs.org/@geospatial-sdk/legend/-/legend-0.0.5-dev.31.tgz",
+      "integrity": "sha512-pxy1bm6KSqkIH1KVSrBBz9fxxhzmv246bKQQDFXfkPmVaaRnNlpytq3QMQoTUb8XiOFP2p7gWR909wfmHfsNDQ=="
+    },
     "node_modules/@geospatial-sdk/openlayers": {
       "version": "0.0.5-dev.29",
       "resolved": "https://registry.npmjs.org/@geospatial-sdk/openlayers/-/openlayers-0.0.5-dev.29.tgz",
diff --git a/package.json b/package.json
index ac758e4e4..be596d67a 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "@camptocamp/ogc-client": "1.1.1-dev.3e2d3cc",
     "@geospatial-sdk/core": "0.0.5-dev.29",
     "@geospatial-sdk/geocoding": "0.0.5-dev.29",
+    "@geospatial-sdk/legend": "^0.0.5-dev.31",
     "@geospatial-sdk/openlayers": "0.0.5-dev.29",
     "@ltd/j-toml": "~1.35.2",
     "@messageformat/core": "^3.0.1",