diff --git a/app/imports/ui/components/AttributeEffectList.vue b/app/imports/ui/components/AttributeEffectList.vue
index 775e3b3a..87033bf6 100644
--- a/app/imports/ui/components/AttributeEffectList.vue
+++ b/app/imports/ui/components/AttributeEffectList.vue
@@ -1,40 +1,15 @@
 <template lang="html">
   <v-list two-line v-if="this.effects && this.effects.length">
-  	<v-list-tile
+		<effect-list-tile
 			v-for="effect in sortedEffects"
-			:class="{effect: true, disabled: !effect.enabled}"
-			:id="`${_uid}-${effect._id}`"
-			:key="effect._id"
-			v-on="$listeners.click ? { click(e){
-					$emit('click', {effect, elementId: `${_uid}-${effect._id}`})
-				} } : {}"
+			v-bind="effect"
+			v-on="$listeners.click ? { click(e){$emit('click', e)} } : {}"
 		>
-			<v-layout row align-center class="net-effect">
-				<v-icon class="black--text icon">
-					{{getEffectIcon(effect.operation, effect.result)}}
-				</v-icon>
-				<div class="value display-1  pr-2" v-if="showValue(effect.operation)">
-					{{getValue(effect.operation, effect.result)}}
-				</div>
-				<div class="calculation body-2 pr-2" v-else>
-					{{effect.calculation}}
-				</div>
-			</v-layout>
-			<v-list-tile-content>
-				<v-list-tile-title class="name">
-					{{effect.name}}
-				</v-list-tile-title>
-				<v-list-tile-sub-title class="operation">
-					{{getOperation(effect.operation)}}
-				</v-list-tile-sub-title>
-			</v-list-tile-content>
-  	</v-list-tile>
   </v-list>
 </template>
 
 <script>
-	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
-	import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
+	import EffectListTile from '/imports/ui/components/EffectListTile.vue';
 	const SORT_INDEX = {
 		"base": 1,
 		"add": 2,
@@ -52,6 +27,9 @@
 		props: {
 			effects: Array,
 		},
+		components: {
+			EffectListTile,
+		},
 		computed: {
 			sortedEffects(){
 				if (!this.effects || !this.effects.length) return [];
@@ -60,67 +38,8 @@
 				);
 			}
 		},
-		watch: {
-			sortedEffects(newValue){
-				console.log(newValue);
-			}
-		},
-		methods: {
-			getEffectIcon,
-			getOperation(op, value){
-				switch(op) {
-					case 'base': return 'Base value';
-					case 'add': return 'Add';
-					case 'mul': return 'Multiply';
-					case 'min': return 'Minimum';
-					case 'max': return 'Maximum';
-					case 'advantage': return 'Advantage';
-					case 'disadvantage': return 'Disadvantage';
-					case 'passiveAdd': return 'Passive bonus';
-					case 'fail': return 'Always fail';
-					case 'conditional': return 'Conditional benefit' ;
-				}
-			},
-			showValue(op){
-				switch(op) {
-					case 'base': return true;
-					case 'add': return true;
-					case 'mul': return true;
-					case 'min': return true;
-					case 'max': return true;
-					case 'advantage': return false;
-					case 'disadvantage': return false;
-					case 'passiveAdd': return true;
-					case 'fail': return false;
-					case 'conditional': return false;
-				}
-			},
-			getValue(op, value){
-				switch(op) {
-					case 'base': return value;
-					case 'add': return Math.abs(value);
-					case 'mul': return value;
-					case 'min': return value;
-					case 'max': return value;
-					case 'advantage': return;
-					case 'disadvantage': return;
-					case 'passiveAdd': return Math.abs(value);
-					case 'fail': return;
-					case 'conditional': return;
-				}
-			}
-		},
 	};
 </script>
 
 <style lang="css" scoped>
-	.icon {
-		min-width: 30px;
-	}
-	.net-effect {
-		flex-grow: 0;
-	}
-	.value, .calculation {
-		min-width: 80px;
-	}
 </style>
diff --git a/app/imports/ui/components/EffectListTile.vue b/app/imports/ui/components/EffectListTile.vue
new file mode 100644
index 00000000..919bd1be
--- /dev/null
+++ b/app/imports/ui/components/EffectListTile.vue
@@ -0,0 +1,111 @@
+<template lang="html">
+	<v-list-tile
+		class="effect-list-tile"
+		:class="{disabled: !enabled}"
+		:id="elementId"
+		:key="_id"
+		v-on="$listeners.click ? { click(e){
+				$emit('click', {$props, elementId})
+			} } : {}"
+	>
+		<v-layout row align-center class="net-effect">
+			<v-icon class="icon">
+				{{getEffectIcon(operation, result)}}
+			</v-icon>
+			<div class="value display-1  pr-2" v-if="showValue(operation)">
+				{{getValue(operation, result)}}
+			</div>
+			<div class="calculation body-2 pr-2" v-else>
+				{{calculation}}
+			</div>
+		</v-layout>
+		<v-list-tile-content>
+			<v-list-tile-title class="name">
+				{{name}}
+			</v-list-tile-title>
+			<v-list-tile-sub-title class="operation">
+				{{getOperation(operation)}}
+			</v-list-tile-sub-title>
+		</v-list-tile-content>
+	</v-list-tile>
+</template>
+
+<script>
+	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+	import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
+	export default {
+		props: {
+			_id: String,
+			enabled: Boolean,
+			operation: String,
+			result: [String, Number],
+			calculation: String,
+			name: String,
+		},
+		computed: {
+			elementId(){
+				return `${this._uid}-${this._id}`
+			},
+		},
+		methods: {
+			getEffectIcon,
+			getOperation(op, value){
+				switch(op) {
+					case 'base': return 'Base value';
+					case 'add': return 'Add';
+					case 'mul': return 'Multiply';
+					case 'min': return 'Minimum';
+					case 'max': return 'Maximum';
+					case 'advantage': return 'Advantage';
+					case 'disadvantage': return 'Disadvantage';
+					case 'passiveAdd': return 'Passive bonus';
+					case 'fail': return 'Always fail';
+					case 'conditional': return 'Conditional benefit' ;
+				}
+			},
+			showValue(op){
+				switch(op) {
+					case 'base': return true;
+					case 'add': return true;
+					case 'mul': return true;
+					case 'min': return true;
+					case 'max': return true;
+					case 'advantage': return false;
+					case 'disadvantage': return false;
+					case 'passiveAdd': return true;
+					case 'fail': return false;
+					case 'conditional': return false;
+				}
+			},
+			getValue(op, value){
+				switch(op) {
+					case 'base': return value;
+					case 'add': return Math.abs(value);
+					case 'mul': return value;
+					case 'min': return value;
+					case 'max': return value;
+					case 'advantage': return;
+					case 'disadvantage': return;
+					case 'passiveAdd': return Math.abs(value);
+					case 'fail': return;
+					case 'conditional': return;
+				}
+			}
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+	.icon {
+		min-width: 30px;
+	}
+	.theme--light .icon {
+		color: black;
+	}
+	.net-effect {
+		flex-grow: 0;
+	}
+	.value, .calculation {
+		min-width: 80px;
+	}
+</style>