diff --git a/rpg-docs/client/views/characterList/characterList.html b/rpg-docs/client/views/characterList/characterList.html
index 6c140c78..75ff8a81 100644
--- a/rpg-docs/client/views/characterList/characterList.html
+++ b/rpg-docs/client/views/characterList/characterList.html
@@ -6,22 +6,32 @@
 		</div>
 	</core-toolbar>
 	<div class="scroll-y" fit>
-		<div layout horizontal class="characterCards">
-			{{# each characters}}
-				{{#with characterDetails}}
-					{{#containerCardHelper this}}{{alignment}} {{gender}} {{race}}{{/containerCardHelper}}
-				{{/with}}
-			{{/each}}
-		</div>
-		{{> gridPadding class="characterCard" num=12}}
+			{{#if currentUser}}
+				{{#if characters.count}}
+					<div layout horizontal class="characterCards">
+						{{# each characters}}
+							{{#with characterDetails}}
+								{{#containerCardHelper this}}{{alignment}} {{gender}} {{race}}{{/containerCardHelper}}
+							{{/with}}
+						{{/each}}
+					</div>
+					{{> gridPadding class="characterCard" num=12}}
+				{{else}}
+					<div layout vertical center center-justified>
+						<div>You don't seem to have any characters :(</div>
+						<paper-button class="addCharacter red-button" raised>Add Character</paper-button>
+					</div>
+				{{/if}}
+			{{else}}
+				You must sign in first.
+			{{/if}}
 		<div class="fab-buffer"></div>
-		<paper-fab id="addCharacter" 
-				   class="floatyButton" 
-				   icon="add" 
-				   title="Add" 
-				   role="button" 
-				   tabindex="0" 
-				   aria-label="Add" 
+		<paper-fab class="floatyButton addCharacter"
+				   icon="add"
+				   title="Add"
+				   role="button"
+				   tabindex="0"
+				   aria-label="Add"
 				   hero-id="main"></paper-fab>
 	</div>
 </template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/characterList/characterList.js b/rpg-docs/client/views/characterList/characterList.js
index 1361131d..83c8dbd5 100644
--- a/rpg-docs/client/views/characterList/characterList.js
+++ b/rpg-docs/client/views/characterList/characterList.js
@@ -1,9 +1,9 @@
 Template.characterList.helpers({
 	characterDetails: function(){
-		var char = Characters.findOne(this._id, {fields: {name: 1, gender: 1, alignment: 1, race:1, color: 1}})
+		var char = Characters.findOne(this._id, {fields: {name: 1, gender: 1, alignment: 1, race:1, color: 1}});
 		char.title = char.name;
-		char.field = "base"
-		char.class = "characterCard"
+		char.field = "base";
+		char.class = "characterCard";
 		return char;
 	}
 });
@@ -13,7 +13,7 @@ Template.characterList.events({
 		console.log(this);
 		Router.go("characterSheet", {_id: this._id});
 	},
-	"tap #addCharacter": function (event, template) {
+	"tap .addCharacter": function (event, template) {
 		Characters.insert({owner: Meteor.userId()});
 	},
 	"tap #deleteChar": function(event, template){
diff --git a/rpg-docs/client/views/layout/layout.html b/rpg-docs/client/views/layout/layout.html
index 6850c6e4..a77e3cc6 100644
--- a/rpg-docs/client/views/layout/layout.html
+++ b/rpg-docs/client/views/layout/layout.html
@@ -2,41 +2,7 @@
 
 	<core-drawer-panel>
 		<core-header-panel drawer navigation flex mode="seamed" class="white">
-			<div id="accountSummary" class="padded white-text">
-				{{#if loggingIn}}
-					<paper-spinner active alt="Signing In"></paper-spinner>
-				{{else}}{{#if currentUser}}
-					{{#with currentUser}}
-						<div class="body2">
-							{{username}}
-						</div>
-						<div class="body1">
-							{{#each emails}}
-								{{address}}
-							{{/each}}
-							<paper-menu-button>
-								<paper-icon-button icon="arrow-drop-down" noink></paper-icon-button>
-								<paper-dropdown class="dropdown">
-									<core-menu class="menu">
-										<paper-item id="signOutButton">Sign Out</paper-item>
-									</core-menu>
-								</paper-dropdown>
-							</paper-menu-button>
-						</div>
-					{{/with}}
-				{{else}}
-						<h2>Sign In</h2>
-						<paper-input class="fullwidth" label="Email" id="emailInput"></paper-input><br>
-						<paper-input-decorator class="fullwidth" label="Password">
-							<input class="fullwidth" type="password" is="core-input" id="passwordInput">
-						</paper-input-decorator><br>
-					{{#if session "creatingNewUser"}}
-						<paper-button raised id="createAccountButton">Create Account</paper-button>
-					{{else}}
-						<paper-button raised id="signInButton">Sign In</paper-button>
-					{{/if}}
-				{{/if}}{{/if}}
-			</div>
+			{{> loginButtons}}
 			<core-menu theme="core-light-theme">
 				<paper-item id="charactersMenuButton">Characters</paper-item>
 			</core-menu>
diff --git a/rpg-docs/client/views/layout/layout.js b/rpg-docs/client/views/layout/layout.js
index cce18268..7eaf2e16 100644
--- a/rpg-docs/client/views/layout/layout.js
+++ b/rpg-docs/client/views/layout/layout.js
@@ -10,28 +10,9 @@ Template.layout.helpers({
 	notSelected: function(){
 		return Session.get("global.ui.detailShow")? "not-selected" : null;
 	}
-})
+});
 
 Template.layout.events({
-	"tap #signInButton": function(event, instance){
-		var email = instance.find("#emailInput").value;
-		var pass = instance.find("#passwordInput").value;
-		Meteor.loginWithPassword(email, pass);
-	},
-	"keypress #emailInput, keypress #passwordInput": function (event, instance) {
-		if (event.which === 13) {
-			var email = instance.find("#emailInput").value;
-			var pass = instance.find("#passwordInput").value;
-			Meteor.loginWithPassword(email, pass);
-		}
-	},
-	"tap #signOutButton": function(event, instance){
-		Meteor.logout();
-	},
-	"tap #createAccountButton": function(event, instance){
-		console.warn("not yet implemented");
-		//Session.set("creatingNewUser", true);
-	},
 	"tap #charactersMenuButton": function(event, instance){
 		Router.go("/");
 	}
diff --git a/rpg-docs/client/views/user/signIn/signIn.html b/rpg-docs/client/views/user/signIn/signIn.html
new file mode 100644
index 00000000..55c82452
--- /dev/null
+++ b/rpg-docs/client/views/user/signIn/signIn.html
@@ -0,0 +1,58 @@
+<template name="/signIn">
+	<div id="accountSummary" class="padded white-text">
+		{{#if loggingIn}}
+			<paper-spinner active alt="Signing In"></paper-spinner>
+		{{else}}{{#if currentUser}}
+			{{#with currentUser}}
+				<div class="body2">
+					{{username}}
+				</div>
+				<div class="body1">
+					{{#each emails}}
+						{{address}}
+					{{/each}}
+					<paper-menu-button>
+						<paper-icon-button icon="arrow-drop-down" noink></paper-icon-button>
+						<paper-dropdown class="dropdown">
+							<core-menu class="menu">
+								<paper-item id="signOutButton">Sign Out</paper-item>
+							</core-menu>
+						</paper-dropdown>
+					</paper-menu-button>
+				</div>
+			{{/with}}
+		{{else}}
+			{{#if session "creatingNewUser"}}
+				{{> creatingUser}}
+			{{else}} {{#if session "forgotPassword"}}
+				{{> forgotPassword}}
+			{{else}}
+				{{> signingIn}}
+			{{/if}}{{/if}}
+		{{/if}}{{/if}}
+	</div>
+</template>
+
+<template name="signingIn">
+	<h2>Sign In</h2>
+	<paper-input class="fullwidth" label="Email" id="emailInput"></paper-input><br>
+	<paper-input-decorator class="fullwidth" label="Password">
+		<input class="fullwidth" type="password" is="core-input" id="passwordInput">
+	</paper-input-decorator><br>
+	<paper-button raised id="signInButton">Sign In</paper-button>
+</template>
+
+<template name="creatingUser">
+	<h2>New Account</h2>
+	<paper-input class="fullwidth" label="Email" id="emailInput"></paper-input><br>
+	<paper-input-decorator class="fullwidth" label="Password">
+		<input class="fullwidth" type="password" is="core-input" id="passwordInput">
+	</paper-input-decorator><br>
+	<paper-button raised id="createAccountButton">Create Account</paper-button>
+</template>
+
+<template name="forgotPasswod">
+	<h2>New Account</h2>
+	<paper-input class="fullwidth" label="Email" id="emailInput"></paper-input><br><br>
+	<paper-button raised id="recoverPasswordButton">Reset Password</paper-button>
+</template>
diff --git a/rpg-docs/client/views/user/signIn/signIn.js b/rpg-docs/client/views/user/signIn/signIn.js
new file mode 100644
index 00000000..ce341f2c
--- /dev/null
+++ b/rpg-docs/client/views/user/signIn/signIn.js
@@ -0,0 +1,21 @@
+Template.signIn.events({
+	"tap #signInButton": function(event, instance){
+		var email = instance.find("#emailInput").value;
+		var pass = instance.find("#passwordInput").value;
+		Meteor.loginWithPassword(email, pass);
+	},
+	"keypress #emailInput, keypress #passwordInput": function (event, instance) {
+		if (event.which === 13) {
+			var email = instance.find("#emailInput").value;
+			var pass = instance.find("#passwordInput").value;
+			Meteor.loginWithPassword(email, pass);
+		}
+	},
+	"tap #signOutButton": function(event, instance){
+		Meteor.logout();
+	},
+	"tap #createAccountButton": function(event, instance){
+		console.warn("not yet implemented");
+		//Session.set("creatingNewUser", true);
+	},
+});