diff --git a/src/components/Spelllist.vue b/src/components/Spelllist.vue
index 383a1d4..7a9ffca 100644
--- a/src/components/Spelllist.vue
+++ b/src/components/Spelllist.vue
@@ -50,7 +50,7 @@
 
 <script>
 import Vue from 'vue'
-// import Query from '../query'
+import Query from '../query'
 import SpellItem from './Spellitem'
 
 Vue.component('spell-item', SpellItem)
@@ -62,9 +62,8 @@ export default {
       return trueMax < 1 ? 1 : trueMax
     },
     pagedSpells () {
-      let min = this.page * this.perPage - this.perPage
-      let max = min + this.perPage
-      return this.sortedSpells.slice(min, max)
+      return new Query(this.sortedSpells)
+      .paginate(this.page, this.perPage)
     },
     sortedSpells () {
       return this.spells
diff --git a/src/query.js b/src/query.js
index 3ab8cae..7975a01 100644
--- a/src/query.js
+++ b/src/query.js
@@ -30,4 +30,10 @@ export default class Query {
     })
     return this
   }
+
+  paginate (page = 1, perPage = 10) {
+    let min = page * perPage - perPage
+    let max = min + perPage
+    return this.data.slice(min, max)
+  }
 }