diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 42e6976..32aa376 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,131 +1,132 @@
 import { AppComponent } from './app.component';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CdkTableModule } from '@angular/cdk/table';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { NgModule } from '@angular/core';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatCardModule} from '@angular/material/card';
 import { MatDialogModule, MatToolbarModule, MatButtonModule} from '@angular/material';
 import { MatExpansionModule } from '@angular/material/expansion';
 import {MatIconModule} from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import {MatMenuModule} from '@angular/material/menu';
 import { MatPaginatorModule, MatSortModule, MatSidenavModule, MatCheckboxModule, MatRadioModule } from '@angular/material';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatTooltipModule} from '@angular/material';
 
 import { DataListViewComponent } from './data-list-view/data-list-view.component';
 import { DataListViewTableComponent, HighlightPipe } from './data-list-view/data-list-view-table/data-list-view-table.component';
 import { DialogComponent } from './dialog-component/dialog.component';
 import { InfoBoxComponent } from './info-box-component/info-box.component';
 import { TextFieldComponent} from './textfield-component/textfield.component';
 import { WordPositionDirective } from './textfield-component/word-position.directive';
 import { TextfieldOptionsComponentComponent } from './textfield-options-component/textfield-options-component.component';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { RdfDataBrowserComponentComponent } from './rdf-data-component/rdf-data-browser-component/rdf-data-browser-component.component';
 import { QueryService } from './services/query.service';
 import {AnnotationService, TextStyleService} from './services/annotation.service';
 import { DisplayedCollumnsService } from './data-list-view/data-list-view-services/table-data.service';
 import {DataListViewSettings} from './data-list-view/data-list-view-settings/data-list-view-settings.service';
 import { MarkupTextComponentComponent } from './markup-text-component/markup-text-component.component';
 import { BergwerkeComponent } from './bergwerke/bergwerke.component';
 import { SubmenuComponentComponent } from './markup-text-component/submenu-component/submenu-component.component';
 import { MarkupTextButtonsComponentComponent } from './markup-text-component/markup-text-buttons-component/markup-text-buttons-component.component';
 import { GenericControlsComponent } from './generic-control-elements-component/generic-control-elements-component.component';
 import { MarkupHyperlinkComponentComponent } from './markup-text-component/markup-hyperlink-component/markup-hyperlink-component.component';
 import { MarkupTextIconComponent } from './markup-text-component/markup-text-icon-component/markup-text-icon.component';
 import { CustomizableSearchComponentComponent } from './rdf-data-component/customizable-search-component/customizable-search-component.component';
 import { SelectComponentComponent } from './generic-control-elements-component/select-component/select-component.component';
 import { RadioComponentComponent } from './generic-control-elements-component/radio-component/radio-component.component';
 import { CheckboxComponentComponent } from './generic-control-elements-component/checkbox-component/checkbox-component.component';
 import {GenericControlElementsService} from './generic-control-elements-component/generic-control-elements-service.service';
 import {routing} from './app.routing';
 import {HomeComponent} from './home.component';
 import { ManuscriptViewComponentComponent } from './manuscript-view-component/manuscript-view-component.component';
 import { ContentViewTabComponentComponent } from './content-view-tab-component/content-view-tab-component.component';
 import { RhizomeViewComponentComponent } from './rhizome-view-component/rhizome-view-component.component';
 import { MainMenuComponentComponent } from './main-menu-component/main-menu-component.component';
 import { PageViewComponentComponent } from './page-view-component/page-view-component.component';
 import { RdfDataComponentComponent } from './rdf-data-component/rdf-data-component.component';
 import { PageMarginComponentComponent } from './page-view-component/page-margin-component/page-margin-component.component';
 import { RdfEditorComponentComponent } from './rdf-data-component/rdf-editor-component/rdf-editor-component.component';
 import { EndpointsComponentComponent } from './rdf-data-component/endpoints-component/endpoints-component.component';
 import { NavigationListComponentComponent } from './navigation-list-component/navigation-list-component.component';
+import {NavigationServiceService} from './services/navigation-service.service';
 
 
 @NgModule({
   declarations: [
      AppComponent,
      HomeComponent,
      TextFieldComponent,
      WordPositionDirective,
      InfoBoxComponent,
      TextfieldOptionsComponentComponent,
      DataListViewComponent,
      DataListViewTableComponent,
      DialogComponent,
      HighlightPipe,
      RdfDataBrowserComponentComponent,
      MarkupTextComponentComponent,
      BergwerkeComponent,
      SubmenuComponentComponent,
      MarkupTextButtonsComponentComponent,
      GenericControlsComponent,
      MarkupHyperlinkComponentComponent,
      MarkupTextIconComponent,
      CustomizableSearchComponentComponent,
      SelectComponentComponent,
      RadioComponentComponent,
      CheckboxComponentComponent,
      ManuscriptViewComponentComponent,
      ContentViewTabComponentComponent,
      RhizomeViewComponentComponent,
      MainMenuComponentComponent,
      PageViewComponentComponent,
      RdfDataComponentComponent,
      PageMarginComponentComponent,
      RdfEditorComponentComponent,
      EndpointsComponentComponent,
      NavigationListComponentComponent
   ],
   imports: [
     routing,
     BrowserModule,
     BrowserAnimationsModule,
     CdkTableModule,
     CommonModule,
     DragDropModule,
     HttpClientModule,
     MatButtonModule,
     MatButtonToggleModule,
     MatCardModule,
     MatCheckboxModule,
     MatDialogModule,
     MatExpansionModule,
     MatIconModule,
     MatInputModule,
     MatListModule,
     MatMenuModule,
     MatPaginatorModule,
     MatRadioModule,
     MatSelectModule,
     MatSidenavModule,
     MatSortModule,
     MatTableModule,
     MatTabsModule,
     MatToolbarModule,
     MatTooltipModule,
     FormsModule,
     ReactiveFormsModule
   ],
-  providers: [ QueryService, DisplayedCollumnsService, DataListViewSettings, TextStyleService, AnnotationService, GenericControlElementsService ],
+  providers: [ NavigationServiceService, QueryService, DisplayedCollumnsService, DataListViewSettings, TextStyleService, AnnotationService, GenericControlElementsService ],
   bootstrap: [AppComponent],
   entryComponents: [DialogComponent]
 })
 export class AppModule { }
diff --git a/src/app/content-view-tab-component/content-view-tab-component.component.ts b/src/app/content-view-tab-component/content-view-tab-component.component.ts
index fe3438d..37f848a 100644
--- a/src/app/content-view-tab-component/content-view-tab-component.component.ts
+++ b/src/app/content-view-tab-component/content-view-tab-component.component.ts
@@ -1,80 +1,88 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {Subscription} from "rxjs/index";
 import {TlnManuscript, TlnPage, TlnWord, TlnEntity, TlnQueryParams} from '../models/models';
 import {NavigationServiceService} from "../services/navigation-service.service";
 
 @Component({
   selector: 'app-content-view-tab-component',
   templateUrl: './content-view-tab-component.component.html',
-  styleUrls: ['./content-view-tab-component.component.scss']
+  styleUrls: ['./content-view-tab-component.component.scss'],
+  providers: [ NavigationServiceService ]
 })
 export class ContentViewTabComponentComponent implements OnInit, OnDestroy {
   // navigation tabs for the content view (manuscript view, page view, rhizome view)
   navTabLinks: any[];
   // navbar on th left for navigating
   navBarOpenState: boolean;
   navBarOpenMode = 'push'; // side || over || push
 
   queryParams: TlnQueryParams;
   queryParamSubscription: Subscription;
 
   constructor(private router: Router,
               private activatedRoute: ActivatedRoute,
               private naviService: NavigationServiceService) {
 
     // The links/tabs for routing the correct view-component
     this.navTabLinks = [
       {
         label: 'Manuskriptansicht',
         link: 'manuscript',
         index: 0
       }, {
         label: 'Seitenansicht',
         link: 'page',
         index: 1
       }, {
         label: 'Rhizome-Ansicht',
         link: 'rhizome',
         index: 2
       },
     ];
   }
 
   ngOnInit(): void {
-    // If url pasted or page refreshed --> resetting the chosen things according to the query params of the url;
+    // If url pasted or page refreshed --> resetting this.queryparams to the query params of the url;
+    // needed for active routing in the nav tabs.
     this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryparams: Params ) => {
       this.queryParams = new TlnQueryParams(queryparams.man,
         queryparams.page,
         queryparams.row,
         queryparams.word,
         queryparams.viewMode,
         queryparams.navBarOpenState,
         queryparams.navTreeIndex,
         queryparams.manuscriptGroup);
       }
     );
 
     // Create Navigation trees for the navBar from queryParams
-    if (this.activatedRoute.snapshot.queryParamMap.get('man')) {
+    if (this.activatedRoute.snapshot.queryParamMap.get('man') || this.activatedRoute.snapshot.queryParamMap.get('man')) {
       this.naviService.createNavTreesFromUrlParams(this.activatedRoute.snapshot.queryParams);
     } else { this.naviService.createNavTreesOnInit(); }
 
-    // Set the NavBarOpenstate to true if it is true in the url query param onInit.
-    if (this.activatedRoute.snapshot.queryParamMap.get('navBarOpenState') === 'true') { this.navBarOpenState = true; }
+    // Set the NavBarOpenstate to false if it is false in the url query param onInit. In every other case we toggle it open actively.
+    if (this.activatedRoute.snapshot.queryParamMap.get('navBarOpenState') === 'false') {
+      this.navBarOpenState = false; } else {
+      this.navBarOpenState = true;
+      this.updateNavBarOpenState(); }
   }
 
   toggleNavDrawer() {
-    // set it locally
     this.navBarOpenState = !this.navBarOpenState;
-    // set the route as well
-    const openStateString = this.navBarOpenState === null ? 'false' : (this.navBarOpenState ? 'true' : 'false');
-    this.naviService.setQueryParam('navBarOpenState', openStateString);
-    this.naviService.updateRoute();
+    this.updateNavBarOpenState();
+  }
+
+  updateNavBarOpenState() {
+    const openStateString = this.navBarOpenState === null ? 'true' : (this.navBarOpenState ? 'true' : 'false');
+    this.naviService.setQueryParamOnServiceLevel('navBarOpenState', openStateString);
+    this.naviService.updateRoute('updateNavBarOpenState()');
   }
 
   ngOnDestroy() {
-    // unsubscribe if component destroyed so there is no memory leak
+    // unsubscribe if component destroyed so there is no memory leak and no query params in url
     this.queryParamSubscription.unsubscribe();
   }
+
 }
diff --git a/src/app/models/models.ts b/src/app/models/models.ts
index 1395194..3858b93 100644
--- a/src/app/models/models.ts
+++ b/src/app/models/models.ts
@@ -1,220 +1,222 @@
 // class for Everything: extended by NavigationEntity, Manuscript, Page, Word with all common properties
 import {SafeUrl, ɵDomSanitizerImpl} from '@angular/platform-browser';
 
 export class TlnEntity {
   id: string; // Short id, iri in most cases
   iri: string; // iri
   type: string; // rdfs:type
   navIndex: number;
   label?: string;
 
   constructor(id: string, iri: string, type: string, navIndex: number, label?: string) {
     this.id = id;
     this.iri = iri;
     this.type = type;
     this.navIndex = navIndex;
     this.label = label;
   }
 }
 
 export  class TlnQueryParams {
   man: string;
   page: string;
   row: string;
   word: string;
   viewMode: string;
   navBarOpenState: boolean;
   navTreeIndex: number;
   manuscriptGroup: number;
 
   constructor(man: string, page: string, row: string, word: string, viewMode: string, navBarOpenState: boolean, navTreeIndex: number, manuscriptGoup  ) {
     this.man = man;
     this.page = page;
     this.row = row;
     this.word = word;
     this.viewMode = viewMode;
     this.navBarOpenState = navBarOpenState;
     this.navTreeIndex = navTreeIndex;
     this.manuscriptGroup = this.manuscriptGroup;
   }
 }
 
 // The navigation entries in each tree for each viewtab (TlnManuscript, TlnPage, PositionalEntity) used by navigation
 // TODO: add several idxes? Or choosing another order will reload all, hence there is only one idx
 //
 export class NavigationEntity {
   idx: number;
   tlnEntity: TlnEntity;
   thumb?: SafeUrl; // url of image (Thumbnail)
   img?: SafeUrl; // full image url
   svg?: SafeUrl; // svg url
 
   constructor(idx: number, tlnEntity: TlnEntity, thumb?: string, img?, svg?: SafeUrl ) {
     this.idx = idx;
     this.tlnEntity = tlnEntity;
     this.thumb = thumb;
     this.img = img;
     this.svg = svg;
   }
 }
 
 // subclass for TlnManuscript, TlnPage, Word with all common properties
 export class TlnPhysicalEntity {
   entity: TlnEntity;
   description?: string;
   image?: SafeUrl; // url of image (Thumbnail);
   svg?: SafeUrl;
 
   constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: SafeUrl) {
     this.entity = entity;
     this.description = description;
     this.image = image;
     this.svg = svg;
   }
 }
 
 // the manuscript class
 export class TlnManuscript extends TlnPhysicalEntity {
   manuscriptSpec?: string;
 
   constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: Svg, manuscriptSpec?: string ) {
     super( entity, description, image, svg);
     this.manuscriptSpec = manuscriptSpec;
   }
 }
 
 // the TlnPage class
 export class TlnPage extends TlnPhysicalEntity {
   pageSpec?: string;
 
   constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: SafeUrl, pageSpec?: string ) {
     super(  entity, description, image, svg);
     this.pageSpec = pageSpec;
   }
 }
 
 export class TlnRow extends TlnPhysicalEntity {
   rowSpec?: PositionalEntity;
 
   constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: Svg, rowSpec?: PositionalEntity ) {
     super(  entity, description, image, svg);
     this.rowSpec = rowSpec;
   }
 }
 
 // the TlnWord class
 export class TlnWord extends TlnPhysicalEntity {
   wordSpec?: PositionalEntity;
 
   constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: SafeUrl, wordSpec?: PositionalEntity ) {
     super(  entity, description, image, svg);
     this.wordSpec = wordSpec;
   }
 }
 
 
 export class Annotation {
   id: string;
   text: string;
   styles: Array<string>;
 }
 
 export class Svg {
   id: string;
   svgUrl: string;
   svg?: SafeUrl;
 
   constructor(id, svgUrl, svg?) {
     this.id = id;
     this.svgUrl = svgUrl;
     this.svg = svg;
   }
 }
 
 // Only relevant if we create an svg ourselves?
 export interface PositionalEntity { // used for word rectangles as well as for line numbering
   id: string;
   text: string;
   left: number;
   top: number;
   width: number;
   height: number;
   row?: number;
   iri?: string; // TODO, change this. will be the id later when change data source to rdf ...
 }
 
 export class NavTreeIndex {
   idx: number;
   isActive: boolean;
   label: string;
   treeClass: string;
 
   constructor( idx: number, isActive: boolean, label: string, treeClass: string ) {
     this.idx = idx;
     this.isActive = isActive;
     this.label = label;
     this.treeClass = treeClass;
   }
 }
 
 export class RVPageView { // Object for "double page" view
   recto: SafeUrl;
   verso: SafeUrl;
 
   constructor(recto: SafeUrl, verso: SafeUrl) {
     this.recto = recto;
     this.verso = verso;
   }
 }
 
 export class NavTree { // a manuscript nav tree
   id: number;
   label: string;
-  entries: Array<NavigationEntity>;
+  entries: NavigationEntity[];
   description?: string;
 
-  constructor(id, label, entries, description? ) {
+  constructor(id: number, label: string, entries: NavigationEntity[], description?: string ) {
     this.id = id;
     this.label = label;
     this.entries = entries;
     this.description = description;
   }
 }
 
 export class ManuscriptSelectionDef {
   id: number;
   label: string;
   description: string;
 
   constructor( id: number, label: string, description: string) {
     this.id = id;
     this.description = description;
     this.label = label;
   }
 }
 
-export class ManuscriptDef extends ManuscriptSelectionDef {
+export class ManuscriptTreeDef extends ManuscriptSelectionDef {
   apiDef: ApiDef;
 
   constructor( id: number, label: string, description: string, apiDef: ApiDef) {
     super( id, label, description );
     this.id = id;
     this.description = description;
     this.label = label;
     this.apiDef = apiDef;
   }
 }
 
 export class ApiDef {
   id: number;
   description: string;
   baseApi?: string;
   query?: string;
+  posFilterIds?: string[]; // positive Filter ids: only these id's should be loaded into manuscript nav tree
 
-  constructor(id: number, description: string, baseApi?: string, query?: string) {
+  constructor(id: number, description: string, baseApi?: string, query?: string, posFilterIds?: string[]) {
     this.id = id;
     this.description = description;
     this.baseApi = baseApi;
     this.query = query;
+    this.posFilterIds = posFilterIds;
   }
 }
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 9b93c49..f8bd0e7 100644
--- a/src/app/navigation-list-component/navigation-list-component.component.html
+++ b/src/app/navigation-list-component/navigation-list-component.component.html
@@ -1,40 +1,39 @@
 <mat-card class="fixed-nav-header"><mat-toolbar>Navigation</mat-toolbar>
   <div *ngIf="navTreeIndex && navTreeIndex[0].isActive" class="man-selection">
     <mat-form-field appearance="fill">
       <mat-label>Manuskriptauswahl</mat-label>
-      <mat-select [(ngModel)] = "selectedManuscriptGroup" (selectionChange)="changeManuscriptNavTree(selectedManuscriptGroup)">
-        <mat-option *ngFor="let manSel of manuscriptSelections" [value] ="manSel.id">{{manSel.label}}</mat-option>
+      <mat-select [(ngModel)] = "selectedManuscriptGroupId" (selectionChange)="changeManuscriptNavTree(selectedManuscriptGroupId)">
+        <mat-option *ngFor="let manSel of manuscriptSelections" [value] ="manSel.id" matTooltip= {{manSel.description}}>{{manSel.label}}</mat-option>
       </mat-select>
     </mat-form-field>
   </div>
-  <div>{{selectedManuscriptGroup | json}}</div>
   <mat-card *ngIf="navTreeIndex">
     <nav mat-tab-nav-bar>
       <a mat-tab-link
          *ngFor="let tree of navTreeIndex"
          [active]="tree.isActive"
          #tabFocus
          (click)="changeMainNavTree(tree.idx)">
         <h4 [ngStyle]="{'color': tree.isActive ? 'accent' : 'primary' }">{{tree.label}}</h4>
       </a>
     </nav>
     <div *ngIf="selectedManId"><h3>Manuskript {{selectedManId}}</h3></div>
   </mat-card>
 </mat-card>
 <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>
         <div>
           <h4 matLine>{{item.tlnEntity.label}}</h4>
         </div>
         <img class="thumbnail" *ngIf="item.thumb" [src]="item.thumb"/>
         <mat-icon *ngIf="!item.thumb" matListIcon >description</mat-icon>
         <mat-divider></mat-divider>
       </div>
     </mat-list-item>
   </mat-nav-list>
 </div>
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 408994d..0a77c14 100644
--- a/src/app/navigation-list-component/navigation-list-component.component.ts
+++ b/src/app/navigation-list-component/navigation-list-component.component.ts
@@ -1,115 +1,124 @@
 import {AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {NavigationServiceService} from '../services/navigation-service.service';
 import {
   ManuscriptSelectionDef, NavigationEntity, NavTree, NavTreeIndex, TlnEntity, TlnManuscript, TlnPage, TlnQueryParams,
   TlnWord
 } from '../models/models';
 import {Subscription} from 'rxjs/index';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 @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 {
 
   @ViewChildren('tabFocus') focussedElements: QueryList<ElementRef>;
 
   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.
   navTreeIndex = []; // The navTreeIndex available for the nav bar for switchich between navtrees
-  manuscriptSelections: Array<ManuscriptSelectionDef>;
-  selectedManuscriptGroup: number;
-
+  manuscriptSelections: ManuscriptSelectionDef[];
+  // The active manuscriptSelection/ManuscriptGroup; changed by service if onItit from query params or by the user/template
+  selectedManuscriptGroupId: number;
+  selectedManuscriptGroupSub: Subscription; // subscribe to the selected group
   // 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
 
   constructor( private naviService: NavigationServiceService ) {
     // if the displayed navTree changes through navigation.
     this.navTreeSubscription = this.naviService.navTreeIndexChange.subscribe(trees => {
       this.navTreeIndex = trees;
        } );
   }
 
   ngOnInit() {
-
+    // FOREIGN DATA TO GET FROM SERVICE
     this.manuscriptSelections = this.naviService.getManuscriptSelections();
-
+    // subscribe to the navTreeData which is exchanged and manipulated by the service
     this.navTreeDataSub = this.naviService.activeTreeDataChange.subscribe(treeData => {
+      // console.log('new navTreeData in nav list component');
       this.navTreeData = treeData;
       this.setFocusOnActiveTab();
       this.tryToScroll();
     }
       );
-    // Listening to changes and set the selected things accordingly.
+
+    this.selectedManuscriptGroupSub = this.naviService.manuscriptTreeSelectionChange.subscribe(activeTree => {
+      this.selectedManuscriptGroupId = activeTree.id;
+    } );
+
+    // Listening to changes and set the selected things accordingly. NEEDED FOR Highlighting only
     this.selectedManuscriptSub = this.naviService.selectedManuscriptChange.subscribe(m => {
       this.selectedManId = m.entity.id;
     });
 
     this.selectedPageSub = this.naviService.selectedPageChange.subscribe(p => {
       this.selectedPageId = p.entity.id;
     });
   }
 
   tryToScroll() {
     // TODO: Tooo slow: tree is not yet active, so wrong ID is passed
     // scroll into view of the selected item within the active tree
     if (this.navTreeIndex[this.navTreeIndex.findIndex((tree) => tree.isActive)].idx === 0 ) {
       this.scrollOnToSelectedItem(this.selectedManId); } else {this.scrollOnToSelectedItem(this.selectedPageId); }
   }
 
   setFocusOnActiveTab() {
     const activeTab = (element => element.isActive === true);
     const activeTabIndex = this.navTreeIndex.findIndex(activeTab);
     if ( this.focussedElements ) {
       this.focussedElements.forEach((elem, index) => {
         if ( index === activeTabIndex ) {
           elem.nativeElement.focus();
         }
       });
     }
   }
 
   onSelectNavItem(item: NavigationEntity) {
     this.naviService.onSelectedItem(item);
     this.scrollOnToSelectedItem(item.tlnEntity.id);
   }
 
   // For scrolling to the selected item (manuscript, page) into view
   scrollOnToSelectedItem(itemId: string) {
     // console.log('try to scroll to', itemId);
     const itemToScrollTo = document.getElementById(itemId);
     if ( itemToScrollTo ) { itemToScrollTo.scrollIntoView({ behavior: 'smooth' });
     }
   }
 
   // switches tabs in navtab ov navigation bar
   changeMainNavTree(idx) {
       // set treedata to new tab index
       this.naviService.setActiveTreeData(idx);
       // change also the tab itself.
       this.naviService.changeActiveTreeIndex(idx);
       this.setFocusOnActiveTab();
     }
 
   changeManuscriptNavTree(id: number) {
     console.log('new treeId = ', id);
+    this.naviService.setSelectedManuscriptTree(id);
   }
 
   isItemSelected(itemId) {
     let isSelected = false;
     if (this.selectedManId === itemId || this.selectedPageId === itemId) {
           isSelected = true; }
     return isSelected;
   }
 }
diff --git a/src/app/page-view-component/page-view-component.component.ts b/src/app/page-view-component/page-view-component.component.ts
index b12dc38..d1c5672 100644
--- a/src/app/page-view-component/page-view-component.component.ts
+++ b/src/app/page-view-component/page-view-component.component.ts
@@ -1,118 +1,118 @@
 import {Component, OnInit} from '@angular/core';
 import {PositionalEntity, Svg, TlnEntity, NavigationEntity, TlnPage, TlnWord, RVPageView, TlnQueryParams} from '../models/models';
 import {SvgService} from "../services/svg.service";
 import {PageViewService} from "../services/field-interaction.service";
 import {Subscription} from "rxjs/index";
 import {ActivatedRoute, Params, Router} from "@angular/router";
 import {NavigationServiceService} from "../services/navigation-service.service";
 import {DomSanitizer, SafeUrl} from '@angular/platform-browser';
 
 @Component({
   selector: 'app-page-view-component',
   templateUrl: './page-view-component.component.html',
   styleUrls: ['./page-view-component.component.scss']
 })
 export class PageViewComponentComponent implements OnInit {
   activePage: TlnPage;
   activePageChange: Subscription;
   // images
   selectedImage: SafeUrl; // the image selected in gallery, menue or so
   // svg
   selectedSvg: SafeUrl; // the svg to show
   selectedSvgRV: RVPageView; // "double page" view for recto and verso
   // settings for user to choose
   paging: string;
   alignment: string;
   fixSidebar: boolean;
   highlight: boolean;
 
   queryParamSubscription: Subscription;
   queryParams: TlnQueryParams;
 
   wordSubscription: Subscription;
   wordQueryParam: string;
   // NavBar/Infobox
   selectedWord: TlnWord;
   openState: boolean;
   defaultOpenState = false;
 
   constructor(private svgService: SvgService,
               private pageViewService: PageViewService,
               private router: Router,
               private activatedRoute: ActivatedRoute,
               private naviService: NavigationServiceService,
               private sanitizer: DomSanitizer ) { }
 
   ngOnInit() {
     // If url pasted or page refreshed --> resetting the chosen things according to the query params of the url;
     this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryparams: Params ) => {
         this.queryParams = new TlnQueryParams(queryparams.man,
           queryparams.page,
           queryparams.row,
           queryparams.word,
           queryparams.viewMode,
           queryparams.navBarOpenState,
           queryparams.navTreeIndex,
           queryparams.manuscriptGroup);
       }
     );
 
     this.activePageChange = this.naviService.selectedPageChange.subscribe( page => {
       this.activePage = page;
       this.selectedSvg = this.sanitizer.bypassSecurityTrustResourceUrl(page.svg); }
     );
 
     this.openState = this.defaultOpenState;
 
     // default settings oninit
     this.paging = 'double';
     this.alignment = 'horizontal';
     this.fixSidebar = false;
     this.highlight = true;
 
     this.wordSubscription = this.pageViewService.wordChange$.subscribe(
       word => {
         if (this.selectedWord) {
           if (this.selectedWord.wordSpec === word) {
             this.toggleDetailsDrawer();
           } else {
             this.selectedWord.wordSpec = word;
             this.selectedWord.entity = new TlnEntity(word.id, word.iri, 'TlnWord', 0, word.text);
             const wordNav = new NavigationEntity(0, this.selectedWord.entity);
             this.naviService.onSelectedItem(wordNav);
             this.naviService.setResourceOfInterest(word.id);
             if (!this.openState) {
               this.toggleDetailsDrawer();
             }
           }
         } else {
           const e = new TlnEntity(word.id, word.iri, 'TlnWord', 0, word.id);
           this.selectedWord = new TlnWord(e, word.text, this.selectedImage, this.selectedSvg, word);
         }
       });
 
   }
 
   private turnPage(direction: number) {
     this.naviService.turnPage(direction);
     // change chosen page
   }
 
 
   toggleDetailsDrawer() {
     this.openState = !this.openState;
   }
 
   toggleHighlight() {
     this.highlight = !this.highlight;
   }
 
   toggleSidebarFixation() {
     this.fixSidebar = !this.fixSidebar;
   }
 
   setViewMode(view) {
-    this.naviService.setQueryParam('viewMode', view);
-    this.naviService.updateRoute();
+    this.naviService.setQueryParamOnServiceLevel('viewMode', view);
+    this.naviService.updateRoute('setViewMode()');
   }
 }
diff --git a/src/app/services/navigation-service.service.ts b/src/app/services/navigation-service.service.ts
index c6f954d..3fdeb39 100644
--- a/src/app/services/navigation-service.service.ts
+++ b/src/app/services/navigation-service.service.ts
@@ -1,494 +1,543 @@
 import {EventEmitter, Injectable, OnDestroy} from '@angular/core';
 import {
   TlnManuscript, NavigationEntity, TlnPage, TlnEntity, TlnQueryParams, NavTreeIndex, NavTree,
-  ManuscriptSelectionDef, ManuscriptDef
+  ManuscriptSelectionDef, ManuscriptTreeDef
 } from '../models/models';
 import {NietzscheSourceSeviceService} from "./nietzsche-source-sevice.service";
 import {Subscription} from "rxjs/index";
 import {ActivatedRoute, Params, Router, ChildActivationEnd} from '@angular/router';
 import {QueryService} from "./query.service";
 import {DomSanitizer} from '@angular/platform-browser';
 
-@Injectable({
-  providedIn: 'root'
-})
-export class NavigationServiceService implements OnDestroy {
+@Injectable()
+export class NavigationServiceService {
 
   queryParams: TlnQueryParams;
   // Listening to the queries entered actively (so also if page is refreshed or a url loaded)
   queryParamSubscription: Subscription;
 
   viewTabSubscription: Subscription;
   activeViewTab = '';
 
   navTreeIndex: Array<NavTreeIndex>;
   navTreeIndexChange = new EventEmitter<NavTreeIndex[]>(); // Weather only the index changes
 
   // the different manuscript navigation trees: Manuscripte archivalischer Ordnung, konzeptioneller Ordnung, ...
-  manuscriptSelections: ManuscriptDef[]; // the index of different manuscriptNavTrees available for selection
+  // Only set onInit once per default, once from url from reload or on change triggred by navlist component for routing accordingly
+  manuscriptSelections: ManuscriptTreeDef[]; // the manuscriptNavTrees available for selection
+  selectedManuscriptTree: ManuscriptTreeDef; // Definition of the active tree
+  manuscriptTreeSelectionChange = new EventEmitter<ManuscriptSelectionDef>();
   manuscriptNavTrees: NavTree[]; // the trees inteslf with data;
-  manuscriptNavTreesChange: EventEmitter<NavTree[]>;
+  manuscriptNavTreesChange = new  EventEmitter<NavTree[]>();
 
+  // The active === actually displayed tree data; can equal either this.activeManuscriptNavTreeDat or this.activePageNavTreeData
   activeTreeData: Array<NavigationEntity>;
   activeTreeDataChange = new EventEmitter<NavigationEntity[]>(); // if the active tree data changes
 
   // The actual selected things
   selectedManuscriptChange = new EventEmitter<TlnManuscript>();
   selectedPageChange = new EventEmitter<TlnPage>();
 
   resourceOfInterest: string; // simple iri for Databrowser and rdf stuff to come
   resourceOfInterestChange = new EventEmitter<string>();
 
-    // TODO: Change to new ManTreeModel
-  selectedManuscriptNavTree: Array<NavigationEntity> = [];
-  manuscriptNavTreeChange = new EventEmitter<Array<NavigationEntity>>(); // internally used
-  selectedPageNavTree: Array<NavigationEntity> = [];
-  pageNavTreeChange = new EventEmitter<Array<NavigationEntity>>(); // internally used
+    // TODO: Change to new ManTreeModel with this.manuscriptNavTrees[selectedManuscriptTree.id].entries
+  activeManuscriptNavTreeData: Array<NavigationEntity> = [];// ==> will be set to this.manuscriptNavTrees[selectedManuscriptTree.id].entries
+  activeManuscriptNavTreeChange = new EventEmitter<Array<NavigationEntity>>(); // internally used
+  activePageNavTreeData: Array<NavigationEntity> = [];
+  activePageNavTreeChange = new EventEmitter<Array<NavigationEntity>>(); // internally used
 
 
   selectedManuscript: TlnManuscript;
   selectedPage: TlnPage;
 
   constructor(private nietzscheSourceService: NietzscheSourceSeviceService,
               private router: Router,
               private sanitizer: DomSanitizer,
               private activatedRoute: ActivatedRoute,
               private queryService: QueryService ) {
 
     this.queryParams = new TlnQueryParams('', '', '', '', '', false, 0, 0);
     // Listening to the queries entered actively (so also if page is refreshed or a url loaded)
     this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryparams: Params ) => {
         // set new query params
         this.queryParams = new TlnQueryParams(queryparams.man,
                                               queryparams.page,
                                               queryparams.row,
                                               queryparams.word,
                                               queryparams.viewMode,
                                               queryparams.navBarOpenState,
                                               queryparams.navTreeIndex,
-                                              queryparams.manuscriptGroup); }
+                                              queryparams.manuscriptGroup);
+    console.log('this.queryParams', this.queryParams); }
     );
 
     // also listening to changes in viewtab and impose navTreeChange
     this.viewTabSubscription = this.router.events.subscribe(event => {
       if (event instanceof ChildActivationEnd) {
         const regex = new RegExp('\\W'); // for splitting at every non alphanumeric char
         const newTab = this.router.url.split(regex)[2];
-        if (this.activeViewTab !== newTab) {
+        if (newTab && this.activeViewTab !== newTab) {
           this.changeNavTreeOnViewChange(newTab);
         }
       }
     });
 
     // The overall tabIndex in navigation list
     this.navTreeIndex = [
       {
         idx: 0,
         isActive: true,
         label: 'Manuskripte',
         treeClass: 'Tln:Manuscript'
       }, {
         idx: 1,
         isActive: false,
         label: 'Seiten',
         treeClass: 'TlnPage'
       }/*, {
         idx: 2,
         isActive: false,
         label: 'Worte',
         treeClass: 'TlnWord'
       }*/
     ];
 
 
     this.manuscriptSelections = [
         {
           id: 0,
           apiDef: {
             id: 0,
-            description: 'all manuscripts in archival order',
+            description: 'our manuscripts in archival order',
             baseApi: '',
-            query: 'rdf_archival_order.ttl'
+            query: 'rdf_archival_order.ttl',
+            posFilterIds: ['N-VII-2', 'W-II-1']
           },
           label: 'Manuskripte in archivalischer Ordnung',
           description: 'Manuskripte in archivalischer Ordnung'
         },
         {
           id: 1,
           apiDef: {
             id: 1,
             description: 'all manuscripts for which we have a conceptional order',
             baseApi: '',
             query: 'rdf_conceptional_order.ttl'
           },
           label: 'Manuskripte in konzeptioneller Ordnung',
           description: 'Manuskripte in konzeptioneller Ordnung'
         },
         {
           id: 2,
           apiDef: {
             id: 2,
             description: 'all manuscripts from nietzscheSource',
             baseApi: '',
             query: ''
           },
           label: 'Noch unaufbereitete Manuskripte',
           description: 'Noch unaufbereitete Manuskrtipte'
         }
       ];
 
+    this.selectedManuscriptTree = this.manuscriptSelections[0]; // default on construct class
+
 
     this.manuscriptNavTrees = [
       {
         id: 0,
         label: 'Manuskripte in archivalischer Ordnung',
         entries: [], // NavTree[] from RDF data
         description: 'Manuskripte in archivalischer Ordnung'
       },
       {
         id: 1,
         label: 'Manuskripte in konzeptioneller Ordnung',
         entries: [], // NavTree[] from RDF
         description: 'Manuskripte in konzeptioneller Ordnung'
       },
       {
         id: 2,
-        label: 'noch unaufbereitete Manuskrtipte',
+        label: 'Manuskrtipte in Arbeit',
         entries: [], // NavTree[] from NietzscheSource without our data
-        description: 'Noch unaufbereitete Manuskrtipte'
+        description: 'Manuskrtipte in Arbeit'
       }
     ];
   }
 
 
   getManuscriptSelections() {
     const manGroups: ManuscriptSelectionDef[] = [];
     for (const manDef of this.manuscriptSelections) {
       const man = new ManuscriptSelectionDef(manDef.id, manDef.label, manDef.description );
       manGroups.push(man);
     }
     return manGroups; }
 
   /**
    * setActiveTreeData
    * Set the active tree data and emits it back to navigation list component,
    * param: idx:number : the index of the tree data to be displayed.
    */
   setActiveTreeData(idx: number) {
     switch (idx) {
       case 0: // Manuscript
-        this.activeTreeData = this.selectedManuscriptNavTree;
+        this.activeTreeData = this.activeManuscriptNavTreeData;
         break;
       case 1: // Page
-        this.activeTreeData = this.selectedPageNavTree;
+        this.activeTreeData = this.activePageNavTreeData;
         break;
     }
     this.activeTreeDataChange.emit(this.activeTreeData);
   }
 
   /**
    * updateRoute
    * routes to the active url with the updated query params of this class.
    */
-  updateRoute() {
+  updateRoute(itsme?) {
     const activeUrl = this.router.url.split('?')[0]; // seems workaroundish, but actually safe & secure; no other suitable solution at hand
+    console.log('updating route through', itsme, ' to ', this.queryParams);
     this.router.navigate([activeUrl], { queryParams: this.queryParams });
   }
 
   /**
    * changeActiveTreeIndex
    * Simply changing the active tree index for the navBar in
    * param: idx:number : the index of the tree which should be displayed.
    */
   changeActiveTreeIndex(idx: number) {
     // setting all to false first
     for (let i = 0; i < this.navTreeIndex.length; i++) {
       this.navTreeIndex[i].isActive = false; }
     this.navTreeIndex[idx].isActive = true;
     this.navTreeIndexChange.emit(this.navTreeIndex);
-    this.setQueryParam('navTreeIndex', idx.toString() );
+    this.setQueryParamOnServiceLevel('navTreeIndex', idx.toString() );
     // also routing according to the chosen thing
-    this.updateRoute();
+    this.updateRoute('changeActiveTreeIndex()');
   }
 
   /**
    * changeNavTreeOnViewChange: Changes the active Navigation tree
    * e.g. if a user changes to page view, the navigation bar should also switch to pages. If Manuscript view is clicked, the navigation bar
    * should show manuscript items
    * param: oldView: The view before view changes
    * param: chengedView: The newly active view
    *
    */
   changeNavTreeOnViewChange(changedView) {
     let treeIndex;
     if ( changedView === 'manuscript' ) {
       treeIndex = 0; } else { treeIndex = 1; }
     this.changeActiveTreeIndex(treeIndex);
     this.setActiveTreeData(treeIndex);
     this.activeViewTab = changedView;
   }
 
   /**
    * createNavTreesOnInit creates the first trees if no query params are available in the url:
-   * It ceates the manuscripNavTree and the selectedPageNavTree of the first manuscript per default.
+   * It ceates the manuscripNavTree and the activePageNavTreeData of the first manuscript per default.
    *
    */
   createNavTreesOnInit() {
-    this.getManuscriptsFromNietzscheSourceToNavTree();
-    // create the selectedPageNavTree with the first item of selectedManuscriptNavTree AFTER the first TlnManuscript is in the selectedManuscriptNavTree
-    this.manuscriptNavTreeChange.subscribe(tree => {
+    // selecting the first of the manuscript trees as the selected one
+    this.setSelectedManuscriptTree(0);
+    // Get all manuscript data for each manuscript tree
+    this.manuscriptSelections.forEach(treeDef => {
+      this.getTreeData(treeDef);
+    });
+    // create the activePageNavTreeData with the first item of the first activeManuscriptNavTreeData AFTER the
+    // first TlnManuscript is in the activeManuscriptNavTreeData
+    this.activeManuscriptNavTreeChange.subscribe(tree => {
       this.getPagesToNavTree(tree[0].tlnEntity.id);
       this.activeTreeData = tree;
       this.setActiveTreeData(0);
       this.changeActiveTreeIndex(0);
     });
     if (!this.selectedManuscript) { // if no manuscript is selected the first entry will be set as selected manuscript;
-      this.manuscriptNavTreeChange.subscribe(manTree => this.setSelectedManuscript(manTree[0].tlnEntity)); }
+      this.activeManuscriptNavTreeChange.subscribe(manTree => this.setSelectedManuscript(manTree[0].tlnEntity)); }
   }
 
   createManuscriptNavTreeFromRdf() {
     // TODO: implement this further for switch to RDF data only
     this.queryService.getQueryfromFilename('getConvolutes.rq').subscribe(qString => {
       this.queryService.getData(qString, 'SELECT').subscribe(data => {
         console.log('convolute data: ', data);
       });
     });
   }
 
+  getTreeData(treeDef: ManuscriptTreeDef) {
+    if ( treeDef.id === 0 || treeDef.id === 2 ) {
+      this.getManuscriptsFromNietzscheSource(treeDef.id, treeDef.apiDef.posFilterIds);
+    }
+  }
+
+
   /**
-   * getManuscriptsFromNietzscheSourceToNavTree
-   * Gets the convolutes/manuscripts from nietzscheSource and pushes them as NavigationEntitiy objects to the selectedManuscriptNavTree array
+   * getManuscriptsFromNietzscheSource
+   * Gets the convolutes/manuscripts from nietzscheSource and pushes
    */
-  getManuscriptsFromNietzscheSourceToNavTree() {
+  getManuscriptsFromNietzscheSource(treeIdx, posFilter?: string[] ) {
     this.nietzscheSourceService.getConvolutes().subscribe( res => {
         const manuscripts = res.result.children;
         manuscripts.forEach(( man, index ) => {
-          const entity = new TlnEntity(man.id, man.api_retrieve_content, 'man', index, man.id);
-          const manEntity = new NavigationEntity(index, entity, '');
-          this.selectedManuscriptNavTree.push(manEntity);
-          // if everything is pushed to the selectedManuscriptNavTree we emit the new tree to the navigation-list-component
+          if ( posFilter ) { // if a posFilter is passed only push the manuscripts defined in posfilter
+            if (posFilter.indexOf(man.id ) > -1) { this.pushToManuscriptNavTree(treeIdx, man, index); }
+          } else { this.pushToManuscriptNavTree(treeIdx, man, index); } // if no filter defined we push everything
+          // if everything is pushed to the activeManuscriptNavTreeData we emit the new tree to the navigation-list-component
           if (index + 1 === manuscripts.length) {
-            this.manuscriptNavTreeChange.emit(this.selectedManuscriptNavTree);
+            // and if it is also the selected Manuscript tree coming from queryParams, we set the active tree and emit it
+            if ( this.manuscriptNavTrees[treeIdx].id === this.selectedManuscriptTree.id) {
+              this.activeManuscriptNavTreeData = this.manuscriptNavTrees[treeIdx].entries;
+              this.activeManuscriptNavTreeChange.emit(this.activeManuscriptNavTreeData);
+            }
           }
         });
       }
     );
   }
 
+  pushToManuscriptNavTree(treeIdx, man, index) {
+    const entity = new TlnEntity(man.id, man.api_retrieve_content, 'man', index, man.id);
+    const manEntity = new NavigationEntity(index, entity, '');
+    this.manuscriptNavTrees[treeIdx].entries.push(manEntity);
+  }
+
   /**
    * createManuscriptNavTreeFromUrl
-   * Gets the convolutes/manuscripts from nietzscheSource and pushes them as NavigationEntitiy objects to the selectedManuscriptNavTree array
+   * Gets the convolutes/manuscripts from nietzscheSource and pushes them as NavigationEntitiy objects to the activeManuscriptNavTreeData array
    * param: params: the query parameters
    */
   createManuscriptNavTreeFromUrl(params) {
-    this.getManuscriptsFromNietzscheSourceToNavTree();
-    this.manuscriptNavTreeChange.subscribe(tree => {
+    this.manuscriptSelections.forEach(treeDef => {
+      this.getTreeData(treeDef);
+    });
+    this.activeManuscriptNavTreeChange.subscribe(tree => {
       tree.forEach(navEntity => {
-        if (navEntity.tlnEntity.id === params.man) {
+        if (navEntity.tlnEntity.id === params.man) { // set the manuscript entry as selected if its id equals the query param 'man'
           this.setSelectedManuscript(navEntity.tlnEntity);
-          // setting the active tree to the selectedManuscriptNavTree
+          // TODO: Refactor and test: DELETE the if, becasue it is set always to params.navTreeIndex!!!
+          // setting the active tree to the activeManuscriptNavTreeData
           if (params.navTreeIndex === '0') {
             this.setActiveTreeData(Number(params.navTreeIndex));
           }
         }
       });
     });
   }
 
   /**
    * getPagesToNavTree
-   * Gets the pages from a given manuscript to the selectedPageNavTree. Sets the selectedPage to the passed pageId. If no pageId is passed,
+   * Gets the pages from a given manuscript to the activePageNavTreeData. Sets the selectedPage to the passed pageId. If no pageId is passed,
    * the selectedPage will be set to the first page of the given manuscript.
    * param: manId: the manuscript id for ehich the pages are loaded
    * param: pageId: the page id which should be set as the selected page
    */
   getPagesToNavTree(manId: string, pageId?: string) {
-      this.selectedPageNavTree = [];
+      this.activePageNavTreeData = [];
       this.nietzscheSourceService.getPages(manId).subscribe( res => {
           const pages = res.result.children;
           let intIndex = 0; // internal index
           pages.forEach((p, index) => {
             // only if the last id part of the id can be converted to a number, it is a single page for which we have use.
             // (we only transcribe single pages for now
             if (isNaN( p.id.split(',').pop() ) === false) {
               const entity = new TlnEntity(p.id, p.api_retrieve_content, 'page', intIndex, p.id );
               const pageEntity = new NavigationEntity(intIndex, entity, '');
-              this.selectedPageNavTree.push(pageEntity);
+              this.activePageNavTreeData.push(pageEntity);
               if (!pageId && intIndex === 0) { // if there is no page param passed set the first entry as selected page
-                this.setSelectedPage(this.selectedPageNavTree[0]);
+                this.setSelectedPage(this.activePageNavTreeData[0]);
               }
               intIndex += 1;
               if (pageId && p.id === pageId ) { // if the p.id matches the pageId we set that page as selectedPage
                 this.setSelectedPage(pageEntity);
               }
             } // else {console.log('skipped double page', p.id); }
-            // if last page has been loaded to selectedPageNavTree we emit to navlist for display and add the additional data from other sources
+            // if last page has been loaded to activePageNavTreeData we emit to navlist for display and add the additional data from other sources
             if (index + 1 === pages.length) {
-              this.pageNavTreeChange.emit(this.selectedPageNavTree);
+              this.activePageNavTreeChange.emit(this.activePageNavTreeData);
               this.addDataToPageTree();
             }
           });
         });
     }
   /**
    * createNavTreesFromUrlParams
    * Loads the navigation view & trees accoring to the given query parameters.
    * param: params: the query parameters
    */
   createNavTreesFromUrlParams(params) {
     // change active
     this.changeActiveTreeIndex(Number(params.navTreeIndex));
+    this.setSelectedManuscriptTree(params.manuscriptGroup);
     this.createManuscriptNavTreeFromUrl(params);
     this.createPageNavTreeFromUrl(params);
   }
 
+  // simply setting the active manuscript tree, not emitting hence the navlist component has set it and already setit itself
+  // emitting only the new tree data
+  setSelectedManuscriptTree(id: number) {
+    console.log('SETTING selected ManGroup to', id);
+    this.selectedManuscriptTree = this.manuscriptSelections[id];
+    this.manuscriptTreeSelectionChange.emit(this.manuscriptSelections[id]);
+    this.activeManuscriptNavTreeData = this.manuscriptNavTrees[id].entries;
+    this.setQueryParamOnServiceLevel('manuscriptGroup', id.toString());
+    this.updateRoute('setSelectedManuscriptTree()');
+    // Todo: only if treedata is manuscript
+    this.setActiveTreeData(0);
+  }
+
   setSelectedManuscript(man: TlnEntity) {
     this.selectedManuscript = new TlnManuscript(man);
     this.selectedManuscriptChange.emit(this.selectedManuscript);
   }
 
   setSelectedPage(pageData: NavigationEntity ) {
     this.selectedPage = new TlnPage(pageData.tlnEntity, pageData.tlnEntity.label, pageData.img, pageData.svg);
     this.selectedPageChange.emit(this.selectedPage);
   }
 
   // sets the first page as selected if no selectedPage
   setSelectedPageIfNone() {
     if (!this.selectedPage) {
-      this.pageNavTreeChange.subscribe(pageTree => this.setSelectedPage(pageTree[0]));
-      this.pageNavTreeChange.unsubscribe();
+      this.activePageNavTreeChange.subscribe(pageTree => this.setSelectedPage(pageTree[0]));
+      this.activePageNavTreeChange.unsubscribe();
     }
   }
 
   turnPage(modifier: number) {
       const newPageIndex = this.selectedPage.entity.navIndex  + modifier;
-      this.setSelectedPage(this.selectedPageNavTree[newPageIndex]);
+      this.setSelectedPage(this.activePageNavTreeData[newPageIndex]);
   }
 
   /**
    * createPageNavTreeFromUrl: Loads all navigation navigation trees according to the given queryParams passed
    * param: params: the query parameters
    *
    */
   createPageNavTreeFromUrl(params) {
     this.getPagesToNavTree(params.man, params.page);
-    // if the active tree === '1' we have to set selectedPageNavTree as active tree
+    // if the active tree === '1' we have to set activePageNavTreeData as active tree
     if (params.navTreeIndex === '1' ) {
-      // update active tree data each time the selectedPageNavTree changes
-      this.pageNavTreeChange.subscribe(tree => this.setActiveTreeData(Number(params.navTreeIndex)));
+      // update active tree data each time the activePageNavTreeData changes
+      this.activePageNavTreeChange.subscribe(tree => this.setActiveTreeData(Number(params.navTreeIndex)));
     }
   }
 
   switchTreeIfPageView(activeTab: string) {
     if ( activeTab === 'page') {
       // console.log('switching tree hence acivetab ===', activeTab);
       this.setActiveTreeData(1);
       this.changeActiveTreeIndex(1);
       this.setSelectedPageIfNone();
     }
   }
 
   onSelectedItem(item: NavigationEntity) {
     console.log('clicked item: ', item);
-    const activeTab = this.activatedRoute.snapshot['_urlSegment'].children.primary.segments[1].path;
+    console.log(this.activatedRoute.snapshot);
+    // if (this.activatedRoute.snapshot.queryParamMap.get('navTreeIndex') === '0') { };
+    //const activeTab = this.activatedRoute.snapshot['_urlSegment'].children.primary.segments[1].path;
     switch (item.tlnEntity.type) {
       case 'man': {
         // set the new url with the chose man parameter
         this.getPagesToNavTree(item.tlnEntity.id);
         // If the active tab is the page view we switch automatically to page tree in navigation
-        this.switchTreeIfPageView(activeTab);
+        // this.switchTreeIfPageView(activeTab);
         this.setSelectedManuscript(item.tlnEntity);
-        this.setQueryParam('man', this.selectedManuscript.entity.id );
+        this.setQueryParamOnServiceLevel('man', this.selectedManuscript.entity.id );
         // also routing according to the chosen thing
         break;
       }
       case 'page': {
         this.setSelectedPage(item);
         this.selectedPageChange.emit(this.selectedPage);
-        this.setQueryParam('page', this.selectedPage.entity.id );
+        this.setQueryParamOnServiceLevel('page', this.selectedPage.entity.id );
         // also routing according to the chosen thing
         break;
       }
       default: {
         console.log('unknown item.tlnEntity.type: ', item.tlnEntity.type);
       }
     }
-    this.updateRoute();
+    this.updateRoute('onSelectedItem()');
   }
 
 
   setResourceOfInterest(res: string) {
     this.resourceOfInterest = res;
     this.resourceOfInterestChange.emit(res);
   }
 
-  // adds all file data such as thumbnails as well as imageUrls or svgUrls to the selectedPageNavTree
+  // adds all file data such as thumbnails as well as imageUrls or svgUrls to the activePageNavTreeData
   addDataToPageTree() {
-    for (let i = 0; i < this.selectedPageNavTree.length; i++) {
-      this.addFileDataToPageTree(this.selectedPageNavTree[i].tlnEntity.iri, i);
+    for (let i = 0; i < this.activePageNavTreeData.length; i++) {
+      this.addFileDataToPageTree(this.activePageNavTreeData[i].tlnEntity.iri, i);
     }
   }
 
   addFileDataToPageTree(pageIri, index) {
-    this.nietzscheSourceService.getFileUrl(pageIri).subscribe(data => {
+    this.nietzscheSourceService.getPageData(pageIri).subscribe(data => {
       this.getFileToEntity(data.result.metadata.download_version.thumb, index, 'thumb'); // get thumbnail
-      this.selectedPageNavTree[index].img = data.result.metadata.download_version.medium; // setting the image url
+      this.activePageNavTreeData[index].img = data.result.metadata.download_version.medium; // setting the image url
       // console.log(data.result.metadata);
       this.setSvgUrl(data.result.metadata.siglum, index); // setting the svg url
     });
   }
 
   private setSvgUrl(pageName: string, index) {
     const baseUrl = 'http://130.60.24.65:8081/exist/rest/db/ProjectData/Nietzsche/svg/';
     const pNamepre = pageName.split('-').join('_'); // exchanging '-' with underscore
     const pName = pNamepre.split(',')[0];
     const pNumber = pNamepre.split(',')[1];
     const pageZerofilled = ('000' + pNumber).slice(-3);
-    this.selectedPageNavTree[index].svg = baseUrl + pName + '_page' + pageZerofilled + '_web.svg';
+    this.activePageNavTreeData[index].svg = baseUrl + pName + '_page' + pageZerofilled + '_web.svg';
   }
 
   /**
    * getFileToEntity: Gets a file from a url and adds it to the desired property of a navigation entity
    * param: url: the query parameters
    * param: index: the index of the navTree entity to update
    * param: prop: The property which will be set, e.g. 'thumb' for navEntity.thumb
    */
   getFileToEntity(url: string, index: number, prop: string) {
     this.nietzscheSourceService.getFileFromUrl(url).subscribe(file => {
       const reader = new FileReader();
       reader.addEventListener('load', () => {
-        if ( this.selectedPageNavTree[index] ) {
-          this.selectedPageNavTree[index][prop] = reader.result;
+        if ( this.activePageNavTreeData[index] ) {
+          this.activePageNavTreeData[index][prop] = reader.result;
         }
       }, false);
       if (file) { reader.readAsDataURL(file); }
-      this.pageNavTreeChange.emit(this.selectedPageNavTree);
+      this.activePageNavTreeChange.emit(this.activePageNavTreeData);
     });
   }
 
   getFullImage(pageIri: string) {
-    this.nietzscheSourceService.getFileUrl(pageIri).subscribe(data => {
+    this.nietzscheSourceService.getPageData(pageIri).subscribe(data => {
       this.nietzscheSourceService.getFileFromUrl(data.result.metadata.download_version.medium).subscribe(img => {
         const reader = new FileReader();
         reader.addEventListener('load', () => {
           if ( this.selectedPage ) {
             this.selectedPage.image = reader.result;
           }
         }, false);
         if (img) { reader.readAsDataURL(img); }
         this.selectedPageChange.emit(this.selectedPage);
       });
     });
   }
 
   // sets queryParams: to the queryParam object
-  setQueryParam(type: string, value: string) {
+  setQueryParamOnServiceLevel(type: string, value: string) {
     this.queryParams[type] = value;
     // this.queryParamsChange.emit(this.queryParams);
   }
 
   ngOnDestroy() {
     // unsubscribe to subscriptions if component change so there is no memory leak
     this.queryParamSubscription.unsubscribe();
   }
 }
diff --git a/src/app/services/nietzsche-source-sevice.service.ts b/src/app/services/nietzsche-source-sevice.service.ts
index 3a39278..1ea4580 100644
--- a/src/app/services/nietzsche-source-sevice.service.ts
+++ b/src/app/services/nietzsche-source-sevice.service.ts
@@ -1,36 +1,35 @@
 import { Injectable } from '@angular/core';
 import {HttpClient} from "@angular/common/http";
 import {map} from "rxjs/internal/operators";
 import {Observable} from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class NietzscheSourceSeviceService {
 
   baseApi = 'http://www.nietzschesource.org//DFGAapi';
   bookBaseUrl = 'http://www.nietzschesource.org//DFGAapi//api//book//';
   pageBaseUrl = 'http://www.nietzschesource.org/DFGAapi/api/page/';
 
   // thumb = this.pageUrl.download_version.thumb;
   constructor( private http: HttpClient ) { }
 
   public getConvolutes() {
     return this.http.get<any>(this.baseApi);
   }
 
   public getPages(bookId) {
     const bookUrl = `${this.bookBaseUrl}${bookId}`; //  'http://www.nietzschesource.org//DFGAapi//api//book//N-VI-1';
     return this.http.get<any>(bookUrl);
   }
 
-  public getFileUrl(pageIri) {
+  public getPageData(pageIri) {
     return this.http.get<any>(pageIri); // 'http://www.nietzschesource.org/DFGAapi/api/page/N-VI-1,d1';
   }
 
-
   getFileFromUrl(url: string): Observable<Blob> {
     return this.http.get(url, { responseType: 'blob' });
   }
 }