diff --git a/rpg-docs/.meteor/.gitignore b/rpg-docs/.meteor/.gitignore
index b6fe44a8..f289029d 100644
--- a/rpg-docs/.meteor/.gitignore
+++ b/rpg-docs/.meteor/.gitignore
@@ -1,3 +1,5 @@
 local
 
 local
+
+local
diff --git a/rpg-docs/Model/Character/Characters.js b/rpg-docs/Model/Character/Characters.js
index 3ad0b355..4647652f 100644
--- a/rpg-docs/Model/Character/Characters.js
+++ b/rpg-docs/Model/Character/Characters.js
@@ -34,6 +34,12 @@ Schemas.Character = new SimpleSchema({
 	},
 	experience:			{type: Schemas.Attribute},
 	proficiencyBonus:	{type: Schemas.Attribute},
+  "proficiencyBonus.add": {
+		type: [Schemas.Effect],
+		defaultValue: [
+			{name: "Proficiency bonus by level", calculation: "floor(level / 4.1) + 2"}
+		]
+	},
 	speed:				{type: Schemas.Attribute},
 	weight: 			{type: Schemas.Attribute},
 	weightCarried: 		{type: Schemas.Attribute},
@@ -221,7 +227,7 @@ Schemas.Character = new SimpleSchema({
 
 	//proficiencies
 	weaponsProficiencies: {
-		type: [Schemas.Proficiency], 
+		type: [Schemas.Proficiency],
 		defaultValue: []
 	},
 	toolsProficiencies: {
@@ -229,7 +235,7 @@ Schemas.Character = new SimpleSchema({
 		defaultValue: []
 	},
 	languages: {
-		type: [Schemas.Proficiency], 
+		type: [Schemas.Proficiency],
 		defaultValue: []
 	},
 
@@ -259,7 +265,7 @@ Characters.find({},{fields: {time: 1, expirations: 1}}).observe({
 	}
 });
 
-var attributeBase = function(attribute){
+var attributeBase = function(charId, attribute){
 	var value = 0;
 	//add all values in add array
 	_.each(attribute.add, function(effect){
@@ -285,10 +291,10 @@ var attributeBase = function(attribute){
 	return value;
 }
 
-//functions and calculated values. 
-//These functions can only rely on this._id since no other 
+//functions and calculated values.
+//These functions can only rely on this._id since no other
 //field is likely to be attached to all returned characters
-Characters.helpers({ 
+Characters.helpers({
 	//returns the value stored in the field requested
 	//will set up dependencies on just that field
 	getField : function(fieldName){
@@ -320,7 +326,7 @@ Characters.helpers({
 		return this.getField(fieldName);
 	},
 
-	attributeValue: (function(){ 
+	attributeValue: (function(){
 		//store a private array of attributes we've visited without returning
 		//if we try to visit the same attribute twice before resolving its value
 		//we are in a dependency loop and need to GTFO
@@ -339,16 +345,16 @@ Characters.helpers({
 			var charId = this._id;
 			var attribute = this.getField(attributeName);
 			//base value
-			var value = attributeBase(attribute);
+			var value = attributeBase(charId, attribute);
 			value += attribute.adjustment;
-			
+
 			//this attribute returns, pull it from the array, we may visit it again safely
 			visitedAttributes = _.without(visitedAttributes, attributeName);
 			return value;
 		}
 	})(),
 
-	attributeBase: (function(){ 
+	attributeBase: (function(){
 		//store a private array of attributes we've visited without returning
 		//if we try to visit the same attribute twice before resolving its value
 		//we are in a dependency loop and need to GTFO
@@ -367,8 +373,8 @@ Characters.helpers({
 			var charId = this._id;
 			var attribute = this.getField(attributeName);
 			//base value
-			var value = attributeBase(attribute);
-			
+			var value = attributeBase(charId, attribute);
+
 			//this attribute returns, pull it from the array, we may visit it again safely
 			visitedAttributes = _.without(visitedAttributes, attributeName);
 			return value;
@@ -449,12 +455,12 @@ Characters.helpers({
 		return prof;
 	},
 
-	passiveSkill: function(skill){
-		if (_.isString(skill)){
-			skill = this.getField(skill);
+	passiveSkill: function(skillName){
+		if (_.isString(skillName)){
+			var skill = this.getField(skillName);
 		}
 		var charId = this._id
-		var mod = +this.skillMod(skill);
+		var mod = +this.skillMod(skillName);
 		var value = 10 + mod;
 		_.each(skill.passiveAdd, function(effect){
 			value += evaluateEffect(charId, effect);
@@ -485,4 +491,4 @@ Characters.helpers({
 		if(xp > 355000) return 20;
 		return 0;
 	}
-});
\ No newline at end of file
+});
diff --git a/rpg-docs/Routes/Routes.js b/rpg-docs/Routes/Routes.js
index ef606d52..0818b07f 100644
--- a/rpg-docs/Routes/Routes.js
+++ b/rpg-docs/Routes/Routes.js
@@ -1,11 +1,15 @@
+Router.configure({
+  loadingTemplate: 'loading'
+});
+
 Router.map( function () {
-	this.route('home', 
+	this.route('home',
 			   {
 		path: '/',
 		waitOn: function(){
 			return Meteor.subscribe("characterList", Meteor.userId());
 		},
-		data: { 
+		data: {
 			characters: function(){
 				return Characters.find({}, {fields: {_id: 1}});
 			}
@@ -44,4 +48,4 @@ Router.map( function () {
 			return data;
 		}
 	});
-});
\ No newline at end of file
+});
diff --git a/rpg-docs/client/views/character/SideAbilities/skills/skills.css b/rpg-docs/client/views/character/SideAbilities/skills/skills.css
index 98fe850d..38644db4 100644
--- a/rpg-docs/client/views/character/SideAbilities/skills/skills.css
+++ b/rpg-docs/client/views/character/SideAbilities/skills/skills.css
@@ -1,38 +1,42 @@
 .profIcon{
-	display: inline-block;
-	width: 23px;
-	height: 14px;
-	background-size: contain;
-	background-repeat: no-repeat;
-	
-	position: relative;
-	top: 1px;
+  display: inline-block;
+  width: 23px;
+  height: 14px;
+  background-size: contain;
+  background-repeat: no-repeat;
+
+  position: relative;
+  top: 1px;
+
+  /*TODO fix the actual images and remove inversion*/
+  -webkit-filter: invert(100%);
+  opacity: 0.54;
 }
 
-table.skillTable td:nth-of-type(2) { 
-	text-align: right; 
+table.skillTable td:nth-of-type(2) {
+  text-align: right;
 }
 
-table.skillTable td:nth-of-type(3) { 
-	padding-left: 8px;
+table.skillTable td:nth-of-type(3) {
+  padding-left: 8px;
 }
 
 td.fail {
-	color: #AF0000;
+  color: #AF0000;
 }
 
 .advantage{
-	background-image: url(/png/advantage/greenUp.png);
-	background-size: contain;
-	background-repeat: no-repeat;
+  background-image: url(/png/advantage/greenUp.png);
+  background-size: contain;
+  background-repeat: no-repeat;
 }
 
 .disadvantage{
-	background-image: url(/png/advantage/redDown.png);
-	background-size: contain;
-	background-repeat: no-repeat;
+  background-image: url(/png/advantage/redDown.png);
+  background-size: contain;
+  background-repeat: no-repeat;
 }
 
 td.conditionals::after{
-	content: "*";
-}
\ No newline at end of file
+  content: "*";
+}
diff --git a/rpg-docs/client/views/character/Stats/stats.css b/rpg-docs/client/views/character/Stats/stats.css
index d045e793..ed6d0680 100644
--- a/rpg-docs/client/views/character/Stats/stats.css
+++ b/rpg-docs/client/views/character/Stats/stats.css
@@ -1,4 +1,6 @@
 #stats{
 	display: flex;
 	justify-content: space-around;
-}
\ No newline at end of file
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
diff --git a/rpg-docs/client/views/character/Stats/stats.html b/rpg-docs/client/views/character/Stats/stats.html
index d67c5fc7..9c75b974 100644
--- a/rpg-docs/client/views/character/Stats/stats.html
+++ b/rpg-docs/client/views/character/Stats/stats.html
@@ -1,80 +1,80 @@
 <template name="stats">
-	<div id="stats">
-		<div>
-			<div id="abilities">
-				{{> bigAbilities}}
-			</div>
-			<div id="savesAndSkills">
-				{{> skills}}
-			</div>
-		</div>
-		<div>
-			<div id="armor">
-				{{attributeValue "armor"}}
-			</div>
-			<div id="initiative">
-				{{attributeValue "initiative"}}
-			</div>
-			<div id="proficiencyBonus">
-				{{attributeValue "proficiencyBonus"}}
-			</div>
-			<div id="speed">
-				{{attributeValue "speed"}}
-			</div>
-			<div id="passivePerception">
-				{{passiveSkill "perception"}}
-			</div>
-			<div id="hitDice">
-				{{> hitDice "d6HitDice"}}
-				{{> hitDice "d8HitDice"}}
-				{{> hitDice "d10HitDice"}}
-				{{> hitDice "d12HitDice"}}
-			</div>
-			<div id="spellSlots">
-				{{# if canCast}}
-					{{> spellSlots}}
-				{{/if}}
-			</div>
-			<div id="rages">
-				{{# if attributeBase "rages"}}
-					{{attributeValue "rages"}}/{{attributeBase "rages"}} rages
-				{{/if}}
-			</div>
-			<div id="sorceryPoints">
-				{{# if attributeBase "sorceryPoints"}}
-					{{attributeValue "sorceryPoints"}}/{{attributeBase "sorceryPoints"}} Sorcery Points
-				{{/if}}
-			</div>
-			<div id="expertiseDice">
-				{{# if attributeBase "expertiseDice"}}
-					{{attributeValue "expertiseDice"}}/{{attributeBase "expertiseDice"}} Expertise Dice
-				{{/if}}
-			</div>
-			<div id="superiorityDice">
-				{{# if attributeBase "superiorityDice"}}
-					{{attributeValue "superiorityDice"}}/{{attributeBase "superiorityDice"}} Superiority Dice
-				{{/if}}
-			</div>			
-		</div>
-	</div>
+    <div id="stats">
+        {{> abilityCards}}
+        <paper-shadow class="card" id="armor">
+            <h1>{{attributeValue "armor"}}</h1>
+            <p class="caption">Armor</p>
+        </paper-shadow>
+        <paper-shadow class="card" id="initiative">
+           <h1>{{skillMod "initiative"}}</h1>
+            <p class="caption">Initiative</p>
+        </paper-shadow>
+        <paper-shadow class="card" id="proficiencyBonus">
+            <h1>{{attributeValue "proficiencyBonus"}}</h1>
+            <p class="caption">Proficiency Bonus</p>
+        </paper-shadow>
+        <paper-shadow class="card" id="speed">
+            <h1>{{attributeValue "speed"}}</h1>
+            <p class="caption">Speed</p>
+        </paper-shadow>
+        <paper-shadow class="card" id="passivePerception">
+            <h1>{{passiveSkill "perception"}}</h1>
+            <p class="caption">Passive Perception</p>
+        </paper-shadow>
+        <paper-shadow class="card" id="hitDice">
+            <h1>{{> hitDice hitDice="d6HitDice" d="6"}}</h1>
+            <h1>{{> hitDice hitDice="d8HitDice" d="8"}}</h1>
+            <h1>{{> hitDice hitDice="d10HitDice" d="10"}}</h1>
+            <h1>{{> hitDice hitDice="d12HitDice" d="12"}}</h1>
+           <p class="caption">Hit Dice</p>
+        </paper-shadow>
+        {{# if canCast}}
+            <paper-shadow class="card" id="spellSlots">
+                <h1>{{> spellSlots}}</h1>
+                <p class="caption">Spell Slots</p>
+            </paper-shadow>
+        {{/if}}
+        {{# if attributeBase "rages"}}
+            <paper-shadow class="card" id="rages">
+                <h1>{{attributeValue "rages"}}</h1>
+                <p class="caption">rages</p>
+            </paper-shadow>
+        {{/if}}
+        {{# if attributeBase "sorceryPoints"}}
+            <paper-shadow class="card" id="sorceryPoints">
+                <h1>{{attributeValue "sorceryPoints"}}</h1>
+                <p class="caption">Sorcery Points</p>
+            </paper-shadow>
+        {{/if}}
+        {{# if attributeBase "expertiseDice"}}
+            <paper-shadow class="card" id="expertiseDice">
+                <h1>{{attributeValue "expertiseDice"}}</h1>
+                <p class="caption">Expertise Dice</p>
+            </paper-shadow>
+        {{/if}}
+        {{# if attributeBase "superiorityDice"}}
+            <paper-shadow class="card" id="superiorityDice">
+                <h1>{{attributeValue "superiorityDice"}}</h1>
+                <p class="caption">Superiority Dice</p>
+            </paper-shadow>
+        {{/if}}
+    </div>
 </template>
 
 <template name="hitDice">
-	{{# if ../attributeBase hitDice}}
-	<div id={{hitDice}}>
-		{{../attributeValue hitDice}}/{{../attributeBase hitDice}}
-	</div>
-	{{/if}}
+    {{# if ../attributeBase hitDice}}
+        {{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
+    {{/if}}
 </template>
 
 <template name="spellSlots">
-	{{attributevalue "level1SpellSlots"}}
-	{{attributevalue "level2SpellSlots"}}
-	{{attributevalue "level3SpellSlots"}}
-	{{attributevalue "level4SpellSlots"}}
-	{{attributevalue "level5SpellSlots"}}
-	{{attributevalue "level6SpellSlots"}}
-	{{attributevalue "level7SpellSlots"}}
-	{{attributevalue "level8SpellSlots"}}
-	{{attributevalue "level9SpellSlots"}}
-</template>
\ No newline at end of file
+    {{attributevalue "level1SpellSlots"}}
+    {{attributevalue "level2SpellSlots"}}
+    {{attributevalue "level3SpellSlots"}}
+    {{attributevalue "level4SpellSlots"}}
+    {{attributevalue "level5SpellSlots"}}
+    {{attributevalue "level6SpellSlots"}}
+    {{attributevalue "level7SpellSlots"}}
+    {{attributevalue "level8SpellSlots"}}
+    {{attributevalue "level9SpellSlots"}}
+</template>
diff --git a/rpg-docs/client/views/character/abilityCards/abilityCards.css b/rpg-docs/client/views/character/abilityCards/abilityCards.css
new file mode 100644
index 00000000..e69de29b
diff --git a/rpg-docs/client/views/character/abilityCards/abilityCards.html b/rpg-docs/client/views/character/abilityCards/abilityCards.html
new file mode 100644
index 00000000..214d362a
--- /dev/null
+++ b/rpg-docs/client/views/character/abilityCards/abilityCards.html
@@ -0,0 +1,98 @@
+<template name="abilityCards">
+    {{> strengthCard}}
+    {{> dexterityCard}}
+    {{> constitutionCard}}
+    {{> intelligenceCard}}
+    {{> wisdomCard}}
+    {{> charismaCard}}
+</template>
+
+<template name="strengthCard">
+    <paper-shadow class="card double">
+        <h1>Strength</h1>
+        <h1>{{attributeValue "strength"}}</h1>
+        <h2>{{abilityMod "strength"}}</h2>
+        <hr>
+        <table>
+            {{> skillRow name="Strength Save" skill="strengthSave"}}
+            {{> skillRow name="Athletics" skill="athletics"}}
+        </table>
+    </paper-shadow>
+</template>
+
+<template name="dexterityCard">
+    <paper-shadow class="card double">
+        <h1>Dexterity</h1>
+        <h1>{{attributeValue "dexterity"}}</h1>
+        <h2>{{abilityMod "dexterity"}}</h2>
+        <hr>
+        <table>
+            {{> skillRow name="Dexterity Save" skill="dexteritySave"}}
+            {{> skillRow name="Acrobatics" skill="acrobatics"}}
+            {{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
+            {{> skillRow name="Stealth" skill="stealth"}}
+        </table>
+    </paper-shadow>
+</template>
+
+<template name="constitutionCard">
+    <paper-shadow class="card double">
+        <h1>Constitution</h1>
+        <h1>{{attributeValue "constitution"}}</h1>
+        <h2>{{abilityMod "constitution"}}</h2>
+        <hr>
+        <table>
+            {{> skillRow name="Constitution Save" skill="constitutionSave"}}
+        </table>
+    </paper-shadow>
+</template>
+
+<template name="intelligenceCard">
+    <paper-shadow class="card double">
+        <h1>Intelligence</h1>
+        <h1>{{attributeValue "intelligence"}}</h1>
+        <h2>{{abilityMod "intelligence"}}</h2>
+        <hr>
+        <table>
+            {{> skillRow name="Intelligence Save" skill="intelligenceSave"}}
+            {{> skillRow name="Arcana" skill="arcana"}}
+            {{> skillRow name="History" skill="history"}}
+            {{> skillRow name="Investigation" skill="investigation"}}
+            {{> skillRow name="Nature" skill="nature"}}
+            {{> skillRow name="Religion" skill="religion"}}
+        </table>
+    </paper-shadow>
+</template>
+
+<template name="wisdomCard">
+    <paper-shadow class="card double">
+        <h1>Wisdom</h1>
+        <h1>{{attributeValue "wisdom"}}</h1>
+        <h2>{{abilityMod "wisdom"}}</h2>
+        <hr>
+        <table>
+            {{> skillRow name="Wisdom Save" skill="wisdomSave"}}
+            {{> skillRow name="Animal Handling" skill="animalHandling"}}
+            {{> skillRow name="Insight" skill="insight"}}
+            {{> skillRow name="Medicine" skill="medicine"}}
+            {{> skillRow name="Perception" skill="perception"}}
+            {{> skillRow name="Survival" skill="survival"}}
+        </table>
+    </paper-shadow>
+</template>
+
+<template name="charismaCard">
+    <paper-shadow class="card double">
+        <h1>Charisma</h1>
+        <h1>{{attributeValue "charisma"}}</h1>
+        <h2>{{abilityMod "charisma"}}</h2>
+        <hr>
+        <table>
+            {{> skillRow name="Charisma Save" skill="charismaSave"}}
+            {{> skillRow name="Deception" skill="deception"}}
+            {{> skillRow name="Intimidation" skill="intimidation"}}
+            {{> skillRow name="Performance" skill="performance"}}
+            {{> skillRow name="Persuasion" skill="persuasion"}}
+        </table>
+    </paper-shadow>
+</template>
diff --git a/rpg-docs/client/views/character/characterSheet.html b/rpg-docs/client/views/character/characterSheet.html
index 13158d42..7f515e2d 100644
--- a/rpg-docs/client/views/character/characterSheet.html
+++ b/rpg-docs/client/views/character/characterSheet.html
@@ -29,10 +29,10 @@
 
 	<core-animated-pages selected={{selectedTab}} transitions="slide-from-right">
 		<div>{{> stats}}</div>
-		<div>{{> features}}</div>
-		<div>{{> persona}}</div>
-		<div>{{> inventory}}</div>
-		<div>{{> spellBook}}</div>
-		<div>{{> journal}}</div>
+		<div>features</div>
+		<div>persona</div>
+		<div>inventory</div>
+		<div>spellBook</div>
+		<div>journal</div>
 	</core-animated-pages>
 </template>
diff --git a/rpg-docs/client/views/general.css b/rpg-docs/client/views/general.css
index 1fd5c93d..b8d60674 100644
--- a/rpg-docs/client/views/general.css
+++ b/rpg-docs/client/views/general.css
@@ -1,33 +1,119 @@
 root {
-	display: block;
+  display: block;
 }
 
 body {
-	font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-	margin: 0;
-	color: #333;
-	overflow-x: hidden;
-	box-sizing: border-box;
+  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
+  margin: 0;
+  overflow-x: hidden;
 }
 
 body.core-narrow {
-	padding: 8px;
+  padding: 8px;
 }
 
 .calculatedValue {
-	color: #021C33;
-	font-weight: bold;
+  color: #021C33;
+  font-weight: bold;
 }
 
 * {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-h2 {
-	margin: 0;
+h1, .headline {
+  font-size: 24px;
+  font-weight: 400;
+  margin: 0;
+  color: #000;
+  color: rgba(0,0,0,0.87);
+  letter-spacing: 0;
 }
 
-h3 {
-	font-size: 16px;
-	font-weight: 400;
-}
\ No newline at end of file
+h2, .title {
+  font-size: 20px;
+  font-weight: 500;
+  margin: 0;
+  color: #000;
+  color: rgba(0,0,0,0.87);
+  letter-spacing: 0.005;
+}
+
+h3, .subhead {
+  font-size: 16px;
+  font-weight: 400;
+  margin: 0;
+  color: #000;
+  color: rgba(0,0,0,0.87);
+  letter-spacing: 0.010;
+}
+
+.body2 {
+  font-size: 14px;
+  font-weight: 500;
+  color: #000;
+  color: rgba(0,0,0,0.87);
+  letter-spacing: 0.010;
+}
+
+p, .body1, body {
+  font-size: 14px;
+  font-weight: 400;
+  color: #000;
+  color: rgba(0,0,0,0.87);
+  letter-spacing: 0.010;
+}
+
+.caption{
+  font-size: 12px;
+  font-weight: 400;
+  color: #000;
+  color: rgba(0,0,0,0.54);
+  letter-spacing: 0.020;
+}
+
+hr {
+  background-color: #444;
+  opacity: 0.12;
+  border-width: 0;
+  color: #444;
+  height: 1px;
+  line-height: 0;
+  margin: 0 -16px;
+  text-align: center;
+}
+
+paper-button {
+  font-size: 14px;
+  font-weight: 400;
+  text-transform: uppercase;
+  color: #000;
+  color: rgba(0,0,0,0.87);
+  letter-spacing: 0.010;
+}
+
+.card {
+  width: 148px;
+  margin: 4px;
+  padding: 16px;
+  font-size: 14px;
+  border-radius: 2px;
+  background-color: white;
+}
+
+.card.double {
+  width: 304px;
+}
+
+.card paper-button {
+  font-size: 14px;
+  letter-spacing: 0.01em;
+}
+
+.grey-background, body {
+  background-color: #E0E0E0;
+}
+
+.center {
+  text-align: center;
+}
diff --git a/rpg-docs/client/views/index.html b/rpg-docs/client/views/index.html
index 7772d766..96c0283e 100644
--- a/rpg-docs/client/views/index.html
+++ b/rpg-docs/client/views/index.html
@@ -5,6 +5,7 @@
 	<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
 	<link rel="import" href="bower_components/core-animated-pages/core-animated-pages.html">
 	<link rel="import" href="bower_components/core-animated-pages/transitions/slide-from-right.html">
+    <link rel="import" href="bower_components/paper-shadow/paper-shadow.html">
+    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900,900italic,100italic,100&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
     <script type='text/javascript' id='lt_ws' src='http://localhost:57539/socket.io/lighttable/ws.js'></script>
 </head>
-
diff --git a/rpg-docs/client/views/loading/loading.css b/rpg-docs/client/views/loading/loading.css
new file mode 100644
index 00000000..47e35481
--- /dev/null
+++ b/rpg-docs/client/views/loading/loading.css
@@ -0,0 +1,3 @@
+paper-spinner.red::shadow .circle {
+    border-color: #db4437;
+}
diff --git a/rpg-docs/client/views/loading/loading.html b/rpg-docs/client/views/loading/loading.html
new file mode 100644
index 00000000..432b1b18
--- /dev/null
+++ b/rpg-docs/client/views/loading/loading.html
@@ -0,0 +1,3 @@
+<template name="loading">
+    <paper-spinner class="red" active></paper-spinner>
+</template>