diff --git a/package-lock.json b/package-lock.json
index dc5c6681..efc8b820 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -9,33 +9,67 @@
       "resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.2.tgz",
       "integrity": "sha512-3bdfvkWDmJszpj/F6Fzgv7sks0cs/cUEQPfs37tcJFz3jc62SsXy4TGb/WJT8FpH2nSGE6DonP8lXuFxB0lblQ=="
     },
+    "@angular-devkit/build-optimizer": {
+      "version": "0.0.42",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.0.42.tgz",
+      "integrity": "sha512-BAYCVZ10ro6mgZQDZiNiVbX8ppygw4q7z/stpwG8WjMswgMRIcxsxYoC1VFuWcUPAf4UyfTIav6e8UZWA5+xnQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "1.1.0",
+        "source-map": "0.5.7",
+        "typescript": "2.6.2",
+        "webpack-sources": "1.1.0"
+      }
+    },
+    "@angular-devkit/core": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.0.29.tgz",
+      "integrity": "sha512-jtUBA0pIrkdXcVqDmDrGlniqwM7NFOKdo7vWFDmCVLBbC9rZHeYW5Xv/+4HyBhGLJ4wxsAkUjsHKWGJINPPpiw==",
+      "dev": true,
+      "requires": {
+        "ajv": "5.5.2",
+        "chokidar": "1.7.0",
+        "rxjs": "5.5.6",
+        "source-map": "0.5.7"
+      }
+    },
+    "@angular-devkit/schematics": {
+      "version": "0.0.52",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.0.52.tgz",
+      "integrity": "sha512-NtG8VB5aWtg0cw1Y7EJinJMuAnXsNdkQkkVe/i7CO6TPLyFQSFQCN1YojCr43l8jTWTRebRslrBawPCMOxsOgw==",
+      "dev": true,
+      "requires": {
+        "@ngtools/json-schema": "1.1.0",
+        "rxjs": "5.5.6"
+      }
+    },
     "@angular/animations": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.2.3.tgz",
-      "integrity": "sha512-K9rOsRGwt7Zmp/rNdvBmgBKqvEdgCyZF0kvwxrmZfq1Zj0GAkfTAKPL007493O6XFd+icfu/+kmYeqXBGB4gKA==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.2.4.tgz",
+      "integrity": "sha512-kLOUORV/2GdYsNSwmUsB3eEL+nAoBZYKgibYLkVy6oecrIbdFMWiNzLcFjX/avcMnb1UNMk24Hd7Of4C2UawPA==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/cdk": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.1.1.tgz",
-      "integrity": "sha512-V8kQmwf1PhtxiiE0cS1x9SW7/VFrJ7LcL9RqxUOMmJMl8kVR43dQBEeuVOOYJlGo9LAR5ctfemlJHwd9+PoHew==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.2.0.tgz",
+      "integrity": "sha1-Q2j2dJ6RXNzHXTJa4z/bP4WogQg=",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/cli": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.6.7.tgz",
-      "integrity": "sha512-TprSjnQrEdrTsCAB5K/lCLuXZUH/y+l/BAR0aZLpubpZP8Ldgmq7q56trxL5wNSs3o6A8Vh43ZKNYOuKtnzlXQ==",
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.6.8.tgz",
+      "integrity": "sha512-/cqk7CoChwyEPav+NRzv6esZwXXxg2RszRCtPMKlIPNw9y/nleZFXka2igfJrxsjcMI5WN6z9gYvJRI7qF7RJA==",
       "dev": true,
       "requires": {
         "@angular-devkit/build-optimizer": "0.0.42",
         "@angular-devkit/core": "0.0.29",
         "@angular-devkit/schematics": "0.0.52",
         "@ngtools/json-schema": "1.1.0",
-        "@ngtools/webpack": "1.9.7",
+        "@ngtools/webpack": "1.9.8",
         "@schematics/angular": "0.1.17",
         "autoprefixer": "7.2.5",
         "chalk": "2.2.2",
@@ -68,7 +102,7 @@
         "opn": "5.1.0",
         "portfinder": "1.0.13",
         "postcss-import": "11.0.0",
-        "postcss-loader": "2.0.10",
+        "postcss-loader": "2.1.0",
         "postcss-url": "7.3.0",
         "raw-loader": "0.5.1",
         "resolve": "1.5.0",
@@ -80,7 +114,7 @@
         "style-loader": "0.13.2",
         "stylus": "0.54.5",
         "stylus-loader": "3.0.1",
-        "uglifyjs-webpack-plugin": "1.1.6",
+        "uglifyjs-webpack-plugin": "1.1.8",
         "url-loader": "0.6.2",
         "webpack": "3.10.0",
         "webpack-dev-middleware": "1.12.2",
@@ -88,95 +122,28 @@
         "webpack-merge": "4.1.1",
         "webpack-sources": "1.1.0",
         "webpack-subresource-integrity": "1.0.3"
-      },
-      "dependencies": {
-        "@angular-devkit/build-optimizer": {
-          "version": "0.0.42",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.0.42.tgz",
-          "integrity": "sha512-BAYCVZ10ro6mgZQDZiNiVbX8ppygw4q7z/stpwG8WjMswgMRIcxsxYoC1VFuWcUPAf4UyfTIav6e8UZWA5+xnQ==",
-          "dev": true,
-          "requires": {
-            "loader-utils": "1.1.0",
-            "source-map": "0.5.7",
-            "typescript": "2.6.2",
-            "webpack-sources": "1.1.0"
-          }
-        },
-        "@angular-devkit/core": {
-          "version": "0.0.29",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.0.29.tgz",
-          "integrity": "sha512-jtUBA0pIrkdXcVqDmDrGlniqwM7NFOKdo7vWFDmCVLBbC9rZHeYW5Xv/+4HyBhGLJ4wxsAkUjsHKWGJINPPpiw==",
-          "dev": true,
-          "requires": {
-            "ajv": "5.5.2",
-            "chokidar": "1.7.0",
-            "rxjs": "5.5.6",
-            "source-map": "0.5.7"
-          }
-        },
-        "@angular-devkit/schematics": {
-          "version": "0.0.52",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.0.52.tgz",
-          "integrity": "sha512-NtG8VB5aWtg0cw1Y7EJinJMuAnXsNdkQkkVe/i7CO6TPLyFQSFQCN1YojCr43l8jTWTRebRslrBawPCMOxsOgw==",
-          "dev": true,
-          "requires": {
-            "@ngtools/json-schema": "1.1.0",
-            "rxjs": "5.5.6"
-          }
-        },
-        "@ngtools/webpack": {
-          "version": "1.9.7",
-          "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-1.9.7.tgz",
-          "integrity": "sha512-D5QuaT9wENeM2j9g2qvW9Ls1tGqRz26Lp+jxwb2ZGFep7Ik1fFOX3ROLfgkxNlxZGVmbxJjsfrYUCyGlzj8gWg==",
-          "dev": true,
-          "requires": {
-            "chalk": "2.2.2",
-            "enhanced-resolve": "3.4.1",
-            "loader-utils": "1.1.0",
-            "magic-string": "0.22.4",
-            "semver": "5.5.0",
-            "source-map": "0.5.7",
-            "tree-kill": "1.2.0",
-            "webpack-sources": "1.1.0"
-          }
-        },
-        "@schematics/angular": {
-          "version": "0.1.17",
-          "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.1.17.tgz",
-          "integrity": "sha512-PHE5gk/ogPY/aN94dbbtauHMCq+/7w4Kdcl7tGmSS8mPKEI0wa6XJi//Wq/tHi55lb2fP58oEZU6n6w/wQascw==",
-          "dev": true,
-          "requires": {
-            "typescript": "2.6.2"
-          }
-        },
-        "typescript": {
-          "version": "2.6.2",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.2.tgz",
-          "integrity": "sha1-PFtv1/beCRQmkCfwPAlGdY92c6Q=",
-          "dev": true
-        }
       }
     },
     "@angular/common": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-5.2.3.tgz",
-      "integrity": "sha512-RwQ/IjmpDdMecTz/wwQlKpHgF4Crr8kyqV9FJ+c+cHR8Riqlu2DOXSU7LIfDdGoo6Mpixdxd1rtHYfs7l9YBSA==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-5.2.4.tgz",
+      "integrity": "sha512-PNtg7lzCBUgYo5Rj+/j11EVKhLfrUkkh81ecBwexk6VcDJebmvBO1HdGppV5UPzEH/StL1mTwLc95dOI0hHSJA==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/compiler": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.2.3.tgz",
-      "integrity": "sha512-OynSzUdEHwajQMoV2JuYq5IdiR2dlTCTAHhTLzrym85wOihvTvovEQwVhYYHyKERu85JIoaF1sXA42KIjMGfkw==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.2.4.tgz",
+      "integrity": "sha512-KFaGcm/5OKJRxXIxrS53IYPtqta9u2xLLedrWspxIvI59ImfzeZGnLGPhfrI0pbK7wY0rJ5YdGYQnzq33dh01A==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/compiler-cli": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.2.3.tgz",
-      "integrity": "sha512-uoCxeyQSd8R/cwEbd0FIUXjnbPq0HXEsyu3WSu9Ek2jt52HL+x/gZQdFCRtjW/mvQNOqxrgrTtEkhJ398+VkXg==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.2.4.tgz",
+      "integrity": "sha512-nODdd7EuGzk1ME5UzpVa/lN1oKNypRt2oZoNYOkgNO2TQWD1jqOcozruit1eOEFHQhXO2JvPTzlt1dd6viHSCQ==",
       "dev": true,
       "requires": {
         "chokidar": "1.7.0",
@@ -194,9 +161,9 @@
       }
     },
     "@angular/core": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.2.3.tgz",
-      "integrity": "sha512-tL9O8KA6KGjnlxqjuTytpC2OeKbxe/yHev0kmwo5CK0lDZU4UFetcItAzUXU1dyRuILTcBkbnFt9+nr1SZs/cQ==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.2.4.tgz",
+      "integrity": "sha512-GPnxUf7g8Mz0AUttKKcqaw0m2xZujwwzojkg3xUIvHrNFFF5/HH5549PfnE1jD7qkmnDFx5j3IPuNkwYHW6XvA==",
       "requires": {
         "tslib": "1.9.0"
       }
@@ -210,63 +177,63 @@
       }
     },
     "@angular/forms": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.2.3.tgz",
-      "integrity": "sha512-PsMGbj/Slvsxxyl61QSSSFDCGHN1XK6kNxVQTVmAlVhP1LlaYqBOIgQy4K9CYWUeHqU/YCdhVaFb5quzZLtPYA==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.2.4.tgz",
+      "integrity": "sha512-0k6rs2k85wcBq0WPAjxNbtBu1wq/1fUSFaBLbpnrwwHeCLJI5aAjG2/f3jv/17a/ek7/WZ3lxXtHzNMMdaD/Iw==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/http": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/http/-/http-5.2.3.tgz",
-      "integrity": "sha512-3kAj7YYws8J2zRu46fEXk6lYrgSK9s5YA6O4REZkLox/suK0wb6TsDIIhoMzScGctSzZESVyuWsvYMrDYCflPA==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/http/-/http-5.2.4.tgz",
+      "integrity": "sha512-WjZTNqHw9cT/mIRenIGKKlJRdm9ZdDl7IqnX+OnAdO/c6hmoQwy9fkSLRLmcXw4FBM+ASfjWu4ybodaZ8Tv6xQ==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/language-service": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.2.3.tgz",
-      "integrity": "sha512-yBi8i2rUdq6WgYn2J+82QxqhKsl2ldH7/8Lk4ZQDbKgTBx5LmYLpNGg3TJGnZEUGtKhu8Rd1E3SBmc4qqrGXsQ==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.2.4.tgz",
+      "integrity": "sha512-slze+UcBzm+p/pAIGxah3errOlWsUVJ5I4RNgErmR3rlylt5YNWNM/LClbDVGk8zoW+NBg0fwIxUbqK6qnk5Cw==",
       "dev": true
     },
     "@angular/material": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.1.1.tgz",
-      "integrity": "sha512-RC3xkbX35daNq4w+XBmm+Vgi16TJvLbSkw5xkdxCqLSysFx9ymwDOjUbLeHt2nJtvYWvnSjuVukdSAeaBknTFg==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.2.0.tgz",
+      "integrity": "sha1-hZnjFJ1ISH4+kulB+p3FUXbjoM8=",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/material-moment-adapter": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-5.1.1.tgz",
-      "integrity": "sha512-1wpISrZOHmcC2o0tmOHX2Lt726WFUZxQs0iYe3x2yHVuxoV2W8gy0unfPkSyaZQ9v68o9xQ3DQEhSByPhr0tZg==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-5.2.0.tgz",
+      "integrity": "sha1-gIDjS0bDWGzTnkZkJmfIAE+kuHs=",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/platform-browser": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.3.tgz",
-      "integrity": "sha512-60LgA4KK3BufBR7vwwcn3zTYuLlfDG3jFip7bvdgsDpURrUB0j6/pL5cbGElww4jnnxZ72uJzJRzSiGEofjc3g==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.4.tgz",
+      "integrity": "sha512-chv6h2aHQ/QoVA4Y6rpPpSju7vyLg/iMh516GxpGYVk6bHEdrH9pHJPulPcrt/LTd7lMAAHE3YmvYWVU6aDsaQ==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/platform-browser-dynamic": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.2.3.tgz",
-      "integrity": "sha512-PheS+KJQJiyvQg1lr+eX0/1b/rjLnDjgI1qvzwikrvGYymb2JdZ+rjllHBs1iotzQ+tG+hRnlktvgdFN134x/g==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.2.4.tgz",
+      "integrity": "sha512-B3pv6FUTWA1daDYhx6b77FCFCzHQPuCyrsJQwMSSu6Xt+CYn2gc3dS0ph3B6cV6mnt1qIbEpML+Vp5Bi9x0Mkw==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@angular/router": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-5.2.3.tgz",
-      "integrity": "sha512-XVEpwNZta76FYas1gZSSGvkQoiGgQjvXfab6CwOh958d4c0C+9pJsykqsv6X/n8TSTShQt7wjs/vp/copXeuoA==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-5.2.4.tgz",
+      "integrity": "sha512-sg3iCThhbfv/6zARdKbHNLc7Xe1Rt1deit55b3K+WlrHX7GhsuJPLcitrNaADIcgDKbNT9XrwBaNirAEip9hxA==",
       "requires": {
         "tslib": "1.9.0"
       }
@@ -303,11 +270,36 @@
       "integrity": "sha1-w6DFRNYjkqzCgTpCyKDcb1j4aSI=",
       "dev": true
     },
+    "@ngtools/webpack": {
+      "version": "1.9.8",
+      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-1.9.8.tgz",
+      "integrity": "sha512-V4cFDBpWMU11KWod4qW3rJ00dBeBKYxwzD2r2kwDQl5NogVTeBacz2gq6udUfwJ/yMxJTTFdpV7NKsydTb0BoA==",
+      "dev": true,
+      "requires": {
+        "chalk": "2.2.2",
+        "enhanced-resolve": "3.4.1",
+        "loader-utils": "1.1.0",
+        "magic-string": "0.22.4",
+        "semver": "5.5.0",
+        "source-map": "0.5.7",
+        "tree-kill": "1.2.0",
+        "webpack-sources": "1.1.0"
+      }
+    },
     "@ngx-translate/core": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-9.1.1.tgz",
       "integrity": "sha1-rhA5KINrip4Gn9Li52+iGYzH5ig="
     },
+    "@schematics/angular": {
+      "version": "0.1.17",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.1.17.tgz",
+      "integrity": "sha512-PHE5gk/ogPY/aN94dbbtauHMCq+/7w4Kdcl7tGmSS8mPKEI0wa6XJi//Wq/tHi55lb2fP58oEZU6n6w/wQascw==",
+      "dev": true,
+      "requires": {
+        "typescript": "2.6.2"
+      }
+    },
     "@swimlane/ngx-charts": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/@swimlane/ngx-charts/-/ngx-charts-7.0.1.tgz",
@@ -355,9 +347,9 @@
       }
     },
     "@types/node": {
-      "version": "6.0.96",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.96.tgz",
-      "integrity": "sha512-fsOOY6tMQ3jCB2wD51XFDmmpgm4wVKkJECdcVRqapbJEa7awJDcr+SaH8toz+4r4KW8YQ3M7ybXMoSDo1QGewA==",
+      "version": "6.0.98",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.98.tgz",
+      "integrity": "sha512-Pzldp01+6TyKlTBlp+i4RzFCuwjOpHxcfEnB74IedyEUqil2uLVg7jelYKS3Ik9/M4WzIK5N9RdtZg6UByyPEg==",
       "dev": true
     },
     "@types/prismjs": {
@@ -885,10 +877,10 @@
       "dev": true,
       "requires": {
         "browserslist": "2.11.3",
-        "caniuse-lite": "1.0.30000792",
+        "caniuse-lite": "1.0.30000804",
         "normalize-range": "0.1.2",
         "num2fraction": "1.2.2",
-        "postcss": "6.0.16",
+        "postcss": "6.0.17",
         "postcss-value-parser": "3.3.0"
       }
     },
@@ -1066,7 +1058,7 @@
         "component-emitter": "1.2.1",
         "define-property": "1.0.0",
         "isobject": "3.0.1",
-        "mixin-deep": "1.3.0",
+        "mixin-deep": "1.3.1",
         "pascalcase": "0.1.1"
       },
       "dependencies": {
@@ -1269,7 +1261,7 @@
         "deep-equal": "1.0.1",
         "dns-equal": "1.0.0",
         "dns-txt": "2.0.2",
-        "multicast-dns": "6.2.2",
+        "multicast-dns": "6.2.3",
         "multicast-dns-service-types": "1.1.0"
       }
     },
@@ -1531,8 +1523,8 @@
       "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "1.0.30000792",
-        "electron-to-chromium": "1.3.31"
+        "caniuse-lite": "1.0.30000804",
+        "electron-to-chromium": "1.3.33"
       }
     },
     "buffer": {
@@ -1609,12 +1601,12 @@
         "glob": "7.1.2",
         "graceful-fs": "4.1.11",
         "lru-cache": "4.1.1",
-        "mississippi": "1.3.0",
+        "mississippi": "1.3.1",
         "mkdirp": "0.5.1",
         "move-concurrently": "1.0.1",
         "promise-inflight": "1.0.1",
         "rimraf": "2.6.2",
-        "ssri": "5.1.0",
+        "ssri": "5.2.1",
         "unique-filename": "1.1.0",
         "y18n": "3.2.1"
       }
@@ -1689,7 +1681,7 @@
       "dev": true,
       "requires": {
         "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000794",
+        "caniuse-db": "1.0.30000804",
         "lodash.memoize": "4.1.2",
         "lodash.uniq": "4.5.0"
       },
@@ -1700,22 +1692,22 @@
           "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
           "dev": true,
           "requires": {
-            "caniuse-db": "1.0.30000794",
-            "electron-to-chromium": "1.3.31"
+            "caniuse-db": "1.0.30000804",
+            "electron-to-chromium": "1.3.33"
           }
         }
       }
     },
     "caniuse-db": {
-      "version": "1.0.30000794",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000794.tgz",
-      "integrity": "sha1-u+cRBPonfOSzYjh9VJBei4jlLzU=",
+      "version": "1.0.30000804",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000804.tgz",
+      "integrity": "sha1-hP60IBj8ZM9q/2Nx5DEV8pLAAXk=",
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30000792",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000792.tgz",
-      "integrity": "sha1-0M6pgfgRjzlhRxr7tDyaHlu/AzI=",
+      "version": "1.0.30000804",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000804.tgz",
+      "integrity": "sha512-HDZPSHLi18Bac8YU+bDJPtJLf19DwoNTM7Qp1alhltYW9FxNUlwCgk1xk92H0hB+xiKW4Jb9LXQv6M+riQyxFg==",
       "dev": true
     },
     "caseless": {
@@ -2606,7 +2598,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -2725,7 +2717,7 @@
           "dev": true,
           "requires": {
             "browserslist": "1.7.7",
-            "caniuse-db": "1.0.30000794",
+            "caniuse-db": "1.0.30000804",
             "normalize-range": "0.1.2",
             "num2fraction": "1.2.2",
             "postcss": "5.2.18",
@@ -2738,8 +2730,8 @@
           "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
           "dev": true,
           "requires": {
-            "caniuse-db": "1.0.30000794",
-            "electron-to-chromium": "1.3.31"
+            "caniuse-db": "1.0.30000804",
+            "electron-to-chromium": "1.3.33"
           }
         },
         "chalk": {
@@ -2776,7 +2768,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -3556,9 +3548,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.31",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz",
-      "integrity": "sha512-XE4CLbswkZgZFn34cKFy1xaX+F5LHxeDLjY1+rsK9asDzknhbrd9g/n/01/acbU25KTsUSiLKwvlLyA+6XLUOA==",
+      "version": "1.3.33",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.33.tgz",
+      "integrity": "sha1-vwBwPWKnxlI4E2V4w1LWxcBCpUU=",
       "dev": true
     },
     "elliptic": {
@@ -5866,7 +5858,7 @@
         "ncname": "1.0.0",
         "param-case": "2.1.1",
         "relateurl": "0.2.7",
-        "uglify-js": "3.3.8"
+        "uglify-js": "3.3.9"
       },
       "dependencies": {
         "commander": {
@@ -5991,9 +5983,9 @@
       }
     },
     "http-parser-js": {
-      "version": "0.4.9",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.9.tgz",
-      "integrity": "sha1-6hoE+2St/wJC6ZdPKX3Uw8rSceE=",
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz",
+      "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=",
       "dev": true
     },
     "http-proxy": {
@@ -6107,7 +6099,7 @@
       "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
       "dev": true,
       "requires": {
-        "postcss": "6.0.16"
+        "postcss": "6.0.17"
       }
     },
     "ieee754": {
@@ -6851,9 +6843,9 @@
       "dev": true
     },
     "js-base64": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.2.tgz",
-      "integrity": "sha512-lLkz3IRPTNeATsKQGeltbzRK/5+bWsXBHfpZrxJAi4N30RtCtNA+rJznp4uR2+4OgkBsoeeFwONVLr4gzIVErQ==",
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
+      "integrity": "sha512-H7ErYLM34CvDMto3GbD6xD0JLUGYXR3QTcH6B/tr4Hi/QpSThnCsIp+Sy5FRTw3B0d6py4HcNkW7nO/wdtGWEw==",
       "dev": true
     },
     "js-tokens": {
@@ -7296,9 +7288,9 @@
       "dev": true
     },
     "lodash.mergewith": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz",
-      "integrity": "sha1-FQzwoWeR9ZA7iJHqsVRgknS96lU=",
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
+      "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
       "dev": true,
       "optional": true
     },
@@ -7674,7 +7666,7 @@
       "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=",
       "dev": true,
       "requires": {
-        "mimic-fn": "1.1.0"
+        "mimic-fn": "1.2.0"
       }
     },
     "memory-fs": {
@@ -7778,9 +7770,9 @@
       }
     },
     "mimic-fn": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.1.0.tgz",
-      "integrity": "sha1-5md4PZLonb00KBi1IwudYqZyrRg=",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
     "minimalistic-assert": {
@@ -7811,9 +7803,9 @@
       "dev": true
     },
     "mississippi": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-1.3.0.tgz",
-      "integrity": "sha1-0gFYPrEjJ+PFwWQqQEqcrPlONPU=",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-1.3.1.tgz",
+      "integrity": "sha512-/6rB8YXFbAtsUVRphIRQqB0+9c7VaPHCjVtvto+JqwVxgz8Zz+I+f68/JgQ+Pb4VlZb2svA9OtdXnHHsZz7ltg==",
       "dev": true,
       "requires": {
         "concat-stream": "1.6.0",
@@ -7829,9 +7821,9 @@
       }
     },
     "mixin-deep": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.0.tgz",
-      "integrity": "sha512-dgaCvoh6i1nosAUBKb0l0pfJ78K8+S9fluyIR2YvAeUD/QuMahnFnF3xYty5eYXMjhGSsB0DsW6A0uAZyetoAg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
+      "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
       "dev": true,
       "requires": {
         "for-in": "1.0.2",
@@ -7960,13 +7952,13 @@
       "dev": true
     },
     "multicast-dns": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.2.tgz",
-      "integrity": "sha512-xTO41ApiRHMVDBYhNL9bEhx7kRf1hq3OqPOnOy8bpTi0JZSxVPDre7ZRpTHLDlxmhf6d/FL+10E8VX1QRd+0DA==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
+      "integrity": "sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==",
       "dev": true,
       "requires": {
         "dns-packet": "1.3.1",
-        "thunky": "0.1.0"
+        "thunky": "1.0.2"
       }
     },
     "multicast-dns-service-types": {
@@ -8079,9 +8071,9 @@
       }
     },
     "node-forge": {
-      "version": "0.6.33",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.6.33.tgz",
-      "integrity": "sha1-RjgRh59XPUUVWtap9D3ClujoXrw=",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.1.tgz",
+      "integrity": "sha1-naYR6giYL0uUIGs760zJZl8gwwA=",
       "dev": true
     },
     "node-gyp": {
@@ -8149,7 +8141,7 @@
         "stream-browserify": "2.0.1",
         "stream-http": "2.8.0",
         "string_decoder": "1.0.3",
-        "timers-browserify": "2.0.4",
+        "timers-browserify": "2.0.6",
         "tty-browserify": "0.0.0",
         "url": "0.11.0",
         "util": "0.10.3",
@@ -8178,7 +8170,7 @@
         "in-publish": "2.0.0",
         "lodash.assign": "4.2.0",
         "lodash.clonedeep": "4.5.0",
-        "lodash.mergewith": "4.6.0",
+        "lodash.mergewith": "4.6.1",
         "meow": "3.7.0",
         "mkdirp": "0.5.1",
         "nan": "2.8.0",
@@ -9088,9 +9080,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.16.tgz",
-      "integrity": "sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA==",
+      "version": "6.0.17",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.17.tgz",
+      "integrity": "sha512-Bl1nybsSzWYbP8O4gAVD8JIjZIul9hLNOPTGBIlVmZNUnNAGL+W0cpYWzVwfImZOwumct4c1SDvSbncVWKtXUw==",
       "dev": true,
       "requires": {
         "chalk": "2.3.0",
@@ -9188,7 +9180,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9255,7 +9247,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9321,7 +9313,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9386,7 +9378,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9451,7 +9443,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9516,7 +9508,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9581,7 +9573,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9647,7 +9639,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9713,7 +9705,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9735,7 +9727,7 @@
       "integrity": "sha1-qWLi34LTvFptpqOGhBdHIE9B71s=",
       "dev": true,
       "requires": {
-        "postcss": "6.0.16",
+        "postcss": "6.0.17",
         "postcss-value-parser": "3.3.0",
         "read-cache": "1.0.0",
         "resolve": "1.5.0"
@@ -9774,15 +9766,27 @@
       }
     },
     "postcss-loader": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.0.10.tgz",
-      "integrity": "sha512-xQaDcEgJ/2JqFY18zpFkik8vyYs7oS5ZRbrjvDqkP97k2wYWfPT4+qA0m4o3pTSCsz0u26PNqs8ZO9FRUWAqrA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.0.tgz",
+      "integrity": "sha512-S/dKzpDwGFmP9g8eyCu9sUIV+/+3UooeTpYlsKf23qKDdrhHuA4pTSfytVu0rEJ0iDqUavXrgtOPq5KhNyNMOw==",
       "dev": true,
       "requires": {
         "loader-utils": "1.1.0",
-        "postcss": "6.0.16",
+        "postcss": "6.0.17",
         "postcss-load-config": "1.2.0",
-        "schema-utils": "0.3.0"
+        "schema-utils": "0.4.3"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "0.4.3",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.3.tgz",
+          "integrity": "sha512-sgv/iF/T4/SewJkaVpldKC4WjSkz0JsOh2eKtxCPpCO1oR05+7MOF+H476HVRbLArkgA7j5TRJJ4p2jdFkUGQQ==",
+          "dev": true,
+          "requires": {
+            "ajv": "5.5.2",
+            "ajv-keywords": "2.1.1"
+          }
+        }
       }
     },
     "postcss-merge-idents": {
@@ -9836,7 +9840,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9901,7 +9905,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9942,8 +9946,8 @@
           "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
           "dev": true,
           "requires": {
-            "caniuse-db": "1.0.30000794",
-            "electron-to-chromium": "1.3.31"
+            "caniuse-db": "1.0.30000804",
+            "electron-to-chromium": "1.3.33"
           }
         },
         "chalk": {
@@ -9980,7 +9984,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10053,7 +10057,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10119,7 +10123,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10187,7 +10191,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10255,7 +10259,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10277,7 +10281,7 @@
       "integrity": "sha1-ZhQOzs447wa/DT41XWm/WdFB6oU=",
       "dev": true,
       "requires": {
-        "postcss": "6.0.16"
+        "postcss": "6.0.17"
       }
     },
     "postcss-modules-local-by-default": {
@@ -10287,7 +10291,7 @@
       "dev": true,
       "requires": {
         "css-selector-tokenizer": "0.7.0",
-        "postcss": "6.0.16"
+        "postcss": "6.0.17"
       }
     },
     "postcss-modules-scope": {
@@ -10297,7 +10301,7 @@
       "dev": true,
       "requires": {
         "css-selector-tokenizer": "0.7.0",
-        "postcss": "6.0.16"
+        "postcss": "6.0.17"
       }
     },
     "postcss-modules-values": {
@@ -10307,7 +10311,7 @@
       "dev": true,
       "requires": {
         "icss-replace-symbols": "1.1.0",
-        "postcss": "6.0.16"
+        "postcss": "6.0.17"
       }
     },
     "postcss-normalize-charset": {
@@ -10359,7 +10363,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10427,7 +10431,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10493,7 +10497,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10559,7 +10563,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10624,7 +10628,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10691,7 +10695,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10770,7 +10774,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10837,7 +10841,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10862,7 +10866,7 @@
         "mime": "1.6.0",
         "minimatch": "3.0.4",
         "mkdirp": "0.5.1",
-        "postcss": "6.0.16",
+        "postcss": "6.0.17",
         "xxhashjs": "0.2.2"
       }
     },
@@ -10923,7 +10927,7 @@
           "dev": true,
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.2",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -11009,7 +11013,7 @@
       "integrity": "sha1-myIXQXCaTGLVzVPGqt1UpxE36V8=",
       "dev": true,
       "requires": {
-        "@types/node": "6.0.96",
+        "@types/node": "6.0.98",
         "@types/q": "0.0.32",
         "@types/selenium-webdriver": "2.53.43",
         "blocking-proxy": "0.0.5",
@@ -11870,7 +11874,7 @@
       "dev": true,
       "optional": true,
       "requires": {
-        "js-base64": "2.4.2",
+        "js-base64": "2.4.3",
         "source-map": "0.4.4"
       },
       "dependencies": {
@@ -11922,12 +11926,12 @@
       }
     },
     "selfsigned": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.1.tgz",
-      "integrity": "sha1-v4y3uDJWxFUeMTR8YxF3jbme7FI=",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.2.tgz",
+      "integrity": "sha1-tESVgNmZKbZbEKSDiTAaZZIIh1g=",
       "dev": true,
       "requires": {
-        "node-forge": "0.6.33"
+        "node-forge": "0.7.1"
       }
     },
     "semver": {
@@ -12577,9 +12581,9 @@
       }
     },
     "ssri": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.1.0.tgz",
-      "integrity": "sha512-TevC8fgxQKTfQ1nWtM9GNzr3q5rrHNntG9CDMH1k3QhSZI6Kb+NbjLRs8oPFZa2Hgo7zoekL+UTvoEk7tsbjQg==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.2.1.tgz",
+      "integrity": "sha512-y4PjOWlAuxt+yAcXitQYOnOzZpKaH3+f/qGV3OWxbyC2noC9FA9GNC9uILnVdV7jruA1aDKr4OKz3ZDBcVZwFQ==",
       "dev": true,
       "requires": {
         "safe-buffer": "5.1.1"
@@ -13002,9 +13006,9 @@
       "optional": true
     },
     "thunky": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/thunky/-/thunky-0.1.0.tgz",
-      "integrity": "sha1-vzAUaCTituZ7Dy16Ssi+smkIaE4=",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.0.2.tgz",
+      "integrity": "sha1-qGLgGOP7HqLsP85dVWBc9X8kc3E=",
       "dev": true
     },
     "ticky": {
@@ -13019,9 +13023,9 @@
       "dev": true
     },
     "timers-browserify": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.4.tgz",
-      "integrity": "sha512-uZYhyU3EX8O7HQP+J9fTVYwsq90Vr68xPEFo7yrVImIxYvHgukBEgOB/SgGoorWVTzGM/3Z+wUNnboA4M8jWrg==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.6.tgz",
+      "integrity": "sha512-HQ3nbYRAowdVd0ckGFvmJPPCOH/CHleFN/Y0YQCX1DVaB7t+KFvisuyN09fuP8Jtp1CpfSh8O8bMkHbdbPe6Pw==",
       "dev": true,
       "requires": {
         "setimmediate": "1.0.5"
@@ -13441,9 +13445,9 @@
       "dev": true
     },
     "uglify-js": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.8.tgz",
-      "integrity": "sha512-X0jAGtpSZRtd4RhbVNuGHyjZNa/h2MrVkKrR3Ew5iL2MJw6d7FmBke+fhVCALWySv1ygHnjjROG1KI1FAPvddw==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.9.tgz",
+      "integrity": "sha512-J2t8B5tj9JdPTW4+sNZXmiIWHzTvcoITkaqzTiilu/biZF/9crqf/Fi7k5hqbOmVRh9/hVNxAxBYIMF7N6SqMQ==",
       "dev": true,
       "requires": {
         "commander": "2.13.0",
@@ -13466,9 +13470,9 @@
       "optional": true
     },
     "uglifyjs-webpack-plugin": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.1.6.tgz",
-      "integrity": "sha512-VUja+7rYbznEvUaeb8IxOCTUrq4BCb1ml0vffa+mfwKtrAwlqnU0ENF14DtYltV1cxd/HSuK51CCA/D/8kMQVw==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.1.8.tgz",
+      "integrity": "sha512-XG8/QmR1pyPeE1kj2aigo5kos8umefB31zW+PMvAAytHSB0T/vQvN6sqt8+Sh+y0b0A7zlmxNi2dzRnj0wcqGA==",
       "dev": true,
       "requires": {
         "cacache": "10.0.2",
@@ -13476,7 +13480,7 @@
         "schema-utils": "0.4.3",
         "serialize-javascript": "1.4.0",
         "source-map": "0.6.1",
-        "uglify-es": "3.3.8",
+        "uglify-es": "3.3.9",
         "webpack-sources": "1.1.0",
         "worker-farm": "1.5.2"
       },
@@ -13498,9 +13502,9 @@
           "dev": true
         },
         "uglify-es": {
-          "version": "3.3.8",
-          "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.8.tgz",
-          "integrity": "sha512-j8li0jWcAN6yBuAVYFZEFyYINZAm4WEdMwkA6qXFi4TLrze3Mp0Le7QjW6LR9HQjQJ2zRa9VgnFLs3PatijWOw==",
+          "version": "3.3.9",
+          "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",
+          "integrity": "sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==",
           "dev": true,
           "requires": {
             "commander": "2.13.0",
@@ -14411,7 +14415,7 @@
         "loglevel": "1.6.1",
         "opn": "5.1.0",
         "portfinder": "1.0.13",
-        "selfsigned": "1.10.1",
+        "selfsigned": "1.10.2",
         "serve-index": "1.9.1",
         "sockjs": "0.3.19",
         "sockjs-client": "1.1.4",
@@ -14791,7 +14795,7 @@
       "integrity": "sha1-DK+dLXVdk67gSdS90NP+LMoqJOs=",
       "dev": true,
       "requires": {
-        "http-parser-js": "0.4.9",
+        "http-parser-js": "0.4.10",
         "websocket-extensions": "0.1.3"
       }
     },
diff --git a/package.json b/package.json
index 28fc82ee..39783d79 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -19,19 +19,19 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.2.3",
-    "@angular/cdk": "5.1.1",
-    "@angular/common": "5.2.3",
-    "@angular/compiler": "5.2.3",
-    "@angular/core": "5.2.3",
+    "@angular/animations": "5.2.4",
+    "@angular/cdk": "5.2.0",
+    "@angular/common": "5.2.4",
+    "@angular/compiler": "5.2.4",
+    "@angular/core": "5.2.4",
     "@angular/flex-layout": "2.0.0-beta.12",
-    "@angular/forms": "5.2.3",
-    "@angular/http": "5.2.3",
-    "@angular/material": "5.1.1",
-    "@angular/material-moment-adapter": "5.1.1",
-    "@angular/platform-browser": "5.2.3",
-    "@angular/platform-browser-dynamic": "5.2.3",
-    "@angular/router": "5.2.3",
+    "@angular/forms": "5.2.4",
+    "@angular/http": "5.2.4",
+    "@angular/material": "5.2.0",
+    "@angular/material-moment-adapter": "5.2.0",
+    "@angular/platform-browser": "5.2.4",
+    "@angular/platform-browser-dynamic": "5.2.4",
+    "@angular/router": "5.2.4",
     "@ngrx/effects": "5.0.0",
     "@ngrx/router-store": "5.0.0",
     "@ngrx/store": "5.0.0",
@@ -61,13 +61,13 @@
     "zone.js": "0.8.20"
   },
   "devDependencies": {
-    "@angular/cli": "1.6.7",
-    "@angular/compiler-cli": "5.2.3",
-    "@angular/language-service": "5.2.3",
+    "@angular/cli": "1.6.8",
+    "@angular/compiler-cli": "5.2.4",
+    "@angular/language-service": "5.2.4",
     "@angularclass/hmr": "2.1.3",
     "@types/jasmine": "2.8.6",
     "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.96",
+    "@types/node": "6.0.98",
     "codelyzer": "4.1.0",
     "jasmine-core": "2.8.0",
     "jasmine-spec-reporter": "4.2.1",
diff --git a/src/app/core/animations.ts b/src/@fuse/animations/index.ts
similarity index 100%
rename from src/app/core/animations.ts
rename to src/@fuse/animations/index.ts
diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.html b/src/@fuse/components/confirm-dialog/confirm-dialog.component.html
similarity index 100%
rename from src/app/core/components/confirm-dialog/confirm-dialog.component.html
rename to src/@fuse/components/confirm-dialog/confirm-dialog.component.html
diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.scss b/src/@fuse/components/confirm-dialog/confirm-dialog.component.scss
similarity index 100%
rename from src/app/core/components/confirm-dialog/confirm-dialog.component.scss
rename to src/@fuse/components/confirm-dialog/confirm-dialog.component.scss
diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.ts b/src/@fuse/components/confirm-dialog/confirm-dialog.component.ts
similarity index 100%
rename from src/app/core/components/confirm-dialog/confirm-dialog.component.ts
rename to src/@fuse/components/confirm-dialog/confirm-dialog.component.ts
diff --git a/src/app/core/components/copier/copier.service.ts b/src/@fuse/components/copier/copier.service.ts
similarity index 100%
rename from src/app/core/components/copier/copier.service.ts
rename to src/@fuse/components/copier/copier.service.ts
diff --git a/src/app/core/components/countdown/countdown.component.html b/src/@fuse/components/countdown/countdown.component.html
similarity index 100%
rename from src/app/core/components/countdown/countdown.component.html
rename to src/@fuse/components/countdown/countdown.component.html
diff --git a/src/app/core/components/countdown/countdown.component.scss b/src/@fuse/components/countdown/countdown.component.scss
similarity index 100%
rename from src/app/core/components/countdown/countdown.component.scss
rename to src/@fuse/components/countdown/countdown.component.scss
diff --git a/src/app/core/components/countdown/countdown.component.ts b/src/@fuse/components/countdown/countdown.component.ts
similarity index 100%
rename from src/app/core/components/countdown/countdown.component.ts
rename to src/@fuse/components/countdown/countdown.component.ts
diff --git a/src/app/core/components/demo/demo-content/demo-content.component.html b/src/@fuse/components/demo/demo-content/demo-content.component.html
similarity index 100%
rename from src/app/core/components/demo/demo-content/demo-content.component.html
rename to src/@fuse/components/demo/demo-content/demo-content.component.html
diff --git a/src/app/core/components/demo/demo-content/demo-content.component.scss b/src/@fuse/components/demo/demo-content/demo-content.component.scss
similarity index 100%
rename from src/app/core/components/demo/demo-content/demo-content.component.scss
rename to src/@fuse/components/demo/demo-content/demo-content.component.scss
diff --git a/src/app/core/components/demo/demo-content/demo-content.component.ts b/src/@fuse/components/demo/demo-content/demo-content.component.ts
similarity index 100%
rename from src/app/core/components/demo/demo-content/demo-content.component.ts
rename to src/@fuse/components/demo/demo-content/demo-content.component.ts
diff --git a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html b/src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.html
similarity index 100%
rename from src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html
rename to src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.html
diff --git a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.scss b/src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.scss
similarity index 100%
rename from src/app/core/components/demo/demo-sidenav/demo-sidenav.component.scss
rename to src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.scss
diff --git a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.ts b/src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.ts
similarity index 100%
rename from src/app/core/components/demo/demo-sidenav/demo-sidenav.component.ts
rename to src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.ts
diff --git a/src/app/core/components/demo/demo.module.ts b/src/@fuse/components/demo/demo.module.ts
similarity index 100%
rename from src/app/core/components/demo/demo.module.ts
rename to src/@fuse/components/demo/demo.module.ts
diff --git a/src/app/core/components/highlight/highlight.component.scss b/src/@fuse/components/highlight/highlight.component.scss
similarity index 100%
rename from src/app/core/components/highlight/highlight.component.scss
rename to src/@fuse/components/highlight/highlight.component.scss
diff --git a/src/app/core/components/highlight/highlight.component.ts b/src/@fuse/components/highlight/highlight.component.ts
similarity index 100%
rename from src/app/core/components/highlight/highlight.component.ts
rename to src/@fuse/components/highlight/highlight.component.ts
diff --git a/src/app/core/components/highlight/prism-languages.ts b/src/@fuse/components/highlight/prism-languages.ts
similarity index 100%
rename from src/app/core/components/highlight/prism-languages.ts
rename to src/@fuse/components/highlight/prism-languages.ts
diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.html b/src/@fuse/components/material-color-picker/material-color-picker.component.html
similarity index 100%
rename from src/app/core/components/material-color-picker/material-color-picker.component.html
rename to src/@fuse/components/material-color-picker/material-color-picker.component.html
diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.scss b/src/@fuse/components/material-color-picker/material-color-picker.component.scss
similarity index 100%
rename from src/app/core/components/material-color-picker/material-color-picker.component.scss
rename to src/@fuse/components/material-color-picker/material-color-picker.component.scss
diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.ts b/src/@fuse/components/material-color-picker/material-color-picker.component.ts
similarity index 98%
rename from src/app/core/components/material-color-picker/material-color-picker.component.ts
rename to src/@fuse/components/material-color-picker/material-color-picker.component.ts
index 317c829d..cb83c1dd 100644
--- a/src/app/core/components/material-color-picker/material-color-picker.component.ts
+++ b/src/@fuse/components/material-color-picker/material-color-picker.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { MatColors } from '../../matColors';
-import { fuseAnimations } from '../../animations';
+import { fuseAnimations } from '../../animations/index';
 
 @Component({
     selector     : 'fuse-material-color-picker',
diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html b/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
similarity index 100%
rename from src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
rename to src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss b/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss
similarity index 100%
rename from src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss
rename to src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss
diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts b/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
similarity index 83%
rename from src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
rename to src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
index 4fb2853a..c691a1bb 100644
--- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
+++ b/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
-import { fuseAnimations } from '../../../../animations';
+import { fuseAnimations } from '../../../../animations/index';
 import { FuseConfigService } from '../../../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';
 
@@ -11,7 +11,7 @@ import { Subscription } from 'rxjs/Subscription';
 })
 export class FuseNavHorizontalCollapseComponent implements OnDestroy
 {
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
     fuseSettings: any;
     isOpen = false;
 
@@ -34,8 +34,8 @@ export class FuseNavHorizontalCollapseComponent implements OnDestroy
         private fuseConfig: FuseConfigService
     )
     {
-        this.onSettingsChanged =
-            this.fuseConfig.onSettingsChanged
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
                 .subscribe(
                     (newSettings) => {
                         this.fuseSettings = newSettings;
@@ -45,6 +45,6 @@ export class FuseNavHorizontalCollapseComponent implements OnDestroy
 
     ngOnDestroy()
     {
-        this.onSettingsChanged.unsubscribe();
+        this.onConfigChanged.unsubscribe();
     }
 }
diff --git a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html b/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
similarity index 100%
rename from src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
rename to src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
diff --git a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss b/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss
similarity index 100%
rename from src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss
rename to src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss
diff --git a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts b/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts
similarity index 100%
rename from src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts
rename to src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts
diff --git a/src/app/core/components/navigation/navigation.component.html b/src/@fuse/components/navigation/navigation.component.html
similarity index 100%
rename from src/app/core/components/navigation/navigation.component.html
rename to src/@fuse/components/navigation/navigation.component.html
diff --git a/src/app/core/components/navigation/navigation.component.scss b/src/@fuse/components/navigation/navigation.component.scss
similarity index 60%
rename from src/app/core/components/navigation/navigation.component.scss
rename to src/@fuse/components/navigation/navigation.component.scss
index 8087fe06..7cee8cc8 100644
--- a/src/app/core/components/navigation/navigation.component.scss
+++ b/src/@fuse/components/navigation/navigation.component.scss
@@ -1,4 +1,4 @@
-@import 'src/app/core/scss/fuse';
+@import 'src/@fuse/scss/fuse';
 
 #main-navigation {
     margin: 0;
diff --git a/src/app/core/components/navigation/navigation.component.ts b/src/@fuse/components/navigation/navigation.component.ts
similarity index 100%
rename from src/app/core/components/navigation/navigation.component.ts
rename to src/@fuse/components/navigation/navigation.component.ts
diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/@fuse/components/navigation/navigation.model.ts
similarity index 100%
rename from src/app/core/components/navigation/navigation.model.ts
rename to src/@fuse/components/navigation/navigation.model.ts
diff --git a/src/app/core/components/navigation/navigation.module.ts b/src/@fuse/components/navigation/navigation.module.ts
similarity index 100%
rename from src/app/core/components/navigation/navigation.module.ts
rename to src/@fuse/components/navigation/navigation.module.ts
diff --git a/src/app/core/components/navigation/navigation.service.ts b/src/@fuse/components/navigation/navigation.service.ts
similarity index 100%
rename from src/app/core/components/navigation/navigation.service.ts
rename to src/@fuse/components/navigation/navigation.service.ts
diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
similarity index 100%
rename from src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
rename to src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.scss b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.scss
similarity index 95%
rename from src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.scss
rename to src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.scss
index 860565ee..6fa59f1f 100644
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.scss
+++ b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.scss
@@ -1,6 +1,6 @@
 :host {
 
-    .folded:not(.folded-open) & {
+    .folded:not(.unfolded) & {
 
         .nav-link {
 
@@ -19,6 +19,7 @@
     }
 
     .nav-link {
+
         .collapse-arrow {
             transition: transform .3s ease-in-out, opacity .25s ease-in-out .1s;
             transform: rotate(0);
diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
similarity index 98%
rename from src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
rename to src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
index 31712d66..3a640232 100644
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
+++ b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
@@ -1,7 +1,7 @@
 import { Component, HostBinding, Input, OnInit } from '@angular/core';
 import { FuseNavigationService } from '../../navigation.service';
 import { NavigationEnd, Router } from '@angular/router';
-import { fuseAnimations } from '../../../../animations';
+import { fuseAnimations } from '../../../../animations/index';
 
 @Component({
     selector   : 'fuse-nav-vertical-collapse',
diff --git a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html b/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.html
similarity index 100%
rename from src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html
rename to src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.html
diff --git a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss b/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
similarity index 92%
rename from src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
rename to src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
index 7021a70f..fdbd817a 100644
--- a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
+++ b/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
@@ -1,6 +1,6 @@
 :host {
 
-    .folded:not(.folded-open) & {
+    .folded:not(.unfolded) & {
 
         > .group-title {
             align-items: center;
diff --git a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts b/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
similarity index 100%
rename from src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
rename to src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
diff --git a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html
similarity index 100%
rename from src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html
rename to src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html
diff --git a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.scss b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.scss
similarity index 85%
rename from src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.scss
rename to src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.scss
index 1efc651a..6ab28ae1 100644
--- a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.scss
+++ b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.scss
@@ -1,6 +1,6 @@
 :host {
 
-    .folded:not(.folded-open) & {
+    .folded:not(.unfolded) & {
 
         .nav-link {
 
diff --git a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.ts b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts
similarity index 100%
rename from src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.ts
rename to src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts
diff --git a/src/app/core/components/search-bar/search-bar.component.html b/src/@fuse/components/search-bar/search-bar.component.html
similarity index 100%
rename from src/app/core/components/search-bar/search-bar.component.html
rename to src/@fuse/components/search-bar/search-bar.component.html
diff --git a/src/app/core/components/search-bar/search-bar.component.scss b/src/@fuse/components/search-bar/search-bar.component.scss
similarity index 98%
rename from src/app/core/components/search-bar/search-bar.component.scss
rename to src/@fuse/components/search-bar/search-bar.component.scss
index 7a737fcc..5ec26450 100644
--- a/src/app/core/components/search-bar/search-bar.component.scss
+++ b/src/@fuse/components/search-bar/search-bar.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/core/components/search-bar/search-bar.component.ts b/src/@fuse/components/search-bar/search-bar.component.ts
similarity index 90%
rename from src/app/core/components/search-bar/search-bar.component.ts
rename to src/@fuse/components/search-bar/search-bar.component.ts
index ea295798..f83951b0 100644
--- a/src/app/core/components/search-bar/search-bar.component.ts
+++ b/src/@fuse/components/search-bar/search-bar.component.ts
@@ -12,15 +12,15 @@ export class FuseSearchBarComponent implements OnInit
     collapsed: boolean;
     toolbarColor: string;
     @Output() onInput: EventEmitter<any> = new EventEmitter();
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
 
     constructor(
         private fuseConfig: FuseConfigService
     )
     {
         this.collapsed = true;
-        this.onSettingsChanged =
-            this.fuseConfig.onSettingsChanged
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
                 .subscribe(
                     (newSettings) => {
                         this.toolbarColor = newSettings.colorClasses.toolbar;
diff --git a/src/app/core/components/search-bar/search-bar.module.ts b/src/@fuse/components/search-bar/search-bar.module.ts
similarity index 100%
rename from src/app/core/components/search-bar/search-bar.module.ts
rename to src/@fuse/components/search-bar/search-bar.module.ts
diff --git a/src/app/core/components/shortcuts/shortcuts.component.html b/src/@fuse/components/shortcuts/shortcuts.component.html
similarity index 100%
rename from src/app/core/components/shortcuts/shortcuts.component.html
rename to src/@fuse/components/shortcuts/shortcuts.component.html
diff --git a/src/app/core/components/shortcuts/shortcuts.component.scss b/src/@fuse/components/shortcuts/shortcuts.component.scss
similarity index 93%
rename from src/app/core/components/shortcuts/shortcuts.component.scss
rename to src/@fuse/components/shortcuts/shortcuts.component.scss
index 0ee3a166..41b8c57d 100644
--- a/src/app/core/components/shortcuts/shortcuts.component.scss
+++ b/src/@fuse/components/shortcuts/shortcuts.component.scss
@@ -1,4 +1,4 @@
-@import 'src/app/core/scss/fuse';
+@import 'src/@fuse/scss/fuse';
 
 :host {
 
diff --git a/src/app/core/components/shortcuts/shortcuts.component.ts b/src/@fuse/components/shortcuts/shortcuts.component.ts
similarity index 97%
rename from src/app/core/components/shortcuts/shortcuts.component.ts
rename to src/@fuse/components/shortcuts/shortcuts.component.ts
index a1479f1d..85bb1e71 100644
--- a/src/app/core/components/shortcuts/shortcuts.component.ts
+++ b/src/@fuse/components/shortcuts/shortcuts.component.ts
@@ -20,7 +20,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     mobileShortcutsPanelActive = false;
     toolbarColor: string;
     matchMediaSubscription: Subscription;
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
 
     @ViewChild('searchInput') searchInputField;
     @ViewChild('shortcuts') shortcutsEl: ElementRef;
@@ -36,8 +36,8 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     {
         this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
 
-        this.onSettingsChanged =
-            this.fuseConfig.onSettingsChanged
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
                 .subscribe(
                     (newSettings) => {
                         this.toolbarColor = newSettings.colorClasses.toolbar;
diff --git a/src/app/core/components/shortcuts/shortcuts.module.ts b/src/@fuse/components/shortcuts/shortcuts.module.ts
similarity index 100%
rename from src/app/core/components/shortcuts/shortcuts.module.ts
rename to src/@fuse/components/shortcuts/shortcuts.module.ts
diff --git a/src/@fuse/components/sidebar/sidebar.component.html b/src/@fuse/components/sidebar/sidebar.component.html
new file mode 100644
index 00000000..95a0b70b
--- /dev/null
+++ b/src/@fuse/components/sidebar/sidebar.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
\ No newline at end of file
diff --git a/src/@fuse/components/sidebar/sidebar.component.scss b/src/@fuse/components/sidebar/sidebar.component.scss
new file mode 100644
index 00000000..b3853867
--- /dev/null
+++ b/src/@fuse/components/sidebar/sidebar.component.scss
@@ -0,0 +1,59 @@
+fuse-sidebar {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    width: 280px;
+    min-width: 280px;
+    max-width: 280px;
+    z-index: 1000;
+    transition-property: transform, width, min-width, max-width;
+    transition-duration: 150ms;
+    transition-timing-function: ease-in-out;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
+
+    &.left-aligned {
+        left: 0;
+        transform: translateX(-100%);
+    }
+
+    &.right-aligned {
+        right: 0;
+        transform: translateX(100%);
+    }
+
+    &.open {
+        transform: translateX(0);
+    }
+
+    &.locked-open {
+        position: relative !important;
+        transform: translateX(0) !important;
+    }
+
+    &.folded {
+        position: absolute !important;
+        top: 0;
+        bottom: 0;
+
+        &:not(.unfolded) {
+            width: 64px;
+            min-width: 64px;
+            max-width: 64px;
+        }
+    }
+}
+
+.fuse-sidebar-overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 3;
+    background-color: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+}
\ No newline at end of file
diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts
new file mode 100644
index 00000000..582c023c
--- /dev/null
+++ b/src/@fuse/components/sidebar/sidebar.component.ts
@@ -0,0 +1,368 @@
+import { Component, ElementRef, HostBinding, HostListener, Inject, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
+import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
+import { ObservableMedia } from '@angular/flex-layout';
+import { Subscription } from 'rxjs/Subscription';
+
+import { FuseSidebarService } from './sidebar.service';
+import { FuseMatchMedia } from '@fuse/services/match-media.service';
+import { DOCUMENT } from '@angular/common';
+
+@Component({
+    selector     : 'fuse-sidebar',
+    templateUrl  : './sidebar.component.html',
+    styleUrls    : ['./sidebar.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseSidebarComponent implements OnInit, OnDestroy
+{
+    // Name
+    @Input()
+    name: string;
+
+    // Align
+    @Input()
+    align: string;
+
+    // Open
+    @HostBinding('class.open')
+    opened: boolean;
+
+    // Locked Open
+    @Input()
+    lockedOpen: string;
+
+    // isLockedOpen
+    @HostBinding('class.locked-open')
+    isLockedOpen: boolean;
+
+    // Folded
+    @HostBinding('class.folded')
+    @Input()
+    folded: boolean;
+
+    // Folded unfolded
+    @HostBinding('class.unfolded')
+    unfolded: boolean;
+
+    // Private
+    private _wasActive: boolean;
+    private _backdrop: HTMLElement | null = null;
+    private _player: AnimationPlayer;
+    private _matchMediaWatcher: Subscription;
+
+    /**
+     * Constructor
+     *
+     * @param renderer
+     * @param elementRef
+     * @param animationBuilder
+     * @param sidebarService
+     * @param matchMedia
+     * @param media
+     * @param document
+     */
+    constructor(
+        private renderer: Renderer2,
+        private elementRef: ElementRef,
+        private animationBuilder: AnimationBuilder,
+        private sidebarService: FuseSidebarService,
+        private matchMedia: FuseMatchMedia,
+        private media: ObservableMedia,
+        @Inject(DOCUMENT) private document: any
+    )
+    {
+        // Set the defaults
+        this.opened = false;
+        this.folded = false;
+        this.align = 'left';
+    }
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Register the sidebar
+        this.sidebarService.register(this.name, this);
+
+        // Setup alignment
+        this._setupAlignment();
+
+        // Setup lockedOpen
+        this._setupLockedOpen();
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unregister the sidebar
+        this.sidebarService.unregister(this.name);
+
+        // Unregister the media watcher
+        this._matchMediaWatcher.unsubscribe();
+    }
+
+    /**
+     * Setup the alignment
+     *
+     * @private
+     */
+    private _setupAlignment(): void
+    {
+        if ( this.align === 'left' )
+        {
+            this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned');
+        }
+        else
+        {
+            this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned');
+        }
+    }
+
+    /**
+     * Setup the lockedOpen handler
+     *
+     * @private
+     */
+    private _setupLockedOpen(): void
+    {
+        // Return if the lockedOpen wasn't set
+        if ( !this.lockedOpen )
+        {
+            return;
+        }
+
+        // Set the wasActive for the first time
+        this._wasActive = false;
+
+        // Act on every media change
+        this._matchMediaWatcher =
+
+            this.matchMedia.onMediaChange.subscribe(() => {
+
+                // Get the active status
+                const isActive = this.media.isActive(this.lockedOpen);
+
+                // If the both status are the same, don't act
+                if ( this._wasActive === isActive )
+                {
+                    return;
+                }
+
+                // Store the new active status
+                this._wasActive = isActive;
+
+                // Activate the lockedOpen
+                if ( isActive )
+                {
+                    // Set the lockedOpen status
+                    this.isLockedOpen = true;
+                }
+                // De-Activate the lockedOpen
+                else
+                {
+                    // Set the lockedOpen status
+                    this.isLockedOpen = false;
+
+                    // Unfold the sidebar in case if it was folded
+                    this.unfold();
+                }
+            });
+    }
+
+    /**
+     * Open the sidebar
+     */
+    open(): void
+    {
+        if ( this.opened || this.isLockedOpen )
+        {
+            return;
+        }
+
+        // Show the backdrop
+        this.showBackdrop();
+
+        // Set the opened status
+        this.opened = true;
+
+        // Add a css class to the body
+        this.renderer.addClass(this.document.body, 'fuse-sidebar-opened');
+    }
+
+    /**
+     * Close the sidebar
+     */
+    close(): void
+    {
+        if ( !this.opened )
+        {
+            return;
+        }
+
+        // Hide the backdrop
+        this.hideBackdrop();
+
+        // Set the opened status
+        this.opened = false;
+
+        // Remove the css class from the body
+        this.renderer.removeClass(this.document.body, 'fuse-sidebar-opened');
+    }
+
+    /**
+     * Toggle open/close the sidebar
+     */
+    toggleOpen(): void
+    {
+        if ( this.opened )
+        {
+            this.close();
+        }
+        else
+        {
+            this.open();
+        }
+    }
+
+    /**
+     * Mouseenter
+     */
+    @HostListener('mouseenter')
+    onMouseEnter(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Unfold the sidebar temporarily
+        this.unfolded = true;
+
+        // Add a css class to the body
+        this.renderer.addClass(this.document.body, 'fuse-sidebar-folded-unfolded');
+    }
+
+    /**
+     * Mouseleave
+     */
+    @HostListener('mouseleave')
+    onMouseLeave(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Fold the sidebar back
+        this.unfolded = false;
+
+        // Remove the css class from the body
+        this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded-unfolded');
+    }
+
+    /**
+     * Fold the sidebar permanently
+     */
+    fold(): void
+    {
+        this.folded = true;
+
+        // Add a css class to the body
+        this.renderer.addClass(this.document.body, 'fuse-sidebar-folded');
+    }
+
+    /**
+     * Unfold the sidebar permanently
+     */
+    unfold(): void
+    {
+        this.folded = false;
+
+        // Remove the css class from the body
+        this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded');
+    }
+
+    /**
+     * Toggle the sidebar fold/unfold permanently
+     */
+    toggleFold(): void
+    {
+        if ( this.folded )
+        {
+            this.unfold();
+        }
+        else
+        {
+            this.fold();
+        }
+    }
+
+    /**
+     * Show the backdrop
+     */
+    showBackdrop(): void
+    {
+        // Create the backdrop element
+        this._backdrop = this.renderer.createElement('div');
+
+        // Add a class to the backdrop element
+        this._backdrop.classList.add('fuse-sidebar-overlay');
+
+        // Append the backdrop to the parent of the sidebar
+        this.renderer.appendChild(this.elementRef.nativeElement.parentElement, this._backdrop);
+
+        // Create the enter animation and attach it to the player
+        this._player =
+            this.animationBuilder
+                .build([
+                    animate('300ms ease', style({opacity: 1}))
+                ]).create(this._backdrop);
+
+        // Play the animation
+        this._player.play();
+
+        // Add an event listener to the overlay
+        this._backdrop.addEventListener('click', () => {
+                this.close();
+            }
+        );
+    }
+
+    /**
+     * Hide the backdrop
+     */
+    hideBackdrop(): void
+    {
+        if ( !this._backdrop )
+        {
+            return;
+        }
+
+        // Create the leave animation and attach it to the player
+        this._player =
+            this.animationBuilder
+                .build([
+                    animate('300ms ease', style({opacity: 0}))
+                ]).create(this._backdrop);
+
+        // Play the animation
+        this._player.play();
+
+        // Once the animation is done...
+        this._player.onDone(() => {
+
+            // If the backdrop still exists...
+            if ( this._backdrop )
+            {
+                // Remove the backdrop
+                this._backdrop.parentNode.removeChild(this._backdrop);
+                this._backdrop = null;
+            }
+        });
+    }
+}
diff --git a/src/@fuse/components/sidebar/sidebar.module.ts b/src/@fuse/components/sidebar/sidebar.module.ts
new file mode 100644
index 00000000..f26739f3
--- /dev/null
+++ b/src/@fuse/components/sidebar/sidebar.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+
+import { FuseSidebarComponent } from './sidebar.component';
+import { FuseSidebarService } from './sidebar.service';
+
+@NgModule({
+    declarations: [
+        FuseSidebarComponent
+    ],
+    exports     : [
+        FuseSidebarComponent
+    ],
+    providers   : [
+        FuseSidebarService
+    ]
+})
+export class FuseSidebarModule
+{
+}
diff --git a/src/@fuse/components/sidebar/sidebar.service.ts b/src/@fuse/components/sidebar/sidebar.service.ts
new file mode 100644
index 00000000..a1da4cbb
--- /dev/null
+++ b/src/@fuse/components/sidebar/sidebar.service.ts
@@ -0,0 +1,74 @@
+import { Injectable } from '@angular/core';
+
+import { FuseSidebarComponent } from './sidebar.component';
+
+@Injectable()
+export class FuseSidebarService
+{
+    // Private
+    private _registry: { [key: string]: FuseSidebarComponent } = {};
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+
+    }
+
+    /**
+     * Add the sidebar to the registry
+     *
+     * @param key
+     * @param sidebar
+     */
+    register(key, sidebar): void
+    {
+        // Check if the key already being used
+        if ( this._registry[key] )
+        {
+            console.error(`The sidebar with the key '${key}' already exists. Either unregister it first or use a unique key.`);
+
+            return;
+        }
+
+        // Add to the registry
+        this._registry[key] = sidebar;
+    }
+
+    /**
+     * Remove the sidebar from the registry
+     *
+     * @param key
+     */
+    unregister(key): void
+    {
+        // Check if the sidebar exists
+        if ( !this._registry[key] )
+        {
+            console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
+        }
+
+        // Unregister the sidebar
+        delete this._registry[key];
+    }
+
+    /**
+     * Return the sidebar with the given key
+     *
+     * @param key
+     */
+    getSidebar(key): any
+    {
+        // Check if the sidebar exists
+        if ( !this._registry[key] )
+        {
+            console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
+
+            return;
+        }
+
+        // Return the sidebar
+        return this._registry[key];
+    }
+}
diff --git a/src/app/core/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html
similarity index 83%
rename from src/app/core/components/theme-options/theme-options.component.html
rename to src/@fuse/components/theme-options/theme-options.component.html
index 16e4de6e..cb36549e 100644
--- a/src/app/core/components/theme-options/theme-options.component.html
+++ b/src/@fuse/components/theme-options/theme-options.component.html
@@ -13,7 +13,7 @@
     <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
 
         <h3>Navigation:</h3>
-        <mat-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
+        <mat-radio-group [(ngModel)]="config.layout.navigation" (ngModelChange)="onSettingsChange()"
                          fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
             <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>
@@ -22,13 +22,13 @@
         </mat-radio-group>
 
         <h3>Navigation Fold (for vertical navigation):</h3>
-        <mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
+        <mat-slide-toggle [(ngModel)]="config.layout.navigationFolded"
                           (change)="onSettingsChange()">
             Folded
         </mat-slide-toggle>
 
         <h3 class="mt-24">Toolbar:</h3>
-        <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
+        <mat-radio-group [(ngModel)]="config.layout.toolbar" (ngModelChange)="onSettingsChange()"
                          fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
             <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>
@@ -36,7 +36,7 @@
         </mat-radio-group>
 
         <h3 class="mt-24">Footer:</h3>
-        <mat-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
+        <mat-radio-group [(ngModel)]="config.layout.footer" (ngModelChange)="onSettingsChange()"
                          fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
             <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>
@@ -44,7 +44,7 @@
         </mat-radio-group>
 
         <h3 class="mt-24">Layout Mode:</h3>
-        <mat-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
+        <mat-radio-group [(ngModel)]="config.layout.mode" (ngModelChange)="onSettingsChange()"
                          fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
             <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>
@@ -57,19 +57,19 @@
 
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4 class="mr-8">Toolbar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
+                <fuse-material-color-picker [(selectedClass)]="config.colorClasses.toolbar"
                                             (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
 
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4 class="mr-8">Navigation Bar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar"
+                <fuse-material-color-picker [(selectedClass)]="config.colorClasses.navbar"
                                             (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
 
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4 class="mr-8">Footer Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer"
+                <fuse-material-color-picker [(selectedClass)]="config.colorClasses.footer"
                                             (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
 
@@ -79,7 +79,7 @@
 
         <h3>Router Animation:</h3>
         <mat-form-field class="w-100-p">
-            <mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
+            <mat-select class="p-0" [(ngModel)]="config.routerAnimation">
                 <mat-option value="none">
                     None
                 </mat-option>
diff --git a/src/app/core/components/theme-options/theme-options.component.scss b/src/@fuse/components/theme-options/theme-options.component.scss
similarity index 98%
rename from src/app/core/components/theme-options/theme-options.component.scss
rename to src/@fuse/components/theme-options/theme-options.component.scss
index bc116a3c..2e2c7c75 100644
--- a/src/app/core/components/theme-options/theme-options.component.scss
+++ b/src/@fuse/components/theme-options/theme-options.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 @keyframes rotating {
     from {
diff --git a/src/app/core/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts
similarity index 88%
rename from src/app/core/components/theme-options/theme-options.component.ts
rename to src/@fuse/components/theme-options/theme-options.component.ts
index b84260ef..373b5ce5 100644
--- a/src/app/core/components/theme-options/theme-options.component.ts
+++ b/src/@fuse/components/theme-options/theme-options.component.ts
@@ -2,7 +2,7 @@ import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewC
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
 import { Subscription } from 'rxjs/Subscription';
 import { FuseConfigService } from '../../services/config.service';
-import { fuseAnimations } from '../../animations';
+import { fuseAnimations } from '../../animations/index';
 import { FuseNavigationService } from '../navigation/navigation.service';
 
 @Component({
@@ -18,9 +18,9 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     @ViewChild('overlay') overlay: ElementRef;
 
     public player: AnimationPlayer;
-    fuseSettings: any;
+    config: any;
 
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
 
     @HostBinding('class.bar-closed') barClosed: boolean;
 
@@ -33,11 +33,11 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     {
         this.barClosed = true;
 
-        this.onSettingsChanged =
-            this.fuseConfig.onSettingsChanged
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
                 .subscribe(
-                    (newSettings) => {
-                        this.fuseSettings = newSettings;
+                    (newConfig) => {
+                        this.config = newConfig;
                     }
                 );
 
@@ -72,7 +72,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
     onSettingsChange()
     {
-        this.fuseConfig.setSettings(this.fuseSettings);
+        this.fuseConfig.setConfig(this.config);
     }
 
     closeBar()
@@ -107,6 +107,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
     ngOnDestroy()
     {
-        this.onSettingsChanged.unsubscribe();
+        this.onConfigChanged.unsubscribe();
     }
 }
diff --git a/src/app/core/components/widget/widget-toggle.directive.ts b/src/@fuse/components/widget/widget-toggle.directive.ts
similarity index 100%
rename from src/app/core/components/widget/widget-toggle.directive.ts
rename to src/@fuse/components/widget/widget-toggle.directive.ts
diff --git a/src/app/core/components/widget/widget.component.html b/src/@fuse/components/widget/widget.component.html
similarity index 100%
rename from src/app/core/components/widget/widget.component.html
rename to src/@fuse/components/widget/widget.component.html
diff --git a/src/app/core/components/widget/widget.component.scss b/src/@fuse/components/widget/widget.component.scss
similarity index 100%
rename from src/app/core/components/widget/widget.component.scss
rename to src/@fuse/components/widget/widget.component.scss
diff --git a/src/app/core/components/widget/widget.component.ts b/src/@fuse/components/widget/widget.component.ts
similarity index 100%
rename from src/app/core/components/widget/widget.component.ts
rename to src/@fuse/components/widget/widget.component.ts
diff --git a/src/app/core/components/widget/widget.module.ts b/src/@fuse/components/widget/widget.module.ts
similarity index 100%
rename from src/app/core/components/widget/widget.module.ts
rename to src/@fuse/components/widget/widget.module.ts
diff --git a/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts b/src/@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts
similarity index 100%
rename from src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts
rename to src/@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts
diff --git a/src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive.ts b/src/@fuse/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive.ts
similarity index 100%
rename from src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive.ts
rename to src/@fuse/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive.ts
diff --git a/src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service.ts b/src/@fuse/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service.ts
similarity index 100%
rename from src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service.ts
rename to src/@fuse/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service.ts
diff --git a/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
similarity index 96%
rename from src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
rename to src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
index 9156f2c3..49fd75d2 100644
--- a/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
+++ b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
@@ -9,7 +9,7 @@ import PerfectScrollbar from 'perfect-scrollbar';
 })
 export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
 {
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
     isDisableCustomScrollbars = false;
     isMobile = false;
     isInitialized = true;
@@ -21,8 +21,8 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         private platform: Platform
     )
     {
-        this.onSettingsChanged =
-            this.fuseConfig.onSettingsChanged
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
                 .subscribe(
                     (settings) => {
                         this.isDisableCustomScrollbars = !settings.customScrollbars;
@@ -56,7 +56,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
             return;
         }
 
-        this.onSettingsChanged.unsubscribe();
+        this.onConfigChanged.unsubscribe();
 
         // Destroy the perfect-scrollbar
         this.ps.destroy();
diff --git a/src/@fuse/fuse.module.ts b/src/@fuse/fuse.module.ts
new file mode 100644
index 00000000..7ed75db1
--- /dev/null
+++ b/src/@fuse/fuse.module.ts
@@ -0,0 +1,37 @@
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
+
+import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
+
+@NgModule({
+    declarations: [],
+    providers   : [
+        FuseConfigService,
+        FuseNavigationService,
+        FuseSplashScreenService
+    ]
+})
+export class FuseModule
+{
+    constructor(@Optional() @SkipSelf() parentModule: FuseModule)
+    {
+        if ( parentModule )
+        {
+            throw new Error('FuseModule is already loaded. Import it in the AppModule only!');
+        }
+    }
+
+    static forRoot(config): ModuleWithProviders
+    {
+        return {
+            ngModule : FuseModule,
+            providers: [
+                {
+                    provide : FUSE_CONFIG,
+                    useValue: config
+                }
+            ]
+        };
+    }
+}
diff --git a/src/app/core/fuseUtils.ts b/src/@fuse/fuseUtils.ts
similarity index 100%
rename from src/app/core/fuseUtils.ts
rename to src/@fuse/fuseUtils.ts
diff --git a/src/app/core/matColors.ts b/src/@fuse/matColors.ts
similarity index 100%
rename from src/app/core/matColors.ts
rename to src/@fuse/matColors.ts
diff --git a/src/app/core/modules/material.module.ts b/src/@fuse/modules/material.module.ts
similarity index 100%
rename from src/app/core/modules/material.module.ts
rename to src/@fuse/modules/material.module.ts
diff --git a/src/app/core/modules/shared.module.ts b/src/@fuse/modules/shared.module.ts
similarity index 95%
rename from src/app/core/modules/shared.module.ts
rename to src/@fuse/modules/shared.module.ts
index 36bbeb3d..ec121b3d 100644
--- a/src/app/core/modules/shared.module.ts
+++ b/src/@fuse/modules/shared.module.ts
@@ -14,7 +14,6 @@ import { FusePipesModule } from '../pipes/pipes.module';
 import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseMatchMedia } from '../services/match-media.service';
-import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
 import { FuseHighlightComponent } from '../components/highlight/highlight.component';
 import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
@@ -73,7 +72,6 @@ import { ChartsModule } from 'ng2-charts';
     providers      : [
         CookieService,
         FuseMatchMedia,
-        FuseNavbarVerticalService,
         FuseMatSidenavHelperService,
         FuseTranslationLoaderService
     ]
diff --git a/src/app/core/pipes/camelCaseToDash.pipe.ts b/src/@fuse/pipes/camelCaseToDash.pipe.ts
similarity index 100%
rename from src/app/core/pipes/camelCaseToDash.pipe.ts
rename to src/@fuse/pipes/camelCaseToDash.pipe.ts
diff --git a/src/app/core/pipes/filter.pipe.ts b/src/@fuse/pipes/filter.pipe.ts
similarity index 100%
rename from src/app/core/pipes/filter.pipe.ts
rename to src/@fuse/pipes/filter.pipe.ts
diff --git a/src/app/core/pipes/getById.pipe.ts b/src/@fuse/pipes/getById.pipe.ts
similarity index 100%
rename from src/app/core/pipes/getById.pipe.ts
rename to src/@fuse/pipes/getById.pipe.ts
diff --git a/src/app/core/pipes/htmlToPlaintext.pipe.ts b/src/@fuse/pipes/htmlToPlaintext.pipe.ts
similarity index 100%
rename from src/app/core/pipes/htmlToPlaintext.pipe.ts
rename to src/@fuse/pipes/htmlToPlaintext.pipe.ts
diff --git a/src/app/core/pipes/keys.pipe.ts b/src/@fuse/pipes/keys.pipe.ts
similarity index 100%
rename from src/app/core/pipes/keys.pipe.ts
rename to src/@fuse/pipes/keys.pipe.ts
diff --git a/src/app/core/pipes/pipes.module.ts b/src/@fuse/pipes/pipes.module.ts
similarity index 100%
rename from src/app/core/pipes/pipes.module.ts
rename to src/@fuse/pipes/pipes.module.ts
diff --git a/src/app/core/scss/core.scss b/src/@fuse/scss/core.scss
similarity index 100%
rename from src/app/core/scss/core.scss
rename to src/@fuse/scss/core.scss
diff --git a/src/app/core/scss/fuse.scss b/src/@fuse/scss/fuse.scss
similarity index 100%
rename from src/app/core/scss/fuse.scss
rename to src/@fuse/scss/fuse.scss
diff --git a/src/app/core/scss/mixins/_breakpoints.scss b/src/@fuse/scss/mixins/_breakpoints.scss
similarity index 100%
rename from src/app/core/scss/mixins/_breakpoints.scss
rename to src/@fuse/scss/mixins/_breakpoints.scss
diff --git a/src/app/core/scss/partials/_angular-material-fix.scss b/src/@fuse/scss/partials/_angular-material-fix.scss
similarity index 100%
rename from src/app/core/scss/partials/_angular-material-fix.scss
rename to src/@fuse/scss/partials/_angular-material-fix.scss
diff --git a/src/app/core/scss/partials/_cards.scss b/src/@fuse/scss/partials/_cards.scss
similarity index 100%
rename from src/app/core/scss/partials/_cards.scss
rename to src/@fuse/scss/partials/_cards.scss
diff --git a/src/app/core/scss/partials/_colors.scss b/src/@fuse/scss/partials/_colors.scss
similarity index 100%
rename from src/app/core/scss/partials/_colors.scss
rename to src/@fuse/scss/partials/_colors.scss
diff --git a/src/app/core/scss/partials/_forms.scss b/src/@fuse/scss/partials/_forms.scss
similarity index 100%
rename from src/app/core/scss/partials/_forms.scss
rename to src/@fuse/scss/partials/_forms.scss
diff --git a/src/app/core/scss/partials/_global.scss b/src/@fuse/scss/partials/_global.scss
similarity index 100%
rename from src/app/core/scss/partials/_global.scss
rename to src/@fuse/scss/partials/_global.scss
diff --git a/src/app/core/scss/partials/_helpers.scss b/src/@fuse/scss/partials/_helpers.scss
similarity index 100%
rename from src/app/core/scss/partials/_helpers.scss
rename to src/@fuse/scss/partials/_helpers.scss
diff --git a/src/app/core/scss/partials/_icons.scss b/src/@fuse/scss/partials/_icons.scss
similarity index 100%
rename from src/app/core/scss/partials/_icons.scss
rename to src/@fuse/scss/partials/_icons.scss
diff --git a/src/app/core/scss/partials/_material.scss b/src/@fuse/scss/partials/_material.scss
similarity index 100%
rename from src/app/core/scss/partials/_material.scss
rename to src/@fuse/scss/partials/_material.scss
diff --git a/src/app/core/scss/partials/_navigation.scss b/src/@fuse/scss/partials/_navigation.scss
similarity index 100%
rename from src/app/core/scss/partials/_navigation.scss
rename to src/@fuse/scss/partials/_navigation.scss
diff --git a/src/app/core/scss/partials/_normalize.scss b/src/@fuse/scss/partials/_normalize.scss
similarity index 100%
rename from src/app/core/scss/partials/_normalize.scss
rename to src/@fuse/scss/partials/_normalize.scss
diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/@fuse/scss/partials/_page-layouts.scss
similarity index 100%
rename from src/app/core/scss/partials/_page-layouts.scss
rename to src/@fuse/scss/partials/_page-layouts.scss
diff --git a/src/app/core/scss/partials/_print.scss b/src/@fuse/scss/partials/_print.scss
similarity index 100%
rename from src/app/core/scss/partials/_print.scss
rename to src/@fuse/scss/partials/_print.scss
diff --git a/src/app/core/scss/partials/_reset.scss b/src/@fuse/scss/partials/_reset.scss
similarity index 100%
rename from src/app/core/scss/partials/_reset.scss
rename to src/@fuse/scss/partials/_reset.scss
diff --git a/src/app/core/scss/partials/_scrollbars.scss b/src/@fuse/scss/partials/_scrollbars.scss
similarity index 100%
rename from src/app/core/scss/partials/_scrollbars.scss
rename to src/@fuse/scss/partials/_scrollbars.scss
diff --git a/src/app/core/scss/partials/_toolbar.scss b/src/@fuse/scss/partials/_toolbar.scss
similarity index 100%
rename from src/app/core/scss/partials/_toolbar.scss
rename to src/@fuse/scss/partials/_toolbar.scss
diff --git a/src/app/core/scss/partials/_typography.scss b/src/@fuse/scss/partials/_typography.scss
similarity index 100%
rename from src/app/core/scss/partials/_typography.scss
rename to src/@fuse/scss/partials/_typography.scss
diff --git a/src/app/core/scss/partials/plugins/_ng-pick-datetime.scss b/src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss
similarity index 100%
rename from src/app/core/scss/partials/plugins/_ng-pick-datetime.scss
rename to src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss
diff --git a/src/app/core/scss/partials/plugins/_ngx-color-picker.scss b/src/@fuse/scss/partials/plugins/_ngx-color-picker.scss
similarity index 95%
rename from src/app/core/scss/partials/plugins/_ngx-color-picker.scss
rename to src/@fuse/scss/partials/plugins/_ngx-color-picker.scss
index aab3d8d7..c1a7d1b0 100644
--- a/src/app/core/scss/partials/plugins/_ngx-color-picker.scss
+++ b/src/@fuse/scss/partials/plugins/_ngx-color-picker.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 .color-picker {
     height: auto !important;
diff --git a/src/app/core/scss/partials/plugins/_ngx-datatable.scss b/src/@fuse/scss/partials/plugins/_ngx-datatable.scss
similarity index 100%
rename from src/app/core/scss/partials/plugins/_ngx-datatable.scss
rename to src/@fuse/scss/partials/plugins/_ngx-datatable.scss
diff --git a/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss b/src/@fuse/scss/partials/plugins/_perfect-scrollbar.scss
similarity index 100%
rename from src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
rename to src/@fuse/scss/partials/plugins/_perfect-scrollbar.scss
diff --git a/src/app/core/scss/partials/plugins/_plugins.scss b/src/@fuse/scss/partials/plugins/_plugins.scss
similarity index 100%
rename from src/app/core/scss/partials/plugins/_plugins.scss
rename to src/@fuse/scss/partials/plugins/_plugins.scss
diff --git a/src/app/core/scss/partials/plugins/_prism.scss b/src/@fuse/scss/partials/plugins/_prism.scss
similarity index 100%
rename from src/app/core/scss/partials/plugins/_prism.scss
rename to src/@fuse/scss/partials/plugins/_prism.scss
diff --git a/src/app/core/scss/variables/_theme.scss b/src/@fuse/scss/variables/_theme.scss
similarity index 100%
rename from src/app/core/scss/variables/_theme.scss
rename to src/@fuse/scss/variables/_theme.scss
diff --git a/src/@fuse/services/config.service.ts b/src/@fuse/services/config.service.ts
new file mode 100644
index 00000000..2c4cbde4
--- /dev/null
+++ b/src/@fuse/services/config.service.ts
@@ -0,0 +1,113 @@
+import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
+import { NavigationStart, Router } from '@angular/router';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Platform } from '@angular/cdk/platform';
+
+// Define the default config
+const DEFAULT_CONFIG = {
+    layout          : {
+        navigation      : 'left', // 'right', 'left', 'top', 'none'
+        navigationFolded: false, // true, false
+        toolbar         : 'below', // 'above', 'below', 'none'
+        footer          : 'below', // 'above', 'below', 'none'
+        mode            : 'fullwidth' // 'boxed', 'fullwidth'
+    },
+    colorClasses    : {
+        toolbar: 'mat-white-500-bg',
+        navbar : 'mat-fuse-dark-700-bg',
+        footer : 'mat-fuse-dark-900-bg'
+    },
+    customScrollbars: true,
+    routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none
+};
+
+// Create the injection token for the custom config
+export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');
+
+@Injectable()
+export class FuseConfigService
+{
+    config: any;
+    defaultConfig: any;
+
+    onConfigChanged: BehaviorSubject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param router
+     * @param platform
+     * @param config
+     */
+    constructor(
+        private router: Router,
+        public platform: Platform,
+        @Inject(FUSE_CONFIG) @Optional() config
+    )
+    {
+        // Set the default settings from the constant
+        this.defaultConfig = DEFAULT_CONFIG;
+
+        // If custom config provided with forRoot,
+        // use them as default config...
+        if ( config )
+        {
+            this.defaultConfig = config;
+        }
+
+        /**
+         * Disable Custom Scrollbars if Browser is Mobile
+         */
+        if ( this.platform.ANDROID || this.platform.IOS )
+        {
+            this.defaultConfig.customScrollbars = false;
+        }
+
+        // Set the config from the default config
+        this.config = {...this.defaultConfig};
+
+        // Reload the default settings for the
+        // layout on every navigation start
+        router.events.subscribe(
+            (event) => {
+                if ( event instanceof NavigationStart )
+                {
+                    this.setConfig({
+                            layout: this.defaultConfig.layout
+                        }
+                    );
+                }
+            }
+        );
+
+        // Create the behavior subject
+        this.onConfigChanged = new BehaviorSubject(this.config);
+    }
+
+    /**
+     * Set the new config from given object
+     *
+     * @param config
+     */
+    setConfig(config): void
+    {
+        // Set the config from the given object
+        // Ugly, but works for now...
+        this.config = {
+            ...this.config,
+            ...config,
+            layout     : {
+                ...this.config.layout,
+                ...config.layout,
+            },
+            colorClasses: {
+                ...this.config.colorClasses,
+                ...config.colorClasses
+            }
+        };
+
+        // Trigger the event
+        this.onConfigChanged.next(this.config);
+    }
+}
+
diff --git a/src/app/core/services/match-media.service.ts b/src/@fuse/services/match-media.service.ts
similarity index 66%
rename from src/app/core/services/match-media.service.ts
rename to src/@fuse/services/match-media.service.ts
index 6e843bc3..382e9935 100644
--- a/src/app/core/services/match-media.service.ts
+++ b/src/@fuse/services/match-media.service.ts
@@ -1,11 +1,12 @@
 import { MediaChange, ObservableMedia } from '@angular/flex-layout';
-import { EventEmitter, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class FuseMatchMedia
 {
     activeMediaQuery: string;
-    onMediaChange: EventEmitter<string> = new EventEmitter<string>();
+    onMediaChange: BehaviorSubject<string> = new BehaviorSubject<string>('');
 
     constructor(private observableMedia: ObservableMedia)
     {
@@ -15,7 +16,7 @@ export class FuseMatchMedia
             if ( this.activeMediaQuery !== change.mqAlias )
             {
                 this.activeMediaQuery = change.mqAlias;
-                this.onMediaChange.emit(change.mqAlias);
+                this.onMediaChange.next(change.mqAlias);
             }
         });
     }
diff --git a/src/app/core/services/splash-screen.service.ts b/src/@fuse/services/splash-screen.service.ts
similarity index 100%
rename from src/app/core/services/splash-screen.service.ts
rename to src/@fuse/services/splash-screen.service.ts
diff --git a/src/app/core/services/translation-loader.service.ts b/src/@fuse/services/translation-loader.service.ts
similarity index 100%
rename from src/app/core/services/translation-loader.service.ts
rename to src/@fuse/services/translation-loader.service.ts
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 64ca8fd3..b8fbaaf1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
-import { FuseSplashScreenService } from './core/services/splash-screen.service';
 import { TranslateService } from '@ngx-translate/core';
-import { FuseTranslationLoaderService } from './core/services/translation-loader.service';
 
-import { FuseNavigationService } from './core/components/navigation/navigation.service';
+import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
+import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+
 import { FuseNavigationModel } from './navigation/navigation.model';
 import { locale as navigationEnglish } from './navigation/i18n/en';
 import { locale as navigationTurkish } from './navigation/i18n/tr';
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1fe9cb41..13762a65 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,16 +5,16 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import 'hammerjs';
-import { SharedModule } from './core/modules/shared.module';
+import { SharedModule } from '@fuse/modules/shared.module';
 import { AppComponent } from './app.component';
 import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
 import { FuseMainModule } from './main/main.module';
-import { FuseSplashScreenService } from './core/services/splash-screen.service';
-import { FuseConfigService } from './core/services/config.service';
-import { FuseNavigationService } from './core/components/navigation/navigation.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { AppStoreModule } from './store/store.module';
 
+import { FuseModule } from '@fuse/fuse.module';
+import { config } from './config';
+
 const appRoutes: Routes = [
     {
         path        : 'apps',
@@ -52,23 +52,23 @@ const appRoutes: Routes = [
     ],
     imports     : [
         BrowserModule,
-        HttpClientModule,
         BrowserAnimationsModule,
+        HttpClientModule,
         RouterModule.forRoot(appRoutes),
-        SharedModule,
         TranslateModule.forRoot(),
         InMemoryWebApiModule.forRoot(FuseFakeDbService, {
             delay             : 0,
             passThruUnknownUrl: true
         }),
+
+        SharedModule,
+
+        // Fuse Module
+        FuseModule.forRoot(config),
+
         AppStoreModule,
         FuseMainModule
     ],
-    providers   : [
-        FuseSplashScreenService,
-        FuseConfigService,
-        FuseNavigationService
-    ],
     bootstrap   : [
         AppComponent
     ]
diff --git a/src/app/config.ts b/src/app/config.ts
new file mode 100644
index 00000000..622fa675
--- /dev/null
+++ b/src/app/config.ts
@@ -0,0 +1,17 @@
+// Default Fuse config
+export const config = {
+    layout          : {
+        navigation      : 'left', // 'right', 'left', 'top', 'none'
+        navigationFolded: false, // true, false
+        toolbar         : 'below', // 'above', 'below', 'none'
+        footer          : 'below', // 'above', 'below', 'none'
+        mode            : 'fullwidth' // 'boxed', 'fullwidth'
+    },
+    colorClasses    : {
+        toolbar: 'mat-white-500-bg',
+        navbar : 'mat-fuse-dark-700-bg',
+        footer : 'mat-fuse-dark-900-bg'
+    },
+    customScrollbars: true,
+    routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none
+};
diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts
deleted file mode 100644
index bd4093a6..00000000
--- a/src/app/core/services/config.service.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { NavigationStart, Router } from '@angular/router';
-import { Platform } from '@angular/cdk/platform';
-
-@Injectable()
-export class FuseConfigService
-{
-    settings: any;
-    defaultSettings: any;
-    onSettingsChanged: BehaviorSubject<any>;
-
-    /**
-     * @param router
-     * @param platform
-     */
-    constructor(
-        private router: Router,
-        public platform: Platform
-    )
-    {
-        // Set the default settings
-        this.defaultSettings = {
-            layout          : {
-                navigation      : 'left', // 'right', 'left', 'top', 'none'
-                navigationFolded: false, // true, false
-                toolbar         : 'below', // 'above', 'below', 'none'
-                footer          : 'below', // 'above', 'below', 'none'
-                mode            : 'fullwidth' // 'boxed', 'fullwidth'
-            },
-            colorClasses    : {
-                toolbar: 'mat-white-500-bg',
-                navbar : 'mat-fuse-dark-700-bg',
-                footer : 'mat-fuse-dark-900-bg'
-            },
-            customScrollbars: true,
-            routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none
-        };
-
-        /**
-         * Disable Custom Scrollbars if Browser is Mobile
-         */
-        if ( this.platform.ANDROID || this.platform.IOS )
-        {
-            this.defaultSettings.customScrollbars = false;
-        }
-
-        // Set the settings from the default settings
-        this.settings = Object.assign({}, this.defaultSettings);
-
-        // Reload the default settings on every navigation start
-        router.events.subscribe(
-            (event) => {
-                if ( event instanceof NavigationStart )
-                {
-                    this.setSettings({layout: this.defaultSettings.layout});
-                }
-            }
-        );
-
-        // Create the behavior subject
-        this.onSettingsChanged = new BehaviorSubject(this.settings);
-    }
-
-    /**
-     * Sets settings
-     * @param settings
-     */
-    setSettings(settings)
-    {
-        // Set the settings from the given object
-        this.settings = Object.assign({}, this.settings, settings);
-
-        // Trigger the event
-        this.onSettingsChanged.next(this.settings);
-    }
-}
diff --git a/src/app/main/content/apps/academy/academy.module.ts b/src/app/main/content/apps/academy/academy.module.ts
index 20be6f3f..d344986b 100644
--- a/src/app/main/content/apps/academy/academy.module.ts
+++ b/src/app/main/content/apps/academy/academy.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseAcademyCoursesComponent } from './courses/courses.component';
 import { FuseAcademyCourseComponent } from './course/course.component';
 import { AcademyCoursesService } from './courses.service';
diff --git a/src/app/main/content/apps/academy/course.service.ts b/src/app/main/content/apps/academy/course.service.ts
index 43b0be44..a39d9d23 100644
--- a/src/app/main/content/apps/academy/course.service.ts
+++ b/src/app/main/content/apps/academy/course.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
diff --git a/src/app/main/content/apps/academy/course/course.component.scss b/src/app/main/content/apps/academy/course/course.component.scss
index f9db50fa..075503a4 100644
--- a/src/app/main/content/apps/academy/course/course.component.scss
+++ b/src/app/main/content/apps/academy/course/course.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 #academy-course {
 
diff --git a/src/app/main/content/apps/academy/course/course.component.ts b/src/app/main/content/apps/academy/course/course.component.ts
index 26477405..962ed7b1 100644
--- a/src/app/main/content/apps/academy/course/course.component.ts
+++ b/src/app/main/content/apps/academy/course/course.component.ts
@@ -1,8 +1,10 @@
 import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
-import { AcademyCourseService } from '../course.service';
 import { Subscription } from 'rxjs/Subscription';
-import { FusePerfectScrollbarDirective } from '../../../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+import { fuseAnimations } from '@fuse/animations';
+
+import { AcademyCourseService } from '../course.service';
 
 @Component({
     selector     : 'fuse-academy-course',
diff --git a/src/app/main/content/apps/academy/courses.service.ts b/src/app/main/content/apps/academy/courses.service.ts
index a1958286..f803c757 100644
--- a/src/app/main/content/apps/academy/courses.service.ts
+++ b/src/app/main/content/apps/academy/courses.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
diff --git a/src/app/main/content/apps/academy/courses/courses.component.scss b/src/app/main/content/apps/academy/courses/courses.component.scss
index b437c44f..b1af425f 100644
--- a/src/app/main/content/apps/academy/courses/courses.component.scss
+++ b/src/app/main/content/apps/academy/courses/courses.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 #academy-courses {
 
diff --git a/src/app/main/content/apps/academy/courses/courses.component.ts b/src/app/main/content/apps/academy/courses/courses.component.ts
index bd5572cc..d86c00cd 100644
--- a/src/app/main/content/apps/academy/courses/courses.component.ts
+++ b/src/app/main/content/apps/academy/courses/courses.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
+
 import { AcademyCoursesService } from '../courses.service';
 
 @Component({
@@ -24,7 +25,6 @@ export class FuseAcademyCoursesComponent implements OnInit, OnDestroy
         private coursesService: AcademyCoursesService
     )
     {
-
     }
 
     ngOnInit()
diff --git a/src/app/main/content/apps/apps.module.ts b/src/app/main/content/apps/apps.module.ts
index 64434a06..3cbd2a6e 100644
--- a/src/app/main/content/apps/apps.module.ts
+++ b/src/app/main/content/apps/apps.module.ts
@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
+
 import { FuseAngularMaterialModule } from '../components/angular-material/angular-material.module';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 const routes = [
     {
         path        : 'dashboards/project',
diff --git a/src/app/main/content/apps/calendar/calendar.component.scss b/src/app/main/content/apps/calendar/calendar.component.scss
index cc8e2d83..91809629 100644
--- a/src/app/main/content/apps/calendar/calendar.component.scss
+++ b/src/app/main/content/apps/calendar/calendar.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 @import "node_modules/angular-calendar/scss/angular-calendar";
 
 .cal-month-view {
diff --git a/src/app/main/content/apps/calendar/calendar.component.ts b/src/app/main/content/apps/calendar/calendar.component.ts
index df07643f..e607fc49 100644
--- a/src/app/main/content/apps/calendar/calendar.component.ts
+++ b/src/app/main/content/apps/calendar/calendar.component.ts
@@ -1,19 +1,17 @@
-import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import { Subject } from 'rxjs/Subject';
 import { MatDialog, MatDialogRef } from '@angular/material';
+import { startOfDay, isSameDay, isSameMonth } from 'date-fns';
+
+import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent, CalendarMonthViewDay } from 'angular-calendar';
+
+import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
+import { fuseAnimations } from '@fuse/animations';
+
 import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component';
-import { FormGroup } from '@angular/forms';
 import { CalendarEventModel } from './event.model';
 import { CalendarService } from './calendar.service';
-import {
-    CalendarEvent,
-    CalendarEventAction,
-    CalendarEventTimesChangedEvent,
-    CalendarMonthViewDay
-} from 'angular-calendar';
-import { FuseConfirmDialogComponent } from '../../../../core/components/confirm-dialog/confirm-dialog.component';
-import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
     selector     : 'fuse-calendar',
diff --git a/src/app/main/content/apps/calendar/calendar.module.ts b/src/app/main/content/apps/calendar/calendar.module.ts
index 6897a25b..ab75854a 100644
--- a/src/app/main/content/apps/calendar/calendar.module.ts
+++ b/src/app/main/content/apps/calendar/calendar.module.ts
@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule, Routes } from '@angular/router';
-import { FuseCalendarComponent } from './calendar.component';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { CalendarService } from './calendar.service';
 import { CalendarModule } from 'angular-calendar';
+import { FuseCalendarComponent } from './calendar.component';
 import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component';
 
 const routes: Routes = [
diff --git a/src/app/main/content/apps/calendar/calendar.service.ts b/src/app/main/content/apps/calendar/calendar.service.ts
index 8ae8a130..d42f03f5 100644
--- a/src/app/main/content/apps/calendar/calendar.service.ts
+++ b/src/app/main/content/apps/calendar/calendar.service.ts
@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
-import { HttpClient } from '@angular/common/http';
 
 @Injectable()
 export class CalendarService implements Resolve<any>
diff --git a/src/app/main/content/apps/calendar/event-form/event-form.component.scss b/src/app/main/content/apps/calendar/event-form/event-form.component.scss
index dd74c7b8..8449592f 100644
--- a/src/app/main/content/apps/calendar/event-form/event-form.component.scss
+++ b/src/app/main/content/apps/calendar/event-form/event-form.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 .event-form-dialog {
 
diff --git a/src/app/main/content/apps/calendar/event-form/event-form.component.ts b/src/app/main/content/apps/calendar/event-form/event-form.component.ts
index 7b9b6aa1..428d5443 100644
--- a/src/app/main/content/apps/calendar/event-form/event-form.component.ts
+++ b/src/app/main/content/apps/calendar/event-form/event-form.component.ts
@@ -1,9 +1,11 @@
-import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
-import { CalendarEvent } from 'angular-calendar';
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+
+import { MatColors } from '@fuse/matColors';
+
+import { CalendarEvent } from 'angular-calendar';
 import { CalendarEventModel } from '../event.model';
-import { MatColors } from '../../../../../core/matColors';
 
 @Component({
     selector     : 'fuse-calendar-event-form-dialog',
@@ -12,7 +14,7 @@ import { MatColors } from '../../../../../core/matColors';
     encapsulation: ViewEncapsulation.None
 })
 
-export class FuseCalendarEventFormDialogComponent implements OnInit
+export class FuseCalendarEventFormDialogComponent
 {
     event: CalendarEvent;
     dialogTitle: string;
@@ -45,10 +47,6 @@ export class FuseCalendarEventFormDialogComponent implements OnInit
         this.eventForm = this.createEventForm();
     }
 
-    ngOnInit()
-    {
-    }
-
     createEventForm()
     {
         return new FormGroup({
diff --git a/src/app/main/content/apps/calendar/event.model.ts b/src/app/main/content/apps/calendar/event.model.ts
index 30c9d329..6e121f2e 100644
--- a/src/app/main/content/apps/calendar/event.model.ts
+++ b/src/app/main/content/apps/calendar/event.model.ts
@@ -1,29 +1,5 @@
-import {
-    CalendarEventAction
-} from 'angular-calendar';
-
-import {
-    startOfDay,
-    endOfDay,
-    subDays,
-    addDays,
-    endOfMonth,
-    isSameDay,
-    isSameMonth,
-    addHours
-} from 'date-fns';
-// import { CalendarEvent } from 'calendar-utils/dist/calendar-utils';
-
-/*
-export interface EventAction
-{
-    label: string;
-    cssClass?: string;
-
-    onClick({event}: {
-        event: CalendarEvent;
-    }): any;
-}*/
+import { CalendarEventAction } from 'angular-calendar';
+import { startOfDay, endOfDay } from 'date-fns';
 
 export class CalendarEventModel
 {
@@ -70,5 +46,4 @@ export class CalendarEventModel
             notes   : data.meta && data.meta.notes || ''
         };
     }
-
 }
diff --git a/src/app/main/content/apps/chat/chat-start/chat-start.component.scss b/src/app/main/content/apps/chat/chat-start/chat-start.component.scss
index 5c1f5133..c6f0ad4d 100644
--- a/src/app/main/content/apps/chat/chat-start/chat-start.component.scss
+++ b/src/app/main/content/apps/chat/chat-start/chat-start.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
     display: flex;
diff --git a/src/app/main/content/apps/chat/chat-start/chat-start.component.ts b/src/app/main/content/apps/chat/chat-start/chat-start.component.ts
index 3cc6f8b8..2651c617 100644
--- a/src/app/main/content/apps/chat/chat-start/chat-start.component.ts
+++ b/src/app/main/content/apps/chat/chat-start/chat-start.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { fuseAnimations } from '../../../../../core/animations';
+import { Component } from '@angular/core';
+
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-chat-start',
@@ -7,15 +8,9 @@ import { fuseAnimations } from '../../../../../core/animations';
     styleUrls  : ['./chat-start.component.scss'],
     animations : fuseAnimations
 })
-export class FuseChatStartComponent implements OnInit
+export class FuseChatStartComponent
 {
-
     constructor()
     {
     }
-
-    ngOnInit()
-    {
-    }
-
 }
diff --git a/src/app/main/content/apps/chat/chat-view/chat-view.component.ts b/src/app/main/content/apps/chat/chat-view/chat-view.component.ts
index 92c7bce4..bf687945 100644
--- a/src/app/main/content/apps/chat/chat-view/chat-view.component.ts
+++ b/src/app/main/content/apps/chat/chat-view/chat-view.component.ts
@@ -1,7 +1,9 @@
 import { AfterViewInit, Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
-import { ChatService } from '../chat.service';
 import { NgForm } from '@angular/forms';
-import { FusePerfectScrollbarDirective } from '../../../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+
+import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+
+import { ChatService } from '../chat.service';
 
 @Component({
     selector   : 'fuse-chat-view',
diff --git a/src/app/main/content/apps/chat/chat.component.scss b/src/app/main/content/apps/chat/chat.component.scss
index f4234a3f..5a317a06 100644
--- a/src/app/main/content/apps/chat/chat.component.scss
+++ b/src/app/main/content/apps/chat/chat.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 #chat {
     display: flex;
diff --git a/src/app/main/content/apps/chat/chat.component.ts b/src/app/main/content/apps/chat/chat.component.ts
index 51cb1971..31005479 100644
--- a/src/app/main/content/apps/chat/chat.component.ts
+++ b/src/app/main/content/apps/chat/chat.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+import { fuseAnimations } from '@fuse/animations';
+
 import { ChatService } from './chat.service';
-import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
     selector     : 'fuse-chat',
diff --git a/src/app/main/content/apps/chat/chat.module.ts b/src/app/main/content/apps/chat/chat.module.ts
index 60ce7f57..71d5f75f 100644
--- a/src/app/main/content/apps/chat/chat.module.ts
+++ b/src/app/main/content/apps/chat/chat.module.ts
@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule, Routes } from '@angular/router';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseChatComponent } from './chat.component';
 import { ChatService } from './chat.service';
 import { FuseChatViewComponent } from './chat-view/chat-view.component';
diff --git a/src/app/main/content/apps/chat/chat.service.ts b/src/app/main/content/apps/chat/chat.service.ts
index cc33e2b5..38a76b02 100644
--- a/src/app/main/content/apps/chat/chat.service.ts
+++ b/src/app/main/content/apps/chat/chat.service.ts
@@ -1,10 +1,12 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { FuseUtils } from '../../../../core/fuseUtils';
+
+import { FuseUtils } from '@fuse/fuseUtils';
 
 @Injectable()
 export class ChatService implements Resolve<any>
diff --git a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.scss b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.scss
index 3b9bfb95..a49f5163 100644
--- a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.scss
+++ b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
     display: flex;
diff --git a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts
index f5520c22..191b0ed8 100644
--- a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts
+++ b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts
@@ -1,8 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { ChatService } from '../../../chat.service';
 import { ObservableMedia } from '@angular/flex-layout';
-import { fuseAnimations } from '../../../../../../../core/animations';
-import { FuseMatSidenavHelperService } from '../../../../../../../core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service';
+
+import { fuseAnimations } from '@fuse/animations';
+import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service';
+
+import { ChatService } from '../../../chat.service';
 
 @Component({
     selector   : 'fuse-chat-chats-sidenav',
diff --git a/src/app/main/content/apps/chat/sidenavs/left/left.component.ts b/src/app/main/content/apps/chat/sidenavs/left/left.component.ts
index 3ca134ac..0854b6b3 100644
--- a/src/app/main/content/apps/chat/sidenavs/left/left.component.ts
+++ b/src/app/main/content/apps/chat/sidenavs/left/left.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { fuseAnimations } from '../../../../../../core/animations';
+
+import { fuseAnimations } from '@fuse/animations';
+
 import { ChatService } from '../../chat.service';
 
 @Component({
diff --git a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss
index 514d3c39..40d65ae3 100644
--- a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss
+++ b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
     display: flex;
diff --git a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.ts b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.ts
index 2ef84ffb..21e2f942 100644
--- a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.ts
+++ b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.ts
@@ -1,9 +1,10 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ChatService } from '../../../chat.service';
 import { FormControl, FormGroup } from '@angular/forms';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 
+import { ChatService } from '../../../chat.service';
+
 @Component({
     selector   : 'fuse-chat-user-sidenav',
     templateUrl: './user.component.html',
diff --git a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss
index 514d3c39..40d65ae3 100644
--- a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss
+++ b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
     display: flex;
diff --git a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.ts b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.ts
index 834f0299..be6a10a2 100644
--- a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.ts
+++ b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+
 import { ChatService } from '../../../chat.service';
 
 @Component({
diff --git a/src/app/main/content/apps/chat/sidenavs/right/right.component.ts b/src/app/main/content/apps/chat/sidenavs/right/right.component.ts
index 3d9c33e9..7ed97497 100644
--- a/src/app/main/content/apps/chat/sidenavs/right/right.component.ts
+++ b/src/app/main/content/apps/chat/sidenavs/right/right.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { fuseAnimations } from '../../../../../../core/animations';
+
+import { fuseAnimations } from '@fuse/animations';
+
 import { ChatService } from '../../chat.service';
 
 @Component({
diff --git a/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss b/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
index 95421361..2acde7e5 100644
--- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
+++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 .contact-form-dialog {
 
diff --git a/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts b/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts
index 434f9c21..767024b5 100644
--- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts
+++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts
@@ -1,7 +1,9 @@
-import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
-import { CalendarEvent } from 'angular-calendar';
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+
+import { CalendarEvent } from 'angular-calendar';
+
 import { Contact } from '../contact.model';
 
 @Component({
@@ -11,7 +13,7 @@ import { Contact } from '../contact.model';
     encapsulation: ViewEncapsulation.None
 })
 
-export class FuseContactsContactFormDialogComponent implements OnInit
+export class FuseContactsContactFormDialogComponent
 {
     event: CalendarEvent;
     dialogTitle: string;
@@ -41,10 +43,6 @@ export class FuseContactsContactFormDialogComponent implements OnInit
         this.contactForm = this.createContactForm();
     }
 
-    ngOnInit()
-    {
-    }
-
     createContactForm()
     {
         return this.formBuilder.group({
diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss b/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
index 44569eb4..511d54ba 100644
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 fuse-contacts-contact-list {
     flex: 1;
diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
index 8eca6913..d6755396 100644
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
@@ -1,13 +1,15 @@
 import { Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ContactsService } from '../contacts.service';
-import { Observable } from 'rxjs/Observable';
-import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component';
-import { MatDialog, MatDialogRef } from '@angular/material';
-import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
 import { FormGroup } from '@angular/forms';
+import { MatDialog, MatDialogRef } from '@angular/material';
 import { DataSource } from '@angular/cdk/collections';
-import { fuseAnimations } from '../../../../../core/animations';
 import { Subscription } from 'rxjs/Subscription';
+import { Observable } from 'rxjs/Observable';
+
+import { fuseAnimations } from '@fuse/animations';
+import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
+
+import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component';
+import { ContactsService } from '../contacts.service';
 
 @Component({
     selector     : 'fuse-contacts-contact-list',
diff --git a/src/app/main/content/apps/contacts/contact.model.ts b/src/app/main/content/apps/contacts/contact.model.ts
index bb2fa64e..f23229f4 100644
--- a/src/app/main/content/apps/contacts/contact.model.ts
+++ b/src/app/main/content/apps/contacts/contact.model.ts
@@ -1,4 +1,4 @@
-import { FuseUtils } from '../../../../core/fuseUtils';
+import { FuseUtils } from '@fuse/fuseUtils';
 
 export class Contact
 {
diff --git a/src/app/main/content/apps/contacts/contacts.component.ts b/src/app/main/content/apps/contacts/contacts.component.ts
index 9cf13b58..c18f2149 100644
--- a/src/app/main/content/apps/contacts/contacts.component.ts
+++ b/src/app/main/content/apps/contacts/contacts.component.ts
@@ -1,12 +1,14 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ContactsService } from './contacts.service';
-import { fuseAnimations } from '../../../../core/animations';
 import { FormControl, FormGroup } from '@angular/forms';
-import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component';
-import { MatDialog } from '@angular/material';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 import { Subscription } from 'rxjs/Subscription';
+import { MatDialog } from '@angular/material';
+
+import { fuseAnimations } from '@fuse/animations';
+
+import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component';
+import { ContactsService } from './contacts.service';
 
 @Component({
     selector     : 'fuse-contacts',
diff --git a/src/app/main/content/apps/contacts/contacts.module.ts b/src/app/main/content/apps/contacts/contacts.module.ts
index b069f979..8c93248d 100644
--- a/src/app/main/content/apps/contacts/contacts.module.ts
+++ b/src/app/main/content/apps/contacts/contacts.module.ts
@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule, Routes } from '@angular/router';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseContactsMainSidenavComponent } from './sidenavs/main/main.component';
 import { FuseContactsComponent } from './contacts.component';
 import { ContactsService } from './contacts.service';
diff --git a/src/app/main/content/apps/contacts/contacts.service.ts b/src/app/main/content/apps/contacts/contacts.service.ts
index aa1ff0c2..80e8ddf7 100644
--- a/src/app/main/content/apps/contacts/contacts.service.ts
+++ b/src/app/main/content/apps/contacts/contacts.service.ts
@@ -1,12 +1,14 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
-import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { Contact } from './contact.model';
-import { FuseUtils } from '../../../../core/fuseUtils';
 import { Subject } from 'rxjs/Subject';
 
+import { FuseUtils } from '@fuse/fuseUtils';
+
+import { Contact } from './contact.model';
+
 @Injectable()
 export class ContactsService implements Resolve<any>
 {
diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.scss b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.scss
index 40c33970..c12b9dc5 100644
--- a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.scss
+++ b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
     flex: 1;
diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts
index a3ec2f28..d9c09a5b 100644
--- a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts
+++ b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts
@@ -1,14 +1,16 @@
-import { Component, OnInit } from '@angular/core';
-import { ContactsService } from '../contacts.service';
+import { Component } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material';
-import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
+
+import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
+
+import { ContactsService } from '../contacts.service';
 
 @Component({
     selector   : 'fuse-selected-bar',
     templateUrl: './selected-bar.component.html',
     styleUrls  : ['./selected-bar.component.scss']
 })
-export class FuseContactsSelectedBarComponent implements OnInit
+export class FuseContactsSelectedBarComponent
 {
     selectedContacts: string[];
     hasSelectedContacts: boolean;
@@ -31,10 +33,6 @@ export class FuseContactsSelectedBarComponent implements OnInit
 
     }
 
-    ngOnInit()
-    {
-    }
-
     selectAll()
     {
         this.contactsService.selectContacts();
diff --git a/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss b/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss
index c239a34f..97c837bf 100644
--- a/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss
+++ b/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
     display: flex;
diff --git a/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts b/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts
index 0f6f8957..ee1ec293 100644
--- a/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts
+++ b/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnDestroy } from '@angular/core';
-import { ContactsService } from '../../contacts.service';
 import { Subscription } from 'rxjs/Subscription';
 
+import { ContactsService } from '../../contacts.service';
+
 @Component({
     selector   : 'fuse-contacts-main-sidenav',
     templateUrl: './main.component.html',
@@ -11,6 +12,7 @@ export class FuseContactsMainSidenavComponent implements OnDestroy
 {
     user: any;
     filterBy: string;
+    
     onUserDataChangedSubscription: Subscription;
 
     constructor(private contactsService: ContactsService)
diff --git a/src/app/main/content/apps/dashboards/analytics/analytics.component.scss b/src/app/main/content/apps/dashboards/analytics/analytics.component.scss
index 60e4858d..8cb97053 100644
--- a/src/app/main/content/apps/dashboards/analytics/analytics.component.scss
+++ b/src/app/main/content/apps/dashboards/analytics/analytics.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 #dashboard-analytics {
 
diff --git a/src/app/main/content/apps/dashboards/analytics/analytics.component.ts b/src/app/main/content/apps/dashboards/analytics/analytics.component.ts
index f4bb947b..c1b78979 100644
--- a/src/app/main/content/apps/dashboards/analytics/analytics.component.ts
+++ b/src/app/main/content/apps/dashboards/analytics/analytics.component.ts
@@ -1,7 +1,7 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 import { AnalyticsDashboardService } from './analytics.service';
-import { fuseAnimations } from '../../../../../core/animations';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector     : 'fuse-analytics-dashboard',
diff --git a/src/app/main/content/apps/dashboards/analytics/analytics.module.ts b/src/app/main/content/apps/dashboards/analytics/analytics.module.ts
index 7466e8b0..f1a36f4b 100644
--- a/src/app/main/content/apps/dashboards/analytics/analytics.module.ts
+++ b/src/app/main/content/apps/dashboards/analytics/analytics.module.ts
@@ -1,12 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '../../../../../core/modules/shared.module';
+
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { AgmCoreModule } from '@agm/core';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
+
 import { FuseAnalyticsDashboardComponent } from './analytics.component';
 import { AnalyticsDashboardService } from './analytics.service';
-import { FuseWidgetModule } from '../../../../../core/components/widget/widget.module';
+
 
 const routes: Routes = [
     {
diff --git a/src/app/main/content/apps/dashboards/analytics/analytics.service.ts b/src/app/main/content/apps/dashboards/analytics/analytics.service.ts
index ef95bd6c..cceb7cbe 100644
--- a/src/app/main/content/apps/dashboards/analytics/analytics.service.ts
+++ b/src/app/main/content/apps/dashboards/analytics/analytics.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 
 @Injectable()
 export class AnalyticsDashboardService implements Resolve<any>
diff --git a/src/app/main/content/apps/dashboards/project/project.component.ts b/src/app/main/content/apps/dashboards/project/project.component.ts
index 3f839db3..b6ed6bf6 100644
--- a/src/app/main/content/apps/dashboards/project/project.component.ts
+++ b/src/app/main/content/apps/dashboards/project/project.component.ts
@@ -1,11 +1,12 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import * as shape from 'd3-shape';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Observable } from 'rxjs/Observable';
-import { DataSource } from '@angular/cdk/collections';
+import * as shape from 'd3-shape';
+
+import { fuseAnimations } from '@fuse/animations';
 
 import { ProjectDashboardService } from './project.service';
-import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector     : 'fuse-project-dashboard',
@@ -14,7 +15,7 @@ import { fuseAnimations } from '../../../../../core/animations';
     encapsulation: ViewEncapsulation.None,
     animations   : fuseAnimations
 })
-export class FuseProjectDashboardComponent implements OnInit, OnDestroy
+export class FuseProjectDashboardComponent implements OnInit
 {
     projects: any[];
     selectedProject: any;
@@ -147,11 +148,6 @@ export class FuseProjectDashboardComponent implements OnInit, OnDestroy
         this.widget11.onContactsChanged.next(this.widgets.widget11.table.rows);
         this.widget11.dataSource = new FilesDataSource(this.widget11);
     }
-
-    ngOnDestroy()
-    {
-    }
-
 }
 
 export class FilesDataSource extends DataSource<any>
diff --git a/src/app/main/content/apps/dashboards/project/project.module.ts b/src/app/main/content/apps/dashboards/project/project.module.ts
index f2d40046..1909a159 100644
--- a/src/app/main/content/apps/dashboards/project/project.module.ts
+++ b/src/app/main/content/apps/dashboards/project/project.module.ts
@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '../../../../../core/modules/shared.module';
+
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
 
 import { FuseProjectDashboardComponent } from './project.component';
 import { ProjectDashboardService } from './project.service';
-import { FuseWidgetModule } from '../../../../../core/components/widget/widget.module';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 const routes: Routes = [
     {
diff --git a/src/app/main/content/apps/dashboards/project/project.service.ts b/src/app/main/content/apps/dashboards/project/project.service.ts
index 3489f3b3..05010603 100644
--- a/src/app/main/content/apps/dashboards/project/project.service.ts
+++ b/src/app/main/content/apps/dashboards/project/project.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 
 @Injectable()
 export class ProjectDashboardService implements Resolve<any>
diff --git a/src/app/main/content/apps/e-commerce/dashboard/dashboard.component.ts b/src/app/main/content/apps/e-commerce/dashboard/dashboard.component.ts
index 21090f89..5039c66f 100644
--- a/src/app/main/content/apps/e-commerce/dashboard/dashboard.component.ts
+++ b/src/app/main/content/apps/e-commerce/dashboard/dashboard.component.ts
@@ -1,6 +1,8 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
+
+import { fuseAnimations } from '@fuse/animations';
+
 import { EcommerceDashboardService } from './dashboard.service';
-import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector     : 'fuse-e-commerce-dashboard',
@@ -9,7 +11,7 @@ import { fuseAnimations } from '../../../../../core/animations';
     encapsulation: ViewEncapsulation.None,
     animations   : fuseAnimations
 })
-export class FuseEcommerceDashboardComponent implements OnInit, OnDestroy
+export class FuseEcommerceDashboardComponent
 {
     projects: any[];
     selectedProject: any;
@@ -72,14 +74,4 @@ export class FuseEcommerceDashboardComponent implements OnInit, OnDestroy
         };
 
     }
-
-    ngOnInit()
-    {
-    }
-
-    ngOnDestroy()
-    {
-    }
-
 }
-
diff --git a/src/app/main/content/apps/e-commerce/dashboard/dashboard.service.ts b/src/app/main/content/apps/e-commerce/dashboard/dashboard.service.ts
index 8ef2f754..3011c989 100644
--- a/src/app/main/content/apps/e-commerce/dashboard/dashboard.service.ts
+++ b/src/app/main/content/apps/e-commerce/dashboard/dashboard.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 
 @Injectable()
 export class EcommerceDashboardService implements Resolve<any>
diff --git a/src/app/main/content/apps/e-commerce/e-commerce.module.ts b/src/app/main/content/apps/e-commerce/e-commerce.module.ts
index 96a599a2..ac6763ef 100644
--- a/src/app/main/content/apps/e-commerce/e-commerce.module.ts
+++ b/src/app/main/content/apps/e-commerce/e-commerce.module.ts
@@ -1,10 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+
 import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { AgmCoreModule } from '@agm/core';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
+
 import { FuseEcommerceDashboardComponent } from './dashboard/dashboard.component';
 import { EcommerceDashboardService } from './dashboard/dashboard.service';
-import { SharedModule } from '../../../../core/modules/shared.module';
-import { FuseWidgetModule } from '../../../../core/components/widget/widget.module';
 import { FuseEcommerceProductsComponent } from './products/products.component';
 import { EcommerceProductsService } from './products/products.service';
 import { FuseEcommerceProductComponent } from './product/product.component';
@@ -13,7 +17,6 @@ import { FuseEcommerceOrdersComponent } from './orders/orders.component';
 import { EcommerceOrdersService } from './orders/orders.service';
 import { FuseEcommerceOrderComponent } from './order/order.component';
 import { EcommerceOrderService } from './order/order.service';
-import { AgmCoreModule } from '@agm/core';
 
 const routes: Routes = [
     {
@@ -58,7 +61,6 @@ const routes: Routes = [
             data: EcommerceOrderService
         }
     }
-
 ];
 
 @NgModule({
diff --git a/src/app/main/content/apps/e-commerce/order/order.component.scss b/src/app/main/content/apps/e-commerce/order/order.component.scss
index 158b8f92..928b0f0b 100644
--- a/src/app/main/content/apps/e-commerce/order/order.component.scss
+++ b/src/app/main/content/apps/e-commerce/order/order.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 #order {
 
diff --git a/src/app/main/content/apps/e-commerce/order/order.component.ts b/src/app/main/content/apps/e-commerce/order/order.component.ts
index 85e0e90b..9117ab84 100644
--- a/src/app/main/content/apps/e-commerce/order/order.component.ts
+++ b/src/app/main/content/apps/e-commerce/order/order.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { EcommerceOrderService } from './order.service';
-import { fuseAnimations } from '../../../../../core/animations';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/observable/merge';
 import 'rxjs/add/operator/map';
@@ -8,8 +7,11 @@ import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 import 'rxjs/add/observable/fromEvent';
 import { Subscription } from 'rxjs/Subscription';
+
+import { fuseAnimations } from '@fuse/animations';
+
 import { Order } from './order.model';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { EcommerceOrderService } from './order.service';
 import { orderStatuses } from './order-statuses';
 
 @Component({
@@ -48,6 +50,11 @@ export class FuseEcommerceOrderComponent implements OnInit, OnDestroy
         });
     }
 
+    ngOnDestroy()
+    {
+        this.onOrderChanged.unsubscribe();
+    }
+
     updateStatus()
     {
         const newStatusId = Number.parseInt(this.statusForm.get('newStatus').value);
@@ -65,9 +72,4 @@ export class FuseEcommerceOrderComponent implements OnInit, OnDestroy
 
         this.order.status.unshift(newStatus);
     }
-
-    ngOnDestroy()
-    {
-        this.onOrderChanged.unsubscribe();
-    }
 }
diff --git a/src/app/main/content/apps/e-commerce/order/order.model.ts b/src/app/main/content/apps/e-commerce/order/order.model.ts
index 9423a05f..0962ceba 100644
--- a/src/app/main/content/apps/e-commerce/order/order.model.ts
+++ b/src/app/main/content/apps/e-commerce/order/order.model.ts
@@ -1,4 +1,4 @@
-import { FuseUtils } from '../../../../../core/fuseUtils';
+import { FuseUtils } from '@fuse/fuseUtils';
 
 export class Order
 {
diff --git a/src/app/main/content/apps/e-commerce/order/order.service.ts b/src/app/main/content/apps/e-commerce/order/order.service.ts
index 3b30d04d..061302dc 100644
--- a/src/app/main/content/apps/e-commerce/order/order.service.ts
+++ b/src/app/main/content/apps/e-commerce/order/order.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
diff --git a/src/app/main/content/apps/e-commerce/orders/orders.component.ts b/src/app/main/content/apps/e-commerce/orders/orders.component.ts
index 87a3a3c3..9a38d88e 100644
--- a/src/app/main/content/apps/e-commerce/orders/orders.component.ts
+++ b/src/app/main/content/apps/e-commerce/orders/orders.component.ts
@@ -1,9 +1,7 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { EcommerceOrdersService } from './orders.service';
+import { MatPaginator, MatSort } from '@angular/material';
 import { DataSource } from '@angular/cdk/collections';
 import { Observable } from 'rxjs/Observable';
-import { fuseAnimations } from '../../../../../core/animations';
-import { MatPaginator, MatSort } from '@angular/material';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/observable/merge';
@@ -11,7 +9,11 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 import 'rxjs/add/observable/fromEvent';
-import { FuseUtils } from '../../../../../core/fuseUtils';
+
+import { fuseAnimations } from '@fuse/animations';
+import { FuseUtils } from '@fuse/fuseUtils';
+
+import { EcommerceOrdersService } from './orders.service';
 
 @Component({
     selector   : 'fuse-e-commerce-orders',
diff --git a/src/app/main/content/apps/e-commerce/orders/orders.service.ts b/src/app/main/content/apps/e-commerce/orders/orders.service.ts
index 08fe8075..96786444 100644
--- a/src/app/main/content/apps/e-commerce/orders/orders.service.ts
+++ b/src/app/main/content/apps/e-commerce/orders/orders.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
diff --git a/src/app/main/content/apps/e-commerce/product/product.component.ts b/src/app/main/content/apps/e-commerce/product/product.component.ts
index 8d6204c4..79a7619c 100644
--- a/src/app/main/content/apps/e-commerce/product/product.component.ts
+++ b/src/app/main/content/apps/e-commerce/product/product.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { EcommerceProductService } from './product.service';
-import { fuseAnimations } from '../../../../../core/animations';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatSnackBar } from '@angular/material';
+
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/observable/merge';
 import 'rxjs/add/operator/map';
@@ -8,10 +9,12 @@ import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 import 'rxjs/add/observable/fromEvent';
 import { Subscription } from 'rxjs/Subscription';
+
+import { fuseAnimations } from '@fuse/animations';
+import { FuseUtils } from '@fuse/fuseUtils';
+
 import { Product } from './product.model';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { FuseUtils } from '../../../../../core/fuseUtils';
-import { MatSnackBar } from '@angular/material';
+import { EcommerceProductService } from './product.service';
 import { Location } from '@angular/common';
 
 @Component({
@@ -35,7 +38,6 @@ export class FuseEcommerceProductComponent implements OnInit, OnDestroy
         private location: Location
     )
     {
-
     }
 
     ngOnInit()
@@ -58,7 +60,11 @@ export class FuseEcommerceProductComponent implements OnInit, OnDestroy
 
                     this.productForm = this.createProductForm();
                 });
+    }
 
+    ngOnDestroy()
+    {
+        this.onProductChanged.unsubscribe();
     }
 
     createProductForm()
@@ -124,9 +130,4 @@ export class FuseEcommerceProductComponent implements OnInit, OnDestroy
                 this.location.go('apps/e-commerce/products/' + this.product.id + '/' + this.product.handle);
             });
     }
-
-    ngOnDestroy()
-    {
-        this.onProductChanged.unsubscribe();
-    }
 }
diff --git a/src/app/main/content/apps/e-commerce/product/product.model.ts b/src/app/main/content/apps/e-commerce/product/product.model.ts
index 1fa520dc..4a382b94 100644
--- a/src/app/main/content/apps/e-commerce/product/product.model.ts
+++ b/src/app/main/content/apps/e-commerce/product/product.model.ts
@@ -1,6 +1,7 @@
-import { FuseUtils } from '../../../../../core/fuseUtils';
 import { MatChipInputEvent } from '@angular/material';
 
+import { FuseUtils } from '@fuse/fuseUtils';
+
 export class Product
 {
     id: string;
diff --git a/src/app/main/content/apps/e-commerce/product/product.service.ts b/src/app/main/content/apps/e-commerce/product/product.service.ts
index d763c784..8c19b01f 100644
--- a/src/app/main/content/apps/e-commerce/product/product.service.ts
+++ b/src/app/main/content/apps/e-commerce/product/product.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
diff --git a/src/app/main/content/apps/e-commerce/products/products.component.scss b/src/app/main/content/apps/e-commerce/products/products.component.scss
index f0b1acd1..67200e60 100644
--- a/src/app/main/content/apps/e-commerce/products/products.component.scss
+++ b/src/app/main/content/apps/e-commerce/products/products.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/apps/e-commerce/products/products.component.ts b/src/app/main/content/apps/e-commerce/products/products.component.ts
index b16f585a..329d93fa 100644
--- a/src/app/main/content/apps/e-commerce/products/products.component.ts
+++ b/src/app/main/content/apps/e-commerce/products/products.component.ts
@@ -1,17 +1,20 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { EcommerceProductsService } from './products.service';
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs/Observable';
-import { fuseAnimations } from '../../../../../core/animations';
 import { MatPaginator, MatSort } from '@angular/material';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { DataSource } from '@angular/cdk/collections';
+
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/observable/merge';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 import 'rxjs/add/observable/fromEvent';
-import { FuseUtils } from '../../../../../core/fuseUtils';
+import { Observable } from 'rxjs/Observable';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+import { fuseAnimations } from '@fuse/animations';
+import { FuseUtils } from '@fuse/fuseUtils';
+
+import { EcommerceProductsService } from './products.service';
 
 @Component({
     selector   : 'fuse-e-commerce-products',
diff --git a/src/app/main/content/apps/file-manager/file-list/file-list.component.scss b/src/app/main/content/apps/file-manager/file-list/file-list.component.scss
index 69f5f5b8..b598536b 100644
--- a/src/app/main/content/apps/file-manager/file-list/file-list.component.scss
+++ b/src/app/main/content/apps/file-manager/file-list/file-list.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
     width: 100%;
diff --git a/src/app/main/content/apps/file-manager/file-list/file-list.component.ts b/src/app/main/content/apps/file-manager/file-list/file-list.component.ts
index 15d1d560..22643031 100644
--- a/src/app/main/content/apps/file-manager/file-list/file-list.component.ts
+++ b/src/app/main/content/apps/file-manager/file-list/file-list.component.ts
@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { FileManagerService } from '../file-manager.service';
-import { Observable } from 'rxjs/Observable';
 import { DataSource } from '@angular/cdk/collections';
-import { fuseAnimations } from '../../../../../core/animations';
+import { Observable } from 'rxjs/Observable';
+
+import { FileManagerService } from '../file-manager.service';
+import { fuseAnimations } from '@fuse/animations/index';
 
 @Component({
     selector   : 'fuse-file-list',
diff --git a/src/app/main/content/apps/file-manager/file-manager.component.scss b/src/app/main/content/apps/file-manager/file-manager.component.scss
index 7148980a..702683d2 100644
--- a/src/app/main/content/apps/file-manager/file-manager.component.scss
+++ b/src/app/main/content/apps/file-manager/file-manager.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 #file-manager {
 
diff --git a/src/app/main/content/apps/file-manager/file-manager.component.ts b/src/app/main/content/apps/file-manager/file-manager.component.ts
index 3374fc48..d7a76819 100644
--- a/src/app/main/content/apps/file-manager/file-manager.component.ts
+++ b/src/app/main/content/apps/file-manager/file-manager.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+import { fuseAnimations } from '@fuse/animations';
+
 import { FileManagerService } from './file-manager.service';
-import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
     selector     : 'fuse-file-manager',
@@ -11,7 +13,6 @@ import { fuseAnimations } from '../../../../core/animations';
 })
 export class FuseFileManagerComponent implements OnInit
 {
-
     selected: any;
     pathArr: string[];
 
@@ -26,5 +27,4 @@ export class FuseFileManagerComponent implements OnInit
             this.pathArr = selected.location.split('>');
         });
     }
-
 }
diff --git a/src/app/main/content/apps/file-manager/file-manager.module.ts b/src/app/main/content/apps/file-manager/file-manager.module.ts
index b5676630..dc208ca2 100644
--- a/src/app/main/content/apps/file-manager/file-manager.module.ts
+++ b/src/app/main/content/apps/file-manager/file-manager.module.ts
@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule, Routes } from '@angular/router';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseFileManagerComponent } from './file-manager.component';
 import { FileManagerService } from './file-manager.service';
 import { FuseFileManagerFileListComponent } from './file-list/file-list.component';
diff --git a/src/app/main/content/apps/file-manager/file-manager.service.ts b/src/app/main/content/apps/file-manager/file-manager.service.ts
index b1145636..d555a06c 100644
--- a/src/app/main/content/apps/file-manager/file-manager.service.ts
+++ b/src/app/main/content/apps/file-manager/file-manager.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
@@ -16,6 +17,7 @@ export class FileManagerService implements Resolve<any>
 
     /**
      * The File Manager App Main Resolver
+     * 
      * @param {ActivatedRouteSnapshot} route
      * @param {RouterStateSnapshot} state
      * @returns {Observable<any> | Promise<any> | any}
diff --git a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts b/src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts
index ced23ac0..61385322 100644
--- a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts
+++ b/src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+
+import { fuseAnimations } from '@fuse/animations/index';
+
 import { FileManagerService } from '../../file-manager.service';
-import { fuseAnimations } from '../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-file-manager-details-sidenav',
diff --git a/src/app/main/content/apps/file-manager/sidenavs/main/main.component.ts b/src/app/main/content/apps/file-manager/sidenavs/main/main.component.ts
index e865b97f..eea05124 100644
--- a/src/app/main/content/apps/file-manager/sidenavs/main/main.component.ts
+++ b/src/app/main/content/apps/file-manager/sidenavs/main/main.component.ts
@@ -1,21 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector   : 'fuse-file-manager-main-sidenav',
     templateUrl: './main.component.html',
     styleUrls  : ['./main.component.scss']
 })
-export class FuseFileManagerMainSidenavComponent implements OnInit
+export class FuseFileManagerMainSidenavComponent
 {
     selected: any;
 
     constructor()
     {
-
     }
-
-    ngOnInit()
-    {
-    }
-
 }
diff --git a/src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.ts b/src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.ts
index a5ae8286..65286173 100644
--- a/src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.ts
+++ b/src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.ts
@@ -1,6 +1,6 @@
-import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 
 @Component({
     selector     : 'fuse-mail-compose',
@@ -8,7 +8,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
     styleUrls    : ['./compose.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseMailNgrxComposeDialogComponent implements OnInit
+export class FuseMailNgrxComposeDialogComponent
 {
     composeForm: FormGroup;
 
@@ -20,11 +20,7 @@ export class FuseMailNgrxComposeDialogComponent implements OnInit
     {
         this.composeForm = this.createComposeForm();
     }
-
-    ngOnInit()
-    {
-    }
-
+    
     createComposeForm()
     {
         return this.formBuilder.group({
diff --git a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.scss b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.scss
index eaabb60a..173accb2 100644
--- a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.scss
+++ b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.scss
@@ -1,4 +1,4 @@
-@import 'src/app/core/scss/fuse';
+@import 'src/@fuse/scss/fuse';
 
 :host {
     display: flex;
diff --git a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts
index 9376298b..e53cfb4a 100644
--- a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts
+++ b/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts
@@ -1,7 +1,8 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
-import { Mail } from '../mail.model';
-import { Observable } from 'rxjs/Observable';
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+
+import { Mail } from '../mail.model';
 import * as fromStore from '../store';
 import { MailNgrxService } from '../mail.service';
 
@@ -11,7 +12,7 @@ import { MailNgrxService } from '../mail.service';
     styleUrls      : ['./mail-details.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FuseMailNgrxDetailsComponent implements OnInit, OnDestroy, OnChanges
+export class FuseMailNgrxDetailsComponent implements OnChanges
 {
     labels$: Observable<any>;
     @Input('mail') mailInput: Mail;
@@ -26,10 +27,6 @@ export class FuseMailNgrxDetailsComponent implements OnInit, OnDestroy, OnChange
         this.labels$ = this.store.select(fromStore.getLabelsArr);
     }
 
-    ngOnInit()
-    {
-    }
-
     ngOnChanges()
     {
         this.updateModel(this.mailInput);
@@ -43,7 +40,6 @@ export class FuseMailNgrxDetailsComponent implements OnInit, OnDestroy, OnChange
             this.mail.markRead();
             this.updateMail();
         }
-
     }
 
     toggleStar(event)
@@ -70,8 +66,4 @@ export class FuseMailNgrxDetailsComponent implements OnInit, OnDestroy, OnChange
         this.store.dispatch(new fromStore.UpdateMail(this.mail));
         this.updateModel(this.mail);
     }
-
-    ngOnDestroy()
-    {
-    }
 }
diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss
index 7d33476a..89566a09 100644
--- a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss
+++ b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss
@@ -1,4 +1,4 @@
-@import 'src/app/core/scss/fuse';
+@import 'src/@fuse/scss/fuse';
 
 :host {
     flex-shrink: 0;
diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts
index d92d83c8..a6f3e792 100644
--- a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts
+++ b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts
@@ -1,8 +1,9 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
-import { Mail } from '../../mail.model';
-import { MailNgrxService } from '../../mail.service';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
+
+import { MailNgrxService } from '../../mail.service';
+import { Mail } from '../../mail.model';
 import * as fromStore from '../../store';
 
 @Component({
@@ -11,7 +12,7 @@ import * as fromStore from '../../store';
     styleUrls      : ['./mail-list-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FuseMailNgrxListItemComponent implements OnInit, OnDestroy
+export class FuseMailNgrxListItemComponent implements OnInit
 {
     @Input() mail: Mail;
     @HostBinding('class.selected') selected: boolean;
@@ -51,8 +52,4 @@ export class FuseMailNgrxListItemComponent implements OnInit, OnDestroy
     {
         this.store.dispatch(new fromStore.ToggleInSelectedMails(this.mail.id));
     }
-
-    ngOnDestroy()
-    {
-    }
 }
diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts
index fd9b3987..0b1c0ac7 100644
--- a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts
+++ b/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts
@@ -1,6 +1,7 @@
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Mail } from '../mail.model';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+
+import { Mail } from '../mail.model';
 import { MailNgrxService } from '../mail.service';
 
 @Component({
@@ -9,7 +10,7 @@ import { MailNgrxService } from '../mail.service';
     styleUrls      : ['./mail-list.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FuseMailNgrxListComponent implements OnInit, OnDestroy
+export class FuseMailNgrxListComponent
 {
     @Input() mails: Mail[];
     @Input() currentMail: Mail[];
@@ -22,10 +23,6 @@ export class FuseMailNgrxListComponent implements OnInit, OnDestroy
     {
     }
 
-    ngOnInit()
-    {
-    }
-
     /**
      * Read mail
      * @param mailId
@@ -49,8 +46,4 @@ export class FuseMailNgrxListComponent implements OnInit, OnDestroy
             this.router.navigate(['apps/mail-ngrx/' + folderHandle + '/' + mailId]);
         }
     }
-
-    ngOnDestroy()
-    {
-    }
 }
diff --git a/src/app/main/content/apps/mail-ngrx/mail.component.scss b/src/app/main/content/apps/mail-ngrx/mail.component.scss
index 9a355577..cca33765 100644
--- a/src/app/main/content/apps/mail-ngrx/mail.component.scss
+++ b/src/app/main/content/apps/mail-ngrx/mail.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
     width: 100%;
diff --git a/src/app/main/content/apps/mail-ngrx/mail.component.ts b/src/app/main/content/apps/mail-ngrx/mail.component.ts
index 03ec38f0..6a154721 100644
--- a/src/app/main/content/apps/mail-ngrx/mail.component.ts
+++ b/src/app/main/content/apps/mail-ngrx/mail.component.ts
@@ -1,16 +1,18 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { MailNgrxService } from './mail.service';
 import { FormControl } from '@angular/forms';
-import { Mail } from './mail.model';
-import { FuseTranslationLoaderService } from '../../../../core/services/translation-loader.service';
-import { locale as english } from './i18n/en';
-import { locale as turkish } from './i18n/tr';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
+
+import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
+import { FuseConfigService } from '@fuse/services/config.service';
+
+import { MailNgrxService } from './mail.service';
+import { Mail } from './mail.model';
 import * as fromStore from './store';
-import { FuseConfigService } from '../../../../core/services/config.service';
+import { locale as english } from './i18n/en';
+import { locale as turkish } from './i18n/tr';
 
 @Component({
     selector       : 'fuse-mail',
@@ -51,8 +53,8 @@ export class FuseMailNgrxComponent implements OnInit, OnDestroy
         this.mails = [];
         this.selectedMailIds = [];
 
-        this.configService.setSettings({
-           routerAnimation: 'none'
+        this.configService.setConfig({
+            routerAnimation: 'none'
         });
     }
 
@@ -82,6 +84,11 @@ export class FuseMailNgrxComponent implements OnInit, OnDestroy
             });
     }
 
+    ngOnDestroy()
+    {
+        this.cd.detach();
+    }
+
     toggleSelectAll(ev)
     {
         ev.preventDefault();
@@ -133,9 +140,4 @@ export class FuseMailNgrxComponent implements OnInit, OnDestroy
     {
         this.cd.markForCheck();
     }
-
-    ngOnDestroy()
-    {
-        this.cd.detach();
-    }
 }
diff --git a/src/app/main/content/apps/mail-ngrx/mail.module.ts b/src/app/main/content/apps/mail-ngrx/mail.module.ts
index e3f3a2fc..541a39a3 100644
--- a/src/app/main/content/apps/mail-ngrx/mail.module.ts
+++ b/src/app/main/content/apps/mail-ngrx/mail.module.ts
@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule, Routes } from '@angular/router';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseMailNgrxComponent } from './mail.component';
 import { FuseMailNgrxMainSidenavComponent } from './sidenavs/main/main-sidenav.component';
 import { FuseMailNgrxListItemComponent } from './mail-list/mail-list-item/mail-list-item.component';
@@ -8,8 +10,8 @@ import { FuseMailNgrxListComponent } from './mail-list/mail-list.component';
 import { FuseMailNgrxDetailsComponent } from './mail-details/mail-details.component';
 import { MailNgrxService } from './mail.service';
 import { FuseMailNgrxComposeDialogComponent } from './dialogs/compose/compose.component';
-import { MailAppStoreModule } from './store/store.module';
 import * as fromGuards from './store/guards/index';
+import { MailAppStoreModule } from './store/store.module';
 
 const routes: Routes = [
     {
diff --git a/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts b/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts
index b261d20a..d8cf1fb2 100644
--- a/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts
+++ b/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts
@@ -1,11 +1,13 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { FuseMailNgrxComposeDialogComponent } from '../../dialogs/compose/compose.component';
 import { MatDialog } from '@angular/material';
 import { FormGroup } from '@angular/forms';
+
 import { Observable } from 'rxjs/Observable';
 import { Store } from '@ngrx/store';
-import * as fromStore from './../../store';
+
 import { MailNgrxService } from '../../mail.service';
+import * as fromStore from './../../store';
+import { FuseMailNgrxComposeDialogComponent } from '../../dialogs/compose/compose.component';
 
 @Component({
     selector       : 'fuse-mail-main-sidenav',
@@ -13,7 +15,7 @@ import { MailNgrxService } from '../../mail.service';
     styleUrls      : ['./main-sidenav.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FuseMailNgrxMainSidenavComponent implements OnInit, OnDestroy
+export class FuseMailNgrxMainSidenavComponent
 {
     labels: any[];
     accounts: object;
@@ -43,10 +45,6 @@ export class FuseMailNgrxMainSidenavComponent implements OnInit, OnDestroy
         this.labels$ = this.store.select(fromStore.getLabelsArr);
     }
 
-    ngOnInit()
-    {
-    }
-
     composeDialog()
     {
         this.dialogRef = this.dialog.open(FuseMailNgrxComposeDialogComponent, {
@@ -77,8 +75,4 @@ export class FuseMailNgrxMainSidenavComponent implements OnInit, OnDestroy
                 }
             });
     }
-
-    ngOnDestroy()
-    {
-    }
 }
diff --git a/src/app/main/content/apps/mail-ngrx/store/effects/mails.effects.ts b/src/app/main/content/apps/mail-ngrx/store/effects/mails.effects.ts
index 3faf8d32..99259a7d 100644
--- a/src/app/main/content/apps/mail-ngrx/store/effects/mails.effects.ts
+++ b/src/app/main/content/apps/mail-ngrx/store/effects/mails.effects.ts
@@ -5,7 +5,7 @@ import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 import { map, mergeMap, exhaustMap, withLatestFrom } from 'rxjs/operators';
 import 'rxjs/add/operator/debounceTime';
-import { getRouterState, State } from '../../../../../../store/reducers';
+import { getRouterState, State } from 'app/store/reducers';
 import { getMailsState } from '../selectors';
 import * as MailsActions from '../actions/mails.actions';
 import * as fromRoot from '../../../../../../store';
diff --git a/src/app/main/content/apps/mail-ngrx/store/guards/resolve.guard.ts b/src/app/main/content/apps/mail-ngrx/store/guards/resolve.guard.ts
index 46c35ebd..703496df 100644
--- a/src/app/main/content/apps/mail-ngrx/store/guards/resolve.guard.ts
+++ b/src/app/main/content/apps/mail-ngrx/store/guards/resolve.guard.ts
@@ -9,7 +9,7 @@ import { MailAppState } from '../reducers';
 import * as fromStore from '../index';
 import { getFiltersLoaded, getFoldersLoaded, getLabelsLoaded, getMailsLoaded } from '../selectors';
 import { RouterStateSnapshot } from '@angular/router/src/router_state';
-import { getRouterState } from '../../../../../../store/reducers';
+import { getRouterState } from 'app/store/reducers';
 
 @Injectable()
 export class ResolveGuard implements CanActivate
diff --git a/src/app/main/content/apps/mail-ngrx/store/selectors/mails.selectors.ts b/src/app/main/content/apps/mail-ngrx/store/selectors/mails.selectors.ts
index 2830a57f..af598b08 100644
--- a/src/app/main/content/apps/mail-ngrx/store/selectors/mails.selectors.ts
+++ b/src/app/main/content/apps/mail-ngrx/store/selectors/mails.selectors.ts
@@ -1,6 +1,7 @@
+import { FuseUtils } from '@fuse/fuseUtils';
+
 import { createSelector } from '@ngrx/store';
 import { getMailAppState, MailAppState, MailsState } from '../reducers';
-import { FuseUtils } from '../../../../../../core/fuseUtils';
 
 export const getMailsState = createSelector(
     getMailAppState,
diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss b/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss
index ac8305da..2338f619 100644
--- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss
+++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 .mail-compose-dialog {
 
diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts b/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts
index 465298b8..b206345c 100644
--- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts
+++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts
@@ -1,6 +1,6 @@
-import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 
 @Component({
     selector     : 'fuse-mail-compose',
@@ -8,7 +8,7 @@ import { FormControl, FormGroup } from '@angular/forms';
     styleUrls    : ['./compose.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseMailComposeDialogComponent implements OnInit
+export class FuseMailComposeDialogComponent
 {
     showExtraToFields = false;
     composeForm: FormGroup;
@@ -21,10 +21,6 @@ export class FuseMailComposeDialogComponent implements OnInit
         this.composeForm = this.createComposeForm();
     }
 
-    ngOnInit()
-    {
-    }
-
     createComposeForm()
     {
         return new FormGroup({
diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.scss b/src/app/main/content/apps/mail/mail-details/mail-details.component.scss
index eaabb60a..173accb2 100644
--- a/src/app/main/content/apps/mail/mail-details/mail-details.component.scss
+++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.scss
@@ -1,4 +1,4 @@
-@import 'src/app/core/scss/fuse';
+@import 'src/@fuse/scss/fuse';
 
 :host {
     display: flex;
diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.ts b/src/app/main/content/apps/mail/mail-details/mail-details.component.ts
index ac475616..a990e496 100644
--- a/src/app/main/content/apps/mail/mail-details/mail-details.component.ts
+++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.ts
@@ -1,8 +1,10 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MailService } from '../mail.service';
-import { Mail } from '../mail.model';
 import { Subscription } from 'rxjs/Subscription';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { fuseAnimations } from '@fuse/animations';
+
+import { Mail } from '../mail.model';
+import { MailService } from '../mail.service';
 
 @Component({
     selector   : 'fuse-mail-details',
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
index 45676aff..7c068432 100644
--- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
+++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
@@ -1,4 +1,4 @@
-@import 'src/app/core/scss/fuse';
+@import 'src/@fuse/scss/fuse';
 
 :host {
     flex-shrink: 0;
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts
index 4d6d2762..5062a48d 100644
--- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts
+++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts
@@ -1,7 +1,8 @@
 import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+
 import { Mail } from '../../mail.model';
 import { MailService } from '../../mail.service';
-import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector   : 'fuse-mail-list-item',
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list.component.ts b/src/app/main/content/apps/mail/mail-list/mail-list.component.ts
index 54eb8985..d2e7b177 100644
--- a/src/app/main/content/apps/mail/mail-list/mail-list.component.ts
+++ b/src/app/main/content/apps/mail/mail-list/mail-list.component.ts
@@ -1,10 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Mail } from '../mail.model';
-import { ActivatedRoute } from '@angular/router';
-import { MailService } from '../mail.service';
 import { Location } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { fuseAnimations } from '@fuse/animations';
+
+import { Mail } from '../mail.model';
+import { MailService } from '../mail.service';
 
 @Component({
     selector   : 'fuse-mail-list',
diff --git a/src/app/main/content/apps/mail/mail.component.scss b/src/app/main/content/apps/mail/mail.component.scss
index 9a355577..cca33765 100644
--- a/src/app/main/content/apps/mail/mail.component.scss
+++ b/src/app/main/content/apps/mail/mail.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
     width: 100%;
diff --git a/src/app/main/content/apps/mail/mail.component.ts b/src/app/main/content/apps/mail/mail.component.ts
index 9d3ead99..d9abe16f 100644
--- a/src/app/main/content/apps/mail/mail.component.ts
+++ b/src/app/main/content/apps/mail/mail.component.ts
@@ -1,11 +1,13 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MailService } from './mail.service';
-import { Subscription } from 'rxjs/Subscription';
 import { FormControl } from '@angular/forms';
-import { Mail } from './mail.model';
-import { FuseTranslationLoaderService } from '../../../../core/services/translation-loader.service';
+import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
+
+import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
+
+import { Mail } from './mail.model';
+import { MailService } from './mail.service';
 import { locale as english } from './i18n/en';
 import { locale as turkish } from './i18n/tr';
 
diff --git a/src/app/main/content/apps/mail/mail.module.ts b/src/app/main/content/apps/mail/mail.module.ts
index 9c202bf2..822cd233 100644
--- a/src/app/main/content/apps/mail/mail.module.ts
+++ b/src/app/main/content/apps/mail/mail.module.ts
@@ -1,12 +1,14 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule, Routes } from '@angular/router';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
+import { MailService } from './mail.service';
 import { FuseMailComponent } from './mail.component';
 import { FuseMailMainSidenavComponent } from './sidenavs/main/main-sidenav.component';
 import { FuseMailListItemComponent } from './mail-list/mail-list-item/mail-list-item.component';
 import { FuseMailListComponent } from './mail-list/mail-list.component';
 import { FuseMailDetailsComponent } from './mail-details/mail-details.component';
-import { MailService } from './mail.service';
 import { FuseMailComposeDialogComponent } from './dialogs/compose/compose.component';
 
 const routes: Routes = [
diff --git a/src/app/main/content/apps/mail/mail.service.ts b/src/app/main/content/apps/mail/mail.service.ts
index 4a220f52..826f3df1 100644
--- a/src/app/main/content/apps/mail/mail.service.ts
+++ b/src/app/main/content/apps/mail/mail.service.ts
@@ -1,10 +1,13 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
-import { Mail } from './mail.model';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { FuseUtils } from '../../../../core/fuseUtils';
+
+import { FuseUtils } from '@fuse/fuseUtils';
+
+import { Mail } from './mail.model';
 
 @Injectable()
 export class MailService implements Resolve<any>
diff --git a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts
index 1776b428..395c27fc 100644
--- a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts
+++ b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts
@@ -1,10 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MailService } from '../../mail.service';
-import { Subscription } from 'rxjs/Subscription';
-import { FuseMailComposeDialogComponent } from '../../dialogs/compose/compose.component';
-import { MatDialog } from '@angular/material';
 import { FormGroup } from '@angular/forms';
-import { fuseAnimations } from '../../../../../../core/animations';
+import { MatDialog } from '@angular/material';
+import { Subscription } from 'rxjs/Subscription';
+
+import { fuseAnimations } from '@fuse/animations';
+
+import { MailService } from '../../mail.service';
+import { FuseMailComposeDialogComponent } from '../../dialogs/compose/compose.component';
 
 @Component({
     selector   : 'fuse-mail-main-sidenav',
@@ -60,6 +62,13 @@ export class FuseMailMainSidenavComponent implements OnInit, OnDestroy
                 });
     }
 
+    ngOnDestroy()
+    {
+        this.onFoldersChanged.unsubscribe();
+        this.onFiltersChanged.unsubscribe();
+        this.onLabelsChanged.unsubscribe();
+    }
+    
     composeDialog()
     {
         this.dialogRef = this.dialog.open(FuseMailComposeDialogComponent, {
@@ -90,11 +99,4 @@ export class FuseMailMainSidenavComponent implements OnInit, OnDestroy
                 }
             });
     }
-
-    ngOnDestroy()
-    {
-        this.onFoldersChanged.unsubscribe();
-        this.onFiltersChanged.unsubscribe();
-        this.onLabelsChanged.unsubscribe();
-    }
 }
diff --git a/src/app/main/content/apps/scrumboard/board.model.ts b/src/app/main/content/apps/scrumboard/board.model.ts
index c1b35513..bd62d4fe 100644
--- a/src/app/main/content/apps/scrumboard/board.model.ts
+++ b/src/app/main/content/apps/scrumboard/board.model.ts
@@ -1,4 +1,5 @@
-import { FuseUtils } from '../../../../core/fuseUtils';
+import { FuseUtils } from '@fuse/fuseUtils';
+
 import { List } from './list.model';
 import { Card } from './card.model';
 
diff --git a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts b/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts
index 0af6c819..fc0fcddb 100644
--- a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
@@ -6,7 +6,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
     templateUrl: './add-list.component.html',
     styleUrls  : ['./add-list.component.scss']
 })
-export class FuseScrumboardBoardAddListComponent implements OnInit
+export class FuseScrumboardBoardAddListComponent
 {
     formActive = false;
     form: FormGroup;
@@ -18,12 +18,7 @@ export class FuseScrumboardBoardAddListComponent implements OnInit
     )
     {
     }
-
-    ngOnInit()
-    {
-
-    }
-
+    
     openForm()
     {
         this.form = this.formBuilder.group({
diff --git a/src/app/main/content/apps/scrumboard/board/board.component.scss b/src/app/main/content/apps/scrumboard/board/board.component.scss
index f0030971..6e77294a 100644
--- a/src/app/main/content/apps/scrumboard/board/board.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/board.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/apps/scrumboard/board/board.component.ts b/src/app/main/content/apps/scrumboard/board/board.component.ts
index 91c9ec7a..41b9f463 100644
--- a/src/app/main/content/apps/scrumboard/board/board.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/board.component.ts
@@ -1,10 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { ScrumboardService } from '../scrumboard.service';
-import { Subscription } from 'rxjs/Subscription';
 import { Location } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs/Subscription';
+
+import { fuseAnimations } from '@fuse/animations';
+
 import { List } from '../list.model';
-import { fuseAnimations } from '../../../../../core/animations';
+import { ScrumboardService } from '../scrumboard.service';
 
 @Component({
     selector   : 'fuse-scrumboard-board',
@@ -34,6 +36,11 @@ export class FuseScrumboardBoardComponent implements OnInit, OnDestroy
                 });
     }
 
+    ngOnDestroy()
+    {
+        this.onBoardChanged.unsubscribe();
+    }
+
     onListAdd(newListName)
     {
         if ( newListName === '' )
@@ -54,9 +61,4 @@ export class FuseScrumboardBoardComponent implements OnInit, OnDestroy
     {
         this.scrumboardService.updateBoard();
     }
-
-    ngOnDestroy()
-    {
-        this.onBoardChanged.unsubscribe();
-    }
 }
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
index d060cd1e..7d11812e 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 .scrumboard-card-dialog {
 
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts
index 9a190ddd..a993766a 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts
@@ -1,10 +1,12 @@
 import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NgForm } from '@angular/forms/src/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatMenuTrigger } from '@angular/material';
 import { Subscription } from 'rxjs/Subscription';
+
+import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
+
 import { ScrumboardService } from '../../../scrumboard.service';
-import { NgForm } from '@angular/forms/src/forms';
-import { FuseUtils } from '../../../../../../../core/fuseUtils';
-import { FuseConfirmDialogComponent } from '../../../../../../../core/components/confirm-dialog/confirm-dialog.component';
 
 @Component({
     selector     : 'fuse-scrumboard-board-card-dialog',
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts
index 8f0f6f8a..1eb69081 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts
@@ -1,8 +1,10 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
+
+import { FuseUtils } from '@fuse/fuseUtils';
+import { fuseAnimations } from '@fuse/animations';
+
 import { ScrumboardService } from '../../../../scrumboard.service';
-import { FuseUtils } from '../../../../../../../../core/fuseUtils';
-import { fuseAnimations } from '../../../../../../../../core/animations';
 
 @Component({
     selector     : 'fuse-scrumboard-label-selector',
@@ -44,6 +46,11 @@ export class FuseScrumboardLabelSelectorComponent implements OnInit, OnDestroy
                 });
     }
 
+    ngOnDestroy()
+    {
+        this.onBoardChanged.unsubscribe();
+    }
+
     cardLabelsChanged()
     {
         this.onCardLabelsChange.next();
@@ -61,10 +68,4 @@ export class FuseScrumboardLabelSelectorComponent implements OnInit, OnDestroy
         this.newLabel.name = '';
         this.labelsMenuView = 'labels';
     }
-
-    ngOnDestroy()
-    {
-        this.onBoardChanged.unsubscribe();
-    }
-
 }
diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts
index 8bea5dca..68f67b92 100644
--- a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
@@ -6,7 +6,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
     templateUrl: './edit-board-name.component.html',
     styleUrls  : ['./edit-board-name.component.scss']
 })
-export class FuseScrumboardEditBoardNameComponent implements OnInit
+export class FuseScrumboardEditBoardNameComponent
 {
     formActive = false;
     form: FormGroup;
@@ -20,11 +20,6 @@ export class FuseScrumboardEditBoardNameComponent implements OnInit
     {
     }
 
-    ngOnInit()
-    {
-
-    }
-
     openForm()
     {
         this.form = this.formBuilder.group({
diff --git a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.ts b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.ts
index 053b80bc..e3381072 100644
--- a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
@@ -6,7 +6,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
     templateUrl: './add-card.component.html',
     styleUrls  : ['./add-card.component.scss']
 })
-export class FuseScrumboardBoardAddCardComponent implements OnInit
+export class FuseScrumboardBoardAddCardComponent
 {
     formActive = false;
     form: FormGroup;
@@ -18,11 +18,7 @@ export class FuseScrumboardBoardAddCardComponent implements OnInit
     )
     {
     }
-
-    ngOnInit()
-    {
-    }
-
+    
     openForm()
     {
         this.form = this.formBuilder.group({
diff --git a/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss b/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss
index 35941c99..10fe2b1b 100644
--- a/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 .scrumboard-board-card {
     position: relative;
diff --git a/src/app/main/content/apps/scrumboard/board/list/card/card.component.ts b/src/app/main/content/apps/scrumboard/board/list/card/card.component.ts
index 61aaf9ac..9ec11bd9 100644
--- a/src/app/main/content/apps/scrumboard/board/list/card/card.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/list/card/card.component.ts
@@ -1,6 +1,5 @@
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { ScrumboardService } from '../../../scrumboard.service';
 import * as moment from 'moment';
 
 @Component({
@@ -17,7 +16,6 @@ export class FuseScrumboardBoardCardComponent implements OnInit
 
     constructor(
         private route: ActivatedRoute,
-        private scrumboardService: ScrumboardService
     )
     {
     }
diff --git a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts
index b2b38b9b..56591cb1 100644
--- a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
@@ -6,7 +6,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
     templateUrl: './edit-list-name.component.html',
     styleUrls  : ['./edit-list-name.component.scss']
 })
-export class FuseScrumboardBoardEditListNameComponent implements OnInit
+export class FuseScrumboardBoardEditListNameComponent
 {
     formActive = false;
     form: FormGroup;
@@ -20,11 +20,6 @@ export class FuseScrumboardBoardEditListNameComponent implements OnInit
     {
     }
 
-    ngOnInit()
-    {
-
-    }
-
     openForm()
     {
         this.form = this.formBuilder.group({
diff --git a/src/app/main/content/apps/scrumboard/board/list/list.component.scss b/src/app/main/content/apps/scrumboard/board/list/list.component.scss
index 5bdb2d00..222cda5d 100644
--- a/src/app/main/content/apps/scrumboard/board/list/list.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/list/list.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 .scrumboard-board-list {
     width: 344px;
diff --git a/src/app/main/content/apps/scrumboard/board/list/list.component.ts b/src/app/main/content/apps/scrumboard/board/list/list.component.ts
index d4134926..6d637ab5 100644
--- a/src/app/main/content/apps/scrumboard/board/list/list.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/list/list.component.ts
@@ -1,12 +1,14 @@
 import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs/Subscription';
 import { MatDialog, MatDialogRef } from '@angular/material';
-import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component';
-import { FuseConfirmDialogComponent } from '../../../../../../core/components/confirm-dialog/confirm-dialog.component';
-import { ScrumboardService } from '../../scrumboard.service';
+import { Subscription } from 'rxjs/Subscription';
+
+import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
+import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+
 import { Card } from '../../card.model';
-import { FusePerfectScrollbarDirective } from '../../../../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+import { ScrumboardService } from '../../scrumboard.service';
+import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component';
 
 @Component({
     selector     : 'fuse-scrumboard-board-list',
@@ -40,7 +42,11 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
                 .subscribe(board => {
                     this.board = board;
                 });
+    }
 
+    ngOnDestroy()
+    {
+        this.onBoardChanged.unsubscribe();
     }
 
     onListNameChanged(newListName)
@@ -98,9 +104,4 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
     {
         this.scrumboardService.updateBoard();
     }
-
-    ngOnDestroy()
-    {
-        this.onBoardChanged.unsubscribe();
-    }
 }
diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts
index c4a4195d..1079eb37 100644
--- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts
@@ -1,8 +1,10 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MatColors } from '../../../../../../../../core/matColors';
-import { ScrumboardService } from '../../../../scrumboard.service';
 import { Subscription } from 'rxjs/Subscription';
 
+import { MatColors } from '@fuse/matColors';
+
+import { ScrumboardService } from '../../../../scrumboard.service';
+
 @Component({
     selector   : 'fuse-scrumboard-board-color-selector',
     templateUrl: './board-color-selector.component.html',
@@ -30,14 +32,14 @@ export class FuseScrumboardBoardColorSelectorComponent implements OnInit, OnDest
                 });
     }
 
+    ngOnDestroy()
+    {
+        this.onBoardChanged.unsubscribe();
+    }
+
     setColor(color)
     {
         this.board.settings.color = color;
         this.scrumboardService.updateBoard();
     }
-
-    ngOnDestroy()
-    {
-        this.onBoardChanged.unsubscribe();
-    }
 }
diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts
index ddb268a8..9abc1d1e 100644
--- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts
@@ -1,7 +1,9 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
+
+import { fuseAnimations } from '@fuse/animations';
+
 import { ScrumboardService } from '../../../scrumboard.service';
-import { fuseAnimations } from '../../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-scrumboard-board-settings',
@@ -30,6 +32,11 @@ export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDe
                 });
     }
 
+    ngOnDestroy()
+    {
+        this.onBoardChanged.unsubscribe();
+    }
+    
     toggleCardCover()
     {
         this.board.settings.cardCoverImages = !this.board.settings.cardCoverImages;
@@ -41,9 +48,4 @@ export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDe
         this.board.settings.subscribed = !this.board.settings.subscribed;
         this.scrumboardService.updateBoard();
     }
-
-    ngOnDestroy()
-    {
-        this.onBoardChanged.unsubscribe();
-    }
 }
diff --git a/src/app/main/content/apps/scrumboard/card.model.ts b/src/app/main/content/apps/scrumboard/card.model.ts
index 5f8ea248..3b5532d9 100644
--- a/src/app/main/content/apps/scrumboard/card.model.ts
+++ b/src/app/main/content/apps/scrumboard/card.model.ts
@@ -1,4 +1,4 @@
-import { FuseUtils } from '../../../../core/fuseUtils';
+import { FuseUtils } from '@fuse/fuseUtils';
 
 export class Card
 {
diff --git a/src/app/main/content/apps/scrumboard/list.model.ts b/src/app/main/content/apps/scrumboard/list.model.ts
index 4cf0fac9..a34e8668 100644
--- a/src/app/main/content/apps/scrumboard/list.model.ts
+++ b/src/app/main/content/apps/scrumboard/list.model.ts
@@ -1,4 +1,4 @@
-import { FuseUtils } from '../../../../core/fuseUtils';
+import { FuseUtils } from '@fuse/fuseUtils';
 
 export class List
 {
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.scss b/src/app/main/content/apps/scrumboard/scrumboard.component.scss
index 55953a9a..0f49cf75 100644
--- a/src/app/main/content/apps/scrumboard/scrumboard.component.scss
+++ b/src/app/main/content/apps/scrumboard/scrumboard.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
     min-height: 100%;
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.ts b/src/app/main/content/apps/scrumboard/scrumboard.component.ts
index 969748a4..6c96c7d4 100644
--- a/src/app/main/content/apps/scrumboard/scrumboard.component.ts
+++ b/src/app/main/content/apps/scrumboard/scrumboard.component.ts
@@ -1,9 +1,11 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ScrumboardService } from './scrumboard.service';
-import { Subscription } from 'rxjs/Subscription';
 import { Router } from '@angular/router';
+import { Subscription } from 'rxjs/Subscription';
+
+import { fuseAnimations } from '@fuse/animations';
+
 import { Board } from './board.model';
-import { fuseAnimations } from '../../../../core/animations';
+import { ScrumboardService } from './scrumboard.service';
 
 @Component({
     selector   : 'fuse-scrumboard',
@@ -21,7 +23,6 @@ export class FuseScrumboardComponent implements OnInit, OnDestroy
         private scrumboardService: ScrumboardService
     )
     {
-
     }
 
     ngOnInit()
@@ -31,7 +32,11 @@ export class FuseScrumboardComponent implements OnInit, OnDestroy
                 .subscribe(boards => {
                     this.boards = boards;
                 });
+    }
 
+    ngOnDestroy()
+    {
+        this.onBoardsChanged.unsubscribe();
     }
 
     newBoard()
@@ -41,9 +46,4 @@ export class FuseScrumboardComponent implements OnInit, OnDestroy
             this.router.navigate(['/apps/scrumboard/boards/' + newBoard.id + '/' + newBoard.uri]);
         });
     }
-
-    ngOnDestroy()
-    {
-        this.onBoardsChanged.unsubscribe();
-    }
 }
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.module.ts b/src/app/main/content/apps/scrumboard/scrumboard.module.ts
index 8601f55e..0fd0f694 100644
--- a/src/app/main/content/apps/scrumboard/scrumboard.module.ts
+++ b/src/app/main/content/apps/scrumboard/scrumboard.module.ts
@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule, Routes } from '@angular/router';
-import { FuseScrumboardComponent } from './scrumboard.component';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { BoardResolve, ScrumboardService } from './scrumboard.service';
+import { FuseScrumboardComponent } from './scrumboard.component';
 import { FuseScrumboardBoardComponent } from './board/board.component';
 import { FuseScrumboardBoardListComponent } from './board/list/list.component';
 import { FuseScrumboardBoardCardComponent } from './board/list/card/card.component';
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.service.ts b/src/app/main/content/apps/scrumboard/scrumboard.service.ts
index 3fd33c60..89f88803 100644
--- a/src/app/main/content/apps/scrumboard/scrumboard.service.ts
+++ b/src/app/main/content/apps/scrumboard/scrumboard.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
@@ -162,7 +163,6 @@ export class ScrumboardService implements Resolve<any>
 @Injectable()
 export class BoardResolve implements Resolve<any>
 {
-
     constructor(private scrumboardService: ScrumboardService)
     {
     }
diff --git a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.ts b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.ts
index a8956656..3026f1fa 100644
--- a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.ts
+++ b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.ts
@@ -1,8 +1,10 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { TodoService } from '../../todo.service';
-import { Subscription } from 'rxjs/Subscription';
 import { Router } from '@angular/router';
-import { fuseAnimations } from '../../../../../../core/animations';
+import { Subscription } from 'rxjs/Subscription';
+
+import { fuseAnimations } from '@fuse/animations';
+
+import { TodoService } from '../../todo.service';
 
 @Component({
     selector   : 'fuse-todo-main-sidenav',
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss b/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
index 3e4d1001..b17fbc5d 100644
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../core/scss/fuse';
+@import 'src/@fuse/scss/fuse';
 
 :host {
     display: flex;
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.ts b/src/app/main/content/apps/todo/todo-details/todo-details.component.ts
index 9369dc3f..63516683 100644
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.ts
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.ts
@@ -1,13 +1,15 @@
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { TodoService } from '../todo.service';
-import { Todo } from '../todo.model';
-import { Subscription } from 'rxjs/Subscription';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { FuseUtils } from '../../../../../core/fuseUtils';
-import { fuseAnimations } from '../../../../../core/animations';
+import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 
+import { FuseUtils } from '@fuse/fuseUtils';
+import { fuseAnimations } from '@fuse/animations';
+
+import { Todo } from '../todo.model';
+import { TodoService } from '../todo.service';
+
 @Component({
     selector   : 'fuse-todo-details',
     templateUrl: './todo-details.component.html',
@@ -80,6 +82,17 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
                 });
     }
 
+    ngOnDestroy()
+    {
+        if ( this.onFormChange )
+        {
+            this.onFormChange.unsubscribe();
+        }
+
+        this.onCurrentTodoChanged.unsubscribe();
+        this.onNewTodoClicked.unsubscribe();
+    }
+    
     focusTitleField()
     {
         setTimeout(() => {
@@ -106,18 +119,14 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
     toggleStar(event)
     {
         event.stopPropagation();
-
         this.todo.toggleStar();
-
         this.todoService.updateTodo(this.todo);
     }
 
     toggleImportant(event)
     {
         event.stopPropagation();
-
         this.todo.toggleImportant();
-
         this.todoService.updateTodo(this.todo);
     }
 
@@ -128,9 +137,7 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
     toggleCompleted(event)
     {
         event.stopPropagation();
-
         this.todo.toggleCompleted();
-
         this.todoService.updateTodo(this.todo);
     }
 
@@ -141,9 +148,7 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
     toggleDeleted(event)
     {
         event.stopPropagation();
-
         this.todo.toggleDeleted();
-
         this.todoService.updateTodo(this.todo);
     }
 
@@ -156,16 +161,4 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
     {
         this.todoService.updateTodo(this.todoForm.getRawValue());
     }
-
-    ngOnDestroy()
-    {
-        if ( this.onFormChange )
-        {
-            this.onFormChange.unsubscribe();
-        }
-
-        this.onCurrentTodoChanged.unsubscribe();
-
-        this.onNewTodoClicked.unsubscribe();
-    }
 }
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss
index b36465d0..de0e4349 100644
--- a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss
+++ b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../core/scss/fuse';
+@import 'src/@fuse/scss/fuse';
 
 .todo-list-item {
     display: block;
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts
index 765db6ca..a03c0a23 100644
--- a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts
+++ b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts
@@ -1,8 +1,9 @@
 import { Component, HostBinding, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs/Subscription';
+
 import { Todo } from '../../todo.model';
 import { TodoService } from '../../todo.service';
-import { Subscription } from 'rxjs/Subscription';
-import { ActivatedRoute } from '@angular/router';
 
 @Component({
     selector     : 'fuse-todo-list-item',
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list.component.ts b/src/app/main/content/apps/todo/todo-list/todo-list.component.ts
index 268070e2..825b99cd 100644
--- a/src/app/main/content/apps/todo/todo-list/todo-list.component.ts
+++ b/src/app/main/content/apps/todo/todo-list/todo-list.component.ts
@@ -1,10 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Todo } from '../todo.model';
-import { ActivatedRoute } from '@angular/router';
-import { TodoService } from '../todo.service';
 import { Location } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { fuseAnimations } from '@fuse/animations';
+
+import { Todo } from '../todo.model';
+import { TodoService } from '../todo.service';
 
 @Component({
     selector   : 'fuse-todo-list',
@@ -88,6 +90,6 @@ export class FuseTodoListComponent implements OnInit, OnDestroy
 
     onDrop(ev)
     {
-        this.todoService.updateTodos(this.todos);
+
     }
 }
diff --git a/src/app/main/content/apps/todo/todo.component.scss b/src/app/main/content/apps/todo/todo.component.scss
index b702ba18..74148b26 100644
--- a/src/app/main/content/apps/todo/todo.component.scss
+++ b/src/app/main/content/apps/todo/todo.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
     width: 100%;
diff --git a/src/app/main/content/apps/todo/todo.component.ts b/src/app/main/content/apps/todo/todo.component.ts
index ba7bc4a2..6e69a48b 100644
--- a/src/app/main/content/apps/todo/todo.component.ts
+++ b/src/app/main/content/apps/todo/todo.component.ts
@@ -1,12 +1,14 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
-import { TodoService } from './todo.service';
 import { FormControl } from '@angular/forms';
-import { Todo } from './todo.model';
-import { fuseAnimations } from '../../../../core/animations';
+import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 
+import { fuseAnimations } from '@fuse/animations';
+
+import { Todo } from './todo.model';
+import { TodoService } from './todo.service';
+
 @Component({
     selector   : 'fuse-todo',
     templateUrl: './todo.component.html',
@@ -34,7 +36,6 @@ export class FuseTodoComponent implements OnInit, OnDestroy
 
     ngOnInit()
     {
-
         this.onSelectedTodosChanged =
             this.todoService.onSelectedTodosChanged
                 .subscribe(selectedTodos => {
@@ -78,11 +79,6 @@ export class FuseTodoComponent implements OnInit, OnDestroy
                 });
     }
 
-    deSelectCurrentTodo()
-    {
-        this.todoService.onCurrentTodoChanged.next([null, null]);
-    }
-
     ngOnDestroy()
     {
         this.onSelectedTodosChanged.unsubscribe();
@@ -90,6 +86,11 @@ export class FuseTodoComponent implements OnInit, OnDestroy
         this.onTagsChanged.unsubscribe();
         this.onCurrentTodoChanged.unsubscribe();
     }
+    
+    deSelectCurrentTodo()
+    {
+        this.todoService.onCurrentTodoChanged.next([null, null]);
+    }
 
     toggleSelectAll()
     {
@@ -110,5 +111,4 @@ export class FuseTodoComponent implements OnInit, OnDestroy
     {
         this.todoService.toggleTagOnSelectedTodos(tagId);
     }
-
 }
diff --git a/src/app/main/content/apps/todo/todo.module.ts b/src/app/main/content/apps/todo/todo.module.ts
index 1681b761..0761767c 100644
--- a/src/app/main/content/apps/todo/todo.module.ts
+++ b/src/app/main/content/apps/todo/todo.module.ts
@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule, Routes } from '@angular/router';
-import { FuseTodoComponent } from './todo.component';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { TodoService } from './todo.service';
+import { FuseTodoComponent } from './todo.component';
 import { FuseTodoMainSidenavComponent } from './sidenavs/main/main-sidenav.component';
 import { FuseTodoListItemComponent } from './todo-list/todo-list-item/todo-list-item.component';
 import { FuseTodoListComponent } from './todo-list/todo-list.component';
diff --git a/src/app/main/content/apps/todo/todo.service.ts b/src/app/main/content/apps/todo/todo.service.ts
index 6c7d35ff..5738bf5f 100644
--- a/src/app/main/content/apps/todo/todo.service.ts
+++ b/src/app/main/content/apps/todo/todo.service.ts
@@ -1,12 +1,14 @@
 import { Injectable } from '@angular/core';
+import { Location } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
-import { HttpClient } from '@angular/common/http';
-import { Todo } from './todo.model';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { FuseUtils } from '../../../../core/fuseUtils';
 import { Subject } from 'rxjs/Subject';
-import { Location } from '@angular/common';
+
+import { FuseUtils } from '@fuse/fuseUtils';
+
+import { Todo } from './todo.model';
 
 @Injectable()
 export class TodoService implements Resolve<any>
@@ -337,7 +339,6 @@ export class TodoService implements Resolve<any>
         {
             this.location.go('apps/todo/all/' + id);
         }
-
     }
 
     /**
@@ -353,7 +354,6 @@ export class TodoService implements Resolve<any>
 
     toggleTagOnTodo(tagId, todo)
     {
-
         const index = todo.tags.indexOf(tagId);
 
         if ( index !== -1 )
@@ -364,6 +364,7 @@ export class TodoService implements Resolve<any>
         {
             todo.tags.push(tagId);
         }
+        
         this.updateTodo(todo);
     }
 
@@ -387,27 +388,4 @@ export class TodoService implements Resolve<any>
                 });
         });
     }
-
-    /**
-     * Update the todo
-     * @param todos
-     * @returns {Promise<any>}
-     */
-    updateTodos(todos)
-    {
-
-        /*  return new Promise((resolve, reject) => {
-
-              this.http.post('api/todo-todos/', {...todos})
-
-                  .subscribe(response => {
-
-                      this.getTodos().then(_todos => {
-                          console.log(response);
-                          resolve(_todos);
-                      }, reject);
-                  });
-          });*/
-
-    }
 }
diff --git a/src/app/main/content/components-third-party/components-third-party.module.ts b/src/app/main/content/components-third-party/components-third-party.module.ts
index 60908c4d..7cbac19e 100644
--- a/src/app/main/content/components-third-party/components-third-party.module.ts
+++ b/src/app/main/content/components-third-party/components-third-party.module.ts
@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseNgxDatatableComponent } from './datatable/ngx-datatable.component';
 import { GoogleMapsModule } from './google-maps/google-maps.module';
 
diff --git a/src/app/main/content/components-third-party/google-maps/google-maps.module.ts b/src/app/main/content/components-third-party/google-maps/google-maps.module.ts
index 59c0ee67..03fb94cc 100644
--- a/src/app/main/content/components-third-party/google-maps/google-maps.module.ts
+++ b/src/app/main/content/components-third-party/google-maps/google-maps.module.ts
@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
-import { FuseGoogleMapsDocsComponent } from './google-maps.component';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 import { AgmCoreModule } from '@agm/core';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
+import { FuseGoogleMapsDocsComponent } from './google-maps.component';
+
 const routes = [
     {
         path     : 'google-maps',
diff --git a/src/app/main/content/components/angular-material/angular-material.component.ts b/src/app/main/content/components/angular-material/angular-material.component.ts
index ebf277ba..6f511c5a 100644
--- a/src/app/main/content/components/angular-material/angular-material.component.ts
+++ b/src/app/main/content/components/angular-material/angular-material.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+
 import { COMPONENT_MAP } from './example-components';
 
 @Component({
diff --git a/src/app/main/content/components/angular-material/angular-material.module.ts b/src/app/main/content/components/angular-material/angular-material.module.ts
index ca8e48fa..35eeaccc 100644
--- a/src/app/main/content/components/angular-material/angular-material.module.ts
+++ b/src/app/main/content/components/angular-material/angular-material.module.ts
@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '../../../../core/modules/shared.module';
-import { FuseWidgetModule } from '../../../../core/components/widget/widget.module';
-import { FuseExampleViewerComponent } from './example-viewer/example-viewer';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
+
 import { EXAMPLE_LIST } from './example-components';
+import { FuseExampleViewerComponent } from './example-viewer/example-viewer';
 import { FuseAngularMaterialComponent } from './angular-material.component';
 
 const routes: Routes = [
diff --git a/src/app/main/content/components/angular-material/example-components.ts b/src/app/main/content/components/angular-material/example-components.ts
index e3787926..59fb02c0 100644
--- a/src/app/main/content/components/angular-material/example-components.ts
+++ b/src/app/main/content/components/angular-material/example-components.ts
@@ -1,109 +1,109 @@
-import { AutocompleteDisplayExample } from '../../../../../assets/angular-material-examples/autocomplete-display/autocomplete-display-example';
-import { AutocompleteFilterExample } from '../../../../../assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example';
-import { AutocompleteOverviewExample } from '../../../../../assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example';
-import { AutocompleteSimpleExample } from '../../../../../assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example';
-import { ButtonOverviewExample } from '../../../../../assets/angular-material-examples/button-overview/button-overview-example';
-import { ButtonToggleExclusiveExample } from '../../../../../assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example';
-import { ButtonToggleOverviewExample } from '../../../../../assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example';
-import { ButtonTypesExample } from '../../../../../assets/angular-material-examples/button-types/button-types-example';
-import { CardFancyExample } from '../../../../../assets/angular-material-examples/card-fancy/card-fancy-example';
-import { CardOverviewExample } from '../../../../../assets/angular-material-examples/card-overview/card-overview-example';
-import { CdkTableBasicExample } from '../../../../../assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example';
-import { CheckboxConfigurableExample } from '../../../../../assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example';
-import { CheckboxOverviewExample } from '../../../../../assets/angular-material-examples/checkbox-overview/checkbox-overview-example';
-import { ChipsInputExample } from '../../../../../assets/angular-material-examples/chips-input/chips-input-example';
-import { ChipsOverviewExample } from '../../../../../assets/angular-material-examples/chips-overview/chips-overview-example';
-import { ChipsStackedExample } from '../../../../../assets/angular-material-examples/chips-stacked/chips-stacked-example';
-import { DatepickerApiExample } from '../../../../../assets/angular-material-examples/datepicker-api/datepicker-api-example';
-import { DatepickerDisabledExample } from '../../../../../assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example';
-import { DatepickerEventsExample } from '../../../../../assets/angular-material-examples/datepicker-events/datepicker-events-example';
-import { DatepickerFilterExample } from '../../../../../assets/angular-material-examples/datepicker-filter/datepicker-filter-example';
-import { DatepickerFormatsExample } from '../../../../../assets/angular-material-examples/datepicker-formats/datepicker-formats-example';
-import { DatepickerLocaleExample } from '../../../../../assets/angular-material-examples/datepicker-locale/datepicker-locale-example';
-import { DatepickerMinMaxExample } from '../../../../../assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example';
-import { DatepickerMomentExample } from '../../../../../assets/angular-material-examples/datepicker-moment/datepicker-moment-example';
-import { DatepickerOverviewExample } from '../../../../../assets/angular-material-examples/datepicker-overview/datepicker-overview-example';
-import { DatepickerStartViewExample } from '../../../../../assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example';
-import { DatepickerTouchExample } from '../../../../../assets/angular-material-examples/datepicker-touch/datepicker-touch-example';
-import { DatepickerValueExample } from '../../../../../assets/angular-material-examples/datepicker-value/datepicker-value-example';
-import { DialogContentExampleDialog, DialogContentExample } from '../../../../../assets/angular-material-examples/dialog-content/dialog-content-example';
-import { DialogDataExampleDialog, DialogDataExample } from '../../../../../assets/angular-material-examples/dialog-data/dialog-data-example';
-import { DialogElementsExampleDialog, DialogElementsExample } from '../../../../../assets/angular-material-examples/dialog-elements/dialog-elements-example';
-import { DialogOverviewExampleDialog, DialogOverviewExample } from '../../../../../assets/angular-material-examples/dialog-overview/dialog-overview-example';
-import { ElevationOverviewExample } from '../../../../../assets/angular-material-examples/elevation-overview/elevation-overview-example';
-import { ExpansionOverviewExample } from '../../../../../assets/angular-material-examples/expansion-overview/expansion-overview-example';
-import { ExpansionStepsExample } from '../../../../../assets/angular-material-examples/expansion-steps/expansion-steps-example';
-import { MyTelInput, FormFieldCustomControlExample } from '../../../../../assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example';
-import { FormFieldErrorExample } from '../../../../../assets/angular-material-examples/form-field-error/form-field-error-example';
-import { FormFieldHintExample } from '../../../../../assets/angular-material-examples/form-field-hint/form-field-hint-example';
-import { FormFieldOverviewExample } from '../../../../../assets/angular-material-examples/form-field-overview/form-field-overview-example';
-import { FormFieldPlaceholderExample } from '../../../../../assets/angular-material-examples/form-field-placeholder/form-field-placeholder-example';
-import { FormFieldPrefixSuffixExample } from '../../../../../assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example';
-import { FormFieldThemingExample } from '../../../../../assets/angular-material-examples/form-field-theming/form-field-theming-example';
-import { GridListDynamicExample } from '../../../../../assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example';
-import { GridListOverviewExample } from '../../../../../assets/angular-material-examples/grid-list-overview/grid-list-overview-example';
-import { IconOverviewExample } from '../../../../../assets/angular-material-examples/icon-overview/icon-overview-example';
-import { IconSvgExample } from '../../../../../assets/angular-material-examples/icon-svg/icon-svg-example';
-import { InputAutosizeTextareaExample } from '../../../../../assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example';
-import { InputClearableExample } from '../../../../../assets/angular-material-examples/input-clearable/input-clearable-example';
-import { InputErrorStateMatcherExample } from '../../../../../assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example';
-import { InputErrorsExample } from '../../../../../assets/angular-material-examples/input-errors/input-errors-example';
-import { InputFormExample } from '../../../../../assets/angular-material-examples/input-form/input-form-example';
-import { InputHintExample } from '../../../../../assets/angular-material-examples/input-hint/input-hint-example';
-import { InputOverviewExample } from '../../../../../assets/angular-material-examples/input-overview/input-overview-example';
-import { InputPrefixSuffixExample } from '../../../../../assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example';
-import { ListOverviewExample } from '../../../../../assets/angular-material-examples/list-overview/list-overview-example';
-import { ListSectionsExample } from '../../../../../assets/angular-material-examples/list-sections/list-sections-example';
-import { ListSelectionExample } from '../../../../../assets/angular-material-examples/list-selection/list-selection-example';
-import { MenuIconsExample } from '../../../../../assets/angular-material-examples/menu-icons/menu-icons-example';
-import { MenuOverviewExample } from '../../../../../assets/angular-material-examples/menu-overview/menu-overview-example';
-import { NestedMenuExample } from '../../../../../assets/angular-material-examples/nested-menu/nested-menu-example';
-import { PaginatorConfigurableExample } from '../../../../../assets/angular-material-examples/paginator-configurable/paginator-configurable-example';
-import { PaginatorOverviewExample } from '../../../../../assets/angular-material-examples/paginator-overview/paginator-overview-example';
-import { ProgressBarBufferExample } from '../../../../../assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example';
-import { ProgressBarConfigurableExample } from '../../../../../assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example';
-import { ProgressBarDeterminateExample } from '../../../../../assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example';
-import { ProgressBarIndeterminateExample } from '../../../../../assets/angular-material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example';
-import { ProgressBarQueryExample } from '../../../../../assets/angular-material-examples/progress-bar-query/progress-bar-query-example';
-import { ProgressSpinnerConfigurableExample } from '../../../../../assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example';
-import { ProgressSpinnerOverviewExample } from '../../../../../assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example';
-import { RadioNgModelExample } from '../../../../../assets/angular-material-examples/radio-ng-model/radio-ng-model-example';
-import { RadioOverviewExample } from '../../../../../assets/angular-material-examples/radio-overview/radio-overview-example';
-import { SelectCustomTriggerExample } from '../../../../../assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example';
-import { SelectDisabledExample } from '../../../../../assets/angular-material-examples/select-disabled/select-disabled-example';
-import { SelectErrorStateMatcherExample } from '../../../../../assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example';
-import { SelectFormExample } from '../../../../../assets/angular-material-examples/select-form/select-form-example';
-import { SelectHintErrorExample } from '../../../../../assets/angular-material-examples/select-hint-error/select-hint-error-example';
-import { SelectMultipleExample } from '../../../../../assets/angular-material-examples/select-multiple/select-multiple-example';
-import { SelectNoRippleExample } from '../../../../../assets/angular-material-examples/select-no-ripple/select-no-ripple-example';
-import { SelectOptgroupExample } from '../../../../../assets/angular-material-examples/select-optgroup/select-optgroup-example';
-import { SelectOverviewExample } from '../../../../../assets/angular-material-examples/select-overview/select-overview-example';
-import { SelectPanelClassExample } from '../../../../../assets/angular-material-examples/select-panel-class/select-panel-class-example';
-import { SelectResetExample } from '../../../../../assets/angular-material-examples/select-reset/select-reset-example';
-import { SelectValueBindingExample } from '../../../../../assets/angular-material-examples/select-value-binding/select-value-binding-example';
-import { SidenavFabExample } from '../../../../../assets/angular-material-examples/sidenav-fab/sidenav-fab-example';
-import { SidenavOverviewExample } from '../../../../../assets/angular-material-examples/sidenav-overview/sidenav-overview-example';
-import { SlideToggleConfigurableExample } from '../../../../../assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example';
-import { SlideToggleFormsExample } from '../../../../../assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example';
-import { SlideToggleOverviewExample } from '../../../../../assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example';
-import { SliderConfigurableExample } from '../../../../../assets/angular-material-examples/slider-configurable/slider-configurable-example';
-import { SliderOverviewExample } from '../../../../../assets/angular-material-examples/slider-overview/slider-overview-example';
-import { PizzaPartyComponent, SnackBarComponentExample } from '../../../../../assets/angular-material-examples/snack-bar-component/snack-bar-component-example';
-import { SnackBarOverviewExample } from '../../../../../assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example';
-import { SortOverviewExample } from '../../../../../assets/angular-material-examples/sort-overview/sort-overview-example';
-import { StepperOverviewExample } from '../../../../../assets/angular-material-examples/stepper-overview/stepper-overview-example';
-import { TableBasicExample } from '../../../../../assets/angular-material-examples/table-basic/table-basic-example';
-import { TableFilteringExample } from '../../../../../assets/angular-material-examples/table-filtering/table-filtering-example';
-import { TableHttpExample } from '../../../../../assets/angular-material-examples/table-http/table-http-example';
-import { TableOverviewExample } from '../../../../../assets/angular-material-examples/table-overview/table-overview-example';
-import { TablePaginationExample } from '../../../../../assets/angular-material-examples/table-pagination/table-pagination-example';
-import { TableSortingExample } from '../../../../../assets/angular-material-examples/table-sorting/table-sorting-example';
-import { TabsOverviewExample } from '../../../../../assets/angular-material-examples/tabs-overview/tabs-overview-example';
-import { TabsTemplateLabelExample } from '../../../../../assets/angular-material-examples/tabs-template-label/tabs-template-label-example';
-import { ToolbarMultirowExample } from '../../../../../assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example';
-import { ToolbarOverviewExample } from '../../../../../assets/angular-material-examples/toolbar-overview/toolbar-overview-example';
-import { TooltipOverviewExample } from '../../../../../assets/angular-material-examples/tooltip-overview/tooltip-overview-example';
-import { TooltipPositionExample } from '../../../../../assets/angular-material-examples/tooltip-position/tooltip-position-example';
+import { AutocompleteDisplayExample } from 'assets/angular-material-examples/autocomplete-display/autocomplete-display-example';
+import { AutocompleteFilterExample } from 'assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example';
+import { AutocompleteOverviewExample } from 'assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example';
+import { AutocompleteSimpleExample } from 'assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example';
+import { ButtonOverviewExample } from 'assets/angular-material-examples/button-overview/button-overview-example';
+import { ButtonToggleExclusiveExample } from 'assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example';
+import { ButtonToggleOverviewExample } from 'assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example';
+import { ButtonTypesExample } from 'assets/angular-material-examples/button-types/button-types-example';
+import { CardFancyExample } from 'assets/angular-material-examples/card-fancy/card-fancy-example';
+import { CardOverviewExample } from 'assets/angular-material-examples/card-overview/card-overview-example';
+import { CdkTableBasicExample } from 'assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example';
+import { CheckboxConfigurableExample } from 'assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example';
+import { CheckboxOverviewExample } from 'assets/angular-material-examples/checkbox-overview/checkbox-overview-example';
+import { ChipsInputExample } from 'assets/angular-material-examples/chips-input/chips-input-example';
+import { ChipsOverviewExample } from 'assets/angular-material-examples/chips-overview/chips-overview-example';
+import { ChipsStackedExample } from 'assets/angular-material-examples/chips-stacked/chips-stacked-example';
+import { DatepickerApiExample } from 'assets/angular-material-examples/datepicker-api/datepicker-api-example';
+import { DatepickerDisabledExample } from 'assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example';
+import { DatepickerEventsExample } from 'assets/angular-material-examples/datepicker-events/datepicker-events-example';
+import { DatepickerFilterExample } from 'assets/angular-material-examples/datepicker-filter/datepicker-filter-example';
+import { DatepickerFormatsExample } from 'assets/angular-material-examples/datepicker-formats/datepicker-formats-example';
+import { DatepickerLocaleExample } from 'assets/angular-material-examples/datepicker-locale/datepicker-locale-example';
+import { DatepickerMinMaxExample } from 'assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example';
+import { DatepickerMomentExample } from 'assets/angular-material-examples/datepicker-moment/datepicker-moment-example';
+import { DatepickerOverviewExample } from 'assets/angular-material-examples/datepicker-overview/datepicker-overview-example';
+import { DatepickerStartViewExample } from 'assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example';
+import { DatepickerTouchExample } from 'assets/angular-material-examples/datepicker-touch/datepicker-touch-example';
+import { DatepickerValueExample } from 'assets/angular-material-examples/datepicker-value/datepicker-value-example';
+import { DialogContentExampleDialog, DialogContentExample } from 'assets/angular-material-examples/dialog-content/dialog-content-example';
+import { DialogDataExampleDialog, DialogDataExample } from 'assets/angular-material-examples/dialog-data/dialog-data-example';
+import { DialogElementsExampleDialog, DialogElementsExample } from 'assets/angular-material-examples/dialog-elements/dialog-elements-example';
+import { DialogOverviewExampleDialog, DialogOverviewExample } from 'assets/angular-material-examples/dialog-overview/dialog-overview-example';
+import { ElevationOverviewExample } from 'assets/angular-material-examples/elevation-overview/elevation-overview-example';
+import { ExpansionOverviewExample } from 'assets/angular-material-examples/expansion-overview/expansion-overview-example';
+import { ExpansionStepsExample } from 'assets/angular-material-examples/expansion-steps/expansion-steps-example';
+import { MyTelInput, FormFieldCustomControlExample } from 'assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example';
+import { FormFieldErrorExample } from 'assets/angular-material-examples/form-field-error/form-field-error-example';
+import { FormFieldHintExample } from 'assets/angular-material-examples/form-field-hint/form-field-hint-example';
+import { FormFieldOverviewExample } from 'assets/angular-material-examples/form-field-overview/form-field-overview-example';
+import { FormFieldPlaceholderExample } from 'assets/angular-material-examples/form-field-placeholder/form-field-placeholder-example';
+import { FormFieldPrefixSuffixExample } from 'assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example';
+import { FormFieldThemingExample } from 'assets/angular-material-examples/form-field-theming/form-field-theming-example';
+import { GridListDynamicExample } from 'assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example';
+import { GridListOverviewExample } from 'assets/angular-material-examples/grid-list-overview/grid-list-overview-example';
+import { IconOverviewExample } from 'assets/angular-material-examples/icon-overview/icon-overview-example';
+import { IconSvgExample } from 'assets/angular-material-examples/icon-svg/icon-svg-example';
+import { InputAutosizeTextareaExample } from 'assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example';
+import { InputClearableExample } from 'assets/angular-material-examples/input-clearable/input-clearable-example';
+import { InputErrorStateMatcherExample } from 'assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example';
+import { InputErrorsExample } from 'assets/angular-material-examples/input-errors/input-errors-example';
+import { InputFormExample } from 'assets/angular-material-examples/input-form/input-form-example';
+import { InputHintExample } from 'assets/angular-material-examples/input-hint/input-hint-example';
+import { InputOverviewExample } from 'assets/angular-material-examples/input-overview/input-overview-example';
+import { InputPrefixSuffixExample } from 'assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example';
+import { ListOverviewExample } from 'assets/angular-material-examples/list-overview/list-overview-example';
+import { ListSectionsExample } from 'assets/angular-material-examples/list-sections/list-sections-example';
+import { ListSelectionExample } from 'assets/angular-material-examples/list-selection/list-selection-example';
+import { MenuIconsExample } from 'assets/angular-material-examples/menu-icons/menu-icons-example';
+import { MenuOverviewExample } from 'assets/angular-material-examples/menu-overview/menu-overview-example';
+import { NestedMenuExample } from 'assets/angular-material-examples/nested-menu/nested-menu-example';
+import { PaginatorConfigurableExample } from 'assets/angular-material-examples/paginator-configurable/paginator-configurable-example';
+import { PaginatorOverviewExample } from 'assets/angular-material-examples/paginator-overview/paginator-overview-example';
+import { ProgressBarBufferExample } from 'assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example';
+import { ProgressBarConfigurableExample } from 'assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example';
+import { ProgressBarDeterminateExample } from 'assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example';
+import { ProgressBarIndeterminateExample } from 'assets/angular-material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example';
+import { ProgressBarQueryExample } from 'assets/angular-material-examples/progress-bar-query/progress-bar-query-example';
+import { ProgressSpinnerConfigurableExample } from 'assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example';
+import { ProgressSpinnerOverviewExample } from 'assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example';
+import { RadioNgModelExample } from 'assets/angular-material-examples/radio-ng-model/radio-ng-model-example';
+import { RadioOverviewExample } from 'assets/angular-material-examples/radio-overview/radio-overview-example';
+import { SelectCustomTriggerExample } from 'assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example';
+import { SelectDisabledExample } from 'assets/angular-material-examples/select-disabled/select-disabled-example';
+import { SelectErrorStateMatcherExample } from 'assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example';
+import { SelectFormExample } from 'assets/angular-material-examples/select-form/select-form-example';
+import { SelectHintErrorExample } from 'assets/angular-material-examples/select-hint-error/select-hint-error-example';
+import { SelectMultipleExample } from 'assets/angular-material-examples/select-multiple/select-multiple-example';
+import { SelectNoRippleExample } from 'assets/angular-material-examples/select-no-ripple/select-no-ripple-example';
+import { SelectOptgroupExample } from 'assets/angular-material-examples/select-optgroup/select-optgroup-example';
+import { SelectOverviewExample } from 'assets/angular-material-examples/select-overview/select-overview-example';
+import { SelectPanelClassExample } from 'assets/angular-material-examples/select-panel-class/select-panel-class-example';
+import { SelectResetExample } from 'assets/angular-material-examples/select-reset/select-reset-example';
+import { SelectValueBindingExample } from 'assets/angular-material-examples/select-value-binding/select-value-binding-example';
+import { SidenavFabExample } from 'assets/angular-material-examples/sidenav-fab/sidenav-fab-example';
+import { SidenavOverviewExample } from 'assets/angular-material-examples/sidenav-overview/sidenav-overview-example';
+import { SlideToggleConfigurableExample } from 'assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example';
+import { SlideToggleFormsExample } from 'assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example';
+import { SlideToggleOverviewExample } from 'assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example';
+import { SliderConfigurableExample } from 'assets/angular-material-examples/slider-configurable/slider-configurable-example';
+import { SliderOverviewExample } from 'assets/angular-material-examples/slider-overview/slider-overview-example';
+import { PizzaPartyComponent, SnackBarComponentExample } from 'assets/angular-material-examples/snack-bar-component/snack-bar-component-example';
+import { SnackBarOverviewExample } from 'assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example';
+import { SortOverviewExample } from 'assets/angular-material-examples/sort-overview/sort-overview-example';
+import { StepperOverviewExample } from 'assets/angular-material-examples/stepper-overview/stepper-overview-example';
+import { TableBasicExample } from 'assets/angular-material-examples/table-basic/table-basic-example';
+import { TableFilteringExample } from 'assets/angular-material-examples/table-filtering/table-filtering-example';
+import { TableHttpExample } from 'assets/angular-material-examples/table-http/table-http-example';
+import { TableOverviewExample } from 'assets/angular-material-examples/table-overview/table-overview-example';
+import { TablePaginationExample } from 'assets/angular-material-examples/table-pagination/table-pagination-example';
+import { TableSortingExample } from 'assets/angular-material-examples/table-sorting/table-sorting-example';
+import { TabsOverviewExample } from 'assets/angular-material-examples/tabs-overview/tabs-overview-example';
+import { TabsTemplateLabelExample } from 'assets/angular-material-examples/tabs-template-label/tabs-template-label-example';
+import { ToolbarMultirowExample } from 'assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example';
+import { ToolbarOverviewExample } from 'assets/angular-material-examples/toolbar-overview/toolbar-overview-example';
+import { TooltipOverviewExample } from 'assets/angular-material-examples/tooltip-overview/tooltip-overview-example';
+import { TooltipPositionExample } from 'assets/angular-material-examples/tooltip-position/tooltip-position-example';
 
 export const COMPONENT_MAP = {
     'autocomplete'    : [
diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.scss b/src/app/main/content/components/angular-material/example-viewer/example-viewer.scss
index a82d36b4..90324b70 100644
--- a/src/app/main/content/components/angular-material/example-viewer/example-viewer.scss
+++ b/src/app/main/content/components/angular-material/example-viewer/example-viewer.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 fuse-example-viewer {
     display: block;
diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.ts b/src/app/main/content/components/angular-material/example-viewer/example-viewer.ts
index 255c07dc..ace53c29 100644
--- a/src/app/main/content/components/angular-material/example-viewer/example-viewer.ts
+++ b/src/app/main/content/components/angular-material/example-viewer/example-viewer.ts
@@ -1,11 +1,13 @@
 import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { MatSnackBar } from '@angular/material';
 import 'rxjs/add/operator/first';
-import { CopierService } from '../../../../../core/components/copier/copier.service';
-import { EXAMPLE_COMPONENTS } from '../example-components';
 import 'prismjs/components/prism-scss';
 import 'prismjs/components/prism-typescript';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { EXAMPLE_COMPONENTS } from '../example-components';
+
+import { CopierService } from '@fuse/components/copier/copier.service';
+import { fuseAnimations } from '@fuse/animations';
 
 export interface LiveExample
 {
@@ -42,7 +44,6 @@ export class FuseExampleViewerComponent implements AfterViewInit, OnDestroy
 
     /** String key of the currently displayed example. */
     _example: string;
-
     exampleData: LiveExample;
 
     /** Whether the source for the example is being displayed. */
@@ -56,6 +57,22 @@ export class FuseExampleViewerComponent implements AfterViewInit, OnDestroy
     {
     }
 
+    ngAfterViewInit()
+    {
+        setTimeout(() => {
+            const cmpFactory = this._resolver.resolveComponentFactory(this.exampleData.component);
+            this.previewRef = this._previewContainer.createComponent(cmpFactory);
+        }, 0);
+    }
+
+    ngOnDestroy()
+    {
+        if ( this.previewRef )
+        {
+            this.previewRef.destroy();
+        }
+    }
+
     get example()
     {
         return this._example;
@@ -91,20 +108,4 @@ export class FuseExampleViewerComponent implements AfterViewInit, OnDestroy
             this.snackbar.open('Copy failed. Please try again!', '', {duration: 2500});
         }
     }
-
-    ngAfterViewInit()
-    {
-        setTimeout(() => {
-            const cmpFactory = this._resolver.resolveComponentFactory(this.exampleData.component);
-            this.previewRef = this._previewContainer.createComponent(cmpFactory);
-        }, 0);
-    }
-
-    ngOnDestroy()
-    {
-        if ( this.previewRef )
-        {
-            this.previewRef.destroy();
-        }
-    }
 }
diff --git a/src/app/main/content/components/cards/cards.component.scss b/src/app/main/content/components/cards/cards.component.scss
index 70fa94ee..bb8fa71b 100644
--- a/src/app/main/content/components/cards/cards.component.scss
+++ b/src/app/main/content/components/cards/cards.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/components/cards/cards.component.ts b/src/app/main/content/components/cards/cards.component.ts
index 924998bf..4fe7bd7b 100644
--- a/src/app/main/content/components/cards/cards.component.ts
+++ b/src/app/main/content/components/cards/cards.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import * as shape from 'd3-shape';
-import { fuseAnimations } from '../../../../core/animations';
+
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-cards-docs',
diff --git a/src/app/main/content/components/components.module.ts b/src/app/main/content/components/components.module.ts
index 754b2631..30f65c50 100644
--- a/src/app/main/content/components/components.module.ts
+++ b/src/app/main/content/components/components.module.ts
@@ -1,6 +1,11 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
+
+import { FuseAngularMaterialModule } from './angular-material/angular-material.module';
 import { FuseCardsDocsComponent } from './cards/cards.component';
 import { FuseCountdownDocsComponent } from './countdown/countdown.component';
 import { FuseHighlightDocsComponent } from './highlight/highlight.component';
@@ -10,9 +15,6 @@ import { FuseNavigationDocsComponent } from './navigation/navigation.component';
 import { FuseSearchBarDocsComponent } from './search-bar/search-bar.component';
 import { FuseShortcutsDocsComponent } from './shortcuts/shortcuts.component';
 import { FuseWidgetDocsComponent } from './widget/widget.component';
-import { FuseWidgetModule } from '../../../core/components/widget/widget.module';
-import { FuseAngularMaterialModule } from './angular-material/angular-material.module';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 const routes = [
     {
diff --git a/src/app/main/content/components/navigation/navigation.component.ts b/src/app/main/content/components/navigation/navigation.component.ts
index 1f549a4e..98622f8b 100644
--- a/src/app/main/content/components/navigation/navigation.component.ts
+++ b/src/app/main/content/components/navigation/navigation.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { FuseNavigationService } from '../../../../core/components/navigation/navigation.service';
+
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
     selector   : 'fuse-navigation-docs',
diff --git a/src/app/main/content/content.component.ts b/src/app/main/content/content.component.ts
index 297eaa11..0e750d92 100644
--- a/src/app/main/content/content.component.ts
+++ b/src/app/main/content/content.component.ts
@@ -1,11 +1,13 @@
 import { Component, HostBinding, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { fuseAnimations } from '../../core/animations';
-import { FuseConfigService } from '../../core/services/config.service';
+
 import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/map';
 
+import { fuseAnimations } from '@fuse/animations/index';
+import { FuseConfigService } from '@fuse/services/config.service';
+
 @Component({
     selector   : 'fuse-content',
     templateUrl: './content.component.html',
@@ -14,7 +16,7 @@ import 'rxjs/add/operator/map';
 })
 export class FuseContentComponent implements OnInit, OnDestroy
 {
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
     fuseSettings: any;
 
     @HostBinding('@routerTransitionUp') routeAnimationUp = false;
@@ -53,8 +55,8 @@ export class FuseContentComponent implements OnInit, OnDestroy
                 }
             });
 
-        this.onSettingsChanged =
-            this.fuseConfig.onSettingsChanged
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
                 .subscribe(
                     (newSettings) => {
                         this.fuseSettings = newSettings;
@@ -69,6 +71,6 @@ export class FuseContentComponent implements OnInit, OnDestroy
 
     ngOnDestroy()
     {
-        this.onSettingsChanged.unsubscribe();
+        this.onConfigChanged.unsubscribe();
     }
 }
diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss
index dab8f959..8bc3c9e0 100644
--- a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss
+++ b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts
index b934433a..18752dc5 100644
--- a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts
+++ b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { FuseConfigService } from '../../../../../core/services/config.service';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-forgot-password-2',
@@ -19,7 +20,7 @@ export class FuseForgotPassword2Component implements OnInit
         private formBuilder: FormBuilder
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts
index 8ae766c6..9c27b063 100644
--- a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts
+++ b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseForgotPassword2Component } from './forgot-password-2.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class ForgotPassword2Module
 {
-
 }
diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss
index eede1399..f626e4f8 100644
--- a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss
+++ b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts
index 1ea17741..eebeacf7 100644
--- a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts
+++ b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { FuseConfigService } from '../../../../../core/services/config.service';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-forgot-password',
@@ -19,7 +20,7 @@ export class FuseForgotPasswordComponent implements OnInit
         private formBuilder: FormBuilder
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts b/src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts
index 53a9da79..50994607 100644
--- a/src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts
+++ b/src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseForgotPasswordComponent } from './forgot-password.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class ForgotPasswordModule
 {
-
 }
diff --git a/src/app/main/content/pages/authentication/lock/lock.component.scss b/src/app/main/content/pages/authentication/lock/lock.component.scss
index 24290501..b5e4f62b 100644
--- a/src/app/main/content/pages/authentication/lock/lock.component.scss
+++ b/src/app/main/content/pages/authentication/lock/lock.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/authentication/lock/lock.component.ts b/src/app/main/content/pages/authentication/lock/lock.component.ts
index 22e18a08..11bd2125 100644
--- a/src/app/main/content/pages/authentication/lock/lock.component.ts
+++ b/src/app/main/content/pages/authentication/lock/lock.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { FuseConfigService } from '../../../../../core/services/config.service';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-lock',
@@ -19,7 +20,7 @@ export class FuseLockComponent implements OnInit
         private formBuilder: FormBuilder
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
diff --git a/src/app/main/content/pages/authentication/lock/lock.module.ts b/src/app/main/content/pages/authentication/lock/lock.module.ts
index edd87d4b..8d3e306a 100644
--- a/src/app/main/content/pages/authentication/lock/lock.module.ts
+++ b/src/app/main/content/pages/authentication/lock/lock.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseLockComponent } from './lock.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class LockModule
 {
-
 }
diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.scss b/src/app/main/content/pages/authentication/login-2/login-2.component.scss
index 71e05f07..7cd4e27f 100644
--- a/src/app/main/content/pages/authentication/login-2/login-2.component.scss
+++ b/src/app/main/content/pages/authentication/login-2/login-2.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.ts b/src/app/main/content/pages/authentication/login-2/login-2.component.ts
index c0637711..bc735783 100644
--- a/src/app/main/content/pages/authentication/login-2/login-2.component.ts
+++ b/src/app/main/content/pages/authentication/login-2/login-2.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { FuseConfigService } from '../../../../../core/services/config.service';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-login-2',
@@ -19,7 +20,7 @@ export class FuseLogin2Component implements OnInit
         private formBuilder: FormBuilder
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
diff --git a/src/app/main/content/pages/authentication/login-2/login-2.module.ts b/src/app/main/content/pages/authentication/login-2/login-2.module.ts
index f5356245..91d187dd 100644
--- a/src/app/main/content/pages/authentication/login-2/login-2.module.ts
+++ b/src/app/main/content/pages/authentication/login-2/login-2.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseLogin2Component } from './login-2.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class Login2Module
 {
-
 }
diff --git a/src/app/main/content/pages/authentication/login/login.component.scss b/src/app/main/content/pages/authentication/login/login.component.scss
index 72100d40..f02c7d2c 100644
--- a/src/app/main/content/pages/authentication/login/login.component.scss
+++ b/src/app/main/content/pages/authentication/login/login.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/authentication/login/login.component.ts b/src/app/main/content/pages/authentication/login/login.component.ts
index 0d052fb9..85e8a952 100644
--- a/src/app/main/content/pages/authentication/login/login.component.ts
+++ b/src/app/main/content/pages/authentication/login/login.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { FuseConfigService } from '../../../../../core/services/config.service';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-login',
@@ -19,7 +20,7 @@ export class FuseLoginComponent implements OnInit
         private formBuilder: FormBuilder
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
diff --git a/src/app/main/content/pages/authentication/login/login.module.ts b/src/app/main/content/pages/authentication/login/login.module.ts
index cf5307f8..4679c403 100644
--- a/src/app/main/content/pages/authentication/login/login.module.ts
+++ b/src/app/main/content/pages/authentication/login/login.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseLoginComponent } from './login.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class LoginModule
 {
-
 }
diff --git a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.scss b/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.scss
index 0ee0667e..3670f0eb 100644
--- a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.scss
+++ b/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.ts b/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.ts
index b0c357f2..8430d99d 100644
--- a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.ts
+++ b/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
-import { FuseConfigService } from '../../../../../core/services/config.service';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-mail-confirm',
@@ -15,7 +16,7 @@ export class FuseMailConfirmComponent
         private fuseConfig: FuseConfigService
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
diff --git a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts b/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts
index 4d0b52b3..a030c648 100644
--- a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts
+++ b/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseMailConfirmComponent } from './mail-confirm.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class MailConfirmModule
 {
-
 }
diff --git a/src/app/main/content/pages/authentication/register-2/register-2.component.scss b/src/app/main/content/pages/authentication/register-2/register-2.component.scss
index 06dac9ef..f7a7ae6e 100644
--- a/src/app/main/content/pages/authentication/register-2/register-2.component.scss
+++ b/src/app/main/content/pages/authentication/register-2/register-2.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/authentication/register-2/register-2.component.ts b/src/app/main/content/pages/authentication/register-2/register-2.component.ts
index 441bcae2..2c2f3350 100644
--- a/src/app/main/content/pages/authentication/register-2/register-2.component.ts
+++ b/src/app/main/content/pages/authentication/register-2/register-2.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { FuseConfigService } from '../../../../../core/services/config.service';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-register-2',
@@ -19,7 +20,7 @@ export class FuseRegister2Component implements OnInit
         private formBuilder: FormBuilder
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
diff --git a/src/app/main/content/pages/authentication/register-2/register-2.module.ts b/src/app/main/content/pages/authentication/register-2/register-2.module.ts
index 16975fca..58ab0837 100644
--- a/src/app/main/content/pages/authentication/register-2/register-2.module.ts
+++ b/src/app/main/content/pages/authentication/register-2/register-2.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from 'app/core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseRegister2Component } from './register-2.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class Register2Module
 {
-
 }
diff --git a/src/app/main/content/pages/authentication/register/register.component.scss b/src/app/main/content/pages/authentication/register/register.component.scss
index 3ed27336..de627ee8 100644
--- a/src/app/main/content/pages/authentication/register/register.component.scss
+++ b/src/app/main/content/pages/authentication/register/register.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/authentication/register/register.component.ts b/src/app/main/content/pages/authentication/register/register.component.ts
index e1df0c37..fea8d9ec 100644
--- a/src/app/main/content/pages/authentication/register/register.component.ts
+++ b/src/app/main/content/pages/authentication/register/register.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { FuseConfigService } from '../../../../../core/services/config.service';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-register',
@@ -19,7 +20,7 @@ export class FuseRegisterComponent implements OnInit
         private formBuilder: FormBuilder
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
diff --git a/src/app/main/content/pages/authentication/register/register.module.ts b/src/app/main/content/pages/authentication/register/register.module.ts
index 61a7c904..ffa07aeb 100644
--- a/src/app/main/content/pages/authentication/register/register.module.ts
+++ b/src/app/main/content/pages/authentication/register/register.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseRegisterComponent } from './register.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class RegisterModule
 {
-
 }
diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss
index 10b978a1..cd93b69c 100644
--- a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss
+++ b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts
index 29cf69f6..dea9e605 100644
--- a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts
+++ b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { FuseConfigService } from '../../../../../core/services/config.service';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-reset-password-2',
@@ -19,7 +20,7 @@ export class FuseResetPassword2Component implements OnInit
         private formBuilder: FormBuilder
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts
index 3fd19ca5..6f536d7c 100644
--- a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts
+++ b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseResetPassword2Component } from './reset-password-2.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class ResetPassword2Module
 {
-
 }
diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss b/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss
index 70f9dbfa..1465f371 100644
--- a/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss
+++ b/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts b/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts
index f068e1a9..3c86a632 100644
--- a/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts
+++ b/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { FuseConfigService } from '../../../../../core/services/config.service';
-import { fuseAnimations } from '../../../../../core/animations';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-reset-password',
@@ -19,7 +20,7 @@ export class FuseResetPasswordComponent implements OnInit
         private formBuilder: FormBuilder
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.module.ts b/src/app/main/content/pages/authentication/reset-password/reset-password.module.ts
index 4737858c..eea63226 100644
--- a/src/app/main/content/pages/authentication/reset-password/reset-password.module.ts
+++ b/src/app/main/content/pages/authentication/reset-password/reset-password.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseResetPasswordComponent } from './reset-password.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class ResetPasswordModule
 {
-
 }
diff --git a/src/app/main/content/pages/coming-soon/coming-soon.component.scss b/src/app/main/content/pages/coming-soon/coming-soon.component.scss
index 88186e1b..75a10c32 100644
--- a/src/app/main/content/pages/coming-soon/coming-soon.component.scss
+++ b/src/app/main/content/pages/coming-soon/coming-soon.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/coming-soon/coming-soon.component.ts b/src/app/main/content/pages/coming-soon/coming-soon.component.ts
index 76b287f5..53b252c1 100644
--- a/src/app/main/content/pages/coming-soon/coming-soon.component.ts
+++ b/src/app/main/content/pages/coming-soon/coming-soon.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
-import { FuseConfigService } from '../../../../core/services/config.service';
-import { fuseAnimations } from '../../../../core/animations';
+import { FuseConfigService } from '@fuse/services/config.service';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-coming-soon',
@@ -20,7 +20,7 @@ export class FuseComingSoonComponent implements OnInit
         private formBuilder: FormBuilder
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
diff --git a/src/app/main/content/pages/coming-soon/coming-soon.module.ts b/src/app/main/content/pages/coming-soon/coming-soon.module.ts
index ddf8fa79..8d4c1617 100644
--- a/src/app/main/content/pages/coming-soon/coming-soon.module.ts
+++ b/src/app/main/content/pages/coming-soon/coming-soon.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseComingSoonComponent } from './coming-soon.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class ComingSoonModule
 {
-
 }
diff --git a/src/app/main/content/pages/errors/404/error-404.component.scss b/src/app/main/content/pages/errors/404/error-404.component.scss
index a19e4f25..9b63891d 100644
--- a/src/app/main/content/pages/errors/404/error-404.component.scss
+++ b/src/app/main/content/pages/errors/404/error-404.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/errors/404/error-404.component.ts b/src/app/main/content/pages/errors/404/error-404.component.ts
index 0797035c..135c99da 100644
--- a/src/app/main/content/pages/errors/404/error-404.component.ts
+++ b/src/app/main/content/pages/errors/404/error-404.component.ts
@@ -1,19 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
-import { FuseConfigService } from '../../../../../core/services/config.service';
+import { FuseConfigService } from '@fuse/services/config.service';
 
 @Component({
     selector   : 'fuse-error-404',
     templateUrl: './error-404.component.html',
     styleUrls  : ['./error-404.component.scss']
 })
-export class FuseError404Component implements OnInit
+export class FuseError404Component
 {
     constructor(
         private fuseConfig: FuseConfigService
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
@@ -21,8 +21,4 @@ export class FuseError404Component implements OnInit
             }
         });
     }
-
-    ngOnInit()
-    {
-    }
 }
diff --git a/src/app/main/content/pages/errors/404/error-404.module.ts b/src/app/main/content/pages/errors/404/error-404.module.ts
index 791f4a38..df632b11 100644
--- a/src/app/main/content/pages/errors/404/error-404.module.ts
+++ b/src/app/main/content/pages/errors/404/error-404.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseError404Component } from './error-404.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class Error404Module
 {
-
 }
diff --git a/src/app/main/content/pages/errors/500/error-500.component.scss b/src/app/main/content/pages/errors/500/error-500.component.scss
index d2f3f160..6b7667e8 100644
--- a/src/app/main/content/pages/errors/500/error-500.component.scss
+++ b/src/app/main/content/pages/errors/500/error-500.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/errors/500/error-500.component.ts b/src/app/main/content/pages/errors/500/error-500.component.ts
index 597043ba..b4014e47 100644
--- a/src/app/main/content/pages/errors/500/error-500.component.ts
+++ b/src/app/main/content/pages/errors/500/error-500.component.ts
@@ -1,19 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
-import { FuseConfigService } from '../../../../../core/services/config.service';
+import { FuseConfigService } from '@fuse/services/config.service';
 
 @Component({
     selector   : 'fuse-error-500',
     templateUrl: './error-500.component.html',
     styleUrls  : ['./error-500.component.scss']
 })
-export class FuseError500Component implements OnInit
+export class FuseError500Component
 {
     constructor(
         private fuseConfig: FuseConfigService
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
@@ -21,8 +21,4 @@ export class FuseError500Component implements OnInit
             }
         });
     }
-
-    ngOnInit()
-    {
-    }
 }
diff --git a/src/app/main/content/pages/errors/500/error-500.module.ts b/src/app/main/content/pages/errors/500/error-500.module.ts
index 7b2c0b50..e1077394 100644
--- a/src/app/main/content/pages/errors/500/error-500.module.ts
+++ b/src/app/main/content/pages/errors/500/error-500.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseError500Component } from './error-500.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class Error500Module
 {
-
 }
diff --git a/src/app/main/content/pages/faq/faq.component.scss b/src/app/main/content/pages/faq/faq.component.scss
index 48bc8c5c..fec5a676 100644
--- a/src/app/main/content/pages/faq/faq.component.scss
+++ b/src/app/main/content/pages/faq/faq.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/faq/faq.component.ts b/src/app/main/content/pages/faq/faq.component.ts
index 54670fb2..0e288a4e 100644
--- a/src/app/main/content/pages/faq/faq.component.ts
+++ b/src/app/main/content/pages/faq/faq.component.ts
@@ -1,11 +1,13 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Subscription } from 'rxjs/Subscription';
-import { FaqService } from './faq.service';
-import { FuseUtils } from '../../../../core/fuseUtils';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 
+import { FuseUtils } from '@fuse/fuseUtils';
+
+import { FaqService } from './faq.service';
+
 @Component({
     selector   : 'fuse-faq',
     templateUrl: './faq.component.html',
@@ -41,6 +43,11 @@ export class FuseFaqComponent implements OnInit, OnDestroy
             });
     }
 
+    ngOnDestroy()
+    {
+        this.onFaqsChanged.unsubscribe();
+    }
+
     setStep(index: number)
     {
         this.step = index;
@@ -55,9 +62,4 @@ export class FuseFaqComponent implements OnInit, OnDestroy
     {
         this.step--;
     }
-
-    ngOnDestroy()
-    {
-        this.onFaqsChanged.unsubscribe();
-    }
 }
diff --git a/src/app/main/content/pages/faq/faq.module.ts b/src/app/main/content/pages/faq/faq.module.ts
index b4f36cc0..fe5dec69 100644
--- a/src/app/main/content/pages/faq/faq.module.ts
+++ b/src/app/main/content/pages/faq/faq.module.ts
@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
-import { FuseFaqComponent } from './faq.component';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FaqService } from './faq.service';
+import { FuseFaqComponent } from './faq.component';
 
 const routes = [
     {
diff --git a/src/app/main/content/pages/faq/faq.service.ts b/src/app/main/content/pages/faq/faq.service.ts
index 3accb335..57e22856 100644
--- a/src/app/main/content/pages/faq/faq.service.ts
+++ b/src/app/main/content/pages/faq/faq.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
diff --git a/src/app/main/content/pages/invoices/compact/compact.component.scss b/src/app/main/content/pages/invoices/compact/compact.component.scss
index 39ee0b4a..46726dd7 100644
--- a/src/app/main/content/pages/invoices/compact/compact.component.scss
+++ b/src/app/main/content/pages/invoices/compact/compact.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/invoices/compact/compact.component.ts b/src/app/main/content/pages/invoices/compact/compact.component.ts
index 95885916..3dd9ec24 100644
--- a/src/app/main/content/pages/invoices/compact/compact.component.ts
+++ b/src/app/main/content/pages/invoices/compact/compact.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+
 import { InvoiceService } from '../invoice.service';
 
 @Component({
diff --git a/src/app/main/content/pages/invoices/compact/compact.module.ts b/src/app/main/content/pages/invoices/compact/compact.module.ts
index d2dd171c..0332cd32 100644
--- a/src/app/main/content/pages/invoices/compact/compact.module.ts
+++ b/src/app/main/content/pages/invoices/compact/compact.module.ts
@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
-import { FuseInvoiceCompactComponent } from './compact.component';
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { InvoiceService } from '../invoice.service';
+import { FuseInvoiceCompactComponent } from './compact.component';
 
 const routes = [
     {
@@ -27,8 +28,6 @@ const routes = [
         InvoiceService
     ]
 })
-
 export class InvoiceCompactModule
 {
-
 }
diff --git a/src/app/main/content/pages/invoices/invoice.service.ts b/src/app/main/content/pages/invoices/invoice.service.ts
index 21ddb478..0a55fcf5 100644
--- a/src/app/main/content/pages/invoices/invoice.service.ts
+++ b/src/app/main/content/pages/invoices/invoice.service.ts
@@ -1,14 +1,14 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class InvoiceService implements Resolve<any>
 {
     invoice: any;
-
     invoiceOnChanged: BehaviorSubject<any> = new BehaviorSubject({});
 
     constructor(private http: HttpClient)
diff --git a/src/app/main/content/pages/invoices/modern/modern.component.scss b/src/app/main/content/pages/invoices/modern/modern.component.scss
index 473ebf19..cad1ef80 100644
--- a/src/app/main/content/pages/invoices/modern/modern.component.scss
+++ b/src/app/main/content/pages/invoices/modern/modern.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/invoices/modern/modern.component.ts b/src/app/main/content/pages/invoices/modern/modern.component.ts
index bf529566..850561dd 100644
--- a/src/app/main/content/pages/invoices/modern/modern.component.ts
+++ b/src/app/main/content/pages/invoices/modern/modern.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+
 import { InvoiceService } from '../invoice.service';
 
 @Component({
diff --git a/src/app/main/content/pages/invoices/modern/modern.module.ts b/src/app/main/content/pages/invoices/modern/modern.module.ts
index 02b361c4..c968173f 100644
--- a/src/app/main/content/pages/invoices/modern/modern.module.ts
+++ b/src/app/main/content/pages/invoices/modern/modern.module.ts
@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
-import { FuseInvoiceModernComponent } from './modern.component';
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { InvoiceService } from '../invoice.service';
+import { FuseInvoiceModernComponent } from './modern.component';
 
 const routes = [
     {
@@ -27,8 +28,6 @@ const routes = [
         InvoiceService
     ]
 })
-
 export class InvoiceModernModule
 {
-
 }
diff --git a/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss
index a322ca81..560a36fc 100644
--- a/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss
+++ b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 .knowledgebase-article-dialog {
 
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.component.scss b/src/app/main/content/pages/knowledge-base/knowledge-base.component.scss
index 4696bdba..e7e4156f 100644
--- a/src/app/main/content/pages/knowledge-base/knowledge-base.component.scss
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 #knowledgebase {
 
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.component.ts b/src/app/main/content/pages/knowledge-base/knowledge-base.component.ts
index 62c9b822..9828bd6c 100644
--- a/src/app/main/content/pages/knowledge-base/knowledge-base.component.ts
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit, OnDestroy, ViewEncapsulation} from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
-import { KnowledgeBaseService } from './knowledge-base.service';
 import { MatDialog } from '@angular/material';
+import { Subscription } from 'rxjs/Subscription';
+
+import { KnowledgeBaseService } from './knowledge-base.service';
 import { FuseKnowledgeBaseArticleComponent } from './dialogs/article/article.component';
 
 @Component({
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts b/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts
index b26bd919..367709a2 100644
--- a/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts
@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { KnowledgeBaseService } from './knowledge-base.service';
 import { FuseKnowledgeBaseComponent } from './knowledge-base.component';
 import { FuseKnowledgeBaseArticleComponent } from './dialogs/article/article.component';
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.service.ts b/src/app/main/content/pages/knowledge-base/knowledge-base.service.ts
index 845356a6..73292010 100644
--- a/src/app/main/content/pages/knowledge-base/knowledge-base.service.ts
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
diff --git a/src/app/main/content/pages/maintenance/maintenance.component.scss b/src/app/main/content/pages/maintenance/maintenance.component.scss
index aaf6bd6b..8c737059 100644
--- a/src/app/main/content/pages/maintenance/maintenance.component.scss
+++ b/src/app/main/content/pages/maintenance/maintenance.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/maintenance/maintenance.component.ts b/src/app/main/content/pages/maintenance/maintenance.component.ts
index ae86b9bf..8ba28d25 100644
--- a/src/app/main/content/pages/maintenance/maintenance.component.ts
+++ b/src/app/main/content/pages/maintenance/maintenance.component.ts
@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
-import { FuseConfigService } from '../../../../core/services/config.service';
-import { fuseAnimations } from '../../../../core/animations';
+import { FuseConfigService } from '@fuse/services/config.service';
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector   : 'fuse-maintenance',
@@ -9,13 +9,13 @@ import { fuseAnimations } from '../../../../core/animations';
     styleUrls  : ['./maintenance.component.scss'],
     animations : fuseAnimations
 })
-export class FuseMaintenanceComponent implements OnInit
+export class FuseMaintenanceComponent
 {
     constructor(
         private fuseConfig: FuseConfigService
     )
     {
-        this.fuseConfig.setSettings({
+        this.fuseConfig.setConfig({
             layout: {
                 navigation: 'none',
                 toolbar   : 'none',
@@ -23,9 +23,4 @@ export class FuseMaintenanceComponent implements OnInit
             }
         });
     }
-
-    ngOnInit()
-    {
-
-    }
 }
diff --git a/src/app/main/content/pages/maintenance/maintenence.module.ts b/src/app/main/content/pages/maintenance/maintenence.module.ts
index 08195d77..732b7e1f 100644
--- a/src/app/main/content/pages/maintenance/maintenence.module.ts
+++ b/src/app/main/content/pages/maintenance/maintenence.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseMaintenanceComponent } from './maintenance.component';
 
 const routes = [
@@ -20,8 +21,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class MaintenanceModule
 {
-
 }
diff --git a/src/app/main/content/pages/pricing/pricing.module.ts b/src/app/main/content/pages/pricing/pricing.module.ts
index 115bba06..b002e135 100644
--- a/src/app/main/content/pages/pricing/pricing.module.ts
+++ b/src/app/main/content/pages/pricing/pricing.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { SharedModule } from '../../../../core/modules/shared.module';
+
+import { SharedModule } from '@fuse/modules/shared.module';
 
 import { FusePricingStyle1Component } from './style-1/style-1.component';
 import { FusePricingStyle2Component } from './style-2/style-2.component';
@@ -32,8 +33,6 @@ const routes = [
         RouterModule.forChild(routes)
     ]
 })
-
 export class PricingModule
 {
-
 }
diff --git a/src/app/main/content/pages/pricing/style-1/style-1.component.scss b/src/app/main/content/pages/pricing/style-1/style-1.component.scss
index 067eb772..2db4ea0c 100644
--- a/src/app/main/content/pages/pricing/style-1/style-1.component.scss
+++ b/src/app/main/content/pages/pricing/style-1/style-1.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/pricing/style-2/style-2.component.scss b/src/app/main/content/pages/pricing/style-2/style-2.component.scss
index 067eb772..2db4ea0c 100644
--- a/src/app/main/content/pages/pricing/style-2/style-2.component.scss
+++ b/src/app/main/content/pages/pricing/style-2/style-2.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/pricing/style-3/style-3.component.scss b/src/app/main/content/pages/pricing/style-3/style-3.component.scss
index 067eb772..2db4ea0c 100644
--- a/src/app/main/content/pages/pricing/style-3/style-3.component.scss
+++ b/src/app/main/content/pages/pricing/style-3/style-3.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/profile/profile.component.scss b/src/app/main/content/pages/profile/profile.component.scss
index cf8e299c..8044a3cc 100644
--- a/src/app/main/content/pages/profile/profile.component.scss
+++ b/src/app/main/content/pages/profile/profile.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 #profile {
 
diff --git a/src/app/main/content/pages/profile/profile.component.ts b/src/app/main/content/pages/profile/profile.component.ts
index 3acea298..4b01e1cc 100644
--- a/src/app/main/content/pages/profile/profile.component.ts
+++ b/src/app/main/content/pages/profile/profile.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { fuseAnimations } from '../../../../core/animations';
+import { Component, ViewEncapsulation } from '@angular/core';
+
+import { fuseAnimations } from '@fuse/animations';
 
 @Component({
     selector     : 'fuse-profile',
@@ -8,16 +9,11 @@ import { fuseAnimations } from '../../../../core/animations';
     encapsulation: ViewEncapsulation.None,
     animations   : fuseAnimations
 })
-export class FuseProfileComponent implements OnInit
+export class FuseProfileComponent
 {
 
     constructor()
     {
 
     }
-
-    ngOnInit()
-    {
-
-    }
 }
diff --git a/src/app/main/content/pages/profile/profile.module.ts b/src/app/main/content/pages/profile/profile.module.ts
index aa699d6a..2d39909c 100644
--- a/src/app/main/content/pages/profile/profile.module.ts
+++ b/src/app/main/content/pages/profile/profile.module.ts
@@ -1,12 +1,13 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
+import { ProfileService } from './profile.service';
 import { FuseProfileComponent } from './profile.component';
 import { FuseProfileTimelineComponent } from './tabs/timeline/timeline.component';
 import { FuseProfileAboutComponent } from './tabs/about/about.component';
 import { FuseProfilePhotosVideosComponent } from './tabs/photos-videos/photos-videos.component';
-import { ProfileService } from './profile.service';
 
 const routes = [
     {
diff --git a/src/app/main/content/pages/profile/profile.service.ts b/src/app/main/content/pages/profile/profile.service.ts
index d5019d8d..1c4029b5 100644
--- a/src/app/main/content/pages/profile/profile.service.ts
+++ b/src/app/main/content/pages/profile/profile.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
diff --git a/src/app/main/content/pages/profile/tabs/about/about.component.scss b/src/app/main/content/pages/profile/tabs/about/about.component.scss
index 48250a05..c7f0d64f 100644
--- a/src/app/main/content/pages/profile/tabs/about/about.component.scss
+++ b/src/app/main/content/pages/profile/tabs/about/about.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/profile/tabs/about/about.component.ts b/src/app/main/content/pages/profile/tabs/about/about.component.ts
index 7bfd816a..60ba81b2 100644
--- a/src/app/main/content/pages/profile/tabs/about/about.component.ts
+++ b/src/app/main/content/pages/profile/tabs/about/about.component.ts
@@ -1,6 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+
+import { fuseAnimations } from '@fuse/animations';
+
 import { ProfileService } from '../../profile.service';
-import { fuseAnimations } from '../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-profile-about',
@@ -8,7 +10,7 @@ import { fuseAnimations } from '../../../../../../core/animations';
     styleUrls  : ['./about.component.scss'],
     animations : fuseAnimations
 })
-export class FuseProfileAboutComponent implements OnInit
+export class FuseProfileAboutComponent
 {
     about: any;
 
@@ -18,9 +20,4 @@ export class FuseProfileAboutComponent implements OnInit
             this.about = about;
         });
     }
-
-    ngOnInit()
-    {
-
-    }
 }
diff --git a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.scss b/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.scss
index 5691b548..e1653c12 100644
--- a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.scss
+++ b/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.ts b/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.ts
index df1f26c2..f30f2ecf 100644
--- a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.ts
+++ b/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.ts
@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+
+import { fuseAnimations } from '@fuse/animations';
 
 import { ProfileService } from '../../profile.service';
-import { fuseAnimations } from '../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-profile-photos-videos',
@@ -9,7 +10,7 @@ import { fuseAnimations } from '../../../../../../core/animations';
     styleUrls  : ['./photos-videos.component.scss'],
     animations : fuseAnimations
 })
-export class FuseProfilePhotosVideosComponent implements OnInit
+export class FuseProfilePhotosVideosComponent
 {
     photosVideos: any;
 
@@ -19,9 +20,4 @@ export class FuseProfilePhotosVideosComponent implements OnInit
             this.photosVideos = photosVideos;
         });
     }
-
-    ngOnInit()
-    {
-
-    }
 }
diff --git a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss
index 58e12fa6..c4aeee49 100644
--- a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss
+++ b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.ts b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.ts
index 69bffa7c..a82c2d00 100644
--- a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.ts
+++ b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.ts
@@ -1,6 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+
+import { fuseAnimations } from '@fuse/animations';
+
 import { ProfileService } from '../../profile.service';
-import { fuseAnimations } from '../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-profile-timeline',
@@ -8,7 +10,7 @@ import { fuseAnimations } from '../../../../../../core/animations';
     styleUrls  : ['./timeline.component.scss'],
     animations : fuseAnimations
 })
-export class FuseProfileTimelineComponent implements OnInit
+export class FuseProfileTimelineComponent
 {
     timeline: any;
 
@@ -18,9 +20,4 @@ export class FuseProfileTimelineComponent implements OnInit
             this.timeline = timeline;
         });
     }
-
-    ngOnInit()
-    {
-
-    }
 }
diff --git a/src/app/main/content/pages/search/search.component.scss b/src/app/main/content/pages/search/search.component.scss
index b4121e2e..71649a46 100644
--- a/src/app/main/content/pages/search/search.component.scss
+++ b/src/app/main/content/pages/search/search.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/search/search.component.ts b/src/app/main/content/pages/search/search.component.ts
index 83f35b04..394ee543 100644
--- a/src/app/main/content/pages/search/search.component.ts
+++ b/src/app/main/content/pages/search/search.component.ts
@@ -1,20 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector   : 'fuse-search',
     templateUrl: './search.component.html',
     styleUrls  : ['./search.component.scss']
 })
-export class FuseSearchComponent implements OnInit
+export class FuseSearchComponent
 {
-
     constructor()
     {
-
-    }
-
-    ngOnInit()
-    {
-
     }
 }
diff --git a/src/app/main/content/pages/search/search.module.ts b/src/app/main/content/pages/search/search.module.ts
index 325c790e..7e47b1da 100644
--- a/src/app/main/content/pages/search/search.module.ts
+++ b/src/app/main/content/pages/search/search.module.ts
@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
+import { SearchService } from './search.service';
 import { FuseSearchClassicComponent } from './tabs/classic/classic.component';
 import { FuseSearchTableComponent } from './tabs/table/table.component';
 import { FuseSearchComponent } from './search.component';
-import { SearchService } from './search.service';
 
 const routes = [
     {
diff --git a/src/app/main/content/pages/search/search.service.ts b/src/app/main/content/pages/search/search.service.ts
index 5e58f53a..5ca0277a 100644
--- a/src/app/main/content/pages/search/search.service.ts
+++ b/src/app/main/content/pages/search/search.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
diff --git a/src/app/main/content/pages/search/tabs/classic/classic.component.scss b/src/app/main/content/pages/search/tabs/classic/classic.component.scss
index 4a8acf7c..6280eda4 100644
--- a/src/app/main/content/pages/search/tabs/classic/classic.component.scss
+++ b/src/app/main/content/pages/search/tabs/classic/classic.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/search/tabs/classic/classic.component.ts b/src/app/main/content/pages/search/tabs/classic/classic.component.ts
index 2f5903b1..e197597c 100644
--- a/src/app/main/content/pages/search/tabs/classic/classic.component.ts
+++ b/src/app/main/content/pages/search/tabs/classic/classic.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+
 import { SearchService } from '../../search.service';
 
 @Component({
@@ -6,7 +7,7 @@ import { SearchService } from '../../search.service';
     templateUrl: './classic.component.html',
     styleUrls  : ['./classic.component.scss']
 })
-export class FuseSearchClassicComponent implements OnInit
+export class FuseSearchClassicComponent
 {
     classic: any;
 
@@ -16,9 +17,4 @@ export class FuseSearchClassicComponent implements OnInit
             this.classic = classic;
         });
     }
-
-    ngOnInit()
-    {
-
-    }
 }
diff --git a/src/app/main/content/pages/search/tabs/table/table.component.scss b/src/app/main/content/pages/search/tabs/table/table.component.scss
index 6c387638..ca2a0c07 100644
--- a/src/app/main/content/pages/search/tabs/table/table.component.scss
+++ b/src/app/main/content/pages/search/tabs/table/table.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 
diff --git a/src/app/main/content/pages/search/tabs/table/table.component.ts b/src/app/main/content/pages/search/tabs/table/table.component.ts
index ea3f081a..321227ee 100644
--- a/src/app/main/content/pages/search/tabs/table/table.component.ts
+++ b/src/app/main/content/pages/search/tabs/table/table.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { SearchService } from '../../search.service';
 import { DataSource } from '@angular/cdk/collections';
 
+import { SearchService } from '../../search.service';
+
 @Component({
     selector   : 'fuse-search-table',
     templateUrl: './table.component.html',
diff --git a/src/app/main/content/services/config/config.component.html b/src/app/main/content/services/config/config.component.html
index 604eea39..f7006f05 100644
--- a/src/app/main/content/services/config/config.component.html
+++ b/src/app/main/content/services/config/config.component.html
@@ -30,14 +30,14 @@
 
                         export class SomeComponent
                         {
-                            settings: any;
+                            config: any;
 
                             constructor(private fuseConfig: FuseConfigService)
                             {
                                 // Subscribe to settings changed event
-                                this.fuseConfig.onSettingsChanged.subscribe(
-                                    (newSettings) => {
-                                        this.settings = newSettings;
+                                this.fuseConfig.onConfigChanged.subscribe(
+                                    (newConfig) => {
+                                        this.config = newConfig;
                                     }
                                 );
                             }
@@ -45,7 +45,7 @@
                             onInit(){
 
                                 // Fully customizable surroundings for this particular component
-                                this.fuseConfig.setSettings({
+                                this.fuseConfig.setConfig({
                                     layout          : {
                                         navigation      : 'left',       // 'right', 'left', 'top', none
                                         navigationFolded: false,        // true, false
diff --git a/src/app/main/content/services/services.module.ts b/src/app/main/content/services/services.module.ts
index 75be1738..bd006620 100644
--- a/src/app/main/content/services/services.module.ts
+++ b/src/app/main/content/services/services.module.ts
@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseConfigServiceDocsComponent } from './config/config.component';
 import { FuseSplashScreenServiceDocsComponent } from './splash-screen/splash-screen.component';
 
diff --git a/src/app/main/content/ui/colors/colors.component.ts b/src/app/main/content/ui/colors/colors.component.ts
index 73d0a2d1..5e6c3025 100644
--- a/src/app/main/content/ui/colors/colors.component.ts
+++ b/src/app/main/content/ui/colors/colors.component.ts
@@ -1,12 +1,13 @@
 import { Component, OnInit } from '@angular/core';
-import { MatColors } from '../../../../core/matColors';
+
+import { MatColors } from '@fuse/matColors';
 
 @Component({
     selector   : 'fuse-colors',
     templateUrl: './colors.component.html',
     styleUrls  : ['./colors.component.scss']
 })
-export class FuseColorsComponent implements OnInit
+export class FuseColorsComponent
 {
     colors: {};
     selectedColor: string;
@@ -18,11 +19,6 @@ export class FuseColorsComponent implements OnInit
         this.updateSelectedColor('primary');
     }
 
-    ngOnInit()
-    {
-
-    }
-
     selectColor(selected)
     {
         this.updateSelectedColor(selected.tab.textLabel);
diff --git a/src/app/main/content/ui/colors/colors.module.ts b/src/app/main/content/ui/colors/colors.module.ts
index cbf2dc1e..51fb3525 100644
--- a/src/app/main/content/ui/colors/colors.module.ts
+++ b/src/app/main/content/ui/colors/colors.module.ts
@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '../../../../core/modules/shared.module';
-import { FuseDemoModule } from '../../../../core/components/demo/demo.module';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseDemoModule } from '@fuse/components/demo/demo.module';
+
 import { FuseColorsComponent } from './colors.component';
 
 const routes: Routes = [
diff --git a/src/app/main/content/ui/forms/forms.module.ts b/src/app/main/content/ui/forms/forms.module.ts
index 8c0d4fb4..04a6a257 100644
--- a/src/app/main/content/ui/forms/forms.module.ts
+++ b/src/app/main/content/ui/forms/forms.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule, Routes } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseFormsComponent } from './forms.component';
 
 const routes: Routes = [
diff --git a/src/app/main/content/ui/helper-classes/helper-classes.module.ts b/src/app/main/content/ui/helper-classes/helper-classes.module.ts
index bb99ecb2..bb098647 100644
--- a/src/app/main/content/ui/helper-classes/helper-classes.module.ts
+++ b/src/app/main/content/ui/helper-classes/helper-classes.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule, Routes } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseHelperClassesComponent } from './helper-classes.component';
 import { FuseHelperClassesPaddingMarginComponent } from './tabs/padding-margin/padding-margin.component';
 import { FuseHelperClassesWidthHeightComponent } from './tabs/width-height/width-height.component';
diff --git a/src/app/main/content/ui/icons/icons.module.ts b/src/app/main/content/ui/icons/icons.module.ts
index fe75f5b7..061fe136 100644
--- a/src/app/main/content/ui/icons/icons.module.ts
+++ b/src/app/main/content/ui/icons/icons.module.ts
@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule, Routes } from '@angular/router';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseIconsComponent } from './icons.component';
 
 const routes: Routes = [
diff --git a/src/app/main/content/ui/page-layouts/page-layouts.module.ts b/src/app/main/content/ui/page-layouts/page-layouts.module.ts
index c87cb18f..1916eb4e 100644
--- a/src/app/main/content/ui/page-layouts/page-layouts.module.ts
+++ b/src/app/main/content/ui/page-layouts/page-layouts.module.ts
@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '../../../../core/modules/shared.module';
-import { FuseDemoModule } from '../../../../core/components/demo/demo.module';
+
+import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseDemoModule } from '@fuse/components/demo/demo.module';
+
 import { FuseCardedFullWidthComponent } from './carded/fullwidth/fullwidth.component';
 import { FuseCardedFullWidth2Component } from './carded/fullwidth-2/fullwidth-2.component';
 import { FuseCardedLeftSidenavComponent } from './carded/left-sidenav/left-sidenav.component';
diff --git a/src/app/main/content/ui/typography/typography.component.ts b/src/app/main/content/ui/typography/typography.component.ts
index 3f6cd268..44e979b7 100644
--- a/src/app/main/content/ui/typography/typography.component.ts
+++ b/src/app/main/content/ui/typography/typography.component.ts
@@ -1,17 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector   : 'fuse-typography',
     templateUrl: './typography.component.html',
     styleUrls  : ['./typography.component.scss']
 })
-export class FuseTypographyComponent implements OnInit
+export class FuseTypographyComponent
 {
     constructor()
     {
     }
-
-    ngOnInit()
-    {
-    }
 }
diff --git a/src/app/main/content/ui/typography/typography.module.ts b/src/app/main/content/ui/typography/typography.module.ts
index ca1e0f93..0a025966 100644
--- a/src/app/main/content/ui/typography/typography.module.ts
+++ b/src/app/main/content/ui/typography/typography.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
 import { RouterModule, Routes } from '@angular/router';
 
+import { SharedModule } from '@fuse/modules/shared.module';
+
 import { FuseTypographyComponent } from './typography.component';
 import { FuseTypographyHeadingsComponent } from './tabs/headings/headings.component';
 import { FuseTypographyInlineTextElementsComponent } from './tabs/inline-text-elements/inline-text-elements.component';
diff --git a/src/app/main/footer/footer.component.ts b/src/app/main/footer/footer.component.ts
index d741f76c..4065e363 100644
--- a/src/app/main/footer/footer.component.ts
+++ b/src/app/main/footer/footer.component.ts
@@ -1,19 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector   : 'fuse-footer',
     templateUrl: './footer.component.html',
     styleUrls  : ['./footer.component.scss']
 })
-export class FuseFooterComponent implements OnInit
+export class FuseFooterComponent
 {
 
     constructor()
     {
     }
-
-    ngOnInit()
-    {
-    }
-
 }
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index dd808a57..39d8905e 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -9,20 +9,23 @@
         <!-- / TOOLBAR: Above -->
 
         <!-- NAVBAR: Top -->
-        <fuse-navbar-horizontal class="top-navbar" fxHide fxShow.gt-md
-                                [ngClass]="fuseSettings.colorClasses.navbar"
-                                *ngIf="fuseSettings.layout.navigation === 'top'">
-        </fuse-navbar-horizontal>
+        <fuse-navbar layout="horizontal"
+                     class="top-navbar" fxHide fxShow.gt-md
+                     [ngClass]="fuseSettings.colorClasses.navbar"
+                     *ngIf="fuseSettings.layout.navigation === 'top'">
+        </fuse-navbar>
         <!-- / NAVBAR: Top -->
 
         <div id="wrapper">
 
             <!-- NAVBAR: Left -->
-            <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
-                                  class="left-navbar"
-                                  [ngClass]="fuseSettings.colorClasses.navbar"
-                                  *ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
-            </fuse-navbar-vertical>
+            <fuse-sidebar [name]="'navbar'"
+                          [folded]="fuseSettings.layout.navigationFolded"
+                          [lockedOpen]="'gt-md'"
+                          class="left-navbar" [ngClass]="fuseSettings.colorClasses.navbar"
+                          *ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
+                <fuse-navbar layout="vertical"></fuse-navbar>
+            </fuse-sidebar>
             <!-- / NAVBAR: Left -->
 
             <div class="content-wrapper">
@@ -44,11 +47,13 @@
             </div>
 
             <!-- NAVBAR: Right -->
-            <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
-                                  class="right-navbar"
-                                  [ngClass]="fuseSettings.colorClasses.navbar"
-                                  *ngIf="fuseSettings.layout.navigation === 'right'">
-            </fuse-navbar-vertical>
+            <fuse-sidebar [name]="'navbar'" [align]="'right'"
+                          [folded]="fuseSettings.layout.navigationFolded"
+                          [lockedOpen]="'gt-md'"
+                          class="right-navbar" [ngClass]="fuseSettings.colorClasses.navbar"
+                          *ngIf="fuseSettings.layout.navigation === 'right'">
+                <fuse-navbar layout="vertical"></fuse-navbar>
+            </fuse-sidebar>
             <!-- / NAVBAR: Right -->
 
         </div>
diff --git a/src/app/main/main.component.scss b/src/app/main/main.component.scss
index 2c1b6977..c677d9e3 100644
--- a/src/app/main/main.component.scss
+++ b/src/app/main/main.component.scss
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 fuse-main {
     display: flex;
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index a8a7ce5c..e1ff1281 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -1,8 +1,9 @@
-import { Component, ElementRef, HostBinding, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
-import { FuseConfigService } from '../core/services/config.service';
-import { Platform } from '@angular/cdk/platform';
+import { Component, ElementRef, HostBinding, Inject, OnDestroy, Renderer2, ViewEncapsulation } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
+import { Platform } from '@angular/cdk/platform';
+import { Subscription } from 'rxjs/Subscription';
+
+import { FuseConfigService } from '@fuse/services/config.service';
 
 @Component({
     selector     : 'fuse-main',
@@ -10,9 +11,9 @@ import { DOCUMENT } from '@angular/common';
     styleUrls    : ['./main.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseMainComponent implements OnInit, OnDestroy
+export class FuseMainComponent implements OnDestroy
 {
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
     fuseSettings: any;
     @HostBinding('attr.fuse-layout-mode') layoutMode;
 
@@ -24,8 +25,8 @@ export class FuseMainComponent implements OnInit, OnDestroy
         @Inject(DOCUMENT) private document: any
     )
     {
-        this.onSettingsChanged =
-            this.fuseConfig.onSettingsChanged
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
                 .subscribe(
                     (newSettings) => {
                         this.fuseSettings = newSettings;
@@ -39,13 +40,9 @@ export class FuseMainComponent implements OnInit, OnDestroy
         }
     }
 
-    ngOnInit()
-    {
-    }
-
     ngOnDestroy()
     {
-        this.onSettingsChanged.unsubscribe();
+        this.onConfigChanged.unsubscribe();
     }
 
     addClass(className: string)
diff --git a/src/app/main/main.module.ts b/src/app/main/main.module.ts
index 3c73543d..14d25778 100644
--- a/src/app/main/main.module.ts
+++ b/src/app/main/main.module.ts
@@ -1,36 +1,35 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '../core/modules/shared.module';
+import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseNavigationModule } from '@fuse/components/navigation/navigation.module';
+import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
+import { FuseShortcutsModule } from '@fuse/components/shortcuts/shortcuts.module';
+import { FuseSearchBarModule } from '@fuse/components/search-bar/search-bar.module';
 
 import { FuseMainComponent } from './main.component';
 import { FuseContentComponent } from './content/content.component';
 import { FuseFooterComponent } from './footer/footer.component';
-import { FuseNavbarVerticalComponent } from './navbar/vertical/navbar-vertical.component';
+import { FuseNavbarComponent } from './navbar/navbar.component';
 import { FuseToolbarComponent } from './toolbar/toolbar.component';
-import { FuseNavigationModule } from '../core/components/navigation/navigation.module';
-import { FuseNavbarVerticalToggleDirective } from './navbar/vertical/navbar-vertical-toggle.directive';
-import { FuseNavbarHorizontalComponent } from './navbar/horizontal/navbar-horizontal.component';
 import { FuseQuickPanelComponent } from './quick-panel/quick-panel.component';
-import { FuseThemeOptionsComponent } from '../core/components/theme-options/theme-options.component';
-import { FuseShortcutsModule } from '../core/components/shortcuts/shortcuts.module';
-import { FuseSearchBarModule } from '../core/components/search-bar/search-bar.module';
+
+import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
 
 @NgModule({
     declarations: [
         FuseContentComponent,
         FuseFooterComponent,
         FuseMainComponent,
-        FuseNavbarVerticalComponent,
-        FuseNavbarHorizontalComponent,
+        FuseNavbarComponent,
         FuseToolbarComponent,
-        FuseNavbarVerticalToggleDirective,
         FuseThemeOptionsComponent,
         FuseQuickPanelComponent
     ],
     imports     : [
         SharedModule,
         RouterModule,
+        FuseSidebarModule,
         FuseNavigationModule,
         FuseShortcutsModule,
         FuseSearchBarModule
diff --git a/src/app/main/navbar/horizontal/navbar-horizontal.component.html b/src/app/main/navbar/horizontal/navbar-horizontal.component.html
deleted file mode 100644
index 82075715..00000000
--- a/src/app/main/navbar/horizontal/navbar-horizontal.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<fuse-navigation layout="horizontal"></fuse-navigation>
diff --git a/src/app/main/navbar/horizontal/navbar-horizontal.component.scss b/src/app/main/navbar/horizontal/navbar-horizontal.component.scss
deleted file mode 100644
index 8b137891..00000000
--- a/src/app/main/navbar/horizontal/navbar-horizontal.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/app/main/navbar/horizontal/navbar-horizontal.component.ts b/src/app/main/navbar/horizontal/navbar-horizontal.component.ts
deleted file mode 100644
index 40cac7dd..00000000
--- a/src/app/main/navbar/horizontal/navbar-horizontal.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { FuseMainComponent } from '../../main.component';
-
-@Component({
-    selector     : 'fuse-navbar-horizontal',
-    templateUrl  : './navbar-horizontal.component.html',
-    styleUrls    : ['./navbar-horizontal.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class FuseNavbarHorizontalComponent implements OnInit, OnDestroy
-{
-    constructor(private fuseMainComponent: FuseMainComponent)
-    {
-    }
-
-    ngOnInit()
-    {
-        this.fuseMainComponent.addClass('fuse-nav-bar-horizontal');
-    }
-
-    ngOnDestroy()
-    {
-        this.fuseMainComponent.removeClass('fuse-nav-bar-horizontal');
-    }
-}
diff --git a/src/app/main/navbar/navbar.component.html b/src/app/main/navbar/navbar.component.html
new file mode 100644
index 00000000..e1f91b94
--- /dev/null
+++ b/src/app/main/navbar/navbar.component.html
@@ -0,0 +1,40 @@
+<ng-container *ngIf="layout == 'vertical'">
+
+    <div class="navbar-vertical">
+
+        <div class="navbar-header">
+
+            <div class="logo">
+                <img class="logo-icon" src="assets/images/logos/fuse.svg">
+                <span class="logo-text">FUSE</span>
+            </div>
+
+            <button mat-button class="toggle-button-navbar mat-icon-button"
+                    (click)="toggleSidebarFolded('navbar')"
+                    fxHide.lt-lg>
+                <mat-icon>menu</mat-icon>
+            </button>
+
+            <button mat-button class="toggle-button-navbar mat-icon-button"
+                    (click)="toggleSidebarOpened('navbar')"
+                    fxHide.gt-md>
+                <mat-icon>arrow_back</mat-icon>
+            </button>
+
+        </div>
+
+        <div class="navbar-content" fusePerfectScrollbar>
+            <fuse-navigation layout="vertical"></fuse-navigation>
+        </div>
+
+    </div>
+
+</ng-container>
+
+<ng-container *ngIf="layout == 'horizontal'">
+
+    <div class="navbar-horizontal">
+        <fuse-navigation layout="horizontal"></fuse-navigation>
+    </div>
+
+</ng-container>
\ No newline at end of file
diff --git a/src/app/main/navbar/navbar.component.scss b/src/app/main/navbar/navbar.component.scss
new file mode 100644
index 00000000..0c1880d9
--- /dev/null
+++ b/src/app/main/navbar/navbar.component.scss
@@ -0,0 +1,93 @@
+@import "src/@fuse/scss/fuse";
+
+body {
+
+    &.fuse-sidebar-folded {
+
+        .content-wrapper {
+
+            &:last-child {
+                padding-left: 64px !important;
+            }
+
+            &:first-child {
+                padding-right: 64px !important;
+            }
+
+            &:first-child:last-child {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+            }
+
+        }
+    }
+}
+
+fuse-sidebar {
+
+    &.folded:not(.unfolded) {
+
+        .navbar-vertical {
+
+            .navbar-header {
+                padding: 0 13px;
+
+                .logo {
+
+                    .logo-text {
+                        opacity: 0;
+                        transition: opacity 200ms ease;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.navbar-vertical {
+
+    .navbar-header {
+        padding: 0 16px 0 24px;
+        display: flex;
+        align-items: center;
+        height: 64px;
+        min-height: 64px;
+        justify-content: space-between;
+        transition: padding 200ms ease;
+        background-color: rgba(255, 255, 255, .05);
+        @include mat-elevation(1);
+
+        .logo {
+            display: flex;
+            align-items: center;
+
+            .logo-icon {
+                width: 38px;
+                height: 38px;
+            }
+
+            .logo-text {
+                margin-left: 8px;
+                font-size: 20px;
+                font-weight: 300;
+                letter-spacing: 0.4px;
+            }
+        }
+    }
+
+    .navbar-content {
+        flex: 1;
+    }
+}
+
+.top-navbar + #wrapper {
+
+    & > .left-navbar {
+        display: none !important;
+
+        @include media-breakpoint-down(md) {
+            display: flex !important;
+        }
+    }
+}
+
diff --git a/src/app/main/navbar/navbar.component.ts b/src/app/main/navbar/navbar.component.ts
new file mode 100644
index 00000000..a6afd61f
--- /dev/null
+++ b/src/app/main/navbar/navbar.component.ts
@@ -0,0 +1,30 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector     : 'fuse-navbar',
+    templateUrl  : './navbar.component.html',
+    styleUrls    : ['./navbar.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseNavbarComponent
+{
+    @Input() layout;
+
+    constructor(private sidebarService: FuseSidebarService)
+    {
+        // Default layout
+        this.layout = 'vertical';
+    }
+
+    toggleSidebarOpened(key)
+    {
+        this.sidebarService.getSidebar(key).toggleOpen();
+    }
+
+    toggleSidebarFolded(key)
+    {
+        this.sidebarService.getSidebar(key).toggleFold();
+    }
+}
diff --git a/src/app/main/navbar/vertical/navbar-vertical-toggle.directive.ts b/src/app/main/navbar/vertical/navbar-vertical-toggle.directive.ts
deleted file mode 100644
index 9fd92e20..00000000
--- a/src/app/main/navbar/vertical/navbar-vertical-toggle.directive.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Directive, HostListener, Input } from '@angular/core';
-import { FuseNavbarVerticalService } from './navbar-vertical.service';
-import { FuseNavbarVerticalComponent } from './navbar-vertical.component';
-
-@Directive({
-    selector: '[fuseNavbarVertical]'
-})
-export class FuseNavbarVerticalToggleDirective
-{
-    @Input() fuseNavbarVertical: string;
-    navbar: FuseNavbarVerticalComponent;
-
-    constructor(private navbarService: FuseNavbarVerticalService)
-    {
-    }
-
-    @HostListener('click')
-    onClick()
-    {
-        this.navbar = this.navbarService.getNavBar();
-
-        if ( !this.navbar[this.fuseNavbarVertical] )
-        {
-            return;
-        }
-
-        this.navbar[this.fuseNavbarVertical]();
-    }
-}
diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.html b/src/app/main/navbar/vertical/navbar-vertical.component.html
deleted file mode 100644
index fe98e297..00000000
--- a/src/app/main/navbar/vertical/navbar-vertical.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="navbar-header">
-
-    <div class="logo">
-        <img class="logo-icon" src="assets/images/logos/fuse.svg">
-        <span class="logo-text">FUSE</span>
-    </div>
-
-    <button mat-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="toggleFold" fxHide.lt-lg>
-        <mat-icon>menu</mat-icon>
-    </button>
-
-    <button mat-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="closeBar" fxHide.gt-md>
-        <mat-icon>arrow_back</mat-icon>
-    </button>
-
-</div>
-
-<div class="navbar-content" fusePerfectScrollbar>
-    <fuse-navigation layout="vertical"></fuse-navigation>
-</div>
diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.scss b/src/app/main/navbar/vertical/navbar-vertical.component.scss
deleted file mode 100644
index 29e359c5..00000000
--- a/src/app/main/navbar/vertical/navbar-vertical.component.scss
+++ /dev/null
@@ -1,159 +0,0 @@
-@import "../../../core/scss/fuse";
-
-fuse-main {
-
-    &.fuse-nav-bar-folded:not(.fuse-nav-bar-horizontal) {
-
-        .content-wrapper {
-
-            &:last-child {
-                padding-left: 64px !important;
-            }
-
-            &:first-child {
-                padding-right: 64px !important;
-            }
-
-            &:first-child:last-child {
-                padding-left: 0 !important;
-                padding-right: 0 !important;
-            }
-
-        }
-    }
-}
-
-fuse-navbar-vertical {
-    display: flex;
-    flex-direction: column;
-    width: 256px;
-    min-width: 256px;
-    max-width: 256px;
-    background-color: #FFFFFF;
-    overflow-y: auto;
-    overflow-x: hidden;
-    z-index: 4;
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
-    transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
-    transform: translateX(0);
-
-    &.folded {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-
-        &.left-navbar {
-            left: 0;
-        }
-
-        &.right-navbar {
-            right: 0;
-        }
-
-        &:not(.folded-open) {
-            width: 64px;
-            min-width: 64px;
-            max-width: 64px;
-
-            .navbar-header {
-                padding: 0 13px;
-
-                .logo {
-
-                    .logo-text {
-                        opacity: 0;
-                        transition: opacity 200ms ease;
-                    }
-                }
-            }
-        }
-    }
-
-    &.close {
-        box-shadow: none;
-
-        &.left-navbar {
-            transform: translateX(-100%) !important;
-        }
-
-        &.right-navbar {
-            transform: translateX(100%) !important;
-        }
-    }
-
-    @include media-breakpoint('lt-lg') {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-
-        &.left-navbar {
-            left: 0;
-        }
-
-        &.right-navbar {
-            right: 0;
-        }
-
-        &:not(.initialized) {
-
-            &.left-navbar {
-                transform: translateX(-100%);
-            }
-
-            &.right-navbar {
-                transform: translateX(100%);
-            }
-        }
-    }
-
-    .navbar-header {
-        padding: 0 16px 0 24px;
-        display: flex;
-        align-items: center;
-        height: 64px;
-        min-height: 64px;
-        justify-content: space-between;
-        transition: padding 200ms ease;
-        background-color: rgba(255, 255, 255, .05);
-        @include mat-elevation(1);
-
-        .logo {
-            display: flex;
-            align-items: center;
-
-            .logo-icon {
-                width: 38px;
-                height: 38px;
-            }
-
-            .logo-text {
-                margin-left: 8px;
-                font-size: 20px;
-                font-weight: 300;
-                letter-spacing: 0.4px;
-            }
-        }
-    }
-
-    .navbar-content {
-        flex: 1;
-    }
-}
-
-fuse-navbar-horizontal + #wrapper > fuse-navbar-vertical {
-    display: none;
-    @include media-breakpoint-down(md) {
-        display: flex;
-    }
-}
-
-.fuse-navbar-backdrop {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 3;
-    background-color: rgba(0, 0, 0, 0.6);
-    opacity: 0;
-}
\ No newline at end of file
diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.ts b/src/app/main/navbar/vertical/navbar-vertical.component.ts
deleted file mode 100644
index 5c8eede4..00000000
--- a/src/app/main/navbar/vertical/navbar-vertical.component.ts
+++ /dev/null
@@ -1,279 +0,0 @@
-import { Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
-import { FuseMatchMedia } from '../../../core/services/match-media.service';
-import { FuseNavbarVerticalService } from './navbar-vertical.service';
-import { ObservableMedia } from '@angular/flex-layout';
-import { FuseMainComponent } from '../../main.component';
-import { NavigationEnd, Router } from '@angular/router';
-import { FuseNavigationService } from '../../../core/components/navigation/navigation.service';
-import { FusePerfectScrollbarDirective } from '../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
-import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-
-@Component({
-    selector     : 'fuse-navbar-vertical',
-    templateUrl  : './navbar-vertical.component.html',
-    styleUrls    : ['./navbar-vertical.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
-{
-    private _backdropElement: HTMLElement | null = null;
-    private _folded = false;
-
-    @HostBinding('class.close') isClosed: boolean;
-    @HostBinding('class.folded') isFoldedActive: boolean;
-    @HostBinding('class.folded-open') isFoldedOpen: boolean;
-    @HostBinding('class.initialized') initialized: boolean;
-    @ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
-
-    @Input()
-    set folded(value: boolean)
-    {
-        this._folded = value;
-
-        if ( this._folded )
-        {
-            this.activateFolded();
-        }
-        else
-        {
-            this.deActivateFolded();
-        }
-    }
-
-    get folded(): boolean
-    {
-        return this._folded;
-    }
-
-    matchMediaWatcher: Subscription;
-    navigationServiceWatcher: Subscription;
-    fusePerfectScrollbarUpdateTimeout;
-
-    player: AnimationPlayer;
-
-    constructor(
-        private fuseMainComponent: FuseMainComponent,
-        private fuseMatchMedia: FuseMatchMedia,
-        private fuseNavigationService: FuseNavigationService,
-        private navBarService: FuseNavbarVerticalService,
-        private router: Router,
-        private _renderer: Renderer2,
-        private _elementRef: ElementRef,
-        private animationBuilder: AnimationBuilder,
-        public media: ObservableMedia
-    )
-    {
-        navBarService.setNavBar(this);
-
-        this.navigationServiceWatcher =
-            this.fuseNavigationService.onNavCollapseToggle.subscribe(() => {
-                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
-                    this.fusePerfectScrollbarDirective.update();
-                }, 310);
-            });
-
-        this.matchMediaWatcher =
-            this.fuseMatchMedia.onMediaChange
-                .subscribe((mediaStep) => {
-                    setTimeout(() => {
-
-                        if ( this.media.isActive('lt-lg') )
-                        {
-                            this.closeBar();
-                            this.deActivateFolded();
-                        }
-                        else
-                        {
-                            this.openBar();
-                            this._detachBackdrop();
-                        }
-                    });
-                });
-
-        router.events.subscribe(
-            (event) => {
-                if ( event instanceof NavigationEnd )
-                {
-                    if ( this.media.isActive('lt-lg') )
-                    {
-                        setTimeout(() => {
-                            this.closeBar();
-                        });
-                    }
-                }
-            }
-        );
-    }
-
-    ngOnInit()
-    {
-        this.isClosed = false;
-        this.isFoldedActive = this._folded;
-        this.isFoldedOpen = false;
-        this.initialized = false;
-        this.updateCssClasses();
-
-        setTimeout(() => {
-            this.initialized = true;
-        });
-
-        if ( this.media.isActive('lt-lg') )
-        {
-            this.closeBar();
-            this.deActivateFolded();
-        }
-        else
-        {
-            if ( !this._folded )
-            {
-                this.deActivateFolded();
-            }
-            else
-            {
-                this.activateFolded();
-            }
-        }
-    }
-
-    ngOnDestroy()
-    {
-        clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
-        this.matchMediaWatcher.unsubscribe();
-        this.navigationServiceWatcher.unsubscribe();
-    }
-
-    openBar()
-    {
-        if ( !this.isClosed )
-        {
-            return;
-        }
-
-        this.isClosed = false;
-        this.updateCssClasses();
-        if ( this.media.isActive('lt-lg') )
-        {
-            this._attachBackdrop();
-        }
-    }
-
-    closeBar()
-    {
-        if ( this.isClosed )
-        {
-            return;
-        }
-
-        this.isClosed = true;
-        this.updateCssClasses();
-        this._detachBackdrop();
-    }
-
-    toggleBar()
-    {
-        if ( this.isClosed )
-        {
-            this.openBar();
-        }
-        else
-        {
-            this.closeBar();
-        }
-    }
-
-    toggleFold()
-    {
-        if ( !this.isFoldedActive )
-        {
-            this.activateFolded();
-        }
-        else
-        {
-            this.deActivateFolded();
-        }
-    }
-
-    activateFolded()
-    {
-        this.isFoldedActive = true;
-        this.fuseMainComponent.addClass('fuse-nav-bar-folded');
-        this.isFoldedOpen = false;
-    }
-
-    deActivateFolded()
-    {
-        this.isFoldedActive = false;
-        this.fuseMainComponent.removeClass('fuse-nav-bar-folded');
-        this.isFoldedOpen = false;
-    }
-
-    @HostListener('mouseenter')
-    onMouseEnter()
-    {
-        this.isFoldedOpen = true;
-    }
-
-    @HostListener('mouseleave')
-    onMouseLeave()
-    {
-        this.isFoldedOpen = false;
-    }
-
-    updateCssClasses()
-    {
-        if ( !this.isClosed )
-        {
-            this.fuseMainComponent.addClass('fuse-navbar-opened');
-            this.fuseMainComponent.removeClass('fuse-navbar-closed');
-        }
-        else
-        {
-            this.fuseMainComponent.addClass('fuse-navbar-closed');
-            this.fuseMainComponent.removeClass('fuse-navbar-opened');
-        }
-    }
-
-    private _attachBackdrop()
-    {
-        this._backdropElement = this._renderer.createElement('div');
-        this._backdropElement.classList.add('fuse-navbar-backdrop');
-
-        this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdropElement);
-
-        this.player =
-            this.animationBuilder
-                .build([
-                    animate('400ms ease', style({opacity: 1}))
-                ]).create(this._backdropElement);
-
-        this.player.play();
-
-        this._backdropElement.addEventListener('click', () => {
-                this.closeBar();
-            }
-        );
-    }
-
-    private _detachBackdrop()
-    {
-        if ( this._backdropElement )
-        {
-            this.player =
-                this.animationBuilder
-                    .build([
-                        animate('400ms cubic-bezier(.25,.8,.25,1)', style({opacity: 0}))
-                    ]).create(this._backdropElement);
-
-            this.player.play();
-
-            this.player.onDone(() => {
-                if ( this._backdropElement )
-                {
-                    this._backdropElement.parentNode.removeChild(this._backdropElement);
-                    this._backdropElement = null;
-                }
-            });
-        }
-    }
-}
diff --git a/src/app/main/navbar/vertical/navbar-vertical.service.ts b/src/app/main/navbar/vertical/navbar-vertical.service.ts
deleted file mode 100644
index 6cf17124..00000000
--- a/src/app/main/navbar/vertical/navbar-vertical.service.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class FuseNavbarVerticalService
-{
-    navBarRef;
-
-    constructor()
-    {
-    }
-
-    setNavBar(ref)
-    {
-        this.navBarRef = ref;
-    }
-
-    getNavBar()
-    {
-        return this.navBarRef;
-    }
-}
diff --git a/src/app/main/quick-panel/quick-panel.component.ts b/src/app/main/quick-panel/quick-panel.component.ts
index bd78cd3b..6163e058 100644
--- a/src/app/main/quick-panel/quick-panel.component.ts
+++ b/src/app/main/quick-panel/quick-panel.component.ts
@@ -22,7 +22,6 @@ export class FuseQuickPanelComponent implements OnInit
             cloud : false,
             retro : true
         };
-
     }
 
     ngOnInit()
diff --git a/src/app/main/toolbar/toolbar.component.html b/src/app/main/toolbar/toolbar.component.html
index 770b245f..07fe27c5 100644
--- a/src/app/main/toolbar/toolbar.component.html
+++ b/src/app/main/toolbar/toolbar.component.html
@@ -7,7 +7,8 @@
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
 
             <button mat-button class="toggle-button-navbar mat-icon-button"
-                    fuseNavbarVertical="toggleBar" fxHide.gt-md>
+                    *ngIf="!noNav"
+                    (click)="toggleSidebarOpened('navbar')" fxHide.gt-md>
                 <mat-icon>menu</mat-icon>
             </button>
 
diff --git a/src/app/main/toolbar/toolbar.component.scss b/src/app/main/toolbar/toolbar.component.scss
index 6176d063..f1bd3177 100644
--- a/src/app/main/toolbar/toolbar.component.scss
+++ b/src/app/main/toolbar/toolbar.component.scss
@@ -1,4 +1,4 @@
-@import 'src/app/core/scss/fuse';
+@import 'src/@fuse/scss/fuse';
 
 :host {
     position: relative;
diff --git a/src/app/main/toolbar/toolbar.component.ts b/src/app/main/toolbar/toolbar.component.ts
index 11727cc9..2e26b03e 100644
--- a/src/app/main/toolbar/toolbar.component.ts
+++ b/src/app/main/toolbar/toolbar.component.ts
@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
 import { NavigationEnd, NavigationStart, Router } from '@angular/router';
-import { FuseConfigService } from '../../core/services/config.service';
 import { TranslateService } from '@ngx-translate/core';
 
+import { FuseConfigService } from '@fuse/services/config.service';
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
 @Component({
     selector   : 'fuse-toolbar',
     templateUrl: './toolbar.component.html',
@@ -16,10 +18,12 @@ export class FuseToolbarComponent
     selectedLanguage: any;
     showLoadingBar: boolean;
     horizontalNav: boolean;
+    noNav: boolean;
 
     constructor(
         private router: Router,
         private fuseConfig: FuseConfigService,
+        private sidebarService: FuseSidebarService,
         private translate: TranslateService
     )
     {
@@ -78,12 +82,18 @@ export class FuseToolbarComponent
                 }
             });
 
-        this.fuseConfig.onSettingsChanged.subscribe((settings) => {
+        this.fuseConfig.onConfigChanged.subscribe((settings) => {
             this.horizontalNav = settings.layout.navigation === 'top';
+            this.noNav = settings.layout.navigation === 'none';
         });
 
     }
 
+    toggleSidebarOpened(key)
+    {
+        this.sidebarService.getSidebar(key).toggleOpen();
+    }
+
     search(value)
     {
         // Do your search here...
diff --git a/src/app/navigation/navigation.model.ts b/src/app/navigation/navigation.model.ts
index 0ab3b6a4..6e475b00 100644
--- a/src/app/navigation/navigation.model.ts
+++ b/src/app/navigation/navigation.model.ts
@@ -1,4 +1,4 @@
-import { FuseNavigationModelInterface } from '../core/components/navigation/navigation.model';
+import { FuseNavigationModelInterface } from '@fuse/components/navigation/navigation.model';
 
 export class FuseNavigationModel implements FuseNavigationModelInterface
 {
@@ -911,4 +911,3 @@ export class FuseNavigationModel implements FuseNavigationModelInterface
         ];
     }
 }
-
diff --git a/src/styles.scss b/src/styles.scss
index 5bc10165..d71a4d52 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,2 +1,2 @@
 // Import Fuse main library
-@import "app/core/scss/core";
\ No newline at end of file
+@import "@fuse/scss/core";
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index d08dfe1b..293548e0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,25 +1,31 @@
 {
-  "compileOnSave": false,
-  "compilerOptions": {
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "target": "es5",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2017",
-      "dom"
-    ]
-  },
-  "angularCompilerOptions": {
-    "genDir": "release/",
-    "strictMetadataEmit": true,
-    "skipTemplateCodegen": true,
-    "annotationsAs": "decorators"
-  }
+    "compileOnSave": false,
+    "compilerOptions": {
+        "baseUrl": "./src",
+        "outDir": "./dist/out-tsc",
+        "sourceMap": true,
+        "declaration": false,
+        "moduleResolution": "node",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "target": "es5",
+        "paths": {
+            "@fuse": [
+                "@fuse/"
+            ]
+        },
+        "typeRoots": [
+            "node_modules/@types"
+        ],
+        "lib": [
+            "es2017",
+            "dom"
+        ]
+    },
+    "angularCompilerOptions": {
+        "genDir": "release/",
+        "strictMetadataEmit": true,
+        "skipTemplateCodegen": true,
+        "annotationsAs": "decorators"
+    }
 }