Nearly done, jsut need to clean up the json file and add local storage support

client/naturalCrit/encounter/monsterCard/attackSlot/attackSlot.jsx

@@ -83,11 +83,11 @@ var AttackSlot = React.createClass({
 					<i className={cx('fa', {
 						'fa-hand-grab-o' : type=='dmg',
 						'fa-bullseye' : type=='atk',
-						'fa-medkit' : type=='heal'
+						'fa-plus' : type=='heal'
 					})} />
 					{self.props[type]}
 				</button>
-				<span key={self.state.lastRoll[type+'key']}>{self.state.lastRoll[type] || ''}</span>
+				<span key={self.state.lastRoll[type+'key']}>{self.state.lastRoll[type]}</span>
 			</div>
 		})
 

client/naturalCrit/encounter/monsterCard/monsterCard.jsx

@@ -87,6 +87,7 @@ var MonsterCard = React.createClass({
 
 
 	renderHPBox : function(){
+		var self = this;
 
 		var tempHP
 		if(this.state.tempHP){
@@ -98,17 +99,17 @@ var MonsterCard = React.createClass({
 			<div className='currentHP'>
 				{tempHP} {this.props.currentHP}
 			</div>
-			<div className='maxHP'>{this.props.hp}</div>
+			{self.renderStats()}
 		</div>
 	},
 
 	renderStats : function(){
 		var stats = {
 			'fa fa-shield' : this.props.ac,
-			'fa fa-hourglass-2' : this.props.initiative,
+			//'fa fa-hourglass-2' : this.props.initiative,
 		}
 		return _.map(stats, function(val, icon){
-			return <span className='stat' key={icon}><i className={icon} /> {val}</span>
+			return <div className='stat' key={icon}> {val} <i className={icon} /></div>
 		})
 	},
 
@@ -164,7 +165,6 @@ var MonsterCard = React.createClass({
 				{this.renderHPBox()}
 				<div className='info'>
 					<span className='name'>{this.props.name}</span>
-					{this.renderStats()}
 				</div>
 
 				<div className='attackContainer'>

client/naturalCrit/encounter/monsterCard/monsterCard.less

@@ -7,13 +7,42 @@
 	-ms-user-select       : none;
 	user-select           : none;
 }
+
+@marginSize : 10px;
+
+.playerCard{
+	display          : inline-block;
+	box-sizing       : border-box;
+	margin           : @marginSize;
+	padding          : 10px;
+	background-color : white;
+	border           : 1px solid #bbb;
+
+	.name{
+		margin-right: 20px;
+	}
+	.initiative{
+		font-size: 0.8em;
+		i{
+			font-size: 0.8em;
+		}
+	}
+
+	&:nth-child(5n + 1){ background-color: fade(@blue, 25%); }
+	&:nth-child(5n + 2){ background-color: fade(@purple, 25%); }
+	&:nth-child(5n + 3){ background-color: fade(@steel, 25%); }
+	&:nth-child(5n + 4){ background-color: fade(@green, 25%); }
+	&:nth-child(5n + 5){ background-color: fade(@orange, 25%); }
+}
+
+
 .monsterCard{
 	position         : relative;
 	display          : inline-block;
 	vertical-align   : top;
 	box-sizing       : border-box;
-	width            : 250px;
-	margin           : 30px;
+	width            : 220px;
+	margin           : @marginSize;
 	padding          : 10px;
 	background-color : white;
 	border           : 1px solid #bbb;
@@ -81,7 +110,7 @@
 				line-height    : 0.8em;
 			}
 		}
-		.maxHP{
+		.stat{
 			font-size : 0.8em;
 		}
 		.hpText{