diff --git a/app/imports/ui/StoryBook.vue b/app/imports/ui/StoryBook.vue
index 8fbedb91..bc1efbc9 100644
--- a/app/imports/ui/StoryBook.vue
+++ b/app/imports/ui/StoryBook.vue
@@ -38,18 +38,20 @@
 
 <script>
 	import Vue from "vue";
-	import ToolbarLayout from '/imports/ui/layouts/ToolbarLayout.vue';
-	import HealthBar from '/imports/ui/components/HealthBar.Story.vue';
-	import SkillListTile from '/imports/ui/components/SkillListTile.Story.vue';
 	import AbilityListTile from '/imports/ui/components/AbilityListTile.Story.vue';
 	import AttributeCard from '/imports/ui/components/AttributeCard.Story.vue';
+	import HealthBar from '/imports/ui/components/HealthBar.Story.vue';
+	import HitDiceListTile from '/imports/ui/components/HitDiceListTile.Story.vue';
+	import SkillListTile from '/imports/ui/components/SkillListTile.Story.vue';
+	import ToolbarLayout from '/imports/ui/layouts/ToolbarLayout.vue';
 	export default {
 		components: {
-			ToolbarLayout,
-			HealthBar,
-			SkillListTile,
 			AbilityListTile,
 			AttributeCard,
+			HealthBar,
+			HitDiceListTile,
+			SkillListTile,
+			ToolbarLayout,
 		},
 		data(){ return {
 			sidebar: undefined,
diff --git a/app/imports/ui/components/HitDiceListTile.Story.vue b/app/imports/ui/components/HitDiceListTile.Story.vue
new file mode 100644
index 00000000..af02bf9e
--- /dev/null
+++ b/app/imports/ui/components/HitDiceListTile.Story.vue
@@ -0,0 +1,66 @@
+<template lang="html">
+	<v-list>
+		<v-subheader>Hit Dice</v-subheader>
+		<template v-for="(hitDie, index) in hitDice">
+			<v-divider v-if="index !== 0"/>
+			<hit-dice-list-tile
+				:key="hitDie.dice"
+				v-bind="hitDie"
+				@click="click"
+				@change="e => change(hitDie, e)"
+			/>
+		</template>
+	</v-list>
+</template>
+
+<script>
+	import HitDiceListTile from '/imports/ui/components/HitDiceListTile.vue';
+	export default {
+		data(){ return{
+			hitDice: [
+				{
+					dice: 6,
+					value: 20,
+					maxValue: 20,
+					conMod: 4,
+				}, {
+					dice: 8,
+					value: 3,
+					maxValue: 3,
+					conMod: 4,
+				}, {
+					dice: 10,
+					value: 3,
+					maxValue: 3,
+					conMod: 4,
+				}, {
+					dice: 12,
+					value: 1,
+					maxValue: 1,
+					conMod: 4,
+				},
+			]
+		}},
+		components: {
+			HitDiceListTile,
+		},
+		methods: {
+			click(e){
+				console.log(e);
+			},
+			change(hitDie, e){
+				if (e.type === 'increment'){
+					hitDie.value += e.value;
+					if (hitDie.value > hitDie.maxValue){
+						hitDie.value = hitDie.maxValue;
+					} else if (hitDie.value < 0){
+						hitDie.value = 0;
+					}
+				}
+			},
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/components/HitDiceListTile.vue b/app/imports/ui/components/HitDiceListTile.vue
new file mode 100644
index 00000000..b6efd627
--- /dev/null
+++ b/app/imports/ui/components/HitDiceListTile.vue
@@ -0,0 +1,94 @@
+<template lang="html">
+	<v-list-tile class="hit-dice-list-tile" :class="{hover}">
+
+		<v-list-tile-action class="mr-4">
+
+			<v-layout row align-center class="left">
+				<v-layout column class="buttons" justify-center>
+					<v-btn icon flat :disabled="value >= maxValue" @click="increment(1)">
+						<v-icon>arrow_drop_up</v-icon>
+					</v-btn>
+					<v-btn icon flat :disabled="value <= 0" @click="increment(-1)">
+						<v-icon>arrow_drop_down</v-icon>
+					</v-btn>
+				</v-layout>
+
+				<v-layout row align-end>
+					<div class="display-1">
+						{{value}}
+					</div>
+					<div class="title max-value ml-2">
+						/{{maxValue}}
+					</div>
+				</v-layout>
+			</v-layout>
+
+		</v-list-tile-action>
+
+	  <v-list-tile-content
+			class="content"
+			@click="click"
+			@mouseover="hover = true"
+			@mouseleave="hover = false"
+		>
+			<v-list-tile-title>
+				d{{dice}} {{signed(conMod)}}
+			</v-list-tile-title>
+	  </v-list-tile-content>
+
+	</v-list-tile>
+</template>
+
+<script>
+import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+// Set elevation to 8 when hovering over the name
+export default {
+	data(){ return{
+		hover: false,
+	}},
+	props: {
+		dice: Number,
+		value: Number,
+		maxValue: Number,
+		conMod: Number,
+	},
+	methods: {
+		signed: numberToSignedString,
+		click(e){
+			this.$emit('click', e);
+		},
+		increment(value){
+			this.$emit('change', {type: 'increment', value})
+		},
+	},
+	computed: {
+		hasClickListener(){
+    	return this.$listeners && this.$listeners.click
+		},
+	},
+};
+</script>
+
+<style lang="css" scoped>
+	.hit-dice-list-tile >>> .v-list__tile {
+		height: 88px;
+	}
+	.left {
+		height: 100%;
+	}
+	.buttons {
+		height: 100%;
+	}
+	.buttons > .v-btn {
+		margin: -2px;
+	}
+	.hit-dice-list-tile.hover {
+		background: rgba(0,0,0,.04);
+	}
+	.content {
+		cursor: pointer;
+	}
+	.max-value {
+		color: rgba(0,0,0,.54);
+	}
+</style>