diff --git a/package-lock.json b/package-lock.json
index 87abc48f..f585bff6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@angular/animations": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.2.6.tgz",
-      "integrity": "sha1-nZyAoRmwwDaTy9I7uvcosVMf/8c=",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.3.0.tgz",
+      "integrity": "sha1-VvNLhGSTeSAqw1mSm4LrC5FenHI=",
       "requires": {
         "tslib": "1.7.1"
       }
@@ -21,13 +21,13 @@
       }
     },
     "@angular/cli": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.2.0.tgz",
-      "integrity": "sha1-39i4mD7DfCttf5AurWA5bXtXFZc=",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.2.1.tgz",
+      "integrity": "sha512-Y3AqcyvWcy9c4KuQAKHzXp2oO51bNY3o/90wfpcwct3Bt4znDMXuoQdgf+VhffcbIgc/b2yyPlOatXLRJ7531A==",
       "dev": true,
       "requires": {
         "@ngtools/json-schema": "1.1.0",
-        "@ngtools/webpack": "1.5.0",
+        "@ngtools/webpack": "1.5.1",
         "autoprefixer": "6.7.7",
         "chalk": "1.1.3",
         "common-tags": "1.4.0",
@@ -85,43 +85,263 @@
         "webpack-dev-middleware": "1.11.0",
         "webpack-dev-server": "2.4.5",
         "webpack-merge": "2.6.1",
-        "zone.js": "0.8.12"
+        "zone.js": "0.8.13"
+      },
+      "dependencies": {
+        "@ngtools/webpack": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-1.5.1.tgz",
+          "integrity": "sha512-zGe9JQ3nTpKd2EnYKvC4+zrf/aOLUr2ZhLmSv8bAWMPu59v7fqo3oFs4n3JAbu8albQJmiktGVeY7Y2fFEsS7A==",
+          "dev": true,
+          "requires": {
+            "enhanced-resolve": "3.3.0",
+            "loader-utils": "1.1.0",
+            "magic-string": "0.19.1",
+            "source-map": "0.5.6"
+          }
+        },
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+          "dev": true
+        },
+        "clone": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.1.tgz",
+          "integrity": "sha1-0hfR6WERjjrJpLi7oyhVU79kfNs=",
+          "dev": true
+        },
+        "extract-text-webpack-plugin": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.1.2.tgz",
+          "integrity": "sha1-dW7076gVXDaBgz+8NNpTuUF0bWw=",
+          "dev": true,
+          "requires": {
+            "async": "2.5.0",
+            "loader-utils": "1.1.0",
+            "schema-utils": "0.3.0",
+            "webpack-sources": "1.0.1"
+          }
+        },
+        "html-webpack-plugin": {
+          "version": "2.29.0",
+          "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz",
+          "integrity": "sha1-6Yf0IYU9O2k4yMTIFxhC5f0XryM=",
+          "dev": true,
+          "requires": {
+            "bluebird": "3.5.0",
+            "html-minifier": "3.5.2",
+            "loader-utils": "0.2.17",
+            "lodash": "4.17.4",
+            "pretty-error": "2.1.1",
+            "toposort": "1.0.3"
+          },
+          "dependencies": {
+            "loader-utils": {
+              "version": "0.2.17",
+              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+              "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+              "dev": true,
+              "requires": {
+                "big.js": "3.1.3",
+                "emojis-list": "2.1.0",
+                "json5": "0.5.1",
+                "object-assign": "4.1.1"
+              }
+            }
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "less-loader": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.0.5.tgz",
+          "integrity": "sha1-rhVadAbKxqzSk9eFWH/P8PR4xN0=",
+          "dev": true,
+          "requires": {
+            "clone": "2.1.1",
+            "loader-utils": "1.1.0",
+            "pify": "2.3.0"
+          }
+        },
+        "sass-loader": {
+          "version": "6.0.6",
+          "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-6.0.6.tgz",
+          "integrity": "sha512-c3/Zc+iW+qqDip6kXPYLEgsAu2lf4xz0EZDplB7EmSUMda12U1sGJPetH55B/j9eu0bTtKzKlNPWWyYC7wFNyQ==",
+          "dev": true,
+          "requires": {
+            "async": "2.5.0",
+            "clone-deep": "0.3.0",
+            "loader-utils": "1.1.0",
+            "lodash.tail": "4.1.1",
+            "pify": "3.0.0"
+          },
+          "dependencies": {
+            "pify": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+              "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+              "dev": true
+            }
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "stylus-loader": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-3.0.1.tgz",
+          "integrity": "sha1-d/SzT9Aw0lsmF7z1UT21sHMMQIk=",
+          "dev": true,
+          "requires": {
+            "loader-utils": "1.1.0",
+            "lodash.clonedeep": "4.5.0",
+            "when": "3.6.4"
+          }
+        },
+        "url-loader": {
+          "version": "0.5.9",
+          "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-0.5.9.tgz",
+          "integrity": "sha512-B7QYFyvv+fOBqBVeefsxv6koWWtjmHaMFT6KZWti4KRw8YUD/hOU+3AECvXuzyVawIBx3z7zQRejXCDSO5kk1Q==",
+          "dev": true,
+          "requires": {
+            "loader-utils": "1.1.0",
+            "mime": "1.3.6"
+          }
+        },
+        "webpack-dev-middleware": {
+          "version": "1.11.0",
+          "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-1.11.0.tgz",
+          "integrity": "sha1-CWkdCXOjCtH4Ksc6EuIIfwpHVPk=",
+          "dev": true,
+          "requires": {
+            "memory-fs": "0.4.1",
+            "mime": "1.3.6",
+            "path-is-absolute": "1.0.1",
+            "range-parser": "1.2.0"
+          }
+        },
+        "webpack-dev-server": {
+          "version": "2.4.5",
+          "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-2.4.5.tgz",
+          "integrity": "sha1-MThM6BE2vhCAtLTN4OubkOVO5s8=",
+          "dev": true,
+          "requires": {
+            "ansi-html": "0.0.7",
+            "chokidar": "1.7.0",
+            "compression": "1.7.0",
+            "connect-history-api-fallback": "1.3.0",
+            "express": "4.15.3",
+            "html-entities": "1.2.1",
+            "http-proxy-middleware": "0.17.4",
+            "opn": "4.0.2",
+            "portfinder": "1.0.13",
+            "serve-index": "1.9.0",
+            "sockjs": "0.3.18",
+            "sockjs-client": "1.1.2",
+            "spdy": "3.4.7",
+            "strip-ansi": "3.0.1",
+            "supports-color": "3.2.3",
+            "webpack-dev-middleware": "1.11.0",
+            "yargs": "6.6.0"
+          }
+        },
+        "yargs": {
+          "version": "6.6.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-6.6.0.tgz",
+          "integrity": "sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=",
+          "dev": true,
+          "requires": {
+            "camelcase": "3.0.0",
+            "cliui": "3.2.0",
+            "decamelize": "1.2.0",
+            "get-caller-file": "1.0.2",
+            "os-locale": "1.4.0",
+            "read-pkg-up": "1.0.1",
+            "require-directory": "2.1.1",
+            "require-main-filename": "1.0.1",
+            "set-blocking": "2.0.0",
+            "string-width": "1.0.2",
+            "which-module": "1.0.0",
+            "y18n": "3.2.1",
+            "yargs-parser": "4.2.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz",
+          "integrity": "sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=",
+          "dev": true,
+          "requires": {
+            "camelcase": "3.0.0"
+          }
+        }
       }
     },
     "@angular/common": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.2.6.tgz",
-      "integrity": "sha1-IQrOS9JON1+LQbpS/rNLGKiH1do=",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.3.0.tgz",
+      "integrity": "sha1-E6VKaSndUvlymxauRG+tWP4WMFM=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/compiler": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.2.6.tgz",
-      "integrity": "sha1-ZndW1JXKDUXSBhJooQ1Sr4Ofr/Q=",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.3.0.tgz",
+      "integrity": "sha1-VVA78nofBi9xuUlTk/MxGQOo/EM=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/compiler-cli": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.2.6.tgz",
-      "integrity": "sha1-iiE1Ipnz69Hj8XWBBUFkVmyjBr4=",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.3.0.tgz",
+      "integrity": "sha1-83WAlzD16IPP4hGumRIQ8csanx4=",
       "dev": true,
       "requires": {
-        "@angular/tsc-wrapped": "4.2.6",
+        "@angular/tsc-wrapped": "4.3.0",
         "minimist": "1.2.0",
         "reflect-metadata": "0.1.10"
       },
       "dependencies": {
         "@angular/tsc-wrapped": {
-          "version": "4.2.6",
-          "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.2.6.tgz",
-          "integrity": "sha1-YORLWzjzNA7hTFSlinoHEzxk6Jg=",
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.3.0.tgz",
+          "integrity": "sha1-/i5TdrbirRsTnt3iOp27QpnfYmQ=",
           "dev": true,
           "requires": {
             "tsickle": "0.21.6"
+          },
+          "dependencies": {
+            "tsickle": {
+              "version": "0.21.6",
+              "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.21.6.tgz",
+              "integrity": "sha1-U7Abl5xcE/2xOvs/uVgXflmRWI0=",
+              "dev": true,
+              "requires": {
+                "minimist": "1.2.0",
+                "mkdirp": "0.5.1",
+                "source-map": "0.5.6",
+                "source-map-support": "0.4.15"
+              }
+            }
           }
         },
         "minimist": {
@@ -133,9 +353,9 @@
       }
     },
     "@angular/core": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.2.6.tgz",
-      "integrity": "sha1-DByP8BV/B29KfAtyHKFCPxu+Fk4=",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.3.0.tgz",
+      "integrity": "sha1-vSJJw94SJKfGU2xKunKNZWUykzQ=",
       "requires": {
         "tslib": "1.7.1"
       }
@@ -146,25 +366,25 @@
       "integrity": "sha1-lvp/hbLEus8nhJE6LWB+LtI9x/E="
     },
     "@angular/forms": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.2.6.tgz",
-      "integrity": "sha1-nTI5lgjkYDu/GXQXqluU6ApGfrA=",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.3.0.tgz",
+      "integrity": "sha1-fQx6hUc36aMKX9lmX41PVqG5G9g=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/http": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.2.6.tgz",
-      "integrity": "sha1-SZ4roLvB89cbdt6+wDTJWMrxE04=",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.3.0.tgz",
+      "integrity": "sha1-37czEKhApq2AUKxR8OVcSYTbCSY=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/language-service": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.2.6.tgz",
-      "integrity": "sha1-EWCs7OwyQ2OWPtIm1RM0ivow/K0=",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.3.0.tgz",
+      "integrity": "sha1-7OpfKBI3PEyE4hmfyl7Y9ngeoNY=",
       "dev": true
     },
     "@angular/material": {
@@ -176,25 +396,25 @@
       }
     },
     "@angular/platform-browser": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.2.6.tgz",
-      "integrity": "sha1-oTH/WSIl/mSWvKLJr/YSpNvd9Dc=",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.3.0.tgz",
+      "integrity": "sha1-AjiUiRhRhcO+zwY1k0YQDlR5x+E=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/platform-browser-dynamic": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.2.6.tgz",
-      "integrity": "sha1-TmyK0s1c/BeIBBf3fyo0E895HCY=",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.0.tgz",
+      "integrity": "sha1-VR+xiFGyfujz5LDuJarRC9ezEuM=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/router": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.2.6.tgz",
-      "integrity": "sha1-ppGdm2HEX/wV++5ZM5jj/VMtq0Y=",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.3.0.tgz",
+      "integrity": "sha1-cbQo8YXrkWGh3hTcGUkhndzf/a4=",
       "requires": {
         "tslib": "1.7.1"
       }
@@ -205,18 +425,6 @@
       "integrity": "sha1-w6DFRNYjkqzCgTpCyKDcb1j4aSI=",
       "dev": true
     },
-    "@ngtools/webpack": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-1.5.0.tgz",
-      "integrity": "sha1-tr5Y2FfUH4mZdR1rvD0h6EvJd8o=",
-      "dev": true,
-      "requires": {
-        "enhanced-resolve": "3.3.0",
-        "loader-utils": "1.1.0",
-        "magic-string": "0.19.1",
-        "source-map": "0.5.6"
-      }
-    },
     "@types/jasmine": {
       "version": "2.5.53",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.53.tgz",
@@ -233,9 +441,9 @@
       }
     },
     "@types/node": {
-      "version": "6.0.80",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.80.tgz",
-      "integrity": "sha512-FJedmtuVj9Jb2AbI3cKYlAczj+3Lv3I8g2wjricLSRBCW0Oj7kzG4D6gUmgDc2Ptm0A1lat2AuheqK5kdYfswg==",
+      "version": "6.0.83",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.83.tgz",
+      "integrity": "sha512-Q92+tkWnX7nmT0ZG+/wFxzJr+idr00T12MgsY3p0sZIu8nfvYF8i5pbY3BVZw6ad6yS2MLF71sfMr+ySatc2Gw==",
       "dev": true
     },
     "@types/q": {
@@ -331,12 +539,6 @@
         "json-stable-stringify": "1.0.1"
       }
     },
-    "ajv-keywords": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-1.5.1.tgz",
-      "integrity": "sha1-MU3QpLM2j609/NxU7eYXG4htrzw=",
-      "dev": true
-    },
     "align-text": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
@@ -360,6 +562,11 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angularfire2": {
+      "version": "4.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/angularfire2/-/angularfire2-4.0.0-rc.1.tgz",
+      "integrity": "sha1-1zAUrFQxwEWO6VMhT3mVOgZSjD8="
+    },
     "ansi-escapes": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-2.0.0.tgz",
@@ -573,7 +780,7 @@
       "dev": true,
       "requires": {
         "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000700",
+        "caniuse-db": "1.0.30000701",
         "normalize-range": "0.1.2",
         "num2fraction": "1.2.2",
         "postcss": "5.2.17",
@@ -971,7 +1178,7 @@
       "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
       "dev": true,
       "requires": {
-        "caniuse-db": "1.0.30000700",
+        "caniuse-db": "1.0.30000701",
         "electron-to-chromium": "1.3.15"
       }
     },
@@ -1049,15 +1256,15 @@
       "dev": true,
       "requires": {
         "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000700",
+        "caniuse-db": "1.0.30000701",
         "lodash.memoize": "4.1.2",
         "lodash.uniq": "4.5.0"
       }
     },
     "caniuse-db": {
-      "version": "1.0.30000700",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000700.tgz",
-      "integrity": "sha1-l8/Eg4Ze6oV33Ho2dJKbmr9VMJU=",
+      "version": "1.0.30000701",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000701.tgz",
+      "integrity": "sha1-LjKwaZO/Pb2QtD2T8E4m0Rr93Lo=",
       "dev": true
     },
     "caseless": {
@@ -1142,9 +1349,9 @@
       }
     },
     "clean-css": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.6.tgz",
-      "integrity": "sha1-Wke+tSaZTLT3vzYYilXtO0VSjws=",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.7.tgz",
+      "integrity": "sha1-ua6k+FZ5iJzz6ui0A0nsTr390DI=",
       "dev": true,
       "requires": {
         "source-map": "0.5.6"
@@ -2395,18 +2602,6 @@
         "is-extglob": "1.0.0"
       }
     },
-    "extract-text-webpack-plugin": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.1.2.tgz",
-      "integrity": "sha1-dW7076gVXDaBgz+8NNpTuUF0bWw=",
-      "dev": true,
-      "requires": {
-        "async": "2.5.0",
-        "loader-utils": "1.1.0",
-        "schema-utils": "0.3.0",
-        "webpack-sources": "1.0.1"
-      }
-    },
     "extsprintf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz",
@@ -2528,6 +2723,162 @@
         "pinkie-promise": "2.0.1"
       }
     },
+    "firebase": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-4.1.3.tgz",
+      "integrity": "sha1-5dcyc2bIVNwSRhYzuov+6i9cc1g=",
+      "requires": {
+        "dom-storage": "2.0.2",
+        "faye-websocket": "0.9.3",
+        "jsonwebtoken": "7.4.1",
+        "promise-polyfill": "6.0.2",
+        "xmlhttprequest": "1.8.0"
+      },
+      "dependencies": {
+        "base64url": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/base64url/-/base64url-2.0.0.tgz",
+          "integrity": "sha1-6sFuA+oUOO/5Qj1puqNiYu0fcLs="
+        },
+        "buffer-equal-constant-time": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+          "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
+        },
+        "dom-storage": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/dom-storage/-/dom-storage-2.0.2.tgz",
+          "integrity": "sha1-7RfL9oq9EOCu+BgnE+KXxeS1ALA="
+        },
+        "ecdsa-sig-formatter": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.9.tgz",
+          "integrity": "sha1-S8kmJ07Dtau1AW5+HWCSGsJisqE=",
+          "requires": {
+            "base64url": "2.0.0",
+            "safe-buffer": "5.1.0"
+          }
+        },
+        "faye-websocket": {
+          "version": "0.9.3",
+          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.9.3.tgz",
+          "integrity": "sha1-SCpQWw3wrmJrlphm0710DNuWLoM=",
+          "requires": {
+            "websocket-driver": "0.6.5"
+          }
+        },
+        "hoek": {
+          "version": "2.16.3",
+          "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+          "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
+        },
+        "isemail": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/isemail/-/isemail-1.2.0.tgz",
+          "integrity": "sha1-vgPfjMPineTSxd9lASY/H6RZXpo="
+        },
+        "joi": {
+          "version": "6.10.1",
+          "resolved": "https://registry.npmjs.org/joi/-/joi-6.10.1.tgz",
+          "integrity": "sha1-TVDDGAeRIgAP5fFq8f+OGRe3fgY=",
+          "requires": {
+            "hoek": "2.16.3",
+            "isemail": "1.2.0",
+            "moment": "2.18.1",
+            "topo": "1.1.0"
+          }
+        },
+        "jsonwebtoken": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-7.4.1.tgz",
+          "integrity": "sha1-fKMk9SFfi+A5zTWmxFu4y3SkSPs=",
+          "requires": {
+            "joi": "6.10.1",
+            "jws": "3.1.4",
+            "lodash.once": "4.1.1",
+            "ms": "2.0.0",
+            "xtend": "4.0.1"
+          }
+        },
+        "jwa": {
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.1.5.tgz",
+          "integrity": "sha1-oFUs4CIHQs1S4VN3SjKQXDDnVuU=",
+          "requires": {
+            "base64url": "2.0.0",
+            "buffer-equal-constant-time": "1.0.1",
+            "ecdsa-sig-formatter": "1.0.9",
+            "safe-buffer": "5.1.0"
+          }
+        },
+        "jws": {
+          "version": "3.1.4",
+          "resolved": "https://registry.npmjs.org/jws/-/jws-3.1.4.tgz",
+          "integrity": "sha1-+ei5M46KhHJ31kRLFGT2GIDgUKI=",
+          "requires": {
+            "base64url": "2.0.0",
+            "jwa": "1.1.5",
+            "safe-buffer": "5.1.0"
+          }
+        },
+        "lodash.once": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+          "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
+        },
+        "moment": {
+          "version": "2.18.1",
+          "resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
+          "integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "promise-polyfill": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.0.2.tgz",
+          "integrity": "sha1-2chtPcTcLfkBboiUbe/Wm0m0EWI="
+        },
+        "safe-buffer": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.0.tgz",
+          "integrity": "sha512-aSLEDudu6OoRr/2rU609gRmnYboRLxgDG1z9o2Q0os7236FwvcqIOO8r8U5JUEwivZOhDaKlFO4SbPTJYyBEyQ=="
+        },
+        "topo": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/topo/-/topo-1.1.0.tgz",
+          "integrity": "sha1-6ddRYV0buH3IZdsYL6HKCl71NtU=",
+          "requires": {
+            "hoek": "2.16.3"
+          }
+        },
+        "websocket-driver": {
+          "version": "0.6.5",
+          "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz",
+          "integrity": "sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=",
+          "requires": {
+            "websocket-extensions": "0.1.1"
+          }
+        },
+        "websocket-extensions": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.1.tgz",
+          "integrity": "sha1-domUmcGEtu91Q3fC27DNbLVdKec="
+        },
+        "xmlhttprequest": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+          "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
+        },
+        "xtend": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+          "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
+        }
+      }
+    },
     "flatten": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
@@ -3924,7 +4275,7 @@
       "dev": true,
       "requires": {
         "camel-case": "3.0.0",
-        "clean-css": "4.1.6",
+        "clean-css": "4.1.7",
         "commander": "2.9.0",
         "he": "1.1.1",
         "ncname": "1.0.0",
@@ -3933,34 +4284,6 @@
         "uglify-js": "3.0.24"
       }
     },
-    "html-webpack-plugin": {
-      "version": "2.29.0",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz",
-      "integrity": "sha1-6Yf0IYU9O2k4yMTIFxhC5f0XryM=",
-      "dev": true,
-      "requires": {
-        "bluebird": "3.5.0",
-        "html-minifier": "3.5.2",
-        "loader-utils": "0.2.17",
-        "lodash": "4.17.4",
-        "pretty-error": "2.1.1",
-        "toposort": "1.0.3"
-      },
-      "dependencies": {
-        "loader-utils": {
-          "version": "0.2.17",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
-          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
-          "dev": true,
-          "requires": {
-            "big.js": "3.1.3",
-            "emojis-list": "2.1.0",
-            "json5": "0.5.1",
-            "object-assign": "4.1.1"
-          }
-        }
-      }
-    },
     "htmlparser2": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz",
@@ -5050,25 +5373,6 @@
         "source-map": "0.5.6"
       }
     },
-    "less-loader": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.0.5.tgz",
-      "integrity": "sha1-rhVadAbKxqzSk9eFWH/P8PR4xN0=",
-      "dev": true,
-      "requires": {
-        "clone": "2.1.1",
-        "loader-utils": "1.1.0",
-        "pify": "2.3.0"
-      },
-      "dependencies": {
-        "clone": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.1.tgz",
-          "integrity": "sha1-0hfR6WERjjrJpLi7oyhVU79kfNs=",
-          "dev": true
-        }
-      }
-    },
     "license-webpack-plugin": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-0.4.3.tgz",
@@ -5480,6 +5784,14 @@
       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=",
       "dev": true
     },
+    "ngx-perfect-scrollbar": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-4.5.2.tgz",
+      "integrity": "sha512-BsC0pZr+RKnj6QXXPI82X0oVXE5SECuOYsPSG+ojBhPRLKDlxvWY8e44DcEpL732/Q0EAyacv31zHidRKE+KjA==",
+      "requires": {
+        "perfect-scrollbar": "0.7.1"
+      }
+    },
     "no-case": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.1.tgz",
@@ -5986,6 +6298,11 @@
         "sha.js": "2.4.8"
       }
     },
+    "perfect-scrollbar": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-0.7.1.tgz",
+      "integrity": "sha1-DCVvucXO5AHWCimWh6P5phSH4NU="
+    },
     "performance-now": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
@@ -6668,7 +6985,7 @@
       "integrity": "sha1-myIXQXCaTGLVzVPGqt1UpxE36V8=",
       "dev": true,
       "requires": {
-        "@types/node": "6.0.80",
+        "@types/node": "6.0.83",
         "@types/q": "0.0.32",
         "@types/selenium-webdriver": "2.53.42",
         "blocking-proxy": "0.0.5",
@@ -7247,27 +7564,6 @@
         "yargs": "7.1.0"
       }
     },
-    "sass-loader": {
-      "version": "6.0.6",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-6.0.6.tgz",
-      "integrity": "sha512-c3/Zc+iW+qqDip6kXPYLEgsAu2lf4xz0EZDplB7EmSUMda12U1sGJPetH55B/j9eu0bTtKzKlNPWWyYC7wFNyQ==",
-      "dev": true,
-      "requires": {
-        "async": "2.5.0",
-        "clone-deep": "0.3.0",
-        "loader-utils": "1.1.0",
-        "lodash.tail": "4.1.1",
-        "pify": "3.0.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true
-        }
-      }
-    },
     "saucelabs": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-1.3.0.tgz",
@@ -8019,17 +8315,6 @@
         }
       }
     },
-    "stylus-loader": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-3.0.1.tgz",
-      "integrity": "sha1-d/SzT9Aw0lsmF7z1UT21sHMMQIk=",
-      "dev": true,
-      "requires": {
-        "loader-utils": "1.1.0",
-        "lodash.clonedeep": "4.5.0",
-        "when": "3.6.4"
-      }
-    },
     "supports-color": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
@@ -8207,26 +8492,6 @@
         }
       }
     },
-    "tsickle": {
-      "version": "0.21.6",
-      "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.21.6.tgz",
-      "integrity": "sha1-U7Abl5xcE/2xOvs/uVgXflmRWI0=",
-      "dev": true,
-      "requires": {
-        "minimist": "1.2.0",
-        "mkdirp": "0.5.1",
-        "source-map": "0.5.6",
-        "source-map-support": "0.4.15"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-          "dev": true
-        }
-      }
-    },
     "tslib": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.7.1.tgz",
@@ -8385,16 +8650,6 @@
         }
       }
     },
-    "url-loader": {
-      "version": "0.5.9",
-      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-0.5.9.tgz",
-      "integrity": "sha512-B7QYFyvv+fOBqBVeefsxv6koWWtjmHaMFT6KZWti4KRw8YUD/hOU+3AECvXuzyVawIBx3z7zQRejXCDSO5kk1Q==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "1.1.0",
-        "mime": "1.3.6"
-      }
-    },
     "url-parse": {
       "version": "1.1.9",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.1.9.tgz",
@@ -8661,6 +8916,12 @@
             "json-stable-stringify": "1.0.1"
           }
         },
+        "ajv-keywords": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-1.5.1.tgz",
+          "integrity": "sha1-MU3QpLM2j609/NxU7eYXG4htrzw=",
+          "dev": true
+        },
         "camelcase": {
           "version": "1.2.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
@@ -8816,101 +9077,6 @@
         }
       }
     },
-    "webpack-dev-middleware": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-1.11.0.tgz",
-      "integrity": "sha1-CWkdCXOjCtH4Ksc6EuIIfwpHVPk=",
-      "dev": true,
-      "requires": {
-        "memory-fs": "0.4.1",
-        "mime": "1.3.6",
-        "path-is-absolute": "1.0.1",
-        "range-parser": "1.2.0"
-      }
-    },
-    "webpack-dev-server": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-2.4.5.tgz",
-      "integrity": "sha1-MThM6BE2vhCAtLTN4OubkOVO5s8=",
-      "dev": true,
-      "requires": {
-        "ansi-html": "0.0.7",
-        "chokidar": "1.7.0",
-        "compression": "1.7.0",
-        "connect-history-api-fallback": "1.3.0",
-        "express": "4.15.3",
-        "html-entities": "1.2.1",
-        "http-proxy-middleware": "0.17.4",
-        "opn": "4.0.2",
-        "portfinder": "1.0.13",
-        "serve-index": "1.9.0",
-        "sockjs": "0.3.18",
-        "sockjs-client": "1.1.2",
-        "spdy": "3.4.7",
-        "strip-ansi": "3.0.1",
-        "supports-color": "3.2.3",
-        "webpack-dev-middleware": "1.11.0",
-        "yargs": "6.6.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
-          "requires": {
-            "number-is-nan": "1.0.1"
-          }
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "dev": true,
-          "requires": {
-            "code-point-at": "1.1.0",
-            "is-fullwidth-code-point": "1.0.0",
-            "strip-ansi": "3.0.1"
-          }
-        },
-        "yargs": {
-          "version": "6.6.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-6.6.0.tgz",
-          "integrity": "sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=",
-          "dev": true,
-          "requires": {
-            "camelcase": "3.0.0",
-            "cliui": "3.2.0",
-            "decamelize": "1.2.0",
-            "get-caller-file": "1.0.2",
-            "os-locale": "1.4.0",
-            "read-pkg-up": "1.0.1",
-            "require-directory": "2.1.1",
-            "require-main-filename": "1.0.1",
-            "set-blocking": "2.0.0",
-            "string-width": "1.0.2",
-            "which-module": "1.0.0",
-            "y18n": "3.2.1",
-            "yargs-parser": "4.2.1"
-          }
-        },
-        "yargs-parser": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz",
-          "integrity": "sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=",
-          "dev": true,
-          "requires": {
-            "camelcase": "3.0.0"
-          }
-        }
-      }
-    },
     "webpack-merge": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-2.6.1.tgz",
@@ -9211,9 +9377,9 @@
       "dev": true
     },
     "zone.js": {
-      "version": "0.8.12",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.12.tgz",
-      "integrity": "sha1-hv9QU8mK7CkaC/S7rFAdaUoFz7s="
+      "version": "0.8.13",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.13.tgz",
+      "integrity": "sha1-8IIlJfrZQVgqA7v+ceshdAMV3dA="
     }
   }
 }
diff --git a/package.json b/package.json
index 042b3ce3..6eb85b77 100644
--- a/package.json
+++ b/package.json
@@ -12,30 +12,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.2.6",
+    "@angular/animations": "^4.3.0",
     "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/common": "^4.2.6",
-    "@angular/compiler": "^4.2.6",
-    "@angular/core": "^4.2.6",
+    "@angular/common": "^4.3.0",
+    "@angular/compiler": "^4.3.0",
+    "@angular/core": "^4.3.0",
     "@angular/flex-layout": "^2.0.0-rc.1",
-    "@angular/forms": "^4.2.6",
-    "@angular/http": "^4.2.6",
+    "@angular/forms": "^4.3.0",
+    "@angular/http": "^4.3.0",
     "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^4.2.6",
-    "@angular/platform-browser-dynamic": "^4.2.6",
-    "@angular/router": "^4.2.6",
+    "@angular/platform-browser": "^4.3.0",
+    "@angular/platform-browser-dynamic": "^4.3.0",
+    "@angular/router": "^4.3.0",
+    "angularfire2": "^4.0.0-rc.1",
     "core-js": "^2.4.1",
+    "firebase": "^4.1.3",
     "hammerjs": "^2.0.8",
+    "ngx-perfect-scrollbar": "^4.5.2",
     "rxjs": "^5.4.2",
-    "zone.js": "^0.8.4"
+    "zone.js": "^0.8.13"
   },
   "devDependencies": {
-    "@angular/cli": "^1.2.0",
-    "@angular/compiler-cli": "^4.2.6",
-    "@angular/language-service": "^4.2.6",
+    "@angular/cli": "^1.2.1",
+    "@angular/compiler-cli": "^4.3.0",
+    "@angular/language-service": "^4.3.0",
     "@types/jasmine": "^2.5.53",
     "@types/jasminewd2": "^2.0.2",
-    "@types/node": "^6.0.80",
+    "@types/node": "^6.0.83",
     "codelyzer": "~3.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1fd724e7..ce032fa7 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,7 +3,7 @@
     <fuse-layout></fuse-layout>
 
     <!-- QUICK PANEL -->
-    <md-sidenav id="quick-panel" #quickPanel [fuseMdSidenavHelper]="quickPanel" align="end">
+    <md-sidenav fuseMdSidenavHelper="quick-panel" align="end">
         quick-panel
     </md-sidenav>
     <!-- / QUICK PANEL -->
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 77c727ae..725c0150 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,9 +1,10 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import 'hammerjs';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
 import { RouterModule, Routes } from '@angular/router';
+import 'hammerjs';
 import { MailModule } from './main/apps/mail/mail.module';
 import { ChatModule } from './main/apps/chat/chat.module';
 import { ProjectModule } from './main/apps/dashboards/project/project.module';
@@ -16,29 +17,44 @@ import { SharedModule } from './core/modules/shared.module';
 import { FuseMdSidenavHelperService } from './core/directives/md-sidenav-helper/md-sidenav-helper.service';
 import { UIPageLayoutsModule } from './main/ui/page-layouts/page-layouts.module';
 import { FuseLayoutModule } from './core/components/layout/layout.module';
+import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { AngularFireModule } from 'angularfire2';
+import { environment } from "environments/environment";
+import { AngularFireDatabaseModule } from 'angularfire2/database';
+import { MailListComponent } from './main/apps/mail/mail-list/mail-list.component';
+import { MailDetailsComponent } from './main/apps/mail/mail-details/mail-details.component';
+
+const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
+    suppressScrollX: true
+};
 
 const appRoutes: Routes = [
     {
-        path      : 'apps/mail',
+        path        : 'apps/mail',
         loadChildren: './main/apps/mail/mail.module#MailModule'
     },
     {
         path      : '**',
         redirectTo: 'apps/dashboards/project'
-    },
+    }
 ];
 
 @NgModule({
     declarations: [
         AppComponent,
-        SidenavComponent,
+        SidenavComponent
     ],
     imports     : [
         BrowserModule,
+        HttpClientModule,
         BrowserAnimationsModule,
         SharedModule,
         RouterModule.forRoot(appRoutes),
 
+        PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
+        AngularFireModule.initializeApp(environment.firebase),
+        AngularFireDatabaseModule,
+
         FuseLayoutModule,
 
         // MailModule,
diff --git a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html
index df8123cf..069cf67a 100644
--- a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html
+++ b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html
@@ -3,97 +3,97 @@
         <h3 md-subheader>Sidenav Demo</h3>
 
         <md-list-item>
-            <p>Sidenav Item 1</p>
+            <span>Sidenav Item 1</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 2</p>
+            <span>Sidenav Item 2</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 3</p>
+            <span>Sidenav Item 3</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 4</p>
+            <span>Sidenav Item 4</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 5</p>
+            <span>Sidenav Item 5</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 6</p>
+            <span>Sidenav Item 6</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 7</p>
+            <span>Sidenav Item 7</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 8</p>
+            <span>Sidenav Item 8</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 9</p>
+            <span>Sidenav Item 9</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 10</p>
+            <span>Sidenav Item 10</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 11</p>
+            <span>Sidenav Item 11</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 12</p>
+            <span>Sidenav Item 12</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 13</p>
+            <span>Sidenav Item 13</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 14</p>
+            <span>Sidenav Item 14</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 15</p>
+            <span>Sidenav Item 15</span>
         </md-list-item>
 
         <md-divider></md-divider>
 
         <md-list-item>
-            <p>Sidenav Item 16</p>
+            <span>Sidenav Item 16</span>
         </md-list-item>
 
     </md-list>
diff --git a/src/app/core/components/layout/content/content.component.ts b/src/app/core/components/layout/content/content.component.ts
index 66677ef6..7d66453b 100644
--- a/src/app/core/components/layout/content/content.component.ts
+++ b/src/app/core/components/layout/content/content.component.ts
@@ -1,19 +1,34 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { NavigationEnd, Router } from '@angular/router';
 
 @Component({
-    selector   : 'fuse-content',
-    templateUrl: './content.component.html',
-    styleUrls  : ['./content.component.scss']
+    selector     : 'fuse-content',
+    templateUrl  : './content.component.html',
+    styleUrls    : ['./content.component.scss']
 })
 export class FuseContentComponent implements OnInit
 {
-
-    constructor()
+    constructor(
+        private router: Router,
+        private perfectScrollbarDirective: PerfectScrollbarDirective
+    )
     {
+
     }
 
     ngOnInit()
     {
+        this.router.events.subscribe((event) =>
+            {
+                if ( event instanceof NavigationEnd )
+                {
+                    setTimeout(() =>
+                    {
+                        this.perfectScrollbarDirective.scrollToTop();
+                    }, 0);
+                }
+            }
+        );
     }
-
 }
diff --git a/src/app/core/components/layout/layout.component.html b/src/app/core/components/layout/layout.component.html
index 78202df6..ba8da7b8 100644
--- a/src/app/core/components/layout/layout.component.html
+++ b/src/app/core/components/layout/layout.component.html
@@ -17,7 +17,7 @@
             </ng-container>
             <!-- / TOOLBAR: Below -->
 
-            <fuse-content></fuse-content>
+            <fuse-content perfect-scrollbar></fuse-content>
 
             <!-- FOOTER: Below -->
             <ng-container *ngIf="layoutSettings.footer === 'below'">
@@ -43,7 +43,7 @@
             </ng-container>
             <!-- / TOOLBAR: Below -->
 
-            <fuse-content></fuse-content>
+            <fuse-content perfect-scrollbar></fuse-content>
 
             <!-- FOOTER: Below -->
             <ng-container *ngIf="layoutSettings.footer === 'below'">
@@ -67,7 +67,7 @@
             </ng-container>
             <!-- / TOOLBAR: Below -->
 
-            <fuse-content></fuse-content>
+            <fuse-content perfect-scrollbar></fuse-content>
 
             <!-- FOOTER: Below -->
             <ng-container *ngIf="layoutSettings.footer === 'below'">
diff --git a/src/app/core/components/layout/layout.component.scss b/src/app/core/components/layout/layout.component.scss
index 94d23454..35734c7e 100644
--- a/src/app/core/components/layout/layout.component.scss
+++ b/src/app/core/components/layout/layout.component.scss
@@ -1,4 +1,4 @@
-:host {
+fuse-layout {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -20,7 +20,12 @@
                 height: 100%;
                 overflow-x: hidden;
                 overflow-y: auto;
+
+                > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) {
+                    width: 100%;
+                    min-width: 100%;
+                }
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/core/components/layout/layout.component.ts b/src/app/core/components/layout/layout.component.ts
index 7480b510..03ceb3fe 100644
--- a/src/app/core/components/layout/layout.component.ts
+++ b/src/app/core/components/layout/layout.component.ts
@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FuseLayoutService } from '../../services/layout.service';
 
 @Component({
-    selector   : 'fuse-layout',
-    templateUrl: './layout.component.html',
-    styleUrls  : ['./layout.component.scss']
+    selector     : 'fuse-layout',
+    templateUrl  : './layout.component.html',
+    styleUrls    : ['./layout.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class FuseLayoutComponent implements OnInit
 {
@@ -24,7 +25,6 @@ export class FuseLayoutComponent implements OnInit
                     this.layoutSettings = newSettings;
                 }
             );
-
     }
 
 }
diff --git a/src/app/core/components/layout/navbar/navbar.component.html b/src/app/core/components/layout/navbar/navbar.component.html
index d2752cab..5c489bb9 100644
--- a/src/app/core/components/layout/navbar/navbar.component.html
+++ b/src/app/core/components/layout/navbar/navbar.component.html
@@ -13,5 +13,6 @@
     </button>
 
 </div>
-
-<fuse-navigation></fuse-navigation>
+<div class="navbar-content" perfect-scrollbar>
+    <fuse-navigation></fuse-navigation>
+</div>
diff --git a/src/app/core/components/layout/navbar/navbar.component.scss b/src/app/core/components/layout/navbar/navbar.component.scss
index c831f593..e48932f9 100644
--- a/src/app/core/components/layout/navbar/navbar.component.scss
+++ b/src/app/core/components/layout/navbar/navbar.component.scss
@@ -1,7 +1,8 @@
 @import "../../../scss/fuse";
 
 :host {
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 256px;
     min-width: 256px;
     max-width: 256px;
@@ -49,6 +50,7 @@
         display: flex;
         align-items: center;
         height: 64px;
+        min-height: 64px;
         justify-content: space-between;
 
         .logo {
@@ -85,4 +87,8 @@
              box-sizing: border-box;*/
         }
     }
+
+    .nav-bar-content {
+        flex: 1;
+    }
 }
diff --git a/src/app/core/components/layout/navbar/navbar.component.ts b/src/app/core/components/layout/navbar/navbar.component.ts
index 3557867b..93c76a2e 100644
--- a/src/app/core/components/layout/navbar/navbar.component.ts
+++ b/src/app/core/components/layout/navbar/navbar.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, HostListener, OnDestroy, OnInit } from '@angular/core';
+import {Component, HostBinding, HostListener, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
 import { AppComponent } from '../../../../app.component';
 import { Subscription } from 'rxjs/Subscription';
 import { FuseMatchMedia } from '../../../services/match-media.service';
diff --git a/src/app/core/components/navigation/nav-item/nav-item.component.scss b/src/app/core/components/navigation/nav-item/nav-item.component.scss
index e69de29b..948c48d2 100644
--- a/src/app/core/components/navigation/nav-item/nav-item.component.scss
+++ b/src/app/core/components/navigation/nav-item/nav-item.component.scss
@@ -0,0 +1,13 @@
+:host {
+
+    .folded:not(.folded-open) & {
+
+        .nav-link {
+
+            > span {
+                opacity: 0;
+                transition: opacity 200ms ease;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss
index e69de29b..94607e51 100644
--- a/src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss
+++ b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss
@@ -0,0 +1,19 @@
+
+:host {
+
+    .folded:not(.folded-open) & {
+
+        &:before {
+            content: '';
+            display: block;
+            position: absolute;
+            min-width: 1.6rem;
+            border-top: 2px solid rgba(0, 0, 0, .12);
+        }
+
+        > span {
+            opacity: 0;
+            transition: opacity 200ms ease;
+        }
+    }
+}
diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts
index cb91e409..48c68977 100644
--- a/src/app/core/components/navigation/navigation.model.ts
+++ b/src/app/core/components/navigation/navigation.model.ts
@@ -58,7 +58,7 @@ export class FuseNavigation
                 'title': 'Mail',
                 'type' : 'nav-item',
                 'icon' : 'email',
-                'url'  : '/apps/mail'
+                'url'  : '/apps/mail/inbox'
             },
             {
                 'title': 'Chat',
@@ -309,7 +309,7 @@ export class FuseNavigation
                                 'url'  : '/ui/page-layouts/carded/right-sidenav'
                             },
                             {
-                                'title': 'Right Sidenav',
+                                'title': 'Right Sidenav 2',
                                 'type' : 'nav-item',
                                 'url'  : '/ui/page-layouts/carded/right-sidenav-2'
                             }
diff --git a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts b/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts
index f0e7cb00..020cc02b 100644
--- a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts
+++ b/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts
@@ -1,61 +1,78 @@
-import { Directive, Input, OnInit, HostListener, ElementRef, AfterViewInit, HostBinding } from '@angular/core';
+import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding, AfterViewInit } from '@angular/core';
 import { MdSidenav } from '@angular/material';
 import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
 import { FuseMatchMedia } from '../../services/match-media.service';
-import { MediaMonitor, ObservableMedia } from '@angular/flex-layout';
+import { ObservableMedia } from '@angular/flex-layout';
+import { Subscription } from 'rxjs/Subscription';
 
 @Directive({
     selector: '[fuseMdSidenavHelper]'
 })
-export class FuseMdSidenavHelperDirective implements OnInit
+export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDestroy
 {
-    @Input('fuseMdSidenavHelper') mdSidenavInstance: MdSidenav;
-    @Input('md-is-locked-open') mdIsLockedOpen: string;
+    matchMediaSubscription: Subscription;
+
+    @HostBinding('class.md-is-locked-open') isLockedOpen = true;
+    @HostBinding('class.md-stop-transition') stopTransition = true;
+
+    @Input('fuseMdSidenavHelper') id: string;
+    @Input('md-is-locked-open') mdIsLockedOpenBreakpoint: string;
 
     constructor(
         private fuseMdSidenavService: FuseMdSidenavHelperService,
-        private elRef: ElementRef,
         private fuseMatchMedia: FuseMatchMedia,
-        private observableMedia: ObservableMedia
+        private observableMedia: ObservableMedia,
+        private mdSidenav: MdSidenav
     )
     {
     }
 
     ngOnInit()
     {
-        this.fuseMdSidenavService.setSidenav(this.elRef.nativeElement.id, this.mdSidenavInstance);
+        this.fuseMdSidenavService.setSidenav(this.id, this.mdSidenav);
 
-        console.warn(this.mdIsLockedOpen);
-
-        if ( this.observableMedia.isActive(this.mdIsLockedOpen) )
+        if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
         {
-            this.mdSidenavInstance.open();
-            this.mdSidenavInstance.mode = 'side';
+            this.isLockedOpen = true;
+            this.mdSidenav.mode = 'side';
+            this.mdSidenav.open();
         }
         else
         {
-            this.mdSidenavInstance.close();
-            this.mdSidenavInstance.mode = 'over';
+            this.isLockedOpen = false;
+            this.mdSidenav.mode = 'over';
+            this.mdSidenav.close();
         }
 
-        this.fuseMatchMedia.onMediaChange.subscribe((change) =>
+        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() =>
         {
-            console.log(this.observableMedia.isActive(this.mdIsLockedOpen));
-
-            if ( this.observableMedia.isActive(this.mdIsLockedOpen) )
+            if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
             {
-                this.mdSidenavInstance.open();
-                this.mdSidenavInstance.mode = 'side';
+                this.isLockedOpen = true;
+                this.mdSidenav.mode = 'side';
+                this.mdSidenav.open();
             }
             else
             {
-                this.mdSidenavInstance.close();
-                this.mdSidenavInstance.mode = 'over';
+                this.isLockedOpen = false;
+                this.mdSidenav.mode = 'over';
+                this.mdSidenav.close();
             }
         });
 
-        console.warn(this.mdIsLockedOpen);
+    }
 
+    ngAfterViewInit()
+    {
+        setTimeout(() =>
+        {
+            this.stopTransition = false;
+        }, 0);
+    }
+
+    ngOnDestroy()
+    {
+        this.matchMediaSubscription.unsubscribe();
     }
 }
 
@@ -65,7 +82,6 @@ export class FuseMdSidenavHelperDirective implements OnInit
 export class FuseMdSidenavTogglerDirective
 {
     @Input('fuseMdSidenavToggler') id;
-    instance: MdSidenav;
 
     constructor(private fuseMdSidenavService: FuseMdSidenavHelperService)
     {
@@ -74,7 +90,6 @@ export class FuseMdSidenavTogglerDirective
     @HostListener('click')
     onClick()
     {
-        this.instance = this.fuseMdSidenavService.getSidenav(this.id);
-        this.instance.toggle();
+        this.fuseMdSidenavService.getSidenav(this.id).toggle();
     }
 }
diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts
index 3ea9a713..6c127e06 100644
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -1,9 +1,13 @@
-import { NgModule } from '@angular/core';
-import { MaterialModule } from './material.module';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
+import {NgModule} from '@angular/core';
+import {MaterialModule} from './material.module';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {FormsModule} from '@angular/forms';
+import {CommonModule} from '@angular/common';
+import {
+    FuseMdSidenavHelperDirective,
+    FuseMdSidenavTogglerDirective
+} from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
+import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
 
 @NgModule({
     declarations: [
@@ -14,7 +18,8 @@ import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../
         FlexLayoutModule,
         MaterialModule,
         CommonModule,
-        FormsModule
+        FormsModule,
+        PerfectScrollbarModule
     ],
     exports     : [
         FlexLayoutModule,
@@ -22,7 +27,8 @@ import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../
         CommonModule,
         FormsModule,
         FuseMdSidenavHelperDirective,
-        FuseMdSidenavTogglerDirective
+        FuseMdSidenavTogglerDirective,
+        PerfectScrollbarModule
     ]
 })
 
diff --git a/src/app/core/scss/core.scss b/src/app/core/scss/core.scss
index b5944c3b..191d9a09 100644
--- a/src/app/core/scss/core.scss
+++ b/src/app/core/scss/core.scss
@@ -1,3 +1,4 @@
+@import "~perfect-scrollbar/src/css/main";
 // Fuse
 @import "fuse";
 
@@ -23,3 +24,6 @@
 @import "partials/angular-material-fix";
 @import "partials/typography";
 @import "partials/page-layouts";
+
+// Plugins
+@import "partials/plugins/plugins";
diff --git a/src/app/core/scss/partials/_angular-material-fix.scss b/src/app/core/scss/partials/_angular-material-fix.scss
index 30464965..8ddd8f91 100644
--- a/src/app/core/scss/partials/_angular-material-fix.scss
+++ b/src/app/core/scss/partials/_angular-material-fix.scss
@@ -1,10 +1,3 @@
-.mat-body {
-
-    p {
-        margin: 0;
-    }
-}
-
 .mat-icon-button {
 
     .mat-button-ripple {
diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss
index 8d7c3136..229e6798 100644
--- a/src/app/core/scss/partials/_page-layouts.scss
+++ b/src/app/core/scss/partials/_page-layouts.scss
@@ -25,8 +25,10 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
     &.carded {
         display: flex;
         flex-direction: row;
-        min-height: 100%;
+        width: 100%;
         height: 100%;
+        min-width: 100%;
+        min-height: 100%;
 
         // Fullwidth
         &.fullwidth {
@@ -94,27 +96,19 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
         }
 
         // Left sidenav
-        &.left-sidenav {
+        &.left-sidenav,
+        &.right-sidenav {
 
             // Single scroll
             &.single-scroll {
                 height: auto;
-
-                > .center {
-
-                    .content-card {
-
-                        .content {
-                            overflow: hidden;
-                        }
-                    }
-                }
             }
 
-            // Sidenav
             > md-sidenav-container {
+                display: flex;
                 background: none;
                 z-index: 2;
+                width: 100%;
 
                 .sidenav {
                     display: flex;
@@ -126,6 +120,19 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                     overflow-y: hidden;
                     @include mat-elevation(7);
 
+                    &.md-is-locked-open {
+                        position: relative;
+                        background: none;
+                        box-shadow: none;
+                    }
+
+                    &.md-stop-transition {
+
+                        ~ .mat-sidenav-content {
+                            transition: none;
+                        }
+                    }
+
                     .header {
                         height: $header-height;
                         min-height: $header-height;
@@ -138,38 +145,10 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                         padding: 24px;
                         overflow: auto;
                     }
-
-                    @include media-breakpoint('gt-md') {
-                        background: none;
-                        box-shadow: none;
-                    }
-
-                    /*&.md-locked-open {
-                        width: 220px;
-                        min-width: 220px;
-                        max-width: 220px;
-                        z-index: 2;
-                        background: transparent;
-                        box-shadow: none;
-
-                        + .center {
-                            margin-left: 0;
-                        }
-                    }
-
-                    &:not(.md-locked-open) {
-
-                        .header {
-                            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-                        }
-
-                        .content {
-                            overflow: hidden;
-                        }
-                    }*/
                 }
 
                 .mat-sidenav-content {
+                    flex: 1;
                     overflow: visible;
 
                     // Center
@@ -183,10 +162,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                         margin-left: 32px;
                         margin-right: 32px;
 
-                        @include media-breakpoint('gt-md') {
-                            margin-left: 0;
-                        }
-
                         .header {
                             display: flex;
                             height: $card-header-height;
@@ -234,104 +209,47 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
             }
         }
 
+        // Left sidenav
+        &.left-sidenav {
+
+            // Sidenav
+            > md-sidenav-container {
+
+                .sidenav {
+
+                    &.md-is-locked-open {
+
+                        ~ .mat-sidenav-content {
+                            margin-left: 0 !important;
+
+                            .center {
+                                margin-left: 0;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
         // Right sidenav
         &.right-sidenav {
 
-            // Single scroll
-            &.single-scroll {
-                height: auto;
-
-                > .center {
-
-                    .content-card {
-
-                        .content {
-                            overflow: hidden;
-                        }
-                    }
-                }
-            }
-
             // Sidenav
-            > .sidenav {
-                width: 240px;
-                min-width: 240px;
-                max-width: 240px;
-                z-index: 51;
-                @include mat-elevation(7);
+            > md-sidenav-container {
 
-                .header {
-                    height: $header-height;
-                    min-height: $header-height;
-                    max-height: $header-height;
-                    padding: 24px 24px 24px 0;
-                }
+                .sidenav {
+                    order: 999;
 
-                .content {
-                    background: transparent;
-                    padding: 24px 24px 24px 0;
-                }
+                    &.md-is-locked-open {
 
-                &.md-locked-open {
-                    width: 196px;
-                    min-width: 196px;
-                    max-width: 196px;
-                    z-index: 2;
-                    background: transparent;
-                    box-shadow: none;
-                }
+                        ~ .mat-sidenav-content {
+                            margin-right: 0px !important;
 
-                &:not(.md-locked-open) {
-
-                    .header {
-                        padding: 24px;
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-                    }
-
-                    .content {
-                        overflow: hidden;
-                        padding: 24px;
-                    }
-                }
-            }
-
-            // Center
-            > .center {
-                position: relative;
-                z-index: 2;
-                margin-left: 32px;
-                margin-right: 32px;
-
-                .header {
-                    height: $card-header-height;
-                    min-height: $card-header-height;
-                    max-height: $card-header-height;
-                    padding: 24px;
-                }
-
-                .content-card {
-                    background: #FFFFFF;
-                    overflow: hidden;
-                    @include mat-elevation(7);
-
-                    .toolbar {
-                        padding: 8px 24px;
-                        height: $card-toolbar-height;
-                        min-height: $card-toolbar-height;
-                        max-height: $card-toolbar-height;
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-
-                        .sidenav-toggle {
-                            margin: 0 0 0 8px !important;
-                            padding: 0 !important;
-                            border-radius: 0;
+                            .center {
+                                margin-right: 0;
+                            }
                         }
                     }
-
-                    .content {
-                        padding: 24px;
-                        background: #FFFFFF;
-                    }
                 }
             }
         }
diff --git a/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss b/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
new file mode 100644
index 00000000..7e93827e
--- /dev/null
+++ b/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
@@ -0,0 +1,10 @@
+.ps {
+
+    > .ps__scrollbar-y-rail {
+        z-index: 99999;
+    }
+
+    > .ps__scrollbar-y-rail {
+        z-index: 99999;
+    }
+}
\ No newline at end of file
diff --git a/src/app/core/scss/partials/plugins/_plugins.scss b/src/app/core/scss/partials/plugins/_plugins.scss
new file mode 100644
index 00000000..5ebdd9d0
--- /dev/null
+++ b/src/app/core/scss/partials/plugins/_plugins.scss
@@ -0,0 +1 @@
+@import "perfect-scrollbar";
\ No newline at end of file
diff --git a/src/app/main/apps/mail/mail-details/mail-details.component.html b/src/app/main/apps/mail/mail-details/mail-details.component.html
new file mode 100644
index 00000000..f307a74e
--- /dev/null
+++ b/src/app/main/apps/mail/mail-details/mail-details.component.html
@@ -0,0 +1,3 @@
+<p>
+  mail-details works!
+</p>
diff --git a/src/app/main/apps/mail/views/classic/classic-view.component.scss b/src/app/main/apps/mail/mail-details/mail-details.component.scss
similarity index 100%
rename from src/app/main/apps/mail/views/classic/classic-view.component.scss
rename to src/app/main/apps/mail/mail-details/mail-details.component.scss
diff --git a/src/app/main/apps/mail/mail-details/mail-details.component.ts b/src/app/main/apps/mail/mail-details/mail-details.component.ts
new file mode 100644
index 00000000..565ef103
--- /dev/null
+++ b/src/app/main/apps/mail/mail-details/mail-details.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'fuse-mail-details',
+  templateUrl: './mail-details.component.html',
+  styleUrls: ['./mail-details.component.scss']
+})
+export class MailDetailsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
new file mode 100644
index 00000000..5c9c611a
--- /dev/null
+++ b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
@@ -0,0 +1,5 @@
+<ul>
+    <li>
+        {{ mail.subject }}
+    </li>
+</ul>
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.scss b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
similarity index 100%
rename from src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.scss
rename to src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
diff --git a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts
new file mode 100644
index 00000000..afa90659
--- /dev/null
+++ b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MailModel } from '../../mail.model';
+
+@Component({
+    selector   : 'fuse-mail-list-item',
+    templateUrl: './mail-list-item.component.html',
+    styleUrls  : ['./mail-list-item.component.scss']
+})
+export class MailListItemComponent implements OnInit
+{
+    @Input() mail: MailModel;
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+        console.log('mail list item inited');
+    }
+
+}
diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.html b/src/app/main/apps/mail/mail-list/mail-list.component.html
new file mode 100644
index 00000000..b23c48f4
--- /dev/null
+++ b/src/app/main/apps/mail/mail-list/mail-list.component.html
@@ -0,0 +1 @@
+<fuse-mail-list-item *ngFor="let mail of mails" [mail]="mail"></fuse-mail-list-item>
\ No newline at end of file
diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.scss b/src/app/main/apps/mail/mail-list/mail-list.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.ts b/src/app/main/apps/mail/mail-list/mail-list.component.ts
new file mode 100644
index 00000000..12d7eb4f
--- /dev/null
+++ b/src/app/main/apps/mail/mail-list/mail-list.component.ts
@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core';
+import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
+
+@Component({
+    selector   : 'fuse-mail-list',
+    templateUrl: './mail-list.component.html',
+    styleUrls  : ['./mail-list.component.scss']
+})
+export class MailListComponent implements OnInit
+{
+    mailsDB: FirebaseListObservable<any[]>;
+    mails: any;
+
+    constructor(private db: AngularFireDatabase)
+    {
+        this.mailsDB = this.db.list('/mail/data', {
+            query: {
+                orderByChild: 'important',
+                equalTo     : true
+            }
+        });
+    }
+
+    ngOnInit()
+    {
+        this.mailsDB.subscribe((response) =>
+        {
+            console.log('mail list component inited');
+            console.log(response);
+
+            this.mails = response;
+        });
+
+    }
+
+    onSave()
+    {
+        // this.mailList.push({name: 'Mustafa'});
+        this.mails.push({subject: 'deneme'});
+
+        // this.mails.update({test: 'deneme'});
+        // this.mails.set({test: 'deneme'});
+
+        /*this.mails.set({
+         name: 'sercan',
+         age : 29
+         });*/
+
+        console.log(this.mails);
+    }
+
+    onGet()
+    {
+        this.mails.subscribe((response) =>
+        {
+
+            console.log(response);
+        });
+
+        /*const get = this.http.get('https://fuse2-demo.firebaseio.com/mail.json');
+
+         get.subscribe((response) =>
+         {
+         console.log(response);
+         });*/
+    }
+
+    onGoOnline()
+    {
+        this.db.database.goOnline();
+    }
+
+    onGoOffline()
+    {
+        this.db.database.goOffline();
+    }
+
+}
diff --git a/src/app/main/apps/mail/mail.component.html b/src/app/main/apps/mail/mail.component.html
index b91ca2f0..983b7139 100644
--- a/src/app/main/apps/mail/mail.component.html
+++ b/src/app/main/apps/mail/mail.component.html
@@ -1,13 +1,72 @@
-<md-sidenav-container id="mail" class="example-sidenav-fab-container" fxLayout="row" fxfill>
+<div class="page-layout carded left-sidenav">
 
-    <md-sidenav #sidenav mode="side" opened="true" fxFlex="240px">
-        <fuse-mail-main-sidenav></fuse-mail-main-sidenav>
-    </md-sidenav>
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg md-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
 
-    <div class="content">
-        <a md-mini-fab class="sidenav-toggle-button" (click)="sidenav.toggle()">
-            <md-icon>menu</md-icon>
-        </a>
-        <router-outlet name="view"></router-outlet>
-    </div>
-</md-sidenav-container>
+    <md-sidenav-container>
+
+        <!-- SIDENAV -->
+        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+                    fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
+
+            <!-- SIDENAV HEADER -->
+            <div class="header">
+                <span>Sidenav header</span>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content" perfect-scrollbar>
+
+                Sidenav
+
+            </div>
+            <!-- / SIDENAV CONTENT -->
+
+        </md-sidenav>
+        <!-- / SIDENAV -->
+
+        <!-- CENTER -->
+        <div class="center">
+
+            <!-- CONTENT HEADER -->
+            <div class="header">
+                <h2>Left sidenav with content scroll</h2>
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card">
+
+                <!-- CONTENT TOOLBAR -->
+                <div class="toolbar">
+                    <button md-button class="mat-icon-button sidenav-toggle"
+                            fuseMdSidenavToggler="carded-left-sidenav"
+                            fxHide.gt-md>
+                        <md-icon>menu</md-icon>
+                    </button>
+
+                    <span>Content toolbar</span>
+                </div>
+                <!-- / CONTENT TOOLBAR -->
+
+                <!-- CONTENT -->
+                <div class="content" perfect-scrollbar>
+
+                    <fuse-mail-list></fuse-mail-list>
+
+                    <fuse-mail-details></fuse-mail-details>
+
+                </div>
+                <!-- / CONTENT -->
+
+            </div>
+            <!-- / CONTENT CARD -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </md-sidenav-container>
+
+</div>
\ No newline at end of file
diff --git a/src/app/main/apps/mail/mail.component.ts b/src/app/main/apps/mail/mail.component.ts
index 664ec915..663e2134 100644
--- a/src/app/main/apps/mail/mail.component.ts
+++ b/src/app/main/apps/mail/mail.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { FuseLayoutService } from '../../../core/services/layout.service';
+import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
+import { ActivatedRoute, Data } from '@angular/router';
 
 @Component({
     selector   : 'fuse-mail',
@@ -8,19 +9,28 @@ import { FuseLayoutService } from '../../../core/services/layout.service';
 })
 export class MailComponent implements OnInit
 {
+    mails: FirebaseListObservable<any[]>;
 
-    constructor(private layoutService: FuseLayoutService)
+    constructor(private db: AngularFireDatabase, private route: ActivatedRoute)
     {
-        this.layoutService.setSettings({
-            navigation: 'left',
-            toolbar   : 'below',
-            footer    : 'below'
-        });
+        console.log('mail component inited');
+
+        // this.mails = db.list('/mail/data');
+
+        /*this.mails.subscribe(response =>
+         {
+         console.log(response);
+
+         console.log('going offline...');
+         this.db.database.goOffline();
+         });*/
     }
 
     ngOnInit()
     {
-
+        this.route.data.subscribe((data: Data) =>
+        {
+            console.warn(data['mails']);
+        });
     }
-
 }
diff --git a/src/app/main/apps/mail/mail.model.ts b/src/app/main/apps/mail/mail.model.ts
new file mode 100644
index 00000000..f2c97957
--- /dev/null
+++ b/src/app/main/apps/mail/mail.model.ts
@@ -0,0 +1,11 @@
+export class MailModel
+{
+    id: string;
+    subject: string;
+    important: string;
+
+    constructor()
+    {
+
+    }
+}
diff --git a/src/app/main/apps/mail/mail.module.ts b/src/app/main/apps/mail/mail.module.ts
index 2d48a01f..417114aa 100644
--- a/src/app/main/apps/mail/mail.module.ts
+++ b/src/app/main/apps/mail/mail.module.ts
@@ -1,33 +1,66 @@
-import { NgModule } from '@angular/core';
+import { Injectable, NgModule } from '@angular/core';
 import { SharedModule } from '../../../core/modules/shared.module';
-import { RouterModule, Routes } from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
 import { MailComponent } from './mail.component';
 import { MainSidenavComponent } from './sidenavs/main/main-sidenav.component';
-import { ClassicViewComponent } from './views/classic/classic-view.component';
+import { MailListItemComponent } from './mail-list/mail-list-item/mail-list-item.component';
+import { MailListComponent } from './mail-list/mail-list.component';
+import { MailDetailsComponent } from './mail-details/mail-details.component';
+import { Observable } from 'rxjs/Observable';
+import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
+
+@Injectable()
+export class MailsResolver implements Resolve<any>
+{
+    mails: FirebaseListObservable<any[]>;
+
+    constructor(private db: AngularFireDatabase)
+    {
+        console.log('Mails Resolver constructor..');
+        this.mails = db.list('/mail/data');
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
+    {
+        return new Promise((resolve, reject) =>
+        {
+            this.mails.subscribe(response =>
+            {
+                console.log('resolver....');
+                console.log('going offline...');
+                this.db.database.goOffline();
+
+                resolve(response);
+
+            }, reject);
+        });
+    }
+}
 
 const routes: Routes = [
     {
-        path     : '',
+        path     : 'inbox',
         component: MailComponent,
-        children : [
-            {
-                path     : '',
-                component: ClassicViewComponent,
-                outlet   : 'view'
-            }
-        ]
+        resolve  : {
+            mails: MailsResolver
+        }
     }
 ];
 
 @NgModule({
+    declarations: [
+        MailComponent,
+        MainSidenavComponent,
+        MailListComponent,
+        MailListItemComponent,
+        MailDetailsComponent
+    ],
     imports     : [
         SharedModule,
         RouterModule.forChild(routes)
     ],
-    declarations: [
-        MailComponent,
-        MainSidenavComponent,
-        ClassicViewComponent
+    providers   : [
+        MailsResolver
     ]
 })
 export class MailModule
diff --git a/src/app/main/apps/mail/views/classic/classic-view.component.html b/src/app/main/apps/mail/views/classic/classic-view.component.html
deleted file mode 100644
index 2313184b..00000000
--- a/src/app/main/apps/mail/views/classic/classic-view.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>
-  classic view
-</p>
diff --git a/src/app/main/apps/mail/views/classic/classic-view.component.ts b/src/app/main/apps/mail/views/classic/classic-view.component.ts
deleted file mode 100644
index b84fa2ab..00000000
--- a/src/app/main/apps/mail/views/classic/classic-view.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'fuse-mail-classic-view',
-  templateUrl: './classic-view.component.html',
-  styleUrls: ['./classic-view.component.scss']
-})
-export class ClassicViewComponent implements OnInit {
-
-  constructor() {}
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.html b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html
similarity index 100%
rename from src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.html
rename to src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.scss b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.ts b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts
similarity index 100%
rename from src/app/main/ui/page-layouts/carded/fullwidth-single-scroll/fullwidth-2.component.ts
rename to src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html
index 4c3bae7c..c207b6b2 100644
--- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html
+++ b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html
@@ -23,7 +23,7 @@
             <!-- / CONTENT TOOLBAR -->
 
             <!-- CONTENT -->
-            <div class="content">
+            <div class="content" perfect-scrollbar>
 
                 <fuse-demo-content></fuse-demo-content>
 
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
new file mode 100644
index 00000000..75c5ef4d
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
@@ -0,0 +1,68 @@
+<div class="page-layout carded left-sidenav single-scroll">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg md-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <md-sidenav-container>
+
+        <!-- SIDENAV -->
+        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+                    fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
+
+            <!-- SIDENAV HEADER -->
+            <div class="header">
+                <span>Sidenav header</span>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content" perfect-scrollbar>
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+            </div>
+            <!-- / SIDENAV CONTENT -->
+
+        </md-sidenav>
+        <!-- / SIDENAV -->
+
+        <!-- CENTER -->
+        <div class="center">
+
+            <!-- CONTENT HEADER -->
+            <div class="header">
+                <h2>Left sidenav with page scroll</h2>
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card">
+
+                <!-- CONTENT TOOLBAR -->
+                <div class="toolbar">
+                    <button md-button class="mat-icon-button sidenav-toggle"
+                            fuseMdSidenavToggler="carded-left-sidenav"
+                            fxHide.gt-md>
+                        <md-icon>menu</md-icon>
+                    </button>
+
+                    <span>Content toolbar</span>
+                </div>
+                <!-- / CONTENT TOOLBAR -->
+
+                <!-- CONTENT -->
+                <div class="content" perfect-scrollbar>
+
+                    <fuse-demo-content></fuse-demo-content>
+
+                </div>
+                <!-- / CONTENT -->
+
+            </div>
+            <!-- / CONTENT CARD -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </md-sidenav-container>
+
+</div>
\ No newline at end of file
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.scss b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts
new file mode 100644
index 00000000..bb432478
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-carded-left-sidenav-2',
+    templateUrl: './left-sidenav-2.component.html',
+    styleUrls  : ['./left-sidenav-2.component.scss']
+})
+export class CardedLeftSidenav2Component
+{
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
index 2d37b51d..e8d46989 100644
--- a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
+++ b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
@@ -4,20 +4,20 @@
     <div class="top-bg md-accent-bg"></div>
     <!-- / TOP BACKGROUND -->
 
-    <!-- SIDENAV -->
     <md-sidenav-container>
 
-        <md-sidenav id="carded-left-sidenav" #cardedLeftSidenav class="sidenav" align="start" opened="true" mode="side"
-                    [fuseMdSidenavHelper]="cardedLeftSidenav" md-is-locked-open="gt-md">
+        <!-- SIDENAV -->
+        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+                    fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
             <div class="header">
-                <p>Sidenav header</p>
+                <span>Sidenav header</span>
             </div>
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content">
+            <div class="content" perfect-scrollbar>
                 <fuse-demo-sidenav></fuse-demo-sidenav>
             </div>
             <!-- / SIDENAV CONTENT -->
@@ -39,17 +39,18 @@
 
                 <!-- CONTENT TOOLBAR -->
                 <div class="toolbar">
-                    <button md-button class="mat-icon-button" [fuseMdSidenavToggler]="'carded-left-sidenav'"
+                    <button md-button class="mat-icon-button sidenav-toggle"
+                            fuseMdSidenavToggler="carded-left-sidenav"
                             fxHide.gt-md>
                         <md-icon>menu</md-icon>
                     </button>
 
-                    <p>Content toolbar</p>
+                    <span>Content toolbar</span>
                 </div>
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content">
+                <div class="content" perfect-scrollbar>
 
                     <fuse-demo-content></fuse-demo-content>
 
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts
index 94b366c1..88396188 100644
--- a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts
+++ b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts
@@ -1,25 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-left-sidenav',
+    selector   : 'fuse-carded-left-sidenav',
     templateUrl: './left-sidenav.component.html',
     styleUrls  : ['./left-sidenav.component.scss']
 })
-export class CardedLeftSidenavComponent implements OnInit
+export class CardedLeftSidenavComponent
 {
-    sidenavMode: string;
-
     constructor()
     {
-
-        this.sidenavMode = 'side';
     }
 
-    ngOnInit()
-    {
-        setTimeout(() =>
-        {
-            this.sidenavMode = 'over'
-        }, 1000);
-    }
 }
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
new file mode 100644
index 00000000..c0415cb1
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
@@ -0,0 +1,68 @@
+<div class="page-layout carded right-sidenav single-scroll">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg md-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <md-sidenav-container>
+
+        <!-- SIDENAV -->
+        <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+                    fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
+
+            <!-- SIDENAV HEADER -->
+            <div class="header">
+                <span>Sidenav header</span>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content" perfect-scrollbar>
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+            </div>
+            <!-- / SIDENAV CONTENT -->
+
+        </md-sidenav>
+        <!-- / SIDENAV -->
+
+        <!-- CENTER -->
+        <div class="center">
+
+            <!-- CONTENT HEADER -->
+            <div class="header">
+                <h2>Right sidenav with page scroll</h2>
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card">
+
+                <!-- CONTENT TOOLBAR -->
+                <div class="toolbar">
+                    <button md-button class="mat-icon-button sidenav-toggle"
+                            fuseMdSidenavToggler="carded-right-sidenav"
+                            fxHide.gt-md>
+                        <md-icon>menu</md-icon>
+                    </button>
+
+                    <span>Content toolbar</span>
+                </div>
+                <!-- / CONTENT TOOLBAR -->
+
+                <!-- CONTENT -->
+                <div class="content" perfect-scrollbar>
+
+                    <fuse-demo-content></fuse-demo-content>
+
+                </div>
+                <!-- / CONTENT -->
+
+            </div>
+            <!-- / CONTENT CARD -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </md-sidenav-container>
+
+</div>
\ No newline at end of file
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.scss b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts
new file mode 100644
index 00000000..35c38c21
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-carded-right-sidenav-2',
+    templateUrl: './right-sidenav-2.component.html',
+    styleUrls  : ['./right-sidenav-2.component.scss']
+})
+export class CardedRightSidenav2Component
+{
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
new file mode 100644
index 00000000..b719a19e
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
@@ -0,0 +1,68 @@
+<div class="page-layout carded right-sidenav">
+
+    <!-- TOP BACKGROUND -->
+    <div class="top-bg md-accent-bg"></div>
+    <!-- / TOP BACKGROUND -->
+
+    <md-sidenav-container>
+
+        <!-- SIDENAV -->
+        <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+                    fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
+
+            <!-- SIDENAV HEADER -->
+            <div class="header">
+                <span>Sidenav header</span>
+            </div>
+            <!-- / SIDENAV HEADER -->
+
+            <!-- SIDENAV CONTENT -->
+            <div class="content" perfect-scrollbar>
+                <fuse-demo-sidenav></fuse-demo-sidenav>
+            </div>
+            <!-- / SIDENAV CONTENT -->
+
+        </md-sidenav>
+        <!-- / SIDENAV -->
+
+        <!-- CENTER -->
+        <div class="center">
+
+            <!-- CONTENT HEADER -->
+            <div class="header">
+                <h2>Right sidenav with content scroll</h2>
+            </div>
+            <!-- / CONTENT HEADER -->
+
+            <!-- CONTENT CARD -->
+            <div class="content-card">
+
+                <!-- CONTENT TOOLBAR -->
+                <div class="toolbar">
+                    <button md-button class="mat-icon-button sidenav-toggle"
+                            fuseMdSidenavToggler="carded-right-sidenav"
+                            fxHide.gt-md>
+                        <md-icon>menu</md-icon>
+                    </button>
+
+                    <span>Content toolbar</span>
+                </div>
+                <!-- / CONTENT TOOLBAR -->
+
+                <!-- CONTENT -->
+                <div class="content" perfect-scrollbar>
+
+                    <fuse-demo-content></fuse-demo-content>
+
+                </div>
+                <!-- / CONTENT -->
+
+            </div>
+            <!-- / CONTENT CARD -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </md-sidenav-container>
+
+</div>
\ No newline at end of file
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.scss b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts
new file mode 100644
index 00000000..8a53443f
--- /dev/null
+++ b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-carded-right-sidenav',
+    templateUrl: './right-sidenav.component.html',
+    styleUrls  : ['./right-sidenav.component.scss']
+})
+export class CardedRightSidenavComponent
+{
+    constructor()
+    {
+    }
+
+}
diff --git a/src/app/main/ui/page-layouts/page-layouts.module.ts b/src/app/main/ui/page-layouts/page-layouts.module.ts
index ab1a5ba5..a91089d5 100644
--- a/src/app/main/ui/page-layouts/page-layouts.module.ts
+++ b/src/app/main/ui/page-layouts/page-layouts.module.ts
@@ -1,10 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CardedFullWidthComponent } from './carded/fullwidth/fullwidth.component';
 import { SharedModule } from '../../../core/modules/shared.module';
-import { CardedFullWidth2Component } from './carded/fullwidth-single-scroll/fullwidth-2.component';
 import { FuseDemoModule } from '../../../core/components/demo/demo.module';
+import { CardedFullWidthComponent } from './carded/fullwidth/fullwidth.component';
+import { CardedFullWidth2Component } from './carded/fullwidth-2/fullwidth-2.component';
 import { CardedLeftSidenavComponent } from './carded/left-sidenav/left-sidenav.component';
+import { CardedLeftSidenav2Component } from './carded/left-sidenav-2/left-sidenav-2.component';
+import { CardedRightSidenavComponent } from './carded/right-sidenav/right-sidenav.component';
+import { CardedRightSidenav2Component } from './carded/right-sidenav-2/right-sidenav-2.component';
 
 const routes: Routes = [
     {
@@ -21,6 +24,21 @@ const routes: Routes = [
         path     : 'ui/page-layouts/carded/left-sidenav',
         component: CardedLeftSidenavComponent,
         children : []
+    },
+    {
+        path     : 'ui/page-layouts/carded/left-sidenav-2',
+        component: CardedLeftSidenav2Component,
+        children : []
+    },
+    {
+        path     : 'ui/page-layouts/carded/right-sidenav',
+        component: CardedRightSidenavComponent,
+        children : []
+    },
+    {
+        path     : 'ui/page-layouts/carded/right-sidenav-2',
+        component: CardedRightSidenav2Component,
+        children : []
     }
 ];
 
@@ -33,7 +51,10 @@ const routes: Routes = [
     declarations: [
         CardedFullWidthComponent,
         CardedFullWidth2Component,
-        CardedLeftSidenavComponent
+        CardedLeftSidenavComponent,
+        CardedLeftSidenav2Component,
+        CardedRightSidenavComponent,
+        CardedRightSidenav2Component
     ]
 })
 export class UIPageLayoutsModule
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index b7f639ae..9f4b2b09 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,5 +4,13 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+    production: false,
+    firebase  : {
+        apiKey           : 'AIzaSyDYFfhaC5QaKPgPhh8YqohjhfUpcYlg33c',
+        // authDomain       : '<your-project-authdomain>',
+        databaseURL      : 'https://fuse2-demo.firebaseio.com/',
+        projectId        : 'fuse2-demo',
+        // storageBucket    : '<your-storage-bucket>',
+        // messagingSenderId: '<your-messaging-sender-id>'
+    }
 };