diff --git a/client/src/components/spells/spell-card.vue b/client/src/components/spells/spell-card.vue
index 6cda65d..3eee931 100644
--- a/client/src/components/spells/spell-card.vue
+++ b/client/src/components/spells/spell-card.vue
@@ -31,9 +31,11 @@
                     </div>
                 </div>
                 <div class="casting-ingredients">
-                    <p class="title">Nécessite</p>
+                    <p class="title">Nécessite :</p>
                     <p class="content">
-                        <span v-for="(ingredient, index) in ingredients" :key="index">{{ ingredient }}</span>
+                        <span v-for="(ingredient, index) in ingredients" :key="index">
+                            {{ ingredient.name }}<span v-if="index != Object.keys(ingredients).length - 1">, </span>
+                        </span>
                     </p>
                 </div>
             </section>
diff --git a/client/src/components/spells/spells-list.vue b/client/src/components/spells/spells-list.vue
index 8103ea9..715fa05 100644
--- a/client/src/components/spells/spells-list.vue
+++ b/client/src/components/spells/spells-list.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script>
+
 // Components
 import spellcard from "./spell-card"
-
 // API
 import { RepositoryFactory } from "../../../api/repositories"
 const spellsRepository = RepositoryFactory.get('spells')
@@ -35,7 +35,7 @@ export default {
             this.loading = true
             const displaySpells = await this.fetchSpells();
             this.loading = false
-            this.spells = displaySpells.splice(0,10)
+            this.spells = displaySpells.slice(0, 10)
         }
     }
 }