diff --git a/src/components/Spell.vue b/src/components/Spell.vue
new file mode 100644
index 0000000..bf64b68
--- /dev/null
+++ b/src/components/Spell.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <h1>
+      {{spell.name}}
+      <span class="label circular bg-primary text-white">
+        {{level}}
+      </span>
+    </h1>
+    <ol class="list no-border">
+      <li class="item">
+        <i class="item-primary">accessibility</i>
+        <div class="item-content">
+          {{classes}}
+        </div>
+      </li>
+      <li class="item">
+        <i class="item-primary">group_work</i>
+        <div class="item-content">
+          {{spell.components.raw}}
+        </div>
+      </li>
+      <li class="item">
+        <i class="item-primary">school</i>
+        <div class="item-content">
+          {{spell.school}}
+        </div>
+      </li>
+      <li class="item">
+        <i class="item-primary">hourglass_full</i>
+        <div class="item-content">
+          {{spell.duration}}
+        </div>
+      </li>
+      <li class="item">
+        <i class="item-primary">av_timer</i>
+        <div class="item-content">
+          {{spell.casting_time}}
+        </div>
+      </li>
+      <li class="item">
+        <i class="item-primary">short_text</i>
+        <div class="item-content">
+          {{spell.description}}
+        </div>
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+import { state } from '../store'
+import { capitalize } from '../utils'
+
+export default {
+  data () {
+    return { state }
+  },
+  computed: {
+    spell () {
+      return this.state.spells.data.find(spell => spell.name === this.$route.params.name)
+    },
+    level () {
+      return this.spell.level.toLowerCase() === 'cantrip' ? 'C' : this.spell.level
+    },
+    classes () {
+      return this.spell.classes.map(cla => capitalize(cla)).join(', ')
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/Spellitem.vue b/src/components/Spellitem.vue
index 5184d6f..f6b4270 100644
--- a/src/components/Spellitem.vue
+++ b/src/components/Spellitem.vue
@@ -33,8 +33,7 @@
 
 <script>
 import { state, dispatch } from '../store'
-
-let capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
+import { capitalize } from '../utils'
 
 export default {
   computed: {
@@ -52,9 +51,7 @@ export default {
     }
   },
   data () {
-    return {
-      state
-    }
+    return { state }
   },
   props: [
     'spell'
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..ac476cf
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1 @@
+export let capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)