diff --git a/client/src/api/spellsRepository.js b/client/src/api/spellsRepository.js
index 5640688..becb817 100644
--- a/client/src/api/spellsRepository.js
+++ b/client/src/api/spellsRepository.js
@@ -5,19 +5,22 @@ const resource = "/spells"
 
 // CRUD methods for spells
 export default {
-    getSpells() {
+    getAll() {
         return api.get(`${resource}`)
     },
-    getSpell(id) {
+    getPage(page) {
+        return api.get(`${resource}/page/${page}`)
+    },
+    getOne(id) {
         return api.get(`${resource}/${id}`)
     },
-    addSpell(data) {
+    addOne(data) {
         return api.post(`${resource}`, data)
     },
-    updateSpell(id, data) {
+    updateOne(id, data) {
         return api.put(`${resource}/${id}`, data)
     },
-    deleteSpell(id) {
+    deleteOne(id) {
         return api.delete(`${resource}/${id}`)
     }
 }
\ No newline at end of file
diff --git a/client/src/components/spells/add-spell-card.vue b/client/src/components/spells/add-spell-card.vue
index 94141f5..353bbc5 100644
--- a/client/src/components/spells/add-spell-card.vue
+++ b/client/src/components/spells/add-spell-card.vue
@@ -143,7 +143,7 @@ export default {
                 ingredients: ingredientsData,
             }
 
-            Spells.addSpell(data)
+            Spells.addOne(data)
             .then(v => {
                 this.$emit('addSpell', v.data)
                 this.$refs["add_spell_modal"].hide()
diff --git a/client/src/components/spells/edit-spell-card.vue b/client/src/components/spells/edit-spell-card.vue
index fbf451f..0203b9e 100644
--- a/client/src/components/spells/edit-spell-card.vue
+++ b/client/src/components/spells/edit-spell-card.vue
@@ -182,7 +182,7 @@ export default {
                 ingredients: ingredientsData,
             }
 
-            Spells.updateSpell(this.spell.id, data)
+            Spells.updateOne(this.spell.id, data)
             .then(v => {
                 this.$emit('updateSpell', v.data)
             })
diff --git a/client/src/components/spells/spell-card.vue b/client/src/components/spells/spell-card.vue
index 78cb59d..27bbbae 100644
--- a/client/src/components/spells/spell-card.vue
+++ b/client/src/components/spells/spell-card.vue
@@ -93,7 +93,7 @@ export default {
             this.$emit('editSpell', spell)
         },
         deleteSpell(spell) {
-            Spells.deleteSpell(this.spell.id)
+            Spells.deleteOne(this.spell.id)
             .then(() => {
                 this.$emit('deleteSpell', spell)
             })
diff --git a/client/src/components/spells/spells-list.vue b/client/src/components/spells/spells-list.vue
index 74e0522..3c84d7b 100644
--- a/client/src/components/spells/spells-list.vue
+++ b/client/src/components/spells/spells-list.vue
@@ -4,11 +4,35 @@
             <i class="mad">add</i>
             <span>Ajouter un sort</span>
         </button>
-        <div v-masonry transition-duration=".5s" item-selector=".spell-card" class="row spells-list">
-            <spell-card v-masonry-tile class="spell-card" v-for="(spell) in spells" :key="spell.id" v-bind:spell="spell" @editSpell="editSpell" @deleteSpell="deleteSpell"/>
+        <div
+            v-if="computedSpells.length > 0"
+            class="spell-list-wrapper">
+            <div
+                class="row spells-list"
+                v-masonry
+                transition-duration=".5s"
+                item-selector=".spell-card">
+                    <spell-card
+                        class="spell-card"
+                        v-masonry-tile
+                        v-for="(spell) in computedSpells"
+                        :key="spell.id"
+                        :spell="spell"
+                        @editSpell="editSpell"
+                        @deleteSpell="deleteSpell" />
+            </div>
+
+            <edit-spell-card
+                v-if="Object.keys(current_edit_spell).length > 0"
+                :spell="current_edit_spell"
+                @editSpell="editSpell"
+                @updateSpell="updateSpell"/>
+
+            <add-spell-card
+                v-if="adding_spell"
+                @cancelAdd="cancelAdd"
+                @addSpell="addSpell"/>
         </div>
-        <edit-spell-card v-if="Object.keys(current_edit_spell).length > 0" v-bind:spell="current_edit_spell" @editSpell="editSpell" @updateSpell="updateSpell"/>
-        <add-spell-card v-if="adding_spell" @cancelAdd="cancelAdd" @addSpell="addSpell"/>
     </div>
 </template>
 
@@ -21,7 +45,7 @@ import AddSpellCard from "./add-spell-card"
 // API
 import { RepositoryFactory } from "~/api/repositories"
 const Spells = RepositoryFactory.get('spells')
-const Schools = RepositoryFactory.get('schools')
+// const Schools = RepositoryFactory.get('schools')
 
 export default {
     name: 'spellslist',
@@ -31,34 +55,67 @@ export default {
         'add-spell-card': AddSpellCard,
     },
     props: {
-        school_id: String
+        school_id: String,
     },
     data() {
         return {
-            loading: false,
             spells: [],
+            loading: false,
             current_edit_spell: {},
+            currentIndex: 1,
             adding_spell: false,
         }
     },
-    created() {
-        this.computeSpells()
+    computed: {
+        computedSpells() {
+            return this.spells
+        }
+    },
+    beforeMount() {
+        this.spells = this.computedSpells
+        this.getInitialSpells()
+    },
+    mounted() {
+        this.scroll()
     },
     methods: {
-        async fetchSpells() {
-            if (!this.school_id) {
-                const { data } = await Spells.getSpells()
-                return data
-            } else {
-                const { data } = await Schools.getSpellsFromSchool(this.school_id)
-                return data.spells
-            }
+        getInitialSpells() {
+            Spells.getPage(this.currentIndex)
+            .then(v => {
+                this.loading = true
+                let spells = this.computedSpells
+                spells.push(v.data)
+                this.spells = spells[0]
+            })
+            .then(() => {
+                this.currentIndex++
+                this.loading = false
+            })
+            .catch(err => {
+                console.log(err)
+            })
         },
-        async computeSpells() {
-            this.loading = true
-            const displaySpells = await this.fetchSpells()
-            this.loading = false
-            this.spells = displaySpells
+        scroll() {
+            window.onscroll = () => {
+                if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+                    Spells.getPage(this.currentIndex)
+                    .then(v => {
+                        this.loading = true
+                        let spells = this.computedSpells
+                        for (let i = 0; i < v.data.length; i++) {
+                            const element = v.data[i];
+                            spells.push(element)
+                        }
+                    })
+                    .then(() => {
+                        this.currentIndex++
+                        this.loading = false
+                    })
+                    .catch(err => {
+                        console.log(err)
+                    })
+                }
+            }
         },
         editSpell(e) {
             this.current_edit_spell = e;