diff --git a/package-lock.json b/package-lock.json
index 016fe7e..48354ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1746,9 +1746,9 @@
       }
     },
     "acorn": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz",
-      "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
       "dev": true
     },
     "acorn-jsx": {
@@ -11859,6 +11859,12 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
+      "integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA==",
+      "dev": true
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/package.json b/package.json
index d2a077f..eee8938 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "eslint-plugin-vue": "^6.1.2",
     "node-sass": "^4.13.1",
     "sass-loader": "^8.0.2",
+    "vue-router": "^3.1.6",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
diff --git a/public/index.html b/public/index.html
index a0a38d3..56563bd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,7 @@
     <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="app"></div>
+    <div id="srs"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/src/app.vue b/src/app.vue
index 6504c34..2952010 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -1,38 +1,28 @@
 <template>
-    <div id="app">
+    <div id="srs">
 
-        <navbar></navbar>
-        
-        <spellcard
-            v-bind:name="'Soleil Pourri'"
-            v-bind:description="[`Le lanceur projette un petit astre vert jusqu’à 20m autour de lui. L’astre brûle l’air environnant, nécrosant rapidement les formes de vies dans un rayon de 100m.`, `Toutes les créatures dans la portée de l’astre (sauf le lanceur) doivent réussir un jet de CON avec un malus de -30. Si elles échouent, elles subissent 3D20 dégâts radiants et 2D20 dégâts nécrotiques. Elles perdent également 1D10 PV max.`]"
-            v-bind:schools="['Lumomancie', 'Nécromancie']"
-            v-bind:level="'30'"
-            v-bind:charge="'2'"
-            v-bind:ingredients="`Volonté, Geste`"
-            v-bind:cost="'-90'"
-            v-bind:variables="[{name: 'x', description: 'lol'}]"
-            />
+        <navigation/>
+        <router-view/>
 
     </div>
 </template>
 
 <script>
-import spellcard from './components/spells/spell-card.vue'
-import navbar from "./components/global/navbar.vue";
+
+import navbar from "./components/global/navbar/navbar";
 
 export default {
   name: 'app',
   components: {
-    spellcard,
-    navbar
+    'navigation': navbar
   }
 }
+
 </script>
 
 <style lang="scss">
 
-    #app {
+    #srs {
         font-family: Avenir, Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
diff --git a/src/assets/scss/_global.scss b/src/assets/scss/_global.scss
index d865900..9d7e10f 100644
--- a/src/assets/scss/_global.scss
+++ b/src/assets/scss/_global.scss
@@ -10,7 +10,7 @@ html {
     height: 100%;
     -webkit-overflow-scrolling: touch;
     line-height: 1.15;
-    color: $dark-gray;
+    color: $primary--base;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
 }
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 1727023..3b3e362 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -1,12 +1,20 @@
 
-// COLOURS
+//// COLOURS
+// Global colours
 $white: #FFF;
 $black: #000;
 
-$dark-gray: #222;
+$primary--base: #2c3e50;
+$primary--blue: #599EF4;
+$secondary--blue: #355F91;
 
-$dark-blue: #2c3e50;
-$card-border-inner: #f5ebd8;
+$valid: #6AC47B;
+$warning: #F7A758;
+$alert: #F44E4E;
+
+
+// Spell colours
+$spell-card--innerborder: #f5ebd8;
 
 // FONT FAMILY
 $font-family: 'Overpass', sans-serif;
diff --git a/src/components/global/navbar.vue b/src/components/global/navbar.vue
deleted file mode 100644
index f269c8a..0000000
--- a/src/components/global/navbar.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <nav>
-        <ul>
-            <li><a href="#">Accueil</a></li>
-            <li><a href="#">Sorts</a></li>
-            <li><a href="#">Personnages</a></li>
-        </ul>
-    </nav>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style lang="scss">
-    nav {
-        padding: 1.5rem 2.5rem;
-        font-size: .9rem;
-        color: $white;
-        background: $black;
-        text-transform: uppercase;
-        box-shadow: 0 0 .5rem rgba($black, .75);
-        ul {
-            display: flex;
-            li {
-                margin-right: 2.5rem;
-            }
-        }
-    }
-</style>
\ No newline at end of file
diff --git a/src/components/global/navbar/navbar.vue b/src/components/global/navbar/navbar.vue
new file mode 100644
index 0000000..2f28578
--- /dev/null
+++ b/src/components/global/navbar/navbar.vue
@@ -0,0 +1,72 @@
+<template>
+    <nav>
+        <ul v-if="links.length != 0">
+            <li v-for="(link, index) in links" :key="index">
+                <router-link v-bind:to="link.url">{{ link.text }}</router-link>
+            </li>
+        </ul>
+    </nav>
+</template>
+
+<script>
+
+export default {
+    name: 'navbar',
+    data() {
+        return {
+            links: [
+                {
+                    id: 0,
+                    text: 'Accueil',
+                    url: '/',
+                },
+                {
+                    id: 1,
+                    text: 'Sortilèges',
+                    url: '/spells',
+                },
+            ]
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    nav {
+        padding-left: 2rem;
+        font-size: .9rem;
+        color: $black;
+        background: $white;
+        text-transform: uppercase;
+        // box-shadow: 0 0 .5rem rgba($black, .75);
+        ul {
+            display: flex;
+            li {
+                a {
+                    position: relative;
+                    margin-right: 1rem;
+                    padding: 1.5rem;
+                    display: block;
+                    &:after {
+                        position: absolute;
+                        display: block;
+                        left: 50%;
+                        bottom: 0;
+                        transform: translateX(-50%);
+                        width: 0;
+                        height: 3px;
+                        content: '';
+                        background: $black;
+                        transition: width .5s cubic-bezier(0.645, 0.045, 0.355, 1);
+                    }
+                    &:hover {
+                        &:after {
+                            width: 80%;
+                            transition: width .5s cubic-bezier(0.645, 0.045, 0.355, 1);
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/components/spells/spell-card.vue b/src/components/spells/spell-card.vue
index 0c5f48d..b74c429 100644
--- a/src/components/spells/spell-card.vue
+++ b/src/components/spells/spell-card.vue
@@ -1,5 +1,5 @@
 <template>
-    <article class="spell-card">
+    <article class="spell-card" v-bind:class="{ active: isFlipped }" @click="toggleCard">
         <div class="content">
             <header>
                 <h3>{{ name }}</h3>
@@ -16,7 +16,7 @@
                             <var>{{ level }}</var>
                         </div>
                         <ul class="schools">
-                            <li v-for="school of schools" :key="school">
+                            <li v-for="(school, index) in schools" :key="index">
                                 {{ school }}
                             </li>
                         </ul>
@@ -39,7 +39,7 @@
             </section>
             <hr>
             <section class="spell-description">
-                <p v-for="line of description" :key="line">
+                <p v-for="(line, index) of description" :key="index">
                     {{ line }}
                 </p>
             </section>
@@ -47,7 +47,7 @@
             <footer v-if="variables">
                 <div class="label">Variables</div>
                 <div class="variables">
-                    <div v-for="variable in variables" :key="variable" class="xyz">
+                    <div v-for="(variable, index) in variables" :key="index" class="xyz">
                         <span>{{ variable.name }}</span>
                         <var>{{ variable.description }}</var>
                     </div>
@@ -58,8 +58,9 @@
 </template>
 
 <script>
+
 export default {
-    name: "spell-card",
+    name: 'spell-card',
     props: {
         name: String,
         description: Array,
@@ -69,8 +70,19 @@ export default {
         charge: String,
         cost: String,
         variables: Array,
-    }
+    },
+    data() {
+        return {
+            isFlipped: false,
+        }
+    },
+    methods: {
+        toggleCard: async function() {
+            this.isFlipped = !this.isFlipped;
+        }
+    },
 }
+
 </script>
 
 <style lang="scss">
@@ -79,10 +91,10 @@ export default {
         max-width: 35rem;
         padding: .5rem;
         margin: .5rem auto .5rem;
-        background: $card-border-inner;
-        border: solid 1px rgba($dark-blue, .5);
+        background: $spell-card--innerborder;
+        border: solid 1px rgba($primary--base, .5);
         border-radius: .5rem;
-        box-shadow: .0 .0 .75rem rgba($dark-blue, .25);
+        box-shadow: .0 .0 .75rem rgba($primary--base, .25);
 
         > .content {
             max-width: 35rem;
diff --git a/src/main.js b/src/main.js
index 6dba09f..2936443 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,20 @@
 import Vue from 'vue'
+import VueRouter from 'vue-router'
 import App from './app.vue'
 
-Vue.config.productionTip = false
+import routes from './routes'
 
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+Vue.config.productionTip = false
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+    mode: 'history',
+    routes,
+});
+
+const app = new Vue({
+    render: h => h(App),
+    router
+})
+
+app.$mount('#srs')
diff --git a/src/pages/index.vue b/src/pages/index.vue
new file mode 100644
index 0000000..60c45fd
--- /dev/null
+++ b/src/pages/index.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="home-page">
+        <p>This is the home page</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'index',
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/pages/spells.vue b/src/pages/spells.vue
new file mode 100644
index 0000000..6e2d545
--- /dev/null
+++ b/src/pages/spells.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="spells-page">
+        <spell-card
+            v-bind:name="'Soleil Pourri'"
+            v-bind:description="[`Le lanceur projette un petit astre vert jusqu’à 20m autour de lui. L’astre brûle l’air environnant, nécrosant rapidement les formes de vies dans un rayon de 100m.`, `Toutes les créatures dans la portée de l’astre (sauf le lanceur) doivent réussir un jet de CON avec un malus de -30. Si elles échouent, elles subissent 3D20 dégâts radiants et 2D20 dégâts nécrotiques. Elles perdent également 1D10 PV max.`]"
+            v-bind:schools="['Lumomancie', 'Nécromancie']"
+            v-bind:level="'30'"
+            v-bind:charge="'2'"
+            v-bind:ingredients="`Volonté, Geste`"
+            v-bind:cost="'-90'"
+            v-bind:variables="[{name: 'x', description: 'lol'}]"
+            />
+    </div>
+</template>
+
+<script>
+
+import spellcard from "../components/spells/spell-card";
+
+export default {
+    name: 'spells',
+    components: {
+        'spell-card': spellcard,
+    }
+}
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/routes.js b/src/routes.js
new file mode 100644
index 0000000..eb9bc0f
--- /dev/null
+++ b/src/routes.js
@@ -0,0 +1,18 @@
+// App router
+
+
+// Pages
+import index from "./pages/index";
+import spells from "./pages/spells";
+
+// Routes
+const routes = [
+    {
+        path: '/', component: index,
+    },
+    {
+        path: '/spells', component: spells,
+    }
+];
+
+export default routes;
\ No newline at end of file