diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.css b/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.css
index 97674d7..90d18aa 100644
--- a/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.css
+++ b/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.css
@@ -1,17 +1,26 @@
 #navi {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
 }
+.search {
+   margin-left: 8px;
+ }
 .zoom {
-   max-width: 10px;
+   max-width: 20px;
+}
+.zoom-in {
+   cursor: zoom-in;
+}
+.zoom-out {
+   cursor: zoom-out;
 }
 .mat-button.min-width {
    min-width: 120px;
    max-width: 120px;
 }
 .default-mouse {
    cursor: default;
 }
diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.html b/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.html
index 6d838a6..a1af008 100644
--- a/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.html
+++ b/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.html
@@ -1,26 +1,30 @@
 <div id="navi">
    <button mat-icon-button [title]="fullscreen ? 'Vollbild aus' : 'Vollbild ein'" (click)="toggleFullscreen()">
       <mat-icon *ngIf="fullscreen == true">fullscreen_exit</mat-icon>
       <mat-icon *ngIf="fullscreen == false">fullscreen</mat-icon>
    </button>
    <button mat-icon-button *ngIf="current_page && contextView == PAGE_CONTEXT_VIEW" 
      [title]="'Alle Querverweise von ' + current_page.title + ' anzeigen'" (click)="changeContext()">
       <mat-icon>auto_stories</mat-icon>
    </button>
    <button mat-icon-button *ngIf="current_page && contextView != PAGE_CONTEXT_VIEW" 
      [title]="'Querverweise von ' + current_page.title + ' ' + current_page.number + ' anzeigen'" (click)="changeContext()">
       <mat-icon>description</mat-icon>
    </button>
    <button *ngIf="current_page && contextView == PAGE_CONTEXT_VIEW" 
      mat-icon-button [title]="current_page.title + ' ' + current_page.number +' in Seitenansicht anzeigen'" (click)="setCurrentIri(current_page.id)">
       <mat-icon>chrome_reader_mode</mat-icon>
    </button>
-   <mat-form-field *ngIf="contextView == PAGE_CONTEXT_VIEW">
+   <button mat-icon-button class="zoom zoom-in" [title]="getZoomTitle(increment)" (click)="setZoomFactor(zoomFactor+increment)"><mat-icon>zoom_in</mat-icon></button>
+   <button mat-icon-button [ngClass]="{ 'zoom-in': zoomFactor < 1, 'zoom-out': zoomFactor > 1 }" 
+                           title="Zoom zur&uuml;cksetzen" (click)="setZoomFactor(1)">{{zoomFactor * 100 | number:'1.0-0'}}%</button>
+   <button mat-icon-button class="zoom zoom-out" [title]="getZoomTitle(decrement)" (click)="setZoomFactor(zoomFactor+decrement)"><mat-icon>zoom_out</mat-icon></button>
+   <mat-form-field class="search" *ngIf="contextView == PAGE_CONTEXT_VIEW">
       <mat-label>Suche</mat-label>
       <input matInput type="text" [(ngModel)]="findText" (ngModelChange)="updateParams()" (keydown.esc)="clearFindText()">
          <button mat-button *ngIf="findText" matSuffix mat-icon-button aria-label="Clear" (click)="clearFindText()">
             <mat-icon>close</mat-icon>
          </button>
    </mat-form-field>
 </div>
 
diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.ts b/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.ts
index e54f9f7..9b1b309 100644
--- a/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.ts
+++ b/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.ts
@@ -1,160 +1,161 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Router, ActivatedRoute, Params } from '@angular/router';
 import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';
 import { TlnQueryServiceInterface, Reference, ManuscriptUnity, NavigationPage } from '../../models';
 import { TlnManuscriptUnity, TlnNavigationPage} from '../../datatypes/navigation';
 import { DEFAULT_VIEW_OPTION, TLN_VIEWER_ROUTE, TLN_CROSSREF_ROUTE, TLN_CONTEXT_VIEW_PARAM, TLN_FULLSCREEN_PARAM, TLN_FIND_PARAM, TLN_PAGE_PARAM, TLN_MANUSCRIPT_PARAM,
    TLN_SELECTED_LINES_PARAM, TLN_VIEW_OPTION_PARAM, TLN_ZOOM_PARAM, VIEW_OPTIONS, ONTOLOTY_PREFIX } from '../../constants';
 import { IsReconstructedKonvolut } from '../../datatypes/basic_datatype';
 import { TlnLine} from '../../datatypes/line';
 import { TlnTextGeneticOrder} from '../../datatypes/text_version';
 import { Mapping } from '../../route-reader';
 import { RouteUpdater } from '../../route-updater';
 import { ComplexKeyIriMapping, DataHandler, KeyIriMapping } from '../../data_handler';
 import { PageViewService, TlnQueryService  } from '../../services';
 import { TlnInformationComponent, ParentInformation } from '../../tln-information/tln-information.component';
 import { PageInformation } from '../../tln-information/page-information';
 
 @Component({
   selector: 'crossref-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.css']
 })
 export class NavigationComponent extends RouteUpdater {
   /**
    * OPTIONAL pass a queryService with method 
    * {@link /interfaces/TlnQueryServiceInterface.html#getData|getData}
    * to TlnPageViewComponent.
    **/
   @Input() queryService: TlnQueryServiceInterface;
   /**
    * whether or not to show page view in fullscreen mode.
    **/
   fullscreen: boolean = false;
   zoomFactor: number = 1;
   findText: string;
   current_iri: string;
   current_manuscript_iri: string;
   current_page: NavigationPage;
   pageInformation: PageInformation;
   previous_page: NavigationPage;
   next_page: NavigationPage;
   showArchivalManuscriptUnity: boolean = false;
   dataHandler: DataHandler = new DataHandler(this);
   geneticOrders: TlnTextGeneticOrder[] = [];
   selectedLines: string[] = [];
   private readonly PAGE_CONTEXT_VIEW: string = TLN_PAGE_PARAM;
   private readonly MANUSCRIPT_CONTEXT_VIEW: string = TLN_MANUSCRIPT_PARAM;
   contextView: string = this.PAGE_CONTEXT_VIEW;
   private readonly increment: number = 0.333;
   private readonly decrement: number = this.increment*-1;
   protected currentRoute: string = TLN_CROSSREF_ROUTE;
   protected mapping: Mapping = { findText: { param: TLN_FIND_PARAM, type: "string" },
               contextView: { param: TLN_CONTEXT_VIEW_PARAM, type: "string" },
               current_iri: { param: TLN_PAGE_PARAM, type: "string" },
               current_manuscript_iri: { param: TLN_MANUSCRIPT_PARAM, type: "string" },
-              fullscreen: { param: TLN_FULLSCREEN_PARAM, type: "boolean" }
+              fullscreen: { param: TLN_FULLSCREEN_PARAM, type: "boolean" },
+              zoomFactor: { param: TLN_ZOOM_PARAM, type: "number" } 
   }
   routerParams: Params;
   selectedViewOption: string = DEFAULT_VIEW_OPTION
   updating: boolean = false;
   viewOptions: string[] = [ VIEW_OPTIONS.TRANSKRIPTION, VIEW_OPTIONS.FAKSIMILE, VIEW_OPTIONS.SYNOPSIS, VIEW_OPTIONS.SYNOPSIS_B ];
 
    constructor(private bottomSheet: MatBottomSheet, private pageViewService: PageViewService, private localQueryService: TlnQueryService, protected router: Router, protected activatedRoute: ActivatedRoute ) { 
       super(router, activatedRoute);
    }
    ngOnInit() {
       let tlnQueryService = (this.queryService != null) ? this.queryService : this.localQueryService;
       this.dataHandler.addHandler('navigation_page', ['current_page', 'geneticOrders'] );
       this.dataHandler.addHandler('current_page', { 'handler': TlnNavigationPage });
       this.dataHandler.addHandler('geneticOrders', { 'handler': TlnTextGeneticOrder});
       this.dataHandler.setQueryService(tlnQueryService);
       this.dataHandler.start_processing.subscribe(
          (started: boolean) =>{ this.updating = true;
       });
       this.dataHandler.processing_finished.subscribe(
          (finished: boolean) =>{ this.updating = false;
       });
       super.ngOnInit();
       this.pageViewService.reference.subscribe(
          (newReference: Reference) => {
             this.updatePageToReference(newReference)
       }) 
       this.pageViewService.onClickedLine.subscribe(
          (clickedLine: TlnLine) => { 
             let index = this.selectedLines.indexOf(clickedLine.id)
             if (index > -1){
                this.selectedLines.splice(index, 1);
             } else {
                this.selectedLines.push(clickedLine.id);
             }
             this.updateParams();
       });
   }
   private clearFindText() {
      this.findText = '';
      this.updateParams();
   }
   changeContext(){
       this.contextView = (this.contextView == this.PAGE_CONTEXT_VIEW) ? this.MANUSCRIPT_CONTEXT_VIEW : this.PAGE_CONTEXT_VIEW;
       //this.current_genetic_order_iri = 'none'; 
       this.updateParams();
   }
   private getPageTitle(page?: NavigationPage, numPages?: number): string {
      if (page == null){
         return '';
      }
      let indexPrefix = (numPages != null) ? page.index + '/' + numPages : page.index;
      return indexPrefix + ': ' + page.title + ' ' + page.number;
   }
   private getZoomTitle(changeValue: number): string {
      if (this.zoomFactor+changeValue < 0){
          return Math.round(this.zoomFactor*50) + '%';
      }
      return Math.round((this.zoomFactor+changeValue)*100) + '%';
   }
   protected readParams(params: Params){
      super.readParams(params);
      if (this.dataHandler.ready && (this.current_page == null || this.current_page.id != this.current_iri)){
         this.dataHandler.resetData('navigation_page')
         this.dataHandler.getData('current_page', this.current_iri);
      } 
   }
   private setZoomFactor(newZoomFactor: number){
      if (newZoomFactor > 0){
          this.zoomFactor = Math.round(newZoomFactor*100)/100;
      } else {
          this.zoomFactor = this.zoomFactor/2
      }
      this.updateParams();
   }
   private setCurrentIri(pageIri: string){
       this.dataHandler.stop_processing.emit(true);
       this.current_iri = pageIri;
       this.currentRoute = TLN_VIEWER_ROUTE;
       this.updateParams();
   }
   private showInformation() {
      let parentData: ParentInformation = {
         geneticOrders: this.geneticOrders,
         page: this.current_page,
         manuscript_iri: this.current_manuscript_iri
      }
      this.bottomSheet.open(TlnInformationComponent, {
         data: parentData
      });
   }
   private updatePageToReference(reference: Reference){
      this.current_iri = <string>reference.page.id;
      this.selectedLines = [ <string>reference.line.id ]
      this.updateParams();
   }
   private toggleFullscreen(){
      this.fullscreen = !this.fullscreen;
      this.updateParams();
   }
   public test(iri?: string){
      this.bottomSheet.open(TlnInformationComponent);
      //this.dataHandler.isOfType('showArchivalManuscriptUnity', 'http://rdfh.ch/projects/0068#_Mp_XIV', 'http://www.nie.org/ontology/nietzsche#ArchivalManuscriptUnity')
   }
 }
diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-viewer-navigation/tln-viewer-navigation.component.css b/nietzsche-beta-app/src/app/tln-edition/tln-viewer-navigation/tln-viewer-navigation.component.css
index 97674d7..90d18aa 100644
--- a/nietzsche-beta-app/src/app/tln-edition/tln-viewer-navigation/tln-viewer-navigation.component.css
+++ b/nietzsche-beta-app/src/app/tln-edition/tln-viewer-navigation/tln-viewer-navigation.component.css
@@ -1,17 +1,26 @@
 #navi {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
 }
+.search {
+   margin-left: 8px;
+ }
 .zoom {
-   max-width: 10px;
+   max-width: 20px;
+}
+.zoom-in {
+   cursor: zoom-in;
+}
+.zoom-out {
+   cursor: zoom-out;
 }
 .mat-button.min-width {
    min-width: 120px;
    max-width: 120px;
 }
 .default-mouse {
    cursor: default;
 }
diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-viewer-navigation/tln-viewer-navigation.component.html b/nietzsche-beta-app/src/app/tln-edition/tln-viewer-navigation/tln-viewer-navigation.component.html
index aa35c80..8239608 100644
--- a/nietzsche-beta-app/src/app/tln-edition/tln-viewer-navigation/tln-viewer-navigation.component.html
+++ b/nietzsche-beta-app/src/app/tln-edition/tln-viewer-navigation/tln-viewer-navigation.component.html
@@ -1,50 +1,51 @@
 <div id="navi">
    <button *ngIf="!current_page || !manuscript_unity" mat-icon-button disabled="true"><mat-icon>first_page</mat-icon></button>
    <button *ngIf="current_page && manuscript_unity"
      mat-icon-button [title]="getPageTitle(manuscript_unity.firstPage)" (click)="setCurrentIri(manuscript_unity.firstPage.id)" 
      [disabled]="updating || manuscript_unity.firstPage.id == current_page.id">
       <mat-icon>first_page</mat-icon>
    </button>
    <button *ngIf="!current_page || !manuscript_unity" mat-icon-button disabled="true"><mat-icon>chevron_left</mat-icon></button>
    <button *ngIf="current_page && manuscript_unity" mat-icon-button [title]="getPageTitle(current_page.previous, manuscript_unity.numberOfPages)" 
      (click)="setCurrentIri(current_page.previous.id)" [disabled]="updating || !current_page.previous">
       <mat-icon>chevron_left</mat-icon>
    </button>
    <mat-form-field appearance="legacy">
       <mat-select [(value)]="selectedViewOption" (selectionChange)="updateParams()">
          <mat-option *ngFor="let viewOption of viewOptions" [value]="viewOption">{{viewOption}}</mat-option>
       </mat-select>
    </mat-form-field>
    <button mat-icon-button [title]="fullscreen ? 'Vollbild aus' : 'Vollbild ein'" (click)="toggleFullscreen()">
       <mat-icon *ngIf="fullscreen == true">fullscreen_exit</mat-icon>
       <mat-icon *ngIf="fullscreen == false">fullscreen</mat-icon>
    </button>
-   <button mat-icon-button [title]="getZoomTitle(increment)" (click)="setZoomFactor(zoomFactor+increment)"><mat-icon>zoom_in</mat-icon></button>
-   <button mat-icon-button title="Zoom zur&uuml;cksetzen" (click)="setZoomFactor(1)">{{zoomFactor * 100 | number:'1.0-0'}}%</button>
-   <button mat-icon-button [title]="getZoomTitle(decrement)" (click)="setZoomFactor(zoomFactor+decrement)"><mat-icon>zoom_out</mat-icon></button>
+   <button mat-icon-button [title]="getZoomTitle(increment)" class="zoom zoom-in" (click)="setZoomFactor(zoomFactor+increment)"><mat-icon>zoom_in</mat-icon></button>
+   <button mat-icon-button [ngClass]="{ 'zoom-in': zoomFactor < 1, 'zoom-out': zoomFactor > 1 }"
+                           title="Zoom zur&uuml;cksetzen" (click)="setZoomFactor(1)">{{zoomFactor * 100 | number:'1.0-0'}}%</button>
+   <button mat-icon-button [title]="getZoomTitle(decrement)" class="zoom zoom-out" (click)="setZoomFactor(zoomFactor+decrement)"><mat-icon>zoom_out</mat-icon></button>
    <span class="mat-button min-width default-mouse" *ngIf="!current_page">Loading ...</span>
    <span class="mat-button min-width default-mouse" *ngIf="geneticOrders.length == 0 && current_page">{{current_page.title}} {{current_page.number}}</span>
    <button mat-button class="min-width" title="Seiteninformationen" (click)="showInformation()" *ngIf="geneticOrders.length > 0 && current_page">
       {{current_page.title}} {{current_page.number}}
       <mat-icon inline="true">info</mat-icon>
    </button>
    <mat-form-field>
       <mat-label>Suche</mat-label>
       <input matInput type="text" [(ngModel)]="findText" (ngModelChange)="updateParams()" (keydown.esc)="clearFindText()">
          <button mat-button *ngIf="findText" matSuffix mat-icon-button aria-label="Clear" (click)="clearFindText()">
             <mat-icon>close</mat-icon>
          </button>
    </mat-form-field>
    <button *ngIf="!current_page || !manuscript_unity" mat-icon-button disabled="true"><mat-icon>chevron_right</mat-icon></button>
    <button *ngIf="current_page && manuscript_unity" mat-icon-button [title]="getPageTitle(current_page.next, manuscript_unity.numberOfPages)" 
       (click)="setCurrentIri(current_page.next.id)" [disabled]="updating || !current_page.next">
       <mat-icon>chevron_right</mat-icon>
    </button>
    <button *ngIf="!current_page || !manuscript_unity" mat-icon-button disabled="true"><mat-icon>last_page</mat-icon></button>
    <button *ngIf="manuscript_unity && current_page" 
      mat-icon-button [title]="getPageTitle(manuscript_unity.lastPage)" (click)="setCurrentIri(manuscript_unity.lastPage.id)" 
      [disabled]="updating || manuscript_unity.lastPage.id == current_page.id">
       <mat-icon>last_page</mat-icon>
    </button>
 </div>