diff --git a/web/src/app/workplace/tasklist/tasklist.component.html b/web/src/app/workplace/tasklist/tasklist.component.html
index 7a9173b69..0c8900b1a 100644
--- a/web/src/app/workplace/tasklist/tasklist.component.html
+++ b/web/src/app/workplace/tasklist/tasklist.component.html
@@ -4,22 +4,28 @@
                             (performFilter)="performFilter($event)">
   </taskana-tasklist-toolbar>
   <div *ngIf="!requestInProgress">
-    <ul #taskList id="task-list-container" class="list-group">
-      <li class="list-group-item" *ngIf="tasks === undefined || tasks.length === 0" type="text">
-        <b>This Workbasket has no Tasks</b>
-      </li>
-      <li class="list-group-item" *ngFor="let task of tasks" [class.active]="task.taskId == selectedId"
-          type="text" (click)="selectTask(task.taskId)">
-        <div class="row">
-          <dl class="col-xs-10">
-            <dt data-toggle="tooltip" title="{{task.name}}">{{task.name}}</dt>
-            <dd data-toggle="tooltip" title="{{task.owner}}">Owner: {{task.owner}} &nbsp;</dd>
-            <dd data-toggle="tooltip" title="{{task.priority}}">Priority: {{task.priority}} &nbsp;</dd>
-            <dd data-toggle="tooltip" title="{{task.state}}">State: {{task.state}} &nbsp;</dd>
-          </dl>
-        </div>
-      </li>
-    </ul>
+    <div *ngIf="(tasks && tasks.length > 0); else empty_list">
+      <ul #taskList id="task-list-container" class="list-group">
+        <li class="list-group-item"
+            *ngFor="let task of tasks" [class.active]="task.taskId == selectedId"
+            type="text" (click)="selectTask(task.taskId)">
+          <div class="row">
+            <dl class="col-xs-10">
+              <dt data-toggle="tooltip" title="{{task.name}}">{{task.name}}</dt>
+              <dd data-toggle="tooltip" title="{{task.owner}}">Owner: {{task.owner}} &nbsp;</dd>
+              <dd data-toggle="tooltip" title="{{task.priority}}">Priority: {{task.priority}} &nbsp;</dd>
+              <dd data-toggle="tooltip" title="{{task.state}}">State: {{task.state}} &nbsp;</dd>
+            </dl>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <ng-template #empty_list>
+      <div class="col-xs-12 container-no-items center-block">
+        <h3 class="grey">Select a workbasket</h3>
+        <svg-icon class="img-responsive empty-icon workbasket-icon" src="./assets/icons/wb-empty.svg"></svg-icon>
+      </div>
+    </ng-template>
   </div>
 </div>
 <taskana-code></taskana-code>
diff --git a/web/src/app/workplace/tasklist/tasklist.component.ts b/web/src/app/workplace/tasklist/tasklist.component.ts
index eb04a2587..1e9410d6f 100644
--- a/web/src/app/workplace/tasklist/tasklist.component.ts
+++ b/web/src/app/workplace/tasklist/tasklist.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Task} from 'app/workplace/models/task';
 import {ActivatedRoute, Router} from '@angular/router';
 import {TaskService} from 'app/workplace/services/task.service';
@@ -6,6 +6,8 @@ import {Subscription} from 'rxjs';
 import {SortingModel} from 'app/models/sorting';
 import {Workbasket} from 'app/models/workbasket';
 import {FilterModel} from 'app/models/filter';
+import {AlertService} from 'app/services/alert/alert.service';
+import {AlertModel, AlertType} from 'app/models/alert';
 
 @Component({
   selector: 'taskana-task-list',
@@ -35,7 +37,8 @@ export class TasklistComponent implements OnInit, OnDestroy {
 
   constructor(private router: Router,
               private route: ActivatedRoute,
-              private taskService: TaskService) {
+              private taskService: TaskService,
+              private alertService: AlertService) {
     this.taskChangeSubscription = this.taskService.taskChangedStream.subscribe(task => {
       for (let i = 0; i < this.tasks.length; i++) {
         if (this.tasks[i].taskId === task.taskId) {
@@ -68,7 +71,7 @@ export class TasklistComponent implements OnInit, OnDestroy {
 
   selectTask(taskId: string) {
     this.selectedId = taskId;
-    this.router.navigate([{ outlets: { detail: `taskdetail/${this.selectedId}` } }], { relativeTo: this.route });
+    this.router.navigate([{outlets: {detail: `taskdetail/${this.selectedId}`}}], {relativeTo: this.route});
   }
 
   loadBasketID(workbasket: Workbasket) {
@@ -93,7 +96,12 @@ export class TasklistComponent implements OnInit, OnDestroy {
       this.filterBy.filterParams.state)
       .subscribe(tasks => {
         this.requestInProgress = false;
-        this.tasks = tasks._embedded ? tasks._embedded.tasks : [];
+        if (tasks._embedded) {
+          this.tasks = tasks._embedded.tasks;
+        } else {
+          this.tasks = [];
+          this.alertService.triggerAlert(new AlertModel(AlertType.INFO, 'The selected Workbasket is empty!'));
+        }
       });
   }