diff --git a/src/app/content-view-tab-component/content-view-tab-component.component.html b/src/app/content-view-tab-component/content-view-tab-component.component.html
index 7c9c508..95fcc41 100644
--- a/src/app/content-view-tab-component/content-view-tab-component.component.html
+++ b/src/app/content-view-tab-component/content-view-tab-component.component.html
@@ -1,64 +1,60 @@
-<mat-drawer-container style="height: 100%; min-height: 1000px" [hasBackdrop]= false>
+<mat-drawer-container [hasBackdrop]= false>
   <mat-drawer [mode]="navBarOpenMode" [position] ="orientation" [disableClose]="false" [opened]="navBarOpenState ">
-    <mat-card class="sidenav-drawer" style="display: table-row">
-      <div class="navbar-container">
         <app-navigation-list-component></app-navigation-list-component>
-      </div>
       <div class="button-container" *ngIf="navBarOpenMode === 'over'">
         <button mat-raised-button class="toggle-button" (click)="toggleNavDrawer()">
           <mat-icon class="mat-accent">{{ navBarOpenState  ? 'chevron_left' : 'chevron_right' }}</mat-icon>
         </button>
       </div>
-    </mat-card>
   </mat-drawer>
-  <mat-drawer-content style="display: table">
+  <mat-drawer-content>
     <div class="button-container">
       <button mat-raised-button class="toggle-button" (click)="toggleNavDrawer()">
         <mat-icon class="mat-accent">{{ navBarOpenState  ? 'chevron_left' : 'chevron_right' }}</mat-icon>
       </button>
     </div>
     <div class="content-container">
       <mat-card>
         <nav mat-tab-nav-bar>
           <a mat-tab-link
              *ngFor="let link of navTabLinks"
              [routerLink]="link.link"
              [queryParams]="queryParams"
              routerLinkActive #rla="routerLinkActive"
              [active]="rla.isActive">
             {{link.label}}
           </a>
         </nav>
       </mat-card>
       <router-outlet></router-outlet>
     </div>
   </mat-drawer-content>
 </mat-drawer-container>
 <!--
 <mat-drawer-container id="sidenav-container" [hasBackdrop]= false >
   <mat-drawer id="sidenav-drawer" mode="over" position ="end" [disableClose]="true" [opened]="openState">
     <div class="content-area">
       <div class="indrawer-toggle-button-container">
         <button mat-raised-button class="toggle-button" (click)="toggleDetailsDrawer()">
           <mat-icon class="mat-accent">{{ openState ? 'chevron_right' : 'chevron_left'  }}</mat-icon>
         </button>
       </div>
       <div class="indrawer-content-container">
         <app-info-box [manuscript]="manuscript"></app-info-box>
       </div>
     </div>
   </mat-drawer>
   <mat-drawer-content id="main-content-container">
     <div class="content-area">
       <div class="content-container">
         <router-outlet></router-outlet>
       </div>
       <div class = "toggle-button-container">
         <button mat-raised-button class="toggle-button" (click)="toggleDetailsDrawer()">
           <mat-icon class="mat-accent">{{ openState ? 'chevron_right' : 'chevron_left'  }}</mat-icon>
         </button>
       </div>
     </div>
   </mat-drawer-content>
 </mat-drawer-container>
 -->
diff --git a/src/app/content-view-tab-component/content-view-tab-component.component.scss b/src/app/content-view-tab-component/content-view-tab-component.component.scss
index 687ea91..c04c5d0 100644
--- a/src/app/content-view-tab-component/content-view-tab-component.component.scss
+++ b/src/app/content-view-tab-component/content-view-tab-component.component.scss
@@ -1,44 +1,39 @@
 // the navigation drawer on the very left containing the items to choose from
-.sidenav-drawer {
+.mat-drawer {
+  overflow: hidden;
   padding: 10px;
   display: table;
-  height:100%;
-  min-width: unset;
+}
+
+mat-drawer-content {
+  height: 100vh;
+  display: table;
 }
 
 .button-container {
   height:100%;
   vertical-align: top;
   min-width:2em;
   display: table-cell;
   padding: 1em;
 }
 
 .content-container {
   height:100%;
   vertical-align: top;
   align-content: left;
   width:100%;
   display: table-cell;
   padding: 10px;
 }
 
-.navbar-container {
-  height:100%;
-  vertical-align: top;
-  align-content: left;
-  width:100%;
-  display: table-cell;
-  padding: 10px;
-}
-
 .toggle-button { // fills sidenav-button-container completely, so all is one button
   height: 100px;
   min-width: unset; // needed because angular sets an own min width!?
   width: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0;
   padding: 0;
 }
diff --git a/src/app/navigation-list-component/navigation-list-component.component.html b/src/app/navigation-list-component/navigation-list-component.component.html
index 994cbcf..94f573e 100644
--- a/src/app/navigation-list-component/navigation-list-component.component.html
+++ b/src/app/navigation-list-component/navigation-list-component.component.html
@@ -1,25 +1,28 @@
-<mat-toolbar>Navigation</mat-toolbar>
-<mat-card *ngIf="navTrees">
-  <nav mat-tab-nav-bar>
-    <a mat-tab-link
-       *ngFor="let tree of navTrees" [active]="tree.isActive" (click)="changeToTree(tree.idx)">
-        <div><h4>{{tree.label}}</h4></div>
-    </a>
-  </nav>
-  <div *ngIf="selectedManId"><h3>Manuskript {{selectedManId}}</h3></div>
-</mat-card>
-<mat-nav-list *ngIf="navTreeData">
-  <mat-list-item *ngFor="let item of navTreeData"
-                 (click)="onSelectNavItem(item)"
-                 [id] = "item.tlnEntity.id"
-                 [class.active-item]="isItemSelected(item.tlnEntity.id)">
-    <div>
+<div class="fixed-nav-header"><mat-toolbar>Navigation</mat-toolbar>
+  <mat-card *ngIf="navTrees">
+    <nav mat-tab-nav-bar>
+      <a mat-tab-link
+         *ngFor="let tree of navTrees" [active]="tree.isActive" (click)="changeToTree(tree.idx)">
+          <div><h4>{{tree.label}}</h4></div>
+      </a>
+    </nav>
+    <div *ngIf="selectedManId"><h3>Manuskript {{selectedManId}}</h3></div>
+  </mat-card>
+</div>
+<div class="navlist-container">
+  <mat-nav-list *ngIf="navTreeData">
+    <mat-list-item *ngFor="let item of navTreeData"
+                   (click)="onSelectNavItem(item)"
+                   [id] = "item.tlnEntity.id"
+                   [class.active-item]="isItemSelected(item.tlnEntity.id)">
       <div>
-        <h4 matLine>{{item.tlnEntity.label}}</h4>
+        <div>
+          <h4 matLine>{{item.tlnEntity.label}}</h4>
+        </div>
+        <img class="thumbnail" *ngIf="item.img" [src]="item.img"/>
+        <mat-icon *ngIf="!item.img" matListIcon >description</mat-icon>
+        <mat-divider></mat-divider>
       </div>
-      <img *ngIf="item.img" [src]="item.img"/>
-      <mat-icon *ngIf="!item.img" matListIcon >description</mat-icon>
-      <mat-divider></mat-divider>
-    </div>
-  </mat-list-item>
-</mat-nav-list>
+    </mat-list-item>
+  </mat-nav-list>
+</div>
diff --git a/src/app/navigation-list-component/navigation-list-component.component.scss b/src/app/navigation-list-component/navigation-list-component.component.scss
index e09c1f3..d27eb37 100644
--- a/src/app/navigation-list-component/navigation-list-component.component.scss
+++ b/src/app/navigation-list-component/navigation-list-component.component.scss
@@ -1,23 +1,28 @@
-
-.sticky-nav-header {
+.fixed-nav-header {
   position: sticky;
 }
 
+.navlist-container {
+  min-height: 70vh;
+  max-height: 80vh;
+  overflow: auto;
+  overflow-x: hidden;
+}
+
 .mat-divider {
   padding: 2px;
 }
 
 .active-item {
   background-color: #dadada !important;
 }
 
-.mat-nav-list {
-  align-items: center;
-}
-
-
 .mat-nav-list .mat-list-item {
   // flex: none;
   min-height: 72px;
   height: 100%; /* default is 72px */
 }
+
+.thumbnail {
+  max-width: 120px;
+}
diff --git a/src/app/navigation-list-component/navigation-list-component.component.ts b/src/app/navigation-list-component/navigation-list-component.component.ts
index 13d3252..6dfb1c8 100644
--- a/src/app/navigation-list-component/navigation-list-component.component.ts
+++ b/src/app/navigation-list-component/navigation-list-component.component.ts
@@ -1,91 +1,92 @@
 import {Component, ElementRef, Input, OnChanges, OnInit, ViewChild} from '@angular/core';
 import {NavigationServiceService} from "../services/navigation-service.service";
 import {NavigationEntity, NavTree, TlnEntity, TlnManuscript, TlnPage, TlnQueryParams, TlnWord} from '../models/models';
 import {Subscription} from "rxjs/index";
 import {ActivatedRoute, Params, Router} from '@angular/router';
 
 @Component({
   selector: 'app-navigation-list-component',
   templateUrl: './navigation-list-component.component.html',
   styleUrls: ['./navigation-list-component.component.scss']
 })
 /**
  * NavigationListComponent
  * Does sinply consume data coming from parent component and naviservice. triggers click event to service.
  */
 export class NavigationListComponentComponent implements OnInit {
 
   navTreeData: Array<NavigationEntity>; // the data displayed in the navigation bar
   navTreeDataSub: Subscription; // detecting/reloding if the tree data changes
   navTreeSubscription: Subscription; // subscribing if the displayed tree changes.
   navTrees = []; // The navTrees available for the nav bar for switchich between navtrees
   // tln specific ...
   // selectedManuscript: TlnManuscript;
   // selectedPage: TlnPage;
   // selectedWord: TlnWord;
   // lastSelectedEntity: TlnEntity; // one of the above
   // Subscribtions
   selectedManuscriptSub: Subscription;
   selectedPageSub: Subscription;
   // selectedWordSub: Subscription;
 
   selectedManId = ''; // for highlighting a chosen nav item. Will be set by click in the template as well as by subscription of nav service
   selectedPageId = ''; // for highlighting a chosen nav item
+  lastSelectedItem: NavigationEntity;
 
   constructor( private naviService: NavigationServiceService ) {
     // if the displayed navTree changes through navigation.
     this.navTreeSubscription = this.naviService.navTreeIndexChange.subscribe(trees => this.navTrees = trees );
 
     // Listening to changes and set the selected things accordingly.
     this.selectedManuscriptSub = this.naviService.selectedManuscriptChange.subscribe(m => {
       this.selectedManId = m.entity.id;
       // Only if the active tree is the manuscrip tree, scroll into view of the selected manuscript
       if (this.navTrees[this.navTrees.findIndex((tree) => tree.isActive )].idx === 0 && this.navTreeData ) {
         const itemToScrollTo = document.getElementById(m.entity.id);
         this.scrollOnToSelectedItem(itemToScrollTo);
       }
     });
   }
 
   ngOnInit() {
 
     this.navTreeDataSub = this.naviService.activeTreeDataChange.subscribe(treeData => this.navTreeData = treeData );
 
     this.selectedPageSub = this.naviService.selectedPageChange.subscribe(p => {
       this.selectedPageId = p.entity.id;
       const itemToScrollTo = document.getElementById(p.entity.id);
       this.scrollOnToSelectedItem(itemToScrollTo); });
   }
 
   onSelectNavItem(item: NavigationEntity) {
     this.naviService.onSelectedItem(item);
   }
 
   // For scrolling to the selected item (manuscript, page) into view
   scrollOnToSelectedItem(item: any) {
     if ( item ) {
       item.scrollIntoView({ behavior: 'smooth' });
     }
   }
 
   // switches tabs in navtab ov navigation bar
   changeToTree(idx) {
       // set treedata to new tab index
       this.naviService.setActiveTreeData(idx);
       // change also the tab itself.
       this.naviService.changeActiveTreeIndex(idx);
     }
 
   isItemSelected(itemId) {
     let isSelected = false;
     if (this.selectedManId === itemId || this.selectedPageId === itemId) {
           isSelected = true; }
     return isSelected;
   }
 
   treeHasChanged(idx) {
     if (this.navTrees[this.navTrees.findIndex((tree) => tree.isActive)].idx === idx) {
       return false;
     } else { return true; }
   }
 }