diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..183fd1f9
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,22 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch Chrome against localhost, with sourcemaps",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000",
+      "sourceMaps": true,
+      "webRoot": "${workspaceRoot}"
+    },
+    {
+      "name": "Attach to Chrome, with sourcemaps",
+      "type": "chrome",
+      "request": "attach",
+      "url": "http://localhost:3000",
+      "port": 9222,
+      "sourceMaps": true,
+      "webRoot": "${workspaceRoot}"
+    }
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..edce5367
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib/"
+}
diff --git a/config/head-config.common.js b/config/head-config.common.js
index c686518d..1755f653 100644
--- a/config/head-config.common.js
+++ b/config/head-config.common.js
@@ -6,38 +6,38 @@
  * the same name as the attribute you want to operate on, but prefix with =
  *
  * Example:
- * { name: "msapplication-TileImage", content: "/assets/icon/ms-icon-144x144.png", "=content": true },
+ * { name: 'msapplication-TileImage', content: '/assets/icon/ms-icon-144x144.png', '=content': true },
  * Will prefix the publicPath to content.
  *
- * { rel: "apple-touch-icon", sizes: "57x57", href: "/assets/icon/apple-icon-57x57.png", "=href": false },
+ * { rel: 'apple-touch-icon', sizes: '57x57', href: '/assets/icon/apple-icon-57x57.png', '=href': false },
  * Will not prefix the publicPath on href (href attributes are added by default
  *
  */
 module.exports = {
   link: [
-    /** <link> tags for "apple-touch-icon" (AKA Web Clips). **/
-    { rel: "apple-touch-icon", sizes: "57x57", href: "/assets/icon/apple-icon-57x57.png" },
-    { rel: "apple-touch-icon", sizes: "60x60", href: "/assets/icon/apple-icon-60x60.png" },
-    { rel: "apple-touch-icon", sizes: "72x72", href: "/assets/icon/apple-icon-72x72.png" },
-    { rel: "apple-touch-icon", sizes: "76x76", href: "/assets/icon/apple-icon-76x76.png" },
-    { rel: "apple-touch-icon", sizes: "114x114", href: "/assets/icon/apple-icon-114x114.png" },
-    { rel: "apple-touch-icon", sizes: "120x120", href: "/assets/icon/apple-icon-120x120.png" },
-    { rel: "apple-touch-icon", sizes: "144x144", href: "/assets/icon/apple-icon-144x144.png" },
-    { rel: "apple-touch-icon", sizes: "152x152", href: "/assets/icon/apple-icon-152x152.png" },
-    { rel: "apple-touch-icon", sizes: "180x180", href: "/assets/icon/apple-icon-180x180.png" },
+    /** <link> tags for 'apple-touch-icon' (AKA Web Clips). **/
+    { rel: 'apple-touch-icon', sizes: '57x57', href: '/assets/icon/apple-icon-57x57.png' },
+    { rel: 'apple-touch-icon', sizes: '60x60', href: '/assets/icon/apple-icon-60x60.png' },
+    { rel: 'apple-touch-icon', sizes: '72x72', href: '/assets/icon/apple-icon-72x72.png' },
+    { rel: 'apple-touch-icon', sizes: '76x76', href: '/assets/icon/apple-icon-76x76.png' },
+    { rel: 'apple-touch-icon', sizes: '114x114', href: '/assets/icon/apple-icon-114x114.png' },
+    { rel: 'apple-touch-icon', sizes: '120x120', href: '/assets/icon/apple-icon-120x120.png' },
+    { rel: 'apple-touch-icon', sizes: '144x144', href: '/assets/icon/apple-icon-144x144.png' },
+    { rel: 'apple-touch-icon', sizes: '152x152', href: '/assets/icon/apple-icon-152x152.png' },
+    { rel: 'apple-touch-icon', sizes: '180x180', href: '/assets/icon/apple-icon-180x180.png' },
 
     /** <link> tags for android web app icons **/
-    { rel: "icon", type: "image/png", sizes: "192x192", href: "/assets/icon/android-icon-192x192.png" },
+    { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/assets/icon/android-icon-192x192.png' },
 
     /** <link> tags for favicons **/
-    { rel: "icon", type: "image/png", sizes: "32x32", href: "/assets/icon/favicon-32x32.png" },
-    { rel: "icon", type: "image/png", sizes: "96x96", href: "/assets/icon/favicon-96x96.png" },
-    { rel: "icon", type: "image/png", sizes: "16x16", href: "/assets/icon/favicon-16x16.png" }
+    { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/assets/icon/favicon-32x32.png' },
+    { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/assets/icon/favicon-96x96.png' },
+    { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/assets/icon/favicon-16x16.png' }
 
   ],
   meta: [
-    { name: "msapplication-TileColor", content: "#ffffff" },
-    { name: "msapplication-TileImage", content: "/assets/icon/ms-icon-144x144.png", "=content": true },
-    { name: "theme-color", content: "#4691d1" }
+    { name: 'msapplication-TileColor', content: '#ffffff' },
+    { name: 'msapplication-TileImage', content: '/assets/icon/ms-icon-144x144.png', '=content': true },
+    { name: 'theme-color', content: '#4691d1' }
   ]
 };
diff --git a/config/html-elements-plugin/index.js b/config/html-elements-plugin/index.js
index dafc2635..259ef905 100644
--- a/config/html-elements-plugin/index.js
+++ b/config/html-elements-plugin/index.js
@@ -2,18 +2,18 @@ function HtmlElementsPlugin(locations) {
   this.locations = locations;
 }
 
-HtmlElementsPlugin.prototype.apply = function(compiler) {
+HtmlElementsPlugin.prototype.apply = function (compiler) {
   var self = this;
-  compiler.plugin('compilation', function(compilation) {
+  compiler.plugin('compilation', function (compilation) {
     compilation.options.htmlElements = compilation.options.htmlElements || {};
 
-    compilation.plugin('html-webpack-plugin-before-html-generation', function(htmlPluginData, callback) {
+    compilation.plugin('html-webpack-plugin-before-html-generation', function (htmlPluginData, callback) {
       const locations = self.locations;
 
       if (locations) {
         const publicPath = htmlPluginData.assets.publicPath;
 
-        Object.getOwnPropertyNames(locations).forEach(function(loc) {
+        Object.getOwnPropertyNames(locations).forEach(function (loc) {
           compilation.options.htmlElements[loc] = getHtmlElementString(locations[loc], publicPath);
         });
       }
@@ -42,11 +42,15 @@ function createTag(tagName, attrMap, publicPath) {
   publicPath = publicPath || '';
 
   // add trailing slash if we have a publicPath and it doesn't have one.
-  if (publicPath && !RE_ENDS_WITH_BS.test(publicPath)) publicPath += '/';
+  if (publicPath && !RE_ENDS_WITH_BS.test(publicPath)) {
+    publicPath += '/';
+  }
 
   const attributes = Object.getOwnPropertyNames(attrMap)
-    .filter(function(name) { return name[0] !== '='; } )
-    .map(function(name) {
+    .filter(function (name) {
+      return name[0] !== '=';
+    })
+    .map(function (name) {
       var value = attrMap[name];
 
       if (publicPath) {
@@ -88,14 +92,16 @@ function createTag(tagName, attrMap, publicPath) {
  */
 function getHtmlElementString(dataSource, publicPath) {
   return Object.getOwnPropertyNames(dataSource)
-    .map(function(name) {
+    .map(function (name) {
       if (Array.isArray(dataSource[name])) {
-        return dataSource[name].map(function(attrs) { return createTag(name, attrs, publicPath); } );
+        return dataSource[name].map(function (attrs) {
+          return createTag(name, attrs, publicPath);
+        });
       } else {
-        return [ createTag(name, dataSource[name], publicPath) ];
+        return [createTag(name, dataSource[name], publicPath)];
       }
     })
-    .reduce(function(arr, curr) {
+    .reduce(function (arr, curr) {
       return arr.concat(curr);
     }, [])
     .join('\n\t');
diff --git a/config/webpack.common.js b/config/webpack.common.js
index 51b4a632..a3666109 100644
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@@ -52,8 +52,8 @@ module.exports = {
   entry: {
 
     'polyfills': './src/polyfills.browser.ts',
-    'vendor':    './src/vendor.browser.ts',
-    'main':      './src/main.browser.ts'
+    'vendor': './src/vendor.browser.ts',
+    'main': './src/main.browser.ts'
 
   },
 
@@ -92,28 +92,15 @@ module.exports = {
      * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
      */
     preLoaders: [
-
-      /*
-       * Tslint loader support for *.ts files
-       *
-       * See: https://github.com/wbuchwalter/tslint-loader
-       */
-      // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
-
-      /*
-       * Source map loader support for *.js files
-       * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
-       *
-       * See: https://github.com/webpack/source-map-loader
-       */
       {
-        test: /\.js$/,
-        loader: 'source-map-loader',
-        exclude: [
-          // these packages have problems with their sourcemaps
-          helpers.root('node_modules/ng2-bootstrap'),
-          helpers.root('node_modules/ng2-tree')
-        ]
+        test: /\.ts$/,
+        loader: 'string-replace-loader',
+        query: {
+          search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
+          replace: '$1.import($3).then(mod => mod.__esModule ? mod.default : mod)',
+          flags: 'g'
+        },
+        include: [helpers.root('src')]
       }
 
     ],
@@ -169,7 +156,7 @@ module.exports = {
 
       {
         test: /initial\.scss$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader?sourceMap')
+        loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader?sourceMap' })
       },
 
       {
@@ -212,9 +199,7 @@ module.exports = {
    * See: http://webpack.github.io/docs/configuration.html#plugins
    */
   plugins: [
-    new ExtractTextPlugin('initial.css',  {
-      allChunks: true
-    }),
+    new ExtractTextPlugin({ filename: 'initial.css', allChunks: true }),
 
     /*
      * Plugin: ForkCheckerPlugin
@@ -224,16 +209,6 @@ module.exports = {
      */
     new ForkCheckerPlugin(),
 
-    /*
-     * Plugin: OccurenceOrderPlugin
-     * Description: Varies the distribution of the ids to get the smallest id length
-     * for often used ids.
-     *
-     * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
-     * See: https://github.com/webpack/docs/wiki/optimization#minimize
-     */
-    new webpack.optimize.OccurenceOrderPlugin(true),
-
     /*
      * Plugin: CommonsChunkPlugin
      * Description: Shares common code between the pages.
diff --git a/config/webpack.dev.js b/config/webpack.dev.js
index 3cc3cdf4..f3fd8959 100644
--- a/config/webpack.dev.js
+++ b/config/webpack.dev.js
@@ -10,6 +10,7 @@ const commonConfig = require('./webpack.common.js'); // the settings that are co
  * Webpack Plugins
  */
 const DefinePlugin = require('webpack/lib/DefinePlugin');
+const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
 
 /**
  * Webpack Constants
@@ -116,7 +117,15 @@ module.exports = webpackMerge(commonConfig, {
         'NODE_ENV': JSON.stringify(METADATA.ENV),
         'HMR': METADATA.HMR
       }
-    })
+    }),
+
+    /**
+     * Plugin: NamedModulesPlugin (experimental)
+     * Description: Uses file names as module name.
+     *
+     * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
+     */
+    new NamedModulesPlugin()
   ],
 
   /**
diff --git a/config/webpack.prod.js b/config/webpack.prod.js
index 5a64814f..971afb8c 100644
--- a/config/webpack.prod.js
+++ b/config/webpack.prod.js
@@ -157,8 +157,10 @@ module.exports = webpackMerge(commonConfig, {
 
 
       beautify: false, //prod
+      /* eslint-disable camelcase */
       mangle: false,
       compress: { screw_ie8: true }, //prod
+      /* eslint-enable camelcase */
       comments: false //prod
     }),
 
diff --git a/package.json b/package.json
index 469372d6..149398ed 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
     "@angularclass/webpack-toolkit": "^1.3.3",
     "@angularclass/request-idle-callback": "^1.0.7",
     "@angularclass/conventions-loader": "^1.0.2",
-    "angular2-template-loader": "^0.4.0",
     "@angular/http": "2.0.0-rc.5",
     "@angular/common": "2.0.0-rc.5",
     "@angular/compiler": "2.0.0-rc.5",
@@ -23,13 +22,13 @@
     "ammap3": "github:amcharts/ammap3",
     "animate.css": "^3.5.1",
     "bootstrap": "4.0.0-alpha.2",
-    "bootstrap-loader": "1.0.10",
+    "bootstrap-loader": "1.1.2",
     "chart.js": "^1.1.1",
     "chartist": "^0.9.7",
     "ckeditor": "^4.5.9",
     "core-js": "^2.4.0",
     "easy-pie-chart": "^2.1.7",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "2.0.0-beta.3",
     "font-awesome": "^4.6.1",
     "font-awesome-sass-loader": "^1.0.1",
     "fullcalendar": "^2.7.2",
@@ -46,7 +45,7 @@
     "ng2-tree": "^0.0.2-7",
     "ng2-ckeditor": "^1.0.6",
     "ng2-smart-table": "^0.1.6",
-    "ng2-uploader": "0.5.6",
+    "ng2-uploader": "0.5.14",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.6",
     "tether": "^1.2.4",
@@ -55,9 +54,10 @@
   "devDependencies": {
     "@angularclass/hmr": "^1.0.1",
     "@angularclass/hmr-loader": "^1.0.1",
+    "angular2-template-loader": "^0.5.0",
     "@types/core-js": "^0.9.28",
     "@types/hammerjs": "^2.0.28",
-    "@types/node": "^4.0.29",
+    "@types/node": "^6.0.38",
     "@types/source-map": "^0.1.26",
     "@types/uglify-js": "^2.0.27",
     "@types/webpack": "^1.12.29",
@@ -67,13 +67,12 @@
     "parse5": "^1.5.1",
     "rimraf": "^2.5.2",
     "codelyzer": "~0.0.21",
-    "tslint": "^3.7.1",
+    "tslint": "^3.15.1",
     "ts-helpers": "1.1.1",
-    "ts-node": "^0.9.1",
+    "ts-node": "^1.3.0",
     "typedoc": "^0.4.4",
     "typescript": "^2.0.0-beta",
-    "awesome-typescript-loader": "1.1.1",
-    "angular2-template-loader": "^0.4.0",
+    "awesome-typescript-loader": "^2.2.1",
     "tslint-loader": "^2.1.3",
     "url-loader": "^0.5.7",
     "style-loader": "^0.13.1",
@@ -82,8 +81,7 @@
     "string-replace-loader": "^1.0.3",
     "imports-loader": "^0.6.5",
     "json-loader": "^0.5.4",
-    "es6-promise-loader": "^1.0.1",
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.24.0",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
     "file-loader": "^0.9.0",
@@ -93,8 +91,10 @@
     "node-sass": "^3.5.3",
     "html-webpack-plugin": "^2.21.0",
     "copy-webpack-plugin": "^3.0.1",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1",
+    "webpack": "^2.1.0-beta.21",
+    "webpack-dashboard": "^0.1.8",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-dev-server": "^2.1.0-beta.0",
     "webpack-md5-hash": "^0.0.5",
     "webpack-merge": "^0.14.0",
     "compression-webpack-plugin": "^0.3.1",
@@ -121,11 +121,11 @@
     "watch:prod": "npm run build:prod -- --watch",
     "build": "npm run build:dev",
     "prebuild:dev": "npm run clean:dist",
-    "build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
+    "build:dev": "webpack --config config/webpack.dev.js --progress --profile",
     "prebuild:prod": "npm run clean:dist",
-    "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --colors --display-error-details --display-cached --bail",
+    "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --bail",
     "server": "npm run server:dev",
-    "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
+    "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
     "server:dev:hmr": "npm run server:dev -- --inline --hot",
     "server:prod": "http-server dist --cors",
     "webdriver:update": "npm run webdriver-manager update",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9a161a18..3fe3f414 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -51,20 +51,21 @@ const APP_PROVIDERS = [
 export class AppModule {
 
   constructor(public appRef: ApplicationRef, public appState: AppState) {
-    
+
   }
 
   hmrOnInit(store) {
-    if (!store && !store.state) return;
+    if (!store || !store.state) return;
     console.log('HMR store', store);
-    this.appState.state = store.state;
+    this.appState._state = store.state;
+    this.appRef.tick();
     delete store.state;
   }
 
   hmrOnDestroy(store) {
-    let cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
+    const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
     // recreate elements
-    let state = this.appState.state;
+    const state = this.appState._state;
     store.state = state;
     store.disposeOldHosts = createNewHosts(cmpLocation);
     // remove styles
diff --git a/src/app/app.service.ts b/src/app/app.service.ts
index 93903845..c08700c4 100644
--- a/src/app/app.service.ts
+++ b/src/app/app.service.ts
@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { HmrState } from 'angular2-hmr';
 
 @Injectable()
 export class AppState {
diff --git a/src/app/environment.ts b/src/app/environment.ts
index 066edef4..8bba89c4 100644
--- a/src/app/environment.ts
+++ b/src/app/environment.ts
@@ -25,8 +25,8 @@ if ('production' === ENV) {
 } else {
 
   _decorateModuleRef = (modRef: any) => {
-    var appRef = modRef.injector.get(ApplicationRef);
-    var cmpRef = appRef.components[0];
+    const appRef = modRef.injector.get(ApplicationRef);
+    const cmpRef = appRef.components[0];
 
     let _ng = (<any>window).ng;
     enableDebugTools(cmpRef);
diff --git a/src/app/pages/login/login.html b/src/app/pages/login/login.html
index 9ca1ef9f..e7035f2f 100644
--- a/src/app/pages/login/login.html
+++ b/src/app/pages/login/login.html
@@ -1,7 +1,7 @@
 <div class="auth-main">
   <div class="auth-block">
     <h1>Sign in to ng2-admin</h1>
-    <a [routerLink]="['/register']" class="auth-link">New to ng2-admin? Sign up!</a>
+    <a routerLink="/register" class="auth-link">New to ng2-admin? Sign up!</a>
 
     <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
       <div class="form-group row" [ngClass]="{'has-error': (!email.valid && email.touched), 'has-success': (email.valid && email.touched)}">
@@ -21,7 +21,7 @@
       <div class="form-group row">
         <div class="col-sm-offset-2 col-sm-10">
           <button [disabled]="!form.valid" type="submit" class="btn btn-default btn-auth">Sign in</button>
-          <a [routerLink]="['Login']" class="forgot-pass">Forgot password?</a>
+          <a routerLink="/login" class="forgot-pass">Forgot password?</a>
         </div>
       </div>
     </form>
diff --git a/src/app/pages/pages.routing.ts b/src/app/pages/pages.routing.ts
index 731c30ca..a938b672 100644
--- a/src/app/pages/pages.routing.ts
+++ b/src/app/pages/pages.routing.ts
@@ -4,25 +4,25 @@ import { Pages } from './pages.component';
 const routes: Routes = [
   {
     path: 'login',
-    loadChildren: () => require('es6-promise-loader!app/pages/login/login.module')('default')
+    loadChildren: () => System.import('./login/login.module')
   },
   {
     path: 'register',
-    loadChildren: () => require('es6-promise-loader!app/pages/register/register.module')('default')
+    loadChildren: () => System.import('./register/register.module')
   },
   {
     path: 'pages',
     component: Pages,
     children: [
       { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
-      { path: 'dashboard', loadChildren: () => require('es6-promise-loader!app/pages/dashboard/dashboard.module')('default') },
-      { path: 'editors', loadChildren: () => require('es6-promise-loader!app/pages/editors/editors.module')('default') },
-      //{ path: 'components', loadChildren: () => require('es6-promise-loader!app/pages/components/components.module')('default') }
-      { path: 'charts', loadChildren: () => require('es6-promise-loader!app/pages/charts/charts.module')('default') },
-      { path: 'ui', loadChildren: () => require('es6-promise-loader!app/pages/ui/ui.module')('default') },
-      { path: 'forms', loadChildren: () => require('es6-promise-loader!app/pages/forms/forms.module')('default') },
-      { path: 'tables', loadChildren: () => require('es6-promise-loader!app/pages/tables/tables.module')('default') },
-      { path: 'maps', loadChildren: () => require('es6-promise-loader!app/pages/maps/maps.module')('default') }
+      { path: 'dashboard', loadChildren: () => System.import('./dashboard/dashboard.module') },
+      { path: 'editors', loadChildren: () => System.import('./editors/editors.module') },
+      //{ path: 'components', loadChildren: () => System.import('./components/components.module') }
+      { path: 'charts', loadChildren: () => System.import('./charts/charts.module') },
+      { path: 'ui', loadChildren: () => System.import('./ui/ui.module') },
+      { path: 'forms', loadChildren: () => System.import('./forms/forms.module') },
+      { path: 'tables', loadChildren: () => System.import('./tables/tables.module') },
+      { path: 'maps', loadChildren: () => System.import('./maps/maps.module') }
     ]
   }
 ];
diff --git a/src/app/pages/register/register.html b/src/app/pages/register/register.html
index a82baf6d..9b873f9c 100644
--- a/src/app/pages/register/register.html
+++ b/src/app/pages/register/register.html
@@ -1,7 +1,7 @@
 <div class="auth-main">
   <div class="auth-block">
     <h1>Sign up to ng2-admin</h1>
-    <a [routerLink]="['/login']" class="auth-link">Already have an ng2-admin account? Sign in!</a>
+    <a routerLink="/login" class="auth-link">Already have an ng2-admin account? Sign in!</a>
 
     <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
       <div class="form-group row" [ngClass]="{'has-error': (!name.valid && name.touched), 'has-success': (name.valid && name.touched)}">
diff --git a/src/app/theme/components/baPageTop/baPageTop.html b/src/app/theme/components/baPageTop/baPageTop.html
index 1c2ef555..c899c7ca 100644
--- a/src/app/theme/components/baPageTop/baPageTop.html
+++ b/src/app/theme/components/baPageTop/baPageTop.html
@@ -1,6 +1,6 @@
 <div class="page-top clearfix" baScrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)"
      [ngClass]="{scrolled: isScrolled}">
-  <a href="#/pages/dashboard" class="al-logo clearfix"><span>ng2-</span>admin</a>
+  <a routerLink="/pages/dashboard" class="al-logo clearfix"><span>ng2-</span>admin</a>
   <a (click)="toggleMenu()" class="collapse-menu-link ion-navicon"></a>
 
   <div class="search">
@@ -13,12 +13,12 @@
       <a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" data-toggle="dropdown" aria-expanded="false">
         <img src="{{ ( 'Nasta' | baProfilePicture ) }}">
       </a>
-      <div class="dropdown-menu top-dropdown-menu profile-dropdown" aria-labelledby="user-profile-dd">
+      <ul class="dropdown-menu top-dropdown-menu profile-dropdown" aria-labelledby="user-profile-dd">
         <li class="dropdown-item"><i class="dropdown-arr"></i></li>
-        <li class="dropdown-item"><a href="#/profile"><i class="fa fa-user"></i>Profile</a></li>
+        <li class="dropdown-item"><a href><i class="fa fa-user"></i>Profile</a></li>
         <li class="dropdown-item"><a href><i class="fa fa-cog"></i>Settings</a></li>
         <li class="dropdown-item"><a href class="signout"><i class="fa fa-power-off"></i>Sign out</a></li>
-      </div>
+      </ul>
     </div>
     <ba-msg-center></ba-msg-center>
   </div>
diff --git a/src/app/theme/nga.module.ts b/src/app/theme/nga.module.ts
index a9a68ee7..9f65f2e8 100644
--- a/src/app/theme/nga.module.ts
+++ b/src/app/theme/nga.module.ts
@@ -1,7 +1,7 @@
 import { NgModule }      from '@angular/core';
 import { CommonModule }  from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
 
 import {
   BaThemeConfig
@@ -97,7 +97,7 @@ const NGA_VALIDATORS = [
   ],
   imports: [
     CommonModule,
-    HttpModule,
+    RouterModule,
     FormsModule,
     ReactiveFormsModule,
   ],
diff --git a/src/custom-typings.d.ts b/src/custom-typings.d.ts
index e571fb70..2a6969c1 100644
--- a/src/custom-typings.d.ts
+++ b/src/custom-typings.d.ts
@@ -6,13 +6,13 @@
  npm install @types/lodash
  * If you can't find the type definition in the registry we can make an ambient/global definition in
  * this file for now. For example
- declare module "my-module" {
+ declare module 'my-module' {
  export function doesSomething(value: string): string;
  }
  * If you are using a CommonJS module that is using module.exports then you will have to write your
  * types using export = yourObjectOrFunction with a namespace above it
  * notice how we have to create a namespace that is equal to the function we're assigning the export to
- declare module "jwt-decode" {
+ declare module 'jwt-decode' {
  function jwtDecode(token: string): any;
  namespace jwtDecode {}
  export = jwtDecode;
@@ -40,15 +40,22 @@ declare var Chart:any;
 declare var Chartist:any;
 
 // support NodeJS modules without type definitions
-declare module "*";
+declare module '*';
 
 // Extra variables that live on Global that will be replaced by webpack DefinePlugin
 declare var ENV: string;
 declare var HMR: boolean;
+declare var System: SystemJS;
+
+interface SystemJS {
+  import: (path?: string) => Promise<any>;
+}
 
 interface GlobalEnvironment {
   ENV;
   HMR;
+  SystemJS: SystemJS;
+  System: SystemJS;
 }
 
 interface Es6PromiseLoader {
diff --git a/tsconfig.json b/tsconfig.json
index 51b761cb..356939a7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,7 +17,6 @@
       "es6"
     ],
     "types": [
-      "core-js",
       "hammerjs",
       "node",
       "source-map",