diff --git a/rpg-docs/client/style/cards.scss b/rpg-docs/client/style/cards.scss
index 56e345d3..e6f99bf9 100644
--- a/rpg-docs/client/style/cards.scss
+++ b/rpg-docs/client/style/cards.scss
@@ -56,7 +56,7 @@ $thinColumnWidth: 240px;
 		padding: 16px;
 		border-radius: 0 0 2px 2px;
 		&.list {
-			padding: 0 0 16px 0;
+			padding: 16px 0;
 			.subhead {
 				color: rgba(0,0,0,0.54);
 				font-size: 14px;
diff --git a/rpg-docs/client/style/listItem.scss b/rpg-docs/client/style/listItem.scss
index 9d5f717f..7feae752 100644
--- a/rpg-docs/client/style/listItem.scss
+++ b/rpg-docs/client/style/listItem.scss
@@ -3,7 +3,7 @@ List items
 */
 .item-slot {
 	background-color: rgb(232, 232, 232);
-	background-color: rgba(0, 0, 0, 0.1);	
+	background-color: rgba(0, 0, 0, 0.1);
 }
 
 .item {
@@ -30,7 +30,7 @@ List items
 		box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
 		z-index: 10;
 	}
-	core-icon, paper-icon-button {
+	iron-icon, paper-icon-button {
 		color: #747474;
 		color: rgba(0,0,0,0.54);
 	}
diff --git a/rpg-docs/client/style/main.scss b/rpg-docs/client/style/main.scss
index e8ac388a..4a94d7ff 100644
--- a/rpg-docs/client/style/main.scss
+++ b/rpg-docs/client/style/main.scss
@@ -35,14 +35,6 @@ hr {
 	text-align: center;
 }
 
-/*
-	Stop all links from formatting themselves
- */
-a {
-	text-decoration: none;
-	color: inherit;
-}
-
 .avatar {
 	display: inline-block;
 	box-sizing: border-box;
diff --git a/rpg-docs/client/views/GeneralCSS/typography.css b/rpg-docs/client/views/GeneralCSS/typography.css
index f97cb577..5c770053 100644
--- a/rpg-docs/client/views/GeneralCSS/typography.css
+++ b/rpg-docs/client/views/GeneralCSS/typography.css
@@ -1,107 +1,35 @@
-.display2 {
-	font-size: 45px;
-	font-weight: 400;
-	color: #000;
-	color: rgba(0,0,0,0.54);
-	letter-spacing: 0;
-}
-
-.white-text .display2{
+.white-text .paper-font-display2{
 	color: rgba(255,255,255,0.54);
 }
 
-.display1 {
-	font-size: 34px;
-	font-weight: 400;
-	color: #000;
-	color: rgba(0,0,0,0.54);
-	letter-spacing: 0;
-}
-
-.white-text .display1, .white-text.display1{
+.white-text .paper-font-display1, .white-text.paper-font-display1{
 	color: rgba(255,255,255,0.54);
 }
 
-h1, .headline {
-	font-size: 24px;
-	font-weight: 400;
-	margin: 0;
-	color: #000;
-	color: rgba(0,0,0,0.87);
-	letter-spacing: 0;
-}
-
-.white-text h1, .white-text .headline, .white-text.headline{
+.white-text h1, .white-text .paper-font-headline, .white-text.paper-font-headline{
 	color: rgba(255,255,255,0.87);
 }
 
-h2, .title {
-	font-size: 20px;
-	font-weight: 500;
-	margin: 0;
-	color: #000;
-	color: rgba(0,0,0,0.87);
-	letter-spacing: 0.005em;
-}
-
-.white-text h2, .white-text .title, .white-text.title{
+.white-text h2, .white-text .paper-font-title, .white-text.paper-font-title{
 	color: rgba(255,255,255,0.87);
 }
 
-h3, .subhead {
-	font-size: 16px;
-	font-weight: 400;
-	margin: 0;
-	color: #000;
-	color: rgba(0,0,0,0.87);
-	letter-spacing: 0.010em;
-}
-
-.white-text h3, .white-text .subhead{
+.white-text h3, .white-text .paper-font-subhead{
 	color: rgba(255,255,255,0.87);
 }
 
-.body2 {
-	font-size: 14px;
-	font-weight: 500;
-	color: #000;
-	color: rgba(0,0,0,0.87);
-	letter-spacing: 0.010em;
-}
-
-.white-text .body2{
+.white-text .paper-font-body2{
 	color: rgba(255,255,255,0.87);
 }
 
-p, .body1, body {
-	font-size: 14px;
-	font-weight: 400;
-	margin: 0;
-	color: #000;
-	color: rgba(0,0,0,0.87);
-	letter-spacing: 0.010em;
-}
-
-.white-text p, .white-text .body1{
+.white-text p, .white-text .paper-font-body1{
 	color: rgba(255,255,255,0.87);
 }
 
-.caption{
-	font-size: 12px;
-	font-weight: 400;
-	color: #000;
-	color: rgba(0,0,0,0.54);
-	letter-spacing: 0.020em;
-}
-
-.white-text .caption{
+.white-text .paper-font-caption{
 	color: rgba(255,255,255,0.54);
 }
 
-html /deep/ .white-text{
-	color: #fff;
-}
-
 .black54 {
 	color: #444;
 	color: rgba(0,0,0,0.54);
diff --git a/rpg-docs/client/views/character/characterSheet.html b/rpg-docs/client/views/character/characterSheet.html
index 1f1bcedc..f0633235 100644
--- a/rpg-docs/client/views/character/characterSheet.html
+++ b/rpg-docs/client/views/character/characterSheet.html
@@ -1,54 +1,56 @@
 <template name="characterSheet">
-	<app-header>
-		<app-toolbar class="medium-tall {{colorClass}}">
-			<paper-icon-button icon="menu" drawer-toggle top-item></paper-icon-button>
-			<div class="flex" top-item>
-				{{name}}
-			</div>
-			{{#if canEditCharacter _id}}
-				{{> colorDropdown}}
-				<paper-menu-button top-item>
-					<paper-icon-button icon="more-vert"  class="dropdown-trigger"></paper-icon-button>
-					<paper-menu class="dropdown-content" halign="right">
-						<paper-icon-item id="deleteCharacter">
-							<iron-icon icon="delete" item-icon></iron-icon>
-							Delete
-						</paper-icon-item>
-						<paper-icon-item id="shareCharacter">
-							<iron-icon icon="social:share" item-icon></iron-icon>
-							Share
-						</paper-icon-item>
-						<paper-icon-item id="characterSettings">
-							<iron-icon icon="settings" item-icon></iron-icon>
-							Settings
-						</paper-icon-item>
-					</paper-menu>
-				</paper-menu-button>
-			{{/if}}
-			<div bottom-item>
-				<paper-tabs id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}" attr-for-selected="name">
-					<paper-tab name="stats">Stats</paper-tab>
-					<paper-tab name="features">Features</paper-tab>
-					<paper-tab name="inventory">Inventory</paper-tab>
-					{{#unless hideSpellcasting}}
-					<paper-tab name="spells">Spells</paper-tab>
-					{{/unless}}
-					<paper-tab name="persona">Persona</paper-tab>
-					<paper-tab name="journal">Journal</paper-tab>
-				</paper-tabs>
-			</div>
-		</app-toolbar>
-	</app-header>
-	<div>
-		<neon-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right" attr-for-selected="name">
-			<div name="stats">{{> stats}}</div>
-			<div name="features">{{> features}}</div>
-			<div name="inventory">{{> inventory}}</div>
-			{{#unless hideSpellcasting}}
-			<div name="spells">{{> spells}}</div>
-			{{/unless}}
-			<div name="persona">{{> persona}}</div>
-			<div name="journal">{{> journal}}</div>
-		</neon-animated-pages>
-	</div>
+	<app-header-layout has-scrolling-region fullbleed>
+		<app-header fixed>
+			<app-toolbar class="medium-tall {{colorClass}}">
+				<paper-icon-button icon="menu" drawer-toggle top-item></paper-icon-button>
+				<div class="flex" top-item>
+					{{name}}
+				</div>
+				{{#if canEditCharacter _id}}
+					{{> colorDropdown}}
+					<paper-menu-button top-item>
+						<paper-icon-button icon="more-vert"  class="dropdown-trigger"></paper-icon-button>
+						<paper-menu class="dropdown-content" halign="right">
+							<paper-icon-item id="deleteCharacter">
+								<iron-icon icon="delete" item-icon></iron-icon>
+								Delete
+							</paper-icon-item>
+							<paper-icon-item id="shareCharacter">
+								<iron-icon icon="social:share" item-icon></iron-icon>
+								Share
+							</paper-icon-item>
+							<paper-icon-item id="characterSettings">
+								<iron-icon icon="settings" item-icon></iron-icon>
+								Settings
+							</paper-icon-item>
+						</paper-menu>
+					</paper-menu-button>
+				{{/if}}
+				<div bottom-item>
+					<paper-tabs id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}" attr-for-selected="name">
+						<paper-tab name="stats">Stats</paper-tab>
+						<paper-tab name="features">Features</paper-tab>
+						<paper-tab name="inventory">Inventory</paper-tab>
+						{{#unless hideSpellcasting}}
+						<paper-tab name="spells">Spells</paper-tab>
+						{{/unless}}
+						<paper-tab name="persona">Persona</paper-tab>
+						<paper-tab name="journal">Journal</paper-tab>
+					</paper-tabs>
+				</div>
+			</app-toolbar>
+		</app-header>
+		<div>
+			<neon-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right" attr-for-selected="name">
+				<div name="stats">{{> stats}}</div>
+				<div name="features">{{> features}}</div>
+				<div name="inventory">{{> inventory}}</div>
+				{{#unless hideSpellcasting}}
+				<div name="spells">{{> spells}}</div>
+				{{/unless}}
+				<div name="persona">{{> persona}}</div>
+				<div name="journal">{{> journal}}</div>
+			</neon-animated-pages>
+		</div>
+	</app-header-layout>
 </template>
diff --git a/rpg-docs/client/views/character/stats/abilityCards/abilityCards.css b/rpg-docs/client/views/character/stats/abilityCards/abilityCards.css
new file mode 100644
index 00000000..52be38a1
--- /dev/null
+++ b/rpg-docs/client/views/character/stats/abilityCards/abilityCards.css
@@ -0,0 +1,23 @@
+.ability-mini-card {
+	min-width: 75px;
+	text-align: center;
+	cursor: pointer;
+	-webkit-margin-collapse: separate;
+	background: #fff;
+}
+
+.ability-mini-card .title {
+	padding: 16px;
+}
+
+.ability-mini-card .numbers {
+	min-width: 72px;
+	padding: 16px;
+}
+
+.ability-mini-card .modifier {
+	font-weight: 600;
+	font-size: 24px;
+	color: #747474;
+	color: rgba(0,0,0,0.54);
+}
diff --git a/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html b/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
index 3a05ec9e..fb21d972 100644
--- a/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
+++ b/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
@@ -1,16 +1,17 @@
 <template name="abilityMiniCard">
 	<div>
-	<paper-material class="card abilityMiniCard clickable"
-				  hero-id="main" {{detailHero ability ../_id}}
-				  layout horizontal>
-		<div class="left white-text {{color}}"
-			 hero-id="toolbar" {{detailHero ability ../_id}}>
-			<div class="display1">{{characterCalculate "attributeValue" ../_id ability}}</div>
-			<div class="title">{{abilityMod}}</div>
-		</div>
-		<div class="right subhead" layout horizontal center>
-			{{title}}
-		</div>
-	</paper-material>
+		<paper-material class="ability-mini-card layout horizontal">
+			<div class="numbers">
+				<div class="paper-font-display1 stat">
+					{{characterCalculate "attributeValue" ../_id ability}}
+				</div>
+				<div class="paper-font-subhead modifier">
+					{{abilityMod}}
+				</div>
+			</div>
+			<div class="paper-font-subhead title flex layout horizontal center">
+				{{title}}
+			</div>
+		</paper-material>
 	</div>
 </template>
diff --git a/rpg-docs/client/views/character/stats/healthCard/healthCard.html b/rpg-docs/client/views/character/stats/healthCard/healthCard.html
index 3a9ee647..26abe189 100644
--- a/rpg-docs/client/views/character/stats/healthCard/healthCard.html
+++ b/rpg-docs/client/views/character/stats/healthCard/healthCard.html
@@ -1,31 +1,28 @@
 <template name="healthCard">
-	<paper-material class="card container healthCard"
-				  hero-id="main" {{detailHero "hitPoints" _id}}
-				  layout horizontal wrap>
-		<div class="green white-text subhead left"
-			 hero-id="toolbar" {{detailHero "hitPoints" _id}}
-			 layout vertical center center-justified>
-			<div class="hitPointTitle clickable">Hit Points</div>
+	<paper-material class="card container healthCard layout horizontal wrap">
+		<div class="green white-text subhead left layout vertical center center-justified">
+			<div class="hitPointTitle clickable">
+				Hit Points
+			</div>
 			<paper-icon-button class="white54"
 							   id="addTempHP"
 							   icon="add"
 							   disabled={{#unless canEditCharacter _id}}true{{/unless}}>
 			</paper-icon-button>
 		</div>
-		<div class="right" flex layout vertical center-justified style="min-width: 180px;">
-			<div layout horizontal>
+		<div class="right flex layout vertical center-justified" style="min-width: 180px;">
+			<div class="layout horizontal">
 				<paper-diff-slider id="hitPointSlider"
 								   value={{characterCalculate "attributeValue" _id "hitPoints"}}
 								   max={{characterCalculate "attributeBase" _id "hitPoints"}}
 								   editable pin
-								   disabled={{#unless canEditCharacter _id}}true{{/unless}}
-								   role="slider">
+								   disabled={{#unless canEditCharacter _id}}true{{/unless}}>
 				</paper-diff-slider>
 			</div>
 			{{#each tempHitPoints}}
 				<div>
 					{{name}}
-					<div layout horizontal>
+					<div class="layout horizontal">
 					<paper-diff-slider class="tempHitPointSlider"
 							  value={{left}}
 							  max={{maximum}}
@@ -58,20 +55,20 @@
 			</div>
 			{{#if showDeathSave}}
 				{{#with deathSaveObject}}
-					<div class="padded" layout vertical center>
-						<div class="subhead">
+					<div class="padded layout vertical center">
+						<div class="paper-font-subhead">
 							Death Saves
 						</div>
-						<div layout horizontal>
-							<div layout vertical center>
+						<div class="layout horizontal">
+							<div class="layout vertical center">
 								<div class="caption">Fail</div>
-								<div layout horizontal center-justified wrap reverse>
+								<div class="layout horizontal center-justified wrap reverse">
 									<paper-icon-button class="slotBubble failBubble" icon={{failIcon 1}} disabled={{failDisabled 1}}></paper-icon-button>
 									<paper-icon-button class="slotBubble failBubble" icon={{failIcon 2}} disabled={{failDisabled 2}}></paper-icon-button>
 									<paper-icon-button class="slotBubble failBubble" icon={{failIcon 3}} disabled={{failDisabled 3}}></paper-icon-button>
 								</div>
 							</div>
-							<div layout horizontal center center-justified style="min-width: 94px">
+							<div class="layout horizontal center center-justified" style="min-width: 94px">
 								{{#if dead}}
 									DEAD
 								{{else}}
@@ -83,8 +80,8 @@
 								{{/if}}
 							</div>
 							<div layout vertical center>
-								<div class="caption">Pass</div>
-								<div layout horizontal center-justified wrap>
+								<div class="paper-font-caption">Pass</div>
+								<div class="layout horizontal center-justified wrap">
 									<paper-icon-button class="slotBubble passBubble" icon={{passIcon 1}} disabled={{passDisabled 1}}></paper-icon-button>
 									<paper-icon-button class="slotBubble passBubble" icon={{passIcon 2}} disabled={{passDisabled 2}}></paper-icon-button>
 									<paper-icon-button class="slotBubble passBubble" icon={{passIcon 3}} disabled={{passDisabled 3}}></paper-icon-button>
diff --git a/rpg-docs/client/views/character/stats/hitDice/hitDice.html b/rpg-docs/client/views/character/stats/hitDice/hitDice.html
index 8f5489f8..76fe31a7 100644
--- a/rpg-docs/client/views/character/stats/hitDice/hitDice.html
+++ b/rpg-docs/client/views/character/stats/hitDice/hitDice.html
@@ -1,35 +1,31 @@
 <template name="hitDice">
 	{{#if characterCalculate "attributeBase" ../_id name}}
 		<div>
-		<paper-material class="card hit-dice" hero-id="main"
-					  {{detailHero name ../_id}}
-					  layout horizontal>
-			<div class="left green display1 white-text"
-				 hero-id="toolbar" {{detailHero name ../_id}}
-				 layout horizontal>
-				<div>
-					<paper-icon-button class="resourceUp"
-									   icon="arrow-drop-up"
-									   disabled={{cantIncrement}}>
-					</paper-icon-button>
-					<paper-icon-button class="resourceDown"
-									   icon="arrow-drop-down"
-									   disabled={{cantDecrement}}>
-					</paper-icon-button>
-				</div>
-				<div class="resourceValue" layout vertical center>
+			<paper-material class="card hit-dice layout horizontal">
+				<div class="left green paper-font-display1 white-text layout horizontal">
 					<div>
-						{{characterCalculate "attributeValue" ../_id name}}
+						<paper-icon-button class="resourceUp"
+										   icon="arrow-drop-up"
+										   disabled={{cantIncrement}}>
+						</paper-icon-button>
+						<paper-icon-button class="resourceDown"
+										   icon="arrow-drop-down"
+										   disabled={{cantDecrement}}>
+						</paper-icon-button>
 					</div>
-					<div class="title white-text">
-						d{{diceNum}} {{conMod}}
+					<div class="resourceValue layout vertical center">
+						<div>
+							{{characterCalculate "attributeValue" ../_id name}}
+						</div>
+						<div class="paper-font-title white-text">
+							d{{diceNum}} {{conMod}}
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="right clickable" flex relative horizontal layout center>
-				Hit Dice
-			</div>
-		</paper-material>
+				<div class="right clickable flex relative horizontal layout center">
+					Hit Dice
+				</div>
+			</paper-material>
 		</div>
 	{{/if}}
 </template>
diff --git a/rpg-docs/client/views/character/stats/hitDice/hitDice.js b/rpg-docs/client/views/character/stats/hitDice/hitDice.js
index 4e49f4b3..90afb5ba 100644
--- a/rpg-docs/client/views/character/stats/hitDice/hitDice.js
+++ b/rpg-docs/client/views/character/stats/hitDice/hitDice.js
@@ -16,7 +16,7 @@ Template.hitDice.helpers({
 });
 
 Template.hitDice.events({
-	"tap .resourceUp": function(event){
+	"click .resourceUp": function(event){
 		var value = Characters.calculate.attributeValue(this.char._id, this.name);
 		var base = Characters.calculate.attributeBase(this.char._id, this.name);
 		if (value < base){
@@ -25,7 +25,7 @@ Template.hitDice.events({
 			Characters.update(this.char._id, modifier, {validate: false});
 		}
 	},
-	"tap .resourceDown": function(event){
+	"click .resourceDown": function(event){
 		var value = Characters.calculate.attributeValue(this.char._id, this.name);
 		if (value > 0){
 			var modifier = {$inc: {}};
@@ -33,10 +33,10 @@ Template.hitDice.events({
 			Characters.update(this.char._id, modifier, {validate: false});
 		}
 	},
-	"tap .right": function() {
+	"click .right": function(event, template) {
 		var charId = Template.parentData()._id;
 		var title = "d" + this.diceNum + " Hit Dice";
-		GlobalUI.setDetail({
+		pushDialogStack({
 			template: "attributeDialog",
 			data:     {
 				name: title,
@@ -44,7 +44,7 @@ Template.hitDice.events({
 				charId: charId,
 				color: "green",
 			},
-			heroId:   charId + this.name,
+			element: event.currentTarget.parentElement,
 		});
 	},
 });
diff --git a/rpg-docs/client/views/character/stats/skillRow/skillRow.html b/rpg-docs/client/views/character/stats/skillRow/skillRow.html
index d8f7db0c..0b01f919 100644
--- a/rpg-docs/client/views/character/stats/skillRow/skillRow.html
+++ b/rpg-docs/client/views/character/stats/skillRow/skillRow.html
@@ -1,9 +1,6 @@
 <template name="skillRow">
 	<div class="item-slot">
-		<div class="skill-row item small" 
-			 hero-id="main" 
-			 {{detailHero skill ../_id}} 
-			 layout horizontal center>
+		<div class="skill-row item small layout horizontal center">
 			<iron-icon icon="{{profIcon}}"></iron-icon>
 			{{#if failSkill}}
 				<div class="fail skill-mod">fail</div>
@@ -23,4 +20,4 @@
 			</div>
 		</div>
 	</div>
-</template>
\ No newline at end of file
+</template>
diff --git a/rpg-docs/client/views/character/stats/skillRow/skillRow.js b/rpg-docs/client/views/character/stats/skillRow/skillRow.js
index fae6145a..20915294 100644
--- a/rpg-docs/client/views/character/stats/skillRow/skillRow.js
+++ b/rpg-docs/client/views/character/stats/skillRow/skillRow.js
@@ -12,7 +12,7 @@ Template.skillRow.helpers({
 		if (prof > 0 && prof < 1) return "image:brightness-2";
 		if (prof === 1) return "image:brightness-1";
 		if (prof > 1) return "av:album";
-		return "radio-button-off";
+		return "radio-button-unchecked";
 	},
 	failSkill: function(){
 		var charId = Template.parentData()._id;
diff --git a/rpg-docs/client/views/character/stats/statCard/statCard.css b/rpg-docs/client/views/character/stats/statCard/statCard.css
new file mode 100644
index 00000000..04a9250e
--- /dev/null
+++ b/rpg-docs/client/views/character/stats/statCard/statCard.css
@@ -0,0 +1,16 @@
+.stat-card {
+	min-width: 75px;
+	text-align: center;
+	cursor: pointer;
+	-webkit-margin-collapse: separate;
+	background: #fff;
+}
+
+.stat-card .title {
+	padding: 16px;
+}
+
+.stat-card .numbers {
+	min-width: 72px;
+	padding: 16px;
+}
diff --git a/rpg-docs/client/views/character/stats/statCard/statCard.html b/rpg-docs/client/views/character/stats/statCard/statCard.html
new file mode 100644
index 00000000..997a6df5
--- /dev/null
+++ b/rpg-docs/client/views/character/stats/statCard/statCard.html
@@ -0,0 +1,16 @@
+<template name="statCard">
+	<div>
+		<paper-material class="ability-mini-card layout horizontal">
+			<div class="numbers paper-font-display1">
+					{{#if isSkill}}
+						{{prefix}}{{skillMod}}
+					{{else}}
+						{{prefix}}{{characterCalculate "attributeValue" ../_id stat}}
+					{{/if}}
+			</div>
+			<div class="paper-font-subhead title flex layout horizontal center">
+				{{name}}
+			</div>
+		</paper-material>
+	</div>
+</template>
diff --git a/rpg-docs/client/views/character/stats/statCard/statCard.js b/rpg-docs/client/views/character/stats/statCard/statCard.js
new file mode 100644
index 00000000..32a89cad
--- /dev/null
+++ b/rpg-docs/client/views/character/stats/statCard/statCard.js
@@ -0,0 +1,9 @@
+Template.statCard.helpers({
+	skillMod: function() {
+		return signedString(
+			Characters.calculate.skillMod(
+				Template.parentData()._id, this.stat
+			)
+		);
+	},
+});
diff --git a/rpg-docs/client/views/character/stats/stats.html b/rpg-docs/client/views/character/stats/stats.html
index 3f3df6ab..2e33a9ba 100644
--- a/rpg-docs/client/views/character/stats/stats.html
+++ b/rpg-docs/client/views/character/stats/stats.html
@@ -29,7 +29,7 @@
 			<!--Saving Throws-->
 			<div>
 			<paper-material class="card">
-				<div class="top white subhead">
+				<div class="top white paper-font-subhead">
 					Saving Throws
 				</div>
 				<div flex class="bottom list">
@@ -45,7 +45,7 @@
 			<!--Skills-->
 			<div>
 			<paper-material class="card">
-				<div class="top white subhead">
+				<div class="top white paper-font-subhead">
 					Skills
 				</div>
 				<div flex class="bottom list">
@@ -73,21 +73,3 @@
 		</div>
 	</div>
 </template>
-
-<template name="statCard">
-	<div>
-	<paper-material class="card statCard clickable" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
-		<div class="left display1 white-text {{color}}"
-			 hero-id="toolbar" {{detailHero stat ../_id}}>
-			{{#if isSkill}}
-				{{prefix}}{{skillMod}}
-			{{else}}
-				{{prefix}}{{characterCalculate "attributeValue" ../_id stat}}
-			{{/if}}
-		</div>
-		<div class="right subhead" flex horizontal layout center>
-			{{name}}
-		</div>
-	</paper-material>
-	</div>
-</template>
diff --git a/rpg-docs/client/views/character/stats/stats.js b/rpg-docs/client/views/character/stats/stats.js
index 0cf7b922..9d2f7e6e 100644
--- a/rpg-docs/client/views/character/stats/stats.js
+++ b/rpg-docs/client/views/character/stats/stats.js
@@ -1,8 +1,8 @@
 Template.stats.events({
-	"tap .statCard": function(event, instance){
+	"click .statCard": function(event, instance){
 		var charId = instance.data._id;
 		if (this.isSkill){
-			GlobalUI.setDetail({
+			pushDialogStack({
 				template: "skillDialog",
 				data:     {
 					name: this.name,
@@ -10,10 +10,10 @@ Template.stats.events({
 					charId: charId,
 					color: this.color,
 				},
-				heroId:   charId + this.stat,
+				element: event.currentTarget,
 			});
 		} else {
-			GlobalUI.setDetail({
+			pushDialogStack({
 				template: "attributeDialog",
 				data:     {
 					name: this.name,
@@ -21,15 +21,15 @@ Template.stats.events({
 					charId: charId,
 					color: this.color,
 				},
-				heroId:   charId + this.stat,
+				element: event.currentTarget,
 			});
 		}
 	},
-	"tap .abilityMiniCard": function(event, instance){
+	"click .ability-mini-card": function(event, instance){
 		var charId = Template.parentData()._id;
 		var template = "attributeDialog";
 		if (this.ability === "strength") template = "strengthDialog";
-		GlobalUI.setDetail({
+		pushDialogStack({
 			template: template,
 			data:     {
 				name: this.title,
@@ -37,24 +37,24 @@ Template.stats.events({
 				charId: charId,
 				color: this.color,
 			},
-			heroId:   charId + this.ability,
+			element: event.currentTarget,
 		});
 	},
 	"tap .skill-row": function(event, instance){
 		var skill = this.skill;
 		var charId = instance.data._id;
-		GlobalUI.setDetail({
+		pushDialogStack({
 			template: "skillDialog",
 			data:     {
 				name: this.name,
 				skillName: skill,
 				charId: charId,
 			},
-			heroId:   charId + skill,
+			element: event.currentTarget,
 		});
 	},
 	"tap .hitPointTitle": function(event, instance) {
-		GlobalUI.setDetail({
+		pushDialogStack({
 			template: "attributeDialog",
 			data:     {
 				name: "Hit Points",
@@ -62,17 +62,7 @@ Template.stats.events({
 				charId: this._id,
 				color: "green",
 			},
-			heroId:   this._id + "hitPoints",
+			element: event.currentTarget.parentElement.parentElement,
 		});
 	},
 });
-
-Template.statCard.helpers({
-	skillMod: function() {
-		return signedString(
-			Characters.calculate.skillMod(
-				Template.parentData()._id, this.stat
-			)
-		);
-	},
-});
diff --git a/rpg-docs/client/views/layout/polymerImports.html b/rpg-docs/client/views/layout/polymerImports.html
index b751207c..37a246b6 100644
--- a/rpg-docs/client/views/layout/polymerImports.html
+++ b/rpg-docs/client/views/layout/polymerImports.html
@@ -11,12 +11,12 @@
 	<link rel="import" href="/components/app-layout/app-scroll-effects/effects/resize-title.html">
 
 	<link rel="import" href="/components/iron-icon/iron-icon.html">
-<!--<link rel="import" href="/components/iron-icons/av-icons.html">-->
+	<link rel="import" href="/components/iron-icons/av-icons.html">
 <!--<link rel="import" href="/components/iron-icons/communication-icons.html">-->
 <!--<link rel="import" href="/components/iron-icons/device-icons.html">-->
 <!--<link rel="import" href="/components/iron-icons/editor-icons.html">-->
 <!--<link rel="import" href="/components/iron-icons/hardware-icons.html">-->
-<!--<link rel="import" href="/components/iron-icons/image-icons.html">-->
+	<link rel="import" href="/components/iron-icons/image-icons.html">
 	<link rel="import" href="/components/iron-icons/iron-icons.html">
 <!--<link rel="import" href="/components/iron-icons/maps-icons.html">-->
 <!--<link rel="import" href="/components/iron-icons/notification-icons.html">-->
diff --git a/rpg-docs/public/custom_components/app-theme.html b/rpg-docs/public/custom_components/app-theme.html
index 401c579c..b2427fe7 100644
--- a/rpg-docs/public/custom_components/app-theme.html
+++ b/rpg-docs/public/custom_components/app-theme.html
@@ -1,6 +1,7 @@
 <link rel="import" href="../components/polymer/polymer.html">
 <link rel="import" href="../components/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../components/paper-styles/classes/typography.html">
+<link rel="import" href="../components/paper-styles/classes/global.html">
 
 <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
 	--primary-color: #424242;
@@ -12,4 +13,13 @@
 	paper-item.short {
 		--paper-item-min-height: 32px;
 	}
+	a {
+		color: inherit;
+		text-decoration: none;
+		text-transform: inherit;
+		font-size: inherit;
+		font-weight: inherit;
+		letter-spacing: inherit;
+		line-height: inherit;
+	}
 </style>