diff --git a/client/api/api.js b/client/api/api.js
new file mode 100644
index 0000000..5524972
--- /dev/null
+++ b/client/api/api.js
@@ -0,0 +1,7 @@
+import axios from "axios"
+
+const url = "http://localhost:2814/api"
+
+export default axios.create({
+    baseURL: url
+})
\ No newline at end of file
diff --git a/client/api/repositories.js b/client/api/repositories.js
new file mode 100644
index 0000000..cd4abd1
--- /dev/null
+++ b/client/api/repositories.js
@@ -0,0 +1,11 @@
+import spellsRepository from './spellsRepository'
+
+// List of possible repositories
+const repositories = {
+    spells: spellsRepository
+}
+
+// Usage : RepositoryFactoryInstance.get('reponame');
+export const RepositoryFactory = {
+    get: name => repositories[name]
+}
\ No newline at end of file
diff --git a/client/api/spellsRepository.js b/client/api/spellsRepository.js
new file mode 100644
index 0000000..5b60082
--- /dev/null
+++ b/client/api/spellsRepository.js
@@ -0,0 +1,14 @@
+import api from './api'
+
+// URL for spells
+const resource = "/spells"
+
+// CRUD methods for spells
+export default {
+    getSpells() {
+        return api.get(`${resource}`)
+    },
+    getSpell(id) {
+        return api.get(`${resource}?id=${id}`)
+    },
+}
\ No newline at end of file
diff --git a/client/src/assets/images/logo-dark.svg b/client/src/assets/images/logo-dark.svg
new file mode 100644
index 0000000..c6b7b67
--- /dev/null
+++ b/client/src/assets/images/logo-dark.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 34" style="enable-background:new 0 0 32 34;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#000;}
+	.st1{fill:#599EF4;}
+</style>
+<g id="layer_cog">
+	<path class="st0" d="M31.6,16L29,15.5h0c-0.1,0-0.3-0.1-0.4-0.1c-0.2,0-0.3-0.2-0.4-0.3c-0.3-1.3-0.8-2.5-1.5-3.6
+		c-0.1-0.2-0.1-0.4,0-0.5c0.5-0.8,1.1-1.6,1.6-2.5c0.2-0.2,0.2-0.6-0.1-0.8c-0.7-0.7-1.4-1.4-2-2c-0.2-0.2-0.5-0.2-0.7,0l-0.9,0.6
+		l-1.8,1.1c-1.2,0.8-0.6,3.2,0,3.8c0.8,0.8,1.5,1.8,2,2.8c0.5,1,0.7,2.1,0.8,3.2c0,0.2,0,0.4,0,0.5s0,0.1,0,0.1c0,0.5,0,1.1-0.1,1.7
+		c-0.2,1.2-0.6,2.4-1.2,3.4c-0.6,1.1-1.5,2-2.5,2.8c-1.7,1.3-3.8,2-5.9,2l0,0c-2.1,0-4.2-0.7-5.9-2c-1-0.8-1.8-1.7-2.5-2.8
+		c-0.6-1-1.1-2.2-1.2-3.4c-0.1-0.5-0.1-1.1-0.1-1.7c0,0,0-0.1,0-0.1s0-0.3,0.1-0.5c0.2-2.3,1.2-4.4,2.8-6c0.6-0.6,1.2-3,0-3.8
+		L7.3,6.2L6.4,5.6c-0.2-0.2-0.5-0.2-0.7,0c-0.7,0.7-1.3,1.4-2,2C3.5,7.8,3.5,8.2,3.7,8.4c0.5,0.8,1.1,1.6,1.6,2.5
+		c0.1,0.2,0.1,0.4,0,0.5c-0.7,1.1-1.2,2.3-1.5,3.6c0,0.2-0.2,0.3-0.4,0.3c-0.1,0-0.3,0.1-0.4,0.1H3L0.4,16C0.2,16,0,16.3,0,16.5v2.9
+		C0,19.7,0.2,20,0.4,20l1.6,0.3l1.4,0.3c0.1,0,0.3,0.1,0.3,0.3c0.3,1.3,0.8,2.5,1.5,3.6c0.1,0.2,0.1,0.4,0,0.5
+		C4.8,25.7,4.4,26.3,4,27l-0.4,0.6c-0.2,0.2-0.1,0.6,0.1,0.7c0.7,0.7,1.4,1.4,2.1,2.1c0.1,0.1,0.2,0.2,0.3,0.1
+		c0.1,0,0.3-0.1,0.4-0.2C6.7,30.2,7,30,7.2,29.9L9,28.7c0.1-0.1,0.3-0.1,0.4,0c1.1,0.7,2.4,1.2,3.6,1.5c0.2,0,0.3,0.2,0.3,0.4
+		c0.2,1,0.4,2,0.6,3c0,0.3,0.3,0.4,0.5,0.4h2.9c0.3,0,0.5-0.2,0.5-0.4c0.2-1,0.4-2,0.6-3c0-0.2,0.2-0.3,0.3-0.4
+		c1.3-0.3,2.5-0.8,3.6-1.5c0.1-0.1,0.3-0.1,0.4,0l1.8,1.2c0.2,0.2,0.5,0.3,0.7,0.5c0.1,0.1,0.3,0.1,0.4,0.2c0.1,0,0.3,0,0.4-0.1
+		c0.7-0.7,1.4-1.4,2.1-2.1c0.2-0.2,0.3-0.5,0.1-0.7L28,26.9c-0.4-0.6-0.8-1.3-1.2-1.9c-0.1-0.2-0.1-0.4,0-0.5
+		c0.7-1.1,1.2-2.4,1.5-3.6c0-0.1,0.1-0.2,0.3-0.3l1.4-0.3l1.6-0.3c0.3,0,0.4-0.3,0.4-0.5v-2.9C32,16.3,31.8,16,31.6,16z"/>
+</g>
+<g id="layer_flame">
+	<path class="st1" d="M16.5,23.4c0.6-0.9,0.9-2.1,0.6-3.2c-0.1-0.7-0.4-1.4-0.9-1.9c0.1,0.4,0.1,0.8,0.2,1.2c0,0.3,0,0.6-0.1,0.9
+		c-0.2,0.5-0.7,0.7-1.1,0.5c-0.1-0.1-0.2-0.1-0.3-0.3c-0.3-0.4-0.5-0.9-0.4-1.5c0-0.4,0.1-0.7,0.2-1.2c-0.1,0.1-0.3,0.1-0.4,0.2
+		c-0.9,0.7-1.4,1.7-1.5,2.9c-0.1,1.5,0.2,3,1,4.3l0.1,0.2c-0.1,0-0.1,0-0.2-0.1c-2.8-1.2-4.6-4.1-4.5-7.3c0-1.3,0.4-2.6,1-3.7
+		c0.6-0.7,1.1-1.5,1.5-2.4c0.2-0.6,0.4-1.3,0.5-2c0-0.2,0-0.4,0.1-0.6c0.3,0.6,0.5,1.3,0.6,2c0.1,0.7,0,1.5-0.2,2.2
+		c0.4-0.3,0.8-0.7,1.1-1.1c0.6-0.9,0.9-2,1-3c0-0.8,0-1.5,0-2.3c0-0.8,0.1-1.5,0.2-2.3c0.3-1.6,1.5-2.9,2.9-3.3h0.1c0,0,0,0,0,0.1
+		c-0.6,1.4-0.6,3,0,4.4c0.7,1.5,1.5,3,2.3,4.5c0.8,1.5,1.3,2.1,2,3.5c0.4,1.1,0.7,2.3,0.7,3.5c0,2-0.8,3.9-2.3,5.1
+		c-0.3,0.2-0.6,0.5-0.9,0.6l0.1-0.3c0.5-1.3,0.6-2.7,0.3-4c-0.2-0.7-0.4-1.3-0.8-1.9c-0.3-0.5-0.6-0.9-0.9-1.4
+		c-0.3-0.5-0.5-1.1-0.6-1.7c0-0.5,0-0.9,0-1.4c-0.1,0.1-0.2,0.3-0.3,0.5c-0.5,0.9-0.6,1.9-0.3,2.9c0.2,0.7,0.5,1.5,0.7,2.2
+		c0.2,0.7,0.4,1.4,0.4,2.1C18.4,21.7,17.7,22.8,16.5,23.4L16.5,23.4z"/>
+</g>
+</svg>
diff --git a/client/src/assets/images/logo-light.svg b/client/src/assets/images/logo-light.svg
new file mode 100644
index 0000000..6d54351
--- /dev/null
+++ b/client/src/assets/images/logo-light.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 34" style="enable-background:new 0 0 32 34;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#599EF4;}
+</style>
+<g id="layer_cog">
+	<path class="st0" d="M31.6,16L29,15.5h0c-0.1,0-0.3-0.1-0.4-0.1c-0.2,0-0.3-0.2-0.4-0.3c-0.3-1.3-0.8-2.5-1.5-3.6
+		c-0.1-0.2-0.1-0.4,0-0.5c0.5-0.8,1.1-1.6,1.6-2.5c0.2-0.2,0.2-0.6-0.1-0.8c-0.7-0.7-1.4-1.4-2-2c-0.2-0.2-0.5-0.2-0.7,0l-0.9,0.6
+		l-1.8,1.1c-1.2,0.8-0.6,3.2,0,3.8c0.8,0.8,1.5,1.8,2,2.8c0.5,1,0.7,2.1,0.8,3.2c0,0.2,0,0.4,0,0.5s0,0.1,0,0.1c0,0.5,0,1.1-0.1,1.7
+		c-0.2,1.2-0.6,2.4-1.2,3.4c-0.6,1.1-1.5,2-2.5,2.8c-1.7,1.3-3.8,2-5.9,2l0,0c-2.1,0-4.2-0.7-5.9-2c-1-0.8-1.8-1.7-2.5-2.8
+		c-0.6-1-1.1-2.2-1.2-3.4c-0.1-0.5-0.1-1.1-0.1-1.7c0,0,0-0.1,0-0.1s0-0.3,0.1-0.5c0.2-2.3,1.2-4.4,2.8-6c0.6-0.6,1.2-3,0-3.8
+		L7.3,6.2L6.4,5.6c-0.2-0.2-0.5-0.2-0.7,0c-0.7,0.7-1.3,1.4-2,2C3.5,7.8,3.5,8.2,3.7,8.4c0.5,0.8,1.1,1.6,1.6,2.5
+		c0.1,0.2,0.1,0.4,0,0.5c-0.7,1.1-1.2,2.3-1.5,3.6c0,0.2-0.2,0.3-0.4,0.3c-0.1,0-0.3,0.1-0.4,0.1H3L0.4,16C0.2,16,0,16.3,0,16.5v2.9
+		C0,19.7,0.2,20,0.4,20l1.6,0.3l1.4,0.3c0.1,0,0.3,0.1,0.3,0.3c0.3,1.3,0.8,2.5,1.5,3.6c0.1,0.2,0.1,0.4,0,0.5
+		C4.8,25.7,4.4,26.3,4,27l-0.4,0.6c-0.2,0.2-0.1,0.6,0.1,0.7c0.7,0.7,1.4,1.4,2.1,2.1c0.1,0.1,0.2,0.2,0.3,0.1
+		c0.1,0,0.3-0.1,0.4-0.2C6.7,30.2,7,30,7.2,29.9L9,28.7c0.1-0.1,0.3-0.1,0.4,0c1.1,0.7,2.4,1.2,3.6,1.5c0.2,0,0.3,0.2,0.3,0.4
+		c0.2,1,0.4,2,0.6,3c0,0.3,0.3,0.4,0.5,0.4h2.9c0.3,0,0.5-0.2,0.5-0.4c0.2-1,0.4-2,0.6-3c0-0.2,0.2-0.3,0.3-0.4
+		c1.3-0.3,2.5-0.8,3.6-1.5c0.1-0.1,0.3-0.1,0.4,0l1.8,1.2c0.2,0.2,0.5,0.3,0.7,0.5c0.1,0.1,0.3,0.1,0.4,0.2c0.1,0,0.3,0,0.4-0.1
+		c0.7-0.7,1.4-1.4,2.1-2.1c0.2-0.2,0.3-0.5,0.1-0.7L28,26.9c-0.4-0.6-0.8-1.3-1.2-1.9c-0.1-0.2-0.1-0.4,0-0.5
+		c0.7-1.1,1.2-2.4,1.5-3.6c0-0.1,0.1-0.2,0.3-0.3l1.4-0.3l1.6-0.3c0.3,0,0.4-0.3,0.4-0.5v-2.9C32,16.3,31.8,16,31.6,16z"/>
+</g>
+<g id="layer_flame">
+	<path class="st1" d="M16.5,23.4c0.6-0.9,0.9-2.1,0.6-3.2c-0.1-0.7-0.4-1.4-0.9-1.9c0.1,0.4,0.1,0.8,0.2,1.2c0,0.3,0,0.6-0.1,0.9
+		c-0.2,0.5-0.7,0.7-1.1,0.5c-0.1-0.1-0.2-0.1-0.3-0.3c-0.3-0.4-0.5-0.9-0.4-1.5c0-0.4,0.1-0.7,0.2-1.2c-0.1,0.1-0.3,0.1-0.4,0.2
+		c-0.9,0.7-1.4,1.7-1.5,2.9c-0.1,1.5,0.2,3,1,4.3l0.1,0.2c-0.1,0-0.1,0-0.2-0.1c-2.8-1.2-4.6-4.1-4.5-7.3c0-1.3,0.4-2.6,1-3.7
+		c0.6-0.7,1.1-1.5,1.5-2.4c0.2-0.6,0.4-1.3,0.5-2c0-0.2,0-0.4,0.1-0.6c0.3,0.6,0.5,1.3,0.6,2c0.1,0.7,0,1.5-0.2,2.2
+		c0.4-0.3,0.8-0.7,1.1-1.1c0.6-0.9,0.9-2,1-3c0-0.8,0-1.5,0-2.3c0-0.8,0.1-1.5,0.2-2.3c0.3-1.6,1.5-2.9,2.9-3.3h0.1c0,0,0,0,0,0.1
+		c-0.6,1.4-0.6,3,0,4.4c0.7,1.5,1.5,3,2.3,4.5c0.8,1.5,1.3,2.1,2,3.5c0.4,1.1,0.7,2.3,0.7,3.5c0,2-0.8,3.9-2.3,5.1
+		c-0.3,0.2-0.6,0.5-0.9,0.6l0.1-0.3c0.5-1.3,0.6-2.7,0.3-4c-0.2-0.7-0.4-1.3-0.8-1.9c-0.3-0.5-0.6-0.9-0.9-1.4
+		c-0.3-0.5-0.5-1.1-0.6-1.7c0-0.5,0-0.9,0-1.4c-0.1,0.1-0.2,0.3-0.3,0.5c-0.5,0.9-0.6,1.9-0.3,2.9c0.2,0.7,0.5,1.5,0.7,2.2
+		c0.2,0.7,0.4,1.4,0.4,2.1C18.4,21.7,17.7,22.8,16.5,23.4L16.5,23.4z"/>
+</g>
+</svg>
diff --git a/client/src/assets/images/logo.png b/client/src/assets/images/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/client/src/assets/images/logo.png and /dev/null differ
diff --git a/client/src/components/spells/spell-card.vue b/client/src/components/spells/spell-card.vue
index ab4347e..6cda65d 100644
--- a/client/src/components/spells/spell-card.vue
+++ b/client/src/components/spells/spell-card.vue
@@ -63,11 +63,11 @@ export default {
     name: 'spell-card',
     props: {
         name: String,
-        description: Array,
-        level: String,
+        description: String,
+        level: Number,
         schools: Array,
-        ingredients: String,
-        charge: String,
+        ingredients: Array,
+        charge: Number,
         cost: String,
         variables: Array,
     },
diff --git a/client/src/components/spells/spells-list.vue b/client/src/components/spells/spells-list.vue
new file mode 100644
index 0000000..8103ea9
--- /dev/null
+++ b/client/src/components/spells/spells-list.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="spells-list">
+        <spell-card v-for="(spell, index) in spells" :key="index" v-bind="spell"/>
+    </div>
+</template>
+
+<script>
+// Components
+import spellcard from "./spell-card"
+
+// API
+import { RepositoryFactory } from "../../../api/repositories"
+const spellsRepository = RepositoryFactory.get('spells')
+
+export default {
+    name: 'spellslist',
+    components: {
+        'spell-card': spellcard,
+    },
+    data() {
+        return {
+            loading: false,
+            spells: []
+        }
+    },
+    created() {
+        this.computeSpells()
+    },
+    methods: {
+        async fetchSpells() {
+            const { data } = await spellsRepository.getSpells()
+            return data
+        },
+        async computeSpells() {
+            this.loading = true
+            const displaySpells = await this.fetchSpells();
+            this.loading = false
+            this.spells = displaySpells.splice(0,10)
+        }
+    }
+}
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/client/src/pages/spells.vue b/client/src/pages/spells.vue
index 6029cc4..8e468f8 100644
--- a/client/src/pages/spells.vue
+++ b/client/src/pages/spells.vue
@@ -1,34 +1,19 @@
 <template>
     <div class="spells-page">
-        <v-for v-for="(spell, index) in spells" :key="index">
-            <spell-card v-bind="spell"/>
-        </v-for>
+        <spell-list/>
     </div>
 </template>
 
 <script>
-import axios from 'axios';
-import spellcard from "../components/spells/spell-card";
+
+// Components
+import spellslist from "../components/spells/spells-list"
 
 export default {
     name: 'spells',
     components: {
-        'spell-card': spellcard,
-    },
-    data() {
-        return {
-            spells: []
-        }
-    },
-    mounted() {
-        axios({ method: "GET", "url": "http://localhost:2814/api/spells"})
-        .then(result => {
-            this.spells = result.data.spells;
-            console.log(result)
-        }, error => {
-            console.log(error)
-        })
-    },
+        'spell-list': spellslist,
+    }
 }
 
 </script>
diff --git a/index.js b/index.js
index 08ca67d..2ff401a 100644
--- a/index.js
+++ b/index.js
@@ -2,8 +2,9 @@
 
 // MODULES
 const express = require('express')
-const cors = require('cors')
+const cors = require('cors') // module to format the json response
 
+// Creates instances of database connections
 const connection = require('./database/connection')
 const db = connection.db
 
@@ -13,11 +14,14 @@ const port = 2814
 // Import routes
 const routes = require('./routes')
 
-// Builds app
+// Builds app w/ express
 let app = express()
 app.use(cors())
-const server = app.listen( port, () => { console.log(`App listening on port ${port}`)} )
 
+// Serves
+const server = app.listen( port, () => {console.log(`App listening on port ${port}`)})
+
+// Routing
 app.use('/api/spells', routes.spells)
 
 // On process kill with SIGINT
diff --git a/routes/spells.js b/routes/spells.js
index 1b33aca..c74775c 100644
--- a/routes/spells.js
+++ b/routes/spells.js
@@ -92,7 +92,7 @@ router
     getSpells(req.query)
     .then(v => {
         res.setHeader('Content-Type', 'application/json')
-        res.end(JSON.stringify({spells : v}))
+        res.end(JSON.stringify(v))
     })
     .catch(err => {
         console.log(err)