diff --git a/ionic/components/nav/nav-item.js b/ionic/components/nav/nav-item.js
index 8157ead331..50a48339b1 100644
--- a/ionic/components/nav/nav-item.js
+++ b/ionic/components/nav/nav-item.js
@@ -34,7 +34,7 @@ export class NavItem {
       bind(NavItem).toValue(this)
     ]);
 
-    this.nav.loader.loadNextToExistingLocation(this.Class, this.nav.itemContent.elementRef, injector).then((componentRef) => {
+    this.nav.loader.loadNextToExistingLocation(this.Class, this.nav.contentAnchor.elementRef, injector).then((componentRef) => {
 
       // content
       this.component = componentRef;
@@ -43,7 +43,7 @@ export class NavItem {
       this.domElement.setAttribute('data-nav-item-id', this.id);
 
       for (let i = 0; i < this.headers.length; i++) {
-        this.createToolbar(this.headers[i], injector);
+        this.createHeader(this.headers[i], injector);
       }
 
       resolve();
@@ -52,16 +52,17 @@ export class NavItem {
     return promise;
   }
 
-  createToolbar(ToolbarClass, injector) {
-    let vc = new ViewContainerRef(this.nav.viewManager, this.nav.itemHeader.elementRef);
+  createHeader(toolbarProtoView, injector) {
+    let vc = this.nav.headerAnchor.viewContainerRef;
 
-    let protoViewRef = ToolbarClass.protoViewRef;
+    let atIndex = -1;
+    let context = this.nav.headerAnchor.elementRef;
 
-    let view = vc.create(protoViewRef, -1, this.nav.itemHeader.elementRef, injector);
+    let view = vc.create(toolbarProtoView, atIndex, context, injector);
   }
 
-  addToolbar(position, toolbar) {
-    this.headers.push(toolbar);
+  addHeader(toolbarProtoView) {
+    this.headers.push(toolbarProtoView);
   }
 
   destroy() {
diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js
index 634fd8da73..e9cccd1ffa 100644
--- a/ionic/components/nav/nav.js
+++ b/ionic/components/nav/nav.js
@@ -3,6 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 import {Injector} from 'angular2/di';
 
 import {NavBase} from 'ionic/components/nav/nav-base';
@@ -19,13 +20,15 @@ import {ToolbarContainer} from 'ionic/components/toolbar/toolbar';
 @View({
   template: `
   <header class="toolbar-container">
-    <header-container></header-container>
+    <header-anchor></header-anchor>
   </header>
   <section class="nav-item-container">
-    <content-container></content-container>
+    <content-anchor></content-anchor>
   </section>
+  <footer>
+  </footer>
   `,
-  directives: [HeaderContainer, ContentContainer]
+  directives: [HeaderAnchor, ContentAnchor]
 })
 export class Nav extends NavBase {
 
@@ -45,24 +48,26 @@ export class Nav extends NavBase {
 
 
 @Component({
-  selector: 'header-container'
+  selector: 'header-anchor'
 })
-class HeaderContainer {
-  constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
-    nav.itemHeader = {
-      elementRef: elementRef
+class HeaderAnchor {
+  constructor(@Ancestor() nav: Nav, elementRef: ElementRef, viewContainerRef: ViewContainerRef) {
+    nav.headerAnchor = {
+      elementRef: elementRef,
+      viewContainerRef: viewContainerRef
     };
   }
 }
 
 
 @Component({
-  selector: 'content-container'
+  selector: 'content-anchor'
 })
-class ContentContainer {
-  constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
-    nav.itemContent = {
-      elementRef: elementRef
+class ContentAnchor {
+  constructor(@Ancestor() nav: Nav, elementRef: ElementRef, viewContainerRef: ViewContainerRef) {
+    nav.contentAnchor = {
+      elementRef: elementRef,
+      viewContainerRef: viewContainerRef
     };
   }
 }
diff --git a/ionic/components/nav/test/basic/pages/first-page.html b/ionic/components/nav/test/basic/pages/first-page.html
index 9a39985794..4c61b1363e 100644
--- a/ionic/components/nav/test/basic/pages/first-page.html
+++ b/ionic/components/nav/test/basic/pages/first-page.html
@@ -1,9 +1,9 @@
 
-<header *ion-toolbar>
+<div *ion-header>
 
-  <h1 class="toolbar-title">First Page</h1>
+    <h1 class="toolbar-title">First Page</h1>
 
-</header>
+</div>
 
 
 <ion-content class="padding" style="background:blue">
diff --git a/ionic/components/nav/test/basic/pages/first-page.js b/ionic/components/nav/test/basic/pages/first-page.js
index 963c8818e1..3982e252fc 100644
--- a/ionic/components/nav/test/basic/pages/first-page.js
+++ b/ionic/components/nav/test/basic/pages/first-page.js
@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, Toolbar} from 'ionic/ionic';
+import {NavController, Header} from 'ionic/ionic';
 import {SecondPage} from './second-page';
 
 
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/first-page.html',
-  directives: [Toolbar]
+  directives: [Header]
 })
 export class FirstPage {
   constructor(
diff --git a/ionic/components/nav/test/basic/pages/second-page.html b/ionic/components/nav/test/basic/pages/second-page.html
index db790e11d8..ba95be0e3a 100644
--- a/ionic/components/nav/test/basic/pages/second-page.html
+++ b/ionic/components/nav/test/basic/pages/second-page.html
@@ -1,9 +1,9 @@
 
-<header *ion-toolbar>
+<div *ion-header>
 
   <h1 class="toolbar-title">Second Page</h1>
 
-</header>
+</div>
 
 
 <ion-content class="padding" style="background:green">
diff --git a/ionic/components/nav/test/basic/pages/second-page.js b/ionic/components/nav/test/basic/pages/second-page.js
index 9d9102ce11..0f44ae9092 100644
--- a/ionic/components/nav/test/basic/pages/second-page.js
+++ b/ionic/components/nav/test/basic/pages/second-page.js
@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, NavParams, Toolbar} from 'ionic/ionic';
+import {NavController, NavParams, Header} from 'ionic/ionic';
 import {ThirdPage} from './third-page';
 
 
 @Component()
 @View({
   templateUrl: 'pages/second-page.html',
-  directives: [Toolbar]
+  directives: [Header]
 })
 export class SecondPage {
   constructor(
diff --git a/ionic/components/nav/test/basic/pages/third-page.html b/ionic/components/nav/test/basic/pages/third-page.html
index 13073d7175..c2be75dd4c 100644
--- a/ionic/components/nav/test/basic/pages/third-page.html
+++ b/ionic/components/nav/test/basic/pages/third-page.html
@@ -1,9 +1,9 @@
 
-<header *ion-toolbar>
+<div *ion-header>
 
   <h1 class="toolbar-title">Third Page</h1>
 
-</header>
+</div>
 
 
 <ion-content class="padding" style="background:yellow">
diff --git a/ionic/components/nav/test/basic/pages/third-page.js b/ionic/components/nav/test/basic/pages/third-page.js
index 5e4c0738e9..559c98a198 100644
--- a/ionic/components/nav/test/basic/pages/third-page.js
+++ b/ionic/components/nav/test/basic/pages/third-page.js
@@ -1,13 +1,13 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, Toolbar} from 'ionic/ionic';
+import {NavController, Header} from 'ionic/ionic';
 
 
 @Component()
 @View({
   templateUrl: 'pages/third-page.html',
-  directives: [Toolbar]
+  directives: [Header]
 })
 export class ThirdPage {
   constructor(
diff --git a/ionic/components/toolbar/toolbar.js b/ionic/components/toolbar/toolbar.js
index 0d0184e125..f6d1cadea6 100644
--- a/ionic/components/toolbar/toolbar.js
+++ b/ionic/components/toolbar/toolbar.js
@@ -1,63 +1,27 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
 
-import * as dom from 'ionic/util/dom'
+import * as dom from 'ionic/util/dom';
 import {IonicComponent} from 'ionic/config/component';
 import {NavItem} from 'ionic/ionic';
 import {Platform} from 'ionic/platform/platform';
 
 
 @Directive({
-  selector: '[ion-toolbar]',
-  properties: {
-    placement: 'placement'
-  }
+  selector: '[ion-header]'
 })
-export class Toolbar {
+export class Header {
 
-  constructor(
-    viewContainerRef: ViewContainerRef,
-    protoViewRef: ProtoViewRef,
-    elementRef: ElementRef,
-    navItem: NavItem
-  ) {
-    this.viewContainerRef = viewContainerRef;
-    this.protoViewRef = protoViewRef;
-    this.elementRef = elementRef;
-    this.navItem = navItem;
-
-    console.log('Toolbar!');
-
-    // TODO use config to add these classes
-    this.elementRef.domElement.classList.add('toolbar');
-    this.elementRef.domElement.classList.add(`toolbar-${Platform.getMode()}`);
-
-    // TODO Make a better way than this
-    if (/footer/i.test(this.elementRef.domElement.tagName)) {
-      this.placement = 'bottom';
-    } else {
-      this.placement = 'top';
-    }
-  }
-
-  set placement(pos) {
-    this.elementRef.domElement.classList.add(`toolbar-${pos}`);
-    this.elementRef.domElement.setAttribute('placement', pos);
-
-    this._placement = pos;
-    this.navItem.addToolbar(this._placement, this);
+  constructor(navItem: NavItem, protoViewRef: ProtoViewRef) {
+    navItem.addHeader(protoViewRef);
   }
 
 }
 
 
 @Component({
-  selector: '.toolbar-title',
-  // events: {
-  //   'window:resize': 'align()',
-  // }
+  selector: '.toolbar-title'
 })
 @View({
   template: `
@@ -67,7 +31,7 @@ export class Toolbar {
 })
 export class ToolbarTitle {
   constructor(
-    element: NgElement
+    element: ElementRef
   ) {
     // this.domElement = element.domElement;
 
@@ -104,8 +68,8 @@ export class ToolbarTitle {
 
       dom.raf(() => {
         if (titleElement.offsetWidth < titleElement.scrollWidth) {
-          this.titleElement.style.margin = ''
-          this.titleElement.style.textAlign = 'left'
+          this.titleElement.style.margin = '';
+          this.titleElement.style.textAlign = 'left';
         }
         this._showTitle();
       })
@@ -113,32 +77,10 @@ export class ToolbarTitle {
   }
 
   _showTitle() {
-    if (this._shown) return;
-    this._shown = true;
-    this._titleElement.classList.remove('toolbar-title-hide');
-  }
-}
-
-@Decorator({
-  selector: '[toolbar-create]',
-  properties: {
-    'toolbar': 'toolbar-create'
-  },
-})
-export class ToolbarContainer {
-  constructor(
-    viewContainer: ViewContainerRef,
-    element: NgElement
-  ) {
-    this.viewContainer = viewContainer;
-    this.domElement = element.domElement;
-  }
-
-  set toolbar(bar: Toolbar) {
-    if (bar) {
-      // TODO create with correct context
-      this.viewContainer.create(-1, bar.viewContainer._defaultProtoView, bar.elementRef.elementInjector);
-      console.log('creating viewportContainer', performance.now())
+    if (!this._shown) {
+      this._shown = true;
+      this._titleElement.classList.remove('toolbar-title-hide');
     }
   }
+
 }