diff --git a/client/package.json b/client/package.json
index 0e77466..73842ba 100644
--- a/client/package.json
+++ b/client/package.json
@@ -42,7 +42,7 @@
         "babel-eslint": "^10.0.3",
         "eslint": "^6.7.2",
         "eslint-plugin-vue": "^6.1.2",
-        "node-sass": "^4.13.1",
+        "node-sass": "^4.14.1",
         "sass-loader": "^8.0.2",
         "vue-router": "^3.1.6",
         "vue-template-compiler": "^2.6.11"
diff --git a/client/public/img/bg1.png b/client/public/img/bg1.png
index e0242a7..f3098b6 100644
Binary files a/client/public/img/bg1.png and b/client/public/img/bg1.png differ
diff --git a/client/public/index.html b/client/public/index.html
index 0d3707e..5cdaa4f 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -7,14 +7,12 @@
     <link rel="icon" href="<%= BASE_URL %>img/favicon.ico">
     <title>Spellsaurus</title>
     <link rel="stylesheet" href="<%= BASE_URL %>libs/style.css">
-    <script async defer src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>
+    <script async defer src="<%= BASE_URL %>libs/masonry-4.2.2.min"></script>
   </head>
   <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-
     <div id="srs"></div>
-
   </body>
 </html>
diff --git a/client/src/components/global/navbar/navbar.vue b/client/src/components/global/navbar/navbar.vue
index 8b8076d..92c493b 100644
--- a/client/src/components/global/navbar/navbar.vue
+++ b/client/src/components/global/navbar/navbar.vue
@@ -1,19 +1,17 @@
 <template>
-    <div class="sticky-top">
-        <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
-            <a class="navbar-brand font-display font-weight-700" href="#">Auracle</a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav mr-auto" v-if="links.length != 0">
-                    <li class="nav-item" v-for="(link, index) in links" :key="index">
-                        <router-link v-bind:to="link.url" class="nav-link">{{ link.text }}</router-link>
-                    </li>
-                </ul>
-            </div>
-        </nav>
-    </div>
+    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
+        <a class="navbar-brand font-display font-weight-700" href="#">Auracle</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav mr-auto" v-if="links.length != 0">
+                <li class="nav-item" v-for="(link, index) in links" :key="index">
+                    <router-link v-bind:to="link.url" class="nav-link">{{ link.text }}</router-link>
+                </li>
+            </ul>
+        </div>
+    </nav>
 </template>
 
 <script>
diff --git a/client/src/components/spells/spell-card.vue b/client/src/components/spells/spell-card.vue
index ec32fdc..d6cbd20 100644
--- a/client/src/components/spells/spell-card.vue
+++ b/client/src/components/spells/spell-card.vue
@@ -2,15 +2,28 @@
     <div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 grid-item grid-sizer">
         <div class="bg-white p-4 rounded text-dark border-primary shadow-sm" style="border-left:4px solid;">
             <div class="h3 font-display font-weight-bold text-wrap word-break line-height-100" :title="name">
-                <a class="text-decoration-none text-primary" href="/spell/XXX">{{name}}</a>
+                <a class="text-decoration-none text-primary" :href="'/spell/'+id">{{name}}</a>
             </div>
-            <div class="font-weight-700 text-muted d-inline-block">Niveau {{level}}</div>
-            <div class="text-muted d-inline-block">·
-                <span v-for="(school, index) in schools" :key="index">
-                    <span v-if="index!=0">,
-                </span>{{school.name}}</span>
+            <div>
+                <div class="font-weight-700 text-muted d-inline-block">Niveau {{level}}</div><span> · </span>
+                <div class="text-muted d-inline-block">
+                    <span v-for="(school,index) in schools" :key="index"><span v-if="index!=0">, </span><a :href="'/school/'+school.id">{{school.name}}</a></span>
+                </div>
             </div>
-            <div class="small text-muted font-italic">{{description|truncate(256,"…")}}</div>
+            <div v-if="charge!=0" class="small font-weight-bold">Charge {{charge}} tour(s)</div>
+            <div v-if="ingredients.length>0" class="small"><span class="font-weight-bold">Nécessite</span> <span v-for="(ingredient,index) in ingredients" :key="index"><span v-if="index!=0">, </span>{{ingredient.name}}</span></div>
+            <div class="small text-muted font-italic mt-2">{{description}}</div>
+            <div class="mt-2">
+                <div class="font-weight-bold d-inline-block">Coût {{cost}}</div>
+                <div v-if="variables.length>0" class="small d-inline-block">, où&nbsp;:</div>
+                <div class=small>
+                    <span v-for="(variable,index) in variables" :key="index"><span class="font-weight-bold"><span v-if="index!=0"><br></span>{{String.fromCharCode(120+index)}}</span> = {{variable.description}}</span>
+                </div>
+            </div>
+            <!----><div class="text-right">
+                <a class="h5 text-secondary mr-1" :href="'/spell/'+id+'/edit'"><i class="mad">edit</i></a>
+                <a class="h5 text-danger" :href="'/spell/'+id+'/delete'"><i class="mad">delete</i></a>
+            </div><!---->
         </div>
     </div>
 </template>
@@ -20,6 +33,7 @@
 export default {
     name: 'spell-card',
     props: {
+        id: Number,
         name: String,
         description: String,
         level: Number,
diff --git a/client/src/pages/index-page.vue b/client/src/pages/index-page.vue
index 1f59a47..6d87887 100644
--- a/client/src/pages/index-page.vue
+++ b/client/src/pages/index-page.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container-fluid" id="index-container">
     <section class="fullpage">
       <div class="px-4">
         <div class="display-2 text-dark mb-4 font-display" style="line-height:100%;font-weight:900;">"C'est magique, ta gueule."</div>
@@ -20,9 +20,12 @@ export default {
 
 <style lang="scss">
   .fullpage{
-    min-height: 100vh;
+    min-height: calc(100vh - 56px);
     display: flex;
     justify-content: center;
     align-items: center;
   }
+  #index-container{
+    background: url('/img/bg1.png') center center fixed repeat;
+  }
 </style>
\ No newline at end of file
diff --git a/client/src/pages/spells-page.vue b/client/src/pages/spells-page.vue
index c69eea2..2a7ecdc 100644
--- a/client/src/pages/spells-page.vue
+++ b/client/src/pages/spells-page.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="container-fluid p-4">
+  <div class="container-fluid p-4" id="spell-container">
+    <h1 class="display-3 font-display mb-4">Sortilèges</h1>
     <spell-list/>
   </div>
 </template>
@@ -15,4 +16,8 @@
   }
 </script>
 
-<style lang="scss"></style>
\ No newline at end of file
+<style lang="scss">
+  #spell-container{
+    background: url('/img/bg1.png') center center fixed repeat;
+  }
+</style>
\ No newline at end of file
