diff --git a/app/imports/ui/components/children/ChildLists.vue b/app/imports/ui/components/children/ChildLists.vue
deleted file mode 100644
index 20e3c809..00000000
--- a/app/imports/ui/components/children/ChildLists.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template lang="html">
-	<div v-if="effects && effects.length">
-		<h6 class="title">Effects</h6>
-		<effect-child-list
-			show-stat-name
-			:effects="effects"
-			@click="e => $emit('clickedEffect', e)"
-		/>
-	</div>
-</template>
-
-<script>
-	import EffectChildList from '/imports/ui/components/children/effects/EffectChildList.vue';
-
-	export default {
-		props: {
-			effects: Array,
-			proficiencies: Array,
-			actions: Array,
-			attacks: Array,
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>
diff --git a/app/imports/ui/components/tree/TreeNode.vue b/app/imports/ui/components/tree/TreeNode.vue
new file mode 100644
index 00000000..ea8fb1e9
--- /dev/null
+++ b/app/imports/ui/components/tree/TreeNode.vue
@@ -0,0 +1,21 @@
+<template lang="html">
+  <div class="layout row">
+  	<v-btn @click="expand">
+  		<v-icon>arrow-right</v-icon>
+  	</v-btn>
+  </div>
+</template>
+
+<script>
+/**
+* TreeNode's are list item views of character properties. Every property which
+* can belong to the character is shown in the tree view of the character
+* the tree view shows off the full character structure, and where each part of
+* character comes from.
+**/
+export default {
+}
+</script>
+
+<style lang="css" scoped>
+</style>