diff --git a/api/repositories/user-repository.js b/api/repositories/user-repository.js
index 88c7046..bbdeb0f 100644
--- a/api/repositories/user-repository.js
+++ b/api/repositories/user-repository.js
@@ -31,7 +31,7 @@ class UserRepository {
             })
             .catch(() => {
                 reject({
-                    "message": "Database error, couldn't get all users.",
+                    "message": "Erreur de base de données, les utilisateurs n'ont pas pu être récupérés.",
                     "code": 500
                 })
             })
@@ -48,7 +48,7 @@ class UserRepository {
             })
             .catch(err => {
                 reject({
-                    "message": "User with this UUID was not found.",
+                    "message": "L'utilisateur avec cet UUID n'a pas été trouvé.",
                     "code": 404
                 })
             })
@@ -65,7 +65,7 @@ class UserRepository {
             })
             .catch(() => {
                 reject({
-                    "message": "User with this email was not found.",
+                    "message": "L'utilisateur avec cet email n'a pas été trouvé.",
                     "code": 404
                 })
             })
@@ -77,17 +77,17 @@ class UserRepository {
             // Checks if body exists and if the model fits, and throws errors if it doesn't
             if (isEmptyObject(u)) {
                 reject({
-                    "message":  "Request body cannot be empty.",
+                    "message":  "Le corps de requête ne peut être vide.",
                     "code": 403
                 })
             } else if (!v.validate(u, UserValidation).valid) {
                 reject({
-                    "message":  "Schema is not valid - " + v.validate(u, UserValidation).errors,
+                    "message":  "Structure de la requête invalide - " + v.validate(u, UserValidation).errors,
                     "code": 403
                 })
             } else if (isXSSAttempt(u.name) || isXSSAttempt(u.password) || isXSSAttempt(u.mail)) {
                 reject({
-                    "message": "Injection attempt detected, aborting the request.",
+                    "message": "Essai d'injection détecté, avortement de la requête.",
                     "code": 403
                 })
             } else {
@@ -115,13 +115,14 @@ class UserRepository {
                     })
                     .then(newUser => {
                         resolve({
-                            "message": "Account successfully created !",
+                            "message": `Compte utilisateur #${newUser.id} créé avec succès.`,
+                            "code": 201,
                             "user": newUser,
                         })
                     })
                     .catch(err => {
                         resolve({
-                            "message": "An error has occured while creating your account.",
+                            "message": "Une erreur s'est produite en créant votre compte. Veuillez réessayer ultérieurement ou contactez l'administrateur.",
                             "code": 500,
                         })
                     })
@@ -145,12 +146,14 @@ class UserRepository {
 
                 if (match) {
                     resolve({
-                        "message": "User successfully logged in !",
+                        "message": `L'utilisateur #${fetchedUser.id} s'est connecté.`,
+                        "code": 200,
                         "user": fetchedUser,
                     })
                 } else {
                     reject({
-                        "message": "Les informations de connexion sont erronées.",
+                        "message": "Les informations de connexions sont erronées.",
+                        "code": 400,
                     })
                 }
             })
@@ -163,18 +166,34 @@ class UserRepository {
     // Check if one user already has that email
     checkIfEmailAvailable(mail) {
         return new Promise((resolve, reject) => {
+
+            if (!this.validateEmail(mail)) {
+                reject({
+                    "message": "La requête n'est pas un email valide.",
+                    "code": 400,
+                })
+            }
+
             this.getOneByEmail(mail, false)
             .then(() => {
                 reject({
-                    "message": "L'email est déjà utilisé par un autre utilisateur.",
-                    "code": 403
+                    "message": "Cet email est déjà lié à un compte.",
+                    "code": 409
                 })
             })
             .catch(() => {
-                resolve(true)
+                resolve({
+                  "message": "Cet email est disponible.",
+                  "code": 200
+              })
             })
         })
     }
+
+    validateEmail(email) {
+        const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test(String(email).toLowerCase());
+    }
 }
 
 module.exports = UserRepository
\ No newline at end of file
diff --git a/api/routes/users.js b/api/routes/users.js
index 6219953..8e0ac19 100644
--- a/api/routes/users.js
+++ b/api/routes/users.js
@@ -17,7 +17,6 @@ const Users = new UserRepository();
 const getUsers = () => {
     return Users.getAll()
     .catch(err => {
-        console.log(err)
         throw err
     })
 }
@@ -38,11 +37,10 @@ router.get('/', async (req, res) => {
 })
 
 
-// GET ONE FORM UUID ------------------
+// GET ONE FROM UUID ------------------
 const getUserByUUID = (uuid) => {
     return Users.getOneByUUID(uuid)
     .catch(err => {
-        console.log(err)
         throw err
     })
 }
@@ -63,11 +61,34 @@ router.get('/:uuid/', async (req, res) => {
 })
 
 
+// CHECK IF MAIL IS AVAILABLE ------------------
+const checkIfEmailAvailable = (mail) => {
+  return Users.checkIfEmailAvailable(mail)
+  .catch(err => {
+      throw err
+  })
+}
+router.get('/available/:mail/', async (req, res) => {
+  checkIfEmailAvailable(req.params.mail)
+  .then(v => {
+      res.setHeader('Content-Type', 'application/json;charset=utf-8')
+      res.end(JSON.stringify(v))
+  })
+  .catch(err => {
+      res.status(err.code).send(JSON.stringify(
+          {
+              "error": err.message,
+              "code": err.code
+          })
+      )
+  })
+})
+
+
 // LOG A USER ------------------
 const logUser = (mail, password) => {
     return Users.logUser(mail, password)
     .catch(err => {
-        console.log(err)
         throw err
     })
 }
diff --git a/client/src/api/usersRepository.js b/client/src/api/usersRepository.js
index 2e041a9..a3a9708 100644
--- a/client/src/api/usersRepository.js
+++ b/client/src/api/usersRepository.js
@@ -3,10 +3,16 @@ import api from './api'
 const resource = "/users"
 
 export default {
-    login(data) {
-        return api.post(`${resource}/login`, data)
-    },
-    register(data) {
-        return api.post(`${resource}`, data)
-    },
+  getOneFromUUID(uuid) {
+    return api.get(`${resource}/${uuid}`,)
+  },
+  checkEmailAvailable(mail) {
+    return api.get(`${resource}/available/${mail}`)
+  },
+  login(data) {
+    return api.post(`${resource}/login`, data)
+  },
+  register(data) {
+    return api.post(`${resource}`, data)
+  },
 }
\ No newline at end of file
diff --git a/client/src/components/global/navbar/navbar.vue b/client/src/components/global/navbar/navbar.vue
index aac51ae..59a6df3 100644
--- a/client/src/components/global/navbar/navbar.vue
+++ b/client/src/components/global/navbar/navbar.vue
@@ -1,60 +1,61 @@
 <template>
-    <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
-        <router-link :to="'/'" class="navbar-brand font-display font-weight-700">Auracle</router-link>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbar">
-            <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 :to="link.url" class="nav-link">{{ link.text }}</router-link>
-                </li>
-            </ul>
-            <div v-if="user" class="navbar-nav">
-                <router-link :to="'/profil'" class="nav-link">{{ user.name }}</router-link>
-                <div @click="logoutUser()" class="nav-link">Deconnexion</div>
-            </div>
-            <div v-else class="navbar-nav">
-                <router-link :to="'/connexion'" class="nav-link">Connexion</router-link>
-            </div>
-        </div>
-    </nav>
+  <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
+    <router-link :to="'/'" class="navbar-brand font-display font-weight-700">Auracle</router-link>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbar">
+      <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 :to="link.url" class="nav-link">{{ link.text }}</router-link>
+        </li>
+      </ul>
+      <div v-if="user" class="navbar-nav">
+        <router-link :to="'/profil'" class="nav-link">{{ user.name }}</router-link>
+        <div @click="logoutUser()" class="nav-link">Deconnexion</div>
+      </div>
+      <div v-else class="navbar-nav">
+        <router-link :to="'/connexion'" class="nav-link">Connexion</router-link>
+      </div>
+    </div>
+  </nav>
 </template>
 
 <script>
-    export default {
-        name: 'navbar',
-        data() {
-            return {
-                links: [
-                    {
-                        text: 'Sortilèges',
-                        url: '/sorts',
-                    },
-                    {
-                        text: 'Écoles',
-                        url: '/ecoles',
-                    },
-                    {
-                        text: 'Chronologie',
-                        url: '/ages',
-                    }
-                ]
-            }
+
+export default {
+  name: 'navbar',
+  data() {
+    return {
+      links: [
+        {
+          text: 'Sortilèges',
+          url: '/sorts',
         },
-        computed: {
-            user() {
-                return this.$store.state.user
-            }
+        {
+          text: 'Écoles',
+          url: '/ecoles',
         },
-        methods: {
-            logoutUser() {
-                this.$cookies.remove('U_')
-                this.$store.commit('logout')
-                this.$router.push('/')
-            }
+        {
+          text: 'Chronologie',
+          url: '/ages',
         }
+      ]
     }
+  },
+  computed: {
+    user() {
+      return this.$store.getters.getUserProfile
+    }
+  },
+  methods: {
+    logoutUser() {
+      this.$store.dispatch('user_logout');
+      this.$router.push('/');
+    }
+  }
+}
+
 </script>
 
 <style lang="scss"></style>
diff --git a/client/src/components/spells/edit-spell-card.vue b/client/src/components/spells/edit-spell-card.vue
index 0a3d53d..9806c20 100644
--- a/client/src/components/spells/edit-spell-card.vue
+++ b/client/src/components/spells/edit-spell-card.vue
@@ -61,6 +61,7 @@
         
         <template v-slot:modal-footer="{ close }">
             <button type="button" class="btn btn-danger" data-dismiss="modal" @click="close()">Fermer</button>
+            <!-- <input type="button" class="btn btn-success" value="Enregistrer comme nouveau" @click="cloneSpell()"> -->
             <input type="submit" class="btn btn-primary" value="Enregistrer" form="update-spell">
         </template>
     </b-modal>
diff --git a/client/src/components/spells/spell-card.vue b/client/src/components/spells/spell-card.vue
index 6af67df..8ddec33 100644
--- a/client/src/components/spells/spell-card.vue
+++ b/client/src/components/spells/spell-card.vue
@@ -76,75 +76,77 @@ import { RepositoryFactory } from "~/api/repositories"
 const Spells = RepositoryFactory.get('spells')
 
 export default {
-    name: 'spell-card',
-    props: {
-        spell: Object,
-    },
-    data() {
-        return {
-            main_school: this.spell.schools[0].name,
-        }
-    },
-    created() {
-        this.main_school = this.main_school.toLowerCase()
-    },
-    computed: {
-        user() {
-            return this.$store.state.user
-        }
-    },
-    methods: {
-        editSpell(spell) {
-            this.$emit('editSpell', spell)
-        },
-        deleteSpell(spell) {
-            Spells.deleteOne(this.spell.id)
-            .then(() => {
-                this.$emit('deleteSpell', spell)
-            })
-        }
+  name: 'spell-card',
+  props: {
+    spell: Object,
+  },
+  data() {
+    return {
+      main_school: this.spell.schools[0].name,
+    }
+  },
+  created() {
+    this.main_school = this.main_school.toLowerCase()
+  },
+  computed: {
+    user() {
+      return this.$store.getters.getUserProfile
+    }
+  },
+  methods: {
+    editSpell(spell) {
+      this.$emit('editSpell', spell)
     },
+    deleteSpell(spell) {
+      Spells.deleteOne(this.spell.id)
+      .then(() => {
+          this.$emit('deleteSpell', spell)
+      })
+    }
+  },
 }
 
 </script>
 
 <style lang="scss" scoped>
-  .spell-card {
-    footer {
-      a {
-        cursor: pointer;
-      }
+
+.spell-card {
+  footer {
+    a {
+      cursor: pointer;
     }
-    @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(sidéromancie,#58697a);
-    @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);
   }
+  @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(sidéromancie,#58697a);
+  @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/main.js b/client/src/main.js
index d92181e..e90e995 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,17 +1,18 @@
 // Core
 import Vue from 'vue'
-import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import App from './app.vue'
 
+// Environment
+require('dotenv').config()
+
+import store from './store'
+
 import Globals from './global-components.js'
 Globals.forEach(component => {
     Vue.component(component.name, component)
 });
 
-// Environment
-require('dotenv').config()
-
 // Cookies
 import VueCookies from 'vue-cookies'
 Vue.use(VueCookies)
@@ -55,38 +56,6 @@ Vue.filter('truncate', filter)
 import router from './routes'
 Vue.use(VueRouter)
 
-// Store
-Vue.use(Vuex)
-let user = Vue.$cookies.get('U_')
-
-const store = new Vuex.Store({
-    state: user ?
-        { status: { loggedIn: true }, user }
-        : { status: { loggedIn: false }, user: null },
-    mutations: {
-        loginSucceed (state, user) {
-            state.status.loggedIn = true
-            state.user = user
-        },
-        loginFail (state) {
-            state.status.loggedIn = false
-            state.user = null
-        },
-        logout(state) {
-            state.status.loggedIn = false;
-            state.user = null;
-        },
-        registerSucceed (state, user) {
-            state.status.loggedIn = true
-            state.user = user
-        },
-        registerFail (state) {
-            state.status.loggedIn = false
-            state.user = null
-        },
-    }
-})
-
 // Mount Vue
 const app = new Vue({
     render: h => h(App),
diff --git a/client/src/pages/spells/single-spell-page.vue b/client/src/pages/spells/single-spell-page.vue
index a6af9a5..dbaf519 100644
--- a/client/src/pages/spells/single-spell-page.vue
+++ b/client/src/pages/spells/single-spell-page.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="container-fluid p-4" id="spell-container">
-    <h1 class="display-3 font-display mb-3">Sortilège</h1>
-  </div>
+    <div class="container-fluid p-4" id="spell-container">
+        <h1 class="display-3 font-display mb-3">Sortilège</h1>
+    </div>
 </template>
 
 <script>
-  export default {
+export default {
 
-  }
+}
 </script>
 
 <style>
diff --git a/client/src/pages/timelines/timeline-page.vue b/client/src/pages/timelines/timeline-page.vue
index f940b66..34a2f62 100644
--- a/client/src/pages/timelines/timeline-page.vue
+++ b/client/src/pages/timelines/timeline-page.vue
@@ -1,18 +1,12 @@
 <template>
-  <div class="container-fluid p-4" id="spell-container">
-    <h1 class="display-3 font-display mb-3">Chronologie</h1>
-    <timeline/>
-  </div>
+    <div class="container-fluid p-4" id="spell-container">
+        <h1 class="display-3 font-display mb-3">Chronologie</h1>
+    </div>
 </template>
 
 <script>
-import Timeline from '~/components/timeline/timeline'
-
 export default {
-  name: 'timeline-page',
-  components: {
-    'timeline': Timeline,
-  }
+    name: 'timeline-page',
 }
 </script>
 
diff --git a/client/src/pages/user/login-page.vue b/client/src/pages/user/login-page.vue
index 5317808..ec406c1 100644
--- a/client/src/pages/user/login-page.vue
+++ b/client/src/pages/user/login-page.vue
@@ -1,92 +1,176 @@
 <template>
-    <div class="container-fluid">
-        <section class="d-flex justify-content-center align-items-center">
-            <main>
-                <div class="title font-display mb-3">Connexion</div>
-                <form @submit="logUser">
-                    <div class="form-group">
-                        <label for="email">Addresse mail</label>
-                        <input
-                            v-model="email"
-                            type="email"
-                            id="email"
-                            class="form-control"
-                            placeholder="john.doe@gmail.com"
-                            autocomplete="email">
-                        <small class="form-text text-muted">Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion.</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="password">Mot de passe</label>
-                        <input
-                            v-model="password"
-                            type="password"
-                            id="password"
-                            class="form-control"
-                            autocomplete="current-password">
-                    </div>
-                    <button type="submit" class="btn btn-primary">Connexion</button>
-                    <router-link :to="'/inscription'" class="btn btn-dark">Inscription</router-link>
-                    <small class="form-text text-muted">Vous avez oublié votre mot de passe ? Cliquez-ici pour le changer !</small>
-                </form>
-            </main>
-        </section>
-    </div>
+  <div class="container-fluid">
+    <section class="d-flex justify-content-center align-items-center">
+      <main>
+        <div class="title font-display mb-3">Connexion</div>
+
+        <form @submit="logUser">
+
+          <div class="form-group">
+            <label for="email">Addresse mail</label>
+            <input
+              v-model="email"
+              type="email"
+              id="email"
+              class="form-control"
+              :class="{
+                'is-invalid': errors.email || errors.login,
+                'is-valid': submitted && !errors.email }"
+              placeholder="john.doe@gmail.com"
+              autocomplete="email">
+
+            <small
+              v-if="!errors.email"
+              class="form-text text-muted"
+            >
+              Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion.
+            </small>
+            <small
+              v-if="errors.email"
+              class="form-text text-danger"
+            >
+              {{ errors.email }}
+            </small>
+          </div>
+
+          <div class="form-group">
+            <label for="password">Mot de passe</label>
+            <input
+              v-model="password"
+              type="password"
+              id="password"
+              class="form-control"
+              :class="{ 'is-invalid': errors.password || errors.login }"
+              autocomplete="current-password">
+            <small
+              v-if="!errors.password"
+              class="form-text text-muted"
+            >
+              Nous vous conseillons d'utiliser un mot de passe unique pour cette application seulement.
+            </small>
+            <small
+              v-if="errors.password"
+              class="form-text text-danger"
+            >
+              {{ errors.password }}
+            </small>
+          </div>
+
+          <div class="form-check">
+            <input
+              type="checkbox"
+              v-model="remember_me"
+              id="remember-me"
+              class="form-check-input">
+            <label
+              class="form-check-label"
+              for="remember-me"
+            >
+              Rester connecté
+            </label>
+          </div>
+
+          <div class="form-group">
+            <small v-if="errors.login" class="text-danger">{{ errors.login }}</small>
+          </div>
+
+          <button type="submit" class="btn btn-primary">Connexion</button>
+          <router-link :to="'/inscription'" class="btn btn-dark">Inscription</router-link>
+          <small class="form-text text-muted">Mot de passe oublié ? <a href="#">Vous pouvez le changer ici !</a></small>
+
+        </form>
+      </main>
+    </section>
+  </div>
 </template>
 
 <script>
-// API
-import { RepositoryFactory } from "~/api/repositories"
-const Users = RepositoryFactory.get('users')
 
 export default {
     name: 'login-page',
     data() {
-        return {
-            email: "",
-            password: "",
-            submitted: false,
-            errors: {
-                login: ""
-            }
+      return {
+        email: "",
+        password: "",
+        remember_me: false,
+        submitted: false,
+
+        errors: {
+          email: "",
+          password: "",
+          login: "",
         }
+      }
     },
     methods: {
-        async logUser(e) {
-            e.preventDefault()
+      async logUser(e) {
+        e.preventDefault();
 
-            Users.login({
-                "mail": this.email,
-                "password": this.password
-            })
-            .then(v => {
-                let user = v.data.user
-                this.$cookies.set("U_", user, 60 * 60 * 24 * 30)
-                this.$store.commit('loginSucceed', user)
-                this.$router.push('/profil')
-            })
-            .catch(() => {
-                this.$store.commit('loginFailed')
-            })
+        // Resets old errors if any
+        for (const o in this.errors) {
+          this.errors[o] = ""
         }
+        this.submitted = true;
+
+        let userInput = {
+          "mail": this.email,
+          "password": this.password
+        };
+
+        if (!userInput.mail) {
+          this.errors.email = "Vous devez renseigner une addresse mail."
+        }
+        if (!userInput.password) {
+          this.errors.password = "Vous devez renseigner un mot de passe."
+        }
+
+        // Stops the method if any errors exist
+        for (const o in this.errors) {
+          if (this.errors[o] != "") {
+            this.submitted = false;
+          }
+        }
+
+        if (this.submitted) {
+          this.$store.dispatch('user_login', userInput)
+            .then(() => {
+              this.$router.push('/profil')
+            })
+            .catch(err => {
+              if (err.status === 404) {
+                this.errors.email = err.data.error;
+              } else {
+                this.errors.login = "Une erreur inconnue est survenue, rééssayez plus tard.";
+              }
+            });
+        }
+      },
     }
 }
 </script>
 
 <style lang="scss" scoped>
+
 section {
-    min-height: calc(100vh - 56px);
-    main {
-        width: 600px;
-        .title {
-            font-size: 5rem;
-            font-weight: 700;
-            text-align: center;
-        }
-    }
-}
-@media only screen and (max-width: 600px) {
+  min-height: calc(100vh - 56px);
+  main {
+    width: 600px;
     .title {
-        font-size: 3.5rem;
+      font-size: 5rem;
+      font-weight: 700;
+      text-align: center;
     }
+  }
 }
+
+@media only screen and (max-width: 600px) {
+  section {
+    main {
+      .title {
+        font-size: 3.5rem;
+      }
+    }
+  }
+}
+
 </style>
\ No newline at end of file
diff --git a/client/src/pages/user/profile-page.vue b/client/src/pages/user/profile-page.vue
index 61d836c..be7234f 100644
--- a/client/src/pages/user/profile-page.vue
+++ b/client/src/pages/user/profile-page.vue
@@ -1,24 +1,40 @@
 <template>
-    <div class="container-fluid p-4" id="spell-container">
-        <div class="display-3 font-display mb-3">
-            <span class="username">{{ user.name }}</span>
-            <span v-if="user.verified" class="verified"><i class="mad">check_circle</i></span>
-        </div>
-    </div>
+  <div
+    v-if="user"
+    class="container-fluid p-4"
+    id="spell-container"
+  >
+    <h2 class="display-3 font-display mb-3">
+      <span class="username">{{ user.name }}</span>
+      <span
+        v-if="user.verified"
+        class="verified"
+      >
+        <i class="mad">check_circle</i>
+      </span>
+    </h2>
+
+  </div>
 </template>
 
 <script>
+
 export default {
-    name: 'profile-page',
-    computed: {
-        user() {
-            return this.$store.state.user
-        }
-    },
+  name: 'profile-page',
+  data() {
+    return {
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.getters.getUserProfile
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+
 .title {
     font-size: 5rem;
     font-weight: 700;
@@ -28,4 +44,5 @@ export default {
         font-size: 3.5rem;
     }
 }
+
 </style>
\ No newline at end of file
diff --git a/client/src/pages/user/register-page.vue b/client/src/pages/user/register-page.vue
index f55518c..e493d30 100644
--- a/client/src/pages/user/register-page.vue
+++ b/client/src/pages/user/register-page.vue
@@ -1,143 +1,193 @@
 <template>
-    <div class="container-fluid">
-        <section class="d-flex justify-content-center align-items-center">
-            <main>
-                <div class="title font-display mb-3">Inscription</div>
-                <form @submit="registerUser">
-                    <div class="form-group">
-                        <label for="email">Pseudo</label>
-                        <input
-                            v-model="name"
-                            :class="{
-                                'is-invalid': errors.name,
-                                'is-valid': submitted && !errors.name }"
-                            type="text"
-                            id="username"
-                            class="form-control"
-                            placeholder="John Doe"
-                            autocomplete="username">
-                        <small v-if="!errors.name" class="form-text text-muted">Vous pouvez changer votre pseudo à tout moment.</small>
-                        <small v-if="errors.name" class="text-danger">{{ errors.name }}</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="email">Addresse mail</label>
-                        <input
-                            v-model="email"
-                            :class="{
-                                'is-invalid': errors.email,
-                                'is-valid': submitted && !errors.email }"
-                            type="email"
-                            id="email"
-                            class="form-control"
-                            placeholder="john.doe@gmail.com"
-                            autocomplete="email">
-                        <small v-if="!errors.email" class="form-text text-muted">Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion.</small>
-                        <small v-if="errors.email" class="text-danger">{{ errors.email }}</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="password">Mot de passe</label>
-                        <input
-                            :class="{
-                                'is-invalid': errors.password,
-                                'is-valid': submitted && !errors.password }"
-                            v-model="password"
-                            type="password"
-                            id="password"
-                            class="form-control"
-                            autocomplete="password">
-                    </div>
-                    <div class="form-group">
-                        <label for="password_check">Confirmer le mot de passe</label>
-                        <input
-                            v-model="password_check"
-                            :class="{
-                                'is-invalid': errors.password_check || errors.password,
-                                'is-valid': submitted && !errors.password_check}"
-                            type="password"
-                            id="password_check"
-                            class="form-control"
-                            autocomplete="password-verification">
-                        <small v-if="!errors.password && !errors.password_check" class="form-text text-muted">Votre mot de passe doit idéalement contenir des symboles ainsi que des lettres et des chiffres.</small>
-                        <small v-if="errors.password" class="text-danger">{{ errors.password }}</small>
-                        <small v-if="errors.password_check" class="text-danger">{{ errors.password_check }}</small>
-                    </div>
-                    <button type="submit" class="btn btn-dark">Inscription</button>
-                </form>
-            </main>
-        </section>
-    </div>
+  <div class="container-fluid">
+    <section class="d-flex justify-content-center align-items-center">
+      <main>
+        <div class="title font-display mb-3">Inscription</div>
+        <form @submit="registerUser">
+
+          <div class="form-group">
+            <label for="email">Nom d'utilisateur</label>
+            <input
+              v-model="name"
+              :class="{
+                'is-invalid': errors.name,
+                'is-valid': submitted && !errors.name }"
+              type="text"
+              id="username"
+              class="form-control"
+              placeholder="John Doe"
+              autocomplete="username">
+            <small
+              v-if="!errors.name"
+              class="form-text text-muted"
+            >
+              Vous pouvez changer votre pseudo à tout moment.
+            </small>
+
+            <small
+              v-if="errors.name"
+              class="form-text text-danger"
+            >
+              {{ errors.name }}
+            </small>
+          </div>
+
+          <div class="form-group">
+            <label for="email">Adresse mail</label>
+            <input
+              v-model="email"
+              :class="{
+                'is-invalid': errors.email,
+                'is-valid': submitted && !errors.email }"
+              type="email"
+              id="email"
+              class="form-control"
+              placeholder="john.doe@gmail.com"
+              autocomplete="email">
+            <small
+              v-if="!errors.email"
+              class="form-text text-muted"
+            >
+              Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion.
+            </small>
+
+            <small
+              v-if="errors.email"
+              class="form-text text-danger"
+            >
+              {{ errors.email }}
+            </small>
+          </div>
+
+          <div class="form-group">
+            <label for="password">Mot de passe</label>
+            <input
+              :class="{
+                'is-invalid': errors.password,
+                'is-valid': submitted && !errors.password }"
+              v-model="password"
+              type="password"
+              id="password"
+              class="form-control"
+              autocomplete="password">
+          </div>
+
+          <div class="form-group">
+              <label for="password_check">Confirmer le mot de passe</label>
+              <input
+                v-model="password_check"
+                :class="{
+                    'is-invalid': errors.password_check || errors.password,
+                    'is-valid': submitted && !errors.password_check}"
+                type="password"
+                id="password_check"
+                class="form-control"
+                autocomplete="password-verification">
+              <small
+                v-if="!errors.password && !errors.password_check"
+                class="form-text text-muted"
+              >
+                Votre mot de passe doit idéalement contenir des symboles ainsi que des lettres et des chiffres.
+              </small>
+
+              <small
+                v-if="errors.password"
+                class="form-text text-danger"
+              >
+                {{ errors.password }}
+                </small>
+              <small
+                v-if="errors.password_check"
+                class="form-text text-danger"
+              >
+                {{ errors.password_check }}
+              </small>
+          </div>
+
+          <div class="form-group">
+            <small v-if="errors.register" class="text-danger">{{ errors.register }}</small>
+          </div>
+
+          <button type="submit" class="btn btn-dark">Inscription</button>
+        </form>
+      </main>
+    </section>
+  </div>
 </template>
 
 <script>
-// API
-import { RepositoryFactory } from "~/api/repositories"
-const Users = RepositoryFactory.get('users')
-
 export default {
-    name: 'register-page',
-    data() {
-        return {
-            name: "",
-            email: "",
-            password: "",
-            password_check: "",
-            submitted: false,
-            errors: {
-                name: "",
-                email: "",
-                password: "",
-                password_check: "",
-            },
-        }
-    },
-    methods: {
-        async registerUser(e) {
-            e.preventDefault()
-
-            // Resets old errors if any
-            for (const o in this.errors) {
-                this.errors[o] = ""
-            }
-            this.submitted = true
-
-            if (!this.name) {
-                this.errors.name = "Vous devez renseigner un pseudonyme."
-            }
-            if (!this.email) {
-                this.errors.email = "Vous devez renseigner une addresse mail."
-            }
-            if (!this.password) {
-                this.errors.password = "Vous devez renseigner un mot de passe."
-            }
-            if ((this.password.localeCompare(this.password_check)) != 0) {
-                this.errors.password_check = "Les mots de passe ne correspondent pas."
-            }
-
-            // Stops the method if any errors exist
-            for (const o in this.errors) {
-                if (this.errors[o]) {
-                    return true
-                }
-            }
-
-            Users.register({
-                "name": this.name,
-                "mail": this.email,
-                "password": this.password
-            })
-            .then(v => {
-                let user = v.data.user
-                this.$cookies.set("U_", user, 60 * 60 * 24 * 30)
-                this.$store.commit('registerSucceed', user)
-                this.$router.push('/profil')
-            })
-            .catch(err => {
-                let error = err.response.data.error
-                this.errors.email = error
-                this.$store.commit('registerFail')
-            })
-        }
+  name: 'register-page',
+  data() {
+    return {
+      name: "",
+      email: "",
+      password: "",
+      password_check: "",
+      submitted: false,
+      errors: {
+        name: "",
+        email: "",
+        password: "",
+        password_check: "",
+        register: "",
+      },
     }
+  },
+  methods: {
+    async registerUser(e) {
+      e.preventDefault();
+
+      // Resets old errors if any
+      for (const o in this.errors) {
+        this.errors[o] = ""
+      }
+      this.submitted = true;
+
+      let userInput = {
+        "name": this.name,
+        "mail": this.email,
+        "password": this.password
+      }
+
+      if (!userInput.name) {
+        this.errors.name = "Vous devez renseigner un pseudonyme."
+      }
+
+      if (!userInput.mail) {
+        this.errors.email = "Vous devez renseigner une addresse mail."
+      }
+
+      if (!userInput.password) {
+        this.errors.password = "Vous devez renseigner un mot de passe."
+      }
+
+      if ((userInput.password.localeCompare(this.password_check)) != 0) {
+        this.errors.password_check = "Les mots de passe ne correspondent pas."
+      }
+
+      // Stops the method if any errors exist
+      for (const o in this.errors) {
+        if (this.errors[o] != "") {
+          this.submitted = false;
+        }
+      }
+
+      if (this.submitted) {
+        this.$store.dispatch('user_register', userInput)
+          .then(() => {
+            this.$router.push('/');
+          })
+          .catch(err => {
+            if (err.status === 409) {
+              this.errors.email = err.data.error;
+            } else {
+              this.errors.register = "Une erreur inconnue est survenue, rééssayez plus tard.";
+            }
+          });
+      }
+    }
+  }
 }
 </script>
 
diff --git a/client/src/routes.js b/client/src/routes.js
index fa1f340..12668aa 100644
--- a/client/src/routes.js
+++ b/client/src/routes.js
@@ -1,6 +1,7 @@
-import Vue from 'vue'
 import VueRouter from 'vue-router'
 
+// import store from './store'
+
 // Pages
 import Index from "~/pages/index-page"
 
@@ -18,80 +19,84 @@ import Profile from "~/pages/user/profile-page"
 
 // Routes
 const routes = [
-    {
-        path: "*",
-        redirect: "/",
-    },
-    {
-        path: '/',
-        component: Index,
-    },
-    {
-        path: '/connexion',
-        component: Login,
-        meta: {
-            antiAuthGuard: true
-        }
-    },
-    {
-        path: '/inscription',
-        component: Register,
-        meta: {
-            antiAuthGuard: true
-        }
-    },
-    {
-        path: '/sorts',
-        component: Spells,
-    },
-    {
-        path: '/sorts/:id',
-        component: SpellSingle,
-        props: true,
-    },
-    {
-        path: '/ecoles',
-        component: Schools,
-    },
-    {
-        path: '/ecoles/:id',
-        component: SchoolSingle,
-        props: true,
-    },
-    {
-        path: '/ages',
-        component: Timeline,
-    },
-    {
-        path: '/profil',
-        component: Profile,
-        props: true,
-        meta: {
-            authGuard: true,
-        }
-    },
+  {
+    path: "*",
+    redirect: "/",
+  },
+  {
+    path: '/',
+    component: Index,
+  },
+  {
+    path: '/connexion',
+    component: Login,
+    meta: {
+      loginFilter: true
+    }
+  },
+  {
+    path: '/inscription',
+    component: Register,
+    meta: {
+      loginFilter: true
+    }
+  },
+  {
+    path: '/sorts',
+    component: Spells,
+  },
+  {
+    path: '/sorts/:id',
+    component: SpellSingle,
+    props: true,
+  },
+  {
+    path: '/ecoles',
+    component: Schools,
+  },
+  {
+    path: '/ecoles/:id',
+    component: SchoolSingle,
+    props: true,
+  },
+  {
+    path: '/ages',
+    component: Timeline,
+  },
+  {
+    path: '/profil',
+    component: Profile,
+    props: true,
+    meta: {
+      logoutFilter: true,
+    }
+  },
 ]
 
 const router = new VueRouter({
-    mode: 'history',
-    routes,
-    linkActiveClass: "",
-    linkExactActiveClass: "active",
+  mode: 'history',
+  routes,
+  linkActiveClass: "",
+  linkExactActiveClass: "active",
 })
 
-router.beforeEach((to, from, next) => {
-    if (to.matched.some(record => record.meta.authGuard)) {
-        if (Vue.$cookies.get('U_') == null) {
-            next({
-                path: '/connexion',
-                params: { nextUrl: to.fullPath },
-            })
-        } else {
-            next()
-        }
-    } else {
-        next()
-    }
-})
+// router.beforeEach((to, from, next) => {
+//   if (to.matched.some(record => record.meta.loginFilter)) {
+//     if (store.getters.getUserProfile) {
+//       next({
+//         path: '/',
+//       });
+//     }
+//     next();
+//   } else if (to.matched.some(record => record.meta.logoutFilter)) {
+//     if (!store.getters.getUserProfile) {
+//       next({
+//         path: '/connexion',
+//       });
+//     }
+//     next();
+//   }
+//   next();
+// })
 
 export default router;
\ No newline at end of file
diff --git a/client/src/store/index.js b/client/src/store/index.js
new file mode 100644
index 0000000..22d2bb0
--- /dev/null
+++ b/client/src/store/index.js
@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+import VueCookies from 'vue-cookies';
+Vue.use(VueCookies);
+Vue.$cookies.config('30d','','');
+
+Vue.use(Vuex);
+
+import user from './modules/user.store';
+
+const debug = process.env.NODE_ENV !== 'production';
+
+export default new Vuex.Store({
+  modules: {
+    user
+  },
+  strict: debug
+});
\ No newline at end of file
diff --git a/client/src/store/modules/spell.store.js b/client/src/store/modules/spell.store.js
new file mode 100644
index 0000000..0547e28
--- /dev/null
+++ b/client/src/store/modules/spell.store.js
@@ -0,0 +1,23 @@
+const state = {
+
+}
+
+const getters = {
+
+}
+
+const actions = {
+
+}
+
+const mutations = {
+
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+}
\ No newline at end of file
diff --git a/client/src/store/modules/user.store.js b/client/src/store/modules/user.store.js
new file mode 100644
index 0000000..33424a9
--- /dev/null
+++ b/client/src/store/modules/user.store.js
@@ -0,0 +1,88 @@
+// import cookie from 'vue-cookies';
+
+// API
+import { RepositoryFactory } from "~/api/repositories";
+const Users = RepositoryFactory.get('users');
+
+export const namespaced = true;
+
+const state = {
+  status: {
+    logged: false,
+    profile: null,
+  }
+};
+
+const getters = {
+
+  getUserProfile: state => {
+    if (state.status.logged) {
+      return state.status.profile
+    } else {
+      return false
+    }
+  }
+};
+
+const mutations = {
+  loginUser(state, user) {
+    state.status.profile = user;
+    state.status.logged = true;
+  },
+
+  logoutUser(state) {
+    state.status.profile = null;
+    state.status.logged = false;
+  },
+
+  registerUser() {
+
+  }
+};
+
+const actions = {
+  user_login ({ commit }, data) {
+    return new Promise((resolve, reject) => {
+      Users.login(data)
+      .then(v => {
+        let user = v.data.user;
+        // cookie.set('user_token', user.uuid);
+        commit('loginUser', user);
+        resolve(user);
+      })
+      .catch(err => {
+        reject(err.response);
+      });
+    })
+  },
+
+  user_logout ({ commit }) {
+    // cookie.remove('user_token');
+    commit('logoutUser');
+  },
+
+  user_register ({ commit }, data) {
+    return new Promise((resolve, reject) => {
+      Users.register(data)
+      .then(() => {
+        commit('registerUser');
+        resolve();
+      })
+      .catch(err => {
+        reject(err.response);
+      });
+    })
+  }
+};
+
+// Check if a cookie with user token exists
+// if (cookie.get('user_token')) {
+//   mutations.loginUser(state, cookie.get('user_token'));
+// }
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};
diff --git a/client/vue.config.js b/client/vue.config.js
index e18e3db..9c7389f 100644
--- a/client/vue.config.js
+++ b/client/vue.config.js
@@ -1,20 +1,20 @@
 const path = require('path')
 
 module.exports = {
-    configureWebpack: {
-        resolve: {
-            alias: {
-            "~": path.resolve(__dirname, 'src/')
-            }
-        }
-    },
-    css: {
-        loaderOptions: {
-            scss: {
-                prependData: `
-                @import "@/assets/scss/_variables.scss";
-                `
-            }
-        }
+  configureWebpack: {
+    resolve: {
+      alias: {
+      "~": path.resolve(__dirname, 'src/')
+      }
     }
+  },
+  css: {
+    loaderOptions: {
+      scss: {
+        prependData: `
+        @import "@/assets/scss/_variables.scss";
+        `
+      }
+    }
+  }
 };
\ No newline at end of file