diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
index 68dfc972a0..3b99e9ce5d 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -20,10 +20,10 @@
                 <div class="mdl-grid">
                     <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
                         <div class="list-buttons">
-                            <activiti-start-task
-                                [appId]="appId"
-                                (onSuccess)="onStartTaskSuccess($event)">
-                            </activiti-start-task>
+                            <button md-raised-button data-automation-id="btn-start-task" (click)="navigateStartTask()">
+                                <md-icon>add</md-icon>
+                                <span>START TASK</span>
+                            </button>
                         </div>
                         <adf-accordion>
                             <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true" [headingIcon]="'assignment'">
@@ -38,7 +38,7 @@
                             </adf-accordion-group>
                         </adf-accordion>
                     </div>
-                    <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column">
+                    <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column" *ngIf="taskFilter && !isStartTaskMode()">
                         <activiti-tasklist
                             [appId]="taskFilter?.appId"
                             [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
@@ -62,7 +62,9 @@
                             -->
                         </activiti-tasklist>
                     </div>
-                    <div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp">
+                    <div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp" *ngIf="!isStartTaskMode()"
+                            [class.mdl-cell--7-col]="taskFilter && !isStartTaskMode()"
+                            [class.mdl-cell--10-col]="!taskFilter || isStartTaskMode()">
                         <activiti-task-details #activitidetails
                             [debugMode]="true"
                             [taskId]="currentTaskId"
@@ -76,6 +78,12 @@
                             [taskId]="currentTaskId">
                         </activiti-task-attachments>
                     </div>
+                    <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartTaskMode()">
+                         <activiti-start-task
+                                [appId]="appId"
+                                (onSuccess)="onStartTaskSuccess($event)">
+                        </activiti-start-task>
+                    </div>
                 </div>
             </div>
         </section>
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
index ec98fb0a34..103c02e9ba 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
@@ -47,6 +47,7 @@ import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custo
 declare var componentHandler;
 
 const currentProcessIdNew = '__NEW__';
+const currentTaskIdNew = '__NEW__';
 
 @Component({
     selector: 'activiti-demo',
@@ -235,6 +236,12 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
         this.currentProcessInstanceId = currentProcessIdNew;
     }
 
+    navigateStartTask(): void {
+        this.resetTaskFilters();
+        this.reloadTaskFilters();
+        this.currentTaskId = currentTaskIdNew;
+    }
+
     onStartProcessInstance(instance: ProcessInstance): void {
         this.currentProcessInstanceId = instance.id;
         this.activitiStartProcess.reset();
@@ -245,6 +252,10 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
         return this.currentProcessInstanceId === currentProcessIdNew;
     }
 
+    isStartTaskMode(): boolean {
+        return this.currentTaskId === currentTaskIdNew;
+    }
+
     processCancelled(data: any): void {
         this.currentProcessInstanceId = null;
         this.processList.reload();
@@ -318,10 +329,18 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
         this.processFilter = null;
     }
 
+    private resetTaskFilters(): void {
+        this.taskFilter = null;
+    }
+
     private reloadProcessFilters(): void {
         this.activitiprocessfilter.selectFilter(null);
     }
 
+    private reloadTaskFilters(): void {
+        this.activitifilter.selectFilter(null);
+    }
+
     onRowClick(event): void {
         console.log(event);
     }