diff --git a/src/app.vue b/src/app.vue
index 446c72c..6504c34 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -1,27 +1,31 @@
 <template>
-  <div id="app">
-      
-    <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'}]"
-        />
+    <div id="app">
 
-  </div>
+        <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'}]"
+            />
+
+    </div>
 </template>
 
 <script>
-import spellcard from './components/spell-card.vue'
+import spellcard from './components/spells/spell-card.vue'
+import navbar from "./components/global/navbar.vue";
 
 export default {
   name: 'app',
   components: {
-    spellcard
+    spellcard,
+    navbar
   }
 }
 </script>
@@ -32,7 +36,6 @@ export default {
         font-family: Avenir, Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        margin-top: 60px;
     }
 
 </style>
diff --git a/src/assets/scss/_global.scss b/src/assets/scss/_global.scss
index d41e314..d865900 100644
--- a/src/assets/scss/_global.scss
+++ b/src/assets/scss/_global.scss
@@ -31,6 +31,15 @@ html *::after {
     @-ms-viewport { width: device-width; }
 }
 
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+ul {
+    list-style-type: none;
+}
+
 var {
     font-style: normal;
 }
diff --git a/src/components/global/navbar.vue b/src/components/global/navbar.vue
new file mode 100644
index 0000000..f269c8a
--- /dev/null
+++ b/src/components/global/navbar.vue
@@ -0,0 +1,32 @@
+<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/spell-card.vue b/src/components/spells/spell-card.vue
similarity index 100%
rename from src/components/spell-card.vue
rename to src/components/spells/spell-card.vue