diff --git a/app/imports/ui/components/AttributeCard.Story.vue b/app/imports/ui/components/AttributeCard.Story.vue
new file mode 100644
index 00000000..b841ef87
--- /dev/null
+++ b/app/imports/ui/components/AttributeCard.Story.vue
@@ -0,0 +1,42 @@
+<template lang="html">
+  <v-container style="background: #fafafa;" grid-list-md>
+  	<v-layout row wrap>
+  		<v-flex xs12 v-for="attribute in attributes" :key="attribute.name">
+  			<attribute-card v-bind="attribute" @click="click"/>
+  		</v-flex>
+  	</v-layout>
+	</v-container>
+</template>
+
+<script>
+	import AttributeCard from '/imports/ui/components/AttributeCard.vue';
+	export default {
+		components: {
+			AttributeCard
+		},
+		data(){ return {
+			attributes: [
+				{
+					name: 'Speed',
+					value: 30,
+				}, {
+					name: 'Initiative',
+					value: 2,
+					modifier: true,
+				},{
+					name: 'Proficiency Bonus',
+					value: -2,
+					modifier: true,
+				},
+			],
+		}},
+		methods: {
+			click() {
+				console.log(...arguments)
+			},
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/components/AttributeCard.vue b/app/imports/ui/components/AttributeCard.vue
new file mode 100644
index 00000000..e1dfa725
--- /dev/null
+++ b/app/imports/ui/components/AttributeCard.vue
@@ -0,0 +1,43 @@
+<template lang="html">
+  <v-card :hover="hasClickListener" @click="click">
+  	<v-card-text>
+  		<v-layout row align-center>
+  			<div class="value display-1 mr-1">
+  				{{modifier ? signed(value) : value}}
+  			</div>
+				<v-flex class="name text-truncate">
+					{{name}}
+				</v-flex>
+  		</v-layout>
+  	</v-card-text>
+  </v-card>
+</template>
+
+<script>
+	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+	export default {
+		props: {
+			name: String,
+			value: Number,
+			modifier: Boolean,
+		},
+		methods: {
+			signed: numberToSignedString,
+			click(e){
+				this.$emit('click', e);
+			},
+		},
+		computed: {
+			hasClickListener(){
+	    	return this.$listeners && !!this.$listeners.click
+			},
+		},
+	}
+</script>
+
+<style lang="css" scoped>
+	.value {
+		min-width: 64px;
+		text-align: center;
+	}
+</style>
diff --git a/app/imports/ui/pages/StoryBook.vue b/app/imports/ui/pages/StoryBook.vue
index e712745e..cd702869 100644
--- a/app/imports/ui/pages/StoryBook.vue
+++ b/app/imports/ui/pages/StoryBook.vue
@@ -1,9 +1,15 @@
 <template lang="html">
 	<toolbar-layout>
-    <div slot="toolbar">
-      Storybook
-    </div>
-		<v-navigation-drawer right app>
+    <v-layout row slot="toolbar" align-center>
+			<div>
+				Storybook
+			</div>
+			<v-flex/>
+			<v-btn flat icon @click="sidebar = !sidebar">
+				<v-icon>menu</v-icon>
+			</v-btn>
+    </v-layout>
+		<v-navigation-drawer right app v-model="sidebar">
 			<v-toolbar color="primary" dark>
 				Components
 			</v-toolbar>
@@ -30,17 +36,22 @@
 </template>
 
 <script>
-	import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.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';
 	export default {
 		components: {
 			ToolbarLayout,
 			HealthBar,
 			SkillListTile,
 			AbilityListTile,
+			AttributeCard,
 		},
+		data(){ return {
+			sidebar: undefined,
+		}},
 	}
 </script>