diff --git a/frontend/global.d.ts b/frontend/global.d.ts
index 23a06a6d..88864bf8 100644
--- a/frontend/global.d.ts
+++ b/frontend/global.d.ts
@@ -1,16 +1,16 @@
 declare namespace export_nehuba {
   class vec3 extends Float32Array {
     static fromValues(...arr: number[]): vec3
-    static transformMat4(rec: vec3, src: vec3, mat: mat4): vec3
+    static transformMat4(rec: vec3|number[], src: vec3|number[], mat: mat4): vec3
     static transformQuat(rec: vec3, src: vec3, quat: quat): vec3
     static sub(rec: vec3, src: vec3, dst: vec3): vec3
     static create(): vec3
     static add(rec: vec3, src: vec3, dst: vec3): vec3
-    static mul(rec: vec3, src: vec3, m: vec3): vec3
+    static mul(rec: vec3|number[], src: vec3|number[], m: vec3|number[]): vec3|number[]
     static inverse(rec: vec3, src: vec3): vec3
     static scale(rec: vec3, src: vec3, s: number): vec3
     static divide(out: vec3, a: vec3, b: vec3): vec3
-    static div(out: vec3, a: vec3, b: vec3): vec3
+    static div(out: vec3|number[], a: vec3|number[], b: vec3|number[]): vec3|number[]
   }
 
   class quat extends Float32Array {
@@ -37,6 +37,7 @@ declare namespace export_nehuba {
     static invert(out: mat4, src: mat4): mat4
     static fromTranslation(out: mat4, transl: vec3): mat4
     static fromRotation(out: mat4, angle: number, axis: vec3 ): mat4
+    static transpose(out:  mat4, src: mat4): mat4
   }
 
   class UrlHashBinding {
@@ -83,6 +84,11 @@ declare namespace export_nehuba {
     setVisible(flag: boolean): void
   }
 
+  interface NgJsonable {
+    restoreState(state: any): void
+    toJSON(): any
+  }
+
   interface NehubaViewer {
     ngviewer: {
       layerManager: {
@@ -94,6 +100,12 @@ declare namespace export_nehuba {
         changed: {
           add: (callback: () => void) => void
         }
+      },
+      navigationState: {
+        pose: {
+          orientation: NgJsonable
+          position: NgJsonable
+        }
       }
     }
     readonly navigationState: {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b92f9967..6a4f3162 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,7 +20,7 @@
         "@angular/router": "^15.0.0",
         "@ngrx/effects": "^15.1.0",
         "@ngrx/store": "^15.1.0",
-        "export-nehuba": "^0.1.0-dev.3",
+        "export-nehuba": "^0.1.7",
         "prettier": "^2.8.3",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
@@ -6128,9 +6128,9 @@
       }
     },
     "node_modules/export-nehuba": {
-      "version": "0.1.0-dev.3",
-      "resolved": "https://registry.npmjs.org/export-nehuba/-/export-nehuba-0.1.0-dev.3.tgz",
-      "integrity": "sha512-o5Syi4MEfHdsITPPFWAJivvMZeZZiTqtHDgFIvjbre1oC+tEDXRc0atFEyptxhJato2tjNLP1jFGzsZGc5cCJQ==",
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/export-nehuba/-/export-nehuba-0.1.7.tgz",
+      "integrity": "sha512-LakXeWGkEtHwWrV69snlM2GGmeVP+jGnTaevOpWQJePkdkPq6DvCkCSH0mLBriR8yOPyO0e+VHuE3V4AnV4fPA==",
       "dependencies": {
         "pako": "^1.0.6"
       }
@@ -16757,9 +16757,9 @@
       }
     },
     "export-nehuba": {
-      "version": "0.1.0-dev.3",
-      "resolved": "https://registry.npmjs.org/export-nehuba/-/export-nehuba-0.1.0-dev.3.tgz",
-      "integrity": "sha512-o5Syi4MEfHdsITPPFWAJivvMZeZZiTqtHDgFIvjbre1oC+tEDXRc0atFEyptxhJato2tjNLP1jFGzsZGc5cCJQ==",
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/export-nehuba/-/export-nehuba-0.1.7.tgz",
+      "integrity": "sha512-LakXeWGkEtHwWrV69snlM2GGmeVP+jGnTaevOpWQJePkdkPq6DvCkCSH0mLBriR8yOPyO0e+VHuE3V4AnV4fPA==",
       "requires": {
         "pako": "^1.0.6"
       }
diff --git a/frontend/package.json b/frontend/package.json
index 7ad142d4..85bff5d4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,7 +22,7 @@
     "@angular/router": "^15.0.0",
     "@ngrx/effects": "^15.1.0",
     "@ngrx/store": "^15.1.0",
-    "export-nehuba": "^0.1.0-dev.3",
+    "export-nehuba": "^0.1.7",
     "prettier": "^2.8.3",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 2e058faa..7bb1495a 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -1,16 +1,17 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { LayoutModule } from 'src/layout/layout.module';
+import { isDefaultMode } from "src/state/app/selectors"
 
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ViewsModule } from 'src/views/views.module';
-import { StoreModule } from '@ngrx/store';
+import { Store, StoreModule, select } from '@ngrx/store';
 import { reducers, metaReducers, effects } from 'src/state';
 import { EffectsModule } from '@ngrx/effects';
 import { SharedModule } from 'src/sharedModule/sharedModule';
-import { DEBOUNCED_WINDOW_RESIZE, SLICEVIEWS_INJECTION_TOKEN, SliceViewEvent, SliceViewProviderType, arrayEqual, sliceViewEvEql, sliceViewEvIncludes } from 'src/const';
-import { Subject, debounceTime, distinctUntilChanged, map, scan, shareReplay, throttleTime } from 'rxjs';
+import { DEBOUNCED_WINDOW_RESIZE } from 'src/const';
+import { Subject, debounceTime, map, merge, shareReplay } from 'rxjs';
 
 @NgModule({
   declarations: [AppComponent],
@@ -28,39 +29,25 @@ import { Subject, debounceTime, distinctUntilChanged, map, scan, shareReplay, th
   providers: [
     {
       provide: DEBOUNCED_WINDOW_RESIZE,
-      useFactory: () => {
+      useFactory: (store: Store) => {
         const resizeSub = new Subject<UIEvent>()
         window.addEventListener("resize", ev => {
           resizeSub.next(ev)
         })
-        return resizeSub.pipe(
+
+        return merge(
+          store.pipe(
+            select(isDefaultMode),
+            map(flag => new UIEvent(`x-resize-default-mode-${flag ? 'on' : 'off'}`))
+          ),
+          resizeSub,
+        ).pipe(
           debounceTime(160),
           shareReplay(1),
         )
-      }
+      },
+      deps: [ Store ]
     },
-    {
-      provide: SLICEVIEWS_INJECTION_TOKEN,
-      useFactory: () => {
-        const obs = new Subject<SliceViewEvent>()
-        return {
-          register: obs.next.bind(obs),
-          observable: obs.pipe(
-            scan((acc, v) => {
-              if (sliceViewEvIncludes(v, acc)) {
-                return acc
-              }
-              return acc.concat(v)
-            }, [] as SliceViewEvent[]),
-            map(v => v.slice(0, 4)),
-            distinctUntilChanged(
-              (p, c) => arrayEqual(p, c, sliceViewEvEql)
-            ),
-            shareReplay(1),
-          )
-        } as SliceViewProviderType
-      }
-    }
   ],
   bootstrap: [AppComponent],
 })
diff --git a/frontend/src/const.ts b/frontend/src/const.ts
index f7ed49ad..0430455b 100644
--- a/frontend/src/const.ts
+++ b/frontend/src/const.ts
@@ -1,5 +1,6 @@
 import { InjectionToken } from "@angular/core";
 import { Observable } from "rxjs";
+import { Landmark } from "./landmarks/const";
 
 export type RecursivePartial<T extends Record<string, unknown>> = Partial<{
   [K in keyof T]: Partial<T[K]>;
@@ -27,7 +28,19 @@ export function isVec3(input: unknown): input is Vec3 {
 }
 
 export function arrayEqual<T>(a: T[], b: T[], predicate: (a: T, b: T) => boolean = (a, b) => a === b): boolean {
-  return a.every((v, idx) => predicate(v, b[idx])) && a.length === b.length
+  return a.length === b.length && a.every((v, idx) => predicate(v, b[idx]))
+}
+
+export function FloatArrayEql(a: Float32Array, b: Float32Array): boolean {
+  if (a.length !== b.length) {
+    return false
+  }
+  for (let i = 0; i < a.length; i++){
+    if (a[i] !== b[i]) {
+      return false
+    }
+  }
+  return true
 }
 
 export function isDefined<T>(v: T|null|undefined): v is T {
@@ -41,13 +54,6 @@ export type SliceViewEvent = {
   sliceview: export_nehuba.SliceView
 }
 
-export interface SliceViewProviderType {
-  observable: Observable<SliceViewEvent[]>
-  register: (ev: SliceViewEvent) => void
-}
-
-export const SLICEVIEWS_INJECTION_TOKEN = new InjectionToken<SliceViewProviderType>("SLICEVIEWS_INJECTION_TOKEN")
-
 export function sliceViewEvEql(a: SliceViewEvent, b: SliceViewEvent): boolean {
   return a.element === b.element && a.sliceview === b.sliceview
 }
@@ -55,3 +61,7 @@ export function sliceViewEvEql(a: SliceViewEvent, b: SliceViewEvent): boolean {
 export function sliceViewEvIncludes(ev: SliceViewEvent, list: SliceViewEvent[]): boolean {
   return list.some(it => sliceViewEvEql(it, ev))
 }
+
+export const EXPORT_LANDMARKS_TYPE = 'https://voluba.apps.hbp.eu/@types/landmarks'
+
+export type OverlayLm = Landmark & { color: string, id: string, highlighted?: boolean }
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 1dfcbcf8..1fc5bce7 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -13,7 +13,8 @@
   <style>
     html, body
     {
-      background-color: rgba(10, 10, 10, 1);
+      background-color: rgba(10, 10, 10, 0.3);
+      overflow: hidden;
     }
   </style>
 </head>
diff --git a/frontend/src/io/loadFile.directive.ts b/frontend/src/io/loadFile.directive.ts
new file mode 100644
index 00000000..6a2ab73a
--- /dev/null
+++ b/frontend/src/io/loadFile.directive.ts
@@ -0,0 +1,39 @@
+import { Directive, EventEmitter, HostListener, Input, Output } from "@angular/core";
+
+@Directive({
+  selector: '[voluba-load-from-file]',
+  exportAs: 'volubaLoadFromFile',
+})
+
+export class LoadFromFileDirective {
+  @Input('from-file-extensions')
+  extensionsToLoad: string = '.json'
+
+  @Output('from-file-content')
+  emitContent = new EventEmitter<string>()
+
+  @HostListener('click')
+  load(){
+    const input = document.createElement("input")
+    input.type = 'file'
+    input.accept = this.extensionsToLoad
+    document.body.appendChild(input)
+    input.onchange = () => {
+      if (input.files?.length !== 1) {
+        throw new Error(`Expected one and only one file selected, but got ${input.files?.length}`)
+      }
+      const file = input.files[0]
+      const reader = new FileReader()
+      reader.onload = () => {
+        const out = reader.result
+        if (!out) throw new Error(`Could not get any content!`)
+        this.emitContent.emit(out as string)
+      }
+      reader.onerror = e => { throw e }
+      reader.readAsText(file, 'utf-8')
+      
+      document.body.removeChild(input)
+    }
+    input.click()
+  }
+}
diff --git a/frontend/src/io/module.ts b/frontend/src/io/module.ts
new file mode 100644
index 00000000..a0cebb18
--- /dev/null
+++ b/frontend/src/io/module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { SaveToFileDirective } from "./saveFile.directive";
+import { LoadFromFileDirective } from "./loadFile.directive";
+
+@NgModule({
+  declarations: [
+    SaveToFileDirective,
+    LoadFromFileDirective,
+  ],
+  exports: [
+    SaveToFileDirective,
+    LoadFromFileDirective,
+  ]
+})
+
+export class IOModule{}
diff --git a/frontend/src/io/saveFile.directive.ts b/frontend/src/io/saveFile.directive.ts
new file mode 100644
index 00000000..64af45ce
--- /dev/null
+++ b/frontend/src/io/saveFile.directive.ts
@@ -0,0 +1,35 @@
+import { Directive, HostListener, Input } from "@angular/core";
+
+const textEncoder = new TextEncoder()
+
+@Directive({
+  selector: '[voluba-save-to-file]',
+  exportAs: 'volubaSaveToFile'
+})
+
+export class SaveToFileDirective{
+  @Input('to-file-content')
+  textToSave: string|undefined
+
+  @Input('to-file-filename')
+  filename: string = 'savedFile.json'
+
+  @Input('to-file-mimetype')
+  mimetype: string = 'application/json'
+
+  @HostListener('click')
+  onClick(){
+    const { mimetype, filename, textToSave } = this
+    const blob = new Blob([ textEncoder.encode(textToSave) || ''], {type: mimetype})
+    const _url = URL.createObjectURL(blob)
+    
+    const link = document.createElement('a')
+    link.setAttribute('href', _url)
+    link.setAttribute('download', filename)
+    link.style.visibility = 'hidden'
+  
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
+}
diff --git a/frontend/src/landmarks/landmarks.module.ts b/frontend/src/landmarks/landmarks.module.ts
index 604291b2..aeb79561 100644
--- a/frontend/src/landmarks/landmarks.module.ts
+++ b/frontend/src/landmarks/landmarks.module.ts
@@ -6,18 +6,22 @@ import { ToolbarComponent } from './toolbar/toolbar.component';
 import { SharedModule } from 'src/sharedModule/sharedModule';
 import { OverlayComponent } from './overlay/overlay.component';
 import { OverlayPositionPipe } from './overlay/overlayPosition.pipe';
+import { OverlayStemStylePipe } from './overlay/overlayStemStyle.pipe';
+import { IOModule } from 'src/io/module';
 
 @NgModule({
   declarations: [
     ListviewComponent,
     ToolbarComponent,
     OverlayComponent,
-    OverlayPositionPipe
+    OverlayPositionPipe,
+    OverlayStemStylePipe,
   ],
   imports: [
     CommonModule,
     FormsModule,
     SharedModule,
+    IOModule,
   ],
   exports: [ListviewComponent, ToolbarComponent, OverlayComponent],
 })
diff --git a/frontend/src/landmarks/listview/listview.component.html b/frontend/src/landmarks/listview/listview.component.html
index deabfc82..b535d70a 100644
--- a/frontend/src/landmarks/listview/listview.component.html
+++ b/frontend/src/landmarks/listview/listview.component.html
@@ -20,8 +20,12 @@
   <ng-container matColumnDef="toTmpl">
     <th mat-header-cell *matHeaderCellDef> To Template </th>
     <td mat-cell *matCellDef="let element">
-      <button mat-icon-button [style.color]="REF_LM_COLOR"
-        (click)="onClickLocation(element.tmplLm)">
+      <button mat-icon-button
+        [style.color]="REF_LM_COLOR"
+        (mouseover)="handleHoverLm(element.tmplLm)"
+        (mouseout)="handleHoverLm(null)"
+        (click)="onClickLocation(element.tmplLm)"
+        matTooltip="Navigate to this landmark">
         <mat-icon class="position-icon" fontIcon="location_on"></mat-icon>
       </button>
     </td>
@@ -30,14 +34,41 @@
   <ng-container matColumnDef="toInc">
     <th mat-header-cell *matHeaderCellDef> To Incoming </th>
     <td mat-cell *matCellDef="let element">
-      <button mat-icon-button [style.color]="INCOMING_LM_COLOR"
-        (click)="onClickLocation(element.incLm)">
+      <button mat-icon-button
+        [style.color]="INCOMING_LM_COLOR"
+        (mouseover)="handleHoverLm(element.incLm)"
+        (mouseout)="handleHoverLm(null)"
+        (click)="onClickLocation(element.incLm)"
+        matTooltip="Navigate to this landmark">
         <mat-icon class="position-icon" fontIcon="location_on"></mat-icon>
       </button>
     </td>
   </ng-container>
+
+  <ng-container matColumnDef="delete">
+    <th mat-header-cell *matHeaderCellDef> Delete  </th>
+    <td mat-cell *matCellDef="let element">
+      <button color="warn" mat-icon-button
+        (click)="deleteLmp(element)"
+        matTooltip="Delete this pair of landmarks">
+        <mat-icon fontIcon="delete"></mat-icon>
+      </button>
+    </td>
+  </ng-container>
   
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  <tr mat-row
+    class="landmark-row"
+    [ngClass]="{
+      'hovered': (hoveredLMP$ | async) === row
+    }"
+    *matRowDef="let row; columns: displayedColumns;">
+  </tr>
+
+</table>
 
-</table>
\ No newline at end of file
+<ng-template [ngIf]="landmarkPair.length === 0">
+  <div class="fallback-text">
+    No landmarks added
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/src/landmarks/listview/listview.component.scss b/frontend/src/landmarks/listview/listview.component.scss
index e69de29b..a537f308 100644
--- a/frontend/src/landmarks/listview/listview.component.scss
+++ b/frontend/src/landmarks/listview/listview.component.scss
@@ -0,0 +1,20 @@
+.fallback-text
+{
+    display: flex;
+    justify-content: center;
+    margin: 2rem;
+    color: rgba(0, 0, 0, 0.5);
+}
+
+table:has(.hovered)
+{
+    tr:not(.hovered, [mat-header-row])
+    {
+        background-color: rgba(128, 128, 128, 0.2);
+    }
+}
+
+tr
+{
+    transition: background-color 160ms ease-in-out;
+}
diff --git a/frontend/src/landmarks/listview/listview.component.ts b/frontend/src/landmarks/listview/listview.component.ts
index 88bb0d7a..102a5f70 100644
--- a/frontend/src/landmarks/listview/listview.component.ts
+++ b/frontend/src/landmarks/listview/listview.component.ts
@@ -5,8 +5,12 @@ import {
   TrackByFunction,
 } from '@angular/core';
 import { LandmarkPair, Landmark, INCOMING_LM_COLOR, REF_LM_COLOR } from '../const';
-import { Store } from '@ngrx/store';
-import { actions } from 'src/state/app';
+import { Store, select } from '@ngrx/store';
+import * as appState from "src/state/app"
+import * as inputs from "src/state/inputs"
+import * as outputs from "src/state/outputs"
+import { combineLatest, firstValueFrom } from 'rxjs';
+
 
 @Component({
   selector: 'voluba-landmark-listview',
@@ -19,10 +23,14 @@ export class ListviewComponent {
   INCOMING_LM_COLOR = INCOMING_LM_COLOR
   REF_LM_COLOR = REF_LM_COLOR
 
+  hoveredLMP$ = this.store.pipe(
+    select(appState.selectors.hoveredLandmarkPair)
+  )
+
   @Input()
   landmarkPair: LandmarkPair[] = [];
 
-  displayedColumns: string[] = ['name', 'toTmpl', 'toInc'];
+  displayedColumns: string[] = ['delete', 'name', 'toTmpl', 'toInc'];
 
   public trackBy: TrackByFunction<LandmarkPair> = (
     _idx: number,
@@ -30,13 +38,12 @@ export class ListviewComponent {
   ) => landmarkPair.id;
 
   constructor(private store: Store){
-
   }
 
   onUpdateName(landmarkPair: LandmarkPair, inputEvent: Event) {
     const { id } = landmarkPair
     this.store.dispatch(
-      actions.updateLandmarkPair({
+      appState.actions.updateLandmarkPair({
         id,
         value: {
           name: (inputEvent.target as HTMLInputElement).value || ''
@@ -45,7 +52,41 @@ export class ListviewComponent {
     )
   }
 
-  onClickLocation(landmark: Landmark) {
-    console.log(landmark);
+  async onClickLocation(landmark: Landmark) {
+    const [ inc, xform ] = await firstValueFrom(
+      combineLatest([
+        this.store.pipe(
+          select(inputs.selectors.selectedIncoming)
+        ),
+        this.store.pipe(
+          outputs.selectors.getIncXform()
+        )
+      ])
+    )
+    const position = [...landmark.position]
+    const { vec3 } = export_nehuba
+    if (landmark.targetVolumeId === inc?.['@id']) {
+      vec3.transformMat4(position, position, xform)
+    }
+
+    this.store.dispatch(
+      appState.actions.navigateTo({
+        position
+      })
+    )
+  }
+
+  handleHoverLm(landmark: Landmark|null) {
+    this.store.dispatch(
+      appState.actions.hoverLandmark({ landmark })
+    )
+  }
+
+  deleteLmp(landmarkPair: LandmarkPair) {
+    this.store.dispatch(
+      appState.actions.deleteLandmarkPair({
+        landmarkPair
+      })
+    )
   }
 }
diff --git a/frontend/src/landmarks/overlay/overlay.component.html b/frontend/src/landmarks/overlay/overlay.component.html
index ad9f1f7f..a6782358 100644
--- a/frontend/src/landmarks/overlay/overlay.component.html
+++ b/frontend/src/landmarks/overlay/overlay.component.html
@@ -1,10 +1,23 @@
 <ng-template [ngIf]="displayedLandmarks$ | async" let-displayedLandmarks>
     <ng-template ngFor [ngForOf]="displayedLandmarks" let-displayedLandmark>
         <div class="landmark-container"
-            [style.transform]="displayedLandmark.position | overlayPosition"
+            (mouseover)="handleHoverLandmark(displayedLandmark)"
+            (mouseout)="handleHoverLandmark(null)"
+            (mousedown)="handleMouseDown(displayedLandmark)"
+            [ngClass]="{
+                'above-plane': displayedLandmark.position[2] >= 0,
+                'below-plane': displayedLandmark.position[2] < 0
+            }"
+            [style]="displayedLandmark.position | overlayPosition"
             [style.color]="displayedLandmark.color">
 
-            <mat-icon class="position-icon" fontIcon="location_on"></mat-icon>
+            <mat-icon class="position-icon"
+                [ngClass]="{
+                    'highlighted': !!displayedLandmark.highlighted
+                }"
+                [fontIcon]="displayedLandmark.position[2] >= 0 ? 'location_on' : 'anchor'">
+            </mat-icon>
+            <div class="position-icon stem" [style]="displayedLandmark | overlayStemStyle"></div>
         </div>
     </ng-template>
 </ng-template>
diff --git a/frontend/src/landmarks/overlay/overlay.component.scss b/frontend/src/landmarks/overlay/overlay.component.scss
index 4f25f4c4..c54cd3d5 100644
--- a/frontend/src/landmarks/overlay/overlay.component.scss
+++ b/frontend/src/landmarks/overlay/overlay.component.scss
@@ -9,18 +9,68 @@
     }
 }
 
+:host-context(.disabled)
+{
+    .landmark-container
+    {
+        pointer-events: none;
+    }
+}
+
 .landmark-container
 {
     display: inline-flex;
-    justify-content: center;
-    align-items: flex-end;
+    align-items: center;
     overflow: visible;
     width: 0;
     height: 0;
+    pointer-events: all;
+
+    &.above-plane
+    {
+        flex-direction: column;
+        justify-content: flex-end;
+    }
+
+    &.below-plane
+    {
+        flex-direction: column;
+        justify-content: flex-start;
+    }
 
     > *
     {
         color: inherit;
         flex: 0 0 auto;
     }
+
+    > .stem
+    {
+        width: 1px;
+    }
+}
+
+
+@keyframes jumponce {
+    0% {
+        transform: scale(1, 1);
+    }
+    30% {
+        transform: scale(1.1, 0.8);
+    }
+    40% {
+        transform: scale(0.8, 1.1) translateY(-5px);
+    }
+    45% {
+        transform: scale(1, 1) translateY(-6px);
+    }
+    80% {
+        transform: translateY(-4px);
+    }
+}
+
+  
+.highlighted
+{
+    animation: jumponce 400ms normal;
 }
diff --git a/frontend/src/landmarks/overlay/overlay.component.ts b/frontend/src/landmarks/overlay/overlay.component.ts
index 63a02def..2fb00f64 100644
--- a/frontend/src/landmarks/overlay/overlay.component.ts
+++ b/frontend/src/landmarks/overlay/overlay.component.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Output } from '@angular/core';
 import { Landmark } from '../const';
-import { BehaviorSubject, Observable, Subject, combineLatest, concat, debounceTime, filter, map, merge, of, pipe, share, shareReplay, switchMap, tap, throttleTime } from 'rxjs';
-import { DEBOUNCED_WINDOW_RESIZE } from 'src/const';
+import { BehaviorSubject, Observable, Subject, combineLatest, concat, debounceTime, distinctUntilChanged, filter, map, merge, of, pipe, share, shareReplay, switchMap, tap, throttleTime } from 'rxjs';
+import { DEBOUNCED_WINDOW_RESIZE, OverlayLm, arrayEqual } from 'src/const';
 import { Store, select } from '@ngrx/store';
 import * as appState from "src/state/app"
 
@@ -9,9 +9,6 @@ function isSliceView(input: export_nehuba.SliceView|null): input is export_nehub
   return !!input
 }
 
-export type OverlayLm = Landmark & { color: string }
-
-
 /**
  * 
  * TODO
@@ -36,7 +33,13 @@ const pipeGetSliceViewChanged = () => {
           viewChanged$?.next(null)
         }
       )
-      return viewChanged$.asObservable()
+      return viewChanged$.pipe(
+        /**
+         * n.b.
+         * delay seems to be necessary. secondary viewer landmarks do not seem to update accurately otherwise
+         */
+        throttleTime(16)
+      )
     })
   )
 }
@@ -65,6 +68,13 @@ export class OverlayComponent {
     shareReplay(1)
   )
 
+  @Output('overlay-hover-landmark')
+  hoverLandmark = new EventEmitter<OverlayLm|null>()
+
+  
+  @Output('overlay-mousedown-landmark')
+  mousedownLandmark = new EventEmitter<OverlayLm>()
+
   @Input('overlay-landmarks')
   set landmarks(lms: OverlayLm[]) {
     this.#landmarks$.next(lms)
@@ -73,12 +83,7 @@ export class OverlayComponent {
   #sliceViewInfo$ = combineLatest([
     concat(
       of(null),
-      merge(
-        this.dbResize,
-        this.store.pipe(
-          select(appState.selectors.isDefaultMode),
-        )
-      )
+      this.dbResize,
     ).pipe(
       debounceTime(32)
     ),
@@ -132,16 +137,28 @@ export class OverlayComponent {
         )
       })
     }),
+    distinctUntilChanged((o, n) =>
+      arrayEqual(o, n, (a, b) => {
+        return (
+          a.highlighted === b.highlighted
+          && a.color === b.color
+          && arrayEqual(a.position, b.position)
+        )
+      })
+    ),
     shareReplay(1),
   )
   
   constructor(
     @Inject(DEBOUNCED_WINDOW_RESIZE)
     private dbResize: Observable<UIEvent>,
-    private store: Store,
-  ){
-    this.#sliceViewChanged$.subscribe(val => {
-      console.log("view changed", val)
-    })
+  ){}
+
+  handleHoverLandmark(lm: OverlayLm|null){
+    this.hoverLandmark.emit(lm)
+  }
+
+  handleMouseDown(lm: OverlayLm) {
+    this.mousedownLandmark.emit(lm)
   }
 }
diff --git a/frontend/src/landmarks/overlay/overlayPosition.pipe.ts b/frontend/src/landmarks/overlay/overlayPosition.pipe.ts
index 4cd29167..67469200 100644
--- a/frontend/src/landmarks/overlay/overlayPosition.pipe.ts
+++ b/frontend/src/landmarks/overlay/overlayPosition.pipe.ts
@@ -10,7 +10,9 @@ export class OverlayPositionPipe implements PipeTransform{
   constructor(private sanitizer: DomSanitizer){}
   transform(position: number[]) {
     return this.sanitizer.sanitize(
-      SecurityContext.STYLE, `translate(${position[0]}px, ${position[1]}px)`
+      SecurityContext.STYLE, {
+        transform: `translate(${position[0]}px, ${position[1]}px)`,
+      }
     )
   }
 }
diff --git a/frontend/src/landmarks/overlay/overlayStemStyle.pipe.ts b/frontend/src/landmarks/overlay/overlayStemStyle.pipe.ts
new file mode 100644
index 00000000..8df46b68
--- /dev/null
+++ b/frontend/src/landmarks/overlay/overlayStemStyle.pipe.ts
@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform, SecurityContext } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+
+@Pipe({
+  name: 'overlayStemStyle',
+  pure: true
+})
+
+export class OverlayStemStylePipe implements PipeTransform{
+  constructor(private sanitizer: DomSanitizer){
+
+  }
+  transform(landmark: {color: string, position: number[]}) {
+    return this.sanitizer.sanitize(
+      SecurityContext.STYLE,
+      {
+        height: `${Math.abs(landmark.position[2])}px`,
+        backgroundColor: landmark.color,
+        order: landmark.position[2] < 0 ? -1 : 0
+      }
+    )
+  }
+}
diff --git a/frontend/src/landmarks/toolbar/toolbar.component.html b/frontend/src/landmarks/toolbar/toolbar.component.html
index f8e898ec..7b9a48cb 100644
--- a/frontend/src/landmarks/toolbar/toolbar.component.html
+++ b/frontend/src/landmarks/toolbar/toolbar.component.html
@@ -1,26 +1,32 @@
-<button mat-fab
-    [color]="(addLmMode$ | async) ? 'primary' : 'default'"
-    (click)="toggleLandmarkMode()">
-    <mat-icon fontIcon="add_location"></mat-icon>
-</button>
+<ng-template [ngIf]="view$ | async" let-view>
 
-<button (click)="_tmp()" mat-buttoon>
-    bla
-</button>
+    <button mat-fab
+        [color]="(addLmMode$ | async) ? 'primary' : 'default'"
+        (click)="toggleLandmarkMode()">
+        <mat-icon fontIcon="add_location"></mat-icon>
+    </button>
 
-<mat-divider [vertical]="true"></mat-divider>
+    <mat-divider [vertical]="true"></mat-divider>
 
-<button mat-icon-button (click)="onSave()">
-    <mat-icon fontIcon="save"></mat-icon>
-</button>
+    <button matTooltip="Save landmarks" mat-icon-button 
+        voluba-save-to-file
+        [to-file-content]="view.landmarkContent"
+        [to-file-filename]="view.landmarkName">
+        <mat-icon fontIcon="save"></mat-icon>
+    </button>
 
-<button mat-icon-button (click)="onLoad()">
-    <!-- TODO folder_open doesn't seem to work here -->
-    <mat-icon fontIcon="folder_open"></mat-icon>
-</button>
+    <button matTooltip="Load landmarks"
+        voluba-load-from-file
+        (from-file-content)="handleLoadJson($event)"
+        mat-icon-button>
+        <!-- TODO folder_open doesn't seem to work here -->
+        <mat-icon fontIcon="folder_open"></mat-icon>
+    </button>
 
-<mat-divider vertical="true"></mat-divider>
+    <mat-divider vertical="true"></mat-divider>
 
-<button mat-icon-button color="primary" (click)="onCalculate()">
-    <mat-icon fontIcon="calculate"></mat-icon>
-</button>
+    <button mat-icon-button color="primary" (click)="onCalculate()">
+        <mat-icon fontIcon="calculate"></mat-icon>
+    </button>
+
+</ng-template>
diff --git a/frontend/src/landmarks/toolbar/toolbar.component.ts b/frontend/src/landmarks/toolbar/toolbar.component.ts
index 2dec0d63..167c4cc1 100644
--- a/frontend/src/landmarks/toolbar/toolbar.component.ts
+++ b/frontend/src/landmarks/toolbar/toolbar.component.ts
@@ -1,11 +1,38 @@
 import { ChangeDetectionStrategy, Component, Inject, Optional, inject } from '@angular/core';
 import { select, Store } from '@ngrx/store';
-import { NEVER, filter, map, of, switchMap, takeUntil, withLatestFrom } from 'rxjs';
-import { VOLUBA_NEHUBA_TOKEN, VolubeNehuba, isVec3 } from 'src/const';
+import { NEVER, combineLatest, filter, finalize, firstValueFrom, lastValueFrom, map, of, switchMap, takeUntil, withLatestFrom } from 'rxjs';
+import { EXPORT_LANDMARKS_TYPE, VOLUBA_NEHUBA_TOKEN, VolubeNehuba, isVec3 } from 'src/const';
 import * as app from "src/state/app"
 import * as inputs from "src/state/inputs"
+import * as outputs from "src/state/outputs"
+import * as generalActions from "src/state/actions"
 import { DestroyDirective } from 'src/util/destroy.directive';
 
+type L = {
+  id: string
+  name: string
+  coord: number[] // in mm
+  active: true
+}
+type LP = {
+  id: string
+  refId: string
+  incId: string
+  name: string
+  active: true
+  // color: string // ignore for now
+}
+
+
+type LMJson = {
+  reference_volume: string
+  incoming_volume: string
+  reference_landmarks: L[]
+  incoming_landmarks: L[]
+  landmark_pairs: LP[]
+  '@type': 'EXPORT_LANDMARKS_TYPE'
+}
+
 @Component({
   selector: 'voluba-landmark-toolbar',
   templateUrl: './toolbar.component.html',
@@ -19,10 +46,6 @@ export class ToolbarComponent {
 
   #destroyed$ = inject(DestroyDirective).destroyed$
 
-  bla = this.store.pipe(
-    select(app.selectors.purgatory),
-  )
-
   #addLmMode: boolean = false
   addLmMode$ = this.store.pipe(
     select(app.selectors.addLmMode)
@@ -37,6 +60,74 @@ export class ToolbarComponent {
       : of(null))
   )
 
+  view$ = combineLatest([
+    this.store.pipe(
+      select(app.selectors.landmarks)
+    ),
+    this.store.pipe(
+      select(inputs.selectors.inputFilesName)
+    ),
+    this.store.pipe(
+      select(inputs.selectors.selectedTemplate)
+    ),
+    this.store.pipe(
+      select(inputs.selectors.selectedIncoming)
+    ),
+    this.store.pipe(
+      outputs.selectors.getIncXform()
+    )
+  ]).pipe(
+    map(([ landmarks, inputFilesName, ref, inc, xform ]) => {
+
+      const { mat4, vec3 } = export_nehuba
+
+      const refLm: L[] = landmarks.map(lm => {
+        return {
+          id: `${lm.id}-ref`,
+          active: true,
+          coord: lm.tmplLm.position.map(v => v/1e6),
+          name: `${lm.name}-ref`
+        }
+      })
+      
+      const incLm: L[] = landmarks.map(lm => {
+        const posInIncSpace = vec3.transformMat4(
+          vec3.create(),
+          vec3.fromValues(...lm.incLm.position),
+          xform)
+        return {
+          id: `${lm.id}-inc`,
+          active: true,
+          coord: Array.from(posInIncSpace).map(v => v * 1e6),
+          name: `${lm.name}-inc`,
+        }
+      })
+
+      const lmP: LP[] = landmarks.map(lm => {
+        return {
+          id: lm.id,
+          name: lm.name,
+          active: true,
+          incId: `${lm.id}-inc`,
+          refId: `${lm.id}-ref`,
+        }
+      })
+      const landmarkContent = {
+        reference_volume: ref?.name || 'Untitled Reference Volume',
+        incoming_volume: inc?.name || 'Untitled Incoming Volume',
+        reference_landmarks: refLm,
+        incoming_landmarks: incLm,
+        landmark_pairs: lmP,
+        ['@type']: EXPORT_LANDMARKS_TYPE
+      }
+
+      return {
+        landmarkContent: JSON.stringify(landmarkContent, null, 2),
+        landmarkName: `${inputFilesName}-landmarks.json`,
+      }
+    })
+  )
+
   constructor(
     private store: Store,
     @Optional() @Inject(VOLUBA_NEHUBA_TOKEN) private vn: VolubeNehuba
@@ -98,20 +189,6 @@ export class ToolbarComponent {
     })
   }
 
-  #tmp = 0
-  _tmp() {
-    this.#tmp ++
-    console.log(this.#tmp)
-    this.store.dispatch(
-      app.actions.addLandmark({
-        landmark: {
-          position: [0, 0, 0],
-          targetVolumeId: `foo-bar-${this.#tmp}`
-        }
-      })
-    )
-  }
-
   toggleLandmarkMode() {
     this.store.dispatch(
       app.actions.setAddLandmarkMode({
@@ -119,13 +196,79 @@ export class ToolbarComponent {
       })
     )
   }
+  async handleLoadJson(jsonTxt: string){
+    const lm: LMJson = JSON.parse(jsonTxt)
+    const { selectedRefenceVolume, selectedIncomingVolume, landmarks } = await firstValueFrom(
+      combineLatest([
+        this.store.pipe(
+          select(inputs.selectors.selectedTemplate)
+        ),
+        this.store.pipe(
+          select(inputs.selectors.selectedIncoming)
+        ),
+        this.store.pipe(
+          select(app.selectors.landmarks)
+        )
+      ]).pipe(
+        map(([ selectedRefenceVolume, selectedIncomingVolume, landmarks ]) => ({ selectedRefenceVolume, selectedIncomingVolume, landmarks })),
+      )
+    )
+    if (!selectedRefenceVolume || !selectedIncomingVolume) {
+      throw new Error(`Ref volume or incoming volume not yet selected`)
+    }
 
-  onSave() {
-    console.log('onSave');
-  }
+    const currLmIdSet = new Set(landmarks.map(lm => lm.id))
+
+    const { reference_landmarks, incoming_landmarks, landmark_pairs } = lm
+    
+    const info: string[] = []
+
+    const existingLms = landmark_pairs.filter(lmp => currLmIdSet.has(lmp.id))
+    if (existingLms.length > 0) {
+      info.push(`Landmarks with ids ${existingLms.map(lm => lm.id)} already exist. Skipped.`)
+    }
+    const newLms = landmark_pairs.filter(lmp => !currLmIdSet.has(lmp.id))
 
-  onLoad() {
-    console.log('onLoad');
+    let addedLmCounter = 0
+    for (const lm of newLms) {
+      const { id, incId, refId, name } = lm
+      const inc = incoming_landmarks.find(incLm => incLm.id === incId)
+      const ref = reference_landmarks.find(refLm => refLm.id === refId)
+      if (!inc || !ref) {
+        info.push(`Landmark with id ${id}, invalid ref or inc reference.`)
+        continue
+      }
+      console.log(inc.coord, ref.coord)
+      this.store.dispatch(
+        app.actions.addLandmarkPair({
+          landmarkPair: {
+            id,
+            incLm: {
+              position: inc.coord.map(v => v*1e6) as [number, number, number],
+              targetVolumeId: selectedIncomingVolume['@id']
+            },
+            tmplLm: {
+              position: ref.coord.map(v => v*1e6) as [number, number, number],
+              targetVolumeId: selectedRefenceVolume['@id']
+            },
+            name
+          }
+        })
+      )
+      addedLmCounter ++
+    }
+
+    if (addedLmCounter > 0) {
+      info.push(`Added ${addedLmCounter} landmark pairs.`)
+    }
+    
+    if (info.length > 0) {
+      this.store.dispatch(
+        generalActions.info({
+          message: info.join("\n")
+        })
+      )
+    }
   }
 
   onCalculate() {
diff --git a/frontend/src/layer-tune/tune-ui/tune-ui.component.html b/frontend/src/layer-tune/tune-ui/tune-ui.component.html
index 19ed0e6c..adea60fc 100644
--- a/frontend/src/layer-tune/tune-ui/tune-ui.component.html
+++ b/frontend/src/layer-tune/tune-ui/tune-ui.component.html
@@ -20,33 +20,45 @@
         </mat-form-field>
     </div>
 
-    <div class="section">
-        <mat-slide-toggle formControlName="isotropic">
-            Isotropic
-        </mat-slide-toggle>
-    </div>
-
-    <div class="section">
-        <mat-form-field class="input">
-            <mat-label>
-                Scale X
-            </mat-label>
-            <input [step]="0.1" formControlName="scaleX" type="number" matInput>
-        </mat-form-field>
-        <mat-form-field class="input">
-            <mat-label>
-                Scale Y
-            </mat-label>
-            <input [step]="0.1" formControlName="scaleY" type="number" matInput>
-        </mat-form-field>
-        <mat-form-field class="input">
-            <mat-label>
-                Scale Z
-            </mat-label>
-            <input [step]="0.1" formControlName="scaleZ" type="number" matInput>
-        </mat-form-field>
-    </div>
+    <mat-divider></mat-divider>
     
+    <mat-tab-group>
+        <mat-tab label="Scale">
+            <div class="section isotrope-header">
+                <mat-slide-toggle formControlName="isotropic">
+                    Isotropic
+                </mat-slide-toggle>
+            </div>
+        
+            <div class="section">
+                <mat-form-field class="input">
+                    <mat-label>
+                        Scale X
+                    </mat-label>
+                    <input [step]="0.1" formControlName="scaleX" type="number" matInput>
+                </mat-form-field>
+                <mat-form-field class="input">
+                    <mat-label>
+                        Scale Y
+                    </mat-label>
+                    <input [step]="0.1" formControlName="scaleY" type="number" matInput>
+                </mat-form-field>
+                <mat-form-field class="input">
+                    <mat-label>
+                        Scale Z
+                    </mat-label>
+                    <input [step]="0.1" formControlName="scaleZ" type="number" matInput>
+                </mat-form-field>
+            </div>
+        </mat-tab>
+
+        <mat-tab label="Voxel Size">
+            <ng-template [ngTemplateOutlet]="voxelSizeTmpl"></ng-template>
+        </mat-tab>
+    </mat-tab-group>
+
+    <mat-divider></mat-divider>
+
     <div class="section">
         <!-- <mat-slider [min]="-180" [max]="180">
             <input matSliderThumb formControlName="rotX" showTickMarks>
@@ -82,4 +94,63 @@
             Rotate 90 deg Z
         </button>
     </div>
+
+    <ng-template [ngIf]="view$ | async" let-view>
+
+        <div class="section">
+        
+            <button mat-flat-button [color]="view.xFlipped ? 'primary' : 'default'" (click)="flip('x')">
+                Flip X axis
+            </button>
+            <button mat-flat-button [color]="view.yFlipped ? 'primary' : 'default'" (click)="flip('y')">
+                Flip Y axis
+            </button>
+            <button mat-flat-button [color]="view.zFlipped ? 'primary' : 'default'" (click)="flip('z')">
+                Flip Z axis
+            </button>
+        </div>
+    </ng-template>
 </form>
+
+<ng-template #voxelSizeTmpl>
+
+    <form [formGroup]="voxelSpacingFormGroup">
+    
+        <div class="section isotrope-header">
+    
+            <mat-slide-toggle formControlName="isotropic">
+                Isotropic
+            </mat-slide-toggle>
+        
+            <mat-button-toggle-group name="unit" formControlName="unit">
+                <mat-button-toggle *ngFor="let unit of availableUnits" [value]="unit">
+                    {{ unit }}
+                </mat-button-toggle>
+            </mat-button-toggle-group>
+        </div>
+    
+        <div class="section">
+            
+            <mat-form-field class="input">
+                <mat-label>
+                    X Voxel Spacing
+                </mat-label>
+                <input [min]="0" [step]="0.1" formControlName="valueX" type="number" matInput>
+            </mat-form-field>
+            <mat-form-field class="input">
+                <mat-label>
+                    Y Voxel Spacing
+                </mat-label>
+                <input [min]="0" [step]="0.1" formControlName="valueY" type="number" matInput>
+            </mat-form-field>
+            <mat-form-field class="input">
+                <mat-label>
+                    Z Voxel Spacing
+                </mat-label>
+                <input [min]="0" [step]="0.1" formControlName="valueZ" type="number" matInput>
+            </mat-form-field>
+        </div>
+        
+    </form>
+    
+</ng-template>
\ No newline at end of file
diff --git a/frontend/src/layer-tune/tune-ui/tune-ui.component.scss b/frontend/src/layer-tune/tune-ui/tune-ui.component.scss
index 988f9961..5e0ecbba 100644
--- a/frontend/src/layer-tune/tune-ui/tune-ui.component.scss
+++ b/frontend/src/layer-tune/tune-ui/tune-ui.component.scss
@@ -7,3 +7,19 @@
 {
     width: 8rem;
 }
+
+.isotrope-header
+{
+    display: flex;
+    align-items: center;
+
+    > *
+    {
+        margin: 1rem;
+    }
+}
+
+mat-divider
+{
+    margin: 1rem 0;
+}
diff --git a/frontend/src/layer-tune/tune-ui/tune-ui.component.ts b/frontend/src/layer-tune/tune-ui/tune-ui.component.ts
index 83269a25..a7bb59c8 100644
--- a/frontend/src/layer-tune/tune-ui/tune-ui.component.ts
+++ b/frontend/src/layer-tune/tune-ui/tune-ui.component.ts
@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, inject } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
 import { select, Store } from '@ngrx/store';
-import { filter, takeUntil, withLatestFrom } from 'rxjs';
+import { combineLatest, concat, distinctUntilChanged, filter, map, of, takeUntil, withLatestFrom } from 'rxjs';
 import { Vec3, arrayEqual, isDefined } from 'src/const';
 import * as outputs from 'src/state/outputs';
-import { getIncXform } from 'src/state/outputs/selectors';
+import * as inputs from 'src/state/inputs';
 import { DestroyDirective } from 'src/util/destroy.directive';
 
 const RAD_TO_DEG = 180 / Math.PI
@@ -15,6 +15,8 @@ type MatState = {
   translateY: number
   translateZ: number
 
+  isotropic: boolean
+
   scaleX: number
   scaleY: number
   scaleZ: number
@@ -60,6 +62,22 @@ function getInputValidator(args?: Partial<FormValidatorParam>): ValidatorFn {
   }
 }
 
+const cvtToNm = {
+  nm: (v: number) => v,
+  μm: (v: number) => v * 1e3,
+  mm: (v: number) => v * 1e6,
+  cm: (v: number) => v * 1e9,
+} as const
+
+type VoxelUnit = keyof typeof cvtToNm
+
+const cvtNmTo: Record<VoxelUnit, (nm: number) => number> = {
+  nm: v => v,
+  μm: v => v / 1e3,
+  mm: v => v / 1e6,
+  cm: v => v / 1e9,
+}
+
 @Component({
   selector: 'voluba-tune-ui',
   templateUrl: './tune-ui.component.html',
@@ -76,12 +94,21 @@ export class TuneUiComponent {
   #translationValidator = getInputValidator()
   #scaleValidator = getInputValidator({ min: 0.001 })
 
+  availableUnits: VoxelUnit[] = ['nm', 'μm', 'mm', 'cm']
+  voxelSpacingFormGroup = new FormGroup({
+    unit: new FormControl<VoxelUnit>('nm'),
+    isotropic: new FormControl<boolean>(false),
+    valueX: new FormControl(),
+    valueY: new FormControl(),
+    valueZ: new FormControl(),
+  })
+
   tuneInput = new FormGroup({
     translateX: new FormControl<number>(1, [this.#translationValidator]),
     translateY: new FormControl<number>(2, [this.#translationValidator]),
     translateZ: new FormControl<number>(3, [this.#translationValidator]),
 
-    isotropic: new FormControl<boolean>(true),
+    isotropic: new FormControl<boolean>(false),
 
     scaleX: new FormControl<number>(1, [this.#scaleValidator]),
     scaleY: new FormControl<number>(1, [this.#scaleValidator]),
@@ -91,7 +118,6 @@ export class TuneUiComponent {
     rotY: new FormControl<number>(1, [ getInputValidator({ min: -90, max: 90 }) ]),
     rotZ: new FormControl<number>(1, [ getInputValidator({ min: -180, max: 180 }) ]),
 
-    // rotation
   }, [
     ctl => {
       if (!(ctl instanceof FormGroup)) {
@@ -109,20 +135,37 @@ export class TuneUiComponent {
       }
       return childErrors
     }
-  ]);
+  ])
+
+  #currVoxelSize: Vec3 | null = null
 
   #currXlate: Vec3 | null = null
   #currScale: Vec3 | null = null
   #currentRot: Vec3 | null = null
 
+  view$ = combineLatest([
+    this.store.pipe(
+      outputs.selectors.getFlippedState()
+    )
+  ]).pipe(
+    map(([ flippedState ]) => {
+
+      return {
+        xFlipped: flippedState[0] === -1,
+        yFlipped: flippedState[1] === -1,
+        zFlipped: flippedState[2] === -1,
+      }
+    })
+  )
+
   constructor(private store: Store) {
 
     this.store.pipe(
-      getIncXform(),
+      outputs.selectors.getIncXform(),
       withLatestFrom(
         this.store.pipe(
-          select(outputs.selectors.flippedState)
-        )
+          outputs.selectors.getFlippedState()
+        ),
       ),
       takeUntil(this.#destroyed$),
     ).subscribe(([xform, flippedState]) => {
@@ -140,6 +183,11 @@ export class TuneUiComponent {
       const rot = mat4.getRotation(quat.create(), unflippedMat)
       quat.normalize(rot, rot)
 
+      /**
+       * TODO
+       * not ideal
+       * ideally, remove all reference to this (except patch value at the end)
+       */
       this.#currScale = scale as Vec3
       this.#currXlate = translate as Vec3
 
@@ -196,21 +244,148 @@ export class TuneUiComponent {
         rotX,
         rotY,
         rotZ,
-      });
-    });
+      })
+
+    })
+
+    const incVoxelSize = this.store.pipe(
+      inputs.selectors.getIncVoxelSize()
+    )
+    combineLatest([
+      this.store.pipe(
+        outputs.selectors.getIncXform()
+      ),
+      incVoxelSize,
+      concat(
+        of(this.voxelSpacingFormGroup.controls.unit.value),
+        this.voxelSpacingFormGroup.controls.unit.valueChanges,
+      ).pipe(
+        distinctUntilChanged()
+      ),
+    ]).pipe(
+      takeUntil(this.#destroyed$),
+    ).subscribe(([ xform, voxelsize, unit ]) => {
+      if (!voxelsize) {
+        console.error(`voxelsize cannot be found`)
+        return
+      }
+      if (!unit) {
+        console.error(`unit must be defined, but was not`)
+        return
+      }
+      const { vec3, mat4 } = export_nehuba
+      const cvtFn = cvtNmTo[unit]
+
+      const scaling = mat4.getScaling(vec3.create(), xform)
+      vec3.mul(scaling, scaling, voxelsize)
+
+      this.#currVoxelSize = [
+        cvtFn(scaling[0]),
+        cvtFn(scaling[1]),
+        cvtFn(scaling[2]),
+      ]
+      this.voxelSpacingFormGroup.patchValue({
+        valueX: this.#currVoxelSize[0],
+        valueY: this.#currVoxelSize[1],
+        valueZ: this.#currVoxelSize[2],
+      })
+      
+    })
 
-    // TODO figure out a better way to do this than subscribing individual changes
-    
     this.tuneInput.valueChanges.pipe(
       takeUntil(this.#destroyed$),
       filter(() => !this.tuneInput.errors),
     ).subscribe(values => {
+      const { isotropic } = values
+      if (isDefined(isotropic)) {
+        if (isotropic) {
+          this.tuneInput.controls.scaleY.disable({
+            onlySelf: true,
+            emitEvent: false
+          })
+          this.tuneInput.controls.scaleZ.disable({
+            onlySelf: true,
+            emitEvent: false
+          })
+        } else {
+          this.tuneInput.controls.scaleY.enable({
+            onlySelf: true,
+            emitEvent: false
+          })
+          this.tuneInput.controls.scaleZ.enable({
+            onlySelf: true,
+            emitEvent: false
+          })
+        }
+      }
+
       this.setTranslScaleRot(values)
-    });
+      
+    })
+
+    const {
+      isotropic, unit, valueX, valueY, valueZ
+    } = this.voxelSpacingFormGroup.controls
+    combineLatest([
+      concat(
+        of(isotropic.value),
+        isotropic.valueChanges
+      ),
+      valueX.valueChanges,
+      valueY.valueChanges,
+      valueZ.valueChanges,
+    ]).pipe(
+      takeUntil(this.#destroyed$),
+      withLatestFrom(incVoxelSize),
+    ).subscribe(([ [ _isotropic, _valueX, _valueY, _valueZ ], incVoxelSize ]) => {
+
+      if (!incVoxelSize) {
+        console.error(`apply changes to voxel size require voxel size, but was not provided!`)
+        return
+      }
+      if (isDefined(_isotropic)) {
+        if (_isotropic) {
+          valueY.disable({ onlySelf: true, emitEvent: false })
+          valueZ.disable({ onlySelf: true, emitEvent: false })
+        }
+        if (!_isotropic) {
+          valueY.enable({ onlySelf: true, emitEvent: false })
+          valueZ.enable({ onlySelf: true, emitEvent: false })
+        }
+      }
+
+      let v: number[]
+      if (_isotropic) {
+        v = [_valueX, _valueX, _valueX]
+      } else {
+        v = [_valueX, _valueY, _valueZ]
+      }
+
+      if (arrayEqual(v, this.#currVoxelSize || [])) {
+        return
+      }
+
+      if (!unit.value) {
+        console.error(`unit must be defined, but was not`)
+        return
+      }
+
+      const { vec3 } = export_nehuba
+      vec3.div(v, v, incVoxelSize)
+
+      const cvtFn = cvtToNm[unit.value]
+      
+      const scale = v.map(cvtFn)
+      this.setTranslScaleRot({
+        scaleX: scale[0],
+        scaleY: scale[1],
+        scaleZ: scale[2],
+      })
+    })
   }
 
   setTranslScaleRot(matState: NullablePartial<MatState>){
-    const { translateX, translateY, translateZ, scaleX, scaleY, scaleZ, rotX, rotY, rotZ } = matState
+    const { translateX, translateY, translateZ, scaleX, scaleY, scaleZ, rotX, rotY, rotZ, isotropic } = matState
     if (this.#currXlate && isDefined(translateX) && isDefined(translateY) && isDefined(translateZ)) {
       const newXlate: Vec3 = [translateX, translateY, translateZ]
       if (!arrayEqual(newXlate, this.#currXlate)) {
@@ -221,7 +396,7 @@ export class TuneUiComponent {
         )
       }
     }
-    if (this.#currScale && isDefined(scaleX) && isDefined(scaleY) && isDefined(scaleZ)) {
+    if (this.#currScale && !isotropic && isDefined(scaleX) && isDefined(scaleY) && isDefined(scaleZ)) {
       const newScale = [scaleX, scaleY, scaleZ]
       if (!arrayEqual(newScale, this.#currScale)) {
         this.store.dispatch(
@@ -231,6 +406,18 @@ export class TuneUiComponent {
         )
       }
     }
+
+    if (this.#currScale && !!isotropic && isDefined(scaleX)) {
+      const newScale = [scaleX, scaleX, scaleX]
+      if (!arrayEqual(newScale, this.#currScale)) {
+        this.store.dispatch(
+          outputs.actions.setIncScale({
+            array: newScale
+          })
+        )
+      }
+    }
+
     if (this.#currentRot && isDefined(rotX) && isDefined(rotY) && isDefined(rotZ) ) {
       const newRot = [rotX, rotY, rotZ]
       if (!arrayEqual(this.#currentRot, newRot)) {
@@ -238,7 +425,6 @@ export class TuneUiComponent {
         const { quat } = export_nehuba
         const diffArray = this.#currentRot.map((v, idx) => (newRot[idx] - v)) as Vec3
         
-        console.log(diffArray)
         const rot = quat.fromEuler(quat.create(), ...diffArray)
         quat.normalize(rot, rot)
         this.store.dispatch(
@@ -265,4 +451,10 @@ export class TuneUiComponent {
       })
     )
   }
+
+  flip(axis: 'x' | 'y' | 'z') {
+    this.store.dispatch(
+      outputs.actions.flipAxis({ axis })
+    )
+  }
 }
diff --git a/frontend/src/mouse-interactions/mouse-interaction.directive.spec.ts b/frontend/src/mouse-interactions/mouse-interaction.directive.spec.ts
index 825ac28b..67a3701e 100644
--- a/frontend/src/mouse-interactions/mouse-interaction.directive.spec.ts
+++ b/frontend/src/mouse-interactions/mouse-interaction.directive.spec.ts
@@ -1,8 +1,28 @@
+import { TestBed } from '@angular/core/testing';
 import { MouseInteractionDirective } from './mouse-interaction.directive';
+import { ElementRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 describe('MouseInteractionDirective', () => {
+  let el: HTMLElement
+  beforeEach(() => {
+    el = document.createElement('div')
+    TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+      ],
+      providers: [
+        {
+          provide: ElementRef,
+          useValue: {
+            nativeElement: el
+          }
+        }
+      ]
+    })
+  })
   it('should create an instance', () => {
-    const directive = new MouseInteractionDirective();
+    const directive = TestBed.inject(MouseInteractionDirective)
     expect(directive).toBeTruthy();
   });
 });
diff --git a/frontend/src/mouse-interactions/mouse-interaction.directive.ts b/frontend/src/mouse-interactions/mouse-interaction.directive.ts
index 992e5233..c46f387a 100644
--- a/frontend/src/mouse-interactions/mouse-interaction.directive.ts
+++ b/frontend/src/mouse-interactions/mouse-interaction.directive.ts
@@ -6,8 +6,10 @@ import {
   Input,
   OnDestroy,
   Output,
+  inject,
 } from '@angular/core';
-import { filter, fromEvent, map, Subject, switchMap, takeUntil } from 'rxjs';
+import { filter, map, Subject, switchMap, takeUntil } from 'rxjs';
+import { DestroyDirective } from 'src/util/destroy.directive';
 
 type SupportedEvents =
   | 'mousedown'
@@ -22,8 +24,14 @@ type _Subject<T extends SupportedEvents> = Subject<{
 
 @Directive({
   selector: '[volubaMouseInteraction]',
+  hostDirectives: [
+    DestroyDirective
+  ],
+  standalone: true
 })
-export class MouseInteractionDirective implements OnDestroy, AfterViewInit {
+export class MouseInteractionDirective implements AfterViewInit {
+
+  destroyed$ = inject(DestroyDirective).destroyed$
 
   @Input()
   ignoreElements: { has(el: HTMLElement): boolean } | null = null
@@ -51,31 +59,31 @@ export class MouseInteractionDirective implements OnDestroy, AfterViewInit {
   @Output()
   mousedown = new EventEmitter<{ event: MouseEvent }>()
 
+  @Output()
+  mouseup = new EventEmitter<{ event: MouseEvent }>()
+
   ngAfterViewInit(): void {
-    this.#htmlEl = this.el.nativeElement as HTMLElement;
-
-    const subscriptions = [
-      this.#getEventStream('mousedown')
-        .pipe(
-          switchMap(() =>
-            this.#getEventStream('mousemove').pipe(
-              takeUntil(this.#getEventStream('mouseup'))
-            )
-          )
-        )
-        .subscribe((ev) => {
-          const { movementX, movementY } = ev;
-          this.volubaDrag.emit({ movementX, movementY });
-        }),
-      this.#getEventStream('mousedown').subscribe(event => this.mousedown.emit({ event }))
-    ]
-
-    this.#onDestroyCb.push(() => subscriptions.forEach(sub => sub.unsubscribe()));
-  }
+    this.#htmlEl = this.el.nativeElement as HTMLElement
 
-  #onDestroyCb: (() => void)[] = [];
-  ngOnDestroy(): void {
-    while (this.#onDestroyCb.length) this.#onDestroyCb.pop()!();
+    this.#getEventStream('mousedown').pipe(
+      switchMap(() =>
+        this.#getEventStream('mousemove').pipe(
+          takeUntil(this.#getEventStream('mouseup'))
+        )
+      ),
+      takeUntil(this.destroyed$),
+    )
+    .subscribe((ev) => {
+      const { movementX, movementY } = ev;
+      this.volubaDrag.emit({ movementX, movementY });
+    })
+    this.#getEventStream('mousedown').pipe(
+      takeUntil(this.destroyed$),
+    ).subscribe(event => this.mousedown.emit({ event }))
+
+    this.#getEventStream("mouseup").pipe(
+      takeUntil(this.destroyed$),
+    ).subscribe(event => this.mouseup.emit({ event }))
   }
 
   #eventsHandled = new Set<SupportedEvents>();
@@ -97,16 +105,17 @@ export class MouseInteractionDirective implements OnDestroy, AfterViewInit {
           event.stopPropagation();
         }
         this.#eventSubject.next({ eventname, event });
-      };
+      }
       this.#htmlEl?.addEventListener(eventname, evh, {
         capture: true,
-      });
-      this.#onDestroyCb.push(() =>
+      })
+
+      this.destroyed$.subscribe(() => {
         this.#htmlEl?.removeEventListener(eventname, evh, {
           capture: true,
         })
-      );
-      this.#eventsHandled.add(eventname);
+      })
+      this.#eventsHandled.add(eventname)
     }
     return this.#eventSubject.pipe(
       filter((ev) => ev.eventname === eventname),
diff --git a/frontend/src/mouse-interactions/mouse-interactions.module.ts b/frontend/src/mouse-interactions/mouse-interactions.module.ts
deleted file mode 100644
index cc774caa..00000000
--- a/frontend/src/mouse-interactions/mouse-interactions.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MouseInteractionDirective } from './mouse-interaction.directive';
-
-@NgModule({
-  declarations: [MouseInteractionDirective],
-  imports: [CommonModule],
-  exports: [MouseInteractionDirective],
-})
-export class MouseInteractionsModule {}
diff --git a/frontend/src/sharedModule/sharedModule.ts b/frontend/src/sharedModule/sharedModule.ts
index c567c4f3..78c65898 100644
--- a/frontend/src/sharedModule/sharedModule.ts
+++ b/frontend/src/sharedModule/sharedModule.ts
@@ -7,6 +7,9 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTooltipModule } from "@angular/material/tooltip"
+import { MatButtonToggleModule } from '@angular/material/button-toggle'
+import { MatTabsModule } from "@angular/material/tabs"
 
 @NgModule({
   imports: [
@@ -18,6 +21,9 @@ import { MatFormFieldModule } from '@angular/material/form-field';
     MatDividerModule,
     MatInputModule,
     MatFormFieldModule,
+    MatTooltipModule,
+    MatButtonToggleModule,
+    MatTabsModule,
   ],
   exports: [
     MatSnackBarModule,
@@ -28,6 +34,9 @@ import { MatFormFieldModule } from '@angular/material/form-field';
     MatDividerModule,
     MatInputModule,
     MatFormFieldModule,
+    MatTooltipModule,
+    MatButtonToggleModule,
+    MatTabsModule,
   ]
 })
 
diff --git a/frontend/src/state/actions.ts b/frontend/src/state/actions.ts
index 8f81b8e4..c812b3bf 100644
--- a/frontend/src/state/actions.ts
+++ b/frontend/src/state/actions.ts
@@ -6,3 +6,8 @@ export const error = createAction(
   `[${nameSpace}] error`,
   props<{ message: string }>()
 )
+
+export const info = createAction(
+  `[${nameSpace}] info`,
+  props<{ message: string }>()
+)
\ No newline at end of file
diff --git a/frontend/src/state/app/actions.ts b/frontend/src/state/app/actions.ts
index ceacf35f..70451e88 100644
--- a/frontend/src/state/app/actions.ts
+++ b/frontend/src/state/app/actions.ts
@@ -67,3 +67,17 @@ export const updateLandmarkPair = createAction(
     value: Partial<Omit<LandmarkPair, 'id'>>
   }>()
 )
+
+export const navigateTo = createAction(
+  `[${nameSpace}] navigateTo`,
+  props<{
+    position: number[]
+  }>()
+)
+
+export const hoverLandmark = createAction(
+  `[${nameSpace}] hoverLandmark`,
+  props<{
+    landmark: Landmark|null
+  }>()
+)
diff --git a/frontend/src/state/app/consts.ts b/frontend/src/state/app/consts.ts
index 91ec38a6..3e80769d 100644
--- a/frontend/src/state/app/consts.ts
+++ b/frontend/src/state/app/consts.ts
@@ -9,28 +9,27 @@ export const MODE = {
   SIDE_BY_SIDE: "SIDE_BY_SIDE",
 } as const
 
-type Vec3 = [number, number, number];
-
 export type Landmark = {
-  targetVolumeId: string;
-  position: Vec3;
+  targetVolumeId: string
+  position: number[]
 };
 
 export type LandmarkPair = {
-  tmplLm: Landmark;
-  incLm: Landmark;
-  id: string;
-  name: string;
-};
+  tmplLm: Landmark
+  incLm: Landmark
+  id: string
+  name: string
+}
 
 export type LocalState = {
-  stage: keyof typeof STAGE;
-  mode: keyof typeof MODE;
-  incLocked: boolean;
-  addingLandmark: boolean;
-  landmarkPairs: LandmarkPair[];
-  purgatory: Landmark|null;
-};
+  stage: keyof typeof STAGE
+  mode: keyof typeof MODE
+  incLocked: boolean
+  addingLandmark: boolean
+  landmarkPairs: LandmarkPair[]
+  purgatory: Landmark|null
+  hoveredLandmark: Landmark|null
+}
 
 export const defaultState: LocalState = {
   stage: STAGE.ALIGNMENT, // STAGE.SELECTION,
@@ -50,6 +49,7 @@ export const defaultState: LocalState = {
     }
   }],
   purgatory: null,
+  hoveredLandmark: null,
 };
 
 export const nameSpace = `app`;
diff --git a/frontend/src/state/app/effects.ts b/frontend/src/state/app/effects.ts
index 6144dd43..80290915 100644
--- a/frontend/src/state/app/effects.ts
+++ b/frontend/src/state/app/effects.ts
@@ -1,9 +1,9 @@
 import { Injectable } from "@angular/core";
 import { Actions, createEffect, ofType } from "@ngrx/effects";
-import { select, Store } from "@ngrx/store";
+import { Action, select, Store } from "@ngrx/store";
 import * as selectors from "./selectors"
 import * as actions from "./actions"
-import { from, of, switchMap, withLatestFrom } from "rxjs";
+import { filter, from, map, of, switchMap, withLatestFrom } from "rxjs";
 import { MatSnackBar } from "src/sharedModule"
 import * as outputs from "src/state/outputs"
 import * as inputs from "src/state/inputs"
@@ -12,6 +12,12 @@ import { Landmark } from "./consts";
 
 @Injectable()
 export class Effects {
+  onExitLmModeClearPurgatory = createEffect(() => this.actions$.pipe(
+    ofType(actions.setAddLandmarkMode),
+    filter(action => !action.mode),
+    map(() => actions.purgePurgatory())
+  ))
+
   onAddLandmarkRequest = createEffect(() => this.actions$.pipe(
     ofType(actions.addLandmark),
     withLatestFrom(
@@ -26,9 +32,12 @@ export class Effects {
       ),
       this.store.pipe(
         outputs.selectors.getIncXform()
+      ),
+      this.store.pipe(
+        select(selectors.isDefaultMode)
       )
     ),
-    switchMap(([lm, refVol, incVol,  purgatory, xform]) => {
+    switchMap(([lm, refVol, incVol,  purgatory, xform, isDefaultMode]) => {
       if (!purgatory) {
         if (refVol?.["@id"] !== lm.landmark.targetVolumeId) {
           return of(
@@ -53,28 +62,40 @@ export class Effects {
       }
       const { mat4, vec3 } = export_nehuba
       const lmPos = vec3.fromValues(...lm.landmark.position)
-      mat4.invert(xform, xform)
-      vec3.transformMat4(lmPos, lmPos, xform)
+      const inverted = mat4.invert(mat4.create(), xform)
+      vec3.transformMat4(lmPos, lmPos, inverted)
 
       const incLandmark: Landmark = {
         position: Array.from(lmPos) as [number, number, number],
         targetVolumeId: lm.landmark.targetVolumeId
       }
-      return from(
-        [
-          actions.purgePurgatory(),
-          lm.landmark.targetVolumeId === purgatory.targetVolumeId
-          ? actions.error({ message: `Attempting to add landmark pair to the same volume` })
-          : actions.addLandmarkPair({
-              landmarkPair: {
-                tmplLm: purgatory,
-                incLm: incLandmark,
-                name: `Untitled`,
-                id: crypto.randomUUID(),
-              }
-            })
-        ]
+
+      const invokeActions: Action[] = []
+
+      invokeActions.push(
+        actions.purgePurgatory()
+      )
+
+      invokeActions.push(
+        actions.addLandmarkPair({
+          landmarkPair: {
+            tmplLm: purgatory,
+            incLm: incLandmark,
+            name: `Untitled`,
+            id: crypto.randomUUID(),
+          }
+        })
       )
+      /**
+       * if in two pane mode, exit add landmark mode
+       */
+      if (!isDefaultMode) {
+        invokeActions.push(
+          actions.setAddLandmarkMode({ mode: false })
+        )
+      }
+
+      return from(invokeActions)
     })
   ))
 
diff --git a/frontend/src/state/app/selectors.ts b/frontend/src/state/app/selectors.ts
index d1ab045a..b3f3931c 100644
--- a/frontend/src/state/app/selectors.ts
+++ b/frontend/src/state/app/selectors.ts
@@ -29,3 +29,16 @@ export const isDefaultMode = createSelector(
   featureSelector,
   state => state.mode === MODE.DEFAULT
 )
+
+export const hoveredLandmark = createSelector(
+  featureSelector,
+  state => state.hoveredLandmark
+)
+
+export const hoveredLandmarkPair = createSelector(
+  landmarks,
+  hoveredLandmark,
+  ( landmarks, hoveredLandmark ) => {
+    return landmarks.find(lm => lm.incLm === hoveredLandmark || lm.tmplLm === hoveredLandmark)
+  }
+)
diff --git a/frontend/src/state/app/state.ts b/frontend/src/state/app/state.ts
index b906faca..0885ad66 100644
--- a/frontend/src/state/app/state.ts
+++ b/frontend/src/state/app/state.ts
@@ -1,5 +1,5 @@
 import { createReducer, on } from '@ngrx/store';
-import { defaultState, MODE } from './consts';
+import { defaultState, LandmarkPair, MODE } from './consts';
 import * as actions from './actions';
 
 export const reducer = createReducer(
@@ -39,19 +39,29 @@ export const reducer = createReducer(
     : MODE.DEFAULT
   })),
   on(actions.updateLandmarkPair, (state, { id, value }) => {
-    const found = state.landmarkPairs.find(lmp => lmp.id === id)
-    if (!found) {
-      return { ...state }
+    const updatedLmps: LandmarkPair[] = []
+
+    for (const lmp of state.landmarkPairs) {
+      if (lmp.id !== id) {
+        updatedLmps.push(lmp)
+        continue
+      }
+
+      updatedLmps.push({
+        ...lmp,
+        ...value        
+      })
     }
 
-    const otherLmps = state.landmarkPairs.filter(lmp => lmp !== found)
-    const newLmp = {
-      ...found,
-      ...value
+    return {
+      ...state,
+      landmarkPairs: updatedLmps,
     }
+  }),
+  on(actions.hoverLandmark, (state, { landmark }) => {
     return {
       ...state,
-      landmarkPairs: [...otherLmps, newLmp]
+      hoveredLandmark: landmark
     }
   })
-);
+)
diff --git a/frontend/src/state/inputs/selectors.ts b/frontend/src/state/inputs/selectors.ts
index c1e4ddba..0a79a20b 100644
--- a/frontend/src/state/inputs/selectors.ts
+++ b/frontend/src/state/inputs/selectors.ts
@@ -1,5 +1,6 @@
-import { createSelector } from '@ngrx/store';
+import { createSelector, select } from '@ngrx/store';
 import { nameSpace, LocalState } from './consts';
+import { distinctUntilChanged, from, map, of, pipe, switchMap, throwError } from 'rxjs';
 
 const featureSelector = (state: any) => state[nameSpace] as LocalState;
 
@@ -33,4 +34,33 @@ export const centerVoxel = createSelector(
     const dim = vec3.fromValues(...state.selectedIncoming.dim)
     return vec3.scale(dim, dim, 0.5)
   }
-)
\ No newline at end of file
+)
+
+export const inputFilesName = createSelector(
+  selectedTemplate,
+  selectedIncoming,
+  (tmp, inc) => `${tmp?.name || 'unknown'}-${inc?.name || 'unknown'}`
+)
+
+export const getIncVoxelSize = () => pipe(
+  select(selectedIncoming),
+  distinctUntilChanged((o, n) => o?.["@id"] === n?.["@id"]),
+  switchMap(incoming => {
+    if (!incoming) {
+      return of(null)
+    }
+    if (incoming.volumes.length !== 1) {
+      return throwError(() => new Error(`Can only process incoming with one and only one volume. But got ${incoming.volumes.length}`))
+    }
+    const volume = incoming.volumes[0]
+    const precomputedUrl = volume.providers["neuroglancer/precomputed"]
+    
+    return from(
+      fetch(`${precomputedUrl}/info`).then(res => res.json())
+    ).pipe(
+      map(v => {
+        return v?.scales?.[0]?.resolution as number[]|undefined
+      })
+    )
+  })
+)
diff --git a/frontend/src/state/outputs/actions.ts b/frontend/src/state/outputs/actions.ts
index 40cc3cbc..4e5403a3 100644
--- a/frontend/src/state/outputs/actions.ts
+++ b/frontend/src/state/outputs/actions.ts
@@ -52,3 +52,10 @@ export const rotateIncBy = createAction(
 );
 
 export const dry = createAction(`[${nameSpace}] dry`);
+
+export const flipAxis = createAction(
+  `[${nameSpace}] flipAxis`,
+  props<{
+    axis: 'x' | 'y' | 'z'
+  }>()
+)
diff --git a/frontend/src/state/outputs/effects.ts b/frontend/src/state/outputs/effects.ts
index 846c0328..34a4fd06 100644
--- a/frontend/src/state/outputs/effects.ts
+++ b/frontend/src/state/outputs/effects.ts
@@ -58,7 +58,7 @@ export class Effects {
     ofType(actions.setIncScale),
     withLatestFrom(
       this.store.pipe(
-        select(selectors.incMatrixMat4)
+        selectors.getIncXform(),
       ),
       this.store.pipe(
         select(inputs.selectors.centerVoxel),
@@ -121,7 +121,33 @@ export class Effects {
         });
       })
     )
-  );
+  )
+
+  onAxisFlip = createEffect(() => this.actions$.pipe(
+    ofType(actions.flipAxis),
+    withLatestFrom(
+      this.store.pipe(
+        selectors.getIncXform()
+      )
+    ),
+    map(([ flipAxisAction, xform ]) => {
+      const { vec3, mat4 } = export_nehuba
+
+      const { axis } = flipAxisAction
+      const flipVec3 = vec3.fromValues(1, 1, 1)
+      
+      if (axis === 'x') flipVec3[0] = -1
+      if (axis === 'y') flipVec3[1] = -1
+      if (axis === 'z') flipVec3[2] = -1
+
+      const currScaling = mat4.getScaling(vec3.create(), xform)
+      vec3.mul(currScaling, currScaling, flipVec3)
+      return actions.setIncScale({
+        array: Array.from(currScaling)
+      })
+    })
+  ))
+
 
   constructor(private actions$: Actions, private store: Store) {}
 }
diff --git a/frontend/src/state/outputs/selectors.ts b/frontend/src/state/outputs/selectors.ts
index 2363ac72..a3ef5ee8 100644
--- a/frontend/src/state/outputs/selectors.ts
+++ b/frontend/src/state/outputs/selectors.ts
@@ -27,9 +27,18 @@ export const incMatrixMat4 = createSelector(featureSelector, (state) => {
   );
 });
 
-export const flippedState = createSelector(featureSelector, (state) => {
-  const { vec3 } = export_nehuba;
-  return vec3.fromValues(
-    ...state.flippedState.split(',').map((v) => Number(v))
-  );
-});
+const flippedStateStr = createSelector(
+  featureSelector,
+  state => state.flippedState
+)
+
+export const getFlippedState = () => pipe (
+  select(flippedStateStr),
+  distinctUntilChanged(),
+  map(str => {
+    const { vec3 } = export_nehuba
+    return vec3.fromValues(
+      ...str.split(",").map(v => Number(v))
+    )
+  })
+)
diff --git a/frontend/src/state/outputs/state.ts b/frontend/src/state/outputs/state.ts
index ceeb21cc..c78803ea 100644
--- a/frontend/src/state/outputs/state.ts
+++ b/frontend/src/state/outputs/state.ts
@@ -1,6 +1,7 @@
 import { createReducer, on } from '@ngrx/store';
 import { defaultState } from './consts';
 import * as actions from './actions';
+import { isDefined } from 'src/const';
 
 export const reducer = createReducer(
   defaultState,
@@ -16,5 +17,21 @@ export const reducer = createReducer(
       ...state,
       transformStr: returnString,
     };
+  }),
+  on(actions.flipAxis, (state, { axis }) => {
+    const axesState = state.flippedState.split(",").map(v => Number(v))
+    let idx: number|undefined
+    if (axis === 'x') idx = 0
+    if (axis === 'y') idx = 1
+    if (axis === 'z') idx = 2
+    if (!isDefined(idx)) {
+      console.error(`Cannot figure out axis ${axis}.`)
+      return { ...state }
+    }
+    axesState[idx] *= -1
+    return {
+      ...state,
+      flippedState: axesState.join(",")
+    }
   })
 );
diff --git a/frontend/src/util/dialog.directive.ts b/frontend/src/util/dialog.directive.ts
index 5c1290dd..d5a07633 100644
--- a/frontend/src/util/dialog.directive.ts
+++ b/frontend/src/util/dialog.directive.ts
@@ -1,11 +1,20 @@
 import { Directive, HostListener, Input, TemplateRef } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { BehaviorSubject, Subject } from 'rxjs';
 import { isHtmlElement } from 'src/const';
 
 @Directive({
   selector: '[volubaDialog]',
+  exportAs: 'volubaDialog'
 })
 export class DialogDirective {
+
+  #state$ = new BehaviorSubject<boolean>(false)
+  state$ = this.#state$.asObservable()
+
+  @Input()
+  clickToToggle: boolean = true
+
   @Input()
   dialogTarget: TemplateRef<unknown> | null = null;
 
@@ -13,9 +22,26 @@ export class DialogDirective {
 
   @HostListener('click', ['$event'])
   click(event: MouseEvent) {
-    if (!this.dialogTarget) return;
-    this.close();
 
+    if (this.clickToToggle) {
+      this.toggle(event)
+      return
+    }
+
+    this.open(event)
+
+  }
+
+  toggle(event: MouseEvent) {
+    if (this.#matDialogRef) {
+      this.close()
+    } else {
+      this.open(event)
+    }
+  }
+
+  open(event: MouseEvent) {
+    if (!this.dialogTarget) return;
     const { target } = event;
     let top, left;
     if (isHtmlElement(target)) {
@@ -30,6 +56,11 @@ export class DialogDirective {
         top: `${top}px`,
       },
     });
+    this.#matDialogRef.afterClosed().subscribe(() => {
+      this.#state$.next(false)
+      this.#matDialogRef = null
+    })
+    this.#state$.next(true)
   }
 
   close() {
diff --git a/frontend/src/views/control-menu/control-menu.component.html b/frontend/src/views/control-menu/control-menu.component.html
index 92c5ed2e..9a311720 100644
--- a/frontend/src/views/control-menu/control-menu.component.html
+++ b/frontend/src/views/control-menu/control-menu.component.html
@@ -1,20 +1,28 @@
-<button mat-mini-fab color="default"
+<button mat-mini-fab
     volubaDialog
+    #tundialog="volubaDialog"
+    [color]="(tundialog.state$ | async) ? 'primary' : 'default'"
     [dialogTarget]="tunelayerTmpl">
     <mat-icon fontIcon="tune"></mat-icon>
 </button>
-<button mat-mini-fab color="default"
+<button mat-mini-fab
     volubaDialog
+    #lmdialog="volubaDialog"
+    [color]="(lmdialog.state$ | async) ? 'primary' : 'default'"
     [dialogTarget]="landmarkViewTmpl">
     <mat-icon fontIcon="edit_location"></mat-icon>
 </button>
-<button mat-mini-fab color="default"
+<button mat-mini-fab
     volubaDialog
+    #historydialog="volubaDialog"
+    [color]="(historydialog.state$ | async) ? 'primary' : 'default'"
     [dialogTarget]="historyTmpl">
     <mat-icon fontIcon="history"></mat-icon>
 </button>
-<button mat-mini-fab color="default"
+<button mat-mini-fab
     volubaDialog
+    #sharedialog="volubaDialog"
+    [color]="(sharedialog.state$ | async) ? 'primary' : 'default'"
     [dialogTarget]="shareResultTmpl">
     <mat-icon fontIcon="share"></mat-icon>
 </button>
@@ -40,6 +48,6 @@
 
 <ng-template #shareResultTmpl>
     <voluba-movable-portal title="Share/Export">
-        share result tmpl
+        <voluba-share-export></voluba-share-export>
     </voluba-movable-portal>
 </ng-template>
\ No newline at end of file
diff --git a/frontend/src/views/nehuba-viewer-wrapper/nehuba-viewer-wrapper.component.html b/frontend/src/views/nehuba-viewer-wrapper/nehuba-viewer-wrapper.component.html
index 967a3e1c..d79e75d2 100644
--- a/frontend/src/views/nehuba-viewer-wrapper/nehuba-viewer-wrapper.component.html
+++ b/frontend/src/views/nehuba-viewer-wrapper/nehuba-viewer-wrapper.component.html
@@ -1,2 +1,2 @@
-<div id="neuroglancer-container">
+<div id="neuroglancer-container" class="ng-container">
 </div>
\ No newline at end of file
diff --git a/frontend/src/views/nehuba-viewer-wrapper/nehuba-viewer-wrapper.component.scss b/frontend/src/views/nehuba-viewer-wrapper/nehuba-viewer-wrapper.component.scss
index 48626951..818f3577 100644
--- a/frontend/src/views/nehuba-viewer-wrapper/nehuba-viewer-wrapper.component.scss
+++ b/frontend/src/views/nehuba-viewer-wrapper/nehuba-viewer-wrapper.component.scss
@@ -1,4 +1,4 @@
-#neuroglancer-container
+.ng-container
 {
     width: 100%;
     height: 100%;
diff --git a/frontend/src/views/nehuba-viewer-wrapper/nehuba-viewer-wrapper.component.ts b/frontend/src/views/nehuba-viewer-wrapper/nehuba-viewer-wrapper.component.ts
index e1c37c3d..d394c099 100644
--- a/frontend/src/views/nehuba-viewer-wrapper/nehuba-viewer-wrapper.component.ts
+++ b/frontend/src/views/nehuba-viewer-wrapper/nehuba-viewer-wrapper.component.ts
@@ -4,26 +4,29 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  Inject,
   Input,
   OnInit,
   Output,
   inject,
 } from '@angular/core';
-import { distinctUntilChanged, fromEvent, map, merge, takeUntil } from 'rxjs';
-import { isHtmlElement, Mat4, PatchedSymbol, SliceViewProviderType, SLICEVIEWS_INJECTION_TOKEN } from 'src/const';
+import { ReplaySubject, Subject, distinctUntilChanged, fromEvent, map, merge, scan, shareReplay, takeUntil } from 'rxjs';
+import { FloatArrayEql, isHtmlElement, Mat4, PatchedSymbol } from 'src/const';
 import { DestroyDirective } from 'src/util/destroy.directive';
 
-const NEHUBA_PATCHED = Symbol("NEHUBA_PATCHED")
 
 export type NehubaLayer = {
-  id: string;
-  url: string;
-  transform: Mat4;
-};
+  id: string
+  url: string
+  transform: Mat4
+}
+
+export type NehubaNavigation = {
+  position: Float32Array
+  orientation: Float32Array
+  zoom: number
+}
 
 const lightmode = {
-  configName: 'BigBrain',
   globals: {
     hideNullImageValues: true,
     useNehubaLayout: {
@@ -40,38 +43,25 @@ const lightmode = {
   rotateAtViewCentre: true,
   enableMeshLoadingControl: true,
   zoomAtViewCentre: true,
-  restrictUserNavigation: true,
   disableSegmentSelection: true,
   dataset: {
     imageBackground: [1, 1, 1, 1],
     initialNgState: {
       showDefaultAnnotations: true,
       layers: {
-        ' grey value: ': {
-          annotationColor: '#cccccc',
-          visible: false,
-          type: 'image',
-          // "source": "precomputed://http://imedv02.ime.kfa-juelich.de:8287/precomputed/BigBrainRelease.2015/8bit",
-          source:
-            'precomputed://https://neuroglancer.humanbrainproject.org/precomputed/BigBrainRelease.2015/8bit',
-          transform: [
-            [1, 0, 0, -70677184],
-            [0, 1, 0, -70010000],
-            [0, 0, 1, -58788284],
-            [0, 0, 0, 1],
-          ],
-        },
-        default: {
-          // "source": `${sourceUrl}`
-        },
+        // populated by the component
       },
       perspectiveOrientation: [
-        0.3140767216682434, -0.7418519854545593, 0.4988985061645508,
-        -0.3195493221282959,
+        0.3140767216682434, -0.7418519854545593, 0.4988985061645508, -0.3195493221282959,
       ],
       perspectiveZoom: 1922235.5293810747,
       navigation: {
         zoomFactor: 350000,
+        pose: {
+          position: {
+            voxelCoordinates: [0, 0, 0]
+          },
+        }
       },
     },
   },
@@ -80,7 +70,7 @@ const lightmode = {
     planarSlicesBackground: [1, 1, 1, 0],
     useNehubaPerspective: {
       enableShiftDrag: false,
-      doNotRestrictUserNavigation: false,
+      doNotRestrictUserNavigation: true,
       perspectiveSlicesBackground: [1, 1, 1, 1],
       removePerspectiveSlicesBackground: {
         color: [1, 1, 1, 1],
@@ -113,10 +103,10 @@ const lightmode = {
       },
       hideImages: false,
       waitForMesh: false,
-      restrictZoomLevel: {
-        minZoom: 1200000 * 0.002,
-        maxZoom: 3500000 * 0.002,
-      },
+      // restrictZoomLevel: {
+      //   minZoom: 1200000 * 0.002,
+      //   maxZoom: 3500000 * 0.002,
+      // },
     },
   },
 };
@@ -154,33 +144,21 @@ export class NehubaViewerWrapperComponent implements OnInit, AfterViewInit {
 
   #destroyed$ = inject(DestroyDirective).destroyed$
 
-  @Input()
-  layers: NehubaLayer[] = [
-    {
-      id: 'big brain grey value',
-      url: 'precomputed://https://neuroglancer.humanbrainproject.org/precomputed/BigBrainRelease.2015/8bit' && 'precomputed://http://127.0.0.1:8080/sharded/BigBrainRelease.2015/8bit',
-      transform: [
-        [1, 0, 0, -70677184],
-        [0, 1, 0, -70010000],
-        [0, 0, 1, -58788284],
-        [0, 0, 0, 1],
-      ],
-    },
-    {
-      id: 'bla',
-      url: 'precomputed://https://neuroglancer.humanbrainproject.eu/precomputed/JuBrain/v2.2c/colin27_seg' && 'precomputed://http://127.0.0.1:8080/sharded/WHS_SD_rat/templates/v1.01/t2star_masked/',
-      transform: [
-        [1.0, 0.0, 0.0, -75500000.0],
-        [0.0, 1.0, 0.0, -111500000.0],
-        [0.0, 0.0, 1.0, -67500000.0],
-        [0.0, 0.0, 0.0, 1.0],
-      ],
-    },
-  ];
+  @Input('nehuba-viewer-alias')
+  nehubaAlias: string = 'nehubaViewer'
+
+  @Input('nehuba-viewer-layers')
+  layers: NehubaLayer[] = []
+
+  @Input('nehuba-viewer-init-navigation')
+  initNavigation: NehubaNavigation|null = null
 
   @Output()
   mousePosition = new EventEmitter<Float32Array>()
 
+  @Output()
+  navigation = new EventEmitter<NehubaNavigation>()
+
   @Output()
   mousedownSliceView = new EventEmitter<{
     sliceView: export_nehuba.SliceView | null | undefined;
@@ -196,7 +174,6 @@ export class NehubaViewerWrapperComponent implements OnInit, AfterViewInit {
 
   constructor(
     private el: ElementRef,
-    @Inject(SLICEVIEWS_INJECTION_TOKEN) private sliceViewProvider: SliceViewProviderType
   ) {}
 
   ngOnInit() {
@@ -221,17 +198,51 @@ export class NehubaViewerWrapperComponent implements OnInit, AfterViewInit {
         transform: layer.transform,
       };
     }
-    this.nehubaViewer = export_nehuba.createNehubaViewer(config, console.error);
+    if (this.initNavigation) {
+      config.dataset.initialNgState.navigation.pose.position.voxelCoordinates = Array.from(this.initNavigation.position)
+      config.dataset.initialNgState.navigation.zoomFactor = this.initNavigation.zoom
+      config.dataset.initialNgState.navigation.pose.orientation = Array.from(this.initNavigation.orientation)
+    }
+    
+    this.nehubaViewer = export_nehuba.createNehubaViewer(config, console.error)
+
+    /**
+     * vacate id neuroglancer-container so other containers can be inst
+     */
+    const el: HTMLElement = this.el.nativeElement.querySelector('#neuroglancer-container')
+    el.id = this.nehubaAlias
 
     const subscription = this.nehubaViewer.mousePosition.inVoxels.subscribe(val => {
       this.mousePosition.emit(val)
     })
-    this.#destroyed$.subscribe(subscription.unsubscribe)
+
+    const posSubject = new Subject<NehubaNavigation>()
+    const navSub = this.nehubaViewer.navigationState.all.subscribe(val => {
+      posSubject.next({
+        position: val.position,
+        orientation: val.orientation,
+        zoom: val.zoom,
+      })
+    })
+    posSubject.pipe(
+      distinctUntilChanged((o, n) => (
+        FloatArrayEql(o.orientation, n.orientation)
+        && FloatArrayEql(o.position, n.position)
+        && o.zoom === n.zoom
+      )),
+      takeUntil(this.#destroyed$)
+    ).subscribe(nav => {
+      this.navigation.next(nav)
+    })
+
+    this.#destroyed$.subscribe(() => {
+      (window as any)[this.nehubaAlias] = null
+      subscription.unsubscribe()
+      navSub.unsubscribe()
+    })
     
     this.#patchNehuba();
-    (() => {
-      (window as any).nehubaViewer = this.nehubaViewer
-    })()
+    (window as any)[this.nehubaAlias] = this.nehubaViewer
   }
 
   ngAfterViewInit(): void {
@@ -258,29 +269,71 @@ export class NehubaViewerWrapperComponent implements OnInit, AfterViewInit {
 
   }
 
+  private sliceViewsSubject$ = new ReplaySubject<{
+    idx: number,
+    sliceView: export_nehuba.SliceView
+  }>(3)
+
+  sliceViews$ = this.sliceViewsSubject$.pipe(
+    scan((acc, curr) => {
+      const returnVal = [...acc]
+      returnVal[curr.idx] = curr.sliceView
+      return returnVal
+    }, [null, null, null] as (export_nehuba.SliceView | null)[]),
+    shareReplay(1),
+  )
+
   #patchNehuba() {
-    if (!this.nehubaViewer) return;
+    if (!this.nehubaViewer) return
+
+    /**
+     * n.b.
+     * There is a small chance that the reality may have drifted when
+     * boundingclientrect is called and when sliceview elements are measured
+     * 
+     */
+    const { top, left } = this.el.nativeElement.getBoundingClientRect()
+
+    const determineIdx = (el: HTMLElement) => {
+      const child = el.getBoundingClientRect()
+      const rLeft = child.left - left
+      const rTop = child.top - top
+      if (rLeft < 5 && rTop < 5) {
+        return 0
+      }
+      if (rLeft > 5 && rTop < 5) {
+        return 1
+      }
+      if (rLeft < 5 && rTop > 5) {
+        return 2
+      }
+      throw new Error(`rLeft ${rLeft} rTop ${rTop} is unexpected`)
+    }
 
     const patchSliceViewPanel = (
       sliceViewPanel: export_nehuba.SliceViewPanel
     ) => {
       if (this.#patchedSliceViewPanels.has(sliceViewPanel)) return;
-      const { elementToSliceViewWeakMap, sliceViewProvider } = this;
+      const { elementToSliceViewWeakMap, sliceViewsSubject$ } = this;
       this.#patchedSliceViewPanels.add(sliceViewPanel);
       const originalDraw = sliceViewPanel.draw;
       sliceViewPanel.draw = function () {
-        if (this.sliceView) {
-          sliceViewProvider.register({element: this.element, sliceview: this.sliceView})
-          elementToSliceViewWeakMap.set(this.element, this.sliceView);
+        if (this.sliceView && !elementToSliceViewWeakMap.has(this.element)) {
+          elementToSliceViewWeakMap.set(this.element, this.sliceView)
+          const idx = determineIdx(this.element)
+          sliceViewsSubject$.next({
+            idx,
+            sliceView: this.sliceView
+          })
         }
 
-        originalDraw.call(this);
+        originalDraw.call(this)
       };
     };
     this.nehubaViewer.ngviewer.display.changed.add(() => {
-      if (!this.nehubaViewer) return;
-      this.nehubaViewer.ngviewer.display.panels.forEach(patchSliceViewPanel);
-    });
+      if (!this.nehubaViewer) return
+      this.nehubaViewer.ngviewer.display.panels.forEach(patchSliceViewPanel)
+    })
   }
 
   setLayerProperty(id: string, property: Partial<LayerProperties>) {
@@ -308,4 +361,12 @@ export class NehubaViewerWrapperComponent implements OnInit, AfterViewInit {
       layer.setVisible(visible)
     }
   }
+
+  setPosition(position: number[]) {
+    this.nehubaViewer?.ngviewer.navigationState.pose.position.restoreState(position)
+  }
+
+  setOrientation(orientation: number[]) {
+    this.nehubaViewer?.ngviewer.navigationState.pose.orientation.restoreState( orientation )
+  }
 }
diff --git a/frontend/src/views/shareExport/shareExport.component.ts b/frontend/src/views/shareExport/shareExport.component.ts
new file mode 100644
index 00000000..a8b602d7
--- /dev/null
+++ b/frontend/src/views/shareExport/shareExport.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+
+@Component({
+  selector: 'voluba-share-export',
+  templateUrl: './shareExport.template.html',
+  styleUrls: [
+    './shareExport.style.scss'
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class ShareExportComponent {
+
+}
\ No newline at end of file
diff --git a/frontend/src/views/shareExport/shareExport.style.scss b/frontend/src/views/shareExport/shareExport.style.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/views/shareExport/shareExport.template.html b/frontend/src/views/shareExport/shareExport.template.html
new file mode 100644
index 00000000..2f0962e0
--- /dev/null
+++ b/frontend/src/views/shareExport/shareExport.template.html
@@ -0,0 +1,32 @@
+<h3>
+    Load
+</h3>
+
+<button mat-icon-button matTooltip="Load JSON Transformation">
+    <mat-icon>folder_open</mat-icon>
+</button>
+
+<h3>
+    Save
+</h3>
+
+<button mat-icon-button="Export volume with the current transform.">
+    <mat-icon>cloud_download</mat-icon>
+</button>
+
+<button mat-icon-button matTooltip="Save transformation as JSON">
+    <mat-icon>download</mat-icon>
+</button>
+
+<button mat-icon-button matTooltip="View the volume with the current transform in siibra-explorer">
+    <mat-icon>preview</mat-icon>
+</button>
+
+
+<h3>
+    Share
+</h3>
+
+<button mat-icon-button matTooltip="Publish the transformation metadata to ebrains">
+    <mat-icon>share</mat-icon>
+</button>
diff --git a/frontend/src/views/viewer/displayNumArray.pipe.ts b/frontend/src/views/viewer/displayNumArray.pipe.ts
new file mode 100644
index 00000000..1daa5371
--- /dev/null
+++ b/frontend/src/views/viewer/displayNumArray.pipe.ts
@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+  name: 'displayNumArray',
+  pure: true
+})
+
+export class DisplayNumArrayPipe implements PipeTransform{
+  transform(input: Float32Array|(number[]), unit: string='', scale:number=1e-6, sigfig:number=3): string {
+    if (input instanceof Float32Array){
+      input = Array.from(input)
+    }
+    return input
+      .map(v => `${(v * scale).toFixed(sigfig)}${unit}`)
+      .join(' ')
+  }
+}
diff --git a/frontend/src/views/viewer/viewer.component.html b/frontend/src/views/viewer/viewer.component.html
index 804d2589..4bc1c0a7 100644
--- a/frontend/src/views/viewer/viewer.component.html
+++ b/frontend/src/views/viewer/viewer.component.html
@@ -3,38 +3,104 @@
     <div class="viewer-wrapper">
         <div class="landmark-layer-wrapper">
             <voluba-nehuba-viewer-wrapper
+                (navigation)="setPrimaryNav($event)"
                 (mousePosition)="onMousePosition($event)"
                 (mousedown)="onMouseDown($event.event)"
+                (mouseup)="onMouseUp($event.event)"
                 volubaMouseInteraction
                 [onlyElements]="nehuba.elementToSliceViewWeakMap"
                 [stopPropagation]="!(!view.isDefaultMode || view.incLocked)"
+                [nehuba-viewer-layers]="view.primaryLayers"
                 #nehuba="nehubaViewerWrapper">
             </voluba-nehuba-viewer-wrapper>
 
-            <div class="four-quadrant">
-                <ng-template [ngIf]="view.sliceViews[0]" let-sliceView>
-                    <voluba-overlay [overlay-landmarks]="view.primaryLandmarks"
-                        [overlay-sliceview]="sliceView">
-                    </voluba-overlay>
-                </ng-template>
-                <ng-template [ngIf]="view.sliceViews[1]" let-sliceView>
-                    <voluba-overlay [overlay-landmarks]="view.primaryLandmarks"
-                        [overlay-sliceview]="sliceView">
-                    </voluba-overlay>
-                </ng-template>
-                <ng-template [ngIf]="view.sliceViews[2]" let-sliceView>
-                    <voluba-overlay [overlay-landmarks]="view.primaryLandmarks"
-                        [overlay-sliceview]="sliceView">
-                    </voluba-overlay>
-                </ng-template>
-            </div>
+            <ng-template [ngIf]="nehuba.sliceViews$ | async" let-sliceViews>
+
+                <div class="four-quadrant"
+                    [ngClass]="{
+                        'disabled': view.isDraggingViewer || view.addLandmarkMode
+                    }">
+                    <ng-template [ngIf]="sliceViews[0]" let-sliceView>
+                        <voluba-overlay [overlay-landmarks]="view.primaryLandmarks"
+                            (overlay-hover-landmark)="handleHoverLandmark($event)"
+                            (overlay-mousedown-landmark)="handleMousedownLandmark($event)"
+                            [overlay-sliceview]="sliceView">
+                        </voluba-overlay>
+                    </ng-template>
+                    <ng-template [ngIf]="sliceViews[1]" let-sliceView>
+                        <voluba-overlay [overlay-landmarks]="view.primaryLandmarks"
+                            (overlay-hover-landmark)="handleHoverLandmark($event)"
+                            (overlay-mousedown-landmark)="handleMousedownLandmark($event)"
+                            [overlay-sliceview]="sliceView">
+                        </voluba-overlay>
+                    </ng-template>
+                    <ng-template [ngIf]="sliceViews[2]" let-sliceView>
+                        <voluba-overlay [overlay-landmarks]="view.primaryLandmarks"
+                            (overlay-hover-landmark)="handleHoverLandmark($event)"
+                            (overlay-mousedown-landmark)="handleMousedownLandmark($event)"
+                            [overlay-sliceview]="sliceView">
+                        </voluba-overlay>
+                    </ng-template>
+                </div>
+            </ng-template>
+
+            <ng-template [ngIf]="view.showAddingIncLmOverlay">
+                <div class="add-lm-overlay align-right">
+                    <span>Add landmark&nbsp;in incoming volume</span>
+                    <mat-icon fontIcon="keyboard_arrow_right"></mat-icon>
+                </div>
+            </ng-template>
         </div>
 
     
-        <div *ngIf="!view.isDefaultMode">
-            <h1>
-                HELLO WORLD
-            </h1>
+        <div *ngIf="!view.isDefaultMode" class="landmark-layer-wrapper">
+
+            <voluba-nehuba-viewer-wrapper
+                nehuba-viewer-alias="secondaryViewer"
+                (mousePosition)="onMousePosition($event)"
+                (mousedown)="onMouseDown($event.event)"
+                volubaMouseInteraction
+                [onlyElements]="secondaryNehuba.elementToSliceViewWeakMap"
+                [nehuba-viewer-init-navigation]="view.primaryNavigation"
+                [nehuba-viewer-layers]="view.secondaryLayers"
+                #secondaryNehuba="nehubaViewerWrapper">
+            </voluba-nehuba-viewer-wrapper>
+
+
+            <ng-template [ngIf]="secondaryNehuba.sliceViews$ | async" let-sliceViews>
+
+                <div class="four-quadrant">
+                    <ng-template [ngIf]="sliceViews[0]" let-sliceView>
+                        <voluba-overlay [overlay-landmarks]="view.secondaryLandmarks"
+                            (overlay-hover-landmark)="handleHoverLandmark($event)"
+                            (overlay-mousedown-landmark)="handleMousedownLandmark($event)"
+                            [overlay-sliceview]="sliceView">
+                        </voluba-overlay>
+                    </ng-template>
+                    <ng-template [ngIf]="sliceViews[1]" let-sliceView>
+                        <voluba-overlay [overlay-landmarks]="view.secondaryLandmarks"
+                            (overlay-hover-landmark)="handleHoverLandmark($event)"
+                            (overlay-mousedown-landmark)="handleMousedownLandmark($event)"
+                            [overlay-sliceview]="sliceView">
+                        </voluba-overlay>
+                    </ng-template>
+                    <ng-template [ngIf]="sliceViews[2]" let-sliceView>
+                        <voluba-overlay [overlay-landmarks]="view.secondaryLandmarks"
+                            (overlay-hover-landmark)="handleHoverLandmark($event)"
+                            (overlay-mousedown-landmark)="handleMousedownLandmark($event)"
+                            [overlay-sliceview]="sliceView">
+                        </voluba-overlay>
+                    </ng-template>
+                </div>
+            </ng-template>
+
+            <ng-template [ngIf]="view.showAddingRefLmOverlay">
+                <div class="add-lm-overlay align-left">
+                    <mat-icon fontIcon="keyboard_arrow_left"></mat-icon>
+                    <span>Add landmark&nbsp;in reference volume</span>
+                </div>
+            </ng-template>
+
         </div>
     </div>
     
@@ -55,15 +121,20 @@ <h1>
             </button>
         </div>
         <div bottomleft>
-            <!-- <mat-card class="tmp">
+            <mat-card class="navigation-card">
                 <mat-card-content>
+                    <div>
+                        Navigation (mm): {{ view.primaryNavigation.position | displayNumArray }}
+                    </div>
+                    <div>
+                        <span>
+                            Reset Orientation:
+                        </span>
+                        <button (click)="resetOrientation('reference')" mat-button>To Reference</button>
+                        <button (click)="resetOrientation('incoming')" mat-button>To Incoming</button>
+                    </div>
                 </mat-card-content>
             </mat-card>
-            <mat-card class="tmp">
-                <mat-card-content>
-                    <voluba-history-listview></voluba-history-listview>
-                </mat-card-content>
-            </mat-card> -->
         </div>
         <div bottomright>
             <!-- bottomright -->
diff --git a/frontend/src/views/viewer/viewer.component.scss b/frontend/src/views/viewer/viewer.component.scss
index c8f9b4dd..117ee319 100644
--- a/frontend/src/views/viewer/viewer.component.scss
+++ b/frontend/src/views/viewer/viewer.component.scss
@@ -50,6 +50,37 @@ div.viewer-wrapper
         z-index: 1;
         pointer-events: none;
     }
+
+    > .add-lm-overlay
+    {
+        z-index: 2;
+        pointer-events: all;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(128, 128, 128, 0.8);
+
+        display: flex;
+        align-items: center;
+        
+        &.align-right
+        {
+            justify-content: flex-end;
+            text-align: right;
+        }
+
+        &.align-left
+        {
+            justify-content: flex-start;
+            text-align: left;
+        }
+
+        > *
+        {
+            flex: 0 0 2rem;
+            font-size: xx-large;
+            line-height: 1;
+        }
+    }
 }
 
 .four-quadrant
@@ -74,3 +105,8 @@ div.viewer-wrapper
         background-color: rgba(0, 0, 255, 0.2);
     }
 }
+
+.navigation-card
+{
+    margin: 1rem;
+}
diff --git a/frontend/src/views/viewer/viewer.component.ts b/frontend/src/views/viewer/viewer.component.ts
index f2ef43ce..85386fb0 100644
--- a/frontend/src/views/viewer/viewer.component.ts
+++ b/frontend/src/views/viewer/viewer.component.ts
@@ -2,9 +2,10 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   Component,
-  Inject,
   Injectable,
+  QueryList,
   ViewChild,
+  ViewChildren,
   inject,
 } from '@angular/core';
 import { select, Store } from '@ngrx/store';
@@ -20,25 +21,55 @@ import {
   NEVER,
   concat,
   of,
+  BehaviorSubject,
+  firstValueFrom,
+  merge,
 } from 'rxjs';
 import { MouseInteractionDirective } from 'src/mouse-interactions/mouse-interaction.directive';
-import * as app from 'src/state/app';
 import * as outputs from 'src/state/outputs';
-import { NehubaViewerWrapperComponent } from '../nehuba-viewer-wrapper/nehuba-viewer-wrapper.component';
-import { SLICEVIEWS_INJECTION_TOKEN, SliceViewProviderType, VOLUBA_NEHUBA_TOKEN } from 'src/const';
-import { DestroyDirective } from 'src/util/destroy.directive';
-import { getIncXform } from 'src/state/outputs/selectors';
 import * as appState from "src/state/app"
-import { Landmark, INCOMING_LM_COLOR, REF_LM_COLOR } from 'src/landmarks/const';
+import * as inputs from 'src/state/inputs';
+import { NehubaNavigation, NehubaViewerWrapperComponent } from '../nehuba-viewer-wrapper/nehuba-viewer-wrapper.component';
+import { Mat4, OverlayLm, VOLUBA_NEHUBA_TOKEN } from 'src/const';
+import { INCOMING_LM_COLOR, Landmark, LandmarkPair, REF_LM_COLOR } from 'src/landmarks/const';
+import { Actions, ofType } from '@ngrx/effects';
+
+
+const REF_VOL_ID = 'reference-volume'
+const INC_VOL_ID = 'incoming-volume'
+
+const _BIGBRAIN_NEHUBA_LAYER = {
+  id: REF_VOL_ID,
+  url: 'precomputed://https://neuroglancer.humanbrainproject.org/precomputed/BigBrainRelease.2015/8bit' && 'precomputed://http://127.0.0.1:8080/sharded/BigBrainRelease.2015/8bit',
+  transform: [
+    [1, 0, 0, -70677184],
+    [0, 1, 0, -70010000],
+    [0, 0, 1, -58788284],
+    [0, 0, 0, 1],
+  ] as Mat4,
+}
+
+const _INC_LAYER = {
+  id: INC_VOL_ID,
+  url: 'precomputed://https://neuroglancer.humanbrainproject.eu/precomputed/JuBrain/v2.2c/colin27_seg' && 'precomputed://http://127.0.0.1:8080/sharded/WHS_SD_rat/templates/v1.01/t2star_masked/',
+  transform: [
+    [1.0, 0.0, 0.0, 0],
+    [0.0, 1.0, 0.0, 0],
+    [0.0, 0.0, 1.0, 0],
+    [0.0, 0.0, 0.0, 1.0],
+  ] as Mat4,
+}
 
 
 @Injectable()
 class NehubaSvc {
   #mouseover = new Subject<Float32Array>()
   #mousedown = new Subject<MouseEvent>()
+  #mouseup = new Subject<MouseEvent>()
 
   mouseover = this.#mouseover.asObservable()
   mousedown = this.#mousedown.asObservable()
+  mouseup = this.#mouseup.asObservable()
 
   setMouseOver(val: Float32Array){
     this.#mouseover.next(val)
@@ -46,6 +77,64 @@ class NehubaSvc {
   setMouseDown(ev: MouseEvent) {
     this.#mousedown.next(ev)
   }
+  setMouseUp(ev: MouseEvent) {
+    this.#mouseup.next(ev)
+  }
+}
+
+class LandmarkSvc {
+  static REF_LM_COLOR = "#ffffff"
+  static INCOMING_LM_COLOR = "#ffff00"
+
+  static GetXformToOverlay(xform: export_nehuba.mat4, hoveredLMP: LandmarkPair|undefined|null) {
+    const { vec3 } = export_nehuba
+    return {
+      getReference: function(landmark: LandmarkPair): OverlayLm {
+        return {
+          ...landmark.tmplLm,
+          color: LandmarkSvc.REF_LM_COLOR,
+          id: `${landmark.id}-ref`,
+          highlighted: hoveredLMP?.id === landmark.id,
+        }
+      },
+      getIncoming: function(landmark: LandmarkPair): OverlayLm {
+      
+        const newPos = vec3.fromValues(...landmark.incLm.position)
+        vec3.transformMat4(newPos, newPos, xform)
+        return {
+          ...landmark.incLm,
+          color: LandmarkSvc.INCOMING_LM_COLOR,
+          position: Array.from(newPos),
+          id: `${landmark.id}-inc`,
+          highlighted: hoveredLMP?.id === landmark.id,
+        }
+      }
+    }
+  }
+
+  static TranslateOverlayLmToLm(landmarks: LandmarkPair[], overlayLm: OverlayLm): {
+    landmarkPair: LandmarkPair
+    landmark: Landmark
+  } | null {
+    let searchId: string|null = null
+    let key: 'tmplLm'|'incLm'|undefined
+    if (overlayLm.id.endsWith("-inc")) {
+      searchId = overlayLm.id.replace(/-inc$/, '')
+      key = 'incLm'
+    }
+    if (overlayLm.id.endsWith("-ref")) {
+      searchId = overlayLm.id.replace(/-ref$/, '')
+      key = 'tmplLm'
+    }
+    const foundLmp = searchId && landmarks.find(lm => lm.id === searchId)
+    if (!foundLmp){
+      return null
+    }
+    return {
+      landmarkPair: foundLmp,
+      landmark: foundLmp[key!]
+    }
+  }
 }
 
 @Component({
@@ -64,103 +153,108 @@ class NehubaSvc {
     }
   ],
   hostDirectives: [
-    DestroyDirective
+    MouseInteractionDirective,
   ]
 })
 export class ViewerComponent implements AfterViewInit {
 
-  #destroyed$ = inject(DestroyDirective).destroyed$
+  
+  selfMouseEv = inject(MouseInteractionDirective)
+  #destroyed$ = inject(MouseInteractionDirective).destroyed$
 
   @ViewChild(NehubaViewerWrapperComponent)
-  viewerWrapper: NehubaViewerWrapperComponent | undefined;
+  viewerWrapper: NehubaViewerWrapperComponent | undefined
+
+  @ViewChildren(NehubaViewerWrapperComponent)
+  viewerWrappers: QueryList<NehubaViewerWrapperComponent> | undefined
 
   @ViewChild(MouseInteractionDirective)
-  mouseInteractive: MouseInteractionDirective | undefined;
+  mouseInteractive: MouseInteractionDirective | undefined
 
-  public incLocked$ = this.store.pipe(select(app.selectors.incLocked));
+  public incLocked$ = this.store.pipe(select(appState.selectors.incLocked))
 
-  view$ = combineLatest([
-    this.incLocked$,
+  #primaryNehubaNav = new BehaviorSubject<NehubaNavigation>({
+    orientation: new Float32Array([0, 0, 0, 1]),
+    position: new Float32Array([0, 0, 0]),
+    zoom: 1e5,
+  })
+
+  setPrimaryNav(nav: NehubaNavigation){
+    this.#primaryNehubaNav.next(nav)
+  }
+
+  lmView$ = combineLatest([
     this.store.pipe(
-      select(app.selectors.isDefaultMode)
+      select(appState.selectors.landmarks)
     ),
-    this.store.pipe(getIncXform()),
     this.store.pipe(
-      select(app.selectors.landmarks)
+      select(appState.selectors.addLmMode)
     ),
-    concat(
-      of([]),
-      this.sliceViewProvider.observable
-    ).pipe(
-      map(sliceViewObjs => {
-        type T = export_nehuba.SliceView | null
-        const returnArray: [T, T, T] = [null, null, null]
-        for (const sliceViewObj of sliceViewObjs){
-          const { element, sliceview } = sliceViewObj
-          /**
-           * n.b.
-           * getBoundingClientRect is very slow
-           * it should not be called very frequently (e.g. only on layout change/resize)
-           */
-          const { top, left } = element.getBoundingClientRect()
-          if (top < 5 && left < 5) {
-            returnArray[0] = sliceview
-          }
-          if (top < 5 && left > 5) {
-            returnArray[1] = sliceview
-          }
-          if (top > 5 && left < 5) {
-            returnArray[2] = sliceview
-          }
-        }
-        return returnArray
-      })
+    this.store.pipe(
+      select(appState.selectors.hoveredLandmarkPair),
     ),
     this.store.pipe(
       select(appState.selectors.purgatory)
     ),
+  ]).pipe(
+    map(([ landmarks, addLandmarkMode, hoveredLmp, purgatory ]) => {
+      return {
+        landmarks, addLandmarkMode, hoveredLmp, purgatory
+      }
+    })
+  )
+
+  view$ = combineLatest([
+    
+    this.lmView$,
+    this.incLocked$,
     this.store.pipe(
-      select(appState.selectors.addLmMode)
+      select(appState.selectors.isDefaultMode)
     ),
+    this.store.pipe(outputs.selectors.getIncXform()),
     concat(
       of(null),
       this.nehubaSvc.mouseover,
+    ),
+    this.#primaryNehubaNav,
+    concat(
+      of(false),
+      merge(
+        this.selfMouseEv.mousedown.pipe(
+          map(() => true)
+        ),
+        this.selfMouseEv.mouseup.pipe(
+          map(() => false)
+        )
+      )
     )
   ]).pipe(
-    map(([incLocked, isDefaultMode, xform, landmarks, sliceViews, purgatory, addLandmarkMode, mouseover]) => {
+    map(([ { landmarks, addLandmarkMode, hoveredLmp, purgatory }, incLocked, isDefaultMode, xform, mouseover, primaryNavigation, isDraggingViewer ]) => {
       
+      const { mat4 } = export_nehuba
+
+      const { getIncoming, getReference } = LandmarkSvc.GetXformToOverlay(xform, hoveredLmp)
       const storedLandmarks = landmarks.map(lm => {
-        const incomingLandmarks: (Landmark & {color:string})[] = []
+        const incomingLandmarks: OverlayLm[] = []
         if (isDefaultMode) {
-          const { vec3 } = export_nehuba
-          
-
-          const newPos = vec3.fromValues(...lm.incLm.position)
-          vec3.transformMat4(newPos, newPos, xform)
-          
-          incomingLandmarks.push({
-            ...lm.incLm,
-            position: Array.from(newPos) as [number, number, number],
-            color: INCOMING_LM_COLOR,
-          })
+          incomingLandmarks.push(getIncoming(lm))
         }
         return [
-          {
-            ...lm.tmplLm,
-            color: REF_LM_COLOR
-          },
+          getReference(lm),
           ...incomingLandmarks
         ]
       })
-      const purgatoryLandmarks = []
+      const purgatoryLandmarks: OverlayLm[] = []
       if (purgatory) {
         purgatoryLandmarks.push({
           ...purgatory,
-          color: REF_LM_COLOR
+          color: REF_LM_COLOR,
+          id: 'purgatory'
         })
       }
       if (addLandmarkMode && mouseover) {
         purgatoryLandmarks.push({
+          id: 'purgatory',
           targetVolumeId: 'purgatory',
           position: Array.from(mouseover) as [number, number, number],
           color: purgatory
@@ -169,6 +263,29 @@ export class ViewerComponent implements AfterViewInit {
         })
       }
 
+      const secondaryLandmarks: OverlayLm[] = []
+
+      if (!isDefaultMode) {
+        secondaryLandmarks.push(
+          ...landmarks.map(lm => {
+            return getIncoming(lm)
+          })
+        )
+
+        if (addLandmarkMode && mouseover && purgatory) {
+          secondaryLandmarks.push({
+            id: 'purgatory',
+            targetVolumeId: 'purgatory',
+            position: Array.from(mouseover),
+            color: INCOMING_LM_COLOR
+          })
+        }
+      }
+      
+
+      const tXform = mat4.transpose(mat4.create(), xform)
+      const atXform = Array.from(tXform)
+
       return { 
         incLocked,
         isDefaultMode,
@@ -176,23 +293,38 @@ export class ViewerComponent implements AfterViewInit {
           ...storedLandmarks.flatMap(v => v),
           ...purgatoryLandmarks
         ],
-        sliceViews,
+        secondaryLandmarks,
+        showAddingRefLmOverlay: !isDefaultMode && addLandmarkMode && !purgatory,
+        showAddingIncLmOverlay: !isDefaultMode && addLandmarkMode && purgatory,
+        primaryLayers: [ _BIGBRAIN_NEHUBA_LAYER, _INC_LAYER ],
+        secondaryLayers: [ {
+          ..._INC_LAYER,
+          transform: [
+            atXform.slice(0, 4),
+            atXform.slice(4, 8),
+            atXform.slice(8, 12),
+            atXform.slice(12, 16),
+          ] as Mat4
+        }],
+        primaryNavigation,
+        isDraggingViewer,
+        addLandmarkMode,
       }
     })
   );
 
   toggleIncLocked() {
-    this.store.dispatch(app.actions.toggleIncLocked());
+    this.store.dispatch(appState.actions.toggleIncLocked());
   }
 
   toggleMode() {
-    this.store.dispatch(app.actions.toggleMode())
+    this.store.dispatch(appState.actions.toggleMode())
   }
 
   constructor(
     private store: Store,
     private nehubaSvc: NehubaSvc,
-    @Inject(SLICEVIEWS_INJECTION_TOKEN) private sliceViewProvider: SliceViewProviderType,
+    private actions$: Actions
   ) {}
 
   onMousePosition(pos: Float32Array){
@@ -203,6 +335,10 @@ export class ViewerComponent implements AfterViewInit {
     this.nehubaSvc.setMouseDown(ev)
   }
 
+  onMouseUp(ev: MouseEvent) {
+    this.nehubaSvc.setMouseUp(ev)
+  }
+
   ngAfterViewInit(): void {
     if (!this.mouseInteractive) {
       throw new Error(`Cannot find mouse interactive directive`);
@@ -227,7 +363,7 @@ export class ViewerComponent implements AfterViewInit {
             select(appState.selectors.isDefaultMode)
           ),
           this.store.pipe(
-            select(app.selectors.addLmMode)
+            select(appState.selectors.addLmMode)
           ),
           this.mouseInteractive.volubaDrag,
           
@@ -241,7 +377,7 @@ export class ViewerComponent implements AfterViewInit {
           }))
         )
       })
-    );
+    )
 
     dragOnIncVol$.pipe(
       filter((v) => !!v && !v.mouseDownEvent.shiftKey),
@@ -268,8 +404,8 @@ export class ViewerComponent implements AfterViewInit {
         outputs.actions.setIncTranslation({
           array: Array.from(pos),
         })
-      );
-    });
+      )
+    })
 
     dragOnIncVol$.pipe(
       filter((v) => !!v && v.mouseDownEvent.shiftKey),
@@ -319,14 +455,14 @@ export class ViewerComponent implements AfterViewInit {
           array: Array.from(finalRotation),
         })
       );
-    });
+    })
 
 
     this.store.pipe(
-      select(outputs.selectors.incMatrixMat4),
+      outputs.selectors.getIncXform(),
       takeUntil(this.#destroyed$),
     ).subscribe((v) => {
-      this.viewerWrapper?.setLayerProperty('bla', {
+      this.viewerWrapper?.setLayerProperty(INC_VOL_ID, {
         transform: v,
       })
     })
@@ -335,9 +471,156 @@ export class ViewerComponent implements AfterViewInit {
       select(appState.selectors.isDefaultMode),
       takeUntil(this.#destroyed$)
     ).subscribe(isDefaultMode => {
-      this.viewerWrapper?.setLayerProperty('bla', {
+      this.viewerWrapper?.setLayerProperty(INC_VOL_ID, {
         visible: isDefaultMode
       })
     })
+
+    this.actions$.pipe(
+      ofType(appState.actions.navigateTo),
+      takeUntil(this.#destroyed$),
+    ).subscribe(({ position }) => {
+      if (!this.viewerWrappers) {
+        return
+      }
+      this.viewerWrappers.forEach(vw => {
+        vw.setPosition(position)
+      })
+    })
+
+    this.#mousedownLm.pipe(
+      takeUntil(this.#destroyed$),
+      withLatestFrom(
+        this.store.pipe(
+          select(appState.selectors.hoveredLandmark),
+        ),
+        this.store.pipe(
+          select(appState.selectors.hoveredLandmarkPair),
+        ),
+        this.store.pipe(
+          select(inputs.selectors.selectedTemplate),
+        ),
+        this.store.pipe(
+          select(inputs.selectors.selectedIncoming),
+        ),
+        this.store.pipe(
+          outputs.selectors.getIncXform()
+        )
+      ),
+      filter(([ _, hoveredLandmark ]) => {
+        return !!hoveredLandmark
+      }),
+      switchMap(([
+        _,
+        hoveredLandmark,
+        hoveredLandmarkPair,
+        selectedTemplate,
+        selectedIncoming,
+        xform,
+      ]) => this.nehubaSvc.mouseover.pipe(
+        filter(v => !!v),
+        takeUntil(this.nehubaSvc.mouseup),
+        map(position => {
+          return {
+            hoveredLandmark,
+            hoveredLandmarkPair,
+            selectedTemplate,
+            selectedIncoming,
+            position,
+            xform,
+          }
+        }),
+      ))
+    ).subscribe(({  hoveredLandmark, hoveredLandmarkPair, selectedTemplate, selectedIncoming, position, xform }) => {
+      let lmkey: 'incLm' | 'tmplLm' | null = null
+      if (!hoveredLandmark?.targetVolumeId  || !hoveredLandmarkPair?.id) {
+        console.error(`hoveredLandmark.targetVolumeId must be defined!`)
+        return
+      }
+
+      let pos: export_nehuba.vec3
+      if (hoveredLandmark?.targetVolumeId === selectedTemplate?.['@id']) {
+        lmkey = 'tmplLm'
+        pos = position
+      }
+      if (hoveredLandmark?.targetVolumeId === selectedIncoming?.['@id']) {
+        lmkey = 'incLm'
+        const { vec3, mat4 } = export_nehuba
+        const invert = mat4.invert(mat4.create(), xform)
+        pos = vec3.transformMat4(vec3.create(), position, invert)
+      }
+
+      if (!lmkey) {
+        // cannot find if the hovered lm is targeting inc or ref, maybe it's targetting purgatory?
+        return
+      }
+
+      this.store.dispatch(
+        appState.actions.updateLandmarkPair({
+          id: hoveredLandmarkPair.id,
+          value: {
+            [lmkey]: {
+              targetVolumeId: hoveredLandmark?.targetVolumeId,
+              position: Array.from(pos!)
+            }
+          }
+        })
+      )
+    })
+
+  }
+
+  async resetOrientation(target: 'reference'|'incoming'){
+    if (!this.viewerWrappers) {
+      return
+    }
+    if (target === "reference") {
+      this.viewerWrappers.forEach(wrapper => {
+        wrapper.setOrientation([0, 0, 0, 1])
+      })
+    }
+    if (target === "incoming") {
+      const xform = await firstValueFrom(
+        this.store.pipe(
+          outputs.selectors.getIncXform(),
+        )
+      )
+      const { mat4, quat } = export_nehuba
+      const orientation = mat4.getRotation(quat.create(), xform)
+      const orientationArray = Array.from(orientation)
+      this.viewerWrappers.forEach(wrapper => {
+        wrapper.setOrientation(orientationArray)
+      })
+    }
+  }
+
+  #mousedownLm = new Subject<OverlayLm>()
+  handleMousedownLandmark(overlayLm: OverlayLm) {
+    this.#mousedownLm.next(overlayLm)
+  }
+
+  async handleHoverLandmark(overlayLm: OverlayLm|null){
+    if (!overlayLm) {
+      this.store.dispatch(
+        appState.actions.hoverLandmark({
+          landmark: null
+        })
+      )
+      return
+    }
+
+    const landmarks = await firstValueFrom(
+      this.store.pipe(
+        select(appState.selectors.landmarks)
+      )
+    )
+
+    const foundLm = LandmarkSvc.TranslateOverlayLmToLm(landmarks, overlayLm)
+
+    this.store.dispatch(
+      appState.actions.hoverLandmark({
+        landmark: foundLm && foundLm.landmark
+      })
+    )
   }
 }
diff --git a/frontend/src/views/views.module.ts b/frontend/src/views/views.module.ts
index f16bb740..9dbada66 100644
--- a/frontend/src/views/views.module.ts
+++ b/frontend/src/views/views.module.ts
@@ -13,11 +13,14 @@ import { MatIconModule } from '@angular/material/icon';
 import { LandmarksModule } from 'src/landmarks/landmarks.module';
 import { HistoryModule } from 'src/history/history.module';
 import { NehubaViewerWrapperComponent } from './nehuba-viewer-wrapper/nehuba-viewer-wrapper.component';
-import { MouseInteractionsModule } from 'src/mouse-interactions/mouse-interactions.module';
 import { MatDialogModule } from '@angular/material/dialog';
 import { UtilModule } from 'src/util/util.module';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { LayerTuneModule } from 'src/layer-tune/layer-tune.module';
+import { ShareExportComponent } from './shareExport/shareExport.component';
+import { SharedModule } from 'src/sharedModule/sharedModule';
+import { DisplayNumArrayPipe } from './viewer/displayNumArray.pipe';
+import { MouseInteractionDirective } from 'src/mouse-interactions/mouse-interaction.directive';
 
 @NgModule({
   declarations: [
@@ -26,6 +29,8 @@ import { LayerTuneModule } from 'src/layer-tune/layer-tune.module';
     ViewerComponent,
     ControlMenuComponent,
     NehubaViewerWrapperComponent,
+    ShareExportComponent,
+    DisplayNumArrayPipe,
   ],
   imports: [
     CommonModule,
@@ -37,11 +42,16 @@ import { LayerTuneModule } from 'src/layer-tune/layer-tune.module';
     MatIconModule,
     LandmarksModule,
     HistoryModule,
-    MouseInteractionsModule,
     MatDialogModule,
     UtilModule,
     DragDropModule,
     LayerTuneModule,
+    SharedModule,
+
+    /**
+     * standalone directives
+     */
+    MouseInteractionDirective,
   ],
   exports: [WelcomeCardComponent, ViewerComponent],
 })