diff --git a/src/ui/config/config.component.ts b/src/ui/config/config.component.ts
index 1a0e15cdfed2280faed73006978c123df033e833..6f6f0b4f4a06b7110d9481dc9324b3947bb2106d 100644
--- a/src/ui/config/config.component.ts
+++ b/src/ui/config/config.component.ts
@@ -121,15 +121,22 @@ export class ConfigComponent implements OnInit, OnDestroy{
     })
   }
   handleDragOver(event:DragEvent){
-    event.preventDefault();
-    (event.target as HTMLElement).classList.add('onDragOver')
+    event.preventDefault()
+    const target = (event.target as HTMLElement)
+    target.classList.add('onDragOver')
   }
   handleDragLeave(event:DragEvent){
     (event.target as HTMLElement).classList.remove('onDragOver')
   }
   handleDragStart(event:DragEvent){
-    const attri = (event.target as HTMLElement).getAttribute('panel-order')
+    const target = (event.target as HTMLElement)
+    const attri = target.getAttribute('panel-order')
     event.dataTransfer.setData('text/plain', attri)
+    
+  }
+  handleDragend(event:DragEvent){
+    const target = (event.target as HTMLElement)
+    target.classList.remove('onDragOver')
   }
 
   public stepSize: number = 10
diff --git a/src/ui/config/config.template.html b/src/ui/config/config.template.html
index e34dc8b62bb2fde4d9347e52f35060b98ef61b65..20927120dd97ec7f77e783ae3fcabfbcdc6243b6 100644
--- a/src/ui/config/config.template.html
+++ b/src/ui/config/config.template.html
@@ -3,207 +3,20 @@
   <!-- viewer preference -->
   <mat-tab label="Viewer Preference">
     
-    <div [ngSwitch]="panelMode$ | async" class="d-flex flex-row p-2">
-      <layout-four-panel
-        *ngSwitchCase="supportedPanelModes[0]"
-        class="d-block w-20em h-15em cdk-drag-boundary">
-        <div
-          matRipple
-          (dragstart)="handleDragStart($event)"
-          (dragover)="handleDragOver($event)"
-          (dragleave)="handleDragLeave($event)"
-          (drop)="handleDrop($event)"
-          class="w-100 h-100 config-transition"
-          cell-i>
-          <div
-            [attr.panel-order]="0"
-            class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
-            draggable="true">
-            {{ (panelTexts$ | async)[0] }}
-          </div>
-        </div>
-        <div
-          matRipple
-          (dragstart)="handleDragStart($event)"
-          (dragover)="handleDragOver($event)"
-          (dragleave)="handleDragLeave($event)"
-          (drop)="handleDrop($event)"
-          class="w-100 h-100 config-transition"
-          cell-ii>
-          <div
-            [attr.panel-order]="1"
-            class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
-            draggable="true">
-            {{ (panelTexts$ | async)[1] }}
-          </div>
-        </div>
-        <div
-          matRipple
-          (dragstart)="handleDragStart($event)"
-          (dragover)="handleDragOver($event)"
-          (dragleave)="handleDragLeave($event)"
-          (drop)="handleDrop($event)"
-          class="w-100 h-100 config-transition"
-          cell-iii>
-          <div
-            [attr.panel-order]="2"
-            class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
-            draggable="true">
-            {{ (panelTexts$ | async)[2] }}
-          </div>
-        </div>
-        <div
-          matRipple
-          (dragstart)="handleDragStart($event)"
-          (dragover)="handleDragOver($event)"
-          (dragleave)="handleDragLeave($event)"
-          (drop)="handleDrop($event)"
-          class="w-100 h-100 config-transition"
-          cell-iv>
-          <div
-            [attr.panel-order]="3"
-            class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
-            draggable="true">
-            {{ (panelTexts$ | async)[3] }}
-          </div>
-        </div>
-      </layout-four-panel>
-      <layout-horizontal-one-three
-        *ngSwitchCase="supportedPanelModes[1]"
-        class="d-block w-20em h-15em">
-        <div
-          matRipple
-          (dragstart)="handleDragStart($event)"
-          (dragover)="handleDragOver($event)"
-          (dragleave)="handleDragLeave($event)"
-          (drop)="handleDrop($event)"
-          class="w-100 h-100 config-transition"
-          cell-i>
-          <div
-            [attr.panel-order]="0"
-            class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
-            draggable="true">
-            {{ (panelTexts$ | async)[0] }}
-          </div>
-        </div>
-        <div
-          matRipple
-          (dragstart)="handleDragStart($event)"
-          (dragover)="handleDragOver($event)"
-          (dragleave)="handleDragLeave($event)"
-          (drop)="handleDrop($event)"
-          class="w-100 h-100 config-transition"
-          cell-ii>
-          <div
-            [attr.panel-order]="1"
-            class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
-            draggable="true">
-            {{ (panelTexts$ | async)[1] }}
-          </div>
-        </div>
-        <div
-          matRipple
-          (dragstart)="handleDragStart($event)"
-          (dragover)="handleDragOver($event)"
-          (dragleave)="handleDragLeave($event)"
-          (drop)="handleDrop($event)"
-          class="w-100 h-100 config-transition"
-          cell-iii>
-          <div
-            [attr.panel-order]="2"
-            class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
-            draggable="true">
-            {{ (panelTexts$ | async)[2] }}
-          </div>
-        </div>
-        <div
-          matRipple
-          (dragstart)="handleDragStart($event)"
-          (dragover)="handleDragOver($event)"
-          (dragleave)="handleDragLeave($event)"
-          (drop)="handleDrop($event)"
-          class="w-100 h-100 config-transition"
-          cell-iv>
-          <div
-            [attr.panel-order]="3"
-            class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
-            draggable="true">
-            {{ (panelTexts$ | async)[3] }}
-          </div>
-        </div>
-      </layout-horizontal-one-three>
-      <layout-vertical-one-three
-        *ngSwitchCase="supportedPanelModes[2]"
-        class="d-block w-20em h-15em">
-        <div
-          matRipple
-          (dragstart)="handleDragStart($event)"
-          (dragover)="handleDragOver($event)"
-          (dragleave)="handleDragLeave($event)"
-          (drop)="handleDrop($event)"
-          class="w-100 h-100 config-transition"
-          cell-i>
-          <div
-            [attr.panel-order]="0"
-            class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
-            draggable="true">
-            {{ (panelTexts$ | async)[0] }}
-          </div>
-        </div>
-        <div
-          matRipple
-          (dragstart)="handleDragStart($event)"
-          (dragover)="handleDragOver($event)"
-          (dragleave)="handleDragLeave($event)"
-          (drop)="handleDrop($event)"
-          class="w-100 h-100 config-transition"
-          cell-ii>
-          <div
-            [attr.panel-order]="1"
-            class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
-            draggable="true">
-            {{ (panelTexts$ | async)[1] }}
-          </div>
-        </div>
-        <div
-          matRipple
-          (dragstart)="handleDragStart($event)"
-          (dragover)="handleDragOver($event)"
-          (dragleave)="handleDragLeave($event)"
-          (drop)="handleDrop($event)"
-          class="w-100 h-100 config-transition"
-          cell-iii>
-          <div
-            [attr.panel-order]="2"
-            class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
-            draggable="true">
-            {{ (panelTexts$ | async)[2] }}
-          </div>
-        </div>
-        <div
-          matRipple
-          (dragstart)="handleDragStart($event)"
-          (dragover)="handleDragOver($event)"
-          (dragleave)="handleDragLeave($event)"
-          (drop)="handleDrop($event)"
-          class="w-100 h-100 config-transition"
-          cell-iv>
-          <div
-            [attr.panel-order]="3"
-            class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
-            draggable="true">
-            {{ (panelTexts$ | async)[3] }}
-          </div>
-        </div>
-      </layout-vertical-one-three>
-      <layout-single-panel
-        *ngSwitchCase="supportedPanelModes[3]"
-        class="d-block w-20em h-15em">
+    <div class="m-2">
+      <div class="mat-h2">
+        Rearrange Viewports
+      </div>
+      <div class="mat-h4 text-muted">
+        Click and drag to rearrange viewport positions
+      </div>
+      <current-layout class="d-flex w-20em h-15em p-2">
         <div
           matRipple
           (dragstart)="handleDragStart($event)"
           (dragover)="handleDragOver($event)"
           (dragleave)="handleDragLeave($event)"
+          (dragend)="handleDragend($event)"
           (drop)="handleDrop($event)"
           class="w-100 h-100 config-transition"
           cell-i>
@@ -219,6 +32,7 @@
           (dragstart)="handleDragStart($event)"
           (dragover)="handleDragOver($event)"
           (dragleave)="handleDragLeave($event)"
+          (dragend)="handleDragend($event)"
           (drop)="handleDrop($event)"
           class="w-100 h-100 config-transition"
           cell-ii>
@@ -234,6 +48,7 @@
           (dragstart)="handleDragStart($event)"
           (dragover)="handleDragOver($event)"
           (dragleave)="handleDragLeave($event)"
+          (dragend)="handleDragend($event)"
           (drop)="handleDrop($event)"
           class="w-100 h-100 config-transition"
           cell-iii>
@@ -249,6 +64,7 @@
           (dragstart)="handleDragStart($event)"
           (dragover)="handleDragOver($event)"
           (dragleave)="handleDragLeave($event)"
+          (dragend)="handleDragend($event)"
           (drop)="handleDrop($event)"
           class="w-100 h-100 config-transition"
           cell-iv>
@@ -259,13 +75,21 @@
             {{ (panelTexts$ | async)[3] }}
           </div>
         </div>
-      </layout-single-panel>
-      <div *ngSwitchDefault>
-        A panel mode which I have never seen before ...
+      </current-layout>
+
+      <div class="mat-body text-muted font-italic">
+        Plane designation refers to default orientation (without oblique rotation).
       </div>
     </div>
 
     <!-- scroll window -->
+
+    <div class="m-2">
+      <div class="mat-h2">
+        Select a viewports configuration
+      </div>
+    </div>
+
     <div class="d-flex flex-row flex-nowrap p-2">
 
       <!-- Four Panel Card -->
@@ -275,10 +99,10 @@
         (click)="usePanelMode(supportedPanelModes[0])"
         [color]="(panelMode$ | async) === supportedPanelModes[0] ? 'primary' : null">
         <layout-four-panel class="d-block w-10em h-7em">
-          <div cell-i></div>
-          <div cell-ii></div>
-          <div cell-iii></div>
-          <div cell-iv></div>
+          <div class="border w-100 h-100" cell-i></div>
+          <div class="border w-100 h-100" cell-ii></div>
+          <div class="border w-100 h-100" cell-iii></div>
+          <div class="border w-100 h-100" cell-iv></div>
         </layout-four-panel>
       </button>
 
@@ -289,10 +113,10 @@
         (click)="usePanelMode(supportedPanelModes[1])"
         [color]="(panelMode$ | async) === supportedPanelModes[1] ? 'primary' : null">
         <layout-horizontal-one-three class="d-block w-10em h-7em">
-          <div cell-i></div>
-          <div cell-ii></div>
-          <div cell-iii></div>
-          <div cell-iv></div>
+          <div class="border w-100 h-100" cell-i></div>
+          <div class="border w-100 h-100" cell-ii></div>
+          <div class="border w-100 h-100" cell-iii></div>
+          <div class="border w-100 h-100" cell-iv></div>
         </layout-horizontal-one-three>
       </button>
   
@@ -303,10 +127,10 @@
         (click)="usePanelMode(supportedPanelModes[2])"
         [color]="(panelMode$ | async) === supportedPanelModes[2] ? 'primary' : null">
         <layout-vertical-one-three class="d-block w-10em h-7em">
-          <div cell-i></div>
-          <div cell-ii></div>
-          <div cell-iii></div>
-          <div cell-iv></div>
+          <div class="border w-100 h-100" cell-i></div>
+          <div class="border w-100 h-100" cell-ii></div>
+          <div class="border w-100 h-100" cell-iii></div>
+          <div class="border w-100 h-100" cell-iv></div>
         </layout-vertical-one-three>
       </button>
 
@@ -317,10 +141,10 @@
         (click)="usePanelMode(supportedPanelModes[3])"
         [color]="(panelMode$ | async) === supportedPanelModes[3] ? 'primary' : null">
         <layout-single-panel class="d-block w-10em h-7em">
-          <div cell-i></div>
-          <div cell-ii></div>
-          <div cell-iii></div>
-          <div cell-iv></div>
+          <div class="border w-100 h-100" cell-i></div>
+          <div class="border w-100 h-100" cell-ii></div>
+          <div class="border w-100 h-100" cell-iii></div>
+          <div class="border w-100 h-100" cell-iv></div>
         </layout-single-panel>
       </button>
     </div>
diff --git a/src/ui/config/currentLayout/currentLayout.component.ts b/src/ui/config/currentLayout/currentLayout.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..df40022f719efb0d9cce84fa1a8bcdfbe6512b06
--- /dev/null
+++ b/src/ui/config/currentLayout/currentLayout.component.ts
@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+import { Store, select } from "@ngrx/store";
+import { Observable } from "rxjs";
+import { SUPPORTED_PANEL_MODES } from "src/services/state/ngViewerState.store";
+import { startWith } from "rxjs/operators";
+
+@Component({
+  selector: 'current-layout',
+  templateUrl: './currentLayout.template.html',
+  styleUrls: [
+    './currentLayout.style.css'
+  ]
+})
+
+export class CurrentLayout{
+
+  public supportedPanelModes = SUPPORTED_PANEL_MODES
+  public panelMode$: Observable<string>
+
+  constructor(private store$: Store<any>){
+    this.panelMode$ = this.store$.pipe(
+      select('ngViewerState'),
+      select('panelMode'),
+      startWith(SUPPORTED_PANEL_MODES[0])
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/ui/config/currentLayout/currentLayout.style.css b/src/ui/config/currentLayout/currentLayout.style.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/ui/config/currentLayout/currentLayout.template.html b/src/ui/config/currentLayout/currentLayout.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..f3d04c104239b9e81f3ff0552c892e86c444ba0d
--- /dev/null
+++ b/src/ui/config/currentLayout/currentLayout.template.html
@@ -0,0 +1,82 @@
+<div [ngSwitch]="panelMode$ | async" class="w-100 h-100 d-flex flex-row">
+  <layout-four-panel
+    *ngSwitchCase="supportedPanelModes[0]"
+    class="d-block w-100 h-100">
+    <div class="w-100 h-100" cell-i>
+      <ng-content *ngTemplateOutlet="celli"></ng-content>
+    </div>
+    <div class="w-100 h-100" cell-ii>
+      <ng-content *ngTemplateOutlet="cellii"></ng-content>
+    </div>
+    <div class="w-100 h-100" cell-iii>
+      <ng-content *ngTemplateOutlet="celliii"></ng-content>
+    </div>
+    <div class="w-100 h-100" cell-iv>
+      <ng-content *ngTemplateOutlet="celliv"></ng-content>
+    </div>
+  </layout-four-panel>
+  <layout-horizontal-one-three
+    *ngSwitchCase="supportedPanelModes[1]"
+    class="d-block w-100 h-100">
+    <div class="w-100 h-100" cell-i>
+      <ng-content *ngTemplateOutlet="celli"></ng-content>
+    </div>
+    <div class="w-100 h-100" cell-ii>
+      <ng-content *ngTemplateOutlet="cellii"></ng-content>
+    </div>
+    <div class="w-100 h-100" cell-iii>
+      <ng-content *ngTemplateOutlet="celliii"></ng-content>
+    </div>
+    <div class="w-100 h-100" cell-iv>
+      <ng-content *ngTemplateOutlet="celliv"></ng-content>
+    </div>
+  </layout-horizontal-one-three>
+  <layout-vertical-one-three
+    *ngSwitchCase="supportedPanelModes[2]"
+    class="d-block w-100 h-100">
+    <div class="w-100 h-100" cell-i>
+      <ng-content *ngTemplateOutlet="celli"></ng-content>
+    </div>
+    <div class="w-100 h-100" cell-ii>
+      <ng-content *ngTemplateOutlet="cellii"></ng-content>
+    </div>
+    <div class="w-100 h-100" cell-iii>
+      <ng-content *ngTemplateOutlet="celliii"></ng-content>
+    </div>
+    <div class="w-100 h-100" cell-iv>
+      <ng-content *ngTemplateOutlet="celliv"></ng-content>
+    </div>
+  </layout-vertical-one-three>
+  <layout-single-panel
+    *ngSwitchCase="supportedPanelModes[3]"
+    class="d-block w-100 h-100">
+    <div class="w-100 h-100" cell-i>
+      <ng-content *ngTemplateOutlet="celli"></ng-content>
+    </div>
+    <div class="w-100 h-100" cell-ii>
+      <ng-content *ngTemplateOutlet="cellii"></ng-content>
+    </div>
+    <div class="w-100 h-100" cell-iii>
+      <ng-content *ngTemplateOutlet="celliii"></ng-content>
+    </div>
+    <div class="w-100 h-100" cell-iv>
+      <ng-content *ngTemplateOutlet="celliv"></ng-content>
+    </div>
+  </layout-single-panel>
+  <div *ngSwitchDefault>
+    A panel mode which I have never seen before ...
+  </div>
+</div>
+
+<ng-template #celli>
+  <ng-content select="[cell-i]"></ng-content>
+</ng-template>
+<ng-template #cellii>
+  <ng-content select="[cell-ii]"></ng-content>
+</ng-template>
+<ng-template #celliii>
+  <ng-content select="[cell-iii]"></ng-content>
+</ng-template>
+<ng-template #celliv>
+  <ng-content select="[cell-iv]"></ng-content>
+</ng-template>
\ No newline at end of file
diff --git a/src/ui/config/layouts/fourPanel/fourPanel.template.html b/src/ui/config/layouts/fourPanel/fourPanel.template.html
index 37cd6732a39f4e06aceb21adab0ead302fddedfd..ddb10f1f6a34adda68f578625dd843baf536dfa0 100644
--- a/src/ui/config/layouts/fourPanel/fourPanel.template.html
+++ b/src/ui/config/layouts/fourPanel/fourPanel.template.html
@@ -1,17 +1,17 @@
 <div class="w-100 h-100 d-flex flex-column justify-content-center align-items-stretch">
   <div class="d-flex flex-row flex-grow-1 flex-shrink-1">
-    <div class="d-flex flex-row four-panel-cell border align-items-center justify-content-center">
+    <div class="d-flex flex-row four-panel-cell align-items-center justify-content-center">
       <ng-content select="[cell-i]"></ng-content>
     </div>
-    <div class="d-flex flex-row four-panel-cell border align-items-center justify-content-center">
+    <div class="d-flex flex-row four-panel-cell align-items-center justify-content-center">
       <ng-content select="[cell-ii]"></ng-content>
     </div>
   </div>
   <div class="d-flex flex-row flex-grow-1 flex-shrink-1">
-    <div class="d-flex flex-row four-panel-cell border align-items-center justify-content-center">
+    <div class="d-flex flex-row four-panel-cell align-items-center justify-content-center">
       <ng-content select="[cell-iii]"></ng-content>
     </div>
-    <div class="d-flex flex-row four-panel-cell border align-items-center justify-content-center">
+    <div class="d-flex flex-row four-panel-cell align-items-center justify-content-center">
       <ng-content select="[cell-iv]"></ng-content>
     </div>
   </div>
diff --git a/src/ui/config/layouts/h13/h13.template.html b/src/ui/config/layouts/h13/h13.template.html
index c18778839283cf818be54d25955e3bd9ed02dae8..d389ce304f6671f2610920c5c6c3d7780b63ac1d 100644
--- a/src/ui/config/layouts/h13/h13.template.html
+++ b/src/ui/config/layouts/h13/h13.template.html
@@ -1,17 +1,17 @@
 <div class="w-100 h-100 d-flex flex-row justify-content-center align-items-stretch">
   <div class="d-flex flex-column major-column">
-    <div class="overflow-hidden border flex-grow-1 d-flex align-items-center justify-content-center">
+    <div class="overflow-hidden flex-grow-1 d-flex align-items-center justify-content-center">
       <ng-content select="[cell-i]"></ng-content>
     </div>
   </div>
   <div class="d-flex flex-column minor-column">
-    <div class="overflow-hidden border layout-31-cell d-flex align-items-center justify-content-center">
+    <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center">
         <ng-content select="[cell-ii]"></ng-content>
       </div>
-      <div class="overflow-hidden border layout-31-cell d-flex align-items-center justify-content-center">
+      <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center">
         <ng-content select="[cell-iii]"></ng-content>
       </div>
-      <div class="overflow-hidden border layout-31-cell d-flex align-items-center justify-content-center">
+      <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center">
         <ng-content select="[cell-iv]"></ng-content>
       </div>
   </div>
diff --git a/src/ui/config/layouts/single/single.template.html b/src/ui/config/layouts/single/single.template.html
index f7511175205e48ba3b0aecab473d26f6f6d46148..561a6363b701518ec5d27b1f0d78507e02afe30a 100644
--- a/src/ui/config/layouts/single/single.template.html
+++ b/src/ui/config/layouts/single/single.template.html
@@ -1,17 +1,17 @@
 <div class="w-100 h-100 d-flex flex-row justify-content-center align-items-stretch">
     <div class="d-flex flex-column major-column">
-      <div class="overflow-hidden border flex-grow-1 d-flex align-items-center justify-content-center">
+      <div class="overflow-hidden flex-grow-1 d-flex align-items-center justify-content-center">
         <ng-content select="[cell-i]"></ng-content>
       </div>
     </div>
     <div class="d-flex flex-column minor-column">
-      <div class="overflow-hidden border layout-31-cell d-flex align-items-center justify-content-center">
+      <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center">
           <ng-content select="[cell-ii]"></ng-content>
         </div>
-        <div class="overflow-hidden border layout-31-cell d-flex align-items-center justify-content-center">
+        <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center">
           <ng-content select="[cell-iii]"></ng-content>
         </div>
-        <div class="overflow-hidden border layout-31-cell d-flex align-items-center justify-content-center">
+        <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center">
           <ng-content select="[cell-iv]"></ng-content>
         </div>
     </div>
diff --git a/src/ui/config/layouts/v13/v13.template.html b/src/ui/config/layouts/v13/v13.template.html
index 6c4059a7ce36bb036d881ea3c537ce062c4b42ad..148f70cb596d2df0183f25d012bb9d948b610f60 100644
--- a/src/ui/config/layouts/v13/v13.template.html
+++ b/src/ui/config/layouts/v13/v13.template.html
@@ -1,17 +1,17 @@
 <div class="w-100 h-100 d-flex flex-column justify-content-center align-items-stretch">
   <div class="d-flex flex-column major-column">
-    <div class="border flex-grow-1 d-flex align-items-center justify-content-center">
+    <div class="flex-grow-1 d-flex align-items-center justify-content-center">
       <ng-content select="[cell-i]"></ng-content>
     </div>
   </div>
   <div class="d-flex flex-row minor-column">
-    <div class="border layout-31-cell d-flex align-items-center justify-content-center">
+    <div class="layout-31-cell d-flex align-items-center justify-content-center">
         <ng-content select="[cell-ii]"></ng-content>
       </div>
-      <div class="border layout-31-cell d-flex align-items-center justify-content-center">
+      <div class="layout-31-cell d-flex align-items-center justify-content-center">
         <ng-content select="[cell-iii]"></ng-content>
       </div>
-      <div class="border layout-31-cell d-flex align-items-center justify-content-center">
+      <div class="layout-31-cell d-flex align-items-center justify-content-center">
         <ng-content select="[cell-iv]"></ng-content>
       </div>
   </div>
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts
index 22d62b6e0110cc5916e6c6238f7423a22776b5f0..3f766cdd613588092aa835103457079c3409dbd9 100644
--- a/src/ui/nehubaContainer/nehubaContainer.component.ts
+++ b/src/ui/nehubaContainer/nehubaContainer.component.ts
@@ -3,7 +3,7 @@ import { NehubaViewerUnit } from "./nehubaViewer/nehubaViewer.component";
 import { Store, select } from "@ngrx/store";
 import { ViewerStateInterface, safeFilter, CHANGE_NAVIGATION, isDefined, USER_LANDMARKS, ADD_NG_LAYER, REMOVE_NG_LAYER, NgViewerStateInterface, MOUSE_OVER_LANDMARK, SELECT_LANDMARKS, Landmark, PointLandmarkGeometry, PlaneLandmarkGeometry, OtherLandmarkGeometry, getNgIds, getMultiNgIdsRegionsLabelIndexMap, generateLabelIndexId } from "../../services/stateStore.service";
 import { Observable, Subscription, fromEvent, combineLatest, merge } from "rxjs";
-import { filter,map, take, scan, debounceTime, distinctUntilChanged, switchMap, skip, withLatestFrom, buffer, tap, throttleTime, bufferTime, switchMapTo } from "rxjs/operators";
+import { filter,map, take, scan, debounceTime, distinctUntilChanged, switchMap, skip, withLatestFrom, buffer, tap, switchMapTo, shareReplay } from "rxjs/operators";
 import { AtlasViewerAPIServices, UserLandmark } from "../../atlasViewer/atlasViewer.apiService.service";
 import { timedValues } from "../../util/generator";
 import { AtlasViewerConstantsServices } from "../../atlasViewer/atlasViewer.constantService.service";
@@ -86,10 +86,6 @@ const scanFn : (acc:[boolean, boolean, boolean], curr: CustomEvent) => [boolean,
 export class NehubaContainer implements OnInit, OnDestroy{
 
   @ViewChild('container',{read:ViewContainerRef}) container : ViewContainerRef
-  @ViewChild('[pos00]',{read:ElementRef}) topleft : ElementRef
-  @ViewChild('[pos01]',{read:ElementRef}) topright : ElementRef
-  @ViewChild('[pos10]',{read:ElementRef}) bottomleft : ElementRef
-  @ViewChild('[pos11]',{read:ElementRef}) bottomright : ElementRef
 
   private nehubaViewerFactory : ComponentFactory<NehubaViewerUnit>
 
@@ -145,6 +141,7 @@ export class NehubaContainer implements OnInit, OnDestroy{
   private viewerConfig : Partial<ViewerConfiguration> = {}
 
   private viewPanels: [HTMLElement, HTMLElement, HTMLElement, HTMLElement] = [null, null, null, null]
+  public panelMode$: Observable<string>
 
   constructor(
     private constantService : AtlasViewerConstantsServices,
@@ -336,30 +333,10 @@ export class NehubaContainer implements OnInit, OnDestroy{
     ).pipe(
       map(results => results[1] === null ? results[0] : '')
     )
-    
-    /* each time a new viewer is initialised, take the first event to get the translation function */
-    this.subscriptions.push(
-      this.newViewer$.pipe(
-        switchMap(() => pipeFromArray([...takeOnePipe])(fromEvent(this.elementRef.nativeElement, 'sliceRenderEvent')))
-      ).subscribe((events)=>{
-        for (const idx in [0,1,2]) {
-          const ev = events[idx] as CustomEvent
-          this.viewPanels[idx] = ev.target as HTMLElement
-          this.nanometersToOffsetPixelsFn[idx] = ev.detail.nanometersToOffsetPixels
-        }
-      })
-    )
-
-    this.subscriptions.push(
-      this.newViewer$.pipe(
-        switchMapTo(fromEvent(this.elementRef.nativeElement, 'perpspectiveRenderEvent').pipe(
-          take(1)
-        )),
-      ).subscribe(ev => this.viewPanels[3] = ((ev as CustomEvent).target) as HTMLElement)
-    )
 
     this.sliceViewLoadingMain$ = fromEvent(this.elementRef.nativeElement, 'sliceRenderEvent').pipe(
       scan(scanFn, [null, null, null]),
+      shareReplay(1)
     )
 
     this.sliceViewLoading0$ = this.sliceViewLoadingMain$
@@ -410,6 +387,12 @@ export class NehubaContainer implements OnInit, OnDestroy{
         ? state.layers.findIndex(l => l.mixability === 'nonmixable') >= 0
         : false)
     )
+
+    this.panelMode$ = this.store.pipe(
+      select('ngViewerState'),
+      select('panelMode'),
+      distinctUntilChanged(),
+    )
   }
 
   get isMobile(){
@@ -426,6 +409,27 @@ export class NehubaContainer implements OnInit, OnDestroy{
 
   ngOnInit(){
 
+    /* each time a new viewer is initialised, take the first event to get the translation function */
+    this.subscriptions.push(
+      this.newViewer$.pipe(
+        switchMap(() => pipeFromArray([...takeOnePipe])(fromEvent(this.elementRef.nativeElement, 'sliceRenderEvent')))
+      ).subscribe((events)=>{
+        for (const idx in [0,1,2]) {
+          const ev = events[idx] as CustomEvent
+          this.viewPanels[idx] = ev.target as HTMLElement
+          this.nanometersToOffsetPixelsFn[idx] = ev.detail.nanometersToOffsetPixels
+        }
+      })
+    )
+
+    this.subscriptions.push(
+      this.newViewer$.pipe(
+        switchMapTo(fromEvent(this.elementRef.nativeElement, 'perpspectiveRenderEvent').pipe(
+          take(1)
+        )),
+      ).subscribe(ev => this.viewPanels[3] = ((ev as CustomEvent).target) as HTMLElement)
+    )
+
     this.subscriptions.push(
       combineLatest(
         this.store.pipe(
@@ -472,6 +476,9 @@ export class NehubaContainer implements OnInit, OnDestroy{
           }
           default: 
         }
+        for (const panel of viewPanels){
+          (panel as HTMLElement).classList.add('neuroglancer-panel')
+        }
       })
     )
 
diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css
index 301c664de0d831b6e848e7f5af27422c27326749..2d9e1542749aa6d838e172434fd3205e6beda3d3 100644
--- a/src/ui/nehubaContainer/nehubaContainer.style.css
+++ b/src/ui/nehubaContainer/nehubaContainer.style.css
@@ -15,6 +15,11 @@ input[navigateInput]
   box-shadow: inset 0px 2px 2px 2px rgba(0,0,0,0.05);
 }
 
+current-layout
+{
+  top: 0;
+  left: 0;
+}
 
 div[landmarkMasterContainer]
 {
@@ -66,7 +71,7 @@ hr
 }
 
 
-div[landmarkMasterContainer] > div > [landmarkContainer] > div.loadingIndicator
+div.loadingIndicator
 {
   left: auto;
   top: auto;
@@ -75,6 +80,7 @@ div[landmarkMasterContainer] > div > [landmarkContainer] > div.loadingIndicator
   margin-right: 0.2em;
   margin-bottom: 0.2em;
   width: 100%;
+  position:absolute;
   height:2em;
   display: flex;
   flex-direction: row-reverse;
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index c453d302cb382720296e778641c7ef05465fab9f..80e34d02cbb0365eec08e9704694abc7a34f0ae4 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -4,75 +4,31 @@
 <ui-splashscreen (contextmenu)="$event.stopPropagation();" *ngIf="!viewerLoaded">
 </ui-splashscreen>
 
-<div landmarkMasterContainer>
+<!-- spatial landmarks overlay -->
+<!-- loading indicator -->
 
-  <div>
-    <layout-floating-container pos00 landmarkContainer>
-      <nehuba-2dlandmark-unit *ngFor="let spatialData of (selectedPtLandmarks$ | async)"
-        (mouseenter)="handleMouseEnterLandmark(spatialData)" (mouseleave)="handleMouseLeaveLandmark(spatialData)"
-        [highlight]="spatialData.highlight ? spatialData.highlight : false"
-        [fasClass]="spatialData.type === 'userLandmark' ? 'fa-chevron-down' : 'fa-map-marker'"
-        [positionX]="getPositionX(0,spatialData)" [positionY]="getPositionY(0,spatialData)"
-        [positionZ]="getPositionZ(0,spatialData)">
-      </nehuba-2dlandmark-unit>
-
-      <div *ngIf="sliceViewLoading0$ | async" class="loadingIndicator">
-        <div class="spinnerAnimationCircle">
-
-        </div>
-      </div>
-    </layout-floating-container>
+<current-layout class="position-absolute w-100 h-100 d-block">
+  <div class="w-100 h-100 position-relative" cell-i>
+    <ng-content *ngTemplateOutlet="overlayi"></ng-content>
   </div>
-  <div>
-    <layout-floating-container pos01 landmarkContainer>
-      <nehuba-2dlandmark-unit *ngFor="let spatialData of (selectedPtLandmarks$ | async)"
-        (mouseenter)="handleMouseEnterLandmark(spatialData)" (mouseleave)="handleMouseLeaveLandmark(spatialData)"
-        [highlight]="spatialData.highlight ? spatialData.highlight : false"
-        [fasClass]="spatialData.type === 'userLandmark' ? 'fa-chevron-down' : 'fa-map-marker'"
-        [positionX]="getPositionX(1,spatialData)" [positionY]="getPositionY(1,spatialData)"
-        [positionZ]="getPositionZ(1,spatialData)">
-      </nehuba-2dlandmark-unit>
-
-      <div *ngIf="sliceViewLoading1$ | async" class="loadingIndicator">
-        <div class="spinnerAnimationCircle">
-
-        </div>
-      </div>
-    </layout-floating-container>
+  <div class="w-100 h-100 position-relative" cell-ii>
+    <ng-content *ngTemplateOutlet="overlayii"></ng-content>
   </div>
-  <div>
-    <layout-floating-container pos10 landmarkContainer>
-      <nehuba-2dlandmark-unit *ngFor="let spatialData of (selectedPtLandmarks$ | async)"
-        (mouseenter)="handleMouseEnterLandmark(spatialData)" (mouseleave)="handleMouseLeaveLandmark(spatialData)"
-        [highlight]="spatialData.highlight ? spatialData.highlight : false"
-        [fasClass]="spatialData.type === 'userLandmark' ? 'fa-chevron-down' : 'fa-map-marker'"
-        [positionX]="getPositionX(2,spatialData)" [positionY]="getPositionY(2,spatialData)"
-        [positionZ]="getPositionZ(2,spatialData)">
-      </nehuba-2dlandmark-unit>
-
-      <div *ngIf="sliceViewLoading2$ | async" class="loadingIndicator">
-        <div class="spinnerAnimationCircle">
-
-        </div>
-      </div>
-    </layout-floating-container>
+  <div class="w-100 h-100 position-relative" cell-iii>
+    <ng-content *ngTemplateOutlet="overlayiii"></ng-content>
   </div>
-  <div>
-    <layout-floating-container pos11 landmarkContainer>
-      <div *ngIf="perspectiveViewLoading$ | async" class="loadingIndicator">
-        <div class="spinnerAnimationCircle"></div>
-        <div perspectiveLoadingText>
-          {{ perspectiveViewLoading$ | async }}
-        </div>
-      </div>
-    </layout-floating-container>
+  <div class="w-100 h-100 position-relative" cell-iv>
+    <ng-content *ngTemplateOutlet="overlayiv"></ng-content>
   </div>
-</div>
+</current-layout>
 
 <layout-floating-container *ngIf="viewerLoaded && !isMobile">
   <!-- StatusCard container-->
-  <ui-status-card [selectedTemplate]="selectedTemplate" [isMobile]="isMobile"
-    [onHoverSegmentName]="onHoverSegmentName$ | async" [nehubaViewer]="nehubaViewer">
+  <ui-status-card
+    [selectedTemplate]="selectedTemplate"
+    [isMobile]="isMobile"
+    [onHoverSegmentName]="onHoverSegmentName$ | async"
+    [nehubaViewer]="nehubaViewer">
   </ui-status-card>
 </layout-floating-container>
 
@@ -80,7 +36,10 @@
 
 </div>
 
-<mobile-overlay *ngIf="isMobile && viewerLoaded" [tunableProperties]="tunableMobileProperties"
+<!-- mobile nub, allowing for ooblique slicing in mobile -->
+<mobile-overlay
+  *ngIf="true || isMobile && viewerLoaded"
+  [tunableProperties]="tunableMobileProperties"
   (deltaValue)="handleMobileOverlayEvent($event)">
   <div class="base" delta>
     <div mobileObliqueGuide class="p-2 mb-4 shadow">
@@ -88,7 +47,9 @@
     </div>
   </div>
   <div class="base" guide>
-    <div mobileObliqueGuide class="p-2 mb-4 shadow">
+    <div
+      mobileObliqueGuide
+      class="p-2 mb-4 shadow">
       <div>
         <i class="fas fa-arrows-alt-v"></i> oblique mode
       </div>
@@ -97,7 +58,78 @@
       </div>
     </div>
   </div>
-  <div (contextmenu)="$event.stopPropagation(); $event.preventDefaul();" mobileObliqueCtrl initiator>
-    <i class="fas fa-globe"></i>
+  <div
+    (contextmenu)="$event.stopPropagation(); $event.preventDefaul();"
+    [ngStyle]="panelMode$ | async | mobileControlNubStylePipe"
+    mobileObliqueCtrl
+    initiator>
+    <button mat-mini-fab color="primary">
+      <i class="fas fa-globe"></i>
+    </button>
   </div>
-</mobile-overlay>
\ No newline at end of file
+</mobile-overlay>
+
+<!-- overlay templates -->
+<!-- inserted using ngTemplateOutlet -->
+<ng-template #overlayi>
+  <layout-floating-container pos00 landmarkContainer>
+    <nehuba-2dlandmark-unit *ngFor="let spatialData of (selectedPtLandmarks$ | async)"
+      (mouseenter)="handleMouseEnterLandmark(spatialData)" (mouseleave)="handleMouseLeaveLandmark(spatialData)"
+      [highlight]="spatialData.highlight ? spatialData.highlight : false"
+      [fasClass]="spatialData.type === 'userLandmark' ? 'fa-chevron-down' : 'fa-map-marker'"
+      [positionX]="getPositionX(0,spatialData)" [positionY]="getPositionY(0,spatialData)"
+      [positionZ]="getPositionZ(0,spatialData)">
+    </nehuba-2dlandmark-unit>
+
+    <div *ngIf="sliceViewLoading0$ | async" class="loadingIndicator">
+      <div class="spinnerAnimationCircle">
+
+      </div>
+    </div>
+  </layout-floating-container>
+</ng-template>
+
+<ng-template #overlayii>
+  <layout-floating-container pos01 landmarkContainer>
+      <nehuba-2dlandmark-unit *ngFor="let spatialData of (selectedPtLandmarks$ | async)"
+        (mouseenter)="handleMouseEnterLandmark(spatialData)" (mouseleave)="handleMouseLeaveLandmark(spatialData)"
+        [highlight]="spatialData.highlight ? spatialData.highlight : false"
+        [fasClass]="spatialData.type === 'userLandmark' ? 'fa-chevron-down' : 'fa-map-marker'"
+        [positionX]="getPositionX(1,spatialData)" [positionY]="getPositionY(1,spatialData)"
+        [positionZ]="getPositionZ(1,spatialData)">
+      </nehuba-2dlandmark-unit>
+
+      <div *ngIf="sliceViewLoading1$ | async" class="loadingIndicator">
+        <div class="spinnerAnimationCircle">
+
+        </div>
+      </div>
+    </layout-floating-container>
+</ng-template>
+<ng-template #overlayiii>
+  <layout-floating-container pos10 landmarkContainer>
+    <nehuba-2dlandmark-unit *ngFor="let spatialData of (selectedPtLandmarks$ | async)"
+      (mouseenter)="handleMouseEnterLandmark(spatialData)" (mouseleave)="handleMouseLeaveLandmark(spatialData)"
+      [highlight]="spatialData.highlight ? spatialData.highlight : false"
+      [fasClass]="spatialData.type === 'userLandmark' ? 'fa-chevron-down' : 'fa-map-marker'"
+      [positionX]="getPositionX(2,spatialData)" [positionY]="getPositionY(2,spatialData)"
+      [positionZ]="getPositionZ(2,spatialData)">
+    </nehuba-2dlandmark-unit>
+
+    <div *ngIf="sliceViewLoading2$ | async" class="loadingIndicator">
+      <div class="spinnerAnimationCircle">
+
+      </div>
+    </div>
+  </layout-floating-container>
+</ng-template>
+<ng-template #overlayiv>
+  <layout-floating-container pos11 landmarkContainer>
+    <div *ngIf="perspectiveViewLoading$ | async" class="loadingIndicator">
+      <div class="spinnerAnimationCircle"></div>
+      <div perspectiveLoadingText>
+        {{ perspectiveViewLoading$ | async }}
+      </div>
+    </div>
+  </layout-floating-container>
+</ng-template>
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/pipes/mobileControlNubStyle.pipe.ts b/src/ui/nehubaContainer/pipes/mobileControlNubStyle.pipe.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4566c470506588e39edc79f005843a24be80c748
--- /dev/null
+++ b/src/ui/nehubaContainer/pipes/mobileControlNubStyle.pipe.ts
@@ -0,0 +1,30 @@
+import { PipeTransform, Pipe } from "@angular/core";
+import { FOUR_PANEL, H_ONE_THREE, V_ONE_THREE, SINGLE_PANEL } from "src/services/state/ngViewerState.store";
+
+@Pipe({
+  name: 'mobileControlNubStylePipe'
+})
+
+export class MobileControlNubStylePipe implements PipeTransform{
+  public transform(panelMode: string): any{
+    switch (panelMode) {
+      case SINGLE_PANEL:
+        return {
+          top: '80%',
+          left: '95%'
+        }
+      case V_ONE_THREE:
+      case H_ONE_THREE:
+        return {
+          top: '66.66%',
+          left: '66.66%'
+        }
+      case FOUR_PANEL: 
+      default:
+        return {
+          top: '50%',
+          left: '50%'
+        }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts
index f14ba244d7f14ab5f4ebf094378f5cc7b27fcfa3..52cedbda807d3d8a655e346495d87829fbf26b90 100644
--- a/src/ui/ui.module.ts
+++ b/src/ui/ui.module.ts
@@ -54,6 +54,8 @@ import { HorizontalOneThree } from "./config/layouts/h13/h13.component";
 import { VerticalOneThree } from "./config/layouts/v13/v13.component";
 import { SinglePanel } from "./config/layouts/single/single.component";
 import { DragDropModule } from "@angular/cdk/drag-drop";
+import { CurrentLayout } from "./config/currentLayout/currentLayout.component";
+import { MobileControlNubStylePipe } from "./nehubaContainer/pipes/mobileControlNubStyle.pipe";
 
 
 @NgModule({
@@ -101,6 +103,7 @@ import { DragDropModule } from "@angular/cdk/drag-drop";
     HorizontalOneThree,
     VerticalOneThree,
     SinglePanel,
+    CurrentLayout,
 
     /* pipes */
     GroupDatasetByRegion,
@@ -116,6 +119,7 @@ import { DragDropModule } from "@angular/cdk/drag-drop";
     FilterNameBySearch,
     TemplateParcellationsDecorationPipe,
     AppendtooltipTextPipe,
+    MobileControlNubStylePipe,
 
     /* directive */
     DownloadDirective,