diff --git a/web/src/app/shared/tree/tree.component.ts b/web/src/app/shared/tree/tree.component.ts
index 65f2c5d00..18529006f 100644
--- a/web/src/app/shared/tree/tree.component.ts
+++ b/web/src/app/shared/tree/tree.component.ts
@@ -1,4 +1,7 @@
-import { Component, OnInit, Input, Output, EventEmitter, ViewChild, AfterViewChecked, OnDestroy } from '@angular/core';
+import {
+  Component, OnInit, Input, Output, EventEmitter, ViewChild, AfterViewChecked,
+  OnDestroy, ElementRef, HostListener
+} from '@angular/core';
 import { TreeNodeModel } from 'app/models/tree-node';
 
 import { KEYS, ITreeOptions, TreeComponent, TreeNode } from 'angular-tree-component';
@@ -12,7 +15,7 @@ import { Subscription } from 'rxjs/Subscription';
 @Component({
   selector: 'taskana-tree',
   templateUrl: './tree.component.html',
-  styleUrls: ['./tree.component.scss']
+  styleUrls: ['./tree.component.scss'],
 })
 export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy {
 
@@ -47,7 +50,17 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
     levelPadding: 20
   }
 
-  constructor(private treeService: TreeService, private categoryService: ClassificationCategoriesService) { }
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event) {
+    if (this.checkValidElements(event) && this.tree.treeModel.getActiveNode()) {
+      this.unSelectActiveNode();
+    }
+  }
+
+  constructor(
+    private treeService: TreeService,
+    private categoryService: ClassificationCategoriesService,
+    private elementRef: ElementRef) { }
 
   ngOnInit() {
     this.removedNodeIdSubscription = this.treeService.getRemovedNodeId().subscribe(value => {
@@ -100,6 +113,7 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
 
   private unSelectActiveNode() {
     const activeNode = this.tree.treeModel.getActiveNode();
+    this.selectNodeId = undefined;
     activeNode.setIsActive(false);
     activeNode.blur();
   }
@@ -138,6 +152,14 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
     }
   }
 
+  private checkValidElements(event): boolean {
+    return (this.elementRef.nativeElement.contains(event.target) ||
+      this.elementRef.nativeElement === event.target) &&
+      (event.target.localName === 'tree-viewport' ||
+        event.target.localName === 'tree-viewport' ||
+        event.target.localName === 'taskana-tree')
+  }
+
   ngOnDestroy(): void {
     if (this.removedNodeIdSubscription) { this.removedNodeIdSubscription.unsubscribe() }
   }
diff --git a/web/src/assets/_site.scss b/web/src/assets/_site.scss
index 690f68414..59dca87c0 100644
--- a/web/src/assets/_site.scss
+++ b/web/src/assets/_site.scss
@@ -279,10 +279,6 @@ taskana-workbasket-information, taskana-workbasket-access-items, taskana-workbas
     }
 }
 
-tree-viewport {
-    height: calc(100vh - 165px);   
-}
-
 li.list-group-item.active:hover, {
     color: #fff;
     background-color: $green;
diff --git a/web/src/assets/_tree.scss b/web/src/assets/_tree.scss
index b7a2bb555..1c480efc5 100644
--- a/web/src/assets/_tree.scss
+++ b/web/src/assets/_tree.scss
@@ -1,3 +1,9 @@
+tree-viewport {
+    height: calc(100vh - 165px);
+    & > div {
+        display: inline-block;
+    }
+}
 
 tree-node-expander {