diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index c1a95d40d3..b4e1d3c493 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -1,6 +1,6 @@
 <table
     *ngIf="data"
-    class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
+    class="mdl-data-table mdl-js-data-table full-width">
     <thead>
     <tr>
         <!-- Columns -->
@@ -63,10 +63,10 @@
 
         <td *ngIf="actions">
             <!-- action menu -->
-            <button [id]="'action_menu_' + idx" class="mdl-button mdl-js-button mdl-button--icon">
+            <button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon">
                 <i class="material-icons">more_vert</i>
             </button>
-            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+            <ul alfresco-mdl-menu class="mdl-menu--bottom-right"
                 [attr.for]="'action_menu_' + idx">
                 <li class="mdl-menu__item"
                     [attr.data-automation-id]="action.title"
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
index 8c1ac4e0e4..f72b200561 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
@@ -27,6 +27,7 @@ import {
 } from '@angular/core';
 
 import {
+    MATERIAL_DESIGN_DIRECTIVES,
     CONTEXT_MENU_DIRECTIVES,
     AlfrescoPipeTranslate
 } from 'ng2-alfresco-core';
@@ -48,7 +49,7 @@ declare let __moduleName: string;
     selector: 'alfresco-datatable',
     styleUrls: ['./datatable.component.css'],
     templateUrl: './datatable.component.html',
-    directives: [CONTEXT_MENU_DIRECTIVES],
+    directives: [MATERIAL_DESIGN_DIRECTIVES, CONTEXT_MENU_DIRECTIVES],
     pipes: [AlfrescoPipeTranslate]
 })
 export class DataTableComponent implements OnInit, AfterViewChecked {
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.css b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.css
index 7b7c196ecf..02fa295a28 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.css
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.css
@@ -4,8 +4,7 @@
     text-align: left;
     padding: 8px 15px;
     list-style: none;
-    background-color: #f5f5f5;
-    border-radius: 4px;
+    background-color: #fafafa;
     margin: 0 0 4px;
 }
 
@@ -15,11 +14,29 @@
 }
 
 :host .breadcrumb > li+li:before {
-    content: "/\00a0";
+    content: ">\00a0";
     padding: 0 0 0 5px;
-    color: #ccc;
+    opacity: 0.54;
+    color: #000000;
 }
 
-:host .breadcrumb > .active {
-    color: #777;
+:host .breadcrumb > li > a {
+    text-decoration: none;
+    opacity: 0.54;
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.43;
+    letter-spacing: -0.2px;
+    color: #000000;
+}
+
+:host .breadcrumb > li:hover > a,
+:host .breadcrumb > .active {
+    opacity: 0.87;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.43;
+    letter-spacing: -0.2px;
+    color: #000000;
 }