diff --git a/client/src/app.vue b/client/src/app.vue
index 74ff571..d5c5232 100644
--- a/client/src/app.vue
+++ b/client/src/app.vue
@@ -1,10 +1,10 @@
 <template>
-    <div id="srs">
-        <header>
-            <navbar/>
-        </header>
-        <router-view/>
-    </div>
+  <div id="srs">
+    <header>
+      <navbar/>
+    </header>
+    <router-view/>
+  </div>
 </template>
 
 <script>
@@ -18,8 +18,8 @@ export default {
 
 <style lang="scss" scoped>
 #srs {
-    padding-top: 50px;
-    min-height: 100vh;
-    background: url('./assets/images/bg1.png') center center fixed repeat;
+  padding-top: 50px;
+  min-height: 100vh;
+  background: url('./assets/images/bg1.png') center center fixed repeat;
 }
 </style>
\ No newline at end of file
diff --git a/client/src/pages/index-page.vue b/client/src/pages/index-page.vue
index 0cb7a6b..d6b6e47 100644
--- a/client/src/pages/index-page.vue
+++ b/client/src/pages/index-page.vue
@@ -1,41 +1,43 @@
 <template>
-    <div class="container-fluid">
-        <section class="d-flex justify-content-center align-items-center">
-            <main class="px-4">
-                <h1 class="title text-dark mb-4 font-display font-weight-black line-height-100">"C'est magique, ta gueule."</h1>
-                <div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
-                <hr class="w-50">
-                <div class="lead"><span class="font-display font-weight-bold">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.</div>
-            </main>
-        </section>
-    </div>
+  <div class="container-fluid">
+    <section class="d-flex justify-content-center align-items-center">
+      <main class="px-4">
+        <h1 class="title text-dark mb-4 font-display font-weight-black line-height-100">"C'est magique, ta gueule."</h1>
+        <div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
+        <hr class="w-50">
+        <div class="lead">
+          <span class="font-display font-weight-bold">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.
+        </div>
+      </main>
+    </section>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'index-page',
+  name: 'index-page',
 }
 </script>
 
 <style lang="scss" scoped>
 section {
-    min-height: calc(100vh - 56px);
-    main {
-        width: 1000px;
-        .title {
-            color: $white;
-            font-size: 64px;
-            text-align: center;
-        }
+  min-height: calc(100vh - 56px);
+  main {
+    width: 1000px;
+    .title {
+      color: $white;
+      font-size: 64px;
+      text-align: center;
     }
+  }
 }
 @media only screen and (max-width: $bp-md) {
-    section {
-        main {
-            .title {
-                font-size: 48px;
-            }
-        }
+  section {
+    main {
+      .title {
+        font-size: 48px;
+      }
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/client/src/pages/schools/schools-page.vue b/client/src/pages/schools/schools-page.vue
index 54adce7..7cdfb05 100644
--- a/client/src/pages/schools/schools-page.vue
+++ b/client/src/pages/schools/schools-page.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="container-fluid p-4" id="spell-container">
-        <h1 class="display-3 font-display mb-3">Écoles</h1>
-    </div>
+  <div class="container-fluid p-4" id="spell-container">
+    <h1 class="display-3 font-display mb-3">Écoles</h1>
+  </div>
 </template>
 
 <script>
diff --git a/client/src/pages/schools/single-school-page.vue b/client/src/pages/schools/single-school-page.vue
index 8c5ad37..d9499eb 100644
--- a/client/src/pages/schools/single-school-page.vue
+++ b/client/src/pages/schools/single-school-page.vue
@@ -7,42 +7,40 @@
 </template>
 
 <script>
-import SpellsList from "~/components/spells/spells-list"
-
 // API
-import { RepositoryFactory } from "~/api/repositories"
-const Schools = RepositoryFactory.get('schools')
+import { RepositoryFactory } from "~/api/repositories";
+const Schools = RepositoryFactory.get('schools');
+
+import SpellsList from "~/components/spells/spells-list";
 
 export default {
   name: 'single-school-page',
-  metaInfo: {
-    titleTemplate: '%s - Maîtrise I'
+  metaInfo() {
+    return {
+      titleTemplate: `%s - ${this.school.name}`,
+    }
   },
   components: {
     'spell-list': SpellsList,
   },
   data() {
     return {
-      loading: false,
+      id: this.$route.params.id,
       school: {},
-      id: this.$route.params.id
+      errors: {
+        loading: "",
+      }
     }
   },
   created() {
-    this.computeSchool();
+    Schools.getOne(this.id)
+      .then(v => {
+        this.school = v.data;
+      })
+      .catch(err => {
+        console.log(err);
+      });
   },
-  methods: {
-    async fetchSchool(id) {
-      const { data } = await Schools.getOne(id);
-      return data;
-    },
-    async computeSchool() {
-      this.loading = true;
-      const displaySchool = await this.fetchSchool(this.id);
-      this.loading = false;
-      this.school = displaySchool;
-    },
-  }
 }
 </script>
 
diff --git a/client/src/pages/spells/single-spell-page.vue b/client/src/pages/spells/single-spell-page.vue
index 1b9d50a..0461c22 100644
--- a/client/src/pages/spells/single-spell-page.vue
+++ b/client/src/pages/spells/single-spell-page.vue
@@ -1,14 +1,38 @@
 <template>
   <div class="container-fluid p-4" id="spell-container">
-    <h1 class="display-3 font-display mb-3">Sortilège I</h1>
-  </div>
+    <h1 class="display-3 font-display mb-3">{{ spell.name }}</h1>
+    <p>{{ spell.description }}</p>  </div>
 </template>
 
 <script>
+// API
+import { RepositoryFactory } from "~/api/repositories";
+const Spells = RepositoryFactory.get('spells');
+
 export default {
   name: 'single-spell-page',
-  metaInfo: {
-    titleTemplate: '%s - Sortilège I'
+  metaInfo() {
+    return {
+      titleTemplate: `%s - ${this.spell.name}`,
+    }
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      spell: {},
+      errors: {
+        loading: "",
+      }
+    }
+  },
+  created() {
+    Spells.getOne(this.id)
+      .then(v => {
+        this.spell = v.data;
+      })
+      .catch(err => {
+        console.log(err);
+      });
   },
 }
 </script>
diff --git a/client/src/pages/timelines/timeline-page.vue b/client/src/pages/timelines/timeline-page.vue
index 381c8af..14f3295 100644
--- a/client/src/pages/timelines/timeline-page.vue
+++ b/client/src/pages/timelines/timeline-page.vue
@@ -1,15 +1,21 @@
 <template>
-    <div class="container-fluid p-4" id="spell-container">
-        <h1 class="display-3 font-display mb-3">Chronologie</h1>
-    </div>
+  <div class="container-fluid p-4" id="spell-container">
+    <h1 class="display-3 font-display mb-3">Chronologie</h1>
+    <timeline/>
+  </div>
 </template>
 
 <script>
+import Timeline from "~/components/timeline/timeline"
+
 export default {
   name: 'timeline-page',
   metaInfo: {
     titleTemplate: '%s - Âges'
   },
+  components: {
+    'timeline': Timeline
+  }
 }
 </script>
 
diff --git a/client/src/pages/user/profile-page.vue b/client/src/pages/user/profile-page.vue
index 9a0e666..74c45e8 100644
--- a/client/src/pages/user/profile-page.vue
+++ b/client/src/pages/user/profile-page.vue
@@ -16,6 +16,9 @@
 
 export default {
   name: 'profile-page',
+  metaInfo: {
+    titleTemplate: '%s - Profil'
+  },
   data() {
     return {
     }
@@ -36,9 +39,6 @@ export default {
       return new Intl.DateTimeFormat("fr", date_options).format(raw_date);
     }
   },
-  metaInfo: {
-    titleTemplate: '%s - Profil'
-  }
 }
 </script>