diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2f4ef1e356..5b1abb19f1 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<td-layout #layout title="Covalent" logo="app/assets/icons/teradata.svg" displayName="">
+<td-layout #layout sidenavTitle="Covalent" logo="app/assets/icons/teradata.svg" 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 8b809897d5..eea1a340e5 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -44,7 +44,7 @@ describe('Component: App', () => {
     let testComponent: DocsAppComponent = fixture.debugElement.componentInstance;
     let element: HTMLElement = fixture.nativeElement;
 
-    expect(element.querySelector('[title="Covalent"]')).toBeTruthy();
+    expect(element.querySelector('[sidenavTitle="Covalent"]')).toBeTruthy();
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       expect(element.querySelectorAll('md-nav-list[menu-items] a[md-list-item]').length)
diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html
index 772e95ccf5..76816f83d7 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" title="Covalent">
+<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" 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.html b/src/app/components/docs/docs.component.html
index 771efb33c7..44cf65136b 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" title="Covalent">
+<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" 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/layouts/card-over/card-over.component.html b/src/app/components/layouts/card-over/card-over.component.html
index 02468e28c5..476b4cab72 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" title="Covalent">
+<td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
   <td-layout-card-over>
     <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>
@@ -21,7 +21,7 @@ <h3 md-line><code>#layout</code></h3>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code>title?: string</code></h3>
+                    <h3 md-line><code>sidenavTitle?: string</code></h3>
                     <p md-line>The title of your sidenav</p>
                   </md-list-item>
                   <md-divider></md-divider>
@@ -63,7 +63,7 @@ <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code>title?: string</code></h3>
+                    <h3 md-line><code>toolbarTitle?: string</code></h3>
                     <p md-line>The title of your toolbar</p>
                   </md-list-item>
                   <md-divider></md-divider>
@@ -84,12 +84,12 @@ <h3 md-line><code><![CDATA[<td-layout-card-over>]]></code></h3>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code>title?: string</code></h3>
+                    <h3 md-line><code>cardTitle?: string</code></h3>
                     <p md-line>The card title</p>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code>subtitle?: string</code></h3>
+                    <h3 md-line><code>cardSubtitle?: string</code></h3>
                     <p md-line>The card subtitle</p>
                   </md-list-item>
                   <md-divider></md-divider>
@@ -107,15 +107,15 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
           <h3 class="md-title">HTML</h3>
           <td-highlight lang="html">
             <![CDATA[
-            <td-layout #layout title="Sidenav Title" logo="path/to/sidenav-logo.svg">
+            <td-layout #layout sidenavTitle="Sidenav Title" logo="path/to/sidenav-logo.svg">
               <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 title="Toolbar Title" logo="path/to/toolbar-logo.svg">
-                <td-layout-card-over title="Card Title" subtitle="Card subtitle">
+              <td-layout-nav toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
+                <td-layout-card-over cardTitle="Card Title" cardSubtitle="Card subtitle">
                   <router-outlet></router-outlet>
                 </td-layout-card-over>
               </td-layout-nav>
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 60b54e5098..8a6f162af8 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" title="Covalent">
+<td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
   <td-layout-manage-list #list>
     <md-nav-list list-items>
       <a md-list-item (click)="list.toggle()">
@@ -47,7 +47,7 @@ <h3 md-line><code>#layout</code></h3>
                     </md-list-item>
                     <md-divider></md-divider>
                     <md-list-item>
-                      <h3 md-line><code>title?: string</code></h3>
+                      <h3 md-line><code>sidenavTitle?: string</code></h3>
                       <p md-line>The title of your sidenav</p>
                     </md-list-item>
                     <md-divider></md-divider>
@@ -89,7 +89,7 @@ <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
                     </md-list-item>
                     <md-divider></md-divider>
                     <md-list-item>
-                      <h3 md-line><code>title?: string</code></h3>
+                      <h3 md-line><code>toolbarTitle?: string</code></h3>
                       <p md-line>The title of your toolbar</p>
                     </md-list-item>
                     <md-divider></md-divider>
@@ -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 title="Sidenav Title" logo="path/to/sidenav-logo.svg">
+                <td-layout #layout sidenavTitle="Sidenav Title" logo="path/to/sidenav-logo.svg">
                   <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 title="Toolbar Title" logo="path/to/toolbar-logo.svg">
+                  <td-layout-nav toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
                     <td-layout-manage-list #list>
                       <md-nav-list list-items>
                         <template let-item let-last="last" ngFor [ngForOf]="items">
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 25508d455d..f3cdd60095 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" title="Covalent">
+<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
   <md-nav-list list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item (click)="list.toggle()">
@@ -35,7 +35,7 @@ <h3 md-line><code>#layout</code></h3>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code>title?: string</code></h3>
+                    <h3 md-line><code>sidenavTitle?: string</code></h3>
                     <p md-line>The title of your sidenav</p>
                   </md-list-item>
                   <md-divider></md-divider>
@@ -82,7 +82,7 @@ <h3 md-line><code>#list</code></h3>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code>title?: string</code></h3>
+                    <h3 md-line><code>toolbarTitle?: string</code></h3>
                     <p md-line>The title of your toolbar</p>
                   </md-list-item>
                   <md-divider></md-divider>
@@ -110,14 +110,14 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
           <h3 class="md-title">HTML</h3>
           <td-highlight lang="html">
               <![CDATA[
-              <td-layout #layout title="Sidenav Title" logo="path/to/sidenav-logo.svg">
+              <td-layout #layout sidenavTitle="Sidenav Title" logo="path/to/sidenav-logo.svg">
                 <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 title="Toolbar Title" logo="path/to/toolbar-logo.svg">
+                <td-layout-nav-list #list toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
                   <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-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html
index c115025ce4..cf823fb5e8 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" title="Covalent">
+<td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
   <div class="md-padding">
     <md-card>
       <md-card-title>Nav View</md-card-title>
@@ -22,7 +22,7 @@ <h3 md-line><code>#layout</code></h3>
                     </md-list-item>
                     <md-divider></md-divider>
                     <md-list-item>
-                      <h3 md-line><code>title?: string</code></h3>
+                      <h3 md-line><code>sidenavTitle?: string</code></h3>
                       <p md-line>The title of your sidenav</p>
                     </md-list-item>
                     <md-divider></md-divider>
@@ -64,7 +64,7 @@ <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
                     </md-list-item>
                     <md-divider></md-divider>
                     <md-list-item>
-                      <h3 md-line><code>title?: string</code></h3>
+                      <h3 md-line><code>toolbarTitle?: string</code></h3>
                       <p md-line>The title of your toolbar</p>
                     </md-list-item>
                     <md-divider></md-divider>
@@ -87,14 +87,14 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
             <h3 class="md-title">HTML</h3>
             <td-highlight lang="html">
                 <![CDATA[
-                <td-layout #layout title="Sidenav Title" logo="path/to/sidenav-logo.svg">
+                <td-layout #layout sidenavTitle="Sidenav Title" logo="path/to/sidenav-logo.svg">
                   <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 title="Toolbar Title" logo="path/to/toolbar-logo.svg">
+                  <td-layout-nav toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
                     <router-outlet></router-outlet>
                   </td-layout-nav>
                 </td-layout>
diff --git a/src/app/components/layouts/overview/overview.component.html b/src/app/components/layouts/overview/overview.component.html
index dfd0d05cdc..01b1914ba8 100644
--- a/src/app/components/layouts/overview/overview.component.html
+++ b/src/app/components/layouts/overview/overview.component.html
@@ -1,5 +1,5 @@
-<td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
-  <td-layout-card-over title="Layout Options" subtitle="We offer 4 Material Design layouts for you">
+<td-layout-nav logo="app/assets/icons/teradata.svg" 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>
       <div layout="row" layout-padding>
diff --git a/src/app/components/style-guide/logo/logo.component.html b/src/app/components/style-guide/logo/logo.component.html
index 21febbe2f7..d2270c322e 100644
--- a/src/app/components/style-guide/logo/logo.component.html
+++ b/src/app/components/style-guide/logo/logo.component.html
@@ -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" title="App Title">
+    <td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="App Title">
     </td-layout-nav>
   </md-card-content>
 </md-card>
diff --git a/src/app/components/style-guide/style-guide.component.html b/src/app/components/style-guide/style-guide.component.html
index a1b330e7fd..6f6b2f0594 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" title="Covalent">
+<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" 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/platform/core/README.md b/src/platform/core/README.md
index 6cb6a2c36b..f19fe7b2a1 100644
--- a/src/platform/core/README.md
+++ b/src/platform/core/README.md
@@ -35,7 +35,7 @@ Properties:
 
 | Name | Type | Description |
 | --- | --- | --- |
-| `title` | `string` | Title to be displayed.
+| `sidenavTitle` | `string` | SideNav Title to be displayed.
 | `icon` | `string` | Uses material icon names.
 | `displayName` | `string` | Username to be displayed.
 | `logout` | `function()` | Function executed when logout it pressed.
@@ -56,8 +56,8 @@ Properties:
 
 | Name | Type | Description |
 | --- | --- | --- |
-| `title` | `string` | Title in card to be displayed.
-| `subtitle` | `string` | Subtitle in card to be displayed.
+| `cardTitle` | `string` | Title in card to be displayed.
+| `cardSubtitle` | `string` | Subtitle in card to be displayed.
 
 #### td-layout-manage-items
 
@@ -73,7 +73,7 @@ Example Nav Layout / Main Layout combo:
   <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>
   </menu-items>
-  <td-layout-nav title="Toolbar Title">
+  <td-layout-nav toolbarTitle="Toolbar Title">
     <div toolbar-content layout="row" layout-align="center center" flex>
       <span>Title</span>
       <span flex></span>
@@ -127,12 +127,12 @@ Example for Manage List Layout / Nav Layout combo:
 Example for Card Over Layout / Nav Layout / Main Layout combo:
 
 ```html
-<td-layout #layout title="App Title" displayName="username">
+<td-layout #layout sidenavTitle="App Title" displayName="username">
   <menu-items>
     ...
   </menu-items>
-  <td-layout-nav title="Toolbar Title">
-    <td-layout-card-over title="Card Title" subtitle="Card subtitle">
+  <td-layout-nav toolbarTitle="Toolbar Title">
+    <td-layout-card-over cardTitle="Card Title" cardSubtitle="Card subtitle">
       <md-card-content>
         ...
       </md-card-content>
diff --git a/src/platform/core/layout/layout-card-over/layout-card-over.component.html b/src/platform/core/layout/layout-card-over/layout-card-over.component.html
index 4df6b932a1..4c66916af8 100644
--- a/src/platform/core/layout/layout-card-over/layout-card-over.component.html
+++ b/src/platform/core/layout/layout-card-over/layout-card-over.component.html
@@ -1,11 +1,11 @@
 <md-toolbar color="primary">
 </md-toolbar>
 <div layout-gt-xs="row" layout-align-gt-xs="center start" layout-fill class="margin">
-  <div flex-gt-xs="65">
+  <div [attr.flex-gt-xs]="cardWidth">
     <md-card>
-      <md-card-title *ngIf="title">{{title}}</md-card-title>
-      <md-card-subtitle *ngIf="subtitle">{{subtitle}}</md-card-subtitle>
-      <md-divider *ngIf="title || subtitle"></md-divider>
+      <md-card-title *ngIf="cardTitle">{{cardTitle}}</md-card-title>
+      <md-card-subtitle *ngIf="cardSubtitle">{{cardSubtitle}}</md-card-subtitle>
+      <md-divider *ngIf="cardTitle || cardSubtitle"></md-divider>
       <ng-content></ng-content>
     </md-card>
     <ng-content select="[after-card]"></ng-content>
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 626e6eabf2..c0fbba89f5 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
@@ -11,11 +11,53 @@ export class TdLayoutCardOverComponent {
   /**
    * title in card
    */
-  @Input('title') title: string;
+  @Input('cardTitle') cardTitle: string;
 
   /**
    * subtitle in card
    */
-  @Input('subtitle') subtitle: string;
+  @Input('cardSubtitle') cardSubtitle: string;
 
+  /**
+   * card flex width %
+   */
+  @Input('cardWidth') cardWidth: number = 70;
+
+  /**
+   * title in card
+   * @deprecated since 0.9, use cardTitle instead
+   */
+  @Input()
+  set title(title: string) {
+    /* tslint:disable-next-line */
+    console.warn("title is deprecated.  Please use cardTitle instead");
+    this.cardTitle = title;
+  }
+
+  /**
+   * title in card
+   * @deprecated since 0.9, use cardTitle instead
+   */
+  get title(): string {
+    return this.cardTitle;
+  }
+
+  /**
+   * subtitle in card
+   * @deprecated since 0.9, use cardSubtitle instead
+   */
+  @Input()
+  set subtitle(subtitle: string) {
+    /* tslint:disable-next-line */
+    console.warn("subtitle is deprecated.  Please use cardSubtitle instead");
+    this.cardSubtitle = subtitle;
+  }
+
+  /**
+   * subtitle in card
+   * @deprecated since 0.9, use cardSubtitle instead
+   */
+  get subtitle(): string {
+    return this.cardSubtitle;
+  }
 }
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 0ced1b5de5..57c7c91df0 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,6 +1,6 @@
 <div class="md-content" layout="column" layout-fill>
-  <md-sidenav-layout class="md-content" flex layout="row" layout-fill>
-    <md-sidenav opened align="start" mode="side" layout="column" layout-fill class="md-sidenav-left app-list md-whiteframe-z1">
+  <md-sidenav-layout class="td-layout-manage-list md-content" flex layout="row" layout-fill>
+    <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>
       </div>
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 8c6b70d4f8..c6894d2e30 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
@@ -12,20 +12,20 @@
   md-nav-list a[md-list-item] .md-list-item {
     font-size: 14px;
   }
-  md-sidenav-layout {
+  md-sidenav-layout.td-layout-manage-list {
     & > .md-sidenav-content {
       margin-left: 0 !important;
     }
   }
   @media (max-width: 599px) {
-    md-sidenav-layout {
+    md-sidenav-layout.td-layout-manage-list {
       & > md-sidenav {
         width: 100%;
       }
     }
   }
   @media (min-width: 600px) {
-    md-sidenav-layout {
+    md-sidenav-layout.td-layout-manage-list {
       height: 100%;
       display: flex;
       & > md-sidenav {
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 8f87378939..46e1866960 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,12 +1,12 @@
 <div layout="column" layout-fill>
   <div class="md-content" flex layout-fill>
-    <md-sidenav-layout layout="row" layout-fill>
-      <md-sidenav opened align="start" mode="side" layout="column" layout-fill class="md-sidenav-left app-list md-whiteframe-z1" flex-gt-xs="none">
+    <md-sidenav-layout class="td-layout-nav-list" layout="row" layout-fill>
+      <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>
-          <span>{{title}}</span>
+          <span>{{toolbarTitle}}</span>
           <ng-content select="[list-toolbar-content]"></ng-content>
         </md-toolbar>
         <div flex class="list md-content">
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 1cf5b8a7cc..3fe19fa8a9 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,13 +7,13 @@
   color: md-color($palette, default-contrast);
 }
 :host /deep/ {
-  md-sidenav-layout {
+  md-sidenav-layout.td-layout-nav-list {
     & > .md-sidenav-content {
       margin-left: 0 !important;
     }
   }
   @media (min-width: 600px) {
-    md-sidenav-layout {
+    md-sidenav-layout.td-layout-nav-list {
       height: 100%;
       display: flex;
       & > md-sidenav {
@@ -37,7 +37,7 @@
     }
   }
   @media (max-width: 599px) {
-    md-sidenav-layout {
+    md-sidenav-layout.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 67543c18ca..e115166be4 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
@@ -18,7 +18,7 @@ export class TdLayoutNavListComponent {
   /**
    * title in toolbar
    */
-  @Input('title') title: string;
+  @Input('toolbarTitle') toolbarTitle: string;
 
   /**
    * icon for toolbar
@@ -37,6 +37,25 @@ export class TdLayoutNavListComponent {
    */
   @Output('openMenu') onOpenMenu: EventEmitter<void> = new EventEmitter<void>();
 
+  /**
+   * title in toolbar
+   * @deprecated since 0.9, use toolbarTitle instead
+   */
+  @Input()
+  set title(title: string) {
+    /* tslint:disable-next-line */
+    console.warn("title is deprecated.  Please use toolbarTitle instead");
+    this.toolbarTitle = title;
+  }
+
+  /**
+   * title in toolbar
+   * @deprecated since 0.9, use toolbarTitle instead
+   */
+  get title(): string {
+    return this.toolbarTitle;
+  }
+
   constructor(private layoutService: TdLayoutService) {
 
   }
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 8e2e454d80..241ae0e35f 100644
--- a/src/platform/core/layout/layout-nav/layout-nav.component.html
+++ b/src/platform/core/layout/layout-nav/layout-nav.component.html
@@ -3,7 +3,7 @@
     <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>
-    <span>{{title}}</span>
+    <span>{{toolbarTitle}}</span>
     <ng-content select="[toolbar-content]"></ng-content>
   </md-toolbar>
   <div flex class="content md-content">
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 a03b9b0513..ac52ea2219 100644
--- a/src/platform/core/layout/layout-nav/layout-nav.component.ts
+++ b/src/platform/core/layout/layout-nav/layout-nav.component.ts
@@ -13,7 +13,7 @@ export class TdLayoutNavComponent {
   /**
    * title in toolbar
    */
-  @Input('title') title: string;
+  @Input('toolbarTitle') toolbarTitle: string;
 
   /**
    * icon for toolbar
@@ -30,6 +30,25 @@ export class TdLayoutNavComponent {
    */
   @Output('openMenu') onOpenMenu: EventEmitter<void> = new EventEmitter<void>();
 
+  /**
+   * title in toolbar
+   * @deprecated since 0.9, use toolbarTitle instead
+   */
+  @Input()
+  set title(title: string) {
+    /* tslint:disable-next-line */
+    console.warn("title is deprecated.  Please use toolbarTitle instead");
+    this.toolbarTitle = title;
+  }
+
+  /**
+   * title in toolbar
+   * @deprecated since 0.9, use toolbarTitle instead
+   */
+  get title(): string {
+    return this.toolbarTitle;
+  }
+
   constructor(private layoutService: TdLayoutService) {
 
   }
diff --git a/src/platform/core/layout/layout.component.html b/src/platform/core/layout/layout.component.html
index d8187382c6..c63e279183 100644
--- a/src/platform/core/layout/layout.component.html
+++ b/src/platform/core/layout/layout.component.html
@@ -5,7 +5,7 @@
         <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>
-          <span class="md-subhead">{{title}}</span>
+          <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">
           <span>{{displayName}}</span>
diff --git a/src/platform/core/layout/layout.component.ts b/src/platform/core/layout/layout.component.ts
index 02825fdfeb..f6002f2d07 100644
--- a/src/platform/core/layout/layout.component.ts
+++ b/src/platform/core/layout/layout.component.ts
@@ -23,7 +23,7 @@ export class TdLayoutComponent implements OnDestroy, AfterViewInit {
   /**
    * title in sideNav menu
    */
-  @Input('title') title: string;
+  @Input('sidenavTitle') sidenavTitle: string;
 
   /**
    * icon for title in sideNav menu
@@ -45,6 +45,25 @@ export class TdLayoutComponent implements OnDestroy, AfterViewInit {
    */
   @Output('logout') onLogoutEvent: EventEmitter<void> = new EventEmitter<void>();
 
+  /**
+   * title in sideNav menu
+   * @deprecated since 0.9, use sidenavTitle instead
+   */
+  @Input()
+  set title(title: string) {
+    /* tslint:disable-next-line */
+    console.warn("title is deprecated.  Please use sidenavTitle instead");
+    this.sidenavTitle = title;
+  }
+
+  /**
+   * title in sideNav menu
+   * @deprecated since 0.9, use sidenavTitle instead
+   */
+  get title(): string {
+    return this.sidenavTitle;
+  }
+
   constructor(private layoutService: TdLayoutService) {
     this._subcriptions.push(this.layoutService.registerSidenav('menu').subscribe(() => {
       this.open();