diff --git a/back/index.js b/back/index.js
index c41031ece35594b9f8429bb42330b49dbf22d56e..e2e68e44187a054e0e90d6193159fd0c202179b2 100644
--- a/back/index.js
+++ b/back/index.js
@@ -30,7 +30,7 @@ app.use(loginChecker);
 
 // Routes
 app.use('/users', usersRouter);
-// app.use('/characters', charactersRouter);
+app.use('/characters', charactersRouter);
 
 mongoose.connect('mongodb://localhost/rolegame', err => {
   if (err) {
diff --git a/back/routes/characters.js b/back/routes/characters.js
index bf48dc3bbeba15c83d978089388ed3329b1ed005..17bf85b3fbca6398391391f4de160fb714dcc0ca 100644
--- a/back/routes/characters.js
+++ b/back/routes/characters.js
@@ -8,9 +8,14 @@ const router = express.Router();
 
 const getScore = (data) => Object.keys(data).reduce((total, el) => total + costTable[data[el]], 0);
 
+router.get('/avatars', (req, res) => {
+  const avatars = fs.readdirSync('../front/public/img/avatars');
+  res.json({ avatars });
+})
+
 router.get('/', async (req, res) => {
   // TODO: Login required
-  const avatars = fs.readdirSync('media/avatars');
+  
   Character.find({ user: req.session.user._id }, (err, characters) => {
     if (err) return res.status(400).json({ error: err });
     return res.json(characters);
diff --git a/back/views/character_summary.pug b/back/views/character_summary.pug
deleted file mode 100644
index 8e8cca865ca33c2f8d3289930fc60576ca98ff57..0000000000000000000000000000000000000000
--- a/back/views/character_summary.pug
+++ /dev/null
@@ -1,32 +0,0 @@
-.ui.card.fluid
-  .content
-    img.right.floated.mini.image.ui(src="/media/avatars/"+character.avatar, alt="Avatar")
-    .header= character.name
-    .meta
-      .date Created on #{character.birthDate.toDateString()}
-    .ui.tiny.progress.yellow.progress(id="action-points-bar-"+character._id)
-      .bar
-      .label 
-        span(id="action-points-value-"+character._id)= character.actionPoints
-        |&nbspaction points
-  //- .content
-  //-   .ui.label(class=character.attributes.strength<=8 ? "orange" : character.attributes.strength>=12 ? "green" : "" )
-  //-     | Strength
-  //-     .detail= character.attributes.strength
-  //-   .ui.label(class=character.attributes.constitution<=8 ? "orange" : character.attributes.constitution>=12 ? "green" : "" )
-  //-     | Constitution
-  //-     .detail= character.attributes.constitution
-  //-   .ui.label(class=character.attributes.dexterity<=8 ? "orange" : character.attributes.dexterity>=12 ? "green" : "" )
-  //-     | Dexterity
-  //-     .detail= character.attributes.dexterity
-  //-   .ui.label(class=character.attributes.intelligence<=8 ? "orange" : character.attributes.intelligence>=12 ? "green" : "" )
-  //-     | Intelligence
-  //-     .detail= character.attributes.intelligence
-  //-   .ui.label(class=character.attributes.wisdom<=8 ? "orange" : character.attributes.wisdom>=12 ? "green" : "" )
-  //-     | Wisdom
-  //-     .detail= character.attributes.wisdom
-  //-   .ui.label(class=character.attributes.charisma<=8 ? "orange" : character.attributes.charisma>=12 ? "green" : "" )
-  //-     | Charisma
-  //-     .detail= character.attributes.charisma
-  script $('#action-points-bar-#{character._id}').progress({ total: #{maxActionPoints}, value: #{character.actionPoints}});
-  script updateActionPoints('#{character._id}', #{character.actionPoints}, #{maxActionPoints});
diff --git a/back/media/avatars/boris_by_charro_art_d8eta2f-pre.jpg b/front/public/img/avatars/boris_by_charro_art_d8eta2f-pre.jpg
similarity index 100%
rename from back/media/avatars/boris_by_charro_art_d8eta2f-pre.jpg
rename to front/public/img/avatars/boris_by_charro_art_d8eta2f-pre.jpg
diff --git a/back/media/avatars/drake_by_charro_art_d8eta33-pre.jpg b/front/public/img/avatars/drake_by_charro_art_d8eta33-pre.jpg
similarity index 100%
rename from back/media/avatars/drake_by_charro_art_d8eta33-pre.jpg
rename to front/public/img/avatars/drake_by_charro_art_d8eta33-pre.jpg
diff --git a/back/media/avatars/fazzlemare_by_charro_art_d8etbfa-pre.jpg b/front/public/img/avatars/fazzlemare_by_charro_art_d8etbfa-pre.jpg
similarity index 100%
rename from back/media/avatars/fazzlemare_by_charro_art_d8etbfa-pre.jpg
rename to front/public/img/avatars/fazzlemare_by_charro_art_d8etbfa-pre.jpg
diff --git a/back/media/avatars/mortimer_by_charro_art_d8eta4a-pre.jpg b/front/public/img/avatars/mortimer_by_charro_art_d8eta4a-pre.jpg
similarity index 100%
rename from back/media/avatars/mortimer_by_charro_art_d8eta4a-pre.jpg
rename to front/public/img/avatars/mortimer_by_charro_art_d8eta4a-pre.jpg
diff --git a/back/media/avatars/scarlet_by_charro_art_d8eta4q-pre.jpg b/front/public/img/avatars/scarlet_by_charro_art_d8eta4q-pre.jpg
similarity index 100%
rename from back/media/avatars/scarlet_by_charro_art_d8eta4q-pre.jpg
rename to front/public/img/avatars/scarlet_by_charro_art_d8eta4q-pre.jpg
diff --git a/back/media/avatars/tobias_by_charro_art_d8eta17-pre.jpg b/front/public/img/avatars/tobias_by_charro_art_d8eta17-pre.jpg
similarity index 100%
rename from back/media/avatars/tobias_by_charro_art_d8eta17-pre.jpg
rename to front/public/img/avatars/tobias_by_charro_art_d8eta17-pre.jpg
diff --git a/back/media/avatars/warren_by_charro_art_d8eta25-pre.jpg b/front/public/img/avatars/warren_by_charro_art_d8eta25-pre.jpg
similarity index 100%
rename from back/media/avatars/warren_by_charro_art_d8eta25-pre.jpg
rename to front/public/img/avatars/warren_by_charro_art_d8eta25-pre.jpg
diff --git a/front/public/index.html b/front/public/index.html
index 35239811aa290bb59e428c968efb3c5e1fcd110f..10302b52ef3eb1fa17bc2ee536f818c6ab11b0c3 100644
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css">
     <title>front</title>
   </head>
   <body>
diff --git a/front/src/components/CharacterItem.vue b/front/src/components/CharacterItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5d3ccc927bff82e56038ffcfcf4e9a31c56b56b2
--- /dev/null
+++ b/front/src/components/CharacterItem.vue
@@ -0,0 +1,24 @@
+<template lang="pug">
+  sui-card(class="fluid")
+    sui-card-content
+      sui-image(floated="right", size="mini", :src="`avatars/${character.avatar}`")
+      sui-card-header {{ character.name }}
+      sui-card-meta Created on {{ character.birthDate }}
+    sui-progress(size="tiny", color="yellow", :label="`${character.actionPoints} action points`", :percent="character.actionPoints/480*100")
+</template>
+
+<script>
+export default {
+  name: "CharacterItem",
+  props: ['character'],
+  data() {
+    return {
+    }
+  }
+  // TODO: Update action points
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/front/src/router.js b/front/src/router.js
index 6089a002bebfb4645d7aeae0e05979c6d353ed47..9a623cf6d9c5c1cc25d82f8e1dff791397a10d12 100644
--- a/front/src/router.js
+++ b/front/src/router.js
@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Router from "vue-router";
 import Home from "./views/Home.vue";
+import Characters from "./views/Characters.vue";
 
 Vue.use(Router);
 
@@ -12,6 +13,11 @@ export default new Router({
       path: "/",
       name: "home",
       component: Home
+    },
+    {
+      path: "/characters",
+      name: "characters",
+      component: Characters
     }
   ]
 });
diff --git a/front/src/views/Characters.vue b/front/src/views/Characters.vue
new file mode 100644
index 0000000000000000000000000000000000000000..687c5cae40aa1766972278a418cc341aaa1c9d8b
--- /dev/null
+++ b/front/src/views/Characters.vue
@@ -0,0 +1,81 @@
+<template lang="pug">
+  div
+    sui-card-group
+      CharacterItem(v-for="character in characters", :key="character._id", :character="character")
+    sui-container(text-align="center")   
+      sui-button(color="teal", basic, icon="add", @click="creationModal=true") Create character
+
+    sui-modal(v-model="creationModal")
+      sui-modal-header Create a new character
+      sui-modal-content(image)
+        sui-image(size="medium", :src="`avatars/${newCharacter.avatar}`")
+        sui-modal-description
+          sui-form(@submit.prevent="")
+            sui-header Details
+            sui-form-fields
+              sui-form-field
+                sui-input(type="text", v-model="newCharacter.name", placeholder="name")
+              sui-form-field
+                sui-dropdown(placeholder="Avatar", selection, :options="avatars", v-model="newCharacter.avatar")
+            sui-header Attributes: {{ availablePoints }} points remaning
+            sui-grid
+              sui-grid-column(:width="8", v-for="attribute in attributes" :key="attribute")
+                sui-segment
+                  sui-statistic(horizontal)
+                    sui-statistic-value {{ newCharacter.attributes[attribute] }}
+                    sui-statistic-label {{ attribute }}
+                  sui-button(color="orange", circular, floated="left", icon="minus")
+                  sui-button(color="teal", circular, floated="right", icon="add")
+                  sui-progress(attached, bottom, :percent="newCharacter.attributes[attribute]/20*100")
+      sui-modal-actions
+        sui-button(color="orange", basic, icon="close", @click="creationModal=false") Cancel
+        sui-button(color="grey", basic, icon="redo", @click="resetCharacter") Reset
+        sui-button(color="teal", basic, icon="check") Create
+</template>
+
+<script>
+import http from "@/http";
+import CharacterItem from "@/components/CharacterItem.vue";
+export default {
+  name: "Characters",
+  components: {
+    CharacterItem
+  },
+  data() {
+    return {
+      characters: [{
+        _id: "13F3V34GBB",
+        avatar: "boris_by_charro_art_d8eta2f-pre.jpg",
+        name: "Kagamino",
+        birthDate: "01-01-1998",
+        actionPoints: 400
+      }],
+      creationModal: false,
+      newCharacter: { attributes: { } },
+      avatars: [],
+      attributes: ['strength', 'constitution', 'dexterity', 'intelligence', 'wisdom', 'charisma'],
+      availablePoints: 15
+    }
+  },
+  created() {
+    this.attributes.forEach(attribute => {
+      this.newCharacter.attributes[attribute] = 10
+    });
+    http()
+      .get('http://localhost:3000/characters/avatars')
+      .then(res => this.avatars = res.data.avatars.map(avatar => ({ text: avatar, value: avatar })))
+  },
+  methods: {
+    resetCharacter() {
+      this.characters = { attributes: { } };
+      this.attributes.forEach(attribute => {
+        this.newCharacter.attributes[attribute] = 10
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/front/src/views/Home.vue b/front/src/views/Home.vue
index c048ee965b20b83451a0472ff7ffdb80f1f4a71a..8270dfb73599207a26edf046525e7c78e40cc7a0 100644
--- a/front/src/views/Home.vue
+++ b/front/src/views/Home.vue
@@ -1,6 +1,5 @@
 <template lang="pug">
-  .home
-    sui-image(src="img/wallpaper.jpg")
+  sui-image(src="img/wallpaper.jpg")
 </template>
 
 <script>