diff --git a/.gitignore b/.gitignore
index 47a62bf..156fc4a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,4 +21,4 @@ yarn-error.log*
 *.sw?
 
 # creds
-/database/credentials.json
\ No newline at end of file
+.env
\ No newline at end of file
diff --git a/client/api/api.js b/client/api/api.js
index 5524972..5f9c36c 100644
--- a/client/api/api.js
+++ b/client/api/api.js
@@ -2,6 +2,8 @@ import axios from "axios"
 
 const url = "http://localhost:2814/api"
 
+axios.defaults.headers.common['auracle_key'] = process.env.VUE_APP_API_KEY
+
 export default axios.create({
     baseURL: url
 })
\ No newline at end of file
diff --git a/client/package-lock.json b/client/package-lock.json
index aaae885..e53b9cb 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11905,6 +11905,11 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
+    "v-clipboard": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/v-clipboard/-/v-clipboard-2.2.3.tgz",
+      "integrity": "sha512-Wg+ObZoYK6McHb5OOCFWvm0R7xHp0/p0G1ocx/8bO22jvA/yVY05rADbfiztwCokXBNfQuGv/XSd1ozcTFgekw=="
+    },
     "v8-compile-cache": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz",
diff --git a/client/package.json b/client/package.json
index fdd97af..dea18a1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -33,6 +33,7 @@
         "core-js": "^3.6.4",
         "jquery": "^3.5.1",
         "popper.js": "^1.16.1",
+        "v-clipboard": "^2.2.3",
         "vue": "^2.6.11",
         "vue-masonry": "^0.11.8"
     },
diff --git a/client/src/components/spells/add-spell-card.vue b/client/src/components/spells/add-spell-card.vue
index 50b645f..52b4de2 100644
--- a/client/src/components/spells/add-spell-card.vue
+++ b/client/src/components/spells/add-spell-card.vue
@@ -143,6 +143,8 @@ export default {
                 ingredients: ingredientsData,
             }
 
+            console.log(data)
+
             Spells.addSpell(data)
             .then(v => {
                 this.$emit('addSpell', v.data)
diff --git a/client/src/components/spells/spell-card.vue b/client/src/components/spells/spell-card.vue
index eec3f94..e3769d8 100644
--- a/client/src/components/spells/spell-card.vue
+++ b/client/src/components/spells/spell-card.vue
@@ -3,23 +3,55 @@
         :class="main_school"
         class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 grid-item grid-sizer">
         <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="spell.name" style="line-height:100%;">
+
+            <div :title="spell.name" class="h3 font-display font-weight-bold text-wrap word-break" style="line-height:100%;">
                 <a class="text-decoration-none" href="#">{{spell.name}}</a>
             </div>
+
             <div>
-                <div class="font-weight-700 text-muted d-inline-block">Niveau {{spell.level}}</div><span> · </span>
+                <div class="font-weight-700 text-muted d-inline-block">Niveau {{spell.level}}</div>
+                <span> · </span>
                 <div class="text-muted d-inline-block">
-                    <span v-for="(school,index) in spell.schools" :key="index"><span v-if="index!=0">, </span><a :href="'/school/'+school.id" class="text-secondary">{{school.name}}</a></span>
+                    <span v-for="(school,index) in spell.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="spell.charge!=0" class="small font-weight-bold">Charge {{spell.charge}} tour(s)</div>
-            <div v-if="spell.ingredients.length>0" class="small"><span class="font-weight-bold">Nécessite</span> <span v-for="(ingredient,index) in spell.ingredients" :key="index"><span v-if="index!=0">, </span>{{ingredient.name}}</span></div>
-            <div class="small text-muted font-italic mt-2">{{spell.description}}</div>
+
+            <div v-if="spell.charge!=0" class="small font-weight-bold">
+                <span>Charge {{spell.charge}} tour(s)</span>
+            </div>
+
+            <div v-if="spell.ingredients.length>0" class="small">
+                <span class="font-weight-bold">Nécessite</span>
+                <span v-for="(ingredient,index) in spell.ingredients" :key="index">
+                    <span v-if="index!=0">, </span>
+                    <span>{{ingredient.name}}</span>
+                </span>
+            </div>
+
+            <div
+                v-clipboard="spell.description"
+                :id="'spell_description_' + spell.id"
+                v-b-tooltip.click
+                placement="bottom"
+                title="Description copiée !"
+                class="small text-muted font-italic mt-2">
+                <span>{{spell.description}}</span>
+            </div>
+
             <div class="mt-2">
-                <div class="font-weight-bold d-inline-block">Coût {{spell.cost}}</div>
+                <div class="font-weight-bold d-inline-block"><span>Coût </span>{{spell.cost}}</div>
                 <div v-if="spell.variables.length>0" class="small d-inline-block">, où&nbsp;:</div>
                 <div class=small>
-                    <span v-for="(variable,index) in spell.variables" :key="index"><span class="font-weight-bold"><span v-if="index!=0"><br></span>{{String.fromCharCode(120+index)}}</span> = {{variable.description}}</span>
+                    <span v-for="(variable,index) in spell.variables" :key="index">
+                        <span class="font-weight-bold">
+                            <span v-if="index!=0"><br></span>
+                            <span>{{String.fromCharCode(120+index)}}</span>
+                        </span>
+                        <span> = {{variable.description}}</span>
+                    </span>
                 </div>
                 <div class="text-right">
                     <a class="h5 text-secondary mr-1">
diff --git a/client/src/components/spells/spells-list.vue b/client/src/components/spells/spells-list.vue
index a59a71d..9ce1ec1 100644
--- a/client/src/components/spells/spells-list.vue
+++ b/client/src/components/spells/spells-list.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="spell-list-wrapper">
-        <button type="button" class="btn font-display font-weight-bold btn-lg btn-outline-dark btn-block shadow-sm mb-4" @click="showAdd"><i class="mad">add</i> Ajouter un sort</button>
+        <button type="button" class="btn font-display font-weight-bold btn-lg btn-outline-dark btn-block shadow-sm mb-4" @click="showAdd">
+            <i class="mad">add</i>
+            <span>Ajouter un sort</span>
+        </button>
         <div v-masonry transition-duration=".5s" item-selector=".spell-card" class="row spells-list">
             <spell-card v-masonry-tile class="spell-card" v-for="(spell) in spells" :key="spell.id" v-bind:spell="spell" @editSpell="editSpell" @deleteSpell="deleteSpell"/>
         </div>
diff --git a/client/src/main.js b/client/src/main.js
index 98004e9..db0cc12 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -3,29 +3,37 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import App from './app.vue'
 
-import { VueMasonryPlugin } from 'vue-masonry';
+// Auth
+require('dotenv').config()
 
-import { BootstrapVue } from 'bootstrap-vue'
 // Router
 import routes from './routes'
+Vue.use(VueRouter)
 
 // Jquery
 import jquery from 'jquery'
 window.$ = jquery
 window.jquery = jquery
 
+// Global styles
+import './assets/scss/_global.scss'
+
 // Bootstrap
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 import 'bootstrap/dist/js/bootstrap.js'
+import { BootstrapVue } from 'bootstrap-vue'
+Vue.use(BootstrapVue)
 
-// Styles
-import './assets/scss/_global.scss'
+// Masonry
+import { VueMasonryPlugin } from 'vue-masonry';
+Vue.use(VueMasonryPlugin)
+
+// Clipboard plugin
+import clipboard from 'v-clipboard'
+Vue.use(clipboard)
 
 Vue.config.productionTip = false
-Vue.use(VueRouter)
-Vue.use(VueMasonryPlugin)
-Vue.use(BootstrapVue)
 
 var filter = function(text, length, clamp){
     clamp = clamp || '...';
diff --git a/client/vue.config.js b/client/vue.config.js
index e180b24..a88cc74 100644
--- a/client/vue.config.js
+++ b/client/vue.config.js
@@ -1,2 +1,3 @@
 module.exports = {
+    
 };
\ No newline at end of file
diff --git a/database/bookshelf.js b/database/bookshelf.js
index 6299281..ddd5b9e 100644
--- a/database/bookshelf.js
+++ b/database/bookshelf.js
@@ -2,19 +2,15 @@
 const fs = require('fs')
 const mysql = require('mysql')
 
-// Fetches and parses credentials file
-let credentials_data = fs.readFileSync('./database/credentials.json')
-let credentials = JSON.parse(credentials_data)
-
 // Setting up the database connection
 const knex = require('knex')({
-    client: credentials.client,
+    client: "mysql",
     connection: {
-      host     : credentials.host,
-      user     : credentials.user,
-      password : credentials.password,
-      database : credentials.database,
-      charset  : credentials.charset
+      host     : process.env.DB_HOST,
+      user     : process.env.DB_USER,
+      password : process.env.DB_PASSWORD,
+      database : "auracle",
+      charset  : "utf8"
     },
 })
 const bookshelf = require('bookshelf')(knex)
diff --git a/index.js b/index.js
index 4ae5ffd..17f265e 100644
--- a/index.js
+++ b/index.js
@@ -6,6 +6,7 @@ const bodyParser = require('body-parser')
 const helmet = require('helmet')
 const morgan = require('morgan')
 const cors = require('cors') // module to format the json response
+const dotenv = require('dotenv').config()
 
 // Creates instances of database connections
 const connection = require('./database/bookshelf')
@@ -27,6 +28,15 @@ app.use(helmet())
 // Serves
 const server = app.listen( port, () => {console.log(`App listening on port ${port}`)})
 
+// Auth
+app.all('*', (req, res, next) => {
+    if (req.headers.auracle_key !== process.env.API_KEY) {
+        return res.status(401).send('The API is either missing or incorrect.')
+    } else {
+        next()
+    }
+})
+
 // Routing
 app.use('/api/spells', routes.spells)
 app.use('/api/schools', routes.schools)
@@ -34,3 +44,4 @@ app.use('/api/meta_schools', routes.meta_schools)
 app.use('/api/variables', routes.variables)
 app.use('/api/ingredients', routes.ingredients)
 app.use('/api/users', routes.users)
+
diff --git a/package-lock.json b/package-lock.json
index 1a368bc..d128861 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -476,6 +476,11 @@
       "resolved": "https://registry.npmjs.org/dont-sniff-mimetype/-/dont-sniff-mimetype-1.1.0.tgz",
       "integrity": "sha512-ZjI4zqTaxveH2/tTlzS1wFp+7ncxNZaIEWYg3lzZRHkKf5zPT/MnEG6WL0BhHMJUabkh8GeU5NL5j+rEUCb7Ug=="
     },
+    "dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+    },
     "ecdsa-sig-formatter": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
diff --git a/package.json b/package.json
index 7e3086c..f707d85 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "bcrypt": "^4.0.1",
     "bookshelf": "^1.1.1",
     "cors": "^2.8.5",
+    "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "helmet": "^3.22.0",
     "jsonschema": "^1.2.6",
diff --git a/routes/auth.js b/routes/auth.js
deleted file mode 100644
index d15e75c..0000000
--- a/routes/auth.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const jwt = require('jsonwebtoken')
-
-const isAuthenticated = (req, res, next) => {
-    if (typeof req.headers.authorization !== undefined) {
-        let token = req.headers.authorization.split(" ")[1]
-    }
-}
\ No newline at end of file