diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html
index cb36549e..71b95e66 100644
--- a/src/@fuse/components/theme-options/theme-options.component.html
+++ b/src/@fuse/components/theme-options/theme-options.component.html
@@ -14,7 +14,7 @@
 
         <h3>Navigation:</h3>
         <mat-radio-group [(ngModel)]="config.layout.navigation" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+                         fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
             <mat-radio-button class="mr-8 mb-8" value="top">Top</mat-radio-button>
             <mat-radio-button class="mr-8 mb-8" value="left">Left</mat-radio-button>
             <mat-radio-button class="mr-8 mb-8" value="right">Right</mat-radio-button>
@@ -29,7 +29,7 @@
 
         <h3 class="mt-24">Toolbar:</h3>
         <mat-radio-group [(ngModel)]="config.layout.toolbar" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+                         fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
             <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
             <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
             <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
@@ -37,7 +37,7 @@
 
         <h3 class="mt-24">Footer:</h3>
         <mat-radio-group [(ngModel)]="config.layout.footer" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+                         fxLayout="column" fxLayout.gt-xs="row  wrap" fxLayoutAlign="start start">
             <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
             <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
             <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
@@ -45,7 +45,7 @@
 
         <h3 class="mt-24">Layout Mode:</h3>
         <mat-radio-group [(ngModel)]="config.layout.mode" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+                         fxLayout="column" fxLayout.gt-xs="row  wrap" fxLayoutAlign="start start">
             <mat-radio-button class="mr-8 mb-8" value="boxed">Boxed</mat-radio-button>
             <mat-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</mat-radio-button>
         </mat-radio-group>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 92291436..3f215833 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,7 +9,6 @@ import 'hammerjs';
 import { FuseModule } from '@fuse/fuse.module';
 import { FuseSharedModule } from '@fuse/shared.module';
 
-// import { SharedModule } from 'app/shared/shared.module';
 import { fuseConfig } from './fuse-config';
 
 import { AppComponent } from './app.component';
@@ -17,7 +16,6 @@ import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
 import { FuseMainModule } from './main/main.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { AppStoreModule } from './store/store.module';
-import { MaterialModule } from '@fuse/modules/material.module';
 
 const appRoutes: Routes = [
     {
@@ -65,9 +63,6 @@ const appRoutes: Routes = [
             passThruUnknownUrl: true
         }),
 
-        // SharedModule,
-        // MaterialModule,
-
         // Fuse Main and Shared modules
         FuseModule.forRoot(fuseConfig),
         FuseSharedModule,
diff --git a/src/app/main/content/apps/academy/courses/courses.component.html b/src/app/main/content/apps/academy/courses/courses.component.html
index 870d3764..0231aa27 100644
--- a/src/app/main/content/apps/academy/courses/courses.component.html
+++ b/src/app/main/content/apps/academy/courses/courses.component.html
@@ -46,7 +46,7 @@
 
             </div>
 
-            <div class="courses" fxLayout="row" fxLayoutAlign="center" fxLayoutWrap>
+            <div class="courses" fxLayout="row wrap" fxLayoutAlign="center">
 
                 <div class="course" *ngFor="let course of filteredCourses" fxFlex="100" fxFlex.gt-xs="50"
                      fxFlex.gt-sm="33" [ngClass]="course.category">
diff --git a/src/app/main/content/apps/dashboards/analytics/analytics.component.html b/src/app/main/content/apps/dashboards/analytics/analytics.component.html
index 9c8f35f2..b430bcca 100644
--- a/src/app/main/content/apps/dashboards/analytics/analytics.component.html
+++ b/src/app/main/content/apps/dashboards/analytics/analytics.component.html
@@ -55,7 +55,7 @@
 
                     <div class="fuse-card auto-width mb-32" [ngClass.gt-sm]="'mb-0 mr-32'">
 
-                        <div class="p-16 pb-0" fxLayout="row" fxLayoutAlign="start end" fxLayoutWrap>
+                        <div class="p-16 pb-0" fxLayout="row wrap" fxLayoutAlign="start end">
 
                             <div class="pr-16">
                                 <div class="h3 secondary-text">Conversion</div>
@@ -100,7 +100,7 @@
 
                     <div class="fuse-card auto-width mb-32" [ngClass.gt-sm]="'mb-0 mr-32'">
 
-                        <div class="p-16 pb-0" fxLayout="row" fxLayoutAlign="start end" fxLayoutWrap>
+                        <div class="p-16 pb-0" fxLayout="row wrap" fxLayoutAlign="start end">
 
                             <div class="pr-16">
                                 <div class="h3 secondary-text">Impressions</div>
@@ -145,7 +145,7 @@
 
                     <div class="fuse-card auto-width">
 
-                        <div class="p-16 pb-0" fxLayout="row" fxLayoutAlign="start end" fxLayoutWrap>
+                        <div class="p-16 pb-0" fxLayout="row wrap" fxLayoutAlign="start end">
 
                             <div class="pr-16">
                                 <div class="h3 secondary-text">Visits</div>
@@ -262,8 +262,7 @@
 
         <div class="right">
 
-            <div fxLayout="row" fxLayoutWrap
-                 fxLayout.gt-md="column">
+            <div fxLayout="row wrap" fxLayout.gt-md="column">
 
                 <!-- Widget 7 -->
                 <div class="mb-48" [ngClass.lt-lg]="'mr-32'">
diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/content/apps/dashboards/project/project.component.html
index a93f76fb..6f870a85 100644
--- a/src/app/main/content/apps/dashboards/project/project.component.html
+++ b/src/app/main/content/apps/dashboards/project/project.component.html
@@ -44,7 +44,7 @@
 
                     <mat-tab label="Home">
 
-                        <div class="widget-group grey-100-bg p-12" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom
+                        <div class="widget-group grey-100-bg p-12" fxLayout="row wrap" fxFlex="100" *fuseIfOnDom
                              [@animateStagger]="{value:'50'}">
 
                             <!-- WIDGET 1 -->
@@ -259,8 +259,8 @@
                                 <!-- Front -->
                                 <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
 
-                                    <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"
-                                         fxLayoutWrap>
+                                    <div class="px-16 border-bottom" fxLayout="row wrap"
+                                         fxLayoutAlign="space-between center">
 
                                         <div fxFlex class="py-16 h3">{{widgets.widget5.title}}</div>
 
@@ -274,7 +274,7 @@
                                         </div>
                                     </div>
 
-                                    <div fxLayout="row" fxLayoutAlign="start start" fxLayoutWrap>
+                                    <div fxLayout="row wrap" fxLayoutAlign="start start">
 
                                         <div class="h-420 my-16" fxLayout="row" fxFlex="100" fxFlex.gt-sm="50">
                                             <ngx-charts-bar-vertical-stacked
@@ -293,8 +293,7 @@
                                             </ngx-charts-bar-vertical-stacked>
                                         </div>
 
-                                        <div class="my-16" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="row"
-                                             fxLayoutWrap>
+                                        <div class="my-16" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="row wrap">
 
                                             <div fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="center"
                                                  *ngFor="let widget of widgets.widget5.supporting | keys"
@@ -367,8 +366,8 @@
                                         </ngx-charts-pie-chart>
                                     </div>
 
-                                    <div class="py-8 mh-16 border-top" fxLayout="row" fxLayoutAlign="start center"
-                                         fxLayoutWrap>
+                                    <div class="py-8 mh-16 border-top" fxLayout="row wrap" fxLayoutAlign="start center">
+
                                         <div class="py-8 border-right" fxLayout="column" fxLayoutAlign="center center"
                                              fxFlex="100" fxFlex.gt-sm="50">
                                             <span class="mat-display-1 mb-0">
@@ -442,7 +441,7 @@
                     <mat-tab label="Budget Summary">
 
                         <!-- WIDGET GROUP -->
-                        <div class="widget-group grey-100-bg" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom
+                        <div class="widget-group grey-100-bg" fxLayout="row wrap" fxFlex="100" *fuseIfOnDom
                              [@animateStagger]="{value:'50'}">
 
                             <!-- WIDGET 8 -->
@@ -496,7 +495,8 @@
                                         </mat-form-field>
                                     </div>
 
-                                    <div class="px-16 py-24" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
+                                    <div class="px-16 py-24" fxLayout="column" fxLayoutAlign="center"
+                                         fxLayout.gt-xs="row"
                                          fxLayoutAlign.gt-xs="space-between end">
                                         <div fxFlex="0 1 auto">
                                             <div class="h4 secondary-text">{{widgets.widget9.weeklySpent.title}}</div>
@@ -523,7 +523,8 @@
                                         </div>
                                     </div>
 
-                                    <div class="px-16 py-24" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
+                                    <div class="px-16 py-24" fxLayout="column" fxLayoutAlign="center"
+                                         fxLayout.gt-xs="row"
                                          fxLayoutAlign.gt-xs="space-between end">
                                         <div fxFlex="0 1 auto">
                                             <div class="h4 secondary-text">{{widgets.widget9.totalSpent.title}}</div>
@@ -550,7 +551,8 @@
                                         </div>
                                     </div>
 
-                                    <div class="px-16 py-24" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
+                                    <div class="px-16 py-24" fxLayout="column" fxLayoutAlign="center"
+                                         fxLayout.gt-xs="row"
                                          fxLayoutAlign.gt-xs="space-between end">
                                         <div fxFlex="0 1 auto">
                                             <div class="h4 secondary-text">{{widgets.widget9.remaining.title}}</div>
@@ -641,7 +643,7 @@
                     <mat-tab label="Team Members">
 
                         <!-- WIDGET GROUP -->
-                        <div class="widget-group grey-100-bg" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom
+                        <div class="widget-group grey-100-bg" fxLayout="row wrap" fxFlex="100" *fuseIfOnDom
                              [@animateStagger]="{value:'50'}">
 
                             <!-- WIDGET 11 -->
diff --git a/src/app/main/content/apps/e-commerce/dashboard/dashboard.component.html b/src/app/main/content/apps/e-commerce/dashboard/dashboard.component.html
index 4853088e..49164a6b 100644
--- a/src/app/main/content/apps/e-commerce/dashboard/dashboard.component.html
+++ b/src/app/main/content/apps/e-commerce/dashboard/dashboard.component.html
@@ -4,7 +4,7 @@
     <div class="content p-24 w-100-p">
 
         <!-- WIDGET GROUP -->
-        <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap fxLayoutAlign="start start" *fuseIfOnDom [@animateStagger]="{value:'50'}">
+        <div class="widget-group" fxLayout="row wrap" fxFlex="100" fxLayoutAlign="start start" *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
             <!-- WIDGET 1 -->
             <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
@@ -191,7 +191,7 @@
                 <!-- Front -->
                 <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
 
-                    <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutWrap>
+                    <div class="px-16 border-bottom" fxLayout="row wrap" fxLayoutAlign="space-between center">
 
                         <div fxFlex class="py-8 h3">{{widgets.widget5.title}}</div>
 
@@ -259,7 +259,7 @@
                         </ngx-charts-pie-chart>
                     </div>
 
-                    <div class="py-8 mh-16 border-top" fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
+                    <div class="py-8 mh-16 border-top" fxLayout="row wrap" fxLayoutAlign="start center">
                         <div class="py-8 border-right" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxFlex.gt-sm="50">
                             <span class="mat-display-1 mb-0">{{widgets.widget6.footerLeft.count[widget6.currentRange]}}</span>
                             <span class="h4">{{widgets.widget6.footerLeft.title}}</span>
diff --git a/src/app/main/content/apps/e-commerce/product/product.component.html b/src/app/main/content/apps/e-commerce/product/product.component.html
index 8272e994..b9280c94 100644
--- a/src/app/main/content/apps/e-commerce/product/product.component.html
+++ b/src/app/main/content/apps/e-commerce/product/product.component.html
@@ -125,7 +125,7 @@
 
                         <mat-tab label="Product Images">
                             <div class="tab-content p-24" fusePerfectScrollbar>
-                                <div fxLayout="row" fxLayoutAlign="start start" fxLayoutWrap>
+                                <div fxLayout="row wrap" fxLayoutAlign="start start">
 
                                     <div *ngIf="product.images.length === 0"
                                          class="product-image" fxlayout="row" fxLayoutAlign="center center">
diff --git a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.html b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.html
index 765aca1c..e87f3c9e 100644
--- a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.html
+++ b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.html
@@ -14,7 +14,7 @@
         <div>
             <div class="subject" flex>{{mail.subject}}</div>
 
-            <div class="labels" fxLayout="row" fxLayoutWrap>
+            <div class="labels" fxLayout="row wrap">
                 <div class="label" *ngFor="let labelId of mail.labels"
                      fxLayout="row" fxLayoutAlign="start center">
                     <div class="label-color" [ngStyle]="{'background-color': (labels$ | async) | getById:labelId:'color'}"></div>
@@ -121,7 +121,7 @@
             ({{mail.attachments.length}})
         </div>
 
-        <div class="attachment-list" fxLayout="row" fxLayoutWrap>
+        <div class="attachment-list" fxLayout="row wrap">
 
             <div class="attachment" fxLayout="column"
                  *ngFor="let attachment of mail.attachments">
diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html
index 80841ec0..f9224cbc 100644
--- a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html
+++ b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html
@@ -33,7 +33,7 @@
                     {{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
                 </div>
 
-                <div class="labels" fxLayout="row" fxLayoutWrap fxHide fxShow.gt-sm>
+                <div class="labels" fxLayout="row wrap" fxHide fxShow.gt-sm>
                     <div class="label" *ngFor="let labelId of mail.labels"
                          fxLayout="row" fxLayoutAlign="start center">
                         <div class="label-color"
diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.html b/src/app/main/content/apps/mail/mail-details/mail-details.component.html
index 87b785b2..220f4578 100644
--- a/src/app/main/content/apps/mail/mail-details/mail-details.component.html
+++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.html
@@ -14,7 +14,7 @@
         <div>
             <div class="subject" flex>{{mail.subject}}</div>
 
-            <div class="labels" fxLayout="row" fxLayoutWrap>
+            <div class="labels" fxLayout="row wrap">
                 <div class="label" *ngFor="let labelId of mail.labels"
                      fxLayout="row" fxLayoutAlign="start center">
                     <div class="label-color" [ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div>
@@ -122,7 +122,7 @@
             ({{mail.attachments.length}})
         </div>
 
-        <div class="attachment-list" fxLayout="row" fxLayoutWrap>
+        <div class="attachment-list" fxLayout="row wrap">
 
             <div class="attachment" fxLayout="column"
                  *ngFor="let attachment of mail.attachments">
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
index 5d8e3c14..6d4d2872 100644
--- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
+++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
@@ -34,7 +34,7 @@
                     {{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
                 </div>
 
-                <div class="labels" fxLayout="row" fxLayoutWrap fxHide fxShow.gt-sm>
+                <div class="labels" fxLayout="row wrap" fxHide fxShow.gt-sm>
                     <div class="label" *ngFor="let labelId of mail.labels"
                          fxLayout="row" fxLayoutAlign="start center">
                         <div class="label-color"
diff --git a/src/app/main/content/apps/scrumboard/board/board.component.html b/src/app/main/content/apps/scrumboard/board/board.component.html
index 173a4e59..0a96df8a 100644
--- a/src/app/main/content/apps/scrumboard/board/board.component.html
+++ b/src/app/main/content/apps/scrumboard/board/board.component.html
@@ -5,7 +5,7 @@
         <!-- HEADER -->
         <div class="header mat-accent-bg p-16 p-mat-24" [ngClass]="'mat-'+board.settings.color+'-bg'" fxLayout="column">
 
-            <div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex="1 0 auto" fxLayoutWrap>
+            <div class="header-content" fxLayout="row wrap" fxLayoutAlign="space-between" fxFlex="1 0 auto">
 
                 <!-- BOARD SELECTION BUTTON -->
                 <div fxLayout="row" fxLayoutAlign="center center" fxFlexOrder="2" fxFlexOrder.gt-xs="1">
diff --git a/src/app/main/content/apps/scrumboard/board/list/card/card.component.html b/src/app/main/content/apps/scrumboard/board/list/card/card.component.html
index b743a474..aca1da48 100644
--- a/src/app/main/content/apps/scrumboard/board/list/card/card.component.html
+++ b/src/app/main/content/apps/scrumboard/board/list/card/card.component.html
@@ -15,9 +15,7 @@
     <!-- /CARD SORT HANDLE -->
 
     <!-- CARD LABELS -->
-    <div *ngIf="card.idLabels.length > 0"
-         class="list-card-labels"
-         fxLayout="row" fxLayoutWrap>
+    <div *ngIf="card.idLabels.length > 0" class="list-card-labels" fxLayout="row wrap">
 
         <span class="list-card-label"
               [ngClass]="board.labels | getById:labelId:'color'"
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.html b/src/app/main/content/apps/scrumboard/scrumboard.component.html
index 0a856db9..5841724d 100644
--- a/src/app/main/content/apps/scrumboard/scrumboard.component.html
+++ b/src/app/main/content/apps/scrumboard/scrumboard.component.html
@@ -6,8 +6,8 @@
     </div>
 
     <!-- BOARD LIST -->
-    <div class="board-list" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap
-         *fuseIfOnDom [@animateStagger]="{value:'50'}">
+    <div class="board-list" fxFlex="0 0 auto" fxLayout="row wrap" fxLayoutAlign="center center" *fuseIfOnDom
+         [@animateStagger]="{value:'50'}">
 
         <!-- BOARD -->
         <div class="board-list-item" *ngFor="let board of boards"
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.html b/src/app/main/content/apps/todo/todo-details/todo-details.component.html
index 9c30f633..0c1a4766 100644
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.html
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.html
@@ -63,7 +63,7 @@
                 </textarea>
             </mat-form-field>
 
-            <div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap>
+            <div class="tags mb-24" fxFlexFill fxLayout="row wrap">
                 <div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags">
 
                     <div class="tag-color" [ngStyle]="{'background-color': tags | getById:tagId:'color'}"></div>
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html
index 5bc16197..7af49a8f 100644
--- a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html
+++ b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html
@@ -20,7 +20,7 @@
                 {{todo.notes}}
             </div>
 
-            <div class="tags" fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
+            <div class="tags" fxLayout="row wrap" fxLayoutAlign="start center">
 
                 <div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags">
                     <div class="tag-color" [ngStyle]="{'background-color': tags | getById:tagId:'color'}"></div>
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.component.html b/src/app/main/content/pages/knowledge-base/knowledge-base.component.html
index ade919a6..438e0a82 100644
--- a/src/app/main/content/pages/knowledge-base/knowledge-base.component.html
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.component.html
@@ -14,7 +14,7 @@
     <!-- CONTENT -->
     <div class="content p-24">
 
-        <div fxLayout="row" fxLayoutAlign="center" fxLayoutWrap>
+        <div fxLayout="row wrap" fxLayoutAlign="center">
 
             <mat-nav-list class="articles-list mat-white-bg mat-elevation-z4" *ngFor="let category of knowledgeBase">
 
diff --git a/src/app/main/content/pages/pricing/style-1/style-1.component.html b/src/app/main/content/pages/pricing/style-1/style-1.component.html
index b63d68e0..d006775d 100644
--- a/src/app/main/content/pages/pricing/style-1/style-1.component.html
+++ b/src/app/main/content/pages/pricing/style-1/style-1.component.html
@@ -20,7 +20,7 @@
     <div class="content" fxLayout="column">
 
         <!-- PRICE TABLES -->
-        <div class="price-tables" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
+        <div class="price-tables" fxLayout="row wrap" fxLayoutAlign="center center">
 
             <div class="price-table style-1 mat-elevation-z4" fxLayout="column">
 
@@ -131,7 +131,7 @@
         </div>
         <!-- / PRICE TABLES -->
 
-        <div class="faq" fxLayout="row" fxLayoutWrap>
+        <div class="faq" fxLayout="row wrap">
 
             <div class="title" fxFlex="100">Frequently Asked Questions</div>
 
diff --git a/src/app/main/content/pages/pricing/style-2/style-2.component.html b/src/app/main/content/pages/pricing/style-2/style-2.component.html
index b79554e8..d79f0b5e 100644
--- a/src/app/main/content/pages/pricing/style-2/style-2.component.html
+++ b/src/app/main/content/pages/pricing/style-2/style-2.component.html
@@ -20,7 +20,7 @@
     <div class="content" fxLayout="column">
 
         <!-- PRICE TABLES -->
-        <div class="price-tables" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
+        <div class="price-tables" fxLayout="row wrap" fxLayoutAlign="center center">
 
             <div class="price-table style-2 mat-elevation-z4" fxLayout="column">
 
@@ -117,7 +117,7 @@
         </div>
         <!-- / PRICE TABLES -->
 
-        <div class="faq" fxLayout="row" fxLayoutWrap>
+        <div class="faq" fxLayout="row wrap">
 
             <div class="title" fxFlex="100">Frequently Asked Questions</div>
 
diff --git a/src/app/main/content/pages/pricing/style-3/style-3.component.html b/src/app/main/content/pages/pricing/style-3/style-3.component.html
index 25e8cfdc..a4d7759a 100644
--- a/src/app/main/content/pages/pricing/style-3/style-3.component.html
+++ b/src/app/main/content/pages/pricing/style-3/style-3.component.html
@@ -20,7 +20,7 @@
     <div class="content" fxLayout="column">
 
         <!-- PRICE TABLES -->
-        <div class="price-tables" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
+        <div class="price-tables" fxLayout="row wrap" fxLayoutAlign="center center">
 
             <div class="price-table style-3 mat-elevation-z4" fxLayout="column">
 
@@ -112,7 +112,7 @@
         </div>
         <!-- / PRICE TABLES -->
 
-        <div class="faq" fxLayout="row" fxLayoutWrap>
+        <div class="faq" fxLayout="row wrap">
 
             <div class="title" fxFlex="100">Frequently Asked Questions</div>
 
diff --git a/src/app/main/content/pages/profile/tabs/about/about.component.html b/src/app/main/content/pages/profile/tabs/about/about.component.html
index cba86b6c..0ac9c5d2 100644
--- a/src/app/main/content/pages/profile/tabs/about/about.component.html
+++ b/src/app/main/content/pages/profile/tabs/about/about.component.html
@@ -1,4 +1,4 @@
-<div id="about" class="p-24" fxLayout="row" fxLayoutWrap>
+<div id="about" class="p-24" fxLayout="row wrap">
 
     <div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65">
 
@@ -111,7 +111,7 @@
                 </div>
             </header>
 
-            <div class="content" fxLayout="row" fxLayoutWrap>
+            <div class="content" fxLayout="row wrap">
                 <div class="friend" fxFlex="20" *ngFor="let friend of about.friends">
                     <img [src]="friend.avatar">
                 </div>
diff --git a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html b/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html
index ea84dbef..6fa12431 100644
--- a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html
+++ b/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html
@@ -6,7 +6,7 @@
             <span class="info">{{period.info}}</span>
         </div>
 
-        <div class="period-media" fxLayout="row" fxLayoutWrap>
+        <div class="period-media" fxLayout="row wrap">
             <div class="media" *ngFor="let media of period.media">
                 <img class="preview" [src]="media.preview" title="{{media.title}}">
                 <div class="title">{{media.title}}</div>
diff --git a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
index 1074f914..d863c706 100644
--- a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
+++ b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
@@ -1,4 +1,4 @@
-<div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap>
+<div id="timeline" class="p-24" fxLayout="row wrap">
 
     <div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65">
 
@@ -141,7 +141,7 @@
                 <div class="more secondary-text">See All</div>
             </header>
 
-            <div class="content" fxLayout="row" fxLayoutWrap>
+            <div class="content" fxLayout="row wrap">
                 <div class="activities">
                     <div class="activity" fxLayout="row" fxLayoutAlign="start start"
                          *ngFor="let activity of timeline.activities">
diff --git a/src/app/main/content/ui/forms/forms.component.html b/src/app/main/content/ui/forms/forms.component.html
index 779ded79..1cdde49d 100644
--- a/src/app/main/content/ui/forms/forms.component.html
+++ b/src/app/main/content/ui/forms/forms.component.html
@@ -62,7 +62,7 @@
 
                 </div>
 
-                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto" fxLayoutWrap>
+                <div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">
 
                     <mat-form-field fxFlex="100">
                         <textarea matInput placeholder="Address" formControlName="address" required>
diff --git a/src/app/main/content/ui/icons/icons.component.html b/src/app/main/content/ui/icons/icons.component.html
index b0a6fa6c..09a743fa 100644
--- a/src/app/main/content/ui/icons/icons.component.html
+++ b/src/app/main/content/ui/icons/icons.component.html
@@ -37,7 +37,7 @@
                     </mat-form-field>
                 </div>
 
-                <div fxLayout="row" fxLayoutWrap>
+                <div fxLayout="row wrap">
 
                     <div class="icon-holder m-16" fxLayout="column" fxLayoutAlign="center center"
                          *ngFor="let icon of filteredIcons">
diff --git a/src/app/main/navbar/navbar.component.ts b/src/app/main/navbar/navbar.component.ts
index 598d06cc..78114850 100644
--- a/src/app/main/navbar/navbar.component.ts
+++ b/src/app/main/navbar/navbar.component.ts
@@ -19,6 +19,11 @@ export class FuseNavbarComponent implements OnDestroy
 
     @ViewChild(FusePerfectScrollbarDirective) set directive(theDirective: FusePerfectScrollbarDirective)
     {
+        if ( !theDirective )
+        {
+            return;
+        }
+
         this.fusePerfectScrollbar = theDirective;
 
         this.navigationServiceWatcher =