diff --git a/app/imports/ui/components/AbilityDialog.vue b/app/imports/ui/components/AbilityDialog.vue
new file mode 100644
index 00000000..0c1a22f0
--- /dev/null
+++ b/app/imports/ui/components/AbilityDialog.vue
@@ -0,0 +1,47 @@
+<template lang="html">
+	<dialog-base>
+    <div slot="toolbar">
+      {{name}}
+    </div>
+    <v-layout align-center>
+			<div class="display-1 modifier">
+				{{numberToSignedString(modifier)}}
+			</div>
+			<div class="title score">
+				{{score}}
+			</div>
+		</v-layout>
+  </dialog-base>
+</template>
+
+<script>
+	import store from "/imports/ui/vuexStore.js";
+	import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
+	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+
+	export default {
+		props: {
+			name: String,
+			score: Number,
+			modifier: Number,
+		},
+		methods: {
+			numberToSignedString,
+		},
+		components: {
+			DialogBase,
+		},
+	}
+</script>
+
+<style lang="css" scoped>
+	.score {
+		font-weight: 600;
+		font-size: 24px !important;
+		color: rgba(0, 0, 0, 0.54);
+	}
+	.modifier, .score {
+		text-align: center;
+		width: 100%;
+	}
+</style>
diff --git a/app/imports/ui/components/AbilityListTile.Story.vue b/app/imports/ui/components/AbilityListTile.Story.vue
index 05657930..6ac3b7af 100644
--- a/app/imports/ui/components/AbilityListTile.Story.vue
+++ b/app/imports/ui/components/AbilityListTile.Story.vue
@@ -4,8 +4,9 @@
 			<v-divider v-if="index !== 0"/>
 			<ability-list-tile
 				:key="ability.name"
+				:id="_uid + ability.name"
 				v-bind="ability"
-				@click="click"
+				@click="click(_uid + ability.name, ability)"
 			/>
 		</template>
 	</v-list>
@@ -13,6 +14,8 @@
 
 <script>
 	import AbilityListTile from '/imports/ui/components/AbilityListTile.vue';
+	import store from "/imports/ui/vuexStore.js";
+
 	export default {
 		data(){ return{
 			abilities: [
@@ -47,8 +50,12 @@
 			AbilityListTile,
 		},
 		methods: {
-			click(e){
-				console.log(e)
+			click(elementId, data){
+				store.commit("pushDialogStack", {
+					component: "ability-dialog",
+					elementId,
+					data,
+				});
 			},
 		},
 	};
diff --git a/app/imports/ui/components/AbilityListTile.vue b/app/imports/ui/components/AbilityListTile.vue
index 2d493382..dd6efa2c 100644
--- a/app/imports/ui/components/AbilityListTile.vue
+++ b/app/imports/ui/components/AbilityListTile.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-	<v-list-tile class="ability-list-tile"  v-on="hasClickListener ? {click} : {}">
+	<v-list-tile class="ability-list-tile white" v-on="hasClickListener ? {click} : {}">
 
 		<v-list-tile-action class="mr-4">
 			<div class="display-1 modifier">
diff --git a/app/imports/ui/dialogStack/DialogComponentIndex.js b/app/imports/ui/dialogStack/DialogComponentIndex.js
new file mode 100644
index 00000000..6c66939a
--- /dev/null
+++ b/app/imports/ui/dialogStack/DialogComponentIndex.js
@@ -0,0 +1,5 @@
+import AbilityDialog from '/imports/ui/components/AbilityDialog.vue';
+
+export default {
+  AbilityDialog,
+};
diff --git a/app/imports/ui/dialogStack/DialogStack.Story.vue b/app/imports/ui/dialogStack/DialogStack.Story.vue
index 584c66c0..7ce6191c 100644
--- a/app/imports/ui/dialogStack/DialogStack.Story.vue
+++ b/app/imports/ui/dialogStack/DialogStack.Story.vue
@@ -10,11 +10,13 @@
 
 <script>
 	import DialogBaseStory from '/imports/ui/dialogStack/DialogBase.Story.vue';
-  import store from "/imports/ui/vuexStore.js";
 	export default {
 		methods: {
 			openDialog(elementId){
-				store.commit("pushDialogStack", {
+				this.$store.commit("pushDialogStack", {
+					// DO NOT store your component in the store like this outside the storybook
+					// You should register the dialog component in DialogComponentIndex.js
+					// and commit it to the store as a string: "dialog-base-story"
 					component: DialogBaseStory,
 					elementId,
 				});
diff --git a/app/imports/ui/dialogStack/DialogStack.vue b/app/imports/ui/dialogStack/DialogStack.vue
index 0e5158a1..002a175f 100644
--- a/app/imports/ui/dialogStack/DialogStack.vue
+++ b/app/imports/ui/dialogStack/DialogStack.vue
@@ -25,37 +25,42 @@
 				:style="getDialogStyle(index)"
 				:elevation="6"
       >
-        <component :is="dialog.component" :data="dialog.data" @pop="popDialogStack($event)" class="dialog-component"></component>
+        <component :is="dialog.component" v-bind="dialog.data" @pop="popDialogStack($event)" class="dialog-component"></component>
       </v-card>
     </transition-group>
   </v-layout>
 </template>
 
 <script>
-  import "/imports/ui/dialogStack/dialogStackWindowEvents.js";
-  import store from "/imports/ui/vuexStore.js";
-  import anime from "animejs";
-	import mockElement from '/imports/ui/dialogStack/mockElement.js';
 	import Vue from "vue";
+	import anime from "animejs";
+  import "/imports/ui/dialogStack/dialogStackWindowEvents.js";
+	import mockElement from '/imports/ui/dialogStack/mockElement.js';
+	import DialogComponentIndex from '/imports/ui/dialogStack/DialogComponentIndex.js';
 
   const OFFSET = 16;
 	const MOCK_DURATION = 400; // Keep in sync with css transition of .dialog
 
   export default {
+		components: DialogComponentIndex,
     computed: {
       dialogs(){
-        return store.state.dialogStack.dialogs;
+        return this.$store.state.dialogStack.dialogs;
       },
     },
     methods: {
+			logAndReturn(thing){
+				console.log(thing);
+				return thing;
+			},
       popDialogStack(result){
-        store.dispatch("popDialogStack", result);
+        this.$store.dispatch("popDialogStack", result);
       },
       backdropClicked(event){
         if (event.target === event.currentTarget) this.popDialogStack();
       },
       getDialogStyle(index){
-        const length = store.state.dialogStack.dialogs.length;
+        const length = this.$store.state.dialogStack.dialogs.length;
     		if (index >= length) return;
     		const num = length - 1;
     		const left = (num - index) * -OFFSET;