diff --git a/.travis.yml b/.travis.yml
index d090926425..b5fffa9796 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,10 +12,9 @@ before_script:
 install:
 - npm i process-nextick-args util-deprecate buffer-shims
 - npm install
-- "./node_modules/.bin/ng build"
 script:
 - npm run tslint
-- "./node_modules/.bin/ng test --watch=false"
+- npm run test
 notifications:
   slack:
     secure: pkXQL5AZiSBh1yWjilrcA7KbcJjC4xxjhd0SAwogJCQgyEf/i8/CfR1ZXiZYsIBJT6HTI7UMdJzwP6TiY/zih6Mq8PqUg38NUsvGyznILkbksMQJieWrg1r+1ideplPJFX7qdXwrOcxvSVoEFIGha26X0Fglq3kXSBHpPR9U0lDCoUxLUO35txQ/iji85Na4hjQnmtBEQkqaJogA0hRdcSLIKxwScgSrb4UU2PXEaIS9Zpr2SOG/RTOMkrrSMOD7bgocZbhAbk3c5shPZNj51gpEN+692Qxp4kQ/nfT10Hu5ATLaFCM5v04+w0D3ZJLA46LpU47qP0ALy6O9d16pGUcxJGbWaMZpV53vV9jIl9y2ahaqN1h1J9BcLIOzJvaQy92km8F7a3l7cN8gWSUZjs5Hd+gPFQH9Flcydmq26e8Maa1tQDF5R3GIdaCw4qkuJYbl4ToE59wtiPQ6M7xVKqNK4Qypu1YNsKOoLG/tZRFvp4771vgWcR5Lu/DqJJ9SAB0jsdrOXpe+0DmdrLBwhoZv2D9FTce+clDHIJ7ObPEc/UKw8rtWAA5iCPCEJ0sPl+WZwOS3ZFp4QmMC+5mzffMUiX6HBnzxiyOZvYGJD/jTy1yA1Cmt4RJYrOPM73csI1ELs5tj4tvqBNJQ8daIenfkg7u42IJfByDGIsJz8to=
diff --git a/build.conf.js b/build.conf.js
index e716b87f75..0960aabf21 100644
--- a/build.conf.js
+++ b/build.conf.js
@@ -38,9 +38,17 @@ module.exports = {
       'src/**/**.html',
       'src/**/**.md',
       'src/**/**.js',
+      'src/**/**.ts',
+      '!src/**/**.spec.ts',
       'src/**/**/package.json',
       '!src/app/**/**.html',
       '!src/app/**/**.js',
+      '!src/app/**/**.ts',
+      '!src/environments/**/**.ts',
+      '!src/polyfills.ts',
+      '!src/main.ts',
+      '!src/test.ts',
+      '!src/typings.d.ts',
       '!src/index.html'
     ]
   }
diff --git a/package.json b/package.json
index 4dcf95873a..905a75f3fc 100644
--- a/package.json
+++ b/package.json
@@ -14,13 +14,13 @@
     "tslint": "tslint -c ./tslint.json \"./src/**/*.ts\" -e \"./src/**/typings.d.ts\" -e \"./src/environments/**\"",
     "postinstall": "webdriver-manager update",
     "webdriver-update": "bash ./node_modules/.bin/webdriver-manager update",
-    "pretest": "rm -rf ./dist && ng build",
-    "test": "npm run karma",
-    "karma": "karma start ./karma.conf.js --single-run",
+    "test": "ng test --code-coverage --single-run",
+    "show-coverage-win" : "start chrome ./coverage/index.html",
     "bump-dev": "gulp bump-version",
     "bump-patch": "gulp bump-version --ver patch",
     "bump-minor": "gulp bump-version --ver minor",
     "bump-major": "gulp bump-version --ver major",
+    "aot": "./node_modules/.bin/ngc -p src/platform/tsconfig-aot.json",
     "build": "bash scripts/build-release",
     "publish": "bash scripts/publish-release",
     "ghpages-deploy": "bash scripts/ghpages-deploy",
@@ -46,34 +46,35 @@
     "Ed Morales <eduardo.morales@teradata.com>",
     "Jason Weaver <jason.weaver@teradata.com>",
     "Jeremy Wilken <jeremy.wilken@teradata.com>",
-    "Jeremy Smartt <jeremy.smartt@teradata.com>"
+    "Jeremy Smartt <jeremy.smartt@teradata.com>",
+    "Ilsun Park <ilsun.park@teradata.com>"
   ],
   "dependencies": {
-    "@angular/common": "^2.3.0",
-    "@angular/compiler": "^2.3.0",
-    "@angular/core": "^2.3.0",
-    "@angular/forms": "^2.3.0",
-    "@angular/http": "^2.3.0",
-    "@angular/material": "2.0.0-alpha.11-3",
-    "@angular/platform-browser": "^2.3.0",
-    "@angular/platform-browser-dynamic": "^2.3.0",
-    "@angular/platform-server": "^2.3.0",
-    "@angular/router": "^3.3.0",
+    "@angular/common": "^2.4.1",
+    "@angular/compiler": "^2.4.1",
+    "@angular/core": "^2.4.1",
+    "@angular/forms": "^2.4.1",
+    "@angular/http": "^2.4.1",
+    "@angular/material": "2.0.0-beta.1",
+    "@angular/platform-browser": "^2.4.1",
+    "@angular/platform-browser-dynamic": "^2.4.1",
+    "@angular/platform-server": "^2.4.1",
+    "@angular/router": "^3.4.1",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "highlight.js": "9.6.0",
-    "rxjs": "5.0.0-rc.4",
+    "rxjs": "^5.0.1",
     "showdown": "1.4.2",
     "zone.js": "^0.7.2",
     "d3": "^4.2.1"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.3.0",
+    "@angular/compiler-cli": "^2.4.1",
     "@types/hammerjs": "^2.0.30",
     "@types/jasmine": "^2.2.31",
     "@types/node": "^6.0.34",
     "@types/selenium-webdriver": "^2.52.0",
-    "angular-cli": "1.0.0-beta.19-3",
+    "angular-cli": "1.0.0-beta.24",
     "codelyzer": "~0.0.26",
     "awesome-typescript-loader": "^2.2.4",
     "ember-cli-inject-live-reload": "1.4.0",
diff --git a/public/.npmignore b/public/.npmignore
index e69de29bb2..84d292728a 100644
--- a/public/.npmignore
+++ b/public/.npmignore
@@ -0,0 +1,4 @@
+# compiled aot output
+*.ngsummary.json
+*.ngfactory.ts
+*.shim.ngstyle.ts
\ No newline at end of file
diff --git a/scripts/build-release b/scripts/build-release
index 2886adbb60..145e7831a7 100644
--- a/scripts/build-release
+++ b/scripts/build-release
@@ -6,6 +6,11 @@ rm -rf ./deploy
 # Perform a build.
 gulp build
 echo "Platform compiled..."
+# AoT compilation
+npm run aot
+echo "Generated *.metadata.json files..."
+gulp clean-aot
+echo "Cleaned AoT excess"
 # Inline the css and html into the component files.
 gulp inline-resource-files
 echo "Files inlined..."
diff --git a/scripts/clean-aot.js b/scripts/clean-aot.js
new file mode 100644
index 0000000000..8a0969e113
--- /dev/null
+++ b/scripts/clean-aot.js
@@ -0,0 +1,13 @@
+'use strict';
+
+var gulp = require('gulp-help')(require('gulp'));
+var del = require('del');
+
+gulp.task('clean-aot', "Clean unwanted AoT files from /deploy folder", function() {
+  return del([
+    'deploy/**/*.ngsummary.json',
+    'deploy/**/*.ngfactory.ts',
+    'deploy/**/*.shim.ngstyle.ts',
+    'deploy/**/node_modules/'
+  ]);
+});
\ No newline at end of file
diff --git a/scripts/compile-ts.js b/scripts/compile-ts.js
index d1b7439a7b..f55bdf98a1 100644
--- a/scripts/compile-ts.js
+++ b/scripts/compile-ts.js
@@ -11,18 +11,20 @@ var tsProject = ts.createProject({
       emitDecoratorMetadata: true,
       experimentalDecorators: true,
       mapRoot: "./",
-      lib: ["es6", "dom"],
-      module: "es6",
+      lib: ["es6", "es2015", "dom"],
+      module: "es2015",
       moduleResolution: "node",
       noEmitOnError: true,
-      noImplicitAny: false,
+      noImplicitAny: true,
       target: "ES5",
+      inlineSources: true,
+      stripInternal: false,
       typescript: require('typescript'),
       typeRoots: [
         "../node_modules/@types"
       ],
       types: [
-        "hammerjs"
+        "jasmine", "hammerjs", "rxjs"
       ]
     });
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5b1abb19f1..13e8237621 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<td-layout #layout sidenavTitle="Covalent" logo="app/assets/icons/teradata.svg" displayName="">
+<td-layout #layout sidenavTitle="Covalent" logo="assets:teradata" displayName="">
   <md-nav-list menu-items>
     <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()"><md-icon>{{item.icon}}</md-icon>{{item.title}}</a>
   </md-nav-list>
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index eea1a340e5..6f44e55943 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -13,7 +13,7 @@ import { DocsAppComponent } from './app.component';
 describe('Component: App', () => {
 
   let generalResponses: Map<string, Response> = new Map<string, Response>();
-  generalResponses.set('app/assets/icons/teradata.svg', new Response(new ResponseOptions({
+  generalResponses.set('/app/assets/icons/teradata.svg', new Response(new ResponseOptions({
     status: 200, body: '<svg></svg>',
   })));
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 83f111a571..4fdfa2e4da 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MdIconRegistry } from '@angular/material';
 
 @Component({
   selector: 'docs-covalent',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.scss'],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
 })
 export class DocsAppComponent {
 
@@ -29,4 +31,22 @@ export class DocsAppComponent {
       title: 'Components & Addons',
     },
   ];
+
+  constructor(private _iconRegistry: MdIconRegistry,
+              private _domSanitizer: DomSanitizer) {
+    this._iconRegistry.addSvgIconInNamespace('assets', 'teradata',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/teradata.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'github',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/github.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'covalent',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/covalent.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'teradata-ux',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/teradata-ux.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'appcenter',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/appcenter.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'listener',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/listener.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'querygrid',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/querygrid.svg'));
+  }
 }
diff --git a/src/app/components/components/charts/charts.component.ts b/src/app/components/components/charts/charts.component.ts
index ed76b3e992..6cc4374799 100644
--- a/src/app/components/components/charts/charts.component.ts
+++ b/src/app/components/components/charts/charts.component.ts
@@ -2,8 +2,8 @@ import { Component} from '@angular/core';
 
 @Component({
   selector: 'charts-demo',
-  styleUrls: ['charts.component.scss'],
-  templateUrl: 'charts.component.html',
+  styleUrls: ['./charts.component.scss'],
+  templateUrl: './charts.component.html',
 })
 export class ChartsDemoComponent {
 
diff --git a/src/app/components/components/chips/chips.component.ts b/src/app/components/components/chips/chips.component.ts
index 23c8820e4b..080e193e5a 100644
--- a/src/app/components/components/chips/chips.component.ts
+++ b/src/app/components/components/chips/chips.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'chips-demo',
-  styleUrls: ['chips.component.scss'],
-  templateUrl: 'chips.component.html',
+  styleUrls: ['./chips.component.scss'],
+  templateUrl: './chips.component.html',
 })
 export class ChipsDemoComponent {
 
diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html
index 76816f83d7..af0d16182e 100644
--- a/src/app/components/components/components.component.html
+++ b/src/app/components/components/components.component.html
@@ -1,4 +1,4 @@
-<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
+<td-layout-nav-list #list logo="assets:teradata" toolbarTitle="Covalent">
   <md-nav-list list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item 
diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts
index b9cfb1dca1..e2218e151a 100644
--- a/src/app/components/components/components.component.ts
+++ b/src/app/components/components/components.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-components',
-  styleUrls: ['components.component.scss'],
-  templateUrl: 'components.component.html',
+  styleUrls: ['./components.component.scss'],
+  templateUrl: './components.component.html',
 })
 export class ComponentsComponent {
 
diff --git a/src/app/components/components/components.module.ts b/src/app/components/components/components.module.ts
index e5f64e250a..8423cab8e0 100644
--- a/src/app/components/components/components.module.ts
+++ b/src/app/components/components/components.module.ts
@@ -21,7 +21,7 @@ import { ChartsDemoComponent } from './charts/charts.component';
 import { DataTableDemoComponent } from './data-table/data-table.component';
 import { PagingDemoComponent } from './paging/paging.component';
 import { SearchDemoComponent } from './search/search.component';
-import { MaterialComponentsComponent } from './material-components/material-components.component';
+import { MaterialComponentsComponent, DialogComponent } from './material-components/material-components.component';
 
 import { CovalentCoreModule } from '../../../platform/core';
 import { CovalentHighlightModule } from '../../../platform/highlight';
@@ -50,6 +50,7 @@ import { CovalentChartsModule } from '../../../platform/charts';
     PagingDemoComponent,
     SearchDemoComponent,
     MaterialComponentsComponent,
+    DialogComponent,
   ],
   imports: [
     CovalentCoreModule.forRoot(),
@@ -58,5 +59,6 @@ import { CovalentChartsModule } from '../../../platform/charts';
     CovalentChartsModule.forRoot(),
     componentsRoutes,
   ],
+  entryComponents: [ DialogComponent ],
 })
 export class ComponentsModule {}
diff --git a/src/app/components/components/data-table/data-table.component.ts b/src/app/components/components/data-table/data-table.component.ts
index 02189a6356..2fb6b836c8 100644
--- a/src/app/components/components/data-table/data-table.component.ts
+++ b/src/app/components/components/data-table/data-table.component.ts
@@ -10,8 +10,8 @@ const DECIMAL_FORMAT: (v: any) => any = (v: number) => v.toFixed(2);
 
 @Component({
   selector: 'data-table-demo',
-  styleUrls: ['data-table.component.scss'],
-  templateUrl: 'data-table.component.html',
+  styleUrls: ['./data-table.component.scss'],
+  templateUrl: './data-table.component.html',
 })
 export class DataTableDemoComponent implements OnInit {
 
diff --git a/src/app/components/components/dialogs/dialogs.component.ts b/src/app/components/components/dialogs/dialogs.component.ts
index afd67e26a9..ef81dbf07a 100644
--- a/src/app/components/components/dialogs/dialogs.component.ts
+++ b/src/app/components/components/dialogs/dialogs.component.ts
@@ -4,8 +4,8 @@ import { TdDialogService } from '../../../../platform/core';
 
 @Component({
   selector: 'dialogs-demo',
-  styleUrls: ['dialogs.component.scss'],
-  templateUrl: 'dialogs.component.html',
+  styleUrls: ['./dialogs.component.scss'],
+  templateUrl: './dialogs.component.html',
 })
 export class DialogsDemoComponent {
 
diff --git a/src/app/components/components/directives/directives.component.html b/src/app/components/components/directives/directives.component.html
index 5b266ef91a..b0ffc8253a 100644
--- a/src/app/components/components/directives/directives.component.html
+++ b/src/app/components/components/directives/directives.component.html
@@ -22,12 +22,16 @@
     <p class="md-body-1">Use <code>tdAutoTrim</code> on an input to automatically trim the characters.</p>
     <p>Try entering white spaces before or after a word this input:</p>
     <div layout="row">
-      <md-input flex tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"></md-input>
+      <md-input-container flex>
+        <input md-input tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"/>
+      </md-input-container>
     </div>
     <p>Usage:</p>
     <td-highlight lang="html">
         <![CDATA[
-          <md-input tdAutoTrim [(ngModel)]="yourmodel" placeholder="This will be autotrimmed"></md-input>
+          <md-input-container>
+            <input md-input tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"/>
+          </md-input-container>
         ]]>
     </td-highlight>
   </md-card-content>
@@ -114,14 +118,18 @@
     </ul>
     <p>Example enter lower than 5 or higher than 10:</p>
     <div layout="row">
-      <md-input flex="20" placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required></md-input>
+      <md-input-container flex="20">
+        <input md-input placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required/>
+      </md-input-container>
     </div>
     <p>Errors:</p>
     <code>{{el?.errors | json}}</code>
     <p>HTML:</p>
     <td-highlight lang="html">
         <![CDATA[
-          <md-input placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required></md-input>
+          <md-input-container>
+            <input md-input placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required/>
+          </md-input-container>
         ]]>
     </td-highlight>
   </md-card-content>
diff --git a/src/app/components/components/directives/directives.component.ts b/src/app/components/components/directives/directives.component.ts
index ebf9a44233..d544033fbb 100644
--- a/src/app/components/components/directives/directives.component.ts
+++ b/src/app/components/components/directives/directives.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'directives-demo',
-  styleUrls: [ 'directives.component.scss' ],
-  templateUrl: 'directives.component.html',
+  styleUrls: ['./directives.component.scss' ],
+  templateUrl: './directives.component.html',
 })
 export class DirectivesComponent {
 
diff --git a/src/app/components/components/expansion-panel/expansion-panel.component.html b/src/app/components/components/expansion-panel/expansion-panel.component.html
index c40b78f75a..6b8c58155a 100644
--- a/src/app/components/components/expansion-panel/expansion-panel.component.html
+++ b/src/app/components/components/expansion-panel/expansion-panel.component.html
@@ -24,32 +24,19 @@ <h4 md-line>Headquarters</h4>
             </md-list-item>
           </md-list>
         </td-expansion-summary>
-        <form class="md-padding">
-          <md-input class="demo-full-width" placeholder="Company (disabled)" disabled value="Google">
-          </md-input>
-          <table style="width: 100%" cellspacing="0"><tr>
-            <td><md-input placeholder="First name" style="width: 100%"></md-input></td>
-            <td><md-input placeholder="Long Last Name That Will Be Truncated" style="width: 100%"></md-input></td>
-          </tr></table>
-          <p>
-            <md-input class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkwy"></md-input>
-            <md-input class="demo-full-width" placeholder="Address 2"></md-input>
-          </p>
-          <table style="width: 100%" cellspacing="0"><tr>
-            <td><md-input class="demo-full-width" placeholder="City"></md-input></td>
-            <td><md-input class="demo-full-width" placeholder="State"></md-input></td>
-            <td><md-input #postalCode class="demo-full-width" maxLength="5"
-                          placeholder="Postal Code"
-                          value="94043">
-            </md-input></td>
-          </tr></table>
-          <md-divider></md-divider>
-          <div layout="row" layout-margin layout-align="end center">
-            
-            <button md-button>Cancel</button>
-            <button md-button color="accent">Save</button>
-          </div>
+        <form class="md-padding" layout="column">
+          <md-input-container flex>
+            <input md-input placeholder="Company (disabled)" disabled value="Google"/>
+          </md-input-container>
+          <md-input-container flex>
+            <textarea md-input placeholder="Description" rows="4"></textarea>
+          </md-input-container>
         </form>
+        <md-divider></md-divider>
+        <div layout="row" layout-margin layout-align="end center">
+          <button md-button>Cancel</button>
+          <button md-button color="accent">Save</button>
+        </div>
       </td-expansion-panel>
       <td-expansion-panel label="Label goes here" sublabel="sublabel goes here" [disabled]="disabled">
         <div class="md-padding">
diff --git a/src/app/components/components/expansion-panel/expansion-panel.component.ts b/src/app/components/components/expansion-panel/expansion-panel.component.ts
index bf31bbeb13..709e677b6f 100644
--- a/src/app/components/components/expansion-panel/expansion-panel.component.ts
+++ b/src/app/components/components/expansion-panel/expansion-panel.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'expansion-panel-demo',
-  styleUrls: ['expansion-panel.component.scss'],
-  templateUrl: 'expansion-panel.component.html',
+  styleUrls: ['./expansion-panel.component.scss'],
+  templateUrl: './expansion-panel.component.html',
 })
 export class ExpansionPanelDemoComponent {
 
diff --git a/src/app/components/components/file-upload/file-upload.component.ts b/src/app/components/components/file-upload/file-upload.component.ts
index 51e3174889..175d30f148 100644
--- a/src/app/components/components/file-upload/file-upload.component.ts
+++ b/src/app/components/components/file-upload/file-upload.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'file-upload-demo',
-  styleUrls: ['file-upload.component.scss'],
-  templateUrl: 'file-upload.component.html',
+  styleUrls: ['./file-upload.component.scss'],
+  templateUrl: './file-upload.component.html',
 })
 export class FileUploadDemoComponent {
 
diff --git a/src/app/components/components/highlight/highlight.component.ts b/src/app/components/components/highlight/highlight.component.ts
index ad3d4ee972..236c5dccbd 100644
--- a/src/app/components/components/highlight/highlight.component.ts
+++ b/src/app/components/components/highlight/highlight.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'highlight-demo',
-  styleUrls: ['highlight.component.scss'],
-  templateUrl: 'highlight.component.html',
+  styleUrls: ['./highlight.component.scss'],
+  templateUrl: './highlight.component.html',
 })
 export class HighlightDemoComponent {
 
diff --git a/src/app/components/components/http/http.component.ts b/src/app/components/components/http/http.component.ts
index 0bf6626df8..1e109e9737 100644
--- a/src/app/components/components/http/http.component.ts
+++ b/src/app/components/components/http/http.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'http-demo',
-  styleUrls: [ 'http.component.scss' ],
-  templateUrl: 'http.component.html',
+  styleUrls: ['./http.component.scss' ],
+  templateUrl: './http.component.html',
 })
 export class HttpDemoComponent {
 
diff --git a/src/app/components/components/json-formatter/json-formatter.component.ts b/src/app/components/components/json-formatter/json-formatter.component.ts
index 37c294f9ef..a817532dec 100644
--- a/src/app/components/components/json-formatter/json-formatter.component.ts
+++ b/src/app/components/components/json-formatter/json-formatter.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'json-formatter-demo',
-  styleUrls: ['json-formatter.component.scss'],
-  templateUrl: 'json-formatter.component.html',
+  styleUrls: ['./json-formatter.component.scss'],
+  templateUrl: './json-formatter.component.html',
 })
 export class JsonFormatterDemoComponent {
 
diff --git a/src/app/components/components/loading/loading.component.html b/src/app/components/components/loading/loading.component.html
index cfdf2d4cc0..62f0ca3b15 100644
--- a/src/app/components/components/loading/loading.component.html
+++ b/src/app/components/components/loading/loading.component.html
@@ -5,8 +5,8 @@
   <md-card-content>
     <div layout="row" layout-align="start center" flex>
       <md-button-toggle-group name="mode" [(ngModel)]="determinate" (click)="modeChange()">
-        <md-button-toggle md-tooltip="Indeterminate Loading" [value]="0"><md-icon>timer_off</md-icon> Indeterminate</md-button-toggle>
-        <md-button-toggle md-tooltip="Determinate Loading" [value]="1"><md-icon>timer</md-icon> Determinate</md-button-toggle>
+        <md-button-toggle mdTooltip="Indeterminate Loading" [value]="0"><md-icon>timer_off</md-icon> Indeterminate</md-button-toggle>
+        <md-button-toggle mdTooltip="Determinate Loading" [value]="1"><md-icon>timer</md-icon> Determinate</md-button-toggle>
       </md-button-toggle-group>
     </div>
     <p>Loading Registered: {{replaceRegistered}} times</p>
@@ -15,19 +15,23 @@ <h3>Indeterminate Mode</h3>
       <p>Circular Type</p>
       <template tdLoading="test.indeterminate">
         <div layout="column" flex>
-          <md-input placeholder="Name" maxLength="20" [(ngModel)]="demo.name">
-          </md-input>
-          <md-input placeholder="Description" maxLength="100" [(ngModel)]="demo.desc">
-          </md-input>
+          <md-input-container flex>
+            <input md-input placeholder="Name" maxLength="20" [(ngModel)]="demo.name"/>
+          </md-input-container>
+          <md-input-container flex>
+            <textarea md-input placeholder="Description" maxLength="100" [(ngModel)]="demo.desc" rows="4"></textarea>
+          </md-input-container>
         </div>
       </template>
       <p>Linear Type</p>
       <template tdLoading="test2.indeterminate" loadingType="linear">
         <div layout="column" flex>
-          <md-input placeholder="Name" maxLength="20" [(ngModel)]="demo2.name">
-          </md-input>
-          <md-input placeholder="Description" maxLength="100" [(ngModel)]="demo2.desc">
-          </md-input>
+          <md-input-container flex>
+            <input md-input placeholder="Name" maxLength="20" [(ngModel)]="demo2.name"/>
+          </md-input-container>
+          <md-input-container flex>
+            <textarea md-input placeholder="Description" maxLength="100" [(ngModel)]="demo2.desc" rows="4"></textarea>
+          </md-input-container>
         </div>
       </template>
     </div>
@@ -36,19 +40,23 @@ <h3>Determinate Mode</h3>
       <p>Circular Type</p>
       <template tdLoading="test.determinate" loadingMode="determinate">
         <div layout="column" flex>
-          <md-input placeholder="Name" maxLength="20" [(ngModel)]="demo.name">
-          </md-input>
-          <md-input placeholder="Description" maxLength="100" [(ngModel)]="demo.desc">
-          </md-input>
+          <md-input-container flex>
+            <input md-input placeholder="Name" maxLength="20" [(ngModel)]="demo.name"/>
+          </md-input-container>
+          <md-input-container flex>
+            <textarea md-input placeholder="Description" maxLength="100" [(ngModel)]="demo.desc" rows="4"></textarea>
+          </md-input-container>
         </div>
       </template>
       <p>Linear Type</p>
       <template tdLoading="test2.determinate" loadingType="linear" loadingMode="determinate">
         <div layout="column" flex>
-          <md-input placeholder="Name" maxLength="20" [(ngModel)]="demo2.name">
-          </md-input>
-          <md-input placeholder="Description" maxLength="100" [(ngModel)]="demo2.desc">
-          </md-input>
+          <md-input-container flex>
+            <input md-input placeholder="Name" maxLength="20" [(ngModel)]="demo2.name"/>
+          </md-input-container>
+          <md-input-container flex>
+            <textarea md-input placeholder="Description" maxLength="100" [(ngModel)]="demo2.desc" rows="4"></textarea>
+          </md-input-container>
         </div>
       </template>
     </div>
diff --git a/src/app/components/components/loading/loading.component.ts b/src/app/components/components/loading/loading.component.ts
index 56965f55a9..a5d25d3444 100644
--- a/src/app/components/components/loading/loading.component.ts
+++ b/src/app/components/components/loading/loading.component.ts
@@ -4,8 +4,8 @@ import { TdLoadingService, ILoadingOptions, LoadingType, LoadingMode } from '../
 
 @Component({
   selector: 'loading-demo',
-  styleUrls: [ 'loading.component.scss' ],
-  templateUrl: 'loading.component.html',
+  styleUrls: ['./loading.component.scss' ],
+  templateUrl: './loading.component.html',
 })
 export class LoadingDemoComponent implements AfterViewInit {
 
diff --git a/src/app/components/components/markdown/markdown.component.ts b/src/app/components/components/markdown/markdown.component.ts
index 51f8c19824..0db99276ef 100644
--- a/src/app/components/components/markdown/markdown.component.ts
+++ b/src/app/components/components/markdown/markdown.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'markdown-demo',
-  styleUrls: ['markdown.component.scss'],
-  templateUrl: 'markdown.component.html',
+  styleUrls: ['./markdown.component.scss'],
+  templateUrl: './markdown.component.html',
 })
 export class MarkdownDemoComponent {
 
diff --git a/src/app/components/components/material-components/material-components.component.html b/src/app/components/components/material-components/material-components.component.html
index 552622b885..9fb97319d3 100644
--- a/src/app/components/components/material-components/material-components.component.html
+++ b/src/app/components/components/material-components/material-components.component.html
@@ -20,10 +20,10 @@
       <button md-icon-button>
         <md-icon>favorite</md-icon>
       </button>
-      <button md-fab>
+      <button md-fab color="primary">
         <md-icon>add</md-icon>
       </button>
-      <button md-mini-fab>
+      <button md-mini-fab color="accent">
         <md-icon>add</md-icon>
       </button>
     </md-card-actions>
@@ -41,10 +41,10 @@
         <md-icon>favorite</md-icon>
       </button>
       <!-- FAB Buttons -->
-      <button md-fab>
+      <button md-fab color="primary">
         <md-icon>add</md-icon>
       </button>
-      <button md-mini-fab>
+      <button md-mini-fab color="accent">
         <md-icon>add</md-icon>
       </button>
     ]]>
@@ -58,7 +58,7 @@
       <button md-raised-button color="warn">WARN</button>
       <button md-button disabled>off</button>
       <button md-raised-button disabled>off</button>
-      <button md-mini-fab disabled><md-icon>check circle</md-icon></button>
+      <button md-mini-fab disabled  color="primary"><md-icon>check circle</md-icon></button>
     </md-card-actions>
 
   </md-card-content>
@@ -73,7 +73,7 @@
       <!-- Disabled Buttons -->
       <button md-button disabled>off</button>
       <button md-raised-button disabled>off</button>
-      <button md-mini-fab disabled><md-icon>check circle</md-icon></button>
+      <button md-mini-fab disabled  color="primary"><md-icon>check circle</md-icon></button>
     ]]>
     </td-highlight>
   </md-card-content>
@@ -169,11 +169,11 @@ <h3>Usage within Forms</h3>
             <button md-raised-button [disabled]="!user.agreesToTOS" style="margin-left: 10px;">Sign Up</button>
           </div>
           <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
-          <md-checkbox align="end">
+          <md-checkbox labelPosition="after">
             I come after my label.
           </md-checkbox>
           <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
-          <md-checkbox>I come before my label</md-checkbox>
+          <md-checkbox labelPosition="before">I come before my label</md-checkbox>
           <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
         </form>
 
@@ -188,11 +188,11 @@ <h3>Usage within Forms</h3>
               <button type="submit" md-raised-button [disabled]="!user.agreesToTOS">Sign Up</button>
             </div>
 
-            <md-checkbox align="end">
+            <md-checkbox labelPosition="after">
               I come after my label.
             </md-checkbox>
 
-            <md-checkbox>I come before my label</md-checkbox>
+            <md-checkbox labelPosition="before">I come before my label</md-checkbox>
           </form>
         ]]>
         </td-highlight>
@@ -260,29 +260,29 @@ <h3>Basic Icons</h3>
       <md-card-actions>
         <h3>Icons with Buttons</h3>
         <button md-icon-button>
-            <md-icon class="md-24">favorite</md-icon>
+            <md-icon>favorite</md-icon>
         </button>
-        <button md-fab>
-            <md-icon class="md-24">shopping_cart</md-icon>
+        <button md-fab color="accent">
+            <md-icon>shopping_cart</md-icon>
         </button>
-        <button md-mini-fab>
-            <md-icon class="md-24">add</md-icon>
+        <button md-mini-fab color="accent">
+            <md-icon>add</md-icon>
         </button>
-        <button md-mini-fab disabled><md-icon>backup</md-icon></button>
+        <button md-mini-fab color="accent" disabled><md-icon>backup</md-icon></button>
       </md-card-actions>
       <td-highlight lang="html">
       <![CDATA[
         <!-- Icons and Buttons -->
         <button md-icon-button>
-            <md-icon class="md-24">favorite</md-icon>
+            <md-icon>favorite</md-icon>
         </button>
-        <button md-fab>
-            <md-icon class="md-24">shopping_cart</md-icon>
+        <button md-fab color="accent">
+            <md-icon>shopping_cart</md-icon>
         </button>
-        <button md-mini-fab>
-            <md-icon class="md-24">add</md-icon>
+        <button md-mini-fab color="accent">
+            <md-icon>add</md-icon>
         </button>
-        <button md-mini-fab disabled><md-icon>backup</md-icon></button>
+        <button md-mini-fab color="accent" disabled><md-icon>backup</md-icon></button>
       ]]>
       </td-highlight>
     </div>
@@ -298,30 +298,42 @@ <h3>Icons with Buttons</h3>
   <md-divider></md-divider>
   <md-card-content>
     <form>
-      <md-input style="margin-right: 20px;" placeholder="Company (disabled)" disabled value="Google">
-      </md-input>
-
-      <md-input placeholder="amount" align="end">
-        <span md-prefix>$&nbsp;</span>
-        <span md-suffix>.00</span>
-      </md-input>
+      <div layout="row" layout-margin>
+        <md-input-container flex>
+          <input md-input placeholder="Company (disabled)" disabled value="Google">
+        </md-input-container>
+      </div>
+      <div layout="row" layout-margin>
+        <md-input-container flex>
+          <input md-input placeholder="First name">
+        </md-input-container>
+        <md-input-container flex>
+          <input md-input placeholder="Long Last Name That Will Be Truncated">
+        </md-input-container>
+      </div>
 
-      <div layout="row" layout-align="start center">
-        <md-input placeholder="First name" style="margin-right: 20px; width: 100%;"></md-input>
-        <md-input placeholder="Long Last Name That Will Be Truncated" style="width: 100%"></md-input>
+      <div layout="row" layout-margin>
+        <md-input-container flex>
+          <textarea md-input placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
+        </md-input-container>
       </div>
-      <div layout="row" layout-align="start center">
-        <md-input style="margin-right: 20px; width: 100%;" placeholder="Address" value="1600 Amphitheatre Pkway"></md-input>
-        <md-input style="width: 100%;" placeholder="Address 2"></md-input>
+      <div layout="row" layout-margin>
+        <md-input-container flex>
+          <textarea md-input placeholder="Address 2"></textarea>
+        </md-input-container>
       </div>
-      <div layout="row" layout-align="space-between center">
-        <md-input placeholder="City"></md-input>
-        <md-input placeholder="State"></md-input>
-        <md-input #postalCode class="demo-full-width" maxLength="5"
-                      placeholder="Postal Code"
-                      value="94043">
-          <md-hint align="end">{{postalCode.characterCount}} / 5</md-hint>
-        </md-input>
+
+      <div layout="row" layout-margin>
+        <md-input-container flex>
+          <input md-input placeholder="City">
+        </md-input-container>
+        <md-input-container flex>
+          <input md-input placeholder="State">
+        </md-input-container>
+        <md-input-container flex>
+          <input md-input #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+          <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
+        </md-input-container>
       </div>
     </form>
   </md-card-content>
@@ -330,30 +342,42 @@ <h3>Icons with Buttons</h3>
     <![CDATA[
       <!-- Inputs -->
       <form>
-        <md-input style="margin-right: 20px;" placeholder="Company (disabled)" disabled value="Google">
-        </md-input>
-
-        <md-input placeholder="amount" align="end">
-          <span md-prefix>$&nbsp;</span>
-          <span md-suffix>.00</span>
-        </md-input>
+        <div layout="row" layout-margin>
+          <md-input-container flex>
+            <input md-input placeholder="Company (disabled)" disabled value="Google">
+          </md-input-container>
+        </div>
+        <div layout="row" layout-margin>
+          <md-input-container flex>
+            <input md-input placeholder="First name">
+          </md-input-container>
+          <md-input-container flex>
+            <input md-input placeholder="Long Last Name That Will Be Truncated">
+          </md-input-container>
+        </div>
 
-        <div layout="row" layout-align="start center">
-          <md-input placeholder="First name" style="margin-right: 20px; width: 100%;"></md-input>
-          <md-input placeholder="Long Last Name That Will Be Truncated" style="width: 100%"></md-input>
+        <div layout="row" layout-margin>
+          <md-input-container flex>
+            <textarea md-input placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
+          </md-input-container>
         </div>
-        <div layout="row" layout-align="start center">
-          <md-input style="margin-right: 20px; width: 100%;" placeholder="Address" value="1600 Amphitheatre Pkway"></md-input>
-          <md-input style="width: 100%;" placeholder="Address 2"></md-input>
+        <div layout="row" layout-margin>
+          <md-input-container flex>
+            <textarea md-input placeholder="Address 2"></textarea>
+          </md-input-container>
         </div>
-        <div layout="row" layout-align="space-between center">
-          <md-input placeholder="City"></md-input>
-          <md-input placeholder="State"></md-input>
-          <md-input #postalCode class="demo-full-width" maxLength="5"
-                        placeholder="Postal Code"
-                        value="94043">
-            <md-hint align="end">{{postalCode.characterCount}} / 5</md-hint>
-          </md-input>
+
+        <div layout="row" layout-margin>
+          <md-input-container flex>
+            <input md-input placeholder="City">
+          </md-input-container>
+          <md-input-container flex>
+            <input md-input placeholder="State">
+          </md-input-container>
+          <md-input-container flex>
+            <input md-input #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+            <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
+          </md-input-container>
         </div>
       </form>
     ]]>
@@ -578,20 +602,20 @@ <h4>Colors</h4>
 
     <div flex="48">
       <!-- Progress circles-->
-      <h3>Progress Circles</h3>
+      <h3>Progress Spinner</h3>
 
       <div layout="row">
 
         <div>
           <h4>Determinate</h4>
-          <md-progress-circle mode="determinate" value="66"></md-progress-circle>
+          <md-progress-spinner mode="determinate" value="66"></md-progress-spinner>
 
         </div>
 
         <div>
 
           <h4>indeterminate</h4>
-          <md-progress-circle mode="indeterminate"></md-progress-circle>
+          <md-progress-spinner mode="indeterminate"></md-progress-spinner>
 
         </div>
 
@@ -608,9 +632,9 @@ <h4>Spinner</h4>
 
         <h4>Colors</h4>
         <div layout="row">
-          <md-progress-circle mode="indeterminate" color="primary"></md-progress-circle>
-          <md-progress-circle mode="indeterminate" color="accent"></md-progress-circle>
-          <md-progress-circle mode="indeterminate" color="warn"></md-progress-circle>
+          <md-progress-spinner mode="indeterminate" color="primary"></md-progress-spinner>
+          <md-progress-spinner mode="indeterminate" color="accent"></md-progress-spinner>
+          <md-progress-spinner mode="indeterminate" color="warn"></md-progress-spinner>
         </div>
         <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
 
@@ -623,12 +647,12 @@ <h4>Colors</h4>
       <div layout="row">
         <div>
           <h4>Determinate</h4>
-          <md-progress-circle mode="determinate" value="66"></md-progress-circle>
+          <md-progress-spinner mode="determinate" value="66"></md-progress-spinner>
         </div>
 
         <div>
           <h4>indeterminate</h4>
-          <md-progress-circle mode="indeterminate"></md-progress-circle>
+          <md-progress-spinner mode="indeterminate"></md-progress-spinner>
         </div>
 
         <div>
@@ -640,9 +664,9 @@ <h4>Spinner</h4>
       <div>
         <h4>Colors</h4>
         <div layout="row">
-          <md-progress-circle mode="indeterminate" color="primary"></md-progress-circle>
-          <md-progress-circle mode="indeterminate" color="accent"></md-progress-circle>
-          <md-progress-circle mode="indeterminate" color="warn"></md-progress-circle>
+          <md-progress-spinner mode="indeterminate" color="primary"></md-progress-spinner>
+          <md-progress-spinner mode="indeterminate" color="accent"></md-progress-spinner>
+          <md-progress-spinner mode="indeterminate" color="warn"></md-progress-spinner>
         </div>
       </div>
       ]]>
@@ -721,43 +745,49 @@ <h3>Dynamic Radios</h3>
     <div class="demo-toolbar">
       <p>The default color toolbar:</p>
       <md-toolbar>
-        <button md-button href="#" md-icon-button>
+        <button md-icon-button>
           <md-icon>menu</md-icon>
         </button>
         <span>Default Toolbar</span>
         <span flex></span>
-        <button md-button href="#" md-icon-button>
-          <md-icon>search</md-icon>
-        </button>
-        <button md-button href="#" md-icon-button>
-          <md-icon>more_vert</md-icon>
-        </button>
+        <td-search-box placeholder="Search" [alwaysVisible]="alwaysVisible" flex></td-search-box>
+        <button md-icon-button [mdMenuTriggerFor]="toolbarMenu1"><md-icon>more_vert</md-icon></button>
+        <md-menu #toolbarMenu1="mdMenu">
+          <button md-menu-item>
+            <md-icon>settings</md-icon>
+            <span>Settings</span>
+          </button>
+          <button md-menu-item>
+            <md-icon>exit_to_app</md-icon>
+            <span>Sign out</span>
+          </button>
+        </md-menu>
       </md-toolbar>
       <p>The primary color toolbar:</p>
       <md-toolbar color="primary">
-        <button md-button href="#" md-icon-button>
+        <button md-icon-button>
           <md-icon>menu</md-icon>
         </button>
         <span>Primary Toolbar</span>
         <span flex></span>
-        <button md-button href="#" md-icon-button>
+        <button md-icon-button>
           <md-icon>search</md-icon>
         </button>
-        <button md-button href="#" md-icon-button>
+        <button md-icon-button>
           <md-icon>more_vert</md-icon>
         </button>
       </md-toolbar>
       <p>The accent color toolbar:</p>
       <md-toolbar color="accent">
-        <button md-button href="#" md-icon-button>
+        <button md-icon-button>
           <md-icon>menu</md-icon>
         </button>
         <span>Accent Toolbar</span>
         <span flex></span>
-        <button md-button href="#" md-icon-button>
+        <button md-icon-button>
           <md-icon>search</md-icon>
         </button>
-        <button md-button href="#" md-icon-button>
+        <button md-icon-button>
           <md-icon>more_vert</md-icon>
         </button>
       </md-toolbar>
@@ -772,8 +802,12 @@ <h3>Dynamic Radios</h3>
         <md-toolbar-row></md-toolbar-row>
         <md-toolbar-row>
           <span flex>Third Line Toolbar</span>
-          <md-icon class="demo-toolbar-icon">favorite</md-icon>
-          <md-icon class="demo-toolbar-icon">delete</md-icon>
+          <button md-icon-button>
+            <md-icon>favorite</md-icon>
+          </button>
+          <button md-icon-button>
+            <md-icon>delete</md-icon>
+          </button>
         </md-toolbar-row>
       </md-toolbar>
 
@@ -783,45 +817,51 @@ <h3>Dynamic Radios</h3>
       <![CDATA[
         <!-- toolbar start -->
         <md-toolbar>
-          <button md-button href="#" md-icon-button>
+          <button md-icon-button>
             <md-icon>menu</md-icon>
           </button>
           <span>Default Toolbar</span>
           <span flex></span>
-          <button md-button href="#" md-icon-button>
-            <md-icon>search</md-icon>
-          </button>
-          <button md-button href="#" md-icon-button>
-            <md-icon>more_vert</md-icon>
-          </button>
+          <td-search-box placeholder="Search" [alwaysVisible]="alwaysVisible" flex></td-search-box>
+          <button md-icon-button [mdMenuTriggerFor]="toolbarMenu1"><md-icon>more_vert</md-icon></button>
+          <md-menu #toolbarMenu1="mdMenu">
+            <button md-menu-item>
+              <md-icon>settings</md-icon>
+              <span>Settings</span>
+            </button>
+            <button md-menu-item>
+              <md-icon>exit_to_app</md-icon>
+              <span>Sign out</span>
+            </button>
+          </md-menu>
         </md-toolbar>
         <!-- toolbar end -->
         <!-- toolbar start -->
         <md-toolbar color="primary">
-          <button md-button href="#" md-icon-button>
+          <button md-icon-button>
             <md-icon>menu</md-icon>
           </button>
           <span>Primary Toolbar</span>
           <span flex></span>
-          <button md-button href="#" md-icon-button>
+          <button md-icon-button>
             <md-icon>search</md-icon>
           </button>
-          <button md-button href="#" md-icon-button>
+          <button md-icon-button>
             <md-icon>more_vert</md-icon>
           </button>
         </md-toolbar>
         <!-- toolbar end -->
         <!-- toolbar start -->
         <md-toolbar color="accent">
-          <button md-button href="#" md-icon-button>
+          <button md-icon-button>
             <md-icon>menu</md-icon>
           </button>
           <span>Accent Toolbar</span>
           <span flex></span>
-          <button md-button href="#" md-icon-button>
+          <button md-icon-button>
             <md-icon>search</md-icon>
           </button>
-          <button md-button href="#" md-icon-button>
+          <button md-icon-button>
             <md-icon>more_vert</md-icon>
           </button>
         </md-toolbar>
@@ -838,8 +878,12 @@ <h3>Dynamic Radios</h3>
           <md-toolbar-row></md-toolbar-row>
           <md-toolbar-row>
             <span flex>Third Line Toolbar</span>
-            <md-icon class="demo-toolbar-icon">favorite</md-icon>
-            <md-icon class="demo-toolbar-icon">delete</md-icon>
+            <button md-icon-button>
+              <md-icon>favorite</md-icon>
+            </button>
+            <button md-icon-button>
+              <md-icon>delete</md-icon>
+            </button>
           </md-toolbar-row>
         </md-toolbar>
         <!-- toolbar end -->
@@ -892,7 +936,7 @@ <h1>Second tab content</h1>
         <h3>Basic Usage</h3>
         <md-list>
           <md-list-item *ngFor="let system of systems">
-            <md-slide-toggle [(ngModel)]="system.on">
+            <md-slide-toggle [color]="system.color" [(ngModel)]="system.on">
               {{system.name}}
             </md-slide-toggle>
           </md-list-item>
@@ -903,14 +947,32 @@ <h3>Basic Usage</h3>
           <!-- Basic Usage -->
           <md-list>
             <md-list-item *ngFor="let system of systems">
-              <md-slide-toggle [(ngModel)]="system.on" (change)="doSomething($event)">
+              <md-slide-toggle [color]="system.color" [(ngModel)]="system.on" (change)="doSomething($event)">
                 { {system.name} }
               </md-slide-toggle>
             </md-list-item>
           </md-list>
         ]]>
         </td-highlight>
-
+        <md-divider class="push-top push-bottom"></md-divider>
+        <td-highlight lang="typescript">
+          <![CDATA[
+              systems: Object[] = [{
+                name: 'Lights',
+                on: false,
+                color: 'primary',
+              }, {
+                name: 'Surround Sound',
+                on: true,
+                color: 'accent',
+              }, {
+                name: 'T.V.',
+                on: true,
+                color: 'warn',
+              },
+            ];
+            ]]>
+          </td-highlight>
       </div>
       <div layout="column" flex="50">
         <h3>Usage within Forms</h3>
@@ -1051,11 +1113,17 @@ <h3 md-line>{ { dog.name } }</h3>
   <md-card-title>Tooltips</md-card-title>
   <md-divider></md-divider>
   <md-card-content>
-    <button md-raised-button color="accent" md-tooltip="I show below" tooltip-position="below">Bottom Tooltip</button>
+    <button md-raised-button color="accent" mdTooltip="I show above" mdTooltipPosition="above">Bottom Tooltip</button>
+    <button md-raised-button color="accent" mdTooltip="I show after" mdTooltipPosition="after">Bottom Tooltip</button>
+    <button md-raised-button color="accent" mdTooltip="I show below" mdTooltipPosition="below">Bottom Tooltip</button>
+    <button md-raised-button color="accent" mdTooltip="I show before" mdTooltipPosition="before">Bottom Tooltip</button>
     <md-divider class="push-top push-bottom"></md-divider>
     <td-highlight lang="html">
       <![CDATA[
-        <button md-raised-button color="accent" md-tooltip="I show below" tooltip-position="below">Bottom Tooltip</button>
+        <button md-raised-button color="accent" mdTooltip="I show above" mdTooltipPosition="above">Bottom Tooltip</button>
+        <button md-raised-button color="accent" mdTooltip="I show after" mdTooltipPosition="after">Bottom Tooltip</button>
+        <button md-raised-button color="accent" mdTooltip="I show below" mdTooltipPosition="below">Bottom Tooltip</button>
+        <button md-raised-button color="accent" mdTooltip="I show before" mdTooltipPosition="before">Bottom Tooltip</button>
         ]]>
       </td-highlight>
   </md-card-content>
@@ -1064,7 +1132,7 @@ <h3 md-line>{ { dog.name } }</h3>
   <md-card-title>Menus (dropdowns)</md-card-title>
   <md-divider></md-divider>
   <md-card-content>
-    <button md-icon-button [md-menu-trigger-for]="menu">
+    <button md-icon-button [mdMenuTriggerFor]="menu">
       <md-icon>more_vert</md-icon>
     </button>
     <md-menu #menu="mdMenu">
@@ -1073,7 +1141,7 @@ <h3 md-line>{ { dog.name } }</h3>
         <button md-menu-item> Help </button>
         <button md-menu-item disabled> Sign Out </button>
     </md-menu>
-    <button md-button [md-menu-trigger-for]="posXMenu">
+    <button md-button [mdMenuTriggerFor]="posXMenu">
       Before
     </button>
     <md-menu x-position="before" #posXMenu="mdMenu" class="before">
@@ -1082,7 +1150,7 @@ <h3 md-line>{ { dog.name } }</h3>
         <button md-menu-item> Help </button>
         <button md-menu-item disabled> Sign Out </button>
     </md-menu>
-    <button md-button [md-menu-trigger-for]="aboveMenu">
+    <button md-button [mdMenuTriggerFor]="aboveMenu">
       Above
     </button>
     <md-menu y-position="above" #aboveMenu="mdMenu" class="above">
@@ -1091,11 +1159,28 @@ <h3 md-line>{ { dog.name } }</h3>
         <button md-menu-item> Help </button>
         <button md-menu-item disabled> Sign Out </button>
     </md-menu>
+    <button md-button [mdMenuTriggerFor]="iconsMenu">
+      Icons in Menu
+    </button>
+    <md-menu #iconsMenu="mdMenu">
+      <button md-menu-item>
+        <md-icon>dialpad</md-icon>
+        <span>Redial</span>
+      </button>
+      <button md-menu-item disabled>
+        <md-icon>voicemail</md-icon>
+        <span>Check voicemail</span>
+      </button>
+      <button md-menu-item>
+        <md-icon>notifications_off</md-icon>
+        <span>Disable alerts</span>
+      </button>
+    </md-menu>
     <md-divider class="push-top push-bottom"></md-divider>
     <td-highlight lang="html">
       <![CDATA[
         <!-- menu opens when trigger button is clicked -->
-        <button md-icon-button [md-menu-trigger-for]="menu">
+        <button md-icon-button [mdMenuTriggerFor]="menu">
           <md-icon>more_vert</md-icon>
         </button>
         <md-menu #menu="mdMenu">
@@ -1104,7 +1189,8 @@ <h3 md-line>{ { dog.name } }</h3>
             <button md-menu-item> Help </button>
             <button md-menu-item disabled> Sign Out </button>
         </md-menu>
-        <button md-button [md-menu-trigger-for]="posXMenu">
+
+        <button md-button [mdMenuTriggerFor]="posXMenu">
           Before
         </button>
         <md-menu x-position="before" #posXMenu="mdMenu" class="before">
@@ -1113,7 +1199,8 @@ <h3 md-line>{ { dog.name } }</h3>
             <button md-menu-item> Help </button>
             <button md-menu-item disabled> Sign Out </button>
         </md-menu>
-        <button md-button [md-menu-trigger-for]="aboveMenu">
+
+        <button md-button [mdMenuTriggerFor]="aboveMenu">
           Above
         </button>
         <md-menu y-position="above" #aboveMenu="mdMenu" class="above">
@@ -1122,6 +1209,23 @@ <h3 md-line>{ { dog.name } }</h3>
             <button md-menu-item> Help </button>
             <button md-menu-item disabled> Sign Out </button>
         </md-menu>
+
+        <button md-button [mdMenuTriggerFor]="iconsMenu">
+          Icons in Menu
+        </button>
+        <md-menu #iconsMenu="mdMenu">
+          <button md-menu-item>
+            <md-icon>dialpad</md-icon>
+            <span>Redial</span>
+          </button>
+          <button md-menu-item disabled>
+            <md-icon>voicemail</md-icon>
+            <span>Check voicemail</span>
+          </button>
+          <button md-menu-item>
+            <md-icon>notifications_off</md-icon>
+            <span>Disable alerts</span>
+          </button>
         ]]>
       </td-highlight>
   </md-card-content>
@@ -1169,8 +1273,7 @@ <h3 md-line>{ { dog.name } }</h3>
   <md-card-content>
     <button md-raised-button
         md-ripple
-        [md-ripple-background-color]="'rgba(30, 136, 229, 0.2)'"
-        [md-ripple-speed-factor]="2">
+        [mdRippleBackgroundColor]="'rgba(30, 136, 229, 0.2)'">
       Click me
     </button>
     <md-divider class="push-top push-bottom"></md-divider>
@@ -1178,8 +1281,7 @@ <h3 md-line>{ { dog.name } }</h3>
       <![CDATA[
         <button md-raised-button
             md-ripple
-            [md-ripple-background-color]="'rgba(30, 136, 229, 0.2)'"
-            [md-ripple-speed-factor]="2">
+            [mdRippleBackgroundColor]="'rgba(30, 136, 229, 0.2)'">
           Click me
         </button>
         ]]>
@@ -1190,17 +1292,27 @@ <h3 md-line>{ { dog.name } }</h3>
   <md-card-title>Slider</md-card-title>
   <md-divider></md-divider>
   <md-card-content>
-    <md-slider min="1" max="5"></md-slider>
-    <md-slider step="5"></md-slider>
-    <md-slider tick-interval="auto"></md-slider>
-    <md-slider tick-interval="3" step="4"></md-slider>
+    <md-slider min="1" max="5" thumbLabel tickInterval="1"></md-slider>
+    <md-slider step="5" thumbLabel tickInterval="5"></md-slider>
+    <md-slider thumbLabel tick-interval="auto"></md-slider>
+    <md-divider class="push-top push-bottom"></md-divider>
+    <h3 class="md-title">Vertical Slider</h3>
+    <md-slider vertical min="1" max="100" thumbLabel tickInterval="10"></md-slider>
+    <md-divider class="push-top push-bottom"></md-divider>
+    <h3 class="md-title">Inverted Slider</h3>
+    <md-slider invert min="1" max="100" thumbLabel tickInterval="10"></md-slider>
     <md-divider class="push-top push-bottom"></md-divider>
     <td-highlight lang="html">
       <![CDATA[
-        <md-slider min="1" max="5"></md-slider>
-        <md-slider step="5"></md-slider>
-        <md-slider tick-interval="auto"></md-slider>
-        <md-slider tick-interval="3" step="4"></md-slider>
+        <md-slider min="1" max="5" thumbLabel tickInterval="1"></md-slider>
+        <md-slider step="5" thumbLabel tickInterval="5"></md-slider>
+        <md-slider thumbLabel tick-interval="auto"></md-slider>
+        <md-divider class="push-top push-bottom"></md-divider>
+        <h3 class="md-title">Vertical Slider</h3>
+        <md-slider vertical min="1" max="100" thumbLabel tickInterval="10"></md-slider>
+        <md-divider class="push-top push-bottom"></md-divider>
+        <h3 class="md-title">Inverted Slider</h3>
+        <md-slider invert min="1" max="100" thumbLabel tickInterval="10"></md-slider>
         ]]>
       </td-highlight>
   </md-card-content>
@@ -1231,35 +1343,154 @@ <h3 md-line>{ { dog.name } }</h3>
   <md-card-title>Dialog</md-card-title>
   <md-divider></md-divider>
   <md-card-content>
-    <button md-raised-button (click)="showAlertDialog()">Show Alert</button>
-    <button md-raised-button (click)="showConfirmDialog()">Show Confirmation</button>
+    <button md-raised-button color="accent" (click)="openDialog()">Show Simple Dialog</button>
+    <md-divider class="push-top push-bottom"></md-divider>
+    <td-highlight lang="html">
+      <![CDATA[
+        <button md-raised-button color="accent" (click)="openDialog()">Show Simple Dialog</button>
+      ]]>
+    </td-highlight>
     <md-divider class="push-top push-bottom"></md-divider>
     <td-highlight lang="typescript">
       <![CDATA[
           import { Component } from '@angular/core';
-          import { MdDialog, MdDialogRef } from '@angular/material';
-          import { CustomAlertDialogComponent, CustomConfirmDialogComponent } from 'path/to/customdialogs'
+          import { MdDialog } from '@angular/material';
           ...
-          constructor(private _dialogService: MdDialog) {
-          }
-
-          showAlertDialog(): void {
-            let dialogRef: MdDialogRef<CustomAlertDialogComponent> =
-            this._dialogService.open(CustomAlertDialogComponent);
-          }
-
-          showConfirmDialog(): void {
-            let dialogRef: MdDialogRef<CustomConfirmDialogComponent> =
-            this._dialogService.open(CustomConfirmDialogComponent);
-            dialogRef.afterClosed().subscribe((data: boolean) => {
-              if (data) {
-                // clicked yes
-              } else {
-                // clicked no
-              }
+          constructor(public dialog: MdDialog) { }
+          ...
+          openDialog(): void {
+            this.dialog.open(DialogComponent, {
+              height: '50%', // can be px or %
+              width: '60%', // can be px or %
             });
           }
+          ...
+          @Component({
+            selector: 'dialog-example',
+            template: `
+              <h3 md-dialog-title>Simple Dialog</h3>
+              <md-dialog-content>
+                <p>Apply a <code>md-dialog-title</code> attribute on a heading.</p>
+                <p>Use a <code>md-dialog-content</code> element for content.</p>
+                <p>Place actions in an <code>md-dialog-actions</code> element.</p>
+              </md-dialog-content>
+              <md-dialog-actions layout="row" layout-align="end center">
+                <button md-button md-dialog-close>Close</button>
+              </md-dialog-actions>
+            `,
+          })
+          export class DialogComponent {}
         ]]>
       </td-highlight>
   </md-card-content>
-</md-card>
\ No newline at end of file
+</md-card>
+<md-card>
+  <md-card-title>Select</md-card-title>
+  <md-divider></md-divider>
+  <md-card-content>
+    <form>
+      <div layout="row" layout-margin>
+        <md-select flex="50" placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
+          <md-option *ngFor="let food of foods" [value]="food.value">
+            {{food.viewValue}}
+          </md-option>
+        </md-select>
+      </div>
+      <div layout="row" layout-margin>
+        <div flex> Selected food value: {{selectedValue}} </div>
+      </div>
+    </form>
+    <md-divider class="push-top push-bottom"></md-divider>
+    <td-highlight lang="html">
+      <![CDATA[
+        <form>
+          <div layout="row" layout-margin>
+            <md-select flex="50" placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
+              <md-option *ngFor="let food of foods" [value]="food.value">
+                { {food.viewValue} }
+              </md-option>
+            </md-select>
+          </div>
+          <div layout="row" layout-margin>
+            <div flex> Selected food value: { {selectedValue} } </div>
+          </div>
+        </form>
+        ]]>
+      </td-highlight>
+    <md-divider class="push-top push-bottom"></md-divider>
+    <td-highlight lang="typescript">
+      <![CDATA[
+          selectedValue: string;
+
+          foods: any[] = [
+            {value: 'steak-0', viewValue: 'Steak'},
+            {value: 'pizza-1', viewValue: 'Pizza'},
+            {value: 'tacos-2', viewValue: 'Tacos'}
+          ];
+        ]]>
+      </td-highlight>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-title>Chips</md-card-title>
+  <md-divider></md-divider>
+  <md-card-content>
+    <h3 class="md-title">Chips (with colors)</h3>
+    <md-chip-list>
+      <md-chip *ngFor="let chip of chips"
+          [selected]="chip.selected"
+          color="{{chip.color}}">
+          {{chip.name}}
+      </md-chip>
+    </md-chip-list>
+    <md-divider class="push-top push-bottom"></md-divider>
+    <h3 class="md-title">Chip Stacked (with colors)</h3>
+    <div layout-gt-xs="row">
+      <md-chip-list flex-gt-xs="50" class="md-chip-list-stacked">
+        <md-chip *ngFor="let chip of chips"
+            [selected]="chip.selected"
+            color="{{chip.color}}">
+            {{chip.name}}
+        </md-chip>
+      </md-chip-list>
+    </div>
+    <md-divider class="push-top push-bottom"></md-divider>
+    <td-highlight lang="html">
+      <![CDATA[
+        <h3 class="md-title">Basic Chips (with colors)</h3>
+        <md-chip-list>
+          <md-chip *ngFor="let chip of chips"
+              [selected]="chip.selected"
+              color="{ {chip.color} }">
+              { {chip.name} }
+          </md-chip>
+        </md-chip-list>
+        <md-divider class="push-top push-bottom"></md-divider>
+        <h3 class="md-title">Chip List (with colors)</h3>
+        <div layout-gt-xs="row">
+          <md-chip-list flex-gt-xs="50" class="md-chip-list-stacked">
+            <md-chip *ngFor="let chip of chips"
+                [selected]="chip.selected"
+                color="{ {chip.color} }">
+                { {chip.name} }
+            </md-chip>
+          </md-chip-list>
+        </div>
+        ]]>
+      </td-highlight>
+    <md-divider class="push-top push-bottom"></md-divider>
+    <td-highlight lang="typescript">
+      <![CDATA[
+         color: string;
+
+          chips: Object = [
+            { name: 'Default', color: '', selected: false },
+            { name: 'Default (selected)', color: '', selected: true },
+            { name: 'Primary (selected)', color: 'primary', selected: true },
+            { name: 'Accent (selected)', color: 'accent', selected: true },
+            { name: 'Warn (selected)', color: 'warn', selected: true },
+          ];
+        ]]>
+      </td-highlight>
+  </md-card-content>
+</md-card>
diff --git a/src/app/components/components/material-components/material-components.component.ts b/src/app/components/components/material-components/material-components.component.ts
index 06fa209f0c..719a08f4d9 100644
--- a/src/app/components/components/material-components/material-components.component.ts
+++ b/src/app/components/components/material-components/material-components.component.ts
@@ -1,19 +1,32 @@
 import { Component } from '@angular/core';
-import { MdSnackBar, MdDialog, MdDialogRef } from '@angular/material';
-
-import { TdAlertDialogComponent } from '../../../../platform/core';
-import { TdConfirmDialogComponent } from '../../../../platform/core';
+import { MdSnackBar, MdDialog } from '@angular/material';
 
 @Component({
   selector: 'design-patterns-material-components',
-  styleUrls: ['material-components.component.scss'],
-  templateUrl: 'material-components.component.html',
+  styleUrls: ['./material-components.component.scss'],
+  templateUrl: './material-components.component.html',
 })
 export class MaterialComponentsComponent {
 
   isDisabled: boolean = false;
   isIndeterminate: boolean = false;
   favoriteSeason: string = 'Autumn';
+  selectedValue: string;
+  color: string;
+
+  chips: Object = [
+    { name: 'Default', color: '', selected: false },
+    { name: 'Default (selected)', color: '', selected: true },
+    { name: 'Primary (selected)', color: 'primary', selected: true },
+    { name: 'Accent (selected)', color: 'accent', selected: true },
+    { name: 'Warn (selected)', color: 'warn', selected: true },
+  ];
+
+  foods: Object = [
+    {value: 'steak-0', viewValue: 'Steak'},
+    {value: 'pizza-1', viewValue: 'Pizza'},
+    {value: 'tacos-2', viewValue: 'Tacos'},
+  ];
 
   seasonOptions: string[] = [
     'Winter',
@@ -80,15 +93,15 @@ export class MaterialComponentsComponent {
   systems: Object[] = [{
       name: 'Lights',
       on: false,
+      color: 'primary',
     }, {
       name: 'Surround Sound',
       on: true,
+      color: 'accent',
     }, {
       name: 'T.V.',
       on: true,
-    }, {
-      name: 'Entertainment System',
-      on: true,
+      color: 'warn',
     },
   ];
 
@@ -106,31 +119,31 @@ export class MaterialComponentsComponent {
   };
 
   constructor(private _snackBarService: MdSnackBar,
-              private _dialogService: MdDialog) {
-  }
+              public dialog: MdDialog) { }
 
   showSnackBar(): void {
     this._snackBarService.open('Message', 'Action', { duration: 3000 });
   }
 
-  showAlertDialog(): void {
-    let dialogRef: MdDialogRef<TdAlertDialogComponent> =
-    this._dialogService.open(TdAlertDialogComponent);
-    dialogRef.componentInstance.title = 'Alert Title';
-    dialogRef.componentInstance.message = 'This is an alert dialog with a custom message.';
-  }
-
-  showConfirmDialog(): void {
-    let dialogRef: MdDialogRef<TdConfirmDialogComponent> =
-    this._dialogService.open(TdConfirmDialogComponent);
-    dialogRef.componentInstance.title = 'Confirmation Title';
-    dialogRef.componentInstance.message = 'This is a confirmation dialog. Like what you see in covalent?';
-    dialogRef.afterClosed().subscribe((data: any) => {
-      if (data) {
-        this._snackBarService.open('You clicked Yes :D', 'Ok', { duration: 3000 });
-      } else {
-        this._snackBarService.open('You clicked No :(', 'Ok', { duration: 3000 });
-      }
+  openDialog(): void {
+    this.dialog.open(DialogComponent, {
+      width: '60%',
     });
   }
 }
+
+@Component({
+  selector: 'dialog-example',
+  template: `
+    <h3 md-dialog-title>Simple Dialog</h3>
+    <md-dialog-content>
+      <p>Apply a <code>md-dialog-title</code> attribute on a heading.</p>
+      <p>Use a <code>md-dialog-content</code> element for content.</p>
+      <p>Place actions in an <code>md-dialog-actions</code> element.</p>
+    </md-dialog-content>
+    <md-dialog-actions layout="row" layout-align="end center">
+      <button md-button md-dialog-close>Close</button>
+    </md-dialog-actions>
+  `,
+})
+export class DialogComponent {}
diff --git a/src/app/components/components/media/media.component.ts b/src/app/components/components/media/media.component.ts
index aa53487fd6..42103e299a 100644
--- a/src/app/components/components/media/media.component.ts
+++ b/src/app/components/components/media/media.component.ts
@@ -5,8 +5,8 @@ import { TdMediaService } from '../../../../platform/core';
 
 @Component({
   selector: 'media-demo',
-  styleUrls: [ 'media.component.scss' ],
-  templateUrl: 'media.component.html',
+  styleUrls: ['./media.component.scss' ],
+  templateUrl: './media.component.html',
 })
 export class MediaDemoComponent implements OnInit, OnDestroy {
 
diff --git a/src/app/components/components/overview/overview.component.ts b/src/app/components/components/overview/overview.component.ts
index 45aba8c4fc..6b28869357 100644
--- a/src/app/components/components/overview/overview.component.ts
+++ b/src/app/components/components/overview/overview.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'components-overview',
-  styleUrls: ['overview.component.scss'],
-  templateUrl: 'overview.component.html',
+  styleUrls: ['./overview.component.scss'],
+  templateUrl: './overview.component.html',
 })
 export class ComponentsOverviewComponent {
   items: Object[] = [{
diff --git a/src/app/components/components/paging/paging.component.ts b/src/app/components/components/paging/paging.component.ts
index e05d32296d..4ae8a87447 100644
--- a/src/app/components/components/paging/paging.component.ts
+++ b/src/app/components/components/paging/paging.component.ts
@@ -4,8 +4,8 @@ import { IPageChangeEvent } from '../../../../platform/core';
 
 @Component({
   selector: 'paging-demo',
-  styleUrls: ['paging.component.scss'],
-  templateUrl: 'paging.component.html',
+  styleUrls: ['./paging.component.scss'],
+  templateUrl: './paging.component.html',
 })
 export class PagingDemoComponent {
 
diff --git a/src/app/components/components/pipes/pipes.component.ts b/src/app/components/components/pipes/pipes.component.ts
index 3871ed7634..2045035167 100644
--- a/src/app/components/components/pipes/pipes.component.ts
+++ b/src/app/components/components/pipes/pipes.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'pipes-demo',
-  styleUrls: [ 'pipes.component.scss' ],
-  templateUrl: 'pipes.component.html',
+  styleUrls: ['./pipes.component.scss' ],
+  templateUrl: './pipes.component.html',
 })
 export class PipesComponent {
 
diff --git a/src/app/components/components/search/search.component.html b/src/app/components/components/search/search.component.html
index 8f5ad2fb1f..106eea2aab 100644
--- a/src/app/components/components/search/search.component.html
+++ b/src/app/components/components/search/search.component.html
@@ -5,8 +5,8 @@
   <md-card-content>
     <div layout="row" layout-align="start center">
       <md-button-toggle-group name="mode" (change)="modeChange()" [(ngModel)]="debounce">
-        <md-button-toggle md-tooltip="Enter/Clear Events" [value]="0"><md-icon>search</md-icon> Enter/Clear</md-button-toggle>
-        <md-button-toggle md-tooltip="Debounce Events" [value]="1"><md-icon>keyboard</md-icon> Debounce</md-button-toggle>
+        <md-button-toggle mdTooltip="Enter/Clear Events" [value]="0"><md-icon>search</md-icon> Enter/Clear</md-button-toggle>
+        <md-button-toggle mdTooltip="Debounce Events" [value]="1"><md-icon>keyboard</md-icon> Debounce</md-button-toggle>
       </md-button-toggle-group>
     </div>
     <h3>Search Input</h3>
diff --git a/src/app/components/components/search/search.component.ts b/src/app/components/components/search/search.component.ts
index 990edbb575..9377bba03c 100644
--- a/src/app/components/components/search/search.component.ts
+++ b/src/app/components/components/search/search.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'search-demo',
-  styleUrls: ['search.component.scss'],
-  templateUrl: 'search.component.html',
+  styleUrls: ['./search.component.scss'],
+  templateUrl: './search.component.html',
 })
 export class SearchDemoComponent {
 
diff --git a/src/app/components/components/steps/steps.component.html b/src/app/components/components/steps/steps.component.html
index 72ca639e2b..0921bfd949 100644
--- a/src/app/components/components/steps/steps.component.html
+++ b/src/app/components/components/steps/steps.component.html
@@ -9,9 +9,9 @@ <h3 class="md-title">Basic Stepper</h3>
         <template md-tab-label>Demo</template>
         <div layout="row" layout-align="start center">
           <md-button-toggle-group (change)="modeChange()" name="mode" [(ngModel)]="mode">
-            <md-button-toggle md-tooltip="Vertical Stepper" [value]="0"><md-icon>swap_vert</md-icon> <span hide-md hide-sm hide-xs>Vertical</span></md-button-toggle>
-            <md-button-toggle md-tooltip="Horizontal Stepper" [value]="1"><md-icon>swap_horiz</md-icon> <span hide-md hide-sm hide-xs>Horizontal</span></md-button-toggle>
-            <md-button-toggle md-tooltip="Responsive (changes from horizontal to vertical)" [value]="2"><md-icon>devices</md-icon> <span hide-md hide-sm hide-xs>Responsive (gt-sm)</span></md-button-toggle>
+            <md-button-toggle mdTooltip="Vertical Stepper" [value]="0"><md-icon>swap_vert</md-icon> <span hide-md hide-sm hide-xs>Vertical</span></md-button-toggle>
+            <md-button-toggle mdTooltip="Horizontal Stepper" [value]="1"><md-icon>swap_horiz</md-icon> <span hide-md hide-sm hide-xs>Horizontal</span></md-button-toggle>
+            <md-button-toggle mdTooltip="Responsive (changes from horizontal to vertical)" [value]="2"><md-icon>devices</md-icon> <span hide-md hide-sm hide-xs>Responsive (gt-sm)</span></md-button-toggle>
           </md-button-toggle-group>
         </div>
         <p>Active/Deactive Event for Step 1: {{activeDeactiveStep1Msg}}</p>
@@ -19,7 +19,7 @@ <h3>{{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}</h3>
         <td-steps [mode]="horizontal ? 'horizontal' : 'vertical'">
           <td-step #step1 label="Basic Usage" sublabel="Toggle between active and inactive and emit events." [active]="true" [disabled]="disabled" (activated)="activeStep1Event()" (deactivated)="deactiveStep1Event()">
             <template td-step-label><span>Basic Usage (template)</span></template>
-            Include any content you like for an active stepper 
+            Include any content you like for an active stepper
           </td-step>
           <td-step #step2 label="Required State" sublabel="Toggle between active and inactive while in required state." [state]="stateStep2" [disabled]="disabled">
             This step is required!
@@ -48,7 +48,7 @@ <h3>{{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}</h3>
             <td-steps>
               <td-step #step1 label="Basic Usage" sublabel="Toggle between active and inactive and emit events." [active]="true" [disabled]="disabled" (activated)="activeStep1Event()" (deactivated)="deactiveStep1Event()">
                 <template td-step-label><span>Basic Usage (template)</span></template>
-                Include any content you like for an active stepper 
+                Include any content you like for an active stepper
               </td-step>
               <td-step #step2 label="Required State" sublabel="Toggle between active and inactive while in required state." [state]="stateStep2" [disabled]="disabled">
                 This step is required!
@@ -207,7 +207,7 @@ <h3>Example:</h3>
           <template td-step-summary>
             ... add summary that will be shown when step in is "complete" state (optional)
           </template>
-        </td-step>        
+        </td-step>
       ]]>
     </td-highlight>
     <p>Typescript:</p>
@@ -217,15 +217,15 @@ <h3>Example:</h3>
         ...
         })
         export class Demo {
-        
+
           active: boolean = false;
           disabled: boolean = false;
           state: StepState = StepState.Required; // or state: string = "required";
-          
+
           activeEvent(): void {
             ...
           };
-          
+
           deactiveEvent(): void {
             ...
           };
diff --git a/src/app/components/components/steps/steps.component.ts b/src/app/components/components/steps/steps.component.ts
index fb8a2f2b7a..a00c1f6ffb 100644
--- a/src/app/components/components/steps/steps.component.ts
+++ b/src/app/components/components/steps/steps.component.ts
@@ -5,8 +5,8 @@ import { StepState, TdMediaService } from '../../../../platform/core';
 
 @Component({
   selector: 'steps-demo',
-  styleUrls: [ 'steps.component.scss' ],
-  templateUrl: 'steps.component.html',
+  styleUrls: ['./steps.component.scss' ],
+  templateUrl: './steps.component.html',
 })
 export class StepsDemoComponent implements OnInit, OnDestroy {
 
diff --git a/src/app/components/docs/angular-2/angular-2.component.ts b/src/app/components/docs/angular-2/angular-2.component.ts
index f7310c3bf9..2bed3c392a 100644
--- a/src/app/components/docs/angular-2/angular-2.component.ts
+++ b/src/app/components/docs/angular-2/angular-2.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'docs-angular-2',
-  styleUrls: ['angular-2.component.scss'],
-  templateUrl: 'angular-2.component.html',
+  styleUrls: ['./angular-2.component.scss'],
+  templateUrl: './angular-2.component.html',
 })
 export class Angular2Component {
 
diff --git a/src/app/components/docs/angular-material/angular-material.component.ts b/src/app/components/docs/angular-material/angular-material.component.ts
index c75c353fe3..75bae775c9 100644
--- a/src/app/components/docs/angular-material/angular-material.component.ts
+++ b/src/app/components/docs/angular-material/angular-material.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'docs-angular-material',
-  styleUrls: ['angular-material.component.scss'],
-  templateUrl: 'angular-material.component.html',
+  styleUrls: ['./angular-material.component.scss'],
+  templateUrl: './angular-material.component.html',
 })
 export class AngularMaterialComponent {
 
diff --git a/src/app/components/docs/build-tasks/build-tasks.component.ts b/src/app/components/docs/build-tasks/build-tasks.component.ts
index 06a7c42bf3..92d306b016 100644
--- a/src/app/components/docs/build-tasks/build-tasks.component.ts
+++ b/src/app/components/docs/build-tasks/build-tasks.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'docs-build-tasks',
-  styleUrls: ['build-tasks.component.scss'],
-  templateUrl: 'build-tasks.component.html',
+  styleUrls: ['./build-tasks.component.scss'],
+  templateUrl: './build-tasks.component.html',
 })
 export class BuildTasksComponent {
 
diff --git a/src/app/components/docs/creating/creating.component.ts b/src/app/components/docs/creating/creating.component.ts
index 60d4b89025..fc00efa146 100644
--- a/src/app/components/docs/creating/creating.component.ts
+++ b/src/app/components/docs/creating/creating.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'docs-creating',
-  styleUrls: ['creating.component.scss'],
-  templateUrl: 'creating.component.html',
+  styleUrls: ['./creating.component.scss'],
+  templateUrl: './creating.component.html',
 })
 export class CreatingComponent {
 
diff --git a/src/app/components/docs/deployment/deployment.component.ts b/src/app/components/docs/deployment/deployment.component.ts
index ab6bab4587..2b993d7478 100644
--- a/src/app/components/docs/deployment/deployment.component.ts
+++ b/src/app/components/docs/deployment/deployment.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'docs-deployment',
-  styleUrls: ['deployment.component.scss'],
-  templateUrl: 'deployment.component.html',
+  styleUrls: ['./deployment.component.scss'],
+  templateUrl: './deployment.component.html',
 })
 export class DeploymentComponent {
 
diff --git a/src/app/components/docs/docs.component.html b/src/app/components/docs/docs.component.html
index 44cf65136b..da71cbfc73 100644
--- a/src/app/components/docs/docs.component.html
+++ b/src/app/components/docs/docs.component.html
@@ -1,4 +1,4 @@
-<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
+<td-layout-nav-list #list logo="assets:teradata" toolbarTitle="Covalent">
   <md-nav-list list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item 
diff --git a/src/app/components/docs/docs.component.ts b/src/app/components/docs/docs.component.ts
index cfca406e3d..bff2dd0a9f 100644
--- a/src/app/components/docs/docs.component.ts
+++ b/src/app/components/docs/docs.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-docs',
-  styleUrls: ['docs.component.scss'],
-  templateUrl: 'docs.component.html',
+  styleUrls: ['./docs.component.scss'],
+  templateUrl: './docs.component.html',
 })
 export class DocsComponent {
 
diff --git a/src/app/components/docs/icons/icons.component.html b/src/app/components/docs/icons/icons.component.html
index 67b898831e..5bc30fbeb4 100644
--- a/src/app/components/docs/icons/icons.component.html
+++ b/src/app/components/docs/icons/icons.component.html
@@ -11,11 +11,26 @@ <h3>Font Icons</h3>
     <p>
       which renders <md-icon>home</md-icon>
     </p>
-    <h3>SVG Icons (from URLS)</h3>
-    <p>SVG icons can be used either by directly specifying the icon's URL, or by associating an icon name with a URL and then referring to the name. To use a URL directly, set the svgSrc input:</p>
-   <td-highlight lang="html">
-     <![CDATA[ <md-icon svgSrc="/assets/sun.svg"></md-icon> ]]>
-   </td-highlight>
+    <h3>SVG Icons (from Safe URLS)</h3>
+    <p>SVG icons have to be sanitized before they can be used with [DomSanitizer] and then icons need to be registered in [MdIconRegistry] so it can be referred later on:</p>
+    <p>Typescript:</p>
+    <td-highlight lang="typescript">
+     <![CDATA[
+       import { DomSanitizer } from '@angular/platform-browser';
+       import { MdIconRegistry } from '@angular/material';
+       ...
+       ...
+       constructor(private _iconRegistry: MdIconRegistry,
+                   private _domSanitizer: DomSanitizer) {
+         this._iconRegistry.addSvgIconInNamespace('assets', 'sun',
+           this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/sun.svg'));
+       }
+     ]]>
+    </td-highlight>
+    <p>HTML:</p>
+    <td-highlight lang="html">
+      <![CDATA[ <md-icon svgIcon="assets:sun"></md-icon> ]]>
+    </td-highlight>
   </md-card-content>
   <md-divider></md-divider>
   <md-card-actions>
diff --git a/src/app/components/docs/icons/icons.component.ts b/src/app/components/docs/icons/icons.component.ts
index a85252be60..88b15fd3b0 100644
--- a/src/app/components/docs/icons/icons.component.ts
+++ b/src/app/components/docs/icons/icons.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'docs-icons',
-  styleUrls: ['icons.component.scss'],
-  templateUrl: 'icons.component.html',
+  styleUrls: ['./icons.component.scss'],
+  templateUrl: './icons.component.html',
 })
 export class IconsComponent {
 
diff --git a/src/app/components/docs/mock-data/mock-data.component.ts b/src/app/components/docs/mock-data/mock-data.component.ts
index a7d8b16d1f..16810fe33f 100644
--- a/src/app/components/docs/mock-data/mock-data.component.ts
+++ b/src/app/components/docs/mock-data/mock-data.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'docs-mock-data',
-  styleUrls: ['mock-data.component.scss'],
-  templateUrl: 'mock-data.component.html',
+  styleUrls: ['./mock-data.component.scss'],
+  templateUrl: './mock-data.component.html',
 })
 export class MockDataComponent {
 
diff --git a/src/app/components/docs/overview/overview.component.ts b/src/app/components/docs/overview/overview.component.ts
index 40bf09b4cc..2d31667ff6 100644
--- a/src/app/components/docs/overview/overview.component.ts
+++ b/src/app/components/docs/overview/overview.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'docs-overview',
-  styleUrls: ['overview.component.scss'],
-  templateUrl: 'overview.component.html',
+  styleUrls: ['./overview.component.scss'],
+  templateUrl: './overview.component.html',
 })
 export class DocsOverviewComponent {
 
diff --git a/src/app/components/docs/testing/testing.component.ts b/src/app/components/docs/testing/testing.component.ts
index 16ad1f2e2a..b5a3cc1cc4 100644
--- a/src/app/components/docs/testing/testing.component.ts
+++ b/src/app/components/docs/testing/testing.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'docs-testing',
-  styleUrls: ['testing.component.scss'],
-  templateUrl: 'testing.component.html',
+  styleUrls: ['./testing.component.scss'],
+  templateUrl: './testing.component.html',
 })
 export class TestingComponent {
 
diff --git a/src/app/components/docs/theme/theme.component.ts b/src/app/components/docs/theme/theme.component.ts
index c621316e4a..e9d1fb0427 100644
--- a/src/app/components/docs/theme/theme.component.ts
+++ b/src/app/components/docs/theme/theme.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'docs-theme',
-  templateUrl: 'theme.component.html',
-  styleUrls: ['theme.component.scss'],
+  templateUrl: './theme.component.html',
+  styleUrls: ['./theme.component.scss'],
 })
 export class ThemeComponent {}
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index 4c0afa8fcf..a3f1f2de7e 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -1,13 +1,13 @@
-<td-layout-nav logo="app/assets/icons/teradata.svg">
+<td-layout-nav logo="assets:teradata">
   <div toolbar-content layout="row" layout-align="center center" flex>
     <span>Covalent</span>
     <span flex></span>
-    <a md-icon-button md-tooltip="Quickstart" href="https://github.com/Teradata/covalent-quickstart" target="_blank"><md-icon>flash_on</md-icon></a>
-    <a md-icon-button md-tooltip="Github" href="https://github.com/teradata/covalent" target="_blank"><md-icon svgSrc="app/assets/icons/github.svg"></md-icon></a>
+    <a md-icon-button mdTooltip="Quickstart" href="https://github.com/Teradata/covalent-quickstart" target="_blank"><md-icon>flash_on</md-icon></a>
+    <a md-icon-button mdTooltip="Github" href="https://github.com/teradata/covalent" target="_blank"><md-icon svgIcon="assets:github"></md-icon></a>
   </div>
   <td-layout-card-over>
       <div layout="row" layout-align="start center">
-        <md-icon class="md-icon-svg-lg" svgSrc="app/assets/icons/covalent.svg"></md-icon>
+        <md-icon class="md-icon-svg-lg" svgIcon="assets:covalent"></md-icon>
         <div>
           <md-card-title>Teradata Covalent UI Platform</md-card-title>
         <md-card-subtitle>a UI platform built on Angular 2.0 + Material Design</md-card-subtitle>
@@ -48,89 +48,89 @@ <h3 md-line> {{item.title}} </h3>
     </md-card-actions>
     <div after-card>
       <h3 class="md-title">FAQs</h3>
-      <td-expansion-panel label="What is the Covalent?" sublabel="what is this thing?">
+      <td-expansion-panel label="What is Covalent?" sublabel="what is this thing?">
         <div class="md-padding">
-          Covalent is a UI Platform that combines design language and a web framework, built on Angular 2.0 & Angular-Material (Design).
-          It will give you a quickstart to build a modern web application UI and ensure consistency across Teradata products.
-          Some of the most important features:
+          Covalent is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular 2.0 & Angular-Material (Design).
+          Covalent gives you a quickstart to build a modern web application UI and ensure consistency across your enterprise products.
+          Some of Covalent's most important features include:
           <ul>
-            <li>Angular-Material 2.0</li>
-            <li>Angular 2.0 Command-line interface (CLI) for builds, deploys, testing & more</li>
-            <li>Drastically simplified interface layouts (for dashboards, lists, etc)</li>
-            <li>Custom web components (stepper, file upload, expansion panels & more)</li>
-            <li>750+ Material Design icons</li>
-            <li>Style Guide with brand standards, color palettes & tips</li>
-            <li>Design Patterns for consistent, reusable web components such as cards, forms, etc</li>
-            <li>Testing Tools for unit tests and end-to-end tests</li>
+            <li>Angular-Material 2.0.</li>
+            <li>Angular 2.0 Command-line interface (CLI) for builds, deploys, testing & more.</li>
+            <li>Drastically simplified interface layouts (for dashboards, lists, etc).</li>
+            <li>Custom web components (stepper, file upload, expansion panels & more).</li>
+            <li>750+ Material Design icons.</li>
+            <li>Style Guide with brand standards, color palettes & tips.</li>
+            <li>Design Patterns for consistent, reusable web components such as cards, forms, etc.</li>
+            <li>Testing Tools for both unit tests and end-to-end tests.</li>
             <li>Quickstart app to get started right away!</li>
           </ul>
         </div>
       </td-expansion-panel>
       <td-expansion-panel label="Why Covalent?" sublabel="what's up with that name?">
         <div class="md-padding">
-          We follow the Atomic Design principles, applying them to Angular-Material web components. In Atomic Design, several atoms (such as buttons and inputs) form molecules (such as a search box).
-          Our covalent bonds are these molecules we're building on top of Angular-Material. Also, covalent bonds are liquid and conform to their container, just like our responsive layouts!
+          We follow Atomic Design principles and apply them to Angular-Material web components. In Atomic Design, several atoms (such as buttons and inputs) form molecules (such as a search box).
+          Our covalent bonds are the molecules that we're building on top of Angular-Material. Also, covalent bonds are liquid and conform to their container, just like our responsive layouts!
         </div>
       </td-expansion-panel>
       <td-expansion-panel label="Why would I use this?" sublabel="can't I just build my own?">
         <div class="md-padding">
-          By using a unified UI Platform there are a ton of benefits. Here are some highlights:
+          By using Covalent as a unified UI Platform there are a ton of benefits. Here are some highlights:
           <ul>
-            <li>Angular-Material v2 doesn't have a full app quickstart</li>
-            <li>Angular-Material v2 doesn't have the flexbox layout from v1</li>
-            <li>We provide several custom components such as stepper & expansion panels</li>
-            <li>These layouts & components are being develop for enterprise solutions</li>
-            <li>You get a selection for UI layouts out the box</li>
-            <li>We will continuously add tools like Syntax Highlighting & Markdown</li>
-            <li>We will always maintain native compatibility with Angular 2 & Material 2</li>
-            <li>We will always follow the principles of the official Material Design spec</li>
+            <li>Angular-Material v2 doesn't have a full app quickstart. <a href="https://teradata.github.io/covalent-quickstart/">Covalent does</a>.</li>
+            <li>Covalent provides the Angular-Material v1 flexbox layout that was removed in Angular-Material v2.</li>
+            <li>Covalent provides several custom components such as steppers & expansion panels.</li>
+            <li>Custom layouts & components in Covalent are developed specifically for enterprise solutions.</li>
+            <li>Covalent provides a selection of UI layouts out of the box.</li>
+            <li>Our team is continuously adding tools like Syntax Highlighting & Markdown.</li>
+            <li>Our team will always maintain native compatibility with Angular 2 & Material 2.</li>
+            <li>Our team will always follow the principles of the official Material Design spec.</li>
           </ul>
         </div>
       </td-expansion-panel>
       <td-expansion-panel label="Why Material Design?" sublabel="what's so great about Material?">
         <div class="md-padding">
-          By adopting Material Design along with Angular, we get a style guide spec perfectly matched with an incredbly powerful and modern web framework, all for free.
+          By adopting Material Design along with Angular, we get a style guide spec that is perfectly matched with an incredbly powerful and modern web framework, all for free.
           Along with that, there are lots of other great benefits such as:
           <ul>
-            <li>It’s a design spec married to code implementation</li>
-            <li>Official implementations from the the designer/developer (Google)</li>
-            <li>The spec keeps growing & iterating for you w/o your time</li>
-            <li>So many devices & breakpoints have been considered</li>
-            <li>Familiarity for Users, Designers & Developers</li>
-            <li>Focused on Accessibility (out the box)</li>
-            <li>Design & Code are open sourced for you</li>
-            <li>It's a natural bridge to agile development</li>
-            <li>Inspiration, Community & Resources from around the world</li>
+            <li>A design spec that is married to code implementation.</li>
+            <li>Official implementations from the the designer/developer (Google).</li>
+            <li>Free code implementation and updates from a continuously evolving design spec.</li>
+            <li>Compatability with many devices & breakpoints, from watch and mobile all the way up to fullscreen desktop.</li>
+            <li>Usage familiarity for users, designers & developers.</li>
+            <li>Focus on out-of the box accessibility.</li>
+            <li>Open sourced design & code.</li>
+            <li>Modularity that gives a natural bridge to agile development principles.</li>
+            <li>Inspiration, community & resources from around the world.</li>
           </ul>
         </div>
       </td-expansion-panel>
       <td-expansion-panel label="But won't we look like Google?" sublabel="great question, you're not alone in that concern">
         <div class="md-padding">
-          With any new framework people's intial reaction is that they'll lose their company brand or identity.
-          Consider when 960 grids came out, or Bootstrap from Twitter. Many said "All sites will look the same!".
-          They weren't completely wrong for a time when adoption began, but with time, usage & innovation, your uniqueness always shines through!
+          With any new framework, people's intial reaction is that they'll lose their company brand or identity.
+          Consider when 960 grids came out, or Bootstrap from Twitter. Many said "all sites will look the same!".
+          They weren't completely wrong, for a time, when adoption of these new frameworks began. However, with time, usage, and innovation, your special brand identity and uniqueness will always shine through!
           Also consider:
           <ul>
-            <li>Material Design is being embraced across the web and not specific to Google anymore</li>
-            <li>Think of Material Design as a native Web SDK. Just as you would if you developed an OSX or iOS app.</li>
-            <li>It's a good thing for onboarding users if the patterns are familiar.</li>
-            <li>Think of your favorite iOS, Android or Windows app that aheres to the OS's design. Aren’t the features more important? What really is the “brand”?</li>
+            <li>Material Design is being embraced across the web,  and is not specific to Google anymore</li>
+            <li>Material Design can be thought of as a native Web SDK, similar to developing a MacOS or iOS app.</li>
+            <li>Onboarding users is a simpler process if design patterns are familiar.</li>
+            <li>Think of your favorite iOS, Android or Windows app that adheres to the OS's design. Aren’t the features more important? What woud you really consider “brand”?</li>
           </ul>
         </div>
       </td-expansion-panel>
       <td-expansion-panel label="Why Angular 2.0?" sublabel="why not React/Ember/Java/etc?">
         <div class="md-padding">
-          <p>The short answer: we have to pick something & Angular has won the adoption war.</p>
+          <p>The short answer: we had to pick something & we believe Angular has won the adoption war.</p>
           The longer answer:
-          Before passing judgement if you have Angular 1.x experience, remember 2.0 is a complete rewrite & very different.
-          Angular 2.0 moved from an opinionate framework to a sophistated platform. What's that mean?
-          With ES2015 (previously ES6) and the power of Typescript, Angular 2.0 is a much more native JavaScript platform with coding paradigmns & power previously reserved for backend languages.
-          This means many more Teradata employees can jump into the frontend and ramp up to productivity.
-          Also there's tons of other benefits like:
+          Before passing judgement if you have Angular 1.x experience, remember that Angular 2.0 is a complete rewrite from the ground up.
+          Angular 2.0 moved from an opinionated framework to a sophistated platform.
+          Anguer 2.0 utilizes ES2015 (previously ES6) and the power of Typescript, which results in a much more native JavaScript platform with coding paradigms & power previously reserved for backend languages.
+          This means many more back end engineers can jump into the front end and ramp up quickly to productivity.
+          Also there are many other benefits, such as:
           <ul>
             <li>New & exciting software to learn & advocate</li>
             <li>More easily attract new hires</li>
-            <li>An incredibly powerful standardized CLI we don't have to build</li>
+            <li>An incredibly powerful standardized CLI that is provided to us</li>
             <li>More powerful IDEs for development</li>
             <li>Integrated testing tools</li>
             <li>Native mobile & desktop app support</li>
@@ -162,12 +162,12 @@ <h3 class="md-title">FAQs</h3>
           <md-card>
             <md-card-content>
               <div class="md-subhead">
-                To build an atomic, standardized, reusable UI component platform for Teradata to use for all user interfaces based on Material Design, while collaborating in an open source model.
+                To build an atomic, standardized, reusable UI component platform based on Material Design, for Teradata to use for all user interfaces, while collaborating in an open source model.
               </div>
             </md-card-content>
           </md-card>
           <div class="md-padding">
-            The UX team is extremely lean & agile (notice agile is lower case). We have a simple list of milestones and issues prioritized by demand across products.
+            Teradata's UX team is extremely lean & agile (notice agile is lower case). We have a simple list of milestones and issues prioritized by demand across products.
             Some big ticket items are underway such as TD Charts, an extensive & standardized component built on Google Charts (continuing w/ the Google web stack).
             We're also building Dynamic Forms which will allow products to build complex forms with a simple key:value pair JSON structure.
             Remember, we're agile so our roadmap is iterative & bite sized for frequent, rapid releases.
@@ -197,7 +197,7 @@ <h3 md-line>Feature Requests & Bugs</h3>
       <div layout="row" layout-align="start center" layout-padding>
         <span class="md-caption">Copyright &copy; 2016 Teradata. All rights reserved</span>
         <span flex></span>
-        <md-icon class="md-icon-ux" svgSrc="app/assets/icons/teradata-ux.svg"></md-icon>
+        <md-icon class="md-icon-ux" svgIcon="assets:teradata-ux"></md-icon>
       </div>
     </div>
   </td-layout-card-over>
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index 4bb58a8be0..a15ffab095 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-home',
-  templateUrl: 'home.component.html',
-  styleUrls: ['home.component.scss'],
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent {
 
diff --git a/src/app/components/layouts/card-over/card-over.component.html b/src/app/components/layouts/card-over/card-over.component.html
index 6e510d1856..32f9087c13 100644
--- a/src/app/components/layouts/card-over/card-over.component.html
+++ b/src/app/components/layouts/card-over/card-over.component.html
@@ -1,4 +1,4 @@
-<td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
+<td-layout-nav logo="assets:teradata" toolbarTitle="Covalent">
   <td-layout-card-over cardWidth="75">
     <md-card-title>Card Over Layout</md-card-title>
     <md-card-subtitle>A card overlaying a toolbar (this page is using card over)</md-card-subtitle>
@@ -104,14 +104,14 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
           <h3 class="md-title">HTML</h3>
           <td-highlight lang="html">
             <![CDATA[
-            <td-layout #layout sidenavTitle="Sidenav Title" logo="path/to/sidenav-logo.svg">
+            <td-layout #layout sidenavTitle="Sidenav Title" logo="svgIconName">
               <md-nav-list menu-items>
                 <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()">
                   <md-icon>{ {item.icon} }</md-icon>
                   { {item.title} }
                 </a>
               </md-nav-list>
-              <td-layout-nav toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
+              <td-layout-nav toolbarTitle="Toolbar Title" logo="svgIconName">
                 <td-layout-card-over cardTitle="Card Title" cardSubtitle="Card subtitle" cardWidth="75">
                   <router-outlet></router-outlet>
                 </td-layout-card-over>
diff --git a/src/app/components/layouts/card-over/card-over.component.ts b/src/app/components/layouts/card-over/card-over.component.ts
index 0599837f96..0721e8ed55 100644
--- a/src/app/components/layouts/card-over/card-over.component.ts
+++ b/src/app/components/layouts/card-over/card-over.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'layouts-card-over',
-  styleUrls: ['card-over.component.scss'],
-  templateUrl: 'card-over.component.html',
+  styleUrls: ['./card-over.component.scss'],
+  templateUrl: './card-over.component.html',
 })
 export class CardOverComponent {
 
diff --git a/src/app/components/layouts/layouts.component.ts b/src/app/components/layouts/layouts.component.ts
index 6c1937ace0..8702545807 100644
--- a/src/app/components/layouts/layouts.component.ts
+++ b/src/app/components/layouts/layouts.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-layouts',
-  styleUrls: ['layouts.component.scss'],
-  templateUrl: 'layouts.component.html',
+  styleUrls: ['./layouts.component.scss'],
+  templateUrl: './layouts.component.html',
 })
 export class LayoutsComponent {
 
diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html
index 4e94a37217..80533fdc9c 100644
--- a/src/app/components/layouts/manage-list/manage-list.component.html
+++ b/src/app/components/layouts/manage-list/manage-list.component.html
@@ -1,4 +1,4 @@
-<td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
+<td-layout-nav logo="assets:teradata" toolbarTitle="Covalent">
   <td-layout-manage-list #list>
     <md-toolbar list-items>
       <span>Section Title</span>
@@ -154,14 +154,14 @@ <h3 md-line><code class="text-sm"><![CDATA[<button md-button class="md-icon-butt
             <h3 class="md-title">HTML</h3>
             <td-highlight lang="html">
                 <![CDATA[
-                <td-layout #layout sidenavTitle="Sidenav Title" logo="path/to/sidenav-logo.svg">
+                <td-layout #layout sidenavTitle="Sidenav Title" logo="svgIconName">
                   <md-nav-list menu-items>
                     <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()">
                       <md-icon>{ {item.icon} }</md-icon>
                       { {item.title} }
                     </a>
                   </md-nav-list>
-                  <td-layout-nav toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
+                  <td-layout-nav toolbarTitle="Toolbar Title" logo="svgIconName">
                     <td-layout-manage-list #list>
                       <md-toolbar list-items>
                         <span>Optional Title</span>
diff --git a/src/app/components/layouts/manage-list/manage-list.component.ts b/src/app/components/layouts/manage-list/manage-list.component.ts
index 0394b88ad4..f48dfb820d 100644
--- a/src/app/components/layouts/manage-list/manage-list.component.ts
+++ b/src/app/components/layouts/manage-list/manage-list.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'layouts-manage-list',
-  styleUrls: ['manage-list.component.scss'],
-  templateUrl: 'manage-list.component.html',
+  styleUrls: ['./manage-list.component.scss'],
+  templateUrl: './manage-list.component.html',
 })
 export class ManageListComponent {
 
diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html
index 723bf3db3a..d4180a53b7 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.html
+++ b/src/app/components/layouts/nav-list/nav-list.component.html
@@ -1,4 +1,4 @@
-<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
+<td-layout-nav-list #list logo="assets:teradata" toolbarTitle="Covalent">
   <md-nav-list list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item (click)="list.toggle()">
@@ -109,14 +109,14 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
           <h3 class="md-title">HTML</h3>
           <td-highlight lang="html">
               <![CDATA[
-              <td-layout #layout sidenavTitle="Sidenav Title" logo="path/to/sidenav-logo.svg">
+              <td-layout #layout sidenavTitle="Sidenav Title" logo="svgIconName">
                 <md-nav-list menu-items>
                   <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()">
                     <md-icon>{ {item.icon} }</md-icon>
                     { {item.title} }
                   </a>
                 </md-nav-list>
-                <td-layout-nav-list #list toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
+                <td-layout-nav-list #list toolbarTitle="Toolbar Title" logo="svgIconName">
                   <md-nav-list list-items>
                     <template let-item let-last="last" ngFor [ngForOf]="items">
                         <a md-list-item [routerLink]="[item.route]">
diff --git a/src/app/components/layouts/nav-list/nav-list.component.ts b/src/app/components/layouts/nav-list/nav-list.component.ts
index 93357cd420..d4f2e72ef4 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.ts
+++ b/src/app/components/layouts/nav-list/nav-list.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'layouts-nav-list',
-  styleUrls: ['nav-list.component.scss'],
-  templateUrl: 'nav-list.component.html',
+  styleUrls: ['./nav-list.component.scss'],
+  templateUrl: './nav-list.component.html',
 })
 export class NavListComponent {
   items: Object[] = [{
diff --git a/src/app/components/layouts/nav-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html
index ced417846c..b1b428ce40 100644
--- a/src/app/components/layouts/nav-view/nav-view.component.html
+++ b/src/app/components/layouts/nav-view/nav-view.component.html
@@ -1,4 +1,4 @@
-<td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
+<td-layout-nav logo="assets:teradata" toolbarTitle="Covalent">
   <div class="md-padding">
     <md-card>
       <md-card-title>Nav View</md-card-title>
@@ -81,14 +81,14 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
             <h3 class="md-title">HTML</h3>
             <td-highlight lang="html">
                 <![CDATA[
-                <td-layout #layout sidenavTitle="Sidenav Title" logo="path/to/sidenav-logo.svg">
+                <td-layout #layout sidenavTitle="Sidenav Title" logo="svgIconName">
                   <md-nav-list menu-items>
                     <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()">
                       <md-icon>{ {item.icon} }</md-icon>
                       { {item.title} }
                     </a>
                   </md-nav-list>
-                  <td-layout-nav toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
+                  <td-layout-nav toolbarTitle="Toolbar Title" logo="svgIconName">
                     <router-outlet></router-outlet>
                   </td-layout-nav>
                 </td-layout>
diff --git a/src/app/components/layouts/nav-view/nav-view.component.ts b/src/app/components/layouts/nav-view/nav-view.component.ts
index f7e25e4147..93df157e55 100644
--- a/src/app/components/layouts/nav-view/nav-view.component.ts
+++ b/src/app/components/layouts/nav-view/nav-view.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'layouts-nav-view',
-  styleUrls: ['nav-view.component.scss'],
-  templateUrl: 'nav-view.component.html',
+  styleUrls: ['./nav-view.component.scss'],
+  templateUrl: './nav-view.component.html',
 })
 export class NavViewComponent {
 
diff --git a/src/app/components/layouts/overview/overview.component.html b/src/app/components/layouts/overview/overview.component.html
index 01b1914ba8..834133ba32 100644
--- a/src/app/components/layouts/overview/overview.component.html
+++ b/src/app/components/layouts/overview/overview.component.html
@@ -1,4 +1,4 @@
-<td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
+<td-layout-nav logo="assets:teradata" toolbarTitle="Covalent">
   <td-layout-card-over cardTitle="Layout Options" cardSubtitle="We offer 4 Material Design layouts for you">
     <md-card-content hide-xs>
       <p>For your entire app or for different sections of your app, select one of these Material Design layout options:</p>
diff --git a/src/app/components/layouts/overview/overview.component.ts b/src/app/components/layouts/overview/overview.component.ts
index b6ee36cca1..c37f9f501a 100644
--- a/src/app/components/layouts/overview/overview.component.ts
+++ b/src/app/components/layouts/overview/overview.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'layouts-overview',
-  styleUrls: ['overview.component.scss'],
-  templateUrl: 'overview.component.html',
+  styleUrls: ['./overview.component.scss'],
+  templateUrl: './overview.component.html',
 })
 export class LayoutsOverviewComponent {
 
diff --git a/src/app/components/style-guide/cards/cards.component.html b/src/app/components/style-guide/cards/cards.component.html
index 435188a0c8..c2fbab77f0 100644
--- a/src/app/components/style-guide/cards/cards.component.html
+++ b/src/app/components/style-guide/cards/cards.component.html
@@ -63,12 +63,14 @@
         <md-divider></md-divider>
         <md-card-content>
           <form #loginForm="ngForm" layout="row" layout-align="center center" layout-margin>
-            <md-input flex placeholder="Username" type="text" ngControl="username" required>
+            <md-input-container flex>
+              <input md-input placeholder="Username" type="text" ngControl="username" required/>
               <span md-prefix><md-icon>person</md-icon></span>
-            </md-input>
-            <md-input flex placeholder="Password" type="password" ngControl="password" required>
+            </md-input-container>
+            <md-input-container flex>
+              <input md-input placeholder="Password" type="password" ngControl="password" required/>
               <span md-prefix><md-icon>lock</md-icon></span>
-            </md-input>
+            </md-input-container>
           </form>
         </md-card-content>
         <md-divider></md-divider>
@@ -85,12 +87,14 @@
             <md-divider></md-divider>
             <md-card-content>
               <form #loginForm="ngForm" layout="row" layout-align="center center" layout-margin>
-                <md-input flex placeholder="Username" type="text" ngControl="username" [(ngModel)]="user" required>
+                <md-input-container flex>
+                  <input md-input placeholder="Username" type="text" ngControl="username" required/>
                   <span md-prefix><md-icon>person</md-icon></span>
-                </md-input>
-                <md-input flex placeholder="Password" type="password" ngControl="password" [(ngModel)]="pass" required>
+                </md-input-container>
+                <md-input-container flex>
+                  <input md-input placeholder="Password" type="password" ngControl="password" required/>
                   <span md-prefix><md-icon>lock</md-icon></span>
-                </md-input>
+                </md-input-container>
               </form>
             </md-card-content>
             <md-divider></md-divider>
@@ -207,9 +211,10 @@ <h4 md-line>Wed, July 4, 2016 09:11 AM</h4>
     <div class="md-padding bgc-grey-200">
       <md-card>
         <md-card-title layout>
-          <md-input class="text-sm" placeholder="search items" flex>
+          <md-input-container class="text-sm" flex>
+            <input md-input placeholder="search items"/>
             <span md-prefix><md-icon>search</md-icon></span>
-          </md-input>
+          </md-input-container>
         </md-card-title>
         <md-list class="pull-top">
           <md-list-item>
@@ -237,9 +242,10 @@ <h3 md-line> Item {{i}} </h3>
         <![CDATA[
           <md-card>
             <md-card-title layout>
-              <md-input class="text-sm" placeholder="search items" flex>
+              <md-input-container class="text-sm" flex>
+                <input md-input placeholder="search items"/>
                 <span md-prefix><md-icon>search</md-icon></span>
-              </md-input>
+              </md-input-container>
             </md-card-title>
             <md-list class="pull-top">
               <md-list-item>
diff --git a/src/app/components/style-guide/cards/cards.component.ts b/src/app/components/style-guide/cards/cards.component.ts
index e45a18f9f8..d3c3dda3ad 100644
--- a/src/app/components/style-guide/cards/cards.component.ts
+++ b/src/app/components/style-guide/cards/cards.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'design-patterns-cards',
-  styleUrls: ['cards.component.scss'],
-  templateUrl: 'cards.component.html',
+  styleUrls: ['./cards.component.scss'],
+  templateUrl: './cards.component.html',
 })
 export class CardsComponent {
 
diff --git a/src/app/components/style-guide/colors/colors.component.ts b/src/app/components/style-guide/colors/colors.component.ts
index df579f6934..26fb9a2a72 100644
--- a/src/app/components/style-guide/colors/colors.component.ts
+++ b/src/app/components/style-guide/colors/colors.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'style-guide-colors',
-  styleUrls: ['colors.component.scss'],
-  templateUrl: 'colors.component.html',
+  styleUrls: ['./colors.component.scss'],
+  templateUrl: './colors.component.html',
 })
 export class ColorsComponent {
   colors: string[] = [
diff --git a/src/app/components/style-guide/dialogs/dialogs.component.html b/src/app/components/style-guide/dialogs/dialogs.component.html
index 1f58ede5d3..0d859a8ac3 100644
--- a/src/app/components/style-guide/dialogs/dialogs.component.html
+++ b/src/app/components/style-guide/dialogs/dialogs.component.html
@@ -110,28 +110,34 @@ <h4><span class="tc-orange-800 md-title">Important:</span> we recommend using fu
   <md-card-content>
     <form #myForm="ngForm">
       <div layout-gt-xs="row" layout-margin>
-        <md-input #firstNameForm="ngModel" flex placeholder="Firstname" [(ngModel)]="first_name" name="first_name" required tdAutoTrim>
+        <md-input-container flex>
+          <input md-input #firstNameForm="ngModel" placeholder="Firstname" [(ngModel)]="first_name" name="first_name" required tdAutoTrim/>
           <md-hint>
             <span [hidden]="firstNameForm.pristine || !firstNameForm.errors?.required" class="tc-red-600">Required</span>
           </md-hint>
-        </md-input>
-        <md-input #lastNameForm="ngModel" flex placeholder="Lastname" [(ngModel)]="last_name" name="last_name" required tdAutoTrim>
+        </md-input-container>
+        <md-input-container flex>
+          <input md-input #lastNameForm="ngModel" flex placeholder="Lastname" [(ngModel)]="last_name" name="last_name" required tdAutoTrim/>
           <md-hint>
             <span [hidden]="lastNameForm.pristine || !lastNameForm.errors?.required" class="tc-red-600">Required</span>
           </md-hint>
-        </md-input>
+        </md-input-container>
       </div>
       <div layout-gt-xs="row" layout-margin>
-        <md-input #addressEl #addressForm="ngModel" flex="40" placeholder="Address" [(ngModel)]="address" name="address" required maxlength="50" tdAutoTrim>
+        <md-input-container flex="40">
+          <input md-input #addressEl #addressForm="ngModel" placeholder="Address" [(ngModel)]="address" name="address" required maxlength="50" tdAutoTrim/>
           <md-hint>
             <span [hidden]="addressForm.pristine || !addressForm.errors?.required" class="tc-red-600">Required</span>
           </md-hint>
-          <md-hint align="end">{{addressEl.characterCount}} / 50</md-hint>
-        </md-input>
-        <md-input flex="35" placeholder="City" tdAutoTrim></md-input>
+          <md-hint align="end">{{addressEl.value.length}} / 50</md-hint>
+        </md-input-container>
+        <md-input-container flex="35">
+          <input md-input placeholder="City" [(ngModel)]="city" name="city" tdAutoTrim/>
+        </md-input-container>
       </div>
       <div layout-gt-xs="row" layout-margin>
-        <md-input #stateForm="ngModel" flex="20" placeholder="State" [(ngModel)]="state" name="state" pattern="[A-Z]{2}" maxlength="2" required tdAutoTrim>
+        <md-input-container flex="20">
+          <input md-input #stateForm="ngModel" placeholder="State" [(ngModel)]="state" name="state" pattern="[A-Z]{2}" maxlength="2" required tdAutoTrim/>
           <md-hint>
             <span [hidden]="stateForm.pristine" class="tc-red-600">
               <span [hidden]="!stateForm.errors?.required">Required</span>
@@ -139,8 +145,9 @@ <h4><span class="tc-orange-800 md-title">Important:</span> we recommend using fu
             </span>
           </md-hint>
           <md-hint align="end">e.g CA</md-hint>
-        </md-input>
-        <md-input #zipForm="ngModel" flex="25" placeholder="Zip" [(ngModel)]="zip" name="zip" pattern="\d{5}" maxlength="5" required>
+        </md-input-container>
+        <md-input-container flex="25">
+          <input md-input #zipForm="ngModel" placeholder="Zip" [(ngModel)]="zip" name="zip" pattern="\d{5}" maxlength="5" required/>
           <md-hint>
             <span [hidden]="zipForm.pristine" class="tc-red-600">
               <span [hidden]="!zipForm.errors?.required">Required</span>
@@ -148,7 +155,7 @@ <h4><span class="tc-orange-800 md-title">Important:</span> we recommend using fu
             </span>
           </md-hint>
           <md-hint align="end">e.g 92101</md-hint>
-        </md-input>
+        </md-input-container>
       </div>
     </form>
   </md-card-content>
@@ -162,37 +169,44 @@ <h4><span class="tc-orange-800 md-title">Important:</span> we recommend using fu
       <![CDATA[
         <form #myForm="ngForm">
           <div layout-gt-xs="row" layout-margin>
-            <md-input #firstNameForm="ngModel" flex placeholder="Firstname" [(ngModel)]="first_name" name="first_name" required tdAutoTrim>
+            <md-input-container flex>
+              <input md-input #firstNameForm="ngModel" placeholder="Firstname" [(ngModel)]="first_name" name="first_name" required tdAutoTrim/>
               <md-hint>
                 <span [hidden]="firstNameForm.pristine || !firstNameForm.errors?.required" class="tc-red-600">Required</span>
               </md-hint>
-            </md-input>
-            <md-input #lastNameForm="ngModel" flex placeholder="Lastname" [(ngModel)]="last_name" name="last_name" required tdAutoTrim>
+            </md-input-container>
+            <md-input-container flex>
+              <input md-input #lastNameForm="ngModel" flex placeholder="Lastname" [(ngModel)]="last_name" name="last_name" required tdAutoTrim/>
               <md-hint>
                 <span [hidden]="lastNameForm.pristine || !lastNameForm.errors?.required" class="tc-red-600">Required</span>
               </md-hint>
-            </md-input>
+            </md-input-container>
           </div>
           <div layout-gt-xs="row" layout-margin>
-            <md-input #addressEl #addressForm="ngModel" flex="40" placeholder="Address" [(ngModel)]="address" name="address" required maxlength="50" tdAutoTrim>
+            <md-input-container flex="40">
+              <input md-input #addressEl #addressForm="ngModel" placeholder="Address" [(ngModel)]="address" name="address" required maxlength="50" tdAutoTrim/>
               <md-hint>
                 <span [hidden]="addressForm.pristine || !addressForm.errors?.required" class="tc-red-600">Required</span>
               </md-hint>
-              <md-hint align="end">{{addressEl.characterCount}} / 50</md-hint>
-            </md-input>
-            <md-input flex="35" placeholder="City" tdAutoTrim></md-input>
+              <md-hint align="end">{{addressEl.value.length}} / 50</md-hint>
+            </md-input-container>
+            <md-input-container flex="35">
+              <input md-input placeholder="City" [(ngModel)]="city" name="city" tdAutoTrim/>
+            </md-input-container>
           </div>
           <div layout-gt-xs="row" layout-margin>
-            <md-input #stateForm="ngModel" flex="20" placeholder="State" [(ngModel)]="state" name="state" pattern="[A-Z]{2}" maxlength="2" required tdAutoTrim>
+            <md-input-container flex="20">
+              <input md-input #stateForm="ngModel" placeholder="State" [(ngModel)]="state" name="state" pattern="[A-Z]{2}" maxlength="2" required tdAutoTrim/>
               <md-hint>
                 <span [hidden]="stateForm.pristine" class="tc-red-600">
                   <span [hidden]="!stateForm.errors?.required">Required</span>
-                  <span [hidden]="!stateForm.errors?.pattern">2 letters</span>
+                  <span [hidden]="!stateForm.errors?.pattern">2 uppercase letters</span>
                 </span>
               </md-hint>
               <md-hint align="end">e.g CA</md-hint>
-            </md-input>
-            <md-input #zipForm="ngModel" flex="25" placeholder="Zip" [(ngModel)]="zip" name="zip" pattern="\d{5}" maxlength="5" required>
+            </md-input-container>
+            <md-input-container flex="25">
+              <input md-input #zipForm="ngModel" placeholder="Zip" [(ngModel)]="zip" name="zip" pattern="\d{5}" maxlength="5" required/>
               <md-hint>
                 <span [hidden]="zipForm.pristine" class="tc-red-600">
                   <span [hidden]="!zipForm.errors?.required">Required</span>
@@ -200,7 +214,7 @@ <h4><span class="tc-orange-800 md-title">Important:</span> we recommend using fu
                 </span>
               </md-hint>
               <md-hint align="end">e.g 92101</md-hint>
-            </md-input>
+            </md-input-container>
           </div>
         </form>
       ]]>
diff --git a/src/app/components/style-guide/dialogs/dialogs.component.ts b/src/app/components/style-guide/dialogs/dialogs.component.ts
index 6b53bc8cea..55ee7d4cf8 100644
--- a/src/app/components/style-guide/dialogs/dialogs.component.ts
+++ b/src/app/components/style-guide/dialogs/dialogs.component.ts
@@ -6,8 +6,8 @@ import { MdSnackBar } from '@angular/material';
 
 @Component({
   selector: 'design-patterns-dialogs',
-  styleUrls: ['dialogs.component.scss'],
-  templateUrl: 'dialogs.component.html',
+  styleUrls: ['./dialogs.component.scss'],
+  templateUrl: './dialogs.component.html',
 })
 export class DialogsToastsComponent {
 
diff --git a/src/app/components/style-guide/iconography/iconography.component.html b/src/app/components/style-guide/iconography/iconography.component.html
index aafcf82881..c685152d0a 100644
--- a/src/app/components/style-guide/iconography/iconography.component.html
+++ b/src/app/components/style-guide/iconography/iconography.component.html
@@ -43,7 +43,7 @@ <h3 class="md-title">Usage</h3>
             <md-icon class="tc-green-700">palette</md-icon>
 
             /* this will be a green filled SVG icon */
-            <md-icon class="fill-green-700" svgIcon="/path/to/palette.svg"></md-icon>
+            <md-icon class="fill-green-700" svgIcon="svgIconName"></md-icon>
           ]]>
         </td-highlight>
         <p>choose from any of the material colors, in hues from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 (and A100, A200, A400, A700 for all except brown, grey &amp; blue-grey)</p>
@@ -106,7 +106,7 @@ <h3 class="md-title">Usage</h3>
             <md-icon class="tc-dark-green-700">palette</md-icon>
 
             /* this will be a dark green filled SVG icon */
-            <md-icon class="fill-dark-green-700" svgIcon="/path/to/palette.svg"></md-icon>
+            <md-icon class="fill-dark-green-700" svgIcon="svgIconName"></md-icon>
           ]]>
         </td-highlight>
         <p>choose from any of the dark material colors, in hues from 500, B100, B65, B40, B30 &amp; B15</p>
diff --git a/src/app/components/style-guide/iconography/iconography.component.ts b/src/app/components/style-guide/iconography/iconography.component.ts
index 8e3346a72e..f6f1dfcb02 100644
--- a/src/app/components/style-guide/iconography/iconography.component.ts
+++ b/src/app/components/style-guide/iconography/iconography.component.ts
@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'style-guide-iconography',
-  styleUrls: ['iconography.component.scss'],
-  templateUrl: 'iconography.component.html',
+  styleUrls: ['./iconography.component.scss'],
+  templateUrl: './iconography.component.html',
 })
 export class IconographyComponent implements OnInit {
   colors: string[] = [
diff --git a/src/app/components/style-guide/logo/logo.component.html b/src/app/components/style-guide/logo/logo.component.html
index d2270c322e..66b528ab09 100644
--- a/src/app/components/style-guide/logo/logo.component.html
+++ b/src/app/components/style-guide/logo/logo.component.html
@@ -10,11 +10,11 @@
     <p class="md-body-1">For example:</p>
     <td-highlight lang="html">
       <![CDATA[
-        <md-icon class="md-icon-logo" svgSrc="app/assets/icons/teradata.svg"></md-icon>
+        <md-icon class="md-icon-logo" svgIcon="assets:teradata"></md-icon>
       ]]>
     </td-highlight>
     <p class="md-body-1">The code above will output a 100x26px inline SVG:</p>
-    <md-icon class="md-icon-logo" svgSrc="app/assets/icons/teradata.svg"></md-icon>
+    <md-icon class="md-icon-logo" svgIcon="assets:teradata"></md-icon>
   </md-card-content>
   <md-divider></md-divider>
   <md-card-actions>
@@ -28,7 +28,7 @@
   <md-card-title>Toolbar Placement</md-card-title>
   <md-divider></md-divider>
   <md-card-content>
-    <td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="App Title">
+    <td-layout-nav logo="assets:teradata" toolbarTitle="App Title">
     </td-layout-nav>
   </md-card-content>
 </md-card>
@@ -37,10 +37,10 @@
   <md-card-title>Sidenav Placement</md-card-title>
   <md-divider></md-divider>
   <md-card-content>
-    <md-sidenav-layout>
+    <md-sidenav-container>
       <md-sidenav opened="true" mode="side">
         <md-toolbar layout="row">
-          <md-icon class="md-icon-logo" svgSrc="app/assets/icons/teradata.svg"></md-icon>
+          <md-icon class="md-icon-logo" svgIcon="assets:teradata"></md-icon>
           <span flex>App Title</span>
         </md-toolbar>
         <div class="md-padding">
@@ -56,6 +56,6 @@
           <button md-raised-button>Example Button</button>
         </md-card>
       </div>
-    </md-sidenav-layout>
+    </md-sidenav-container>
   </md-card-content>
 </md-card>
\ No newline at end of file
diff --git a/src/app/components/style-guide/logo/logo.component.ts b/src/app/components/style-guide/logo/logo.component.ts
index 2cf0c236fb..3af85357e3 100644
--- a/src/app/components/style-guide/logo/logo.component.ts
+++ b/src/app/components/style-guide/logo/logo.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'style-guide-logo',
-  styleUrls: ['logo.component.scss'],
-  templateUrl: 'logo.component.html',
+  styleUrls: ['./logo.component.scss'],
+  templateUrl: './logo.component.html',
 })
 export class LogoComponent {
 
diff --git a/src/app/components/style-guide/product-icons/product-icons.component.html b/src/app/components/style-guide/product-icons/product-icons.component.html
index 71e6e18bb3..4f4d712d70 100644
--- a/src/app/components/style-guide/product-icons/product-icons.component.html
+++ b/src/app/components/style-guide/product-icons/product-icons.component.html
@@ -11,15 +11,15 @@ <h3 class="md-title">Style</h3>
     <h4 class="md-subtitle">Examples</h4>
     <div layout="row">
       <div flex layout="column" layout-align="center center">
-        <md-icon class="md-icon-lg fill-teal-700" svgSrc="app/assets/icons/appcenter.svg"></md-icon>
+        <md-icon class="md-icon-lg fill-teal-700" svgIcon="assets:appcenter"></md-icon>
         <div class="md-subtitle push-top">AppCenter</div>
       </div>
       <div flex layout="column" layout-align="center center">
-        <md-icon class="md-icon-lg fill-orange-700" svgSrc="app/assets/icons/listener.svg"></md-icon>
+        <md-icon class="md-icon-lg fill-orange-700" svgIcon="assets:listener"></md-icon>
         <div class="md-subtitle push-top">Listener</div>
       </div>
       <div flex layout="column" layout-align="center center">
-        <md-icon class="md-icon-lg fill-cyan-700" svgSrc="app/assets/icons/querygrid.svg"></md-icon>
+        <md-icon class="md-icon-lg fill-cyan-700" svgIcon="assets:querygrid"></md-icon>
         <div class="md-subtitle push-top">QueryGrid</div>
       </div>
     </div>
@@ -27,9 +27,9 @@ <h3 class="md-title">Usage</h3>
     <p class="md-body-1">Use the <code>md-icon</code> component to load an SVG instead of a typing font icon:</p>
     <td-highlight lang="html">
       <![CDATA[
-        <md-icon svgSrc="app/assets/icons/appcenter.svg"></md-icon>
+        <md-icon svgIcon="assets:appcenter"></md-icon>
         /* to color an SVG icon use our utility material color fill class */
-        <md-icon svgSrc="app/assets/icons/appcenter.svg" class="fill-teal-700"></md-icon>
+        <md-icon class="fill-teal-700" svgIcon="assets:appcenter">/md-icon>
       ]]>
     </td-highlight>
   </md-card-content>
diff --git a/src/app/components/style-guide/product-icons/product-icons.component.ts b/src/app/components/style-guide/product-icons/product-icons.component.ts
index 1ed2a89d15..3015ddb0c9 100644
--- a/src/app/components/style-guide/product-icons/product-icons.component.ts
+++ b/src/app/components/style-guide/product-icons/product-icons.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'style-guide-product-icons',
-  styleUrls: ['product-icons.component.scss'],
-  templateUrl: 'product-icons.component.html',
+  styleUrls: ['./product-icons.component.scss'],
+  templateUrl: './product-icons.component.html',
 })
 export class ProductIconsComponent {
 
diff --git a/src/app/components/style-guide/resources/resources.component.html b/src/app/components/style-guide/resources/resources.component.html
index f3057d2c78..420d46d87c 100644
--- a/src/app/components/style-guide/resources/resources.component.html
+++ b/src/app/components/style-guide/resources/resources.component.html
@@ -17,7 +17,7 @@
   <md-divider></md-divider>
   <md-card-content>
     <p>Create static mockups that are identical to the Covalent layouts and Angular-Material components!</p>
-    <a md-ripple md-tooltip="Download" target="_blank" tooltip-position="below" md-button color="primary" href="https://dribbble.com/shots/2846624-Covalent-Material-Design-Sketch-Template-Free-download">
+    <a md-ripple mdTooltip="Download" target="_blank" mdTooltipPosition="below" md-button color="primary" href="https://dribbble.com/shots/2846624-Covalent-Material-Design-Sketch-Template-Free-download">
       <img width="100%" class="md-whiteframe-z1" src="https://d13yacurqjgara.cloudfront.net/users/13496/screenshots/2846624/covalent-sketch-template.gif">
     </a>
     <md-divider></md-divider>
@@ -62,7 +62,7 @@ <h3 md-line>Material Design Typography &amp; Iconography</h3>
   <md-divider></md-divider>
   <md-card-content>
     <p>Prototype interactive UX flows that perfectly complement the Sketch template and production Covalent code.</p>
-    <a md-ripple md-tooltip="Download" target="_blank" tooltip-position="below" md-button color="primary" href="https://dribbble.com/shots/2963271-FREE-Download-Official-Teradata-Covalent-Library-for-Axure-RP">
+    <a md-ripple mdTooltip="Download" target="_blank" mdTooltipPosition="below" md-button color="primary" href="https://dribbble.com/shots/2963271-FREE-Download-Official-Teradata-Covalent-Library-for-Axure-RP">
       <img width="100%" class="md-whiteframe-z1" src="https://d13yacurqjgara.cloudfront.net/users/815033/screenshots/2963271/attachments/616441/covalen-axure-library-1.1alpha.gif">
     </a>
     <md-divider></md-divider>
diff --git a/src/app/components/style-guide/resources/resources.component.ts b/src/app/components/style-guide/resources/resources.component.ts
index 37306dd6b8..6133903ec5 100644
--- a/src/app/components/style-guide/resources/resources.component.ts
+++ b/src/app/components/style-guide/resources/resources.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'style-guide-resources',
-  templateUrl: 'resources.component.html',
-  styleUrls: ['resources.component.scss'],
+  templateUrl: './resources.component.html',
+  styleUrls: ['./resources.component.scss'],
 })
 export class ResourcesComponent {
 
diff --git a/src/app/components/style-guide/style-guide.component.html b/src/app/components/style-guide/style-guide.component.html
index 6f6b2f0594..6bbf33c595 100644
--- a/src/app/components/style-guide/style-guide.component.html
+++ b/src/app/components/style-guide/style-guide.component.html
@@ -1,4 +1,4 @@
-<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
+<td-layout-nav-list #list logo="assets:teradata" toolbarTitle="Covalent">
   <md-nav-list list-items>
     <h3 md-subheader>Style Guide</h3>
     <template let-item let-last="last" ngFor [ngForOf]="items">
diff --git a/src/app/components/style-guide/style-guide.component.ts b/src/app/components/style-guide/style-guide.component.ts
index 61c9c52b79..cc0df18e9e 100644
--- a/src/app/components/style-guide/style-guide.component.ts
+++ b/src/app/components/style-guide/style-guide.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-style-guide',
-  styleUrls: ['style-guide.component.scss'],
-  templateUrl: 'style-guide.component.html',
+  styleUrls: ['./style-guide.component.scss'],
+  templateUrl: './style-guide.component.html',
 })
 export class StyleGuideComponent {
 
diff --git a/src/app/components/style-guide/typography/typography.component.ts b/src/app/components/style-guide/typography/typography.component.ts
index 856a9c8e26..fdacb84a3c 100644
--- a/src/app/components/style-guide/typography/typography.component.ts
+++ b/src/app/components/style-guide/typography/typography.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'style-guide-typography',
-  styleUrls: ['typography.component.scss'],
-  templateUrl: 'typography.component.html',
+  styleUrls: ['./typography.component.scss'],
+  templateUrl: './typography.component.html',
 })
 export class TypographyComponent {
   colors: string[] = [
diff --git a/src/app/components/style-guide/utility-styles/utility-styles.component.ts b/src/app/components/style-guide/utility-styles/utility-styles.component.ts
index e650037d1a..b77a0fe47d 100644
--- a/src/app/components/style-guide/utility-styles/utility-styles.component.ts
+++ b/src/app/components/style-guide/utility-styles/utility-styles.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'utility-styles',
-  templateUrl: 'utility-styles.component.html',
-  styleUrls: ['utility-styles.component.scss'],
+  templateUrl: './utility-styles.component.html',
+  styleUrls: ['./utility-styles.component.scss'],
 })
 export class UtilityStylesComponent {
 
diff --git a/src/platform/charts/_charts-theme.scss b/src/platform/charts/_charts-theme.scss
index 47c8934663..46f1cd46f4 100644
--- a/src/platform/charts/_charts-theme.scss
+++ b/src/platform/charts/_charts-theme.scss
@@ -1,4 +1,4 @@
-@import '../../../node_modules/@angular/material/core/theming/theming';
+@import '~@angular/material/core/theming/theming';
 
 @mixin covalent-charts-theme($theme) {
   $foreground: map-get($theme, foreground);
diff --git a/src/platform/charts/abstract-chart.component.ts b/src/platform/charts/abstract-chart.component.ts
index 20c8f6c040..5f0c9b76fe 100644
--- a/src/platform/charts/abstract-chart.component.ts
+++ b/src/platform/charts/abstract-chart.component.ts
@@ -55,13 +55,13 @@ export abstract class ChartComponent implements OnInit {
     if (this._data) {
       this.renderChart(this._data);
     } else if (this._dataSrc) {
-      enum ParseContent {
-        json = d3.json,
-        csv = d3.csv,
-        tsv = d3.tsv
-      }
+      let parseContent: any = {
+        json: d3.json,
+        csv: d3.csv,
+        tsv: d3.tsv,
+      };
       let contentType: string = this._dataSrc.substr(this._dataSrc.lastIndexOf('.') + 1);
-      ParseContent[contentType](this._dataSrc, (error: string, data: any) => {
+      parseContent[contentType](this._dataSrc, (error: string, data: any) => {
         if (error) { throw error; }
         this.renderChart(data);
       });
diff --git a/src/platform/charts/chart-area/chart-area.component.ts b/src/platform/charts/chart-area/chart-area.component.ts
index bd7e9db250..17fa3c0cc8 100644
--- a/src/platform/charts/chart-area/chart-area.component.ts
+++ b/src/platform/charts/chart-area/chart-area.component.ts
@@ -8,8 +8,8 @@ let d3: any = require('d3');
 
 @Component({
   selector: 'td-chart-area',
-  styleUrls: ['chart-area.component.scss'],
-  templateUrl: 'chart-area.component.html',
+  styleUrls: ['./chart-area.component.scss'],
+  templateUrl: './chart-area.component.html',
 })
 export class TdChartAreaComponent extends ChartComponent {
 
diff --git a/src/platform/charts/chart-bar/chart-bar.component.ts b/src/platform/charts/chart-bar/chart-bar.component.ts
index ca3c931378..ad708bf206 100644
--- a/src/platform/charts/chart-bar/chart-bar.component.ts
+++ b/src/platform/charts/chart-bar/chart-bar.component.ts
@@ -8,8 +8,8 @@ let d3: any = require('d3');
 
 @Component({
   selector: 'td-chart-bar',
-  styleUrls: ['chart-bar.component.scss'],
-  templateUrl: 'chart-bar.component.html',
+  styleUrls: ['./chart-bar.component.scss'],
+  templateUrl: './chart-bar.component.html',
 })
 export class TdChartBarComponent extends ChartComponent {
 
diff --git a/src/platform/charts/chart-line/chart-line.component.ts b/src/platform/charts/chart-line/chart-line.component.ts
index 2c31d22ea4..fcea576ed6 100644
--- a/src/platform/charts/chart-line/chart-line.component.ts
+++ b/src/platform/charts/chart-line/chart-line.component.ts
@@ -8,8 +8,8 @@ let d3: any = require('d3');
 
 @Component({
   selector: 'td-chart-line',
-  styleUrls: ['chart-line.component.scss'],
-  templateUrl: 'chart-line.component.html',
+  styleUrls: ['./chart-line.component.scss'],
+  templateUrl: './chart-line.component.html',
 })
 export class TdChartLineComponent extends ChartComponent {
 
diff --git a/src/platform/charts/charts.component.scss b/src/platform/charts/charts.component.scss
index 0f79c64710..8aa854df04 100644
--- a/src/platform/charts/charts.component.scss
+++ b/src/platform/charts/charts.component.scss
@@ -1,5 +1,3 @@
-@import '../../../node_modules/@angular/material/core/theming/theming';
-
 :host {
   display: block;
 }
diff --git a/src/platform/charts/charts.component.ts b/src/platform/charts/charts.component.ts
index 2087c5fd89..6db9c30db4 100644
--- a/src/platform/charts/charts.component.ts
+++ b/src/platform/charts/charts.component.ts
@@ -158,8 +158,8 @@ export class TdXAxisComponent {
 
 @Component({
   selector: 'td-charts',
-  styleUrls: ['charts.component.scss'],
-  templateUrl: 'charts.component.html',
+  styleUrls: ['./charts.component.scss'],
+  templateUrl: './charts.component.html',
 })
 export class TdChartsComponent implements OnInit {
 
diff --git a/src/platform/core/chips/_chips-theme.scss b/src/platform/core/chips/_chips-theme.scss
index de2d8bc85c..ceb19021e1 100644
--- a/src/platform/core/chips/_chips-theme.scss
+++ b/src/platform/core/chips/_chips-theme.scss
@@ -1,4 +1,5 @@
-@import '../../../../node_modules/@angular/material/core/theming/theming';
+@import '~@angular/material/core/theming/theming';
+@import '~@angular/material/core/style/variables';
 
 @mixin td-chips-theme($theme) {
   $primary: map-get($theme, primary);
@@ -6,6 +7,11 @@
   $warn: map-get($theme, warn);
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
+
+  // Gradient for showing the dashed line when the input is disabled.
+  $md-input-underline-disabled-background-image: linear-gradient(to right,
+        rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);
+
   // chip
   .td-chip {
     background: md-color($background, status-bar);
@@ -21,8 +27,13 @@
   td-chips {
     .md-input-underline {
       border-top: 1px solid md-color($foreground, hint-text);
+      &.md-disabled {
+        background-image: $md-input-underline-disabled-background-image;
+      }
       .md-input-ripple {
         background-color: md-color($primary);
+        transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+                  opacity $swift-ease-out-duration $swift-ease-out-timing-function;
         &.md-accent {
           background-color: md-color($accent);
         }
diff --git a/src/platform/core/chips/autocomplete/autocomplete.component.ts b/src/platform/core/chips/autocomplete/autocomplete.component.ts
index 8127d1c868..383f575dcd 100644
--- a/src/platform/core/chips/autocomplete/autocomplete.component.ts
+++ b/src/platform/core/chips/autocomplete/autocomplete.component.ts
@@ -15,8 +15,8 @@ export const TD_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR: any = {
 @Component({
   providers: [ TD_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR ],
   selector: 'td-autocomplete',
-  styleUrls: [ 'autocomplete.component.scss' ],
-  templateUrl: 'autocomplete.component.html',
+  styleUrls: ['./autocomplete.component.scss' ],
+  templateUrl: './autocomplete.component.html',
 })
 export class TdAutoCompleteComponent implements ControlValueAccessor {
 
diff --git a/src/platform/core/chips/chip.component.ts b/src/platform/core/chips/chip.component.ts
index 9b897c152c..91fb2b812a 100644
--- a/src/platform/core/chips/chip.component.ts
+++ b/src/platform/core/chips/chip.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'td-chip',
-  styleUrls: [ 'chip.component.scss' ],
-  templateUrl: 'chip.component.html',
+  styleUrls: ['./chip.component.scss' ],
+  templateUrl: './chip.component.html',
 })
 export class TdChipComponent {
 
diff --git a/src/platform/core/chips/chips.component.scss b/src/platform/core/chips/chips.component.scss
index 8f6895d076..f9f0b3f501 100644
--- a/src/platform/core/chips/chips.component.scss
+++ b/src/platform/core/chips/chips.component.scss
@@ -1,9 +1,3 @@
-@import '../../../../node_modules/@angular/material/core/style/variables';
-
-// Gradient for showing the dashed line when the input is disabled.
-$md-input-underline-disabled-background-image: linear-gradient(to right,
-        rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);
-
 :host {
   display: block;
   padding: 0px 5px 0px 5px;
@@ -39,7 +33,6 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
 
   &.md-disabled {
     border-top: 0;
-    background-image: $md-input-underline-disabled-background-image;
     background-position: 0;
     background-size: 4px 1px;
     background-repeat: repeat-x;
@@ -54,8 +47,6 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
     transform-origin: top;
     opacity: 0;
     transform: scaleY(0);
-    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
-                opacity $swift-ease-out-duration $swift-ease-out-timing-function;
     &.md-warn {
       opacity: 1;
       transform: scaleY(1);
diff --git a/src/platform/core/chips/chips.component.ts b/src/platform/core/chips/chips.component.ts
index 7d26a9709f..b41d3f4385 100644
--- a/src/platform/core/chips/chips.component.ts
+++ b/src/platform/core/chips/chips.component.ts
@@ -15,8 +15,8 @@ export const TD_CHIPS_CONTROL_VALUE_ACCESSOR: any = {
 @Component({
   providers: [ TD_CHIPS_CONTROL_VALUE_ACCESSOR ],
   selector: 'td-chips',
-  styleUrls: [ 'chips.component.scss' ],
-  templateUrl: 'chips.component.html',
+  styleUrls: ['./chips.component.scss' ],
+  templateUrl: './chips.component.html',
 })
 export class TdChipsComponent implements ControlValueAccessor, DoCheck {
 
diff --git a/src/platform/core/common/platform.scss b/src/platform/core/common/platform.scss
index 5a56b0a09a..9a09c13181 100644
--- a/src/platform/core/common/platform.scss
+++ b/src/platform/core/common/platform.scss
@@ -20,6 +20,7 @@ $md-font-url: 'styles/font/';
 @import "styles/list";
 @import "styles/structure";
 @import "styles/shadows";
+@import "styles/sidenav";
 @import "styles/toolbar";
 @import "styles/typography";
 @import "styles/whiteframe";
diff --git a/src/platform/core/common/styles/_content.scss b/src/platform/core/common/styles/_content.scss
index fb8a76cfc2..b01e0b2b43 100644
--- a/src/platform/core/common/styles/_content.scss
+++ b/src/platform/core/common/styles/_content.scss
@@ -1,5 +1,5 @@
 // Overall app layout height
-md-sidenav-layout {
+md-sidenav-container {
   & > md-content,
   & > [md-content],
   & > .md-content {
diff --git a/src/platform/core/common/styles/_input.scss b/src/platform/core/common/styles/_input.scss
index ed3602522a..1e4c6e4cd5 100644
--- a/src/platform/core/common/styles/_input.scss
+++ b/src/platform/core/common/styles/_input.scss
@@ -6,7 +6,7 @@ $foreground: $md-light-theme-foreground;
 $background: $md-light-theme-background;
 $warn: md-palette($md-red);
 
-md-input {
+md-input-container {
     &.ng-invalid:not(.ng-pristine) {
         label {
             color: md-color($warn);
diff --git a/src/platform/core/common/styles/_sidenav.scss b/src/platform/core/common/styles/_sidenav.scss
new file mode 100644
index 0000000000..c6c72e4f0f
--- /dev/null
+++ b/src/platform/core/common/styles/_sidenav.scss
@@ -0,0 +1,7 @@
+md-sidenav {
+    [md-list-item] {
+        &,&:active,&:focus {
+        outline: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/platform/core/data-table/_data-table-theme.scss b/src/platform/core/data-table/_data-table-theme.scss
index 206243bfa8..de357a96c1 100644
--- a/src/platform/core/data-table/_data-table-theme.scss
+++ b/src/platform/core/data-table/_data-table-theme.scss
@@ -1,4 +1,4 @@
-@import '../../../../node_modules/@angular/material/core/theming/theming';
+@import '~@angular/material/core/theming/theming';
 
 @mixin td-data-table-theme($theme) {
   $primary: map-get($theme, primary);
diff --git a/src/platform/core/data-table/data-table-cell/data-table-cell.component.ts b/src/platform/core/data-table/data-table-cell/data-table-cell.component.ts
index 898c63d82c..8bb3b2beb7 100644
--- a/src/platform/core/data-table/data-table-cell/data-table-cell.component.ts
+++ b/src/platform/core/data-table/data-table-cell/data-table-cell.component.ts
@@ -3,8 +3,8 @@ import { Component, Input, Renderer, ElementRef, HostBinding } from '@angular/co
 @Component({
   /* tslint:disable-next-line */ 
   selector: 'td[td-data-table-cell]',
-  styleUrls: [ 'data-table-cell.component.scss' ],
-  templateUrl: 'data-table-cell.component.html',
+  styleUrls: ['./data-table-cell.component.scss' ],
+  templateUrl: './data-table-cell.component.html',
 })
 export class TdDataTableCellComponent {
 
diff --git a/src/platform/core/data-table/data-table-column/data-table-column.component.ts b/src/platform/core/data-table/data-table-column/data-table-column.component.ts
index b44d70bf5d..35640974ad 100644
--- a/src/platform/core/data-table/data-table-column/data-table-column.component.ts
+++ b/src/platform/core/data-table/data-table-column/data-table-column.component.ts
@@ -10,8 +10,8 @@ export interface ITdDataTableSortChangeEvent {
 @Component({
   /* tslint:disable-next-line */ 
   selector: 'th[td-data-table-column]',
-  styleUrls: [ 'data-table-column.component.scss' ],
-  templateUrl: 'data-table-column.component.html',
+  styleUrls: ['./data-table-column.component.scss' ],
+  templateUrl: './data-table-column.component.html',
 })
 export class TdDataTableColumnComponent {
 
diff --git a/src/platform/core/data-table/data-table-row/data-table-row.component.ts b/src/platform/core/data-table/data-table-row/data-table-row.component.ts
index 38c37d8e86..d3c7480a75 100644
--- a/src/platform/core/data-table/data-table-row/data-table-row.component.ts
+++ b/src/platform/core/data-table/data-table-row/data-table-row.component.ts
@@ -3,8 +3,8 @@ import { Component, Renderer, ElementRef } from '@angular/core';
 @Component({
   /* tslint:disable-next-line */ 
   selector: 'tr[td-data-table-row]',
-  styleUrls: [ 'data-table-row.component.scss' ],
-  templateUrl: 'data-table-row.component.html',
+  styleUrls: ['./data-table-row.component.scss' ],
+  templateUrl: './data-table-row.component.html',
 })
 export class TdDataTableRowComponent {
 
diff --git a/src/platform/core/data-table/data-table-table/data-table-table.component.ts b/src/platform/core/data-table/data-table-table/data-table-table.component.ts
index 1a4ff318af..03baacfb4c 100644
--- a/src/platform/core/data-table/data-table-table/data-table-table.component.ts
+++ b/src/platform/core/data-table/data-table-table/data-table-table.component.ts
@@ -3,8 +3,8 @@ import { Component, Renderer, ElementRef } from '@angular/core';
 @Component({
   /* tslint:disable-next-line */ 
   selector: 'table[td-data-table]',
-  styleUrls: [ 'data-table-table.component.scss' ],
-  templateUrl: 'data-table-table.component.html',
+  styleUrls: ['./data-table-table.component.scss' ],
+  templateUrl: './data-table-table.component.html',
 })
 export class TdDataTableTableComponent {
 
diff --git a/src/platform/core/data-table/data-table.component.html b/src/platform/core/data-table/data-table.component.html
index 6f356db751..6fe29e886f 100644
--- a/src/platform/core/data-table/data-table.component.html
+++ b/src/platform/core/data-table/data-table.component.html
@@ -19,7 +19,7 @@
         (mouseenter)="column.tooltip && tooltipRefresh()"
         [sortOrder]="_sortOrder"
         (sortChange)="handleSort(column)">
-        <span [md-tooltip]="column.tooltip">{{column.label}}</span>
+        <span [mdTooltip]="column.tooltip">{{column.label}}</span>
     </th>
     <tr td-data-table-row
         [class.md-selected]="_selectable && isRowSelected(row)"
diff --git a/src/platform/core/data-table/data-table.component.ts b/src/platform/core/data-table/data-table.component.ts
index dec4673a25..38686cbf15 100644
--- a/src/platform/core/data-table/data-table.component.ts
+++ b/src/platform/core/data-table/data-table.component.ts
@@ -42,8 +42,8 @@ export interface ITdDataTableSelectAllEvent {
 @Component({
   providers: [ TD_DATA_TABLE_CONTROL_VALUE_ACCESSOR ],
   selector: 'td-data-table',
-  styleUrls: [ 'data-table.component.scss' ],
-  templateUrl: 'data-table.component.html',
+  styleUrls: ['./data-table.component.scss' ],
+  templateUrl: './data-table.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TdDataTableComponent implements ControlValueAccessor, AfterContentInit {
diff --git a/src/platform/core/dialogs/alert-dialog/alert-dialog.component.ts b/src/platform/core/dialogs/alert-dialog/alert-dialog.component.ts
index 9557f23bb7..a41af05fdd 100644
--- a/src/platform/core/dialogs/alert-dialog/alert-dialog.component.ts
+++ b/src/platform/core/dialogs/alert-dialog/alert-dialog.component.ts
@@ -3,8 +3,8 @@ import { MdDialogRef } from '@angular/material';
 
 @Component({
   selector: 'td-alert-dialog',
-  templateUrl: 'alert-dialog.component.html',
-  styleUrls: [ 'alert-dialog.component.scss' ],
+  templateUrl: './alert-dialog.component.html',
+  styleUrls: ['./alert-dialog.component.scss' ],
 })
 export class TdAlertDialogComponent {
   title: string;
diff --git a/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.ts b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.ts
index 9a1f3ec3a4..d24d297efd 100644
--- a/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.ts
+++ b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.ts
@@ -3,8 +3,8 @@ import { MdDialogRef } from '@angular/material';
 
 @Component({
   selector: 'td-confirm-dialog',
-  templateUrl: 'confirm-dialog.component.html',
-  styleUrls: [ 'confirm-dialog.component.scss' ],
+  templateUrl: './confirm-dialog.component.html',
+  styleUrls: ['./confirm-dialog.component.scss' ],
 })
 export class TdConfirmDialogComponent {
   title: string;
diff --git a/src/platform/core/dialogs/dialog.component.ts b/src/platform/core/dialogs/dialog.component.ts
index 6244c6847d..2b4445f387 100644
--- a/src/platform/core/dialogs/dialog.component.ts
+++ b/src/platform/core/dialogs/dialog.component.ts
@@ -11,8 +11,8 @@ export class TdDialogActionsDirective {}
 
 @Component({
   selector: 'td-dialog',
-  templateUrl: 'dialog.component.html',
-  styleUrls: [ 'dialog.component.scss' ],
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.scss' ],
 })
 export class TdDialogComponent implements AfterContentInit {
 
diff --git a/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html b/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html
index 6422941e5c..80ff3bdb7b 100644
--- a/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html
+++ b/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html
@@ -5,12 +5,13 @@
   <td-dialog-content layout="column" class="md-subhead tc-grey-700">
     {{message}}
     <form #form="ngForm" layout="row" novalidate flex>
-      <md-input (keydown.enter)="$event.preventDefault(); form.valid && accept()"
-                [(ngModel)]="value"
-                name="value"
-                required
-                flex
-      ></md-input>
+      <md-input-container flex>
+        <input md-input
+               (keydown.enter)="$event.preventDefault(); form.valid && accept()"
+               [(ngModel)]="value"
+               name="value"
+               required/>
+      </md-input-container>
     </form>
   </td-dialog-content>
   <td-dialog-actions>
diff --git a/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.ts b/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.ts
index f6edd5b5d7..f0053bcd1f 100644
--- a/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.ts
+++ b/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.ts
@@ -3,8 +3,8 @@ import { MdDialogRef } from '@angular/material';
 
 @Component({
   selector: 'td-prompt-dialog',
-  templateUrl: 'prompt-dialog.component.html',
-  styleUrls: [ 'prompt-dialog.component.scss' ],
+  templateUrl: './prompt-dialog.component.html',
+  styleUrls: ['./prompt-dialog.component.scss' ],
 })
 export class TdPromptDialogComponent {
   title: string;
diff --git a/src/platform/core/expansion-panel/_expansion-panel-theme.scss b/src/platform/core/expansion-panel/_expansion-panel-theme.scss
index d68aaa1437..310c68cd8e 100644
--- a/src/platform/core/expansion-panel/_expansion-panel-theme.scss
+++ b/src/platform/core/expansion-panel/_expansion-panel-theme.scss
@@ -1,4 +1,6 @@
-@import '../../../../node_modules/@angular/material/core/theming/theming';
+@import '~@angular/material/core/theming/theming';
+@import '~@angular/material/core/style/elevation';
+@import '../common/styles/variables';
 
 @mixin td-expansion-panel-theme($theme) {
   $accent: map-get($theme, accent);
@@ -7,7 +9,18 @@
   $background: map-get($theme, background);
   // panel
   td-expansion-panel {
+    @include md-elevation(1);
     background-color: md-color($background, card);
+    &:not(:last-of-type) {
+      & .td-expanded {
+        margin-bottom: $margin;
+      }
+    }
+    &:not(:first-of-type) {
+      & .td-expanded {
+        margin-top: $margin;
+      }
+    }
     .md-disabled {
       &, & * {
         color: md-color($foreground, disabled);
diff --git a/src/platform/core/expansion-panel/expansion-panel.component.html b/src/platform/core/expansion-panel/expansion-panel.component.html
index 7417b8fccf..3de8ff1a95 100644
--- a/src/platform/core/expansion-panel/expansion-panel.component.html
+++ b/src/platform/core/expansion-panel/expansion-panel.component.html
@@ -7,18 +7,18 @@
        [class.md-interaction-disabled]="disabled"
        [class.md-tall]="expansionPanelHeader"
        md-list-item>
-      <template [portalHost]="expansionPanelHeader"></template>
+      <template [cdkPortalHost]="expansionPanelHeader"></template>
       <div [class.md-disabled]="disabled"
            *ngIf="!expansionPanelHeader"
            layout="row" 
            layout-align="start center" 
            flex>
         <div class="md-subhead td-expansion-primary" flex-gt-xs="33">
-          <template [portalHost]="expansionPanelLabel"></template>
+          <template [cdkPortalHost]="expansionPanelLabel"></template>
           <template [ngIf]="!expansionPanelLabel">{{label || 'Click to expand '}}</template>
         </div>
         <div class="md-body-1 td-expansion-secondary">
-          <template [portalHost]="expansionPanelSublabel"></template>
+          <template [cdkPortalHost]="expansionPanelSublabel"></template>
           <template [ngIf]="!expansionPanelSublabel">{{sublabel}}</template>
         </div>
         <span flex></span>
diff --git a/src/platform/core/expansion-panel/expansion-panel.component.scss b/src/platform/core/expansion-panel/expansion-panel.component.scss
index 04855712b5..a04490764f 100644
--- a/src/platform/core/expansion-panel/expansion-panel.component.scss
+++ b/src/platform/core/expansion-panel/expansion-panel.component.scss
@@ -1,6 +1,3 @@
-@import '../common/styles/variables';
-@import '../../../../node_modules/@angular/material/core/style/elevation';
-
 :host /deep/ {
   md-nav-list {
     [md-list-item] {
@@ -22,29 +19,11 @@
 }
 :host {
   display: block;
-  @include md-elevation(1);
   
   .panel {
     transition: 1s all ease;
-    margin: 0;
   }
 
-  &:first-of-type {
-    & .td-expanded {
-      margin-bottom: $margin;
-    }
-  }
-  &:not(:first-of-type):not(:last-of-type) {
-    & .td-expanded {
-      margin-top: $margin;
-      margin-bottom: $margin;
-    }
-  }
-  &:last-of-type {
-    & .td-expanded {
-      margin-top: $margin;
-    }
-  }
   md-nav-list:first-of-type,
   md-list:first-of-type {
     padding-top: 0;
diff --git a/src/platform/core/expansion-panel/expansion-panel.component.ts b/src/platform/core/expansion-panel/expansion-panel.component.ts
index 49399b8096..b164a24d55 100644
--- a/src/platform/core/expansion-panel/expansion-panel.component.ts
+++ b/src/platform/core/expansion-panel/expansion-panel.component.ts
@@ -39,8 +39,8 @@ export class TdExpansionPanelSummaryComponent {}
 
 @Component({
   selector: 'td-expansion-panel',
-  styleUrls: [ 'expansion-panel.component.scss' ],
-  templateUrl: 'expansion-panel.component.html',
+  styleUrls: ['./expansion-panel.component.scss' ],
+  templateUrl: './expansion-panel.component.html',
   animations: [
     TdCollapseAnimation(),
   ],
diff --git a/src/platform/core/file/_file-upload-theme.scss b/src/platform/core/file/_file-upload-theme.scss
index 434142654d..0ec0f52f74 100644
--- a/src/platform/core/file/_file-upload-theme.scss
+++ b/src/platform/core/file/_file-upload-theme.scss
@@ -1,11 +1,23 @@
-@import '../../../../node_modules/@angular/material/core/theming/theming';
+@import '~@angular/material/core/theming/theming';
+@import '~@angular/material/core/style/variables';
+@import '~@angular/material/core/style/elevation';
 
 @mixin td-file-upload-theme($theme) {
   $background: map-get($theme, background);
 
-  .td-file-cancel {
-    md-icon {
-      background-color: md-color($background, background);
+  td-file-upload {
+    .td-file-cancel {
+      md-icon {
+        background-color: md-color($background, background);
+      }
+    }
+    /**
+    * Class that is added ondragenter by the [TdFileDrop] directive.
+    */
+    .drop-zone {
+      transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
+                  md-elevation-transition-property-value();
+      @include md-elevation(8);
     }
   }
 }
\ No newline at end of file
diff --git a/src/platform/core/file/file-upload.component.scss b/src/platform/core/file/file-upload.component.scss
index b72a4a1ff8..1af10a6aff 100644
--- a/src/platform/core/file/file-upload.component.scss
+++ b/src/platform/core/file/file-upload.component.scss
@@ -1,46 +1,42 @@
-@import '../../../../node_modules/@angular/material/core/style/variables';
-@import '../../../../node_modules/@angular/material/core/style/elevation';
-
-button {
-  padding-left: 0;
-  padding-right: 0;
-  label {
-    cursor: pointer;
-    display: block;
-    height: 100%;
-    padding-left: 8px;
-    padding-right: 8px;
-    md-icon {
-      position: relative;
-      top: 6px;
-      padding-right: 5px;
+:host {
+  button {
+    padding-left: 0;
+    padding-right: 0;
+    label {
+      cursor: pointer;
+      display: block;
+      height: 100%;
+      padding-left: 8px;
+      padding-right: 8px;
+      md-icon {
+        position: relative;
+        top: 6px;
+        padding-right: 5px;
+      }
     }
   }
-}
-input.md-file-upload-input {
-  display: none;
-}
-.td-file-cancel {
-  height: 24px;
-  width: 24px;
-  position: relative;
-  top: 24px;
-  left: -12px;
-  md-icon {
-    border-radius: 12px;
-    vertical-align: baseline;
+  input.md-file-upload-input {
+    display: none;
   }
-}
-/**
-* Class that is added ondragenter by the [TdFileDrop] directive.
-*/
-.drop-zone {
-  // Animation.
-  border-radius: 3px;
-  transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
-              md-elevation-transition-property-value();
-  @include md-elevation(8);
-  * {
-    pointer-events: none; //added to fix bug that re-throws dragleave/dragenter by child elements
+  .td-file-cancel {
+    height: 24px;
+    width: 24px;
+    position: relative;
+    top: 24px;
+    left: -12px;
+    md-icon {
+      border-radius: 12px;
+      vertical-align: baseline;
+    }
+  }
+  /**
+  * Class that is added ondragenter by the [TdFileDrop] directive.
+  */
+  .drop-zone {
+    // Animation.
+    border-radius: 3px;
+    * {
+      pointer-events: none; //added to fix bug that re-throws dragleave/dragenter by child elements
+    }
   }
 }
diff --git a/src/platform/core/file/file-upload.component.ts b/src/platform/core/file/file-upload.component.ts
index 58d3874e16..ec8e87b5f4 100644
--- a/src/platform/core/file/file-upload.component.ts
+++ b/src/platform/core/file/file-upload.component.ts
@@ -4,8 +4,8 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
   changeDetection: ChangeDetectionStrategy.OnPush,
 
   selector: 'td-file-upload',
-  styleUrls: ['file-upload.component.scss'],
-  templateUrl: 'file-upload.component.html',
+  styleUrls: ['./file-upload.component.scss'],
+  templateUrl: './file-upload.component.html',
 })
 export class TdFileUploadComponent {
 
diff --git a/src/platform/core/json-formatter/_json-formatter-theme.scss b/src/platform/core/json-formatter/_json-formatter-theme.scss
index a2ad3dea31..d19293d955 100644
--- a/src/platform/core/json-formatter/_json-formatter-theme.scss
+++ b/src/platform/core/json-formatter/_json-formatter-theme.scss
@@ -1,4 +1,4 @@
-@import '../../../../node_modules/@angular/material/core/theming/theming';
+@import '~@angular/material/core/theming/theming';
 
 @mixin td-json-formatter-theme($theme) {
   $primary: map-get($theme, primary);
diff --git a/src/platform/core/json-formatter/json-formatter.component.ts b/src/platform/core/json-formatter/json-formatter.component.ts
index f57f591931..c7283789aa 100644
--- a/src/platform/core/json-formatter/json-formatter.component.ts
+++ b/src/platform/core/json-formatter/json-formatter.component.ts
@@ -3,8 +3,8 @@ import { Component, Input } from '@angular/core';
 @Component({
 
   selector: 'td-json-formatter',
-  styleUrls: [ 'json-formatter.component.scss' ],
-  templateUrl: 'json-formatter.component.html',
+  styleUrls: ['./json-formatter.component.scss' ],
+  templateUrl: './json-formatter.component.html',
 })
 export class TdJsonFormatterComponent {
 
diff --git a/src/platform/core/layout/_layout-theme.scss b/src/platform/core/layout/_layout-theme.scss
index bd6cde5b5c..c2b8b046ab 100644
--- a/src/platform/core/layout/_layout-theme.scss
+++ b/src/platform/core/layout/_layout-theme.scss
@@ -1,8 +1,15 @@
-@import '../../../../node_modules/@angular/material/core/theming/theming';
+@import '~@angular/material/core/theming/theming';
+@import '~@angular/material/core/style/elevation';
 
 @mixin td-layout-theme($theme) {
   $background: map-get($theme, background);
-  md-sidenav-layout {
+  .md-sidenav-container {
     background-color: md-color($background, status-bar);
   }
+  td-layout {
+    md-toolbar {
+      @include md-elevation(1);
+      z-index: 1;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/platform/core/layout/layout-card-over/layout-card-over.component.ts b/src/platform/core/layout/layout-card-over/layout-card-over.component.ts
index c0fbba89f5..25d87822ac 100644
--- a/src/platform/core/layout/layout-card-over/layout-card-over.component.ts
+++ b/src/platform/core/layout/layout-card-over/layout-card-over.component.ts
@@ -3,8 +3,8 @@ import { Input } from '@angular/core';
 
 @Component({
   selector: 'td-layout-card-over',
-  styleUrls: [ 'layout-card-over.component.scss' ],
-  templateUrl: 'layout-card-over.component.html',
+  styleUrls: ['./layout-card-over.component.scss' ],
+  templateUrl: './layout-card-over.component.html',
 })
 export class TdLayoutCardOverComponent {
 
diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html
index 275a4a8303..307da858ee 100644
--- a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html
+++ b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html
@@ -1,4 +1,4 @@
-<md-sidenav-layout fullscreen class="td-layout-manage-list md-content" flex layout="row">
+<md-sidenav-container fullscreen class="td-layout-manage-list md-content" flex layout="row">
   <md-sidenav opened align="start" mode="side" layout="column" layout-fill class="md-sidenav-left md-whiteframe-z1">
     <div flex class="md-content list">
       <ng-content select="[list-items]"></ng-content>
@@ -13,4 +13,4 @@
       <ng-content></ng-content>
     </div>
   </div>
-</md-sidenav-layout>
+</md-sidenav-container>
diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss
index dfb0771d36..654f564a89 100644
--- a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss
+++ b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss
@@ -14,20 +14,20 @@
   md-nav-list a[md-list-item] .md-list-item {
     font-size: 14px;
   }
-  md-sidenav-layout.td-layout-manage-list {
+  md-sidenav-container.td-layout-manage-list {
     & > .md-sidenav-content {
       margin-left: 0 !important;
     }
   }
   @media (max-width: 599px) {
-    md-sidenav-layout.td-layout-manage-list {
+    md-sidenav-container.td-layout-manage-list {
       & > md-sidenav {
         width: 100%;
       }
     }
   }
   @media (min-width: 600px) {
-    md-sidenav-layout.td-layout-manage-list {
+    md-sidenav-container.td-layout-manage-list {
       height: 100%;
       display: flex;
       & > md-sidenav {
@@ -43,7 +43,10 @@
           visibility: visible;
           transform: translate3d(0, 0, 0);
         }
-        &.md-sidenav-opened {
+        &.md-sidenav-opened,
+        &.md-sidenav-opening,
+        &.md-sidenav-closed,
+        &.md-sidenav-closing {
           box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
         }
       }
diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts
index ad70f28e45..c67f2deb2c 100644
--- a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts
+++ b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts
@@ -8,13 +8,11 @@ import { TdLayoutService } from '../services/layout.service';
 
 @Component({
   selector: 'td-layout-manage-list',
-  styleUrls: [ 'layout-manage-list.component.scss' ],
-  templateUrl: 'layout-manage-list.component.html',
+  styleUrls: ['./layout-manage-list.component.scss' ],
+  templateUrl: './layout-manage-list.component.html',
 })
 export class TdLayoutManageListComponent {
 
-  private _transitioning: boolean = false;
-
   @ViewChild(MdSidenav) _sideNav: MdSidenav;
 
   /**
@@ -34,36 +32,21 @@ export class TdLayoutManageListComponent {
    * Proxy toggle method to access sidenav from outside (from td-layout template).
    */
   public toggle(): void {
-    if (!this._transitioning) {
-      this._transitioning = true;
-      this._sideNav.toggle().then(() => {
-        this._transitioning = false;
-      });
-    }
+    this._sideNav.toggle();
   }
 
   /**
    * Proxy open method to access sidenav from outside (from td-layout template).
    */
   public open(): void {
-    if (!this._transitioning) {
-      this._transitioning = true;
-      this._sideNav.open().then(() => {
-        this._transitioning = false;
-      });
-    }
+    this._sideNav.open();
   }
 
   /**
    * Proxy close method to access sidenav from outside (from td-layout template).
    */
   public close(): void {
-    if (!this._transitioning) {
-      this._transitioning = true;
-      this._sideNav.close().then(() => {
-        this._transitioning = false;
-      });
-    }
+    this._sideNav.close();
   }
 
   /**
diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html
index 37bf10b0fd..24dbe2f964 100644
--- a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html
+++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html
@@ -1,9 +1,9 @@
-<md-sidenav-layout fullscreen class="td-layout-nav-list" layout="row" flex>
+<md-sidenav-container fullscreen class="td-layout-nav-list" layout="row" flex>
   <md-sidenav opened align="start" mode="side" layout="column" layout-fill class="md-sidenav-left md-whiteframe-z1" flex-gt-xs="none">
     <md-toolbar color="primary" class="md-whiteframe-z1">
       <button md-button (click)="menuClick()" md-icon-button><md-icon class="md-24">menu</md-icon></button>
       <md-icon *ngIf="icon">{{icon}}</md-icon>
-      <md-icon *ngIf="logo" class="md-icon-logo" svgSrc="{{logo}}"></md-icon>
+      <md-icon *ngIf="logo" class="md-icon-logo" [svgIcon]="logo"></md-icon>
       <span>{{toolbarTitle}}</span>
       <ng-content select="[list-toolbar-content]"></ng-content>
     </md-toolbar>
@@ -20,4 +20,4 @@
       <ng-content></ng-content>
     </div>
   </div>
-</md-sidenav-layout>
+</md-sidenav-container>
diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss
index b30dc05c30..ed00934498 100644
--- a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss
+++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss
@@ -7,14 +7,14 @@
     overflow: hidden;
 }
 :host /deep/ {
-  md-sidenav-layout.td-layout-nav-list {
+  md-sidenav-container.td-layout-nav-list {
     & > .md-sidenav-content {
       margin-left: 0 !important;
       flex-grow: 1;
     }
     /* Ensure the left sidenav is a flex column & 100% height */
     & > md-sidenav {
-        & > focus-trap {
+        & > cdk-focus-trap {
         &, & > div {
           min-height: 100%;
           height: 100%;
@@ -30,14 +30,16 @@
     }
   }
   @media (min-width: 600px) {
-    md-sidenav-layout.td-layout-nav-list {
+    md-sidenav-container.td-layout-nav-list {
       height: 100%;
       display: flex;
       & > md-sidenav {
         display: flex;
         position: relative;
         height: 100%;
-        width: 382px;
+        width: 33%;
+        min-width: 260px;
+        max-width: 382px;
         flex: 0 0 auto;
         transition: none;
         &.md-sidenav-closed,
@@ -59,7 +61,7 @@
     }
   }
   @media (max-width: 599px) {
-    md-sidenav-layout.td-layout-nav-list {
+    md-sidenav-container.td-layout-nav-list {
 
       & > md-sidenav {
         &.md-sidenav-opened,
diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts
index e115166be4..a0f95c37f9 100644
--- a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts
+++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts
@@ -8,13 +8,11 @@ import { TdLayoutService } from '../services/layout.service';
 
 @Component({
   selector: 'td-layout-nav-list',
-  styleUrls: [ 'layout-nav-list.component.scss' ],
-  templateUrl: 'layout-nav-list.component.html',
+  styleUrls: ['./layout-nav-list.component.scss' ],
+  templateUrl: './layout-nav-list.component.html',
 })
 export class TdLayoutNavListComponent {
 
-  private _transitioning: boolean = false;
-
   /**
    * title in toolbar
    */
@@ -68,36 +66,21 @@ export class TdLayoutNavListComponent {
    * Proxy toggle method to access sidenav from outside (from td-layout template).
    */
   public toggle(): void {
-    if (!this._transitioning) {
-      this._transitioning = true;
-      this._sideNav.toggle().then(() => {
-        this._transitioning = false;
-      });
-    }
+    this._sideNav.toggle();
   }
 
   /**
    * Proxy open method to access sidenav from outside (from td-layout template).
    */
   public open(): void {
-    if (!this._transitioning) {
-      this._transitioning = true;
-      this._sideNav.open().then(() => {
-        this._transitioning = false;
-      });
-    }
+    this._sideNav.open();
   }
 
   /**
    * Proxy close method to access sidenav from outside (from td-layout template).
    */
   public close(): void {
-    if (!this._transitioning) {
-      this._transitioning = true;
-      this._sideNav.close().then(() => {
-        this._transitioning = false;
-      });
-    }
+    this._sideNav.close();
   }
 
   /**
diff --git a/src/platform/core/layout/layout-nav/layout-nav.component.html b/src/platform/core/layout/layout-nav/layout-nav.component.html
index 00c5630bc8..17c79ddf09 100644
--- a/src/platform/core/layout/layout-nav/layout-nav.component.html
+++ b/src/platform/core/layout/layout-nav/layout-nav.component.html
@@ -2,7 +2,7 @@
   <md-toolbar color="primary">
     <button md-button (click)="menuClick()" md-icon-button><md-icon class="md-24">menu</md-icon></button>
     <md-icon *ngIf="icon">{{icon}}</md-icon>
-    <md-icon *ngIf="logo" class="md-icon-logo" svgSrc="{{logo}}"></md-icon>
+    <md-icon *ngIf="logo" class="md-icon-logo" [svgIcon]="logo"></md-icon>
     <span>{{toolbarTitle}}</span>
     <ng-content select="[toolbar-content]"></ng-content>
   </md-toolbar>
diff --git a/src/platform/core/layout/layout-nav/layout-nav.component.ts b/src/platform/core/layout/layout-nav/layout-nav.component.ts
index ac52ea2219..aead67c6d0 100644
--- a/src/platform/core/layout/layout-nav/layout-nav.component.ts
+++ b/src/platform/core/layout/layout-nav/layout-nav.component.ts
@@ -5,8 +5,8 @@ import { TdLayoutService } from '../services/layout.service';
 
 @Component({
   selector: 'td-layout-nav',
-  styleUrls: [ 'layout-nav.component.scss' ],
-  templateUrl: 'layout-nav.component.html',
+  styleUrls: ['./layout-nav.component.scss' ],
+  templateUrl: './layout-nav.component.html',
 })
 export class TdLayoutNavComponent {
 
diff --git a/src/platform/core/layout/layout.component.html b/src/platform/core/layout/layout.component.html
index c63e279183..c779b1ce78 100644
--- a/src/platform/core/layout/layout.component.html
+++ b/src/platform/core/layout/layout.component.html
@@ -1,10 +1,10 @@
-<md-sidenav-layout fullscreen>
+<md-sidenav-container fullscreen>
   <md-sidenav #sideMenu>
     <md-toolbar>
       <div layout="column">
         <span layout="row" layout-align="start center">
           <md-icon *ngIf="icon">{{icon}}</md-icon>
-          <md-icon *ngIf="logo" class="md-icon-logo" svgSrc="{{logo}}"></md-icon>
+          <md-icon *ngIf="logo" class="md-icon-logo" [svgIcon]="logo"></md-icon>
           <span class="md-subhead">{{sidenavTitle}}</span>
         </span>
         <a *ngIf="displayName" (click)="toggleUserMenu()" class="md-body-1 md-toolbar-link" layout="row" layout-align="space-around center">
@@ -26,4 +26,4 @@
     </div>
   </md-sidenav>
   <ng-content></ng-content>
-</md-sidenav-layout>
+</md-sidenav-container>
diff --git a/src/platform/core/layout/layout.component.scss b/src/platform/core/layout/layout.component.scss
index 59e031047c..788d8bea04 100644
--- a/src/platform/core/layout/layout.component.scss
+++ b/src/platform/core/layout/layout.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../node_modules/@angular/material/core/style/elevation';
-
 :host {
   display: flex;
   margin: 0;
@@ -8,7 +6,3 @@
   height: 100%;
   overflow: hidden;
 }
-/deep/ md-toolbar {
-  @include md-elevation(1);
-  z-index: 1;
-}
diff --git a/src/platform/core/layout/layout.component.ts b/src/platform/core/layout/layout.component.ts
index f6002f2d07..719b9fae19 100644
--- a/src/platform/core/layout/layout.component.ts
+++ b/src/platform/core/layout/layout.component.ts
@@ -10,8 +10,8 @@ import { TdLayoutService } from './services/layout.service';
 @Component({
   providers: [ TdLayoutService ],
   selector: 'td-layout',
-  styleUrls: [ 'layout.component.scss' ],
-  templateUrl: 'layout.component.html',
+  styleUrls: ['./layout.component.scss' ],
+  templateUrl: './layout.component.html',
 })
 export class TdLayoutComponent implements OnDestroy, AfterViewInit {
 
diff --git a/src/platform/core/loading/_loading-theme.scss b/src/platform/core/loading/_loading-theme.scss
index d3fa4d8a4e..e8239144a9 100644
--- a/src/platform/core/loading/_loading-theme.scss
+++ b/src/platform/core/loading/_loading-theme.scss
@@ -1,4 +1,4 @@
-@import '../../../../node_modules/@angular/material/core/theming/theming';
+@import '~@angular/material/core/theming/theming';
 
 @mixin td-loading-theme($theme) {
   $background: map-get($theme, background);
diff --git a/src/platform/core/loading/loading.component.html b/src/platform/core/loading/loading.component.html
index 320f1155f2..6fb99d48e2 100644
--- a/src/platform/core/loading/loading.component.html
+++ b/src/platform/core/loading/loading.component.html
@@ -8,13 +8,13 @@
      layout-align="center center"
      layout-padding
      flex>
-    <md-progress-circle *ngIf="isCircular() && reset" 
+    <md-progress-spinner *ngIf="isCircular() && reset" 
                         [mode]="mode"
                         [value]="value" 
                         color="primary" 
                         [style.height]="getCircleDiameter()"
                         [style.width]="getCircleDiameter()">
-    </md-progress-circle>
+    </md-progress-spinner>
     <md-progress-bar *ngIf="isLinear() && reset" 
                      [mode]="mode"
                      [value]="value"
diff --git a/src/platform/core/loading/loading.component.ts b/src/platform/core/loading/loading.component.ts
index 1dd3f7484b..de8cc4edd3 100644
--- a/src/platform/core/loading/loading.component.ts
+++ b/src/platform/core/loading/loading.component.ts
@@ -14,8 +14,8 @@ export enum LoadingMode {
 
 @Component({
   selector: 'td-loading',
-  styleUrls: [ 'loading.component.scss' ],
-  templateUrl: 'loading.component.html',
+  styleUrls: ['./loading.component.scss' ],
+  templateUrl: './loading.component.html',
 })
 export class TdLoadingComponent {
 
@@ -128,7 +128,7 @@ export class TdLoadingComponent {
   startOutAnimation(): Observable<any> {
     this.animation = true;
     /* need to switch back and forth from determinate/indeterminate so the setInterval()
-    * inside md-progress-circle stops and protractor doesnt timeout waiting to sync.
+    * inside md-progress-spinner stops and protractor doesnt timeout waiting to sync.
     */
     this._mode = LoadingMode.Determinate;
     return this._animationOut.asObservable();
diff --git a/src/platform/core/package.json b/src/platform/core/package.json
index 852831f5b0..cf3aed3995 100644
--- a/src/platform/core/package.json
+++ b/src/platform/core/package.json
@@ -31,20 +31,19 @@
     "Jeremy Smartt <jeremy.smartt@teradata.com>"
   ],
   "dependencies": {
-    "@angular/common": "^2.2.1",
-    "@angular/compiler": "^2.2.1",
-    "@angular/core": "^2.2.1",
-    "@angular/forms": "^2.2.1",
-    "@angular/http": "^2.2.1",
-    "@angular/material": "2.0.0-alpha.10",
-    "@angular/platform-browser": "^2.2.1",
-    "@angular/platform-browser-dynamic": "^2.2.1",
-    "@angular/platform-server": "^2.2.1",
-    "@angular/router": "^3.2.1",
+    "@angular/common": "^2.4.1",
+    "@angular/compiler": "^2.4.1",
+    "@angular/core": "^2.4.1",
+    "@angular/forms": "^2.4.1",
+    "@angular/http": "^2.4.1",
+    "@angular/material": "2.0.0-beta.1",
+    "@angular/platform-browser": "^2.4.1",
+    "@angular/platform-browser-dynamic": "^2.4.1",
+    "@angular/platform-server": "^2.4.1",
+    "@angular/router": "^3.4.1",
     "core-js": "^2.4.1",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.31",
-    "zone.js": "^0.6.25",
-    "hammerjs": "^2.0.8"
+    "hammerjs": "^2.0.8",
+    "rxjs": "^5.0.1",
+    "zone.js": "^0.7.2"
   }
 }
diff --git a/src/platform/core/paging/_paging-bar-theme.scss b/src/platform/core/paging/_paging-bar-theme.scss
index 76c42a76e5..36cc99ac9b 100644
--- a/src/platform/core/paging/_paging-bar-theme.scss
+++ b/src/platform/core/paging/_paging-bar-theme.scss
@@ -1,4 +1,4 @@
-@import '../../../../node_modules/@angular/material/core/theming/theming';
+@import '~@angular/material/core/theming/theming';
 
 @mixin td-paging-bar-theme($theme) {
   $primary: map-get($theme, primary);
diff --git a/src/platform/core/paging/paging-bar.component.html b/src/platform/core/paging/paging-bar.component.html
index af794d02c9..24b7abfd91 100644
--- a/src/platform/core/paging/paging-bar.component.html
+++ b/src/platform/core/paging/paging-bar.component.html
@@ -2,7 +2,7 @@
   <span class="td-paging-bar-per-page">
     Rows per page:
   </span>
-  <button md-icon-button [md-menu-trigger-for]="pageSizeMenu">
+  <button md-icon-button [mdMenuTriggerFor]="pageSizeMenu">
     <span class="td-paging-size">{{pageSize}}</span> <md-icon>arrow_drop_down</md-icon>
   </button>
   <span class="td-paging-bar-ranges">
diff --git a/src/platform/core/paging/paging-bar.component.ts b/src/platform/core/paging/paging-bar.component.ts
index b32cc42af8..e36f4ce187 100644
--- a/src/platform/core/paging/paging-bar.component.ts
+++ b/src/platform/core/paging/paging-bar.component.ts
@@ -11,8 +11,8 @@ export interface IPageChangeEvent {
 
 @Component({
   selector: 'td-paging-bar',
-  templateUrl: 'paging-bar.component.html',
-  styleUrls: [ 'paging-bar.component.scss' ],
+  templateUrl: './paging-bar.component.html',
+  styleUrls: ['./paging-bar.component.scss' ],
 })
 export class TdPagingBarComponent implements OnInit {
 
diff --git a/src/platform/core/search/search-box/search-box.component.ts b/src/platform/core/search/search-box/search-box.component.ts
index d41ff01e7f..839fa10575 100644
--- a/src/platform/core/search/search-box/search-box.component.ts
+++ b/src/platform/core/search/search-box/search-box.component.ts
@@ -5,8 +5,8 @@ import { TdSearchInputComponent } from '../search-input/search-input.component';
 
 @Component({
   selector: 'td-search-box',
-  templateUrl: 'search-box.component.html',
-  styleUrls: [ 'search-box.component.scss' ],
+  templateUrl: './search-box.component.html',
+  styleUrls: ['./search-box.component.scss' ],
   animations: [
     trigger('inputState', [
       state('false', style({
diff --git a/src/platform/core/search/search-input/search-input.component.html b/src/platform/core/search/search-input/search-input.component.html
index 308a05c6ac..457f4f062b 100644
--- a/src/platform/core/search/search-input/search-input.component.html
+++ b/src/platform/core/search/search-input/search-input.component.html
@@ -1,14 +1,15 @@
 <div class="td-search-input" layout="row" layout-align="end center">
-  <md-input #searchElement
+  <md-input-container flex>
+    <input md-input
+            #searchElement
             [class.md-hide-underline]="!showUnderline"
             type="search"
             [placeholder]="placeholder"
             [formControl]="searchTermControl"
             (blur)="handleBlur()"
             (search)="stopPropagation($event)"
-            (keyup.enter)="handleSearch($event)"
-            flex>
-  </md-input>
+            (keyup.enter)="handleSearch($event)"/>
+  </md-input-container>
   <button md-icon-button 
           [@searchState]="searchElement.value ? true : false"
           (click)="clearSearch()"
diff --git a/src/platform/core/search/search-input/search-input.component.ts b/src/platform/core/search/search-input/search-input.component.ts
index fd92778b9e..bf37a9bd62 100644
--- a/src/platform/core/search/search-input/search-input.component.ts
+++ b/src/platform/core/search/search-input/search-input.component.ts
@@ -1,13 +1,13 @@
 import { Component, ViewChild, OnInit, Input, Output, EventEmitter,
          trigger, state, style, transition, animate } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { MdInput } from '@angular/material';
+import { MdInputDirective } from '@angular/material';
 import 'rxjs/add/operator/debounceTime';
 
 @Component({
   selector: 'td-search-input',
-  templateUrl: 'search-input.component.html',
-  styleUrls: [ 'search-input.component.scss' ],
+  templateUrl: './search-input.component.html',
+  styleUrls: ['./search-input.component.scss' ],
   animations: [
     trigger('searchState', [
       state('false', style({
@@ -32,7 +32,7 @@ export class TdSearchInputComponent implements OnInit {
     return this.searchTermControl.value;
   }
 
-  @ViewChild(MdInput) private _input: MdInput;
+  @ViewChild(MdInputDirective) private _input: MdInputDirective;
 
   searchTermControl: FormControl = new FormControl();
 
diff --git a/src/platform/core/steps/_steps-theme.scss b/src/platform/core/steps/_steps-theme.scss
index ffe151e088..992d130a1a 100644
--- a/src/platform/core/steps/_steps-theme.scss
+++ b/src/platform/core/steps/_steps-theme.scss
@@ -1,49 +1,61 @@
-@import '../../../../node_modules/@angular/material/core/theming/theming';
+@import '~@angular/material/core/theming/theming';
+@import '~@angular/material/core/style/elevation';
+@import '../common/styles/variables';
 
 @mixin td-steps-theme($theme) {
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
-  // steps
-  .td-horizontal-line {
-    border-bottom-color: md-color($foreground, divider);
-  }
-  .td-vertical-line {
-    border-left-color: md-color($foreground, divider);
-  }
-  // header
-  .td-step-header {
-    .md-caption {
-      color: md-color($foreground, secondary-text);
+  td-steps {
+    .td-steps-header {
+      @include md-elevation(1);
     }
-    .md-disabled {
-      &, & * {
-        color: md-color($foreground, disabled);
-      }
+    .td-step-content,
+    .td-step-summary,
+    .td-step-actions {
+      margin: $margin;
     }
-    .md-warn {
-      &, & * {
-        color: md-color($warn);
-      }
+    // steps
+    .td-horizontal-line {
+      border-bottom-color: md-color($foreground, divider);
     }
-    .md-complete {
-      color: md-color($accent);
+    .td-vertical-line {
+      border-left-color: md-color($foreground, divider);
     }
-  }
-  .td-circle {
-    color: md-color($background, card);
-    &.md-active {
-      background-color: md-color($accent);
+    // header
+    .td-step-header {
+      .md-caption {
+        color: md-color($foreground, secondary-text);
+      }
+      .md-disabled {
+        &, & * {
+          color: md-color($foreground, disabled);
+        }
+      }
+      .md-warn {
+        &, & * {
+          color: md-color($warn);
+        }
+      }
+      .md-complete {
+        color: md-color($accent);
+      }
     }
-    &.md-inactive {
-      background-color: md-color($foreground, disabled);
+    .td-circle {
+      color: md-color($background, card);
+      &.md-active {
+        background-color: md-color($accent);
+      }
+      &.md-inactive {
+        background-color: md-color($foreground, disabled);
+      }
+      & md-icon {
+        fill: md-color($foreground, text);
+      }
     }
-    & md-icon {
-      fill: md-color($foreground, text);
+    .td-triangle {
+      color: md-color($warn);
     }
   }
-  .td-triangle {
-    color: md-color($warn);
-  }
 }
\ No newline at end of file
diff --git a/src/platform/core/steps/step-body/step-body.component.scss b/src/platform/core/steps/step-body/step-body.component.scss
index cad6f508b4..a443d6d189 100644
--- a/src/platform/core/steps/step-body/step-body.component.scss
+++ b/src/platform/core/steps/step-body/step-body.component.scss
@@ -1,11 +1,3 @@
-@import '../../common/styles/variables';
-
-.td-step-content,
-.td-step-summary,
-.td-step-actions {
-  margin: $margin;
-}
-
 .td-step-summary,
 .td-step-content-wrapper {
   overflow: hidden; // FF50 bugfix since overflow style in animation doesnt work
diff --git a/src/platform/core/steps/step-body/step-body.component.ts b/src/platform/core/steps/step-body/step-body.component.ts
index 5f641db941..c9d7150f1c 100644
--- a/src/platform/core/steps/step-body/step-body.component.ts
+++ b/src/platform/core/steps/step-body/step-body.component.ts
@@ -6,8 +6,8 @@ import { TdCollapseAnimation } from '../../common/common.module';
 
 @Component({
   selector: 'td-step-body',
-  styleUrls: [ 'step-body.component.scss' ],
-  templateUrl: 'step-body.component.html',
+  styleUrls: ['./step-body.component.scss' ],
+  templateUrl: './step-body.component.html',
   animations: [
     TdCollapseAnimation(),
   ],
diff --git a/src/platform/core/steps/step-header/step-header.component.html b/src/platform/core/steps/step-header/step-header.component.html
index 780df720f7..d339b79edc 100644
--- a/src/platform/core/steps/step-header/step-header.component.html
+++ b/src/platform/core/steps/step-header/step-header.component.html
@@ -5,7 +5,7 @@
         [tabIndex]="disabled ? -1 : 0" flex>
       <div class="md-ripple-boundary"
           md-ripple
-          [md-ripple-disabled]="disabled"
+          [mdRippleDisabled]="disabled"
           layout="row" 
           layout-align="start center"
           flex>
diff --git a/src/platform/core/steps/step-header/step-header.component.ts b/src/platform/core/steps/step-header/step-header.component.ts
index 91932562a4..000a848cac 100644
--- a/src/platform/core/steps/step-header/step-header.component.ts
+++ b/src/platform/core/steps/step-header/step-header.component.ts
@@ -4,8 +4,8 @@ import { StepState } from '../step.component';
 
 @Component({
   selector: 'td-step-header',
-  styleUrls: [ 'step-header.component.scss' ],
-  templateUrl: 'step-header.component.html',
+  styleUrls: ['./step-header.component.scss' ],
+  templateUrl: './step-header.component.html',
 })
 export class TdStepHeaderComponent {
 
diff --git a/src/platform/core/steps/step.component.ts b/src/platform/core/steps/step.component.ts
index 3cc348ef00..363eb507fa 100644
--- a/src/platform/core/steps/step.component.ts
+++ b/src/platform/core/steps/step.component.ts
@@ -38,7 +38,7 @@ export class TdStepSummaryDirective extends TemplatePortalDirective {
 
 @Component({
   selector: 'td-step',
-  templateUrl: 'step.component.html',
+  templateUrl: './step.component.html',
 })
 export class TdStepComponent implements OnInit {
 
diff --git a/src/platform/core/steps/steps.component.html b/src/platform/core/steps/steps.component.html
index 0221894625..619b2b705a 100644
--- a/src/platform/core/steps/steps.component.html
+++ b/src/platform/core/steps/steps.component.html
@@ -7,7 +7,7 @@
                     [disabled]="step.disabled" 
                     [state]="step.state"
                     (click)="step.toggle()">
-      <template td-step-header-label [portalHost]="step.stepLabel"></template>
+      <template td-step-header-label [cdkPortalHost]="step.stepLabel"></template>
       <template td-step-header-label [ngIf]="!step.stepLabel">{{step.label}}</template>
       <template td-step-header-sublabel [ngIf]="true">{{step.sublabel | truncate:30}}</template>
     </td-step-header>
@@ -23,7 +23,7 @@
                   [state]="step.state"
                   (click)="step.toggle()"
                   *ngIf="isVertical()">
-    <template td-step-header-label [portalHost]="step.stepLabel"></template>
+    <template td-step-header-label [cdkPortalHost]="step.stepLabel"></template>
     <template td-step-header-label [ngIf]="!step.stepLabel">{{step.label}}</template>
     <template td-step-header-sublabel [ngIf]="true">{{step.sublabel}}</template>
   </td-step-header>
@@ -32,9 +32,9 @@
       <div *ngIf="isVertical()" class="td-line-wrapper">
         <div *ngIf="!last" class="td-vertical-line"></div>
       </div>
-      <template td-step-body-content [portalHost]="step.stepContent"></template>
-      <template td-step-body-actions [portalHost]="step.stepActions"></template>
-      <template td-step-body-summary [portalHost]="step.stepSummary"></template>
+      <template td-step-body-content [cdkPortalHost]="step.stepContent"></template>
+      <template td-step-body-actions [cdkPortalHost]="step.stepActions"></template>
+      <template td-step-body-summary [cdkPortalHost]="step.stepSummary"></template>
     </td-step-body>
   </template>
 </div>
diff --git a/src/platform/core/steps/steps.component.scss b/src/platform/core/steps/steps.component.scss
index cb6c047caf..7f294dcad6 100644
--- a/src/platform/core/steps/steps.component.scss
+++ b/src/platform/core/steps/steps.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../node_modules/@angular/material/core/style/elevation';
-
 .td-line-wrapper,
 .td-step {
   position: relative;
@@ -29,7 +27,3 @@
   border-left-width: 1px;
   border-left-style: solid;
 }
-
-.td-steps-header {
-  @include md-elevation(1);
-}
\ No newline at end of file
diff --git a/src/platform/core/steps/steps.component.spec.ts b/src/platform/core/steps/steps.component.spec.ts
index 82a5e72eea..3f95d34b6d 100644
--- a/src/platform/core/steps/steps.component.spec.ts
+++ b/src/platform/core/steps/steps.component.spec.ts
@@ -5,7 +5,7 @@ import {
   ComponentFixture,
 } from '@angular/core/testing';
 import { Component, DebugElement } from '@angular/core';
-import { CovalentStepsModule, StepState, StepMode } from '@covalent/core';
+import { CovalentStepsModule, StepState, StepMode } from './steps.module';
 import { By } from '@angular/platform-browser';
 
 describe('Component: Steps', () => {
diff --git a/src/platform/core/steps/steps.component.ts b/src/platform/core/steps/steps.component.ts
index 6cb2d6bd0a..95c9fc0ed5 100644
--- a/src/platform/core/steps/steps.component.ts
+++ b/src/platform/core/steps/steps.component.ts
@@ -17,8 +17,8 @@ export enum StepMode {
 
 @Component({
   selector: 'td-steps',
-  styleUrls: [ 'steps.component.scss' ],
-  templateUrl: 'steps.component.html',
+  styleUrls: ['./steps.component.scss' ],
+  templateUrl: './steps.component.html',
 })
 export class TdStepsComponent implements OnDestroy, AfterContentInit {
 
diff --git a/src/platform/highlight/_highlight-theme.scss b/src/platform/highlight/_highlight-theme.scss
new file mode 100644
index 0000000000..bd7ec88d6d
--- /dev/null
+++ b/src/platform/highlight/_highlight-theme.scss
@@ -0,0 +1,73 @@
+@import '../core/common/styles/variables';
+@import '~@angular/material/core/theming/theming';
+
+@mixin covalent-highlight-theme() {
+  td-highlight {
+    .highlight {
+      color: md-color($md-indigo, 50);
+    }
+    padding: $padding;
+    & + :host {
+      margin-top: $margin; /* 2nd neighbor & beyond will have margin */
+    }
+
+    .hljs-comment,
+    .hljs-quote {
+      color: md-color($md-purple, 200);
+    }
+
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-tag,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class,
+    .hljs-regexp,
+    .hljs-deletion {
+      color: md-color($md-pink, A100);
+    }
+
+    .hljs-number,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-literal,
+    .hljs-type,
+    .hljs-params,
+    .hljs-meta,
+    .hljs-link {
+      color: md-color($md-orange, 200);
+    }
+
+    .hljs-attribute {
+      color: md-color($md-deep-orange, 200);
+    }
+
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-bullet,
+    .hljs-addition {
+      color: md-color($md-lime, 200);
+    }
+
+    .hljs-title,
+    .hljs-section {
+      color: md-color($md-light-blue, 200);
+    }
+
+    .hljs-keyword {
+      color: md-color($md-teal, A200);
+    }
+
+    .hljs-selector-tag {
+      color: md-color($md-blue, A100);
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: bold;
+    }
+  }
+}
diff --git a/src/platform/highlight/highlight.component.scss b/src/platform/highlight/highlight.component.scss
index 1d88805afa..3a977c77a2 100644
--- a/src/platform/highlight/highlight.component.scss
+++ b/src/platform/highlight/highlight.component.scss
@@ -1,6 +1,3 @@
-@import '../core/common/styles/variables';
-@import '../../../node_modules/@angular/material/core/theming/theming';
-
 $code-font: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
 
 pre,
@@ -35,7 +32,6 @@ code {
 .highlight {
   display: block;
   overflow-wrap: break-word;
-  color: md-color($md-indigo, 50);
   line-height: 1.5;
   margin: 0;
 }
@@ -46,69 +42,4 @@ code {
   overflow-x: auto;
   background: #292348;
   color: white;
-  padding: $padding;
-  & + :host {
-    margin-top: $margin; /* 2nd neighbor & beyond will have margin */
-  }
-
-  /deep/ {
-    .hljs-comment,
-    .hljs-quote {
-      color: md-color($md-purple, 200);
-    }
-
-    .hljs-variable,
-    .hljs-template-variable,
-    .hljs-tag,
-    .hljs-name,
-    .hljs-selector-id,
-    .hljs-selector-class,
-    .hljs-regexp,
-    .hljs-deletion {
-      color: md-color($md-pink, A100);
-    }
-
-    .hljs-number,
-    .hljs-built_in,
-    .hljs-builtin-name,
-    .hljs-literal,
-    .hljs-type,
-    .hljs-params,
-    .hljs-meta,
-    .hljs-link {
-      color: md-color($md-orange, 200);
-    }
-
-    .hljs-attribute {
-      color: md-color($md-deep-orange, 200);
-    }
-
-    .hljs-string,
-    .hljs-symbol,
-    .hljs-bullet,
-    .hljs-addition {
-      color: md-color($md-lime, 200);
-    }
-
-    .hljs-title,
-    .hljs-section {
-      color: md-color($md-light-blue, 200);
-    }
-
-    .hljs-keyword {
-      color: md-color($md-teal, A200);
-    }
-
-    .hljs-selector-tag {
-      color: md-color($md-blue, A100);
-    }
-
-    .hljs-emphasis {
-      font-style: italic;
-    }
-
-    .hljs-strong {
-      font-weight: bold;
-    }
-  }
 }
diff --git a/src/platform/highlight/highlight.component.ts b/src/platform/highlight/highlight.component.ts
index 8fe5a7dbc9..ec6f7448e1 100644
--- a/src/platform/highlight/highlight.component.ts
+++ b/src/platform/highlight/highlight.component.ts
@@ -4,8 +4,8 @@ let hljs: any = require('highlight.js/lib');
 
 @Component({
   selector: 'td-highlight',
-  styleUrls: ['highlight.component.scss'],
-  templateUrl: 'highlight.component.html',
+  styleUrls: ['./highlight.component.scss'],
+  templateUrl: './highlight.component.html',
 })
 export class TdHighlightComponent implements AfterViewInit {
 
diff --git a/src/platform/http/package.json b/src/platform/http/package.json
index b0126a7175..fcc1fd41e7 100644
--- a/src/platform/http/package.json
+++ b/src/platform/http/package.json
@@ -34,7 +34,7 @@
     "Jeremy Smartt <jeremy.smartt@teradata.com>"
   ],
   "dependencies": {
-    "@angular/core": "^2.2.1",
-    "@angular/http": "^2.2.1"
+    "@angular/core": "^2.4.1",
+    "@angular/http": "^2.4.1"
   }
 }
diff --git a/src/platform/markdown/_markdown-theme.scss b/src/platform/markdown/_markdown-theme.scss
index a34fec4cc4..fcb74b4db2 100644
--- a/src/platform/markdown/_markdown-theme.scss
+++ b/src/platform/markdown/_markdown-theme.scss
@@ -1,4 +1,4 @@
-@import '../../../node_modules/@angular/material/core/theming/theming';
+@import '~@angular/material/core/theming/theming';
 
 @mixin covalent-markdown-theme($theme) {
   $accent: map-get($theme, accent);
diff --git a/src/platform/markdown/markdown.component.ts b/src/platform/markdown/markdown.component.ts
index 21862976b3..f59211cfaf 100644
--- a/src/platform/markdown/markdown.component.ts
+++ b/src/platform/markdown/markdown.component.ts
@@ -4,8 +4,8 @@ declare var showdown: any;
 
 @Component({
   selector: 'td-markdown',
-  styleUrls: ['markdown.component.scss'],
-  templateUrl: 'markdown.component.html',
+  styleUrls: ['./markdown.component.scss'],
+  templateUrl: './markdown.component.html',
 })
 export class TdMarkdownComponent implements AfterViewInit {
 
diff --git a/src/platform/tsconfig-aot.json b/src/platform/tsconfig-aot.json
new file mode 100644
index 0000000000..09f923eb30
--- /dev/null
+++ b/src/platform/tsconfig-aot.json
@@ -0,0 +1,42 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "mapRoot": "./",
+    "lib": ["es6", "es2015", "dom"],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noImplicitAny": true,
+    "outDir": "../../deploy/platform",
+    "rootDir": ".",
+    "sourceMap": true,
+    "target": "es5",
+    "inlineSources": true,
+    "stripInternal": false,
+    "typeRoots": [
+      "../../node_modules/@types"
+    ],
+    "types": [
+      "jasmine", "hammerjs", "rxjs"
+    ],
+    "paths": {
+      "@covalent/*": ["./*"]
+    }
+  },
+  "include": [
+    "../typings.d.ts",
+    "**/*.ts"
+  ],
+  "exclude": [
+    "../../node_modules",
+    "**/*.spec.*"
+  ],
+  "angularCompilerOptions": {
+    "genDir": "../../deploy/platform",
+    "debug": true
+  }
+}
\ No newline at end of file
diff --git a/src/test.ts b/src/test.ts
index a8b8a8aa27..d328205ec0 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -6,6 +6,7 @@ import 'zone.js/dist/sync-test';
 import 'zone.js/dist/jasmine-patch';
 import 'zone.js/dist/async-test';
 import 'zone.js/dist/fake-async-test';
+import 'hammerjs';
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare var __karma__: any;
diff --git a/src/theme.scss b/src/theme.scss
index 068e6519bc..a7b31a3df6 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -2,6 +2,7 @@
 @import './platform/core/theming/all-theme';
 @import './platform/markdown/markdown-theme';
 @import './platform/charts/charts-theme';
+@import './platform/highlight/highlight-theme';
 // Plus imports for other components in your app.
 
 // Include the base styles for Angular Material core. We include this here so that you only
@@ -27,6 +28,7 @@ $theme: md-light-theme($primary, $accent, $warn);
 @include covalent-theme($theme);
 @include covalent-markdown-theme($theme);
 @include covalent-charts-theme($theme);
+@include covalent-highlight-theme();
 
 // Custom theme examples
 .blue-orange {