diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 85b092e600..32962c4e48 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -60,14 +60,14 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/demo-shell-ng2/src/app/components/theme-picker/theme-picker.html b/demo-shell-ng2/src/app/components/theme-picker/theme-picker.html
index 493720040f..9cf0c7bca9 100644
--- a/demo-shell-ng2/src/app/components/theme-picker/theme-picker.html
+++ b/demo-shell-ng2/src/app/components/theme-picker/theme-picker.html
@@ -3,7 +3,7 @@
 </button>
 
 <mat-menu class="docs-theme-picker-menu" #themeMenu="matMenu" x-position="before">
-    <mat-list-item *ngFor="let theme of themes"  mat-menu-item (click)="installTheme(theme)" >
+    <button *ngFor="let theme of themes"  mat-menu-item (click)="installTheme(theme)" >
         <mat-icon mat-list-icon [matTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
                  [style.background]="theme.primary"
                  *ngIf="currentTheme === theme">check_circle
@@ -13,5 +13,5 @@
                  *ngIf="currentTheme !== theme">invert_colors
         </mat-icon>
         {{theme.name}}
-    </mat-list-item>
+    </button>
 </mat-menu>
diff --git a/demo-shell-ng2/src/app/components/theme-picker/theme-picker.ts b/demo-shell-ng2/src/app/components/theme-picker/theme-picker.ts
index 19d51367a3..d05e5d2c02 100644
--- a/demo-shell-ng2/src/app/components/theme-picker/theme-picker.ts
+++ b/demo-shell-ng2/src/app/components/theme-picker/theme-picker.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import {
     MatButtonModule, MatGridListModule, MatIconModule, MatMenuModule,
-    MatTooltipModule
+    MatTooltipModule, MatListModule
 } from '@angular/material';
 import { StyleManager } from './style-manager/style-manager';
 import { DocsSiteTheme, ThemeStorage } from './theme-storage/theme-storage';
@@ -121,6 +121,7 @@ export class ThemePickerComponent {
         MatMenuModule,
         MatGridListModule,
         MatTooltipModule,
+        MatListModule,
         CommonModule
     ],
     exports: [ThemePickerComponent],
diff --git a/demo-shell-ng2/src/index.html b/demo-shell-ng2/src/index.html
index 5042580324..c5efa5aa03 100644
--- a/demo-shell-ng2/src/index.html
+++ b/demo-shell-ng2/src/index.html
@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
   <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet" media="none" onload="if(media!='all')media='all'">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"  rel="stylesheet" media="none" onload="if(media!='all')media='all'">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" media="none" onload="if(media!='all')media='all'">
 
   <style>
       body, html {
diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
index a974359471..2c6033bb78 100644
--- a/ng2-components/ng2-activiti-analytics/package.json
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -33,14 +33,14 @@
   },
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts
index 892efb7a3b..aebef3c90f 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts
@@ -21,6 +21,7 @@ import { ReportParametersModel } from 'ng2-activiti-diagrams';
 import { AlfrescoTranslationService, AppConfigService, CoreModule } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
 import { AnalyticsReportListComponent } from '../components/analytics-report-list.component';
+import { MaterialModule } from '../material.module';
 import { AnalyticsService } from '../services/analytics.service';
 
 declare let jasmine: any;
@@ -45,7 +46,8 @@ describe('AnalyticsReportListComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                CoreModule
+                CoreModule,
+                MaterialModule
             ],
             declarations: [
                 AnalyticsReportListComponent
diff --git a/ng2-components/ng2-activiti-diagrams/package.json b/ng2-components/ng2-activiti-diagrams/package.json
index 993db32ae2..1f014cab7d 100644
--- a/ng2-components/ng2-activiti-diagrams/package.json
+++ b/ng2-components/ng2-activiti-diagrams/package.json
@@ -29,14 +29,14 @@
   },
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-activiti-form/package.json b/ng2-components/ng2-activiti-form/package.json
index fa6936d63c..be02df17b6 100644
--- a/ng2-components/ng2-activiti-form/package.json
+++ b/ng2-components/ng2-activiti-form/package.json
@@ -36,14 +36,14 @@
   ],
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.spec.ts b/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.spec.ts
index 7ebe56a731..2dcdd93c79 100644
--- a/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.spec.ts
@@ -16,8 +16,8 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatInputModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
+import { MaterialModule } from '../material.module';
 import { ErrorWidgetComponent } from '../widgets/error/error.component';
 import { FormRenderingService } from './../../services/form-rendering.service';
 import { WidgetVisibilityService } from './../../services/widget-visibility.service';
@@ -38,7 +38,7 @@ describe('FormFieldComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
                 imports: [CoreModule,
-                    MatInputModule
+                    MaterialModule
                 ],
                 declarations: [
                     FormFieldComponent,
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.spec.ts
index 5784be2bc7..5c9f942e28 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.spec.ts
@@ -24,12 +24,10 @@ import { ErrorWidgetComponent } from '../error/error.component';
 import { EcmModelService } from './../../../services/ecm-model.service';
 import { FormService } from './../../../services/form.service';
 import { FormFieldModel, FormFieldTypes, FormModel } from './../core/index';
-import { DynamicTableWidgetComponent } from './dynamic-table.widget';
-import { DynamicTableModel } from './dynamic-table.widget.model';
 import { DynamicTableColumn  } from './dynamic-table-column.model';
 import { DynamicTableRow  } from './dynamic-table-row.model';
-
-
+import { DynamicTableWidgetComponent } from './dynamic-table.widget';
+import { DynamicTableModel } from './dynamic-table.widget.model';
 
 import { BooleanEditorComponent } from './editors/boolean/boolean.editor';
 import { DateEditorComponent } from './editors/date/date.editor';
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.spec.ts
index 4dbd063c55..bff3c25609 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.spec.ts
@@ -18,8 +18,6 @@
 import { DynamicTableColumn  } from './../../dynamic-table-column.model';
 import { DynamicTableRow  } from './../../dynamic-table-row.model';
 
-
-
 import { BooleanEditorComponent } from './boolean.editor';
 
 describe('BooleanEditorComponent', () => {
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.spec.ts
index 41fc559d30..e966dc8ed9 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.spec.ts
@@ -21,11 +21,9 @@ import * as moment from 'moment';
 import { CoreModule } from 'ng2-alfresco-core';
 import { MaterialModule } from '../../../../material.module';
 import { FormFieldModel, FormModel } from '../../../index';
-import { DynamicTableModel } from './../../dynamic-table.widget.model';
 import { DynamicTableColumn  } from './../../dynamic-table-column.model';
 import { DynamicTableRow  } from './../../dynamic-table-row.model';
-
-
+import { DynamicTableModel } from './../../dynamic-table.widget.model';
 
 import { DateEditorComponent } from './date.editor';
 
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.spec.ts
index 3c7e55786b..186c12f9db 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.spec.ts
@@ -23,10 +23,10 @@ import { EcmModelService } from '../../../../../services/ecm-model.service';
 import { MaterialModule } from '../../../../material.module';
 import { FormService } from './../../../../../services/form.service';
 import { FormFieldModel, FormModel } from './../../../core/index';
-import { DynamicTableModel } from './../../dynamic-table.widget.model';
-import { DynamicTableColumn  } from './../../dynamic-table-column.model';
 import { DynamicTableColumnOption  } from './../../dynamic-table-column-option.model';
+import { DynamicTableColumn  } from './../../dynamic-table-column.model';
 import { DynamicTableRow  } from './../../dynamic-table-row.model';
+import { DynamicTableModel } from './../../dynamic-table.widget.model';
 
 import { DropdownEditorComponent } from './dropdown.editor';
 
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/row.editor.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/row.editor.spec.ts
index d136f47a1a..59c1e99079 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/row.editor.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/row.editor.spec.ts
@@ -17,11 +17,11 @@
 
 import { FormFieldModel, FormModel } from '../../index';
 import { FormService } from './../../../../services/form.service';
-import { RowEditorComponent } from './row.editor';
-import { DynamicTableModel } from './../dynamic-table.widget.model';
-import { DynamicTableColumn } from './../dynamic-table-column.model';
 import { DynamicRowValidationSummary } from './../dynamic-row-validation-summary.model';
+import { DynamicTableColumn } from './../dynamic-table-column.model';
 import { DynamicTableRow } from './../dynamic-table-row.model';
+import { DynamicTableModel } from './../dynamic-table.widget.model';
+import { RowEditorComponent } from './row.editor';
 
 describe('RowEditorComponent', () => {
 
diff --git a/ng2-components/ng2-activiti-processlist/package.json b/ng2-components/ng2-activiti-processlist/package.json
index ae4bdd6a82..72587673f5 100644
--- a/ng2-components/ng2-activiti-processlist/package.json
+++ b/ng2-components/ng2-activiti-processlist/package.json
@@ -35,14 +35,14 @@
   ],
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-activiti-tasklist/package.json b/ng2-components/ng2-activiti-tasklist/package.json
index 716c3a16b1..c3ae367379 100644
--- a/ng2-components/ng2-activiti-tasklist/package.json
+++ b/ng2-components/ng2-activiti-tasklist/package.json
@@ -39,14 +39,14 @@
   ],
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/apps-list.component.html b/ng2-components/ng2-activiti-tasklist/src/components/apps-list.component.html
index 440522ea05..498ce131f0 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/apps-list.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/apps-list.component.html
@@ -23,12 +23,13 @@
                         <div mat-card-title class="adf-app-listgrid-item-card-title">
                             <h1>{{getAppName(app) | async}}</h1>
                         </div>
-                        <div mat-card-subtitle class="adf-app-listgrid-item-card-subtitle" fxFlex="1 0 auto">
+                        <mat-card-subtitle class="adf-app-listgrid-item-card-subtitle" fxFlex="1 0 auto">
                             <p>{{app.description}}</p>
-                        </div>
-                        <div mat-card-actions class="adf-app-listgrid-item-card-actions">
+                        </mat-card-subtitle>
+
+                        <mat-card-actions class="adf-app-listgrid-item-card-actions">
                             <mat-icon class="adf-app-listgrid-item-card-actions-icon" *ngIf="isSelected(app.id)">done</mat-icon>
-                        </div>
+                        </mat-card-actions>
                 </mat-card>
         </div>
     </div>
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/apps-list.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/apps-list.component.spec.ts
index cb5af27c50..93ec3e0469 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/apps-list.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/apps-list.component.spec.ts
@@ -20,6 +20,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { AppsProcessService, CoreModule, TranslationService } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
+import { MaterialModule } from './material.module';
 
 import { TranslationMock } from '../assets/translation.service.mock';
 import { defaultApp, deployedApps, nonDeployedApps } from './../assets/apps-list.mock';
@@ -36,7 +37,8 @@ describe('AppsListComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                CoreModule
+                CoreModule,
+                MaterialModule
             ],
             declarations: [
                 AppsListComponent
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/material.module.ts b/ng2-components/ng2-activiti-tasklist/src/components/material.module.ts
index 932a745d98..d55ad24b44 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/material.module.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/material.module.ts
@@ -25,6 +25,7 @@ import {
     MatGridListModule,
     MatIconModule,
     MatInputModule,
+    MatListModule,
     MatNativeDateModule,
     MatProgressSpinnerModule,
     MatRippleModule,
@@ -46,7 +47,8 @@ export function modules() {
         MatGridListModule,
         MatRippleModule,
         MatTooltipModule,
-        MatChipsModule
+        MatChipsModule,
+        MatListModule
     ];
 }
 
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/task-filters.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/task-filters.component.spec.ts
index e547afe7d3..2eb981044d 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/task-filters.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/task-filters.component.spec.ts
@@ -22,6 +22,7 @@ import { Observable } from 'rxjs/Rx';
 import { TranslationMock } from '../assets/translation.service.mock';
 import { FilterParamsModel, FilterRepresentationModel } from '../models/filter.model';
 import { TaskListService } from '../services/tasklist.service';
+import { MaterialModule } from './material.module';
 import { TaskFiltersComponent } from './task-filters.component';
 
 describe('TaskFiltersComponent', () => {
@@ -64,7 +65,8 @@ describe('TaskFiltersComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                CoreModule
+                CoreModule,
+                MaterialModule
             ],
             declarations: [
                 TaskFiltersComponent
diff --git a/ng2-components/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json
index 5d899c19b3..fd809d87c7 100644
--- a/ng2-components/ng2-alfresco-core/package.json
+++ b/ng2-components/ng2-alfresco-core/package.json
@@ -44,14 +44,14 @@
   ],
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.spec.ts b/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.spec.ts
index dc1f4ff468..90a559b1c5 100644
--- a/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.spec.ts
@@ -16,10 +16,10 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatDatepickerModule, MatIconModule, MatInputModule, MatNativeDateModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Pagination } from 'alfresco-js-api';
+import { MaterialModule } from '../../material.module';
 import { InfinitePaginationComponent } from './infinite-pagination.component';
 
 describe('InfinitePaginationComponent', () => {
@@ -32,10 +32,7 @@ describe('InfinitePaginationComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 NoopAnimationsModule,
-                MatDatepickerModule,
-                MatIconModule,
-                MatInputModule,
-                MatNativeDateModule
+                MaterialModule
             ],
             declarations: [
                 InfinitePaginationComponent
diff --git a/ng2-components/ng2-alfresco-core/src/components/settings/host-settings.component.html b/ng2-components/ng2-alfresco-core/src/components/settings/host-settings.component.html
index 37b4c0cb88..912b7ef1bf 100644
--- a/ng2-components/ng2-alfresco-core/src/components/settings/host-settings.component.html
+++ b/ng2-components/ng2-alfresco-core/src/components/settings/host-settings.component.html
@@ -5,11 +5,11 @@
     </mat-toolbar>
 
     <mat-card class="adf-setting-card">
-        <mat-card-content>
-
-            <div *ngIf="providers==='ALL' || providers==='ECM'">
+        <div *ngIf="providers==='ALL' || providers==='ECM'">
+            <mat-card-header>
                 <mat-card-subtitle>{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}</mat-card-subtitle>
-
+            </mat-card-header>
+            <mat-card-content>
                 <mat-form-field class="full-width">
                     <mat-icon class="adf-CORE.HOST_SETTINGS-link-icon" matPrefix>link</mat-icon>
                     <input matInput
@@ -26,11 +26,14 @@
                     </mat-error>
                 </mat-form-field>
                 <p>
-            </div>
-            <p>
-            <div *ngIf="providers==='ALL' || providers==='BPM'">
-
+            </mat-card-content>
+        </div>
+        <p>
+        <div *ngIf="providers==='ALL' || providers==='BPM'">
+            <mat-card-header>
                 <mat-card-subtitle>{{'CORE.HOST_SETTINGS.BP-HOST' | translate }}</mat-card-subtitle>
+            </mat-card-header>
+            <mat-card-content>
 
                 <mat-form-field class="full-width">
                     <mat-icon class="adf-CORE.HOST_SETTINGS-link-icon" matPrefix>link</mat-icon>
@@ -47,8 +50,8 @@
                         {{ 'CORE.HOST_SETTINGS.NOT_VALID'| translate }}
                     </mat-error>
                 </mat-form-field>
-            </div>
-        </mat-card-content>
+            </mat-card-content>
+        </div>
         <mat-card-actions class="adf-CORE.HOST_SETTINGS-actions">
 
             <button mat-button onclick="window.history.back()" color="primary">
diff --git a/ng2-components/ng2-alfresco-core/src/material.module.ts b/ng2-components/ng2-alfresco-core/src/material.module.ts
index 6a9b9a3d18..40ec23064b 100644
--- a/ng2-components/ng2-alfresco-core/src/material.module.ts
+++ b/ng2-components/ng2-alfresco-core/src/material.module.ts
@@ -18,11 +18,13 @@
 import { NgModule } from '@angular/core';
 import {
     MatButtonModule,
+    MatCardModule,
     MatDialogModule,
     MatIconModule,
     MatInputModule,
     MatMenuModule,
     MatProgressBarModule,
+    MatProgressSpinnerModule,
     MatSnackBarModule,
     MatTabsModule,
     MatToolbarModule
@@ -34,11 +36,13 @@ export function modules() {
         MatDialogModule,
         MatInputModule,
         MatProgressBarModule,
+        MatProgressSpinnerModule,
         MatSnackBarModule,
         MatToolbarModule,
         MatTabsModule,
         MatMenuModule,
-        MatIconModule
+        MatIconModule,
+        MatCardModule
     ];
 }
 
diff --git a/ng2-components/ng2-alfresco-core/src/utils/momentDateAdapter.ts b/ng2-components/ng2-alfresco-core/src/utils/momentDateAdapter.ts
index ef14a4438a..b118654bf7 100644
--- a/ng2-components/ng2-alfresco-core/src/utils/momentDateAdapter.ts
+++ b/ng2-components/ng2-alfresco-core/src/utils/momentDateAdapter.ts
@@ -214,4 +214,7 @@ export class MomentDateAdapter extends DateAdapter<Moment> {
         return this.isValid(d) ? d : null;
     }
 
+    invalid(): Moment {
+        return moment.invalid();
+    }
 }
diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json
index b3b57b3527..6d203a4734 100644
--- a/ng2-components/ng2-alfresco-datatable/package.json
+++ b/ng2-components/ng2-alfresco-datatable/package.json
@@ -35,14 +35,14 @@
   ],
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json
index 000ec8a1fa..b2fef7f0b2 100644
--- a/ng2-components/ng2-alfresco-documentlist/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/package.json
@@ -43,14 +43,14 @@
   ],
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-alfresco-login/package.json b/ng2-components/ng2-alfresco-login/package.json
index b007569a14..b48909d336 100644
--- a/ng2-components/ng2-alfresco-login/package.json
+++ b/ng2-components/ng2-alfresco-login/package.json
@@ -47,14 +47,14 @@
   ],
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-alfresco-search/package.json b/ng2-components/ng2-alfresco-search/package.json
index 55cc3dca1f..2e7f825513 100644
--- a/ng2-components/ng2-alfresco-search/package.json
+++ b/ng2-components/ng2-alfresco-search/package.json
@@ -43,14 +43,14 @@
   ],
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-alfresco-social/package.json b/ng2-components/ng2-alfresco-social/package.json
index fdad0a685f..c89857b37b 100644
--- a/ng2-components/ng2-alfresco-social/package.json
+++ b/ng2-components/ng2-alfresco-social/package.json
@@ -23,14 +23,14 @@
   },
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-alfresco-social/src/components/like.component.spec.ts b/ng2-components/ng2-alfresco-social/src/components/like.component.spec.ts
index 28e760fec8..575270414a 100644
--- a/ng2-components/ng2-alfresco-social/src/components/like.component.spec.ts
+++ b/ng2-components/ng2-alfresco-social/src/components/like.component.spec.ts
@@ -19,6 +19,7 @@ import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
 import { LikeComponent } from '../components/like.component';
+import { MaterialModule } from '../material.module';
 import { RatingService } from '../services/rating.service';
 
 declare let jasmine: any;
@@ -33,7 +34,8 @@ describe('Like component', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                CoreModule
+                CoreModule,
+                MaterialModule
             ],
             declarations: [
                 LikeComponent
diff --git a/ng2-components/ng2-alfresco-social/src/components/rating.component.spec.ts b/ng2-components/ng2-alfresco-social/src/components/rating.component.spec.ts
index 45d2acde40..2be4c57935 100644
--- a/ng2-components/ng2-alfresco-social/src/components/rating.component.spec.ts
+++ b/ng2-components/ng2-alfresco-social/src/components/rating.component.spec.ts
@@ -19,6 +19,7 @@ import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
 import { RatingComponent } from '../components/rating.component';
+import { MaterialModule } from '../material.module';
 import { RatingService } from '../services/rating.service';
 
 declare let jasmine: any;
@@ -33,7 +34,8 @@ describe('Rating component', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                CoreModule
+                CoreModule,
+                MaterialModule
             ],
             declarations: [
                 RatingComponent
diff --git a/ng2-components/ng2-alfresco-tag/package.json b/ng2-components/ng2-alfresco-tag/package.json
index 122650781c..3761a933a7 100644
--- a/ng2-components/ng2-alfresco-tag/package.json
+++ b/ng2-components/ng2-alfresco-tag/package.json
@@ -23,14 +23,14 @@
   },
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-alfresco-tag/src/components/material.module.ts b/ng2-components/ng2-alfresco-tag/src/components/material.module.ts
index 35cdc0f662..37d77188cd 100644
--- a/ng2-components/ng2-alfresco-tag/src/components/material.module.ts
+++ b/ng2-components/ng2-alfresco-tag/src/components/material.module.ts
@@ -17,12 +17,12 @@
 
 import { NgModule } from '@angular/core';
 import {
-    MatButtonModule, MatChipsModule, MatIconModule, MatInputModule
+    MatButtonModule, MatChipsModule, MatIconModule, MatInputModule, MatListModule
 } from '@angular/material';
 
 export function modules() {
     return [
-        MatButtonModule, MatInputModule, MatChipsModule, MatIconModule
+        MatButtonModule, MatInputModule, MatChipsModule, MatIconModule, MatListModule
     ];
 }
 
diff --git a/ng2-components/ng2-alfresco-upload/package.json b/ng2-components/ng2-alfresco-upload/package.json
index b08302d9b9..e61cd479e9 100644
--- a/ng2-components/ng2-alfresco-upload/package.json
+++ b/ng2-components/ng2-alfresco-upload/package.json
@@ -44,14 +44,14 @@
   ],
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-alfresco-userinfo/package.json b/ng2-components/ng2-alfresco-userinfo/package.json
index 65b40c217a..b3ef6a83ba 100644
--- a/ng2-components/ng2-alfresco-userinfo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/package.json
@@ -23,14 +23,14 @@
   },
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json
index 518a29858d..de80354932 100644
--- a/ng2-components/ng2-alfresco-viewer/package.json
+++ b/ng2-components/ng2-alfresco-viewer/package.json
@@ -38,14 +38,14 @@
   ],
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/ng2-alfresco-webscript/package.json b/ng2-components/ng2-alfresco-webscript/package.json
index cd5f075d4d..3fc03c1290 100644
--- a/ng2-components/ng2-alfresco-webscript/package.json
+++ b/ng2-components/ng2-alfresco-webscript/package.json
@@ -23,14 +23,14 @@
   },
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
diff --git a/ng2-components/package.json b/ng2-components/package.json
index 14e11858da..baec372a99 100644
--- a/ng2-components/package.json
+++ b/ng2-components/package.json
@@ -65,20 +65,19 @@
   },
   "dependencies": {
     "@angular/animations": "5.0.0",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "@angular/common": "5.0.0",
     "@angular/compiler": "5.0.0",
     "@angular/core": "5.0.0",
     "@angular/flex-layout": "2.0.0-beta.10",
     "@angular/forms": "5.0.0",
     "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.0",
     "@angular/platform-browser-dynamic": "5.0.0",
     "@angular/router": "5.0.0",
     "@ngx-translate/core": "8.0.0",
     "alfresco-js-api": "1.9.0",
-    "classlist.js": "1.1.20150312",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "moment": "2.15.2",