diff --git a/rpg-docs/Routes/Routes.js b/rpg-docs/Routes/Routes.js
index eb94e951..dba32a79 100644
--- a/rpg-docs/Routes/Routes.js
+++ b/rpg-docs/Routes/Routes.js
@@ -1,5 +1,6 @@
 Router.configure({
-	loadingTemplate: 'loading'
+	loadingTemplate: 'loading',
+	layoutTemplate: 'layout'
 });
 
 Router.map( function () {
diff --git a/rpg-docs/client/views/GeneralCSS/color.css b/rpg-docs/client/views/GeneralCSS/color.css
index fcbfde5e..f0ae0e0b 100644
--- a/rpg-docs/client/views/GeneralCSS/color.css
+++ b/rpg-docs/client/views/GeneralCSS/color.css
@@ -72,4 +72,8 @@
 
 .blue-grey {
 	background-color: #607D8B;
+}
+
+.white {
+	background-color: #ffffff;
 }
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/Stats/stats.html b/rpg-docs/client/views/character/Stats/stats.html
index b57633bb..f42854c3 100644
--- a/rpg-docs/client/views/character/Stats/stats.html
+++ b/rpg-docs/client/views/character/Stats/stats.html
@@ -1,9 +1,7 @@
 <template name="stats">
 	<core-animated-pages selected={{selectedSection}} transitions="hero-transition cross-fade">
 		<section id="stats">
-			<div class="abilityFlex">
 				{{> abilityCards}}
-			</div>
 		</section>
 		<section id="detailContainer">
 			<div cross-fade id="darkOverlay"></div>
diff --git a/rpg-docs/client/views/character/abilityCards/abilityCards.css b/rpg-docs/client/views/character/abilityCards/abilityCards.css
index e991e1bc..8163523c 100644
--- a/rpg-docs/client/views/character/abilityCards/abilityCards.css
+++ b/rpg-docs/client/views/character/abilityCards/abilityCards.css
@@ -1,6 +1,7 @@
 .card.double {
 	display: flex;
 }
+
 .card.double > div{
 	vertical-align: top;
 	padding: 16px;
@@ -15,7 +16,7 @@
 	border-radius: 2px 0 0 2px;
 }
 
-.abilityFlex .card {
+#stats .card {
 	padding: 0;
 }
 
diff --git a/rpg-docs/client/views/character/characterSheet.html b/rpg-docs/client/views/character/characterSheet.html
index 3d3a82ff..b9a75979 100644
--- a/rpg-docs/client/views/character/characterSheet.html
+++ b/rpg-docs/client/views/character/characterSheet.html
@@ -1,19 +1,30 @@
 <template name="characterSheet">
-	<paper-tabs id="characterSheetTabs" scrollable="true" selected={{selectedTab}}>
-		<paper-tab>Stats</paper-tab>
-		<paper-tab>Features</paper-tab>
-		<paper-tab>Inventory</paper-tab>
-		<paper-tab>Spellbook</paper-tab>
-		<paper-tab>Persona</paper-tab>
-		<paper-tab>Journal</paper-tab>
-	</paper-tabs>
-	
-	<core-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right">
-		<swipe-detect touch-action="pan-y">{{> stats}}</swipe-detect>
-		<swipe-detect touch-action="pan-y">{{> features}}</swipe-detect>
-		<swipe-detect touch-action="pan-y">inventory</swipe-detect>
-		<swipe-detect touch-action="pan-y">spellBook</swipe-detect>
-		<swipe-detect touch-action="pan-y">persona</swipe-detect>
-		<swipe-detect touch-action="pan-y">journal</swipe-detect>
-	</core-animated-pages>
+	<!--<div tool horizontal layout flex end-justified class="bottom">Title-bottom</div>-->
+	<core-toolbar class="medium-tall">
+		<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
+		<div flex>
+			Name
+		</div>
+		<paper-icon-button icon="more-vert" role="button"></paper-icon-button>
+		<div class="bottom fit" horizontal layout>
+			<paper-tabs flex horizontal center layout id="characterSheetTabs" selected={{selectedTab}}>
+				<paper-tab>Stats</paper-tab>
+				<paper-tab>Features</paper-tab>
+				<paper-tab>Inventory</paper-tab>
+				<paper-tab>Spellbook</paper-tab>
+				<paper-tab>Persona</paper-tab>
+				<paper-tab>Journal</paper-tab>
+			</paper-tabs>
+		</div>
+	</core-toolbar>
+	<div>
+		<core-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right">
+			<swipe-detect touch-action="pan-y">{{> stats}}</swipe-detect>
+			<swipe-detect touch-action="pan-y">{{> features}}</swipe-detect>
+			<swipe-detect touch-action="pan-y">inventory</swipe-detect>
+			<swipe-detect touch-action="pan-y">spellBook</swipe-detect>
+			<swipe-detect touch-action="pan-y">persona</swipe-detect>
+			<swipe-detect touch-action="pan-y">journal</swipe-detect>
+		</core-animated-pages>
+	</div>
 </template>
diff --git a/rpg-docs/client/views/layout/imports.html b/rpg-docs/client/views/layout/imports.html
index 4dc7fa4d..053dce62 100644
--- a/rpg-docs/client/views/layout/imports.html
+++ b/rpg-docs/client/views/layout/imports.html
@@ -3,7 +3,9 @@
 <link rel="import" href="/components/core-animated-pages/transitions/cross-fade.html">
 <link rel="import" href="/components/core-animated-pages/transitions/hero-transition.html">
 <link rel="import" href="/components/core-animated-pages/transitions/slide-from-right.html">
+<link rel="import" href="/components/core-item/core-item.html">
 <link rel="import" href="/components/core-menu/core-menu.html">
+<link rel="import" href="/components/core-scaffold/core-scaffold.html">
 
 <!--paper components-->
 <link rel="import" href="/components/paper-dialog/paper-dialog.html">
diff --git a/rpg-docs/client/views/layout/layout.html b/rpg-docs/client/views/layout/layout.html
new file mode 100644
index 00000000..67881b74
--- /dev/null
+++ b/rpg-docs/client/views/layout/layout.html
@@ -0,0 +1,25 @@
+<template name="layout">
+
+	<core-drawer-panel>
+		<core-header-panel drawer navigation flex mode="seamed" class="white">
+			<core-toolbar>Application</core-toolbar>
+			<core-menu theme="core-light-theme">
+				<core-item icon="settings" label="item1"></core-item>
+				<core-item icon="settings" label="item2"></core-item>
+			</core-menu>
+		</core-header-panel>
+		<core-header-panel main navigation flex mode="seamed">
+			{{> yield}}
+		</core-header-panel>
+	</core-drawer-panel>
+
+	<paper-action-dialog global-dialog layered backdrop
+						 transition="paper-dialog-transition-bottom"
+						 full-on-mobile>
+		{{#if globalDialogTemplate}}
+		{{> UI.dynamic template=globalDialogTemplate data=globalDialogData}}
+		{{/if}}
+	</paper-action-dialog>
+
+	<paper-toast global-toast></paper-toast>
+</template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/layout/publicHeader.html b/rpg-docs/client/views/layout/publicHeader.html
new file mode 100644
index 00000000..4fda47ce
--- /dev/null
+++ b/rpg-docs/client/views/layout/publicHeader.html
@@ -0,0 +1,48 @@
+<template name="publicHeader">
+  <core-toolbar class="toolbar toolbar-primary">
+
+    <a class="header-logo" href="/">
+      <img src="/img/white-logo.png"/>
+    </a>
+
+    <div flex></div>
+
+    <div class="visible-md wide">
+      <div layout horizontal>
+        {{> headerItems}}
+      </div>
+    </div>
+
+    <paper-menu-button class="hidden-md narrow">
+      <paper-icon-button icon="menu" role="button"></paper-icon-button>
+      <paper-dropdown class="dropdown" halign="right">
+        <core-menu class="menu">
+          {{> headerItems}}
+        </core-menu>
+      </paper-dropdown>
+    </paper-menu-button>
+
+  </core-toolbar>
+</template>
+
+<template name="headerItems">
+
+  <paper-item class="toolbar-item">
+    <a href="{{pathFor route='pricing'}}">
+      Pricing
+    </a>
+  </paper-item>
+
+  <paper-item class="toolbar-item">
+    <a href="{{pathFor route='accounts.signUp'}}">
+      Sign Up
+    </a>
+  </paper-item>
+
+  <paper-item class="toolbar-item">
+    <a href="{{pathFor route='accounts.signIn'}}">
+      Sign In
+    </a>
+  </paper-item>
+
+</template>
\ No newline at end of file