diff --git a/Dockerfile b/Dockerfile
index 588e1efca446da79f6d454c1b7c3153522e9117b..08353ee6c4c80b9763017a1aac712714c5048e74 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -6,6 +6,9 @@ ENV BACKEND_URL=${BACKEND_URL}
 ARG USE_LOGO
 ENV USE_LOGO=${USE_LOGO:-hbp}
 
+ARG DATASET_PREVIEW_URL
+ENV DATASET_PREVIEW_URL=${DATASET_PREVIEW_URL:-https://hbp-kg-dataset-previewer.apps.hbp.eu/datasetPreview}
+
 COPY . /iv
 WORKDIR /iv
 
diff --git a/package.json b/package.json
index 3800114bcea82a892be260eae8e04a33ad1bf79a..25d3a3cae51ff5d0c39602c16c01c30513858773 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "karma-jasmine": "^2.0.1",
     "karma-typescript": "^4.1.1",
     "karma-webpack": "^3.0.0",
-    "kg-dataset-previewer": "0.0.8",
+    "kg-dataset-previewer": "0.0.10",
     "lodash.merge": "^4.6.2",
     "mini-css-extract-plugin": "^0.8.0",
     "ngx-bootstrap": "3.0.1",
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 02a93522455a15dd01e1ee5d6e04764d8a831db9..d1a50e4f9da121741ad3bb98718dbdaabdc9cd9a 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -146,7 +146,8 @@
         <!-- TODO Potentially implementing plugin contextual info -->
       </div>
 
-      <div fixedMouseContextualContainerDirective>
+      <div fixedMouseContextualContainerDirective
+        #fixedContainer="iavFixedMouseCtxContainer">
 
         <!-- on click segment menu -->
         <ng-container *ngIf="(onhoverSegmentsForFixed$ | async) as onHoverSegments">
@@ -172,6 +173,8 @@
           
           <landmark-ui
             class="pe-all"
+            (relayout)="fixedContainer.recalculatePosition()"
+            [fullId]="onHoverLandmark.fullId"
             [name]="onHoverLandmark.name"
             [datasets]="onHoverLandmark.dataset">
 
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 0ff2cabc49fc76b7c7bbed5c19ac95d6c91f7eda..861ee385ad2935796d8d70b1835cf606bedf2705 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -697,4 +697,10 @@ body::after
 .o-0
 {
   opacity: 0.0!important;
-}
\ No newline at end of file
+}
+
+kg-dataset-previewer > img
+{
+  width: inherit;
+  height: inherit;
+}
diff --git a/src/ui/databrowserModule/singleDataset/datasetPreviews/datasetPreviewsList/datasetPreviewList.component.ts b/src/ui/databrowserModule/singleDataset/datasetPreviews/datasetPreviewsList/datasetPreviewList.component.ts
index e7844a95db69d0df4e9d2b6307d7cae6704c4ba7..7fcdb4ae1b2419b9e664f476654973ee0ffeae9b 100644
--- a/src/ui/databrowserModule/singleDataset/datasetPreviews/datasetPreviewsList/datasetPreviewList.component.ts
+++ b/src/ui/databrowserModule/singleDataset/datasetPreviews/datasetPreviewsList/datasetPreviewList.component.ts
@@ -3,6 +3,7 @@ import { ViewerPreviewFile } from "src/services/state/dataStore.store";
 import { Store, select } from "@ngrx/store";
 import { IavRootStoreInterface } from "src/services/stateStore.service";
 import { Observable } from "rxjs";
+import { DS_PREVIEW_URL } from 'src/util/constants'
 
 @Component({
   selector: 'dataset-preview-list',
@@ -30,6 +31,8 @@ export class DatasetPreviewList{
   @Input()
   kgId: string
 
+  public DS_PREVIEW_URL = DS_PREVIEW_URL
+
   handleKgDsPrvUpdated(event: CustomEvent){
     const { detail } = event
     const { datasetFiles, loadingFlag } = detail
diff --git a/src/ui/databrowserModule/singleDataset/datasetPreviews/datasetPreviewsList/datasetPreviewList.template.html b/src/ui/databrowserModule/singleDataset/datasetPreviews/datasetPreviewsList/datasetPreviewList.template.html
index a92572cd75eb656dc60f388d0f4bd22c807402c3..25afd1d18921e98c59b6f1c41ecd2449cfeafc6d 100644
--- a/src/ui/databrowserModule/singleDataset/datasetPreviews/datasetPreviewsList/datasetPreviewList.template.html
+++ b/src/ui/databrowserModule/singleDataset/datasetPreviews/datasetPreviewsList/datasetPreviewList.template.html
@@ -1,4 +1,5 @@
 <kg-dataset-list
+  [backendUrl]="DS_PREVIEW_URL"
   (kgDsPrvUpdated)="handleKgDsPrvUpdated($event)"
   class="d-none"
   [kgId]="kgId">
diff --git a/src/ui/databrowserModule/singleDataset/singleDataset.base.ts b/src/ui/databrowserModule/singleDataset/singleDataset.base.ts
index 510232f2495fd069c13e931b2938773603e981e1..3ca5b426c11bbea6527dfe33d4da476c12a2a56a 100644
--- a/src/ui/databrowserModule/singleDataset/singleDataset.base.ts
+++ b/src/ui/databrowserModule/singleDataset/singleDataset.base.ts
@@ -6,6 +6,8 @@ import { HumanReadableFileSizePipe } from "src/util/pipes/humanReadableFileSize.
 import { DatabrowserService } from "../databrowser.service";
 import { KgSingleDatasetService } from "../kgSingleDatasetService.service";
 
+import { DS_PREVIEW_URL } from 'src/util/constants'
+
 export {
   DatabrowserService,
   KgSingleDatasetService,
@@ -34,6 +36,8 @@ export class SingleDatasetBase implements OnInit {
   public preview: boolean = false
   private humanReadableFileSizePipe: HumanReadableFileSizePipe = new HumanReadableFileSizePipe()
 
+  public DS_PREVIEW_URL = DS_PREVIEW_URL
+
   /**
    * sic!
    */
diff --git a/src/ui/landmarkUI/landmarkUI.component.ts b/src/ui/landmarkUI/landmarkUI.component.ts
index 26656fd8a4f3caea7afdc75c5c4e7c6e5522a5d0..4489e97018f803361d77b293284a364e3b8f6209 100644
--- a/src/ui/landmarkUI/landmarkUI.component.ts
+++ b/src/ui/landmarkUI/landmarkUI.component.ts
@@ -1,16 +1,71 @@
-import { Component, Input } from "@angular/core";
-import { IDataEntry } from "src/services/stateStore.service";
+import { Component, Input, OnChanges, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, AfterContentChecked } from "@angular/core";
+import { IDataEntry } from "src/services/stateStore.service"; 
+import { GetKgSchemaIdFromFullIdPipe } from 'src/ui/databrowserModule/util/getKgSchemaIdFromFullId.pipe'
+import { AtlasViewerConstantsServices } from "../databrowserModule/singleDataset/singleDataset.base";
+import { Observable } from "rxjs";
+import { DS_PREVIEW_URL } from 'src/util/constants'
 
 @Component({
   selector: 'landmark-ui',
   templateUrl: './landmarkUI.template.html',
   styleUrls: [
     './landmarkUI.style.css'
-  ]
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 
-export class LandmarkUIComponent{
+export class LandmarkUIComponent implements OnChanges, AfterContentChecked{
   @Input() name: string
   @Input() fullId: string
   @Input() datasets: Partial<IDataEntry>[]
+
+  @Output() relayout: EventEmitter<any> = new EventEmitter()
+
+  private pipe = new GetKgSchemaIdFromFullIdPipe()
+
+  public DS_PREVIEW_URL = DS_PREVIEW_URL
+
+  public previewFilesMap: Map<string, any[]> = new Map()
+  public previewFiles: any[] = []
+
+  handleKgDsPrvUpdate(event:CustomEvent, datasetKgId: string){
+    const { detail } = event
+    const { datasetFiles } = detail
+
+    this.previewFilesMap.set(datasetKgId, datasetFiles)
+
+    this.previewFiles = []
+
+    for (const [datasetKgId, previewFiles] of Array.from(this.previewFilesMap)){
+      for (const singlePreviewFile of previewFiles){
+        this.previewFiles.push({
+          ...singlePreviewFile,
+          datasetKgId
+        })
+      }
+    }
+    this.cdr.markForCheck()
+  }
+
+  public filterCriteria: string
+  ngOnChanges(){
+    this.filterCriteria = null
+    if (!this.fullId) return
+    const [kgSchema, kgId] = this.pipe.transform(this.fullId)
+    this.filterCriteria = JSON.stringify([ `${kgSchema}/${kgId}` ])
+  }
+
+  // TODO need to optimise this. This calls way too frequently.
+  ngAfterContentChecked(){
+    this.relayout.emit()
+  }
+
+  public darktheme$: Observable<boolean>
+
+  constructor(
+    constantService: AtlasViewerConstantsServices,
+    private cdr: ChangeDetectorRef
+  ){
+    this.darktheme$ = constantService.darktheme$
+  }
 }
\ No newline at end of file
diff --git a/src/ui/landmarkUI/landmarkUI.style.css b/src/ui/landmarkUI/landmarkUI.style.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..757b1a7bcba50d2da823755e085849b453bff61a 100644
--- a/src/ui/landmarkUI/landmarkUI.style.css
+++ b/src/ui/landmarkUI/landmarkUI.style.css
@@ -0,0 +1,21 @@
+kg-dataset-previewer
+{
+  height: 20em;
+  width: 30em;
+}
+.scroll-snap-container
+{
+  scroll-snap-type: x mandatory;
+  scroll-padding-left: 1em;
+  scroll-padding-right: 1em;
+}
+
+.scroll-snap-container > .scroll-snap-child
+{
+  scroll-snap-align: center;
+}
+
+.w-30em
+{
+  width:30em!important;
+}
\ No newline at end of file
diff --git a/src/ui/landmarkUI/landmarkUI.template.html b/src/ui/landmarkUI/landmarkUI.template.html
index 2b6c66d6cf722c22bdbe226265885b861944d96d..46085769ecdd1ea45a56ef7cc7f05a6bf690744f 100644
--- a/src/ui/landmarkUI/landmarkUI.template.html
+++ b/src/ui/landmarkUI/landmarkUI.template.html
@@ -10,8 +10,40 @@
       spatial landmark
     </span>
   </mat-card-subtitle>
+
+  <div class="scroll-snap-container w-100 d-flex flex-row w-30em overflow-auto" mat-card-image>
+    <div *ngFor="let dsPreview of previewFiles"
+      class="scroll-snap-child w-30em">
+      <kg-dataset-previewer
+        [darkmode]="darktheme$ | async"
+        [filename]="dsPreview.filename"
+        [kgId]="dsPreview.datasetKgId"
+        [backendUrl]="DS_PREVIEW_URL">
+      </kg-dataset-previewer>
+    </div>
+
+  </div>
   <mat-card-content>
 
+    <!-- preview -->
+    <div>
+      <small class="text-muted">
+        Dataset preview
+      </small>
+
+      <ng-container *ngFor="let dataset of datasets; let index = index">
+        <kg-dataset-list
+          class="d-none"
+          [backendUrl]="DS_PREVIEW_URL"
+          [filterCriteriaProp]="filterCriteria"
+          *ngIf="dataset.fullId | getKgSchemaIdFromFullIdPipe as kgSchemaId"
+          (kgDsPrvUpdated)="handleKgDsPrvUpdate($event, kgSchemaId[1])"
+          [kgId]="kgSchemaId[1]">
+
+        </kg-dataset-list>
+      </ng-container>
+    </div>
+
     <hr class="text-muted">
     <!-- associated datasets -->
     <div>
diff --git a/src/ui/searchSideNav/searchSideNav.component.ts b/src/ui/searchSideNav/searchSideNav.component.ts
index 8fdddeea8da25117a0a4e48940bbde47976a3fe0..2bbacbb6e0e8ede1e19f55d4e7102ae237301fcd 100644
--- a/src/ui/searchSideNav/searchSideNav.component.ts
+++ b/src/ui/searchSideNav/searchSideNav.component.ts
@@ -14,6 +14,7 @@ import { IavRootStoreInterface, SELECT_REGIONS } from "src/services/stateStore.s
 import { LayerBrowser } from "../layerbrowser/layerbrowser.component";
 import { trackRegionBy } from '../viewerStateController/regionHierachy/regionHierarchy.component'
 import { determinePreviewFileType, PREVIEW_FILE_TYPES } from "../databrowserModule/preview/previewFileIcon.pipe";
+import { DS_PREVIEW_URL } from 'src/util/constants'
 
 @Component({
   selector: 'search-side-nav',
@@ -41,6 +42,8 @@ export class SearchSideNav implements OnDestroy {
 
   public darktheme$: Observable<boolean>
 
+  public DS_PREVIEW_URL = DS_PREVIEW_URL
+
   constructor(
     public dialog: MatDialog,
     private store$: Store<IavRootStoreInterface>,
diff --git a/src/ui/searchSideNav/searchSideNav.template.html b/src/ui/searchSideNav/searchSideNav.template.html
index 5628e3aaf482e4d4017bec3d0e8924c969316e29..c2d7ecd593457b1b9149123cb55943046514e12a 100644
--- a/src/ui/searchSideNav/searchSideNav.template.html
+++ b/src/ui/searchSideNav/searchSideNav.template.html
@@ -175,7 +175,7 @@
     [darkmode]="darktheme$ | async"
     [filename]="previewFilename"
     [kgId]="previewKgId"
-    kg-ds-prv-backend-url="https://hbp-kg-dataset-previewer.apps.hbp.eu/datasetPreview">
+    [backendUrl]="DS_PREVIEW_URL">
 
   </kg-dataset-previewer>
 </ng-template>
\ No newline at end of file
diff --git a/src/util/constants.ts b/src/util/constants.ts
index d43935864e7a384045bc4163bd4518ffc10d6ec0..e9d16f04d6a432b054b425702525bfbcf6304342 100644
--- a/src/util/constants.ts
+++ b/src/util/constants.ts
@@ -11,3 +11,4 @@ export const LOCAL_STORAGE_CONST = {
 
 export const COOKIE_VERSION = '0.3.0'
 export const KG_TOS_VERSION = '0.3.0'
+export const DS_PREVIEW_URL = DATASET_PREVIEW_URL
\ No newline at end of file
diff --git a/src/util/directives/FixedMouseContextualContainerDirective.directive.ts b/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
index d12fdc160d4d1600531fa4fe9b71d7168c557974..113bc0650d13bbea99dbf3527a979a35b966df91 100644
--- a/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
+++ b/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
@@ -2,6 +2,7 @@ import { Directive, ElementRef, EventEmitter, HostBinding, Input, Output } from
 
 @Directive({
   selector: '[fixedMouseContextualContainerDirective]',
+  exportAs: 'iavFixedMouseCtxContainer'
 })
 
 export class FixedMouseContextualContainerDirective {
@@ -21,21 +22,27 @@ export class FixedMouseContextualContainerDirective {
   constructor(
     private el: ElementRef,
   ) {
-
   }
 
-  public show() {
-    setTimeout(() => {
-      if (window.innerHeight - this.mousePos[1] < this.el.nativeElement.clientHeight) {
-        this.mousePos[1] = window.innerHeight - this.el.nativeElement.clientHeight
-      }
+  public recalculatePosition(){
+    const clientWidth = this.el.nativeElement.clientWidth
+    const clientHeight = this.el.nativeElement.clientHeight
+
+    const windowInnerWidth = window.innerWidth
+    const windowInnerHeight = window.innerHeight
+    if (windowInnerHeight - this.mousePos[1] < clientHeight) {
+      this.mousePos[1] = windowInnerHeight - clientHeight
+    }
 
-      if ((window.innerWidth - this.mousePos[0]) < this.el.nativeElement.clientWidth) {
-        this.mousePos[0] = window.innerWidth - this.el.nativeElement.clientWidth
-      }
+    if ((windowInnerWidth - this.mousePos[0]) < clientWidth) {
+      this.mousePos[0] = windowInnerWidth - clientWidth
+    }
 
-      this.transform = `translate(${this.mousePos.map(v => v.toString() + 'px').join(', ')})`
-    })
+    this.transform = `translate(${this.mousePos.map(v => v.toString() + 'px').join(', ')})`
+  }
+
+  public show() {
+    setTimeout(() => this.recalculatePosition())
     this.styleDisplay = 'inline-block'
     this.isShown = true
     this.onShow.emit()
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 8c0461449380840d0bbbcdaf7ee5183a6b08b7bc..cf1b4e30fca132c62ee8261a800088f789b392e1 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -14,3 +14,4 @@ declare var VERSION : string
 declare var PRODUCTION: boolean
 declare var BACKEND_URL: string
 declare var USE_LOGO: string
+declare var DATASET_PREVIEW_URL: string
diff --git a/webpack.staticassets.js b/webpack.staticassets.js
index 5732303b88538bc26c52a14a36737dca17560735..eb5271a3c176e8783ed3107745f8531ab31097f8 100644
--- a/webpack.staticassets.js
+++ b/webpack.staticassets.js
@@ -70,7 +70,8 @@ module.exports = {
         ? true
         : false,
       BACKEND_URL: (process.env.BACKEND_URL && JSON.stringify(process.env.BACKEND_URL)) || 'null',
-      USE_LOGO: JSON.stringify(process.env.USE_LOGO || 'hbp' || 'ebrains' )
+      USE_LOGO: JSON.stringify(process.env.USE_LOGO || 'hbp' || 'ebrains' ),
+      DATASET_PREVIEW_URL: JSON.stringify(process.env.DATASET_PREVIEW_URL || 'https://hbp-kg-dataset-previewer.apps.hbp.eu/datasetPreview')
     })
   ],
   resolve: {