diff --git a/src/components/Index.vue b/src/components/Index.vue
index 2c114d0..d465f53 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -5,6 +5,7 @@
         My Spells v2.0 
 
         <q-search
+          class="primary"
           v-model="search"
         ></q-search>
       </q-toolbar-title>
diff --git a/src/components/Spellitem.vue b/src/components/Spellitem.vue
index 2597871..9369aff 100644
--- a/src/components/Spellitem.vue
+++ b/src/components/Spellitem.vue
@@ -1,49 +1,49 @@
 <template>
-  <tr class="spell">
-    <td class="spell-level">
+  <div>
+    <div class="item-primary">
       {{level}}
-    </td>
-    <td colspan="2" class="spell-label">
-      <q-collapsible
-        group="spells"
-        :label="label"
-      >
-
-        <p>{{spell.description}}</p>
-      </q-collapsible>
-    </td>
-  </tr>
+    </div>
+    <div class="item-content has-secondary" v-on:click="openSpell">
+      <div>
+        {{spell.name}}
+      </div>
+      <div>
+        {{classes}}
+      </div>
+    </div>
+    <div class="item-secondary">
+      <q-checkbox v-model="checked" disable></q-checkbox>
+    </div>
+  </div>
 </template>
 
 <script>
+let capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
+
 export default {
   computed: {
     level () {
       return this.spell.level.toLowerCase() === 'cantrip' ? '0' : this.spell.level.charAt(0)
     },
-    label () {
-      return this.schoolCapitalized + '\n' + this.spell.name
+    school () {
+      return capitalize(this.spell.school)
     },
-    schoolCapitalized () {
-      return this.spell.school.charAt(0).toUpperCase() + this.spell.school.slice(1)
+    classes () {
+      return this.spell.classes.map(cla => capitalize(cla)).join(', ')
+    }
+  },
+  data () {
+    return {
+      checked: false
     }
   },
   props: [
     'spell'
-  ]
+  ],
+  methods: {
+    openSpell (event) {
+      console.log(this.spell.name)
+    }
+  }
 }
 </script>
-
-<style lang="stylus">
-  .spell
-    .item-content
-        position: relative
-        & > *
-          white-space: pre-line !important
-          overflow: visible !important
-          line-height: 0
-          padding-top: .5em
-          text-indent: 55%
-    .spell-level
-      padding-left: 1em !important
-</style>
diff --git a/src/components/Spelllist.vue b/src/components/Spelllist.vue
index 273dfd0..1564ccf 100644
--- a/src/components/Spelllist.vue
+++ b/src/components/Spelllist.vue
@@ -1,53 +1,13 @@
 <template>
-  <table class="spell-list q-table compact striped-odd">
-    <thead>
-      <tr>
-        <td colspan="3">
-          <q-pagination
-            class="text-center"
-            v-model="page"
-            :max="pageMax"
-          ></q-pagination>
-        </td>
-      </tr>
-      <tr>
-        <th class="sort-level">
-          <a
-            v-on:click="sortBy = 'level'"
-          >Level</a>
-        </th>
-        <th class="sort-name">
-          <a
-            v-on:click="sortBy = 'name'"
-          >Name</a>
-        </th>
-        <th class="sort-school">
-          <a
-            v-on:click="sortBy = 'school'"
-          >School</a>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        is="spell-item"
-        v-for="spell in pagedSpells"
-        :spell="spell"
-      >
-      </tr>
-    </tbody>
-    <tfoot>
-      <tr>
-        <td colspan="3">
-          <q-pagination
-            class="text-center"
-            v-model="page"
-            :max="pageMax"
-          ></q-pagination>
-        </td>
-      </tr>
-    </tfoot>
-  </table>
+  <div class="list striped no-border">
+    <label
+      is="spell-item"
+      class="item two-line item-link"
+      v-for="spell in pagedSpells"
+      :spell="spell"
+    >
+    </label>
+  </div>
 </template>
 
 <script>