diff --git a/client/public/index.html b/client/public/index.html
index ee262ce..544c44a 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -7,6 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>img/favicon.ico">
     <title>Spellsaurus</title>
     <link rel="stylesheet" href="<%= BASE_URL %>libs/style.css">
+    <script src="<%= BASE_URL %>libs/clipboard.min.js"></script>
   </head>
   <body>
     <noscript>
diff --git a/client/public/libs/style.css b/client/public/libs/style.css
index 5eb19d0..4d449f7 100644
--- a/client/public/libs/style.css
+++ b/client/public/libs/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap&subset=cyrillic,latin-ext');
+@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=cyrillic,latin-ext');/*&display=swap*/
 @font-face {
   font-family: "stgeorge";
   src: url("/public/resources/stgeorge.woff2") format("woff2");
@@ -44,7 +44,7 @@
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
-    src: url(https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+    src: url('/libs/material-design-icons.woff2') format('woff2');
 }
 .mad{
     font-family: 'Material Icons';
@@ -63,4 +63,4 @@
 }
 body{
     background: url('/img/bg1.png') center center fixed repeat;
-}
\ No newline at end of file
+}
diff --git a/client/src/components/spells/spell-card.vue b/client/src/components/spells/spell-card.vue
index 49e8458..be528cd 100644
--- a/client/src/components/spells/spell-card.vue
+++ b/client/src/components/spells/spell-card.vue
@@ -2,14 +2,14 @@
     <div
         :class="main_school"
         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/'+id">{{name}}</a>
+        <div class="spellcard bg-white p-4 rounded text-dark shadow" style="border-left-width:4px;border-left-style:solid;">
+            <div class="h3 font-display font-weight-bold text-wrap word-break" :title="name" style="line-height:100%;">
+                <a class="text-decoration-none" :href="'/spell/'+id">{{name}}</a>
             </div>
             <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>
+                    <span v-for="(school,index) in schools" :key="index"><span v-if="index!=0">, </span><a :href="'/school/'+school.id" class="text-secondary">{{school.name}}</a></span>
                 </div>
             </div>
             <div v-if="charge!=0" class="small font-weight-bold">Charge {{charge}} tour(s)</div>
@@ -61,12 +61,36 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    .spell-card {
-        &.lumomancie {
-            .border-primary {
-                border-left-color: #99dada !important;
-                color: #99dada;
-            }
-        }
+  .spell-card {
+    @mixin colorschool($sname,$scolor) {
+      &.#{$sname} {
+        .spellcard { border-left-color: $scolor; }
+        .h3>a { color: $scolor; }
+      }
     }
+    @include colorschool(lumomancie,#babaa4);
+    @include colorschool(vitamancie,#57ab6e);
+    @include colorschool(obstrumancie,#bd4a66);
+    @include colorschool(tenebromancie,#404842);
+    @include colorschool(necromancie,#5d4777);
+    @include colorschool(morbomancie,#d8733d);
+    @include colorschool(pyromancie,#b6362a);
+    @include colorschool(hydromancie,#3f68c7);
+    @include colorschool(electromancie,#cd9731);
+    @include colorschool(terramancie,#7e5540);
+    @include colorschool(caelomancie,#a8a8a8);
+    @include colorschool(légimancie,#5dbabd);
+    @include colorschool(illusiomancie,#9f63a1);
+    @include colorschool(cruciomancie,#252451);
+    @include colorschool(chronomancie,#79896a);
+    @include colorschool(spatiomancie,#2d4776);
+    @include colorschool(kénomancie,#101010);
+    @include colorschool(lutomancie,#4e2827);
+    @include colorschool(échomancie,#6d9fd1);
+    @include colorschool(protomancie,#4f5751);
+    @include colorschool(rebumancie,#8e7245);
+    @include colorschool(vocamancie,#247864);
+    @include colorschool(somamancie,#976c67);
+    @include colorschool(antimancie,#ad95c1);
+  }
 </style>
\ No newline at end of file
diff --git a/client/src/components/spells/spells-list.vue b/client/src/components/spells/spells-list.vue
index 469d78f..6bf2a3a 100644
--- a/client/src/components/spells/spells-list.vue
+++ b/client/src/components/spells/spells-list.vue
@@ -38,7 +38,7 @@ export default {
             this.loading = true
             const displaySpells = await this.fetchSpells();
             this.loading = false
-            this.spells = displaySpells.slice(0,10)
+            this.spells = displaySpells
         }
     }
 }
diff --git a/client/src/pages/world-page.vue b/client/src/pages/world-page.vue
index 0c8b2d1..79d6d75 100644
--- a/client/src/pages/world-page.vue
+++ b/client/src/pages/world-page.vue
@@ -1,7 +1,67 @@
 <template>
-    <section class="world-page">
-
-    </section>
+  <section class="world-page">
+    <div class="container-fluid">
+      <div class="p-4">
+        <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#spell_show_edit_modal">Spell show/edit modal</button>-->
+        <div class="" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="spell_show_edit_modal" aria-hidden="true">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <div class="h1 modal-title font-display font-weight-bold" id="spell_show_edit_modal"><div class="line-height-100">Sort #00069420</div></div>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
+                <form>
+                  <div class="form-group">
+                    <label for="spell_name" class="font-weight-bold col-form-label">Nom&nbsp;:</label>
+                    <input type="text" class="form-control" name="spell_name" id="spell_name" placeholder="(256 caractères max.)">
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_level" class="font-weight-bold col-form-label">Niveau&nbsp;:</label>
+                    <input type="number" class="form-control" name="spell_level" id="spell_level" min="0" max="100" step="1" placeholder="(Nombre entier de 0 à 100)">
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_schools" class="font-weight-bold col-form-label">École(s)&nbsp;:</label>
+                    <select class="form-control" id="spell_schools" name="spell_schools" multiple>
+                      <option value="1">Lumomancie</option>
+                      <option value="2">Vitamancie</option>
+                    </select>
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_charge" class="font-weight-bold col-form-label">Charge&nbsp;:</label>
+                    <input type="number" class="form-control" name="spell_charge" id="spell_charge" min="0" max="100" step="1" placeholder="(Nombre entier de 0 à 100)">
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_ingredients" class="font-weight-bold col-form-label">Ingrédients&nbsp;:</label>
+                    <textarea class="form-control" name="spell_ingredients" id="spell_ingredients" placeholder="(1024 caractères max.)"></textarea>
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_description" class="font-weight-bold col-form-label">Description&nbsp;:</label>
+                    <textarea class="form-control" name="spell_description" id="spell_description" placeholder="(2048 caractères max.)"></textarea>
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_cost" class="font-weight-bold col-form-label">Coût&nbsp;:</label>
+                    <input type="text" class="form-control" name="spell_cost" id="spell_cost" placeholder="(32 caractères max.)">
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_variables" class="font-weight-bold col-form-label">Variables&nbsp;:</label>
+                    <textarea class="form-control" name="spell_variables" id="spell_variables" placeholder="(1024 caractères max., 1 variable par ligne)"></textarea>
+                  </div>
+                </form>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
+                <button type="button" class="btn btn-primary">Enregistrer</button>
+                <button type="button" class="btn btn-danger">Supprimer</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script>
@@ -10,6 +70,5 @@ export default {
 }
 </script>
 
-<style>
-
-</style>
\ No newline at end of file
+<style lang="scss">
+.world-page{position:relative;}</style>
\ No newline at end of file
