diff --git a/src/app/core/components/navigation/navigation.service.ts b/src/app/core/components/navigation/navigation.service.ts
index b468ec37..ca22f6ed 100644
--- a/src/app/core/components/navigation/navigation.service.ts
+++ b/src/app/core/components/navigation/navigation.service.ts
@@ -5,6 +5,7 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 @Injectable()
 export class FuseNavigationService
 {
+    onNavCollapseToggle = new EventEmitter<any>();
     onNavCollapseToggled = new EventEmitter<any>();
     onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
     navigationModel: NavigationModel;
diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
index e4baa861..f215bf6a 100644
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
+++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
@@ -43,7 +43,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         this.navigationService.onNavCollapseToggled
             .subscribe(
                 (clickedItem) => {
-                    if ( clickedItem.children )
+                    if ( clickedItem && clickedItem.children )
                     {
                         // Check if the clicked item is one
                         // of the children of this item
@@ -82,6 +82,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
 
         // Navigation collapse toggled...
         this.navigationService.onNavCollapseToggled.emit(this.item);
+        this.navigationService.onNavCollapseToggle.emit();
     }
 
     /**
@@ -95,6 +96,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         }
 
         this.isOpen = true;
+        this.navigationService.onNavCollapseToggle.emit();
     }
 
     /**
@@ -107,6 +109,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
             return;
         }
         this.isOpen = false;
+        this.navigationService.onNavCollapseToggle.emit();
     }
 
     /**
diff --git a/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html b/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html
index 9a8cda10..d5ba8217 100644
--- a/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html
+++ b/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html
@@ -1,8 +1,8 @@
 <div id="ngx-datatable" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
-    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between">
-        <div fxLayout="column" fxLayoutAlign="center start">
+    <div class="header md-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
+        <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                 <md-icon class="secondary-text s-16">home</md-icon>
                 <md-icon class="secondary-text s-16">chevron_right</md-icon>
@@ -11,14 +11,12 @@
             <div class="h2 mt-16">ngx-datatable</div>
         </div>
 
-        <div fxLayout="row" fxLayoutAlign="start center">
-            <a md-raised-button class="md-white-bg"
-               href="https://github.com/swimlane/ngx-datatable"
-               target="_blank">
-                <md-icon>link</md-icon>
-                <span>Reference</span>
-            </a>
-        </div>
+        <a md-raised-button class="reference-button md-white-bg mt-16 mt-sm-0"
+           href="https://github.com/swimlane/ngx-datatable"
+           target="_blank">
+            <md-icon>link</md-icon>
+            <span>Reference</span>
+        </a>
     </div>
     <!-- / HEADER -->
 
diff --git a/src/app/main/content/components/angular-material/angular-material.component.html b/src/app/main/content/components/angular-material/angular-material.component.html
index 53eac738..4e97c075 100644
--- a/src/app/main/content/components/angular-material/angular-material.component.html
+++ b/src/app/main/content/components/angular-material/angular-material.component.html
@@ -1,9 +1,9 @@
 <div class="page-layout simple fullwidth angular-material-element" fusePerfectScrollbar>
 
     <!-- HEADER -->
-    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="header md-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
 
-        <div fxLayout="column" fxLayoutAlign="center start">
+        <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                 <md-icon class="secondary-text s-16">home</md-icon>
                 <md-icon class="secondary-text s-16">chevron_right</md-icon>
@@ -14,7 +14,7 @@
             <div class="h2 mt-16">{{title}}</div>
         </div>
 
-        <a md-raised-button class="reference-button md-white-bg" href="https://material.io/icons/" target="_blank">
+        <a md-raised-button class="reference-button md-white-bg mt-16 mt-sm-0" href="https://material.io/icons/" target="_blank">
             <md-icon>link</md-icon>
             <span>Reference</span>
         </a>
diff --git a/src/app/main/content/ui/colors/colors.component.html b/src/app/main/content/ui/colors/colors.component.html
index ec3b0082..44048a05 100644
--- a/src/app/main/content/ui/colors/colors.component.html
+++ b/src/app/main/content/ui/colors/colors.component.html
@@ -1,9 +1,9 @@
 <div id="material-colors" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
 
     <!-- HEADER -->
-    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="header md-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
 
-        <div fxLayout="column" fxLayoutAlign="center start">
+        <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                 <md-icon class="secondary-text s-16">home</md-icon>
                 <md-icon class="secondary-text s-16">chevron_right</md-icon>
@@ -12,7 +12,7 @@
             <div class="h1 mt-16">Colors</div>
         </div>
 
-        <a md-raised-button class="reference-button md-white-bg"
+        <a md-raised-button class="reference-button md-white-bg mt-16 mt-sm-0"
            href="https://www.google.com/design/spec/style/color.html#color-color-palette"
            target="_blank">
             <md-icon>link</md-icon>
diff --git a/src/app/main/content/ui/icons/icons.component.html b/src/app/main/content/ui/icons/icons.component.html
index 653b4d82..a34b3312 100644
--- a/src/app/main/content/ui/icons/icons.component.html
+++ b/src/app/main/content/ui/icons/icons.component.html
@@ -1,9 +1,9 @@
 <div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
 
     <!-- HEADER -->
-    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="header md-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
 
-        <div fxLayout="column" fxLayoutAlign="center start">
+        <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                 <md-icon class="secondary-text s-16">home</md-icon>
                 <md-icon class="secondary-text s-16">chevron_right</md-icon>
@@ -12,7 +12,7 @@
             <div class="h1 mt-16">Icons</div>
         </div>
 
-        <a md-raised-button class="reference-button md-white-bg" href="https://material.angular.io" target="_blank">
+        <a md-raised-button class="reference-button md-white-bg mt-16 mt-sm-0" href="https://material.angular.io" target="_blank">
             <md-icon>link</md-icon>
             <span>Reference</span>
         </a>
diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.ts b/src/app/main/navbar/vertical/navbar-vertical.component.ts
index 71c7b8bf..1c20080b 100644
--- a/src/app/main/navbar/vertical/navbar-vertical.component.ts
+++ b/src/app/main/navbar/vertical/navbar-vertical.component.ts
@@ -43,8 +43,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
     {
         navBarService.setNavBar(this);
 
-        this.fuseNavigationService.onNavCollapseToggled.subscribe(() => {
-
+        this.fuseNavigationService.onNavCollapseToggle.subscribe(() => {
             setTimeout(() => {
                 this.fusePerfectScrollbarDirective.update();
             }, 310);
diff --git a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html
index 78370e44..3af4634f 100644
--- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html
+++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html
@@ -3,7 +3,7 @@
     <input mdInput placeholder="State" aria-label="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
     <md-autocomplete #auto="mdAutocomplete">
       <md-option *ngFor="let state of filteredStates | async" [value]="state.name">
-        <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
+        <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" width="25" />
         <span>{{ state.name }}</span> |
         <small>Population: {{state.population}}</small>
       </md-option>