diff --git a/ng2-components/ng2-activiti-processlist/index.ts b/ng2-components/ng2-activiti-processlist/index.ts
index afae068b63..5ac3c0408f 100644
--- a/ng2-components/ng2-activiti-processlist/index.ts
+++ b/ng2-components/ng2-activiti-processlist/index.ts
@@ -19,9 +19,11 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
 import {
     MdButtonModule,
     MdCardModule,
+    MdChipsModule,
     MdInputModule,
     MdProgressSpinnerModule,
-    MdSelectModule } from '@angular/material';
+    MdSelectModule
+} from '@angular/material';
 import { ActivitiFormModule } from 'ng2-activiti-form';
 import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
 import { CardViewUpdateService, CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
@@ -35,7 +37,6 @@ import { ProcessFiltersComponent } from './src/components/process-filters.compon
 import { ProcessInstanceDetailsComponent } from './src/components/process-instance-details.component';
 import { ProcessInstanceHeaderComponent } from './src/components/process-instance-header.component';
 import { ProcessInstanceTasksComponent } from './src/components/process-instance-tasks.component';
-import { ProcessInstanceVariablesComponent } from './src/components/process-instance-variables.component';
 import { ProcessInstanceListComponent } from './src/components/processlist.component';
 import { StartProcessInstanceComponent } from './src/components/start-process.component';
 export {ProcessAttachmentListComponent} from './src/components/process-attachment-list.component';
@@ -45,7 +46,6 @@ export {ProcessInstanceDetailsComponent} from './src/components/process-instance
 export {ProcessAuditDirective} from './src/components/process-audit.directive';
 export {ProcessInstanceHeaderComponent} from './src/components/process-instance-header.component';
 export {ProcessInstanceTasksComponent} from './src/components/process-instance-tasks.component';
-export {ProcessInstanceVariablesComponent} from './src/components/process-instance-variables.component';
 export {ProcessInstanceListComponent} from './src/components/processlist.component';
 export {StartProcessInstanceComponent} from './src/components/start-process.component';
 
@@ -69,7 +69,6 @@ import {ProcessFiltersComponent as ActivitiProcessFilters } from './src/componen
 import {ProcessInstanceDetailsComponent as ActivitiProcessInstanceDetails } from './src/components/process-instance-details.component';
 import {ProcessInstanceHeaderComponent as ActivitiProcessInstanceHeader } from './src/components/process-instance-header.component';
 import {ProcessInstanceTasksComponent as ActivitiProcessInstanceTasks } from './src/components/process-instance-tasks.component';
-import {ProcessInstanceVariablesComponent as ActivitiProcessInstanceVariables } from './src/components/process-instance-variables.component';
 import {ProcessInstanceListComponent as ActivitiProcessInstanceListComponent } from './src/components/processlist.component';
 import {StartProcessInstanceComponent as ActivitiStartProcessInstance } from './src/components/start-process.component';
 import {ProcessService as ActivitiProcessService } from './src/services/process.service';
@@ -80,7 +79,6 @@ export {ProcessFiltersComponent as ActivitiProcessFilters} from './src/component
 export {ProcessInstanceDetailsComponent as ActivitiProcessInstanceDetails} from './src/components/process-instance-details.component';
 export {ProcessInstanceHeaderComponent as ActivitiProcessInstanceHeader} from './src/components/process-instance-header.component';
 export {ProcessInstanceTasksComponent as ActivitiProcessInstanceTasks} from './src/components/process-instance-tasks.component';
-export {ProcessInstanceVariablesComponent as ActivitiProcessInstanceVariables} from './src/components/process-instance-variables.component';
 export {ProcessInstanceListComponent as ActivitiProcessInstanceListComponent} from './src/components/processlist.component';
 export {StartProcessInstanceComponent as ActivitiStartProcessInstance} from './src/components/start-process.component';
 export {ProcessService as ActivitiProcessService} from './src/services/process.service';
@@ -92,7 +90,6 @@ export const ACTIVITI_PROCESSLIST_DIRECTIVES: [any] = [
     ProcessAuditDirective,
     ProcessInstanceHeaderComponent,
     ProcessInstanceTasksComponent,
-    ProcessInstanceVariablesComponent,
     ProcessCommentsComponent,
     StartProcessInstanceComponent,
     ProcessAttachmentListComponent,
@@ -103,7 +100,6 @@ export const ACTIVITI_PROCESSLIST_DIRECTIVES: [any] = [
     ActivitiProcessFilters,
     ActivitiProcessInstanceHeader,
     ActivitiProcessInstanceTasks,
-    ActivitiProcessInstanceVariables,
     ActivitiProcessComments,
     ActivitiProcessInstanceDetails,
     ActivitiStartProcessInstance,
@@ -130,6 +126,7 @@ export const ACTIVITI_PROCESSLIST_PROVIDERS: [any] = [
         MdButtonModule,
         MdCardModule,
         MdInputModule,
+        MdChipsModule,
         MdSelectModule
     ],
     declarations: [
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-comments.component.css b/ng2-components/ng2-activiti-processlist/src/components/process-comments.component.css
index e852011d55..38f4528941 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/process-comments.component.css
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-comments.component.css
@@ -7,11 +7,6 @@
     vertical-align: top;
 }
 
-.activiti-label.mdl-badge[data-badge]:after {
-    right: -27px;
-    top: -2px;
-}
-
 .activiti-label + .icon {
     position: relative;
     top: -2px;
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.css b/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.css
index 364f257c09..62327ccef2 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.css
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.css
@@ -15,3 +15,7 @@
     transform: translate(0, -50%);
     width: 40%;
 }
+
+.adf-in-medias-res-button {
+    margin: 16px 0;
+}
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.html b/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.html
index 2dfb3e3d56..b15d0589fa 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.html
@@ -1,30 +1,37 @@
 <div *ngIf="!processInstanceDetails">{{ 'DETAILS.MESSAGES.NONE'|translate }}</div>
-<div *ngIf="processInstanceDetails">
-    <h2 class="mdl-card__title-text">{{ getProcessNameOrDescription('medium') }}</h2>
-    <adf-process-instance-header
-        [processInstance]="processInstanceDetails"
-        (showProcessDiagram)="onShowProcessDiagram($event)">
-    </adf-process-instance-header>
-    <div class="mdl-cell mdl-cell--4-col">
-        <button id="show-diagram-button" type="button" md-button md-raised-button [disabled]="isDiagramDisabled()" (click)="onShowProcessDiagram(processInstanceId)">{{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}</button>
-    </div>
-    <div class="mdl-card mdl-shadow--2dp activiti-process-container">
-        <div class="mdl-cell mdl-cell--12-col">
-            <adf-process-instance-tasks
-                [processInstanceDetails]="processInstanceDetails"
-                (taskClick)="onTaskClicked($event)">
-            </adf-process-instance-tasks>
+<md-card *ngIf="processInstanceDetails">
+    <md-card-header>
+        <md-card-title>{{ getProcessNameOrDescription('medium') }}</md-card-title>
+    </md-card-header>
+    <md-card-content>
+        <adf-process-instance-header
+            [processInstance]="processInstanceDetails"
+            (showProcessDiagram)="onShowProcessDiagram($event)">
+        </adf-process-instance-header>
+
+        <button class="adf-in-medias-res-button" md-button id="show-diagram-button" type="button" md-button md-raised-button [disabled]="isDiagramDisabled()" (click)="onShowProcessDiagram(processInstanceId)">{{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}</button>
+
+        <md-card>
+            <md-card-content>
+                <adf-process-instance-tasks
+                    [processInstanceDetails]="processInstanceDetails"
+                    (taskClick)="onTaskClicked($event)">
+                </adf-process-instance-tasks>
+            </md-card-content>
+        </md-card>
+
+        <div data-automation-id="header-status" *ngIf="isRunning()" class="adf-in-medias-res-button">
+            <button md-button type="button" (click)="cancelProcess()">{{ 'DETAILS.BUTTON.CANCEL' | translate }}</button>
         </div>
-    </div>
-    <div class="mdl-cell mdl-cell--4-col" data-automation-id="header-status" *ngIf="isRunning()">
-        <button type="button" (click)="cancelProcess()" class="mdl-button">{{ 'DETAILS.BUTTON.CANCEL' | translate }}</button>
-    </div>
-    <md-card>
-        <md-card-content>
-            <adf-process-instance-comments #activiticomments
-                [readOnly]="!isRunning()"
-                [processInstanceId]="processInstanceDetails.id">
-            </adf-process-instance-comments>
-        </md-card-content>
-    </md-card>
-</div>
+
+        <md-card>
+            <md-card-content>
+                <adf-process-instance-comments #activiticomments
+                    [readOnly]="!isRunning()"
+                    [processInstanceId]="processInstanceDetails.id">
+                </adf-process-instance-comments>
+            </md-card-content>
+        </md-card>
+
+    </md-card-content>
+</md-card>
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.spec.ts
index 6c4eb7e228..826d6c9c61 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.spec.ts
@@ -88,7 +88,7 @@ describe('ProcessInstanceDetailsComponent', () => {
         component.ngOnChanges({ 'processInstanceId': new SimpleChange(null, '123', true) });
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            let headerEl: DebugElement = fixture.debugElement.query(By.css('h2'));
+            let headerEl: DebugElement = fixture.debugElement.query(By.css('.mat-card-title '));
             expect(headerEl).not.toBeNull();
             expect(headerEl.nativeElement.innerText).toBe('Process 123');
         });
@@ -100,7 +100,7 @@ describe('ProcessInstanceDetailsComponent', () => {
         component.ngOnChanges({ 'processInstanceId': new SimpleChange(null, '123', true) });
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            let headerEl: DebugElement = fixture.debugElement.query(By.css('h2'));
+            let headerEl: DebugElement = fixture.debugElement.query(By.css('.mat-card-title '));
             expect(headerEl).not.toBeNull();
             expect(headerEl.nativeElement.innerText).toBe('My Process - Nov 10, 2016, 3:37:30 AM');
         });
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.css b/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.css
index 2335ce2dec..1ad9c6a407 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.css
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.css
@@ -7,9 +7,20 @@
     vertical-align: top;
 }
 
-.activiti-label.mdl-badge[data-badge]:after {
-    right: -27px;
-    top: -2px;
+.adf-process-badge {
+    pointer-events: none;
+    outline: none;
+}
+
+.adf-chip-label {
+    position: relative;
+    top: 5px;
+    margin-right: 8px;
+    font-weight: bold;
+}
+
+.menu-container {
+    margin-bottom: 32px;
 }
 
 .activiti-label + .icon {
@@ -32,9 +43,20 @@
     float: right;
 }
 
-.mdl-dialog__content.form__size {
-    height: 400px;
-    overflow-y: auto;
+.adf-start-process-dialog {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.adf-start-process-dialog-content {
+    flex-grow: 1;
+}
+
+.adf-start-process-dialog-actions {
+    display: flex;
+    justify-content: flex-end;
 }
 
 .no-results {
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.html b/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.html
index 9ac6db69d8..c17bd06282 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.html
@@ -1,26 +1,26 @@
 <div  *ngIf="showRefreshButton" class="process-tasks-refresh" >
-    <button (click)="onRefreshClicked()" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
-        <i class="material-icons">refresh</i>
+    <button md-icon-button (click)="onRefreshClicked()">
+        <md-icon class="md-24" aria-label="Refresh">refresh</md-icon>
     </button>
 </div>
 
 <!-- ACTIVE FORM -->
 
-<span class="activiti-label mdl-badge"
-      [attr.data-badge]="activeTasks?.length">{{ 'DETAILS.LABELS.TASKS_ACTIVE'|translate }}</span>
+<md-chip-list>
+    <span class="adf-chip-label">{{ 'DETAILS.LABELS.TASKS_ACTIVE'|translate }}</span>
+    <md-chip class="adf-process-badge" color="accent" selected="true">{{activeTasks?.length}}</md-chip>
+</md-chip-list>
 
 <div class="menu-container" *ngIf="activeTasks?.length > 0" data-automation-id="active-tasks">
-    <ul class='mdl-list'>
-        <li class="mdl-list__item mdl-list__item--two-line process-tasks__task-item" *ngFor="let task of activeTasks">
-            <span class="mdl-list__item-primary-content" (click)="clickTask($event, task)">
-                <i class="material-icons mdl-list__item-icon">assignment</i>
-                <span>{{task.name || 'Nameless task'}}</span>
-                <span class="mdl-list__item-sub-title">
+    <md-list>
+        <md-list-item class="process-tasks__task-item" *ngFor="let task of activeTasks" (click)="clickTask($event, task)">
+                <md-icon md-list-icon>assignment</md-icon>
+                <h3 md-line>{{task.name || 'Nameless task'}}</h3>
+                <span md-line>
                     {{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user: getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }}
                 </span>
-            </span>
-        </li>
-    </ul>
+        </md-list-item>
+    </md-list>
 </div>
 
 <!-- START FORM -->
@@ -34,52 +34,52 @@
 
     <!--IF START TASK COMPLETED -->
     <div class="menu-container">
-        <ul class='mdl-list'>
-            <li class="mdl-list__item mdl-list__item--two-line process-tasks__task-item">
-                <span class="mdl-list__item-primary-content" (click)="clickStartTask($event)">
-                    <i class="material-icons mdl-list__item-icon">assignment</i>
-                    <span>{{ 'DETAILS.LABELS.START_FORM'|translate }}</span>
-                    <span class="mdl-list__item-sub-title">
-                        {{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(processInstanceDetails.startedBy), created: getFormatDate(processInstanceDetails.started, 'mediumDate') } }}
-                    </span>
+        <md-list>
+            <md-list-item class="process-tasks__task-item" (click)="clickStartTask($event)">
+                <md-icon md-list-icon>assignment</md-icon>
+                <h3 md-line>{{ 'DETAILS.LABELS.START_FORM'|translate }}</h3>
+                <span md-line>
+                    {{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(processInstanceDetails.startedBy), created: getFormatDate(processInstanceDetails.started, 'mediumDate') } }}
                 </span>
-            </li>
-        </ul>
+            </md-list-item>
+        </md-list>
     </div>
 
 </div>
 
 <!-- COMPLETED FORM -->
-<span class="activiti-label mdl-badge"
-      [attr.data-badge]="completedTasks?.length">{{ 'DETAILS.LABELS.TASKS_COMPLETED'|translate }}</span>
+<md-chip-list>
+        <span class="adf-chip-label">{{ 'DETAILS.LABELS.TASKS_COMPLETED'|translate }}</span>
+        <md-chip class="adf-process-badge" color="accent" selected="true">{{completedTasks?.length}}</md-chip>
+</md-chip-list>
 
 <div class="menu-container" *ngIf="completedTasks?.length > 0" data-automation-id="completed-tasks">
-    <ul class='mdl-list'>
-        <li class="mdl-list__item mdl-list__item--two-line process-tasks__task-item" *ngFor="let task of completedTasks">
-            <span class="mdl-list__item-primary-content" (click)="clickTask($event, task)">
-                <i class="material-icons mdl-list__item-icon">assignment</i>
-                <span>{{task.name || 'Nameless task'}}</span>
-                <span class="mdl-list__item-sub-title">
-                    {{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }}
-                </span>
+    <md-list>
+        <md-list-item class="process-tasks__task-item" *ngFor="let task of completedTasks" (click)="clickTask($event, task)">
+            <md-icon md-list-icon>assignment</md-icon>
+            <h3 md-line>{{task.name || 'Nameless task'}}</h3>
+            <span md-line>
+                {{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }}
             </span>
-        </li>
-    </ul>
+        </md-list-item>
+    </md-list>
 </div>
 
 <div *ngIf="completedTasks?.length === 0" data-automation-id="completed-tasks-none" class="no-results">
     {{ 'DETAILS.TASKS.NO_COMPLETED' | translate }}
 </div>
 
-<dialog *ngIf="hasStartFormDefined()" class="mdl-dialog task-details-dialog" #startDialog>
-    <h4 class="mdl-dialog__title">{{ 'DETAILS.LABELS.START_FORM'|translate }}</h4>
-    <div class="mdl-dialog__content form__size">
-        <adf-start-form [processId]="processId" [processDefinitionId]="processInstanceDetails?.processDefinitionId"
-                             [showRefreshButton]="false" [readOnlyForm]="true"
-                             (formContentClicked)='onFormContentClick($event)'>
-        </adf-start-form>
+<ng-template *ngIf="hasStartFormDefined()" #startDialog>
+    <div id="adf-start-process-dialog" class="adf-start-process-dialog">
+        <h4 md-dialog-title>{{ 'DETAILS.LABELS.START_FORM'|translate }}</h4>
+        <div md-dialog-content class="adf-start-process-dialog-content">
+            <adf-start-form [processId]="processId" [processDefinitionId]="processInstanceDetails?.processDefinitionId"
+                                 [showRefreshButton]="false" [readOnlyForm]="true"
+                                 (formContentClicked)='onFormContentClick($event)'>
+            </adf-start-form>
+        </div>
+        <div md-dialog-actions class="adf-start-process-dialog-actions">
+            <button md-button type="button" (click)="closeSartDialog()">{{ 'DETAILS.TASKS.TASK_CLOSE' | translate }}</button>
+        </div>
     </div>
-    <div class="mdl-dialog__actions">
-        <button type="button" (click)="closeSartDialog()" class="mdl-button close">{{ 'DETAILS.TASKS.TASK_CLOSE' | translate }}</button>
-    </div>
-</dialog>
+</ng-template>
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.spec.ts
index a037454853..7913ebdda5 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.spec.ts
@@ -112,7 +112,7 @@ describe('ProcessInstanceTasksComponent', () => {
             component.ngOnChanges({ 'processInstanceDetails': change });
             let listEl = fixture.debugElement.query(By.css('[data-automation-id="active-tasks"]'));
             expect(listEl).not.toBeNull();
-            expect(listEl.queryAll(By.css('li')).length).toBe(1);
+            expect(listEl.queryAll(By.css('md-list-item')).length).toBe(1);
         });
     });
 
@@ -124,7 +124,7 @@ describe('ProcessInstanceTasksComponent', () => {
             fixture.detectChanges();
             let listEl = fixture.debugElement.query(By.css('[data-automation-id="completed-tasks"]'));
             expect(listEl).not.toBeNull();
-            expect(listEl.queryAll(By.css('li')).length).toBe(1);
+            expect(listEl.queryAll(By.css('md-list-item')).length).toBe(1);
         });
     });
 
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.ts b/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.ts
index f3fb1076d3..79fdf86bfa 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-tasks.component.ts
@@ -17,14 +17,13 @@
 
 import { DatePipe } from '@angular/common';
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { MdDialog } from '@angular/material';
 import { TaskDetailsEvent, TaskDetailsModel } from 'ng2-activiti-tasklist';
 import { LogService } from 'ng2-alfresco-core';
 import { Observable, Observer } from 'rxjs/Rx';
 import { ProcessInstance } from '../models/process-instance.model';
 import { ProcessService } from './../services/process.service';
 
-declare let dialogPolyfill: any;
-
 @Component({
     selector: 'adf-process-instance-tasks, activiti-process-instance-tasks',
     templateUrl: './process-instance-tasks.component.html',
@@ -53,8 +52,8 @@ export class ProcessInstanceTasksComponent implements OnInit, OnChanges {
     message: string;
     processId: string;
 
-    @ViewChild('dialog')
-    dialog: any;
+    // @ViewChild('dialog')
+    // dialog: any;
 
     @ViewChild('startDialog')
     startDialog: any;
@@ -66,7 +65,8 @@ export class ProcessInstanceTasksComponent implements OnInit, OnChanges {
     taskClick: EventEmitter<TaskDetailsEvent> = new EventEmitter<TaskDetailsEvent>();
 
     constructor(private activitiProcess: ProcessService,
-                private logService: LogService) {
+                private logService: LogService,
+                private dialog: MdDialog) {
         this.task$ = new Observable<TaskDetailsModel>(observer => this.taskObserver = observer).share();
         this.completedTask$ = new Observable<TaskDetailsModel>(observer => this.completedTaskObserver = observer).share();
     }
@@ -161,19 +161,11 @@ export class ProcessInstanceTasksComponent implements OnInit, OnChanges {
     }
 
     showStartDialog() {
-        if (!this.startDialog.nativeElement.showModal) {
-            dialogPolyfill.registerDialog(this.startDialog.nativeElement);
-        }
-
-        if (this.startDialog) {
-            this.startDialog.nativeElement.showModal();
-        }
+        this.dialog.open(this.startDialog, { height: '500px', width: '700px' });
     }
 
     closeSartDialog() {
-        if (this.startDialog) {
-            this.startDialog.nativeElement.close();
-        }
+        this.dialog.closeAll();
     }
 
     onRefreshClicked() {
@@ -181,8 +173,6 @@ export class ProcessInstanceTasksComponent implements OnInit, OnChanges {
     }
 
     onFormContentClick() {
-        if (this.startDialog) {
-            this.startDialog.nativeElement.close();
-        }
+        this.closeSartDialog();
     }
 }
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.css b/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.css
deleted file mode 100644
index 7f26774b98..0000000000
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.adf-variable-list-loading-margin {
-    margin-left: calc((100% - 100px) / 2);
-    margin-right: calc((100% - 100px) / 2);
-}
-
-.no-content-message {
-    font-family: Muli;
-    font-size: 16px;
-    font-weight: bold;
-    text-align: center;
-    opacity: 0.54;
-    color: #000;
-}
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.html b/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.html
deleted file mode 100644
index 7c5d045ff3..0000000000
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<div id="setVariableBtn" (click)="showAddDialog()" class="icon material-icons">add</div>
-<div class="mdl-tooltip" for="setVariableBtn">
-    {{ 'DETAILS.VARIABLES.BUTTON.ADD' |translate }}
-</div>
-
-
-<div>
-    <adf-datatable
-    [data]="data"
-    [actions]="true"
-    [loading]="isLoading"
-    (showRowActionsMenu)="onShowRowActionsMenu($event)"
-    (executeRowAction)="onExecuteRowAction($event)">
-        <loading-content-template>
-            <ng-template>
-                <!--Add your custom loading template here-->
-                <md-spinner
-                    class="adf-variable-list-loading-margin"
-                    [color]="'primary'"
-                    [mode]="'indeterminate'">
-                </md-spinner>
-            </ng-template>
-        </loading-content-template>
-        <no-content-template>
-            <!--Add your custom empty template here-->
-            <ng-template>
-                <div class="no-content-message">
-                    {{ 'DETAILS.VARIABLES.NONE' | translate }}
-                </div>
-            </ng-template>
-        </no-content-template>
-    </adf-datatable>
-</div>
-
-<dialog class="mdl-dialog add-dialog" #addDialog>
-    <h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.ADD_DIALOG.TITLE' |translate }}</h4>
-    <div class="mdl-dialog__content">
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <label class="mdl-textfield__label" for="addVariableName">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.NAME' |translate }}</label>
-            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="addVariableName" />
-        </div>
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <label class="mdl-textfield__label" for="addVariableValue">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.VALUE' |translate }}</label>
-            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableValue" id="addVariableValue" />
-        </div>
-    </div>
-    <div class="mdl-dialog__actions">
-        <button type="button" (click)="add()" class="mdl-button">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.SET' |translate }}</button>
-        <button type="button" (click)="closeAddDialog()" class="mdl-button close">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.CANCEL' |translate }}</button>
-    </div>
-</dialog>
-
-
-<dialog class="mdl-dialog edit-dialog" #editDialog>
-    <h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.EDIT_DIALOG.TITLE' |translate }}</h4>
-    <div class="mdl-dialog__content">
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <label class="mdl-textfield__label" for="editVariableName">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.NAME' |translate }}</label>
-            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="editVariableName" [readonly]="true" />
-        </div>
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <label class="mdl-textfield__label" for="editVariableValue">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.VALUE' |translate }}</label>
-            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableValue" id="editVariableValue" />
-        </div>
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <label class="mdl-textfield__label" for="editVariableScope">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.SCOPE' |translate }}</label>
-            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="editVariableScope" [readonly]="true" />
-        </div>
-    </div>
-    <div class="mdl-dialog__actions">
-        <button type="button" (click)="edit()" class="mdl-button">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.SET' |translate }}</button>
-        <button type="button" (click)="closeEditDialog()" class="mdl-button close">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.CANCEL' |translate }}</button>
-    </div>
-</dialog>
-
-
-<dialog class="mdl-dialog error-dialog" #errorDialog>
-    <h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.ERROR_DIALOG.TITLE' |translate }}</h4>
-    <div class="mdl-dialog__content">
-        <p>{{ 'DETAILS.VARIABLES.ERROR_DIALOG.DESCRIPTION' |translate }}</p>
-    </div>
-    <div class="mdl-dialog__actions">
-        <button type="button" (click)="closeErrorDialog()" class="mdl-button close">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.OK' |translate }}</button>
-    </div>
-</dialog>
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.spec.ts
deleted file mode 100644
index 82b5cd1a5b..0000000000
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.spec.ts
+++ /dev/null
@@ -1,352 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { DebugElement, SimpleChange } from '@angular/core';
-import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { MdProgressSpinnerModule } from '@angular/material';
-import { By } from '@angular/platform-browser';
-import { Observable } from 'rxjs/Rx';
-
-import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
-import { DataTableModule, ObjectDataRow, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
-
-import { TranslationMock } from './../assets/translation.service.mock';
-import { ProcessService } from './../services/process.service';
-import { ProcessInstanceVariablesComponent } from './process-instance-variables.component';
-
-describe('ProcessInstanceVariablesComponent', () => {
-
-    let componentHandler: any;
-    let service: ProcessService;
-    let component: ProcessInstanceVariablesComponent;
-    let fixture: ComponentFixture<ProcessInstanceVariablesComponent>;
-    let getVariablesSpy: jasmine.Spy;
-    let createOrUpdateProcessInstanceVariablesSpy: jasmine.Spy;
-    let deleteProcessInstanceVariableSpy: jasmine.Spy;
-
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                CoreModule.forRoot(),
-                DataTableModule.forRoot(),
-                MdProgressSpinnerModule
-            ],
-            declarations: [
-                ProcessInstanceVariablesComponent
-            ],
-            providers: [
-                { provide: AlfrescoTranslationService, useClass: TranslationMock },
-                ProcessService
-            ]
-        }).compileComponents();
-    }));
-
-    beforeEach(() => {
-
-        fixture = TestBed.createComponent(ProcessInstanceVariablesComponent);
-        component = fixture.componentInstance;
-        service = fixture.debugElement.injector.get(ProcessService);
-
-        getVariablesSpy = spyOn(service, 'getProcessInstanceVariables').and.returnValue(Observable.of([{
-            name: 'var1',
-            value: 'Test1'
-        }, {
-            name: 'var2',
-            value: 'Test2'
-        }, {
-            name: 'var3',
-            value: 'Test3'
-        }]));
-        createOrUpdateProcessInstanceVariablesSpy = spyOn(service, 'createOrUpdateProcessInstanceVariables').and.returnValue(Observable.of({id: 123, message: 'Test'}));
-        deleteProcessInstanceVariableSpy = spyOn(service, 'deleteProcessInstanceVariable').and.returnValue(Observable.of());
-
-        componentHandler = jasmine.createSpyObj('componentHandler', [
-            'upgradeAllRegistered',
-            'upgradeElement'
-        ]);
-        window['componentHandler'] = componentHandler;
-    });
-
-    it('should load variables when processInstanceId specified', () => {
-        component.processInstanceId = '123';
-        fixture.detectChanges();
-        expect(getVariablesSpy).toHaveBeenCalled();
-    });
-
-    it('should emit an error when an error occurs loading variables', () => {
-        let emitSpy = spyOn(component.error, 'emit');
-        getVariablesSpy.and.returnValue(Observable.throw({}));
-        component.processInstanceId = '123';
-        fixture.detectChanges();
-        expect(emitSpy).toHaveBeenCalled();
-    });
-
-    it('should not fetch variables when no processInstanceId is specified', () => {
-        fixture.detectChanges();
-        expect(getVariablesSpy).not.toHaveBeenCalled();
-    });
-
-    it('should use the default schemaColumn as default', () => {
-        fixture.detectChanges();
-        expect(component.data.getColumns()).toBeDefined();
-        expect(component.data.getColumns().length).toEqual(3);
-    });
-
-    it('should use the schemaColumn passed in input', () => {
-        component.data = new ObjectDataTableAdapter(
-            [],
-            [
-                {type: 'text', key: 'fake-id', title: 'Name'}
-            ]
-        );
-
-        fixture.detectChanges();
-        expect(component.data.getColumns()).toBeDefined();
-        expect(component.data.getColumns().length).toEqual(1);
-    });
-
-    it('should display list when the process has variables', fakeAsync(() => {
-        component.processInstanceId = '123';
-        fixture.detectChanges();
-        fixture.whenStable();
-        tick();
-        let datatable: DebugElement = fixture.debugElement.query(By.css('adf-datatable'));
-        expect(datatable).not.toBeNull();
-    }));
-
-    it('should display correct number of data table rows when the process has variables', fakeAsync(() => {
-        component.processInstanceId = '123';
-        fixture.detectChanges();
-        fixture.whenStable();
-        tick();
-        fixture.detectChanges();
-        expect(fixture.debugElement.queryAll(By.css('tbody tr')).length).toBe(3);
-    }));
-
-    describe('change detection', () => {
-
-        let change = new SimpleChange('123', '456', true);
-        let nullChange = new SimpleChange('123', null, true);
-
-        beforeEach(async(() => {
-            component.processInstanceId = '123';
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                getVariablesSpy.calls.reset();
-            });
-        }));
-
-        it('should fetch new variables when processInstanceId changed', () => {
-            component.ngOnChanges({ 'processInstanceId': change });
-            expect(getVariablesSpy).toHaveBeenCalledWith('456');
-        });
-
-        it('should NOT fetch new variables when empty changeset made', () => {
-            component.ngOnChanges({});
-            expect(getVariablesSpy).not.toHaveBeenCalled();
-        });
-
-        it('should NOT fetch new variables when processInstanceId changed to null', () => {
-            component.ngOnChanges({ 'processInstanceId': nullChange });
-            expect(getVariablesSpy).not.toHaveBeenCalled();
-        });
-    });
-
-    describe('Add variable', () => {
-
-        beforeEach(async(() => {
-            component.processInstanceId = '123';
-            fixture.detectChanges();
-            fixture.whenStable();
-        }));
-
-        it('should display a dialog to the user when the Add button clicked', () => {
-            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.add-dialog')).nativeElement;
-            let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
-            component.showAddDialog();
-            expect(showSpy).toHaveBeenCalled();
-        });
-
-        it('should call service to add a variable', () => {
-            component.showAddDialog();
-            component.variableName = 'Test var';
-            component.variableValue = 'Test 222';
-            component.add();
-            let serviceArgs = createOrUpdateProcessInstanceVariablesSpy.calls.mostRecent().args;
-            let sentProcessId = serviceArgs[0];
-            let sentProcesses = serviceArgs[1];
-            expect(serviceArgs.length).toBe(2);
-            expect(sentProcessId).toBe('123');
-            expect(sentProcesses.length).toBe(1);
-            expect(sentProcesses[0].name).toBe('Test var');
-            expect(sentProcesses[0].value).toBe('Test 222');
-            expect(sentProcesses[0].scope).toBe('global');
-        });
-
-        it('should emit an error when an error occurs adding the variable', () => {
-            let emitSpy = spyOn(component.error, 'emit');
-            createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Observable.throw({}));
-            component.showAddDialog();
-            component.variableName = 'Test var';
-            component.variableValue = 'Test 222';
-            component.add();
-            expect(emitSpy).toHaveBeenCalled();
-        });
-
-        it('should close add dialog when close button clicked', () => {
-            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.add-dialog')).nativeElement;
-            let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
-            component.showAddDialog();
-            component.closeAddDialog();
-            expect(closeSpy).toHaveBeenCalled();
-        });
-
-    });
-
-    describe('Edit variable', () => {
-
-        let fakeVariable = {
-            name: 'fakeVar',
-            value: 'my value 4',
-            scope: 'global'
-        };
-
-        beforeEach(async(() => {
-            component.processInstanceId = '123';
-            fixture.detectChanges();
-            fixture.whenStable();
-        }));
-
-        it('should display a dialog to the user when the Edit action clicked', () => {
-            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.edit-dialog')).nativeElement;
-            let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
-            component.onExecuteRowAction({
-                args: {
-                    row: new ObjectDataRow(fakeVariable),
-                    action: {
-                        id: 'edit'
-                    }
-                }
-            });
-            expect(showSpy).toHaveBeenCalled();
-        });
-
-        it('should call service to edit a variable', () => {
-            component.showEditDialog(new ObjectDataRow(fakeVariable));
-            component.variableValue = 'Test 222';
-            component.edit();
-            let serviceArgs = createOrUpdateProcessInstanceVariablesSpy.calls.mostRecent().args;
-            let sentProcessId = serviceArgs[0];
-            let sentProcesses = serviceArgs[1];
-            expect(serviceArgs.length).toBe(2);
-            expect(sentProcessId).toBe('123');
-            expect(sentProcesses.length).toBe(1);
-            expect(sentProcesses[0].name).toBe(fakeVariable.name);
-            expect(sentProcesses[0].value).toBe('Test 222');
-            expect(sentProcesses[0].scope).toBe(fakeVariable.scope);
-        });
-
-        it('should emit an error when an error occurs editing the variable', () => {
-            let emitSpy = spyOn(component.error, 'emit');
-            createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Observable.throw({}));
-            component.showEditDialog(new ObjectDataRow(fakeVariable));
-            component.variableName = 'Test var';
-            component.variableValue = 'Test 222';
-            component.edit();
-            expect(emitSpy).toHaveBeenCalled();
-        });
-
-        it('should close edit dialog when close button clicked', () => {
-            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.edit-dialog')).nativeElement;
-            let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
-            component.showEditDialog(new ObjectDataRow(fakeVariable));
-            component.closeEditDialog();
-            expect(closeSpy).toHaveBeenCalled();
-        });
-
-    });
-
-    describe('Delete variable', () => {
-
-        let fakeVariable = {
-            name: 'fakeVar',
-            value: 'my value 4',
-            scope: 'global'
-        };
-
-        let deleteAction = {
-            id: 'delete'
-        };
-
-        beforeEach(async(() => {
-            component.processInstanceId = '123';
-            fixture.detectChanges();
-            fixture.whenStable();
-        }));
-
-        it('should call service to delete the variable', () => {
-            component.variableValue = 'Test 222';
-            component.onExecuteRowAction({
-                args: {
-                    row: new ObjectDataRow(fakeVariable),
-                    action: deleteAction
-                }
-            });
-            let serviceArgs = deleteProcessInstanceVariableSpy.calls.mostRecent().args;
-            let sentProcessId = serviceArgs[0];
-            let sentVariableName = serviceArgs[1];
-            expect(serviceArgs.length).toBe(2);
-            expect(sentProcessId).toBe('123');
-            expect(sentVariableName).toBe(fakeVariable.name);
-        });
-
-        it('should emit an error when an error occurs deleting the variable', () => {
-            let emitSpy = spyOn(component.error, 'emit');
-            deleteProcessInstanceVariableSpy.and.returnValue(Observable.throw({}));
-            component.onExecuteRowAction({
-                args: {
-                    row: new ObjectDataRow(fakeVariable),
-                    action: deleteAction
-                }
-            });
-            expect(emitSpy).toHaveBeenCalled();
-        });
-
-        it('should display error dialog when an error is triggered', () => {
-            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.error-dialog')).nativeElement;
-            let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
-            deleteProcessInstanceVariableSpy.and.returnValue(Observable.throw({}));
-            component.onExecuteRowAction({
-                args: {
-                    row: new ObjectDataRow(fakeVariable),
-                    action: deleteAction
-                }
-            });
-            expect(showSpy).toHaveBeenCalled();
-        });
-
-        it('should close error dialog when close button clicked', () => {
-            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.error-dialog')).nativeElement;
-            let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
-            component.showErrorDialog();
-            component.closeErrorDialog();
-            expect(closeSpy).toHaveBeenCalled();
-        });
-
-    });
-
-});
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.ts b/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.ts
deleted file mode 100644
index 87df6dcd1a..0000000000
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.ts
+++ /dev/null
@@ -1,270 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Component, DebugElement, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
-
-import { DataCellEvent, DataTableAdapter, ObjectDataRow, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
-import { ProcessInstanceVariable } from './../models/process-instance-variable.model';
-import { ProcessService } from './../services/process.service';
-
-declare let dialogPolyfill: any;
-
-@Component({
-    selector: 'adf-process-instance-variables, activiti-process-instance-variables',
-    templateUrl: './process-instance-variables.component.html',
-    styleUrls: ['./process-instance-variables.component.css'],
-    providers: [ProcessService]
-})
-export class ProcessInstanceVariablesComponent implements OnInit, OnChanges {
-
-    @Input()
-    processInstanceId: string;
-
-    @Input()
-    data: DataTableAdapter;
-
-    @Output()
-    error: EventEmitter<any> = new EventEmitter<any>();
-
-    @ViewChild('addDialog')
-    addDialog: DebugElement;
-
-    @ViewChild('editDialog')
-    editDialog: DebugElement;
-
-    @ViewChild('errorDialog')
-    errorDialog: DebugElement;
-
-    private defaultSchemaColumn: any[] = [
-        {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
-        {type: 'text', key: 'value', title: 'Value', sortable: true},
-        {type: 'text', key: 'scope', title: 'Scope', sortable: true}
-    ];
-
-    variableName: string;
-    variableValue: string;
-    variableScope: string;
-
-    isLoading: boolean = true;
-
-    /**
-     * Constructor
-     * @param translate Translation service
-     * @param activitiProcess Process service
-     */
-    constructor(private activitiProcess: ProcessService) {
-    }
-
-    ngOnInit() {
-        if (!this.data) {
-            this.data = this.initDefaultSchemaColumns();
-        }
-        if (this.processInstanceId) {
-            this.getProcessInstanceVariables(this.processInstanceId);
-            return;
-        }
-    }
-
-    ngOnChanges(changes: SimpleChanges) {
-        let processInstanceId = changes['processInstanceId'];
-        if (processInstanceId) {
-            if (processInstanceId.currentValue) {
-                this.getProcessInstanceVariables(processInstanceId.currentValue);
-            } else {
-                this.resetVariables();
-            }
-        }
-    }
-
-    /**
-     * Check if the list is empty
-     * @returns {ObjectDataTableAdapter|boolean}
-     */
-    isListEmpty(): boolean {
-        return this.data === undefined ||
-            (this.data && this.data.getRows() && this.data.getRows().length === 0);
-    }
-
-    /**
-     * Return an initDefaultSchemaColumns instance with the default Schema Column
-     * @returns {ObjectDataTableAdapter}
-     */
-    private initDefaultSchemaColumns(): ObjectDataTableAdapter {
-        return new ObjectDataTableAdapter(
-            [],
-            this.defaultSchemaColumn
-        );
-    }
-
-    /**
-     * Create an array of ObjectDataRow
-     * @param instances
-     * @returns {ObjectDataRow[]}
-     */
-    private createDataRow(instances: ProcessInstanceVariable[]): ObjectDataRow[] {
-        let instancesRows: ObjectDataRow[] = [];
-        instances.forEach((row) => {
-            instancesRows.push(new ObjectDataRow({
-                name: row.name,
-                value: row.value,
-                scope: row.scope
-            }));
-        });
-        return instancesRows;
-    }
-
-    /**
-     * Render the instances list
-     *
-     * @param instances
-     */
-    private renderInstances(instances: any[]) {
-        this.data.setRows(instances);
-    }
-
-    private getProcessInstanceVariables(processInstanceId: string) {
-        if (processInstanceId) {
-            this.isLoading = true;
-            this.activitiProcess.getProcessInstanceVariables(processInstanceId).subscribe(
-                (res: ProcessInstanceVariable[]) => {
-                    let instancesRow = this.createDataRow(res);
-                    this.renderInstances(instancesRow);
-                    this.isLoading = false;
-                },
-                (err) => {
-                    this.error.emit(err);
-                    this.isLoading = false;
-                }
-            );
-        } else {
-            this.resetVariables();
-        }
-    }
-
-    private resetVariables() {
-        if (this.data) {
-            this.data.setRows([]);
-        }
-    }
-
-    private polyfillDialog(dialog: DebugElement) {
-        if (!dialog.nativeElement.showModal) {
-            dialogPolyfill.registerDialog(dialog.nativeElement);
-        }
-    }
-
-    public showAddDialog() {
-        this.resetForm();
-        this.polyfillDialog(this.addDialog);
-        this.addDialog.nativeElement.showModal();
-    }
-
-    public showEditDialog(row: ObjectDataRow) {
-        this.variableName = row.getValue('name');
-        this.variableValue = row.getValue('value');
-        this.variableScope = row.getValue('scope');
-        this.polyfillDialog(this.editDialog);
-        this.editDialog.nativeElement.showModal();
-    }
-
-    public showErrorDialog() {
-        this.polyfillDialog(this.errorDialog);
-        this.errorDialog.nativeElement.showModal();
-    }
-
-    public add() {
-        this.activitiProcess.createOrUpdateProcessInstanceVariables(this.processInstanceId, [new ProcessInstanceVariable({
-            name: this.variableName,
-            value: this.variableValue,
-            scope: this.variableScope
-        })]).subscribe(
-            (res: ProcessInstanceVariable[]) => {
-                this.getProcessInstanceVariables(this.processInstanceId);
-                this.resetForm();
-            },
-            (err) => {
-                this.showErrorDialog();
-                this.error.emit(err);
-            }
-        );
-        this.closeAddDialog();
-    }
-
-    public edit() {
-        this.activitiProcess.createOrUpdateProcessInstanceVariables(this.processInstanceId, [new ProcessInstanceVariable({
-            name: this.variableName,
-            value: this.variableValue,
-            scope: this.variableScope
-        })]).subscribe(
-            (res: ProcessInstanceVariable[]) => {
-                this.getProcessInstanceVariables(this.processInstanceId);
-                this.resetForm();
-            },
-            (err) => {
-                this.showErrorDialog();
-                this.error.emit(err);
-            }
-        );
-        this.closeEditDialog();
-    }
-
-    public closeAddDialog() {
-        this.addDialog.nativeElement.close();
-    }
-
-    public closeEditDialog() {
-        this.editDialog.nativeElement.close();
-    }
-
-    public closeErrorDialog() {
-        this.errorDialog.nativeElement.close();
-    }
-
-    private resetForm() {
-        this.variableName = '';
-        this.variableValue = '';
-        this.variableScope = 'global';
-    }
-
-    private onDeleteVariable(row: ObjectDataRow) {
-        this.activitiProcess.deleteProcessInstanceVariable(this.processInstanceId, row.getValue('name')).subscribe(() => {
-            this.getProcessInstanceVariables(this.processInstanceId);
-        },
-                                                                                                                   (err) => {
-            this.showErrorDialog();
-            this.error.emit(err);
-        });
-    }
-
-    onExecuteRowAction(event) {
-        let row: ObjectDataRow = event.args.row;
-        let action = event.args.action;
-        if (action && action.id === 'delete') {
-            this.onDeleteVariable(row);
-        }
-        if (action && action.id === 'edit') {
-            this.showEditDialog(row);
-        }
-    }
-
-    onShowRowActionsMenu(event: DataCellEvent) {
-        event.value.actions = [
-            { id: 'delete', title: 'Delete' },
-            { id: 'edit', title: 'Edit' }
-        ];
-    }
-}
diff --git a/ng2-components/ng2-activiti-tasklist/index.ts b/ng2-components/ng2-activiti-tasklist/index.ts
index 7e45dc1a53..e57b5eb4e0 100644
--- a/ng2-components/ng2-activiti-tasklist/index.ts
+++ b/ng2-components/ng2-activiti-tasklist/index.ts
@@ -21,10 +21,10 @@ import { ActivitiFormModule } from 'ng2-activiti-form';
 
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
+import { MaterialModule } from './src/components/material.module';
 import { PeopleService } from './src/services/people.service';
 import { ProcessUploadService } from './src/services/process-upload.service';
 import { TaskListService } from './src/services/tasklist.service';
-import { MaterialModule } from './src/components/material.module';
 
 import { AppsListComponent } from './src/components/apps-list.component';
 import { ChecklistComponent } from './src/components/checklist.component';
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css
index 3b31e6d180..47eead2259 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css
@@ -1370,6 +1370,36 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
       padding-left: 24px; }
     .adf-pagination__block:last-child {
       border-right-width: 0; }
+  @media (max-width: 500px) {
+    .adf-pagination {
+      flex-wrap: wrap;
+      padding-bottom: 24px;
+      padding-top: 8px; }
+    .adf-pagination__range-block.adf-pagination__block:first-child {
+      order: 1;
+      width: 50%;
+      flex: 0 0 auto;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__perpage-block {
+      order: 3;
+      width: 50%;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__actualinfo-block {
+      order: 2;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; }
+    .adf-pagination__controls-block {
+      order: 4;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; } }
   .adf-pagination__max-items {
     margin-left: 10px; }
   .adf-pagination__max-items, .adf-pagination__current-page {
@@ -1411,14 +1441,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-accent-contrast-text-color {
   color: rgba(255, 255, 255, 0.87) !important; }
 
-.adf-analytics-report-list .mdl-list__item {
-  cursor: pointer; }
-
 .adf-analytics-report-list .activiti-filters__entry {
   cursor: pointer; }
 
 .adf-analytics-report-list .activiti-filters__entry-icon {
-  margin-right: 12px !important; }
+  position: relative;
+  top: 5px; }
+
+.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
+  line-height: 48px; }
 
 .adf-analytics-report-list .activiti-filters__entry.active {
   color: #2196f3; }
@@ -1426,32 +1457,52 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-analytics-report-list .activiti-filters__entry.active .activiti-filters__entry-icon {
   color: #2196f3; }
 
-.adf-analytics-report-list .application-title {
-  z-index: 7; }
+.adf-analytics-report-list .adf-report-card-grids {
+  display: flex;
+  padding: 8px;
+  flex-flow: row wrap;
+  margin: 0 auto;
+  align-items: stretch; }
 
-.adf-analytics-report-list .logo {
-  position: absolute;
-  right: 20px;
-  top: 35px;
-  z-index: 6; }
-
-.adf-analytics-report-list .logo i {
-  font-size: 70px; }
-
-.adf-analytics-report-list .theme-1 {
-  background-color: #269abc; }
-
-.adf-analytics-report-list .theme-1 .logo i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i:hover {
-  color: #b7dfea; }
-
-.adf-analytics-report-list .selectedIcon {
-  color: #e9f1f3 !important; }
+.adf-analytics-report-list .adf-report-card {
+  margin: 8px;
+  width: calc(33.3333333333% - 16px);
+  position: relative;
+  min-height: 200px;
+  overflow: hidden;
+  background-color: #269abc;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer; }
+  .adf-analytics-report-list .adf-report-card-logo {
+    position: absolute;
+    right: 20px;
+    top: 35px;
+    z-index: 6; }
+    .adf-analytics-report-list .adf-report-card-logo-icon {
+      font-size: 70px;
+      color: #168aac;
+      width: 1em;
+      height: 1em;
+      display: inline-block; }
+  .adf-analytics-report-list .adf-report-card-title {
+    padding: 16px;
+    z-index: 7; }
+    .adf-analytics-report-list .adf-report-card-title .application-title {
+      font-size: 24px;
+      margin: 0; }
+  .adf-analytics-report-list .adf-report-card-content {
+    padding: 16px;
+    flex-grow: 1; }
+  .adf-analytics-report-list .adf-report-card-actions {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 8px;
+    box-sizing: border-box;
+    height: 40px; }
+    .adf-analytics-report-list .adf-report-card-actions-icon {
+      color: #e9f1f3; }
+      .adf-analytics-report-list .adf-report-card-actions-icon:hover {
+        color: #b7dfea; }
 
 .adf-diagram-tooltip {
   transform: scale(0);
@@ -2205,7 +2256,7 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric
       overflow: hidden;
       text-overflow: ellipsis;
       /* for vertical align of text */
-      line-height: 1em; }
+      line-height: 1.12em; }
     .adf-data-table .ellipsis-cell > div:after {
       content: attr(title);
       overflow: hidden;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css
index 13824d2785..6a541c1bc5 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css
@@ -1370,6 +1370,36 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
       padding-left: 24px; }
     .adf-pagination__block:last-child {
       border-right-width: 0; }
+  @media (max-width: 500px) {
+    .adf-pagination {
+      flex-wrap: wrap;
+      padding-bottom: 24px;
+      padding-top: 8px; }
+    .adf-pagination__range-block.adf-pagination__block:first-child {
+      order: 1;
+      width: 50%;
+      flex: 0 0 auto;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__perpage-block {
+      order: 3;
+      width: 50%;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__actualinfo-block {
+      order: 2;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; }
+    .adf-pagination__controls-block {
+      order: 4;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; } }
   .adf-pagination__max-items {
     margin-left: 10px; }
   .adf-pagination__max-items, .adf-pagination__current-page {
@@ -1411,14 +1441,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-accent-contrast-text-color {
   color: rgba(255, 255, 255, 0.87) !important; }
 
-.adf-analytics-report-list .mdl-list__item {
-  cursor: pointer; }
-
 .adf-analytics-report-list .activiti-filters__entry {
   cursor: pointer; }
 
 .adf-analytics-report-list .activiti-filters__entry-icon {
-  margin-right: 12px !important; }
+  position: relative;
+  top: 5px; }
+
+.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
+  line-height: 48px; }
 
 .adf-analytics-report-list .activiti-filters__entry.active {
   color: #2196f3; }
@@ -1426,32 +1457,52 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-analytics-report-list .activiti-filters__entry.active .activiti-filters__entry-icon {
   color: #2196f3; }
 
-.adf-analytics-report-list .application-title {
-  z-index: 7; }
+.adf-analytics-report-list .adf-report-card-grids {
+  display: flex;
+  padding: 8px;
+  flex-flow: row wrap;
+  margin: 0 auto;
+  align-items: stretch; }
 
-.adf-analytics-report-list .logo {
-  position: absolute;
-  right: 20px;
-  top: 35px;
-  z-index: 6; }
-
-.adf-analytics-report-list .logo i {
-  font-size: 70px; }
-
-.adf-analytics-report-list .theme-1 {
-  background-color: #269abc; }
-
-.adf-analytics-report-list .theme-1 .logo i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i:hover {
-  color: #b7dfea; }
-
-.adf-analytics-report-list .selectedIcon {
-  color: #e9f1f3 !important; }
+.adf-analytics-report-list .adf-report-card {
+  margin: 8px;
+  width: calc(33.3333333333% - 16px);
+  position: relative;
+  min-height: 200px;
+  overflow: hidden;
+  background-color: #269abc;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer; }
+  .adf-analytics-report-list .adf-report-card-logo {
+    position: absolute;
+    right: 20px;
+    top: 35px;
+    z-index: 6; }
+    .adf-analytics-report-list .adf-report-card-logo-icon {
+      font-size: 70px;
+      color: #168aac;
+      width: 1em;
+      height: 1em;
+      display: inline-block; }
+  .adf-analytics-report-list .adf-report-card-title {
+    padding: 16px;
+    z-index: 7; }
+    .adf-analytics-report-list .adf-report-card-title .application-title {
+      font-size: 24px;
+      margin: 0; }
+  .adf-analytics-report-list .adf-report-card-content {
+    padding: 16px;
+    flex-grow: 1; }
+  .adf-analytics-report-list .adf-report-card-actions {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 8px;
+    box-sizing: border-box;
+    height: 40px; }
+    .adf-analytics-report-list .adf-report-card-actions-icon {
+      color: #e9f1f3; }
+      .adf-analytics-report-list .adf-report-card-actions-icon:hover {
+        color: #b7dfea; }
 
 .adf-diagram-tooltip {
   transform: scale(0);
@@ -2205,7 +2256,7 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric
       overflow: hidden;
       text-overflow: ellipsis;
       /* for vertical align of text */
-      line-height: 1em; }
+      line-height: 1.12em; }
     .adf-data-table .ellipsis-cell > div:after {
       content: attr(title);
       overflow: hidden;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css
index e3d401630a..6c05218620 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css
@@ -1370,6 +1370,36 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
       padding-left: 24px; }
     .adf-pagination__block:last-child {
       border-right-width: 0; }
+  @media (max-width: 500px) {
+    .adf-pagination {
+      flex-wrap: wrap;
+      padding-bottom: 24px;
+      padding-top: 8px; }
+    .adf-pagination__range-block.adf-pagination__block:first-child {
+      order: 1;
+      width: 50%;
+      flex: 0 0 auto;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__perpage-block {
+      order: 3;
+      width: 50%;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__actualinfo-block {
+      order: 2;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; }
+    .adf-pagination__controls-block {
+      order: 4;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; } }
   .adf-pagination__max-items {
     margin-left: 10px; }
   .adf-pagination__max-items, .adf-pagination__current-page {
@@ -1411,14 +1441,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-accent-contrast-text-color {
   color: rgba(255, 255, 255, 0.87) !important; }
 
-.adf-analytics-report-list .mdl-list__item {
-  cursor: pointer; }
-
 .adf-analytics-report-list .activiti-filters__entry {
   cursor: pointer; }
 
 .adf-analytics-report-list .activiti-filters__entry-icon {
-  margin-right: 12px !important; }
+  position: relative;
+  top: 5px; }
+
+.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
+  line-height: 48px; }
 
 .adf-analytics-report-list .activiti-filters__entry.active {
   color: #00bcd4; }
@@ -1426,32 +1457,52 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-analytics-report-list .activiti-filters__entry.active .activiti-filters__entry-icon {
   color: #00bcd4; }
 
-.adf-analytics-report-list .application-title {
-  z-index: 7; }
+.adf-analytics-report-list .adf-report-card-grids {
+  display: flex;
+  padding: 8px;
+  flex-flow: row wrap;
+  margin: 0 auto;
+  align-items: stretch; }
 
-.adf-analytics-report-list .logo {
-  position: absolute;
-  right: 20px;
-  top: 35px;
-  z-index: 6; }
-
-.adf-analytics-report-list .logo i {
-  font-size: 70px; }
-
-.adf-analytics-report-list .theme-1 {
-  background-color: #269abc; }
-
-.adf-analytics-report-list .theme-1 .logo i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i:hover {
-  color: #b7dfea; }
-
-.adf-analytics-report-list .selectedIcon {
-  color: #e9f1f3 !important; }
+.adf-analytics-report-list .adf-report-card {
+  margin: 8px;
+  width: calc(33.3333333333% - 16px);
+  position: relative;
+  min-height: 200px;
+  overflow: hidden;
+  background-color: #269abc;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer; }
+  .adf-analytics-report-list .adf-report-card-logo {
+    position: absolute;
+    right: 20px;
+    top: 35px;
+    z-index: 6; }
+    .adf-analytics-report-list .adf-report-card-logo-icon {
+      font-size: 70px;
+      color: #168aac;
+      width: 1em;
+      height: 1em;
+      display: inline-block; }
+  .adf-analytics-report-list .adf-report-card-title {
+    padding: 16px;
+    z-index: 7; }
+    .adf-analytics-report-list .adf-report-card-title .application-title {
+      font-size: 24px;
+      margin: 0; }
+  .adf-analytics-report-list .adf-report-card-content {
+    padding: 16px;
+    flex-grow: 1; }
+  .adf-analytics-report-list .adf-report-card-actions {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 8px;
+    box-sizing: border-box;
+    height: 40px; }
+    .adf-analytics-report-list .adf-report-card-actions-icon {
+      color: #e9f1f3; }
+      .adf-analytics-report-list .adf-report-card-actions-icon:hover {
+        color: #b7dfea; }
 
 .adf-diagram-tooltip {
   transform: scale(0);
@@ -2205,7 +2256,7 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric
       overflow: hidden;
       text-overflow: ellipsis;
       /* for vertical align of text */
-      line-height: 1em; }
+      line-height: 1.12em; }
     .adf-data-table .ellipsis-cell > div:after {
       content: attr(title);
       overflow: hidden;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css
index bfb835c126..ff30b63849 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css
@@ -1370,6 +1370,36 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
       padding-left: 24px; }
     .adf-pagination__block:last-child {
       border-right-width: 0; }
+  @media (max-width: 500px) {
+    .adf-pagination {
+      flex-wrap: wrap;
+      padding-bottom: 24px;
+      padding-top: 8px; }
+    .adf-pagination__range-block.adf-pagination__block:first-child {
+      order: 1;
+      width: 50%;
+      flex: 0 0 auto;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__perpage-block {
+      order: 3;
+      width: 50%;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__actualinfo-block {
+      order: 2;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; }
+    .adf-pagination__controls-block {
+      order: 4;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; } }
   .adf-pagination__max-items {
     margin-left: 10px; }
   .adf-pagination__max-items, .adf-pagination__current-page {
@@ -1411,14 +1441,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-accent-contrast-text-color {
   color: rgba(255, 255, 255, 0.87) !important; }
 
-.adf-analytics-report-list .mdl-list__item {
-  cursor: pointer; }
-
 .adf-analytics-report-list .activiti-filters__entry {
   cursor: pointer; }
 
 .adf-analytics-report-list .activiti-filters__entry-icon {
-  margin-right: 12px !important; }
+  position: relative;
+  top: 5px; }
+
+.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
+  line-height: 48px; }
 
 .adf-analytics-report-list .activiti-filters__entry.active {
   color: #00bcd4; }
@@ -1426,32 +1457,52 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-analytics-report-list .activiti-filters__entry.active .activiti-filters__entry-icon {
   color: #00bcd4; }
 
-.adf-analytics-report-list .application-title {
-  z-index: 7; }
+.adf-analytics-report-list .adf-report-card-grids {
+  display: flex;
+  padding: 8px;
+  flex-flow: row wrap;
+  margin: 0 auto;
+  align-items: stretch; }
 
-.adf-analytics-report-list .logo {
-  position: absolute;
-  right: 20px;
-  top: 35px;
-  z-index: 6; }
-
-.adf-analytics-report-list .logo i {
-  font-size: 70px; }
-
-.adf-analytics-report-list .theme-1 {
-  background-color: #269abc; }
-
-.adf-analytics-report-list .theme-1 .logo i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i:hover {
-  color: #b7dfea; }
-
-.adf-analytics-report-list .selectedIcon {
-  color: #e9f1f3 !important; }
+.adf-analytics-report-list .adf-report-card {
+  margin: 8px;
+  width: calc(33.3333333333% - 16px);
+  position: relative;
+  min-height: 200px;
+  overflow: hidden;
+  background-color: #269abc;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer; }
+  .adf-analytics-report-list .adf-report-card-logo {
+    position: absolute;
+    right: 20px;
+    top: 35px;
+    z-index: 6; }
+    .adf-analytics-report-list .adf-report-card-logo-icon {
+      font-size: 70px;
+      color: #168aac;
+      width: 1em;
+      height: 1em;
+      display: inline-block; }
+  .adf-analytics-report-list .adf-report-card-title {
+    padding: 16px;
+    z-index: 7; }
+    .adf-analytics-report-list .adf-report-card-title .application-title {
+      font-size: 24px;
+      margin: 0; }
+  .adf-analytics-report-list .adf-report-card-content {
+    padding: 16px;
+    flex-grow: 1; }
+  .adf-analytics-report-list .adf-report-card-actions {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 8px;
+    box-sizing: border-box;
+    height: 40px; }
+    .adf-analytics-report-list .adf-report-card-actions-icon {
+      color: #e9f1f3; }
+      .adf-analytics-report-list .adf-report-card-actions-icon:hover {
+        color: #b7dfea; }
 
 .adf-diagram-tooltip {
   transform: scale(0);
@@ -2205,7 +2256,7 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric
       overflow: hidden;
       text-overflow: ellipsis;
       /* for vertical align of text */
-      line-height: 1em; }
+      line-height: 1.12em; }
     .adf-data-table .ellipsis-cell > div:after {
       content: attr(title);
       overflow: hidden;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css
index c3045f812f..bca4db51ee 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css
@@ -1370,6 +1370,36 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
       padding-left: 24px; }
     .adf-pagination__block:last-child {
       border-right-width: 0; }
+  @media (max-width: 500px) {
+    .adf-pagination {
+      flex-wrap: wrap;
+      padding-bottom: 24px;
+      padding-top: 8px; }
+    .adf-pagination__range-block.adf-pagination__block:first-child {
+      order: 1;
+      width: 50%;
+      flex: 0 0 auto;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__perpage-block {
+      order: 3;
+      width: 50%;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__actualinfo-block {
+      order: 2;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; }
+    .adf-pagination__controls-block {
+      order: 4;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; } }
   .adf-pagination__max-items {
     margin-left: 10px; }
   .adf-pagination__max-items, .adf-pagination__current-page {
@@ -1411,14 +1441,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-accent-contrast-text-color {
   color: rgba(255, 255, 255, 0.87) !important; }
 
-.adf-analytics-report-list .mdl-list__item {
-  cursor: pointer; }
-
 .adf-analytics-report-list .activiti-filters__entry {
   cursor: pointer; }
 
 .adf-analytics-report-list .activiti-filters__entry-icon {
-  margin-right: 12px !important; }
+  position: relative;
+  top: 5px; }
+
+.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
+  line-height: 48px; }
 
 .adf-analytics-report-list .activiti-filters__entry.active {
   color: #8bc34a; }
@@ -1426,32 +1457,52 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-analytics-report-list .activiti-filters__entry.active .activiti-filters__entry-icon {
   color: #8bc34a; }
 
-.adf-analytics-report-list .application-title {
-  z-index: 7; }
+.adf-analytics-report-list .adf-report-card-grids {
+  display: flex;
+  padding: 8px;
+  flex-flow: row wrap;
+  margin: 0 auto;
+  align-items: stretch; }
 
-.adf-analytics-report-list .logo {
-  position: absolute;
-  right: 20px;
-  top: 35px;
-  z-index: 6; }
-
-.adf-analytics-report-list .logo i {
-  font-size: 70px; }
-
-.adf-analytics-report-list .theme-1 {
-  background-color: #269abc; }
-
-.adf-analytics-report-list .theme-1 .logo i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i:hover {
-  color: #b7dfea; }
-
-.adf-analytics-report-list .selectedIcon {
-  color: #e9f1f3 !important; }
+.adf-analytics-report-list .adf-report-card {
+  margin: 8px;
+  width: calc(33.3333333333% - 16px);
+  position: relative;
+  min-height: 200px;
+  overflow: hidden;
+  background-color: #269abc;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer; }
+  .adf-analytics-report-list .adf-report-card-logo {
+    position: absolute;
+    right: 20px;
+    top: 35px;
+    z-index: 6; }
+    .adf-analytics-report-list .adf-report-card-logo-icon {
+      font-size: 70px;
+      color: #168aac;
+      width: 1em;
+      height: 1em;
+      display: inline-block; }
+  .adf-analytics-report-list .adf-report-card-title {
+    padding: 16px;
+    z-index: 7; }
+    .adf-analytics-report-list .adf-report-card-title .application-title {
+      font-size: 24px;
+      margin: 0; }
+  .adf-analytics-report-list .adf-report-card-content {
+    padding: 16px;
+    flex-grow: 1; }
+  .adf-analytics-report-list .adf-report-card-actions {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 8px;
+    box-sizing: border-box;
+    height: 40px; }
+    .adf-analytics-report-list .adf-report-card-actions-icon {
+      color: #e9f1f3; }
+      .adf-analytics-report-list .adf-report-card-actions-icon:hover {
+        color: #b7dfea; }
 
 .adf-diagram-tooltip {
   transform: scale(0);
@@ -2205,7 +2256,7 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric
       overflow: hidden;
       text-overflow: ellipsis;
       /* for vertical align of text */
-      line-height: 1em; }
+      line-height: 1.12em; }
     .adf-data-table .ellipsis-cell > div:after {
       content: attr(title);
       overflow: hidden;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css
index b739193b55..253afd794b 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css
@@ -1370,6 +1370,36 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
       padding-left: 24px; }
     .adf-pagination__block:last-child {
       border-right-width: 0; }
+  @media (max-width: 500px) {
+    .adf-pagination {
+      flex-wrap: wrap;
+      padding-bottom: 24px;
+      padding-top: 8px; }
+    .adf-pagination__range-block.adf-pagination__block:first-child {
+      order: 1;
+      width: 50%;
+      flex: 0 0 auto;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__perpage-block {
+      order: 3;
+      width: 50%;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__actualinfo-block {
+      order: 2;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; }
+    .adf-pagination__controls-block {
+      order: 4;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; } }
   .adf-pagination__max-items {
     margin-left: 10px; }
   .adf-pagination__max-items, .adf-pagination__current-page {
@@ -1411,14 +1441,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-accent-contrast-text-color {
   color: rgba(255, 255, 255, 0.87) !important; }
 
-.adf-analytics-report-list .mdl-list__item {
-  cursor: pointer; }
-
 .adf-analytics-report-list .activiti-filters__entry {
   cursor: pointer; }
 
 .adf-analytics-report-list .activiti-filters__entry-icon {
-  margin-right: 12px !important; }
+  position: relative;
+  top: 5px; }
+
+.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
+  line-height: 48px; }
 
 .adf-analytics-report-list .activiti-filters__entry.active {
   color: #8bc34a; }
@@ -1426,32 +1457,52 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-analytics-report-list .activiti-filters__entry.active .activiti-filters__entry-icon {
   color: #8bc34a; }
 
-.adf-analytics-report-list .application-title {
-  z-index: 7; }
+.adf-analytics-report-list .adf-report-card-grids {
+  display: flex;
+  padding: 8px;
+  flex-flow: row wrap;
+  margin: 0 auto;
+  align-items: stretch; }
 
-.adf-analytics-report-list .logo {
-  position: absolute;
-  right: 20px;
-  top: 35px;
-  z-index: 6; }
-
-.adf-analytics-report-list .logo i {
-  font-size: 70px; }
-
-.adf-analytics-report-list .theme-1 {
-  background-color: #269abc; }
-
-.adf-analytics-report-list .theme-1 .logo i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i:hover {
-  color: #b7dfea; }
-
-.adf-analytics-report-list .selectedIcon {
-  color: #e9f1f3 !important; }
+.adf-analytics-report-list .adf-report-card {
+  margin: 8px;
+  width: calc(33.3333333333% - 16px);
+  position: relative;
+  min-height: 200px;
+  overflow: hidden;
+  background-color: #269abc;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer; }
+  .adf-analytics-report-list .adf-report-card-logo {
+    position: absolute;
+    right: 20px;
+    top: 35px;
+    z-index: 6; }
+    .adf-analytics-report-list .adf-report-card-logo-icon {
+      font-size: 70px;
+      color: #168aac;
+      width: 1em;
+      height: 1em;
+      display: inline-block; }
+  .adf-analytics-report-list .adf-report-card-title {
+    padding: 16px;
+    z-index: 7; }
+    .adf-analytics-report-list .adf-report-card-title .application-title {
+      font-size: 24px;
+      margin: 0; }
+  .adf-analytics-report-list .adf-report-card-content {
+    padding: 16px;
+    flex-grow: 1; }
+  .adf-analytics-report-list .adf-report-card-actions {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 8px;
+    box-sizing: border-box;
+    height: 40px; }
+    .adf-analytics-report-list .adf-report-card-actions-icon {
+      color: #e9f1f3; }
+      .adf-analytics-report-list .adf-report-card-actions-icon:hover {
+        color: #b7dfea; }
 
 .adf-diagram-tooltip {
   transform: scale(0);
@@ -2205,7 +2256,7 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric
       overflow: hidden;
       text-overflow: ellipsis;
       /* for vertical align of text */
-      line-height: 1em; }
+      line-height: 1.12em; }
     .adf-data-table .ellipsis-cell > div:after {
       content: attr(title);
       overflow: hidden;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css
index 4b5547d4a6..74f0d729a7 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css
@@ -1370,6 +1370,36 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
       padding-left: 24px; }
     .adf-pagination__block:last-child {
       border-right-width: 0; }
+  @media (max-width: 500px) {
+    .adf-pagination {
+      flex-wrap: wrap;
+      padding-bottom: 24px;
+      padding-top: 8px; }
+    .adf-pagination__range-block.adf-pagination__block:first-child {
+      order: 1;
+      width: 50%;
+      flex: 0 0 auto;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__perpage-block {
+      order: 3;
+      width: 50%;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__actualinfo-block {
+      order: 2;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; }
+    .adf-pagination__controls-block {
+      order: 4;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; } }
   .adf-pagination__max-items {
     margin-left: 10px; }
   .adf-pagination__max-items, .adf-pagination__current-page {
@@ -1411,14 +1441,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-accent-contrast-text-color {
   color: white !important; }
 
-.adf-analytics-report-list .mdl-list__item {
-  cursor: pointer; }
-
 .adf-analytics-report-list .activiti-filters__entry {
   cursor: pointer; }
 
 .adf-analytics-report-list .activiti-filters__entry-icon {
-  margin-right: 12px !important; }
+  position: relative;
+  top: 5px; }
+
+.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
+  line-height: 48px; }
 
 .adf-analytics-report-list .activiti-filters__entry.active {
   color: #3f51b5; }
@@ -1426,32 +1457,52 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-analytics-report-list .activiti-filters__entry.active .activiti-filters__entry-icon {
   color: #3f51b5; }
 
-.adf-analytics-report-list .application-title {
-  z-index: 7; }
+.adf-analytics-report-list .adf-report-card-grids {
+  display: flex;
+  padding: 8px;
+  flex-flow: row wrap;
+  margin: 0 auto;
+  align-items: stretch; }
 
-.adf-analytics-report-list .logo {
-  position: absolute;
-  right: 20px;
-  top: 35px;
-  z-index: 6; }
-
-.adf-analytics-report-list .logo i {
-  font-size: 70px; }
-
-.adf-analytics-report-list .theme-1 {
-  background-color: #269abc; }
-
-.adf-analytics-report-list .theme-1 .logo i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i:hover {
-  color: #b7dfea; }
-
-.adf-analytics-report-list .selectedIcon {
-  color: #e9f1f3 !important; }
+.adf-analytics-report-list .adf-report-card {
+  margin: 8px;
+  width: calc(33.3333333333% - 16px);
+  position: relative;
+  min-height: 200px;
+  overflow: hidden;
+  background-color: #269abc;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer; }
+  .adf-analytics-report-list .adf-report-card-logo {
+    position: absolute;
+    right: 20px;
+    top: 35px;
+    z-index: 6; }
+    .adf-analytics-report-list .adf-report-card-logo-icon {
+      font-size: 70px;
+      color: #168aac;
+      width: 1em;
+      height: 1em;
+      display: inline-block; }
+  .adf-analytics-report-list .adf-report-card-title {
+    padding: 16px;
+    z-index: 7; }
+    .adf-analytics-report-list .adf-report-card-title .application-title {
+      font-size: 24px;
+      margin: 0; }
+  .adf-analytics-report-list .adf-report-card-content {
+    padding: 16px;
+    flex-grow: 1; }
+  .adf-analytics-report-list .adf-report-card-actions {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 8px;
+    box-sizing: border-box;
+    height: 40px; }
+    .adf-analytics-report-list .adf-report-card-actions-icon {
+      color: #e9f1f3; }
+      .adf-analytics-report-list .adf-report-card-actions-icon:hover {
+        color: #b7dfea; }
 
 .adf-diagram-tooltip {
   transform: scale(0);
@@ -2205,7 +2256,7 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric
       overflow: hidden;
       text-overflow: ellipsis;
       /* for vertical align of text */
-      line-height: 1em; }
+      line-height: 1.12em; }
     .adf-data-table .ellipsis-cell > div:after {
       content: attr(title);
       overflow: hidden;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css
index de1d2ee687..dc64cbbaf9 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css
@@ -1370,6 +1370,36 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
       padding-left: 24px; }
     .adf-pagination__block:last-child {
       border-right-width: 0; }
+  @media (max-width: 500px) {
+    .adf-pagination {
+      flex-wrap: wrap;
+      padding-bottom: 24px;
+      padding-top: 8px; }
+    .adf-pagination__range-block.adf-pagination__block:first-child {
+      order: 1;
+      width: 50%;
+      flex: 0 0 auto;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__perpage-block {
+      order: 3;
+      width: 50%;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__actualinfo-block {
+      order: 2;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; }
+    .adf-pagination__controls-block {
+      order: 4;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; } }
   .adf-pagination__max-items {
     margin-left: 10px; }
   .adf-pagination__max-items, .adf-pagination__current-page {
@@ -1411,14 +1441,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-accent-contrast-text-color {
   color: rgba(0, 0, 0, 0.87) !important; }
 
-.adf-analytics-report-list .mdl-list__item {
-  cursor: pointer; }
-
 .adf-analytics-report-list .activiti-filters__entry {
   cursor: pointer; }
 
 .adf-analytics-report-list .activiti-filters__entry-icon {
-  margin-right: 12px !important; }
+  position: relative;
+  top: 5px; }
+
+.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
+  line-height: 48px; }
 
 .adf-analytics-report-list .activiti-filters__entry.active {
   color: #c2185b; }
@@ -1426,32 +1457,52 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-analytics-report-list .activiti-filters__entry.active .activiti-filters__entry-icon {
   color: #c2185b; }
 
-.adf-analytics-report-list .application-title {
-  z-index: 7; }
+.adf-analytics-report-list .adf-report-card-grids {
+  display: flex;
+  padding: 8px;
+  flex-flow: row wrap;
+  margin: 0 auto;
+  align-items: stretch; }
 
-.adf-analytics-report-list .logo {
-  position: absolute;
-  right: 20px;
-  top: 35px;
-  z-index: 6; }
-
-.adf-analytics-report-list .logo i {
-  font-size: 70px; }
-
-.adf-analytics-report-list .theme-1 {
-  background-color: #269abc; }
-
-.adf-analytics-report-list .theme-1 .logo i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i:hover {
-  color: #b7dfea; }
-
-.adf-analytics-report-list .selectedIcon {
-  color: #e9f1f3 !important; }
+.adf-analytics-report-list .adf-report-card {
+  margin: 8px;
+  width: calc(33.3333333333% - 16px);
+  position: relative;
+  min-height: 200px;
+  overflow: hidden;
+  background-color: #269abc;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer; }
+  .adf-analytics-report-list .adf-report-card-logo {
+    position: absolute;
+    right: 20px;
+    top: 35px;
+    z-index: 6; }
+    .adf-analytics-report-list .adf-report-card-logo-icon {
+      font-size: 70px;
+      color: #168aac;
+      width: 1em;
+      height: 1em;
+      display: inline-block; }
+  .adf-analytics-report-list .adf-report-card-title {
+    padding: 16px;
+    z-index: 7; }
+    .adf-analytics-report-list .adf-report-card-title .application-title {
+      font-size: 24px;
+      margin: 0; }
+  .adf-analytics-report-list .adf-report-card-content {
+    padding: 16px;
+    flex-grow: 1; }
+  .adf-analytics-report-list .adf-report-card-actions {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 8px;
+    box-sizing: border-box;
+    height: 40px; }
+    .adf-analytics-report-list .adf-report-card-actions-icon {
+      color: #e9f1f3; }
+      .adf-analytics-report-list .adf-report-card-actions-icon:hover {
+        color: #b7dfea; }
 
 .adf-diagram-tooltip {
   transform: scale(0);
@@ -2205,7 +2256,7 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric
       overflow: hidden;
       text-overflow: ellipsis;
       /* for vertical align of text */
-      line-height: 1em; }
+      line-height: 1.12em; }
     .adf-data-table .ellipsis-cell > div:after {
       content: attr(title);
       overflow: hidden;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css
index ef1aa19885..43a20441f7 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css
@@ -1370,6 +1370,36 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
       padding-left: 24px; }
     .adf-pagination__block:last-child {
       border-right-width: 0; }
+  @media (max-width: 500px) {
+    .adf-pagination {
+      flex-wrap: wrap;
+      padding-bottom: 24px;
+      padding-top: 8px; }
+    .adf-pagination__range-block.adf-pagination__block:first-child {
+      order: 1;
+      width: 50%;
+      flex: 0 0 auto;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__perpage-block {
+      order: 3;
+      width: 50%;
+      box-sizing: border-box;
+      padding-left: 16px;
+      justify-content: flex-start; }
+    .adf-pagination__actualinfo-block {
+      order: 2;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; }
+    .adf-pagination__controls-block {
+      order: 4;
+      width: 50%;
+      box-sizing: border-box;
+      padding-right: 16px;
+      justify-content: flex-end; } }
   .adf-pagination__max-items {
     margin-left: 10px; }
   .adf-pagination__max-items, .adf-pagination__current-page {
@@ -1411,14 +1441,15 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-accent-contrast-text-color {
   color: rgba(0, 0, 0, 0.87) !important; }
 
-.adf-analytics-report-list .mdl-list__item {
-  cursor: pointer; }
-
 .adf-analytics-report-list .activiti-filters__entry {
   cursor: pointer; }
 
 .adf-analytics-report-list .activiti-filters__entry-icon {
-  margin-right: 12px !important; }
+  position: relative;
+  top: 5px; }
+
+.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
+  line-height: 48px; }
 
 .adf-analytics-report-list .activiti-filters__entry.active {
   color: #7b1fa2; }
@@ -1426,32 +1457,52 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
 .adf-analytics-report-list .activiti-filters__entry.active .activiti-filters__entry-icon {
   color: #7b1fa2; }
 
-.adf-analytics-report-list .application-title {
-  z-index: 7; }
+.adf-analytics-report-list .adf-report-card-grids {
+  display: flex;
+  padding: 8px;
+  flex-flow: row wrap;
+  margin: 0 auto;
+  align-items: stretch; }
 
-.adf-analytics-report-list .logo {
-  position: absolute;
-  right: 20px;
-  top: 35px;
-  z-index: 6; }
-
-.adf-analytics-report-list .logo i {
-  font-size: 70px; }
-
-.adf-analytics-report-list .theme-1 {
-  background-color: #269abc; }
-
-.adf-analytics-report-list .theme-1 .logo i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i {
-  color: #168aac; }
-
-.adf-analytics-report-list .theme-1 .mdl-card__actions i:hover {
-  color: #b7dfea; }
-
-.adf-analytics-report-list .selectedIcon {
-  color: #e9f1f3 !important; }
+.adf-analytics-report-list .adf-report-card {
+  margin: 8px;
+  width: calc(33.3333333333% - 16px);
+  position: relative;
+  min-height: 200px;
+  overflow: hidden;
+  background-color: #269abc;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer; }
+  .adf-analytics-report-list .adf-report-card-logo {
+    position: absolute;
+    right: 20px;
+    top: 35px;
+    z-index: 6; }
+    .adf-analytics-report-list .adf-report-card-logo-icon {
+      font-size: 70px;
+      color: #168aac;
+      width: 1em;
+      height: 1em;
+      display: inline-block; }
+  .adf-analytics-report-list .adf-report-card-title {
+    padding: 16px;
+    z-index: 7; }
+    .adf-analytics-report-list .adf-report-card-title .application-title {
+      font-size: 24px;
+      margin: 0; }
+  .adf-analytics-report-list .adf-report-card-content {
+    padding: 16px;
+    flex-grow: 1; }
+  .adf-analytics-report-list .adf-report-card-actions {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 8px;
+    box-sizing: border-box;
+    height: 40px; }
+    .adf-analytics-report-list .adf-report-card-actions-icon {
+      color: #e9f1f3; }
+      .adf-analytics-report-list .adf-report-card-actions-icon:hover {
+        color: #b7dfea; }
 
 .adf-diagram-tooltip {
   transform: scale(0);
@@ -2205,7 +2256,7 @@ adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric
       overflow: hidden;
       text-overflow: ellipsis;
       /* for vertical align of text */
-      line-height: 1em; }
+      line-height: 1.12em; }
     .adf-data-table .ellipsis-cell > div:after {
       content: attr(title);
       overflow: hidden;
diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md
index bacc49f74e..1299cec23d 100644
--- a/ng2-components/ng2-alfresco-login/README.md
+++ b/ng2-components/ng2-alfresco-login/README.md
@@ -11,6 +11,7 @@ Contains the Login component.
     + [Properties](#properties)
     + [Events](#events)
   * [Details](#details)
+    + [Handling events](#handling-events)
     + [Change footer content](#change-footer-content)
     + [Change header content](#change-header-content)
     + [Extra content](#extra-content)
diff --git a/ng2-components/package-base.json b/ng2-components/package-base.json
index 66a6253304..b2a09bcf6b 100644
--- a/ng2-components/package-base.json
+++ b/ng2-components/package-base.json
@@ -6,7 +6,8 @@
     "scripts": {
         "clean": "rimraf node_modules",
         "clean-lock": "rimraf package-lock.json",
-        "build": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.build.js --progress --profile --bail",
+        "build": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.build.js --progress --profile --bail && npm run build-style",        
+        "build-style": "npm run webpack -- --config config/webpack.style.js --progress --profile --bail",
         "pkg-build": "package-json-merge ng2-alfresco-core/package.json ng2-alfresco-datatable/package.json ng2-activiti-diagrams/package.json ng2-activiti-analytics/package.json ng2-activiti-form/package.json ng2-activiti-tasklist/package.json ng2-activiti-processlist/package.json ng2-alfresco-documentlist/package.json ng2-alfresco-login/package.json ng2-alfresco-search/package.json ng2-alfresco-tag/package.json ng2-alfresco-upload/package.json ng2-alfresco-viewer/package.json ng2-alfresco-webscript/package.json ng2-alfresco-webscript/package.json ng2-alfresco-userinfo/package.json ng2-alfresco-social/package.json package-base.json  > package.json",
         "test": "node node_modules/karma/bin/karma start --reporters mocha,coverage --single-run --component .",
         "test-browser": "node node_modules/karma/bin/karma start karma.conf.js --reporters kjhtml",
diff --git a/ng2-components/package.json b/ng2-components/package.json
index 0e0861553e..2439155045 100644
--- a/ng2-components/package.json
+++ b/ng2-components/package.json
@@ -8,11 +8,11 @@
     "clean-lock": "rimraf package-lock.json",
     "rimraf": "rimraf",
     "build": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.build.js --progress --profile --bail && npm run build-style",
-    "build-style": "npm run webpack -- --config config/webpack.style.js --progress --profile --bail",
     "test": "node node_modules/karma/bin/karma start --reporters mocha,coverage --single-run --component .",
     "test-browser": "node node_modules/karma/bin/karma start karma.conf.js --reporters kjhtml",
     "coverage": "",
     "prepublishOnly": "npm run build",
+    "build-style": "npm run webpack -- --config config/webpack.style.js --progress --profile --bail",
     "pkg-build": "package-json-merge ng2-alfresco-core/package.json ng2-alfresco-datatable/package.json ng2-activiti-diagrams/package.json ng2-activiti-analytics/package.json ng2-activiti-form/package.json ng2-activiti-tasklist/package.json ng2-activiti-processlist/package.json ng2-alfresco-documentlist/package.json ng2-alfresco-login/package.json ng2-alfresco-search/package.json ng2-alfresco-tag/package.json ng2-alfresco-upload/package.json ng2-alfresco-viewer/package.json ng2-alfresco-webscript/package.json ng2-alfresco-webscript/package.json ng2-alfresco-userinfo/package.json ng2-alfresco-social/package.json package-base.json  > package.json",
     "toc": "markdown-toc -i ng2-alfresco-core/README.md && markdown-toc -i ng2-alfresco-datatable/README.md && markdown-toc -i ng2-activiti-diagrams/README.md && markdown-toc -i ng2-activiti-analytics/README.md && markdown-toc -i ng2-activiti-form/README.md && markdown-toc -i ng2-activiti-tasklist/README.md && markdown-toc -i ng2-activiti-processlist/README.md && markdown-toc -i ng2-alfresco-documentlist/README.md && markdown-toc -i ng2-alfresco-login/README.md && markdown-toc -i ng2-alfresco-search/README.md && markdown-toc -i ng2-alfresco-tag/README.md && markdown-toc -i ng2-alfresco-upload/README.md && markdown-toc -i ng2-alfresco-viewer/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-userinfo/README.md && markdown-toc -i ng2-alfresco-social/README.md && markdown-toc -i README.md",
     "markdownlint": "markdownlint ng2-alfresco-core/README.md && markdownlint ng2-alfresco-datatable/README.md && markdownlint ng2-activiti-diagrams/README.md && markdownlint ng2-activiti-analytics/README.md && markdownlint ng2-activiti-form/README.md && markdownlint ng2-activiti-tasklist/README.md && markdownlint ng2-activiti-processlist/README.md && markdownlint ng2-alfresco-documentlist/README.md && markdownlint ng2-alfresco-login/README.md && markdownlint ng2-alfresco-search/README.md && markdownlint ng2-alfresco-tag/README.md && markdownlint ng2-alfresco-upload/README.md && markdownlint ng2-alfresco-viewer/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-userinfo/README.md && markdownlint ng2-alfresco-social/README.md && markdownlint README.md",