diff --git a/client/src/App.vue b/client/src/App.vue
index b7094cc..7c5a624 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,91 +1,95 @@
 <template>
-    <div id="app">
-        <h2 id="header">Salut {{name}} !</h2>
-        <Sockets/>
-        <div id="game">
-            <Hand :cards="mockCards()"/>
-            <label for="messages"> Choose a message:</label>
-            <select v-model="message" name="message" id="messages">
-                <option value="WAITING">J'attends</option>
-                <option value="READY">Prêt à jouer !</option>
-                <option value="BET">Pari plus haut</option>
-                <option value="MENTEUR">Menteur !</option>
-            </select>
-            <button v-on:click="sendMessage(message)">Envoyer</button>
-        </div>
+  <div id="app">
+    <h2 id="header">Salut {{ name }} !</h2>
+    <Sockets />
+    <div id="game">
+      <Hand :cards="mockCards()" />
+      <label for="messages"> Choose a message:</label>
+      <select v-model="message" name="message" id="messages">
+        <option value="WAITING">J'attends</option>
+        <option value="READY">Prêt à jouer !</option>
+        <option value="BET">Pari plus haut</option>
+        <option value="MENTEUR">Menteur !</option>
+      </select>
+      <button v-on:click="sendMessage(message)">Envoyer</button>
     </div>
+  </div>
 </template>
 
 <script>
+import Vue from "vue";
+import "es6-promise/auto"; // Needed for Promise polyfill
+import VueSocketIO from "vue-socket.io";
+import Vuex, { mapGetters, mapMutations } from "vuex";
+import Hand from "./components/Hand";
+import Sockets from "./Sockets";
+import { store } from "./vuex-store";
+import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-vue/dist/bootstrap-vue.css";
 
-    import Vue from 'vue'
-    import 'es6-promise/auto' // Needed for Promise polyfill
-    import VueSocketIO from 'vue-socket.io'
-    import Vuex, {mapGetters, mapMutations} from 'vuex';
-    import Hand from "./components/Hand";
-    import Sockets from "./Sockets";
-    import {store} from './vuex-store'
+Vue.use(Vuex);
+Vue.use(BootstrapVue);
+Vue.use(IconsPlugin);
 
-    Vue.use(Vuex);
+Vue.use(
+  new VueSocketIO({
+    debug: true,
+    connection: "http://localhost:9042",
+    vuex: {
+      store,
+      actionPrefix: "SOCKET_",
+      mutationPrefix: "SOCKET_"
+    },
+    options: { path: "/socket.io/" } //Optional options
+  })
+);
 
-    Vue.use(new VueSocketIO({
-        debug: true,
-        connection: 'http://localhost:9042',
-        vuex: {
-            store,
-            actionPrefix: 'SOCKET_',
-            mutationPrefix: 'SOCKET_'
-        },
-        options: {path: "/socket.io/"} //Optional options
-    }));
-
-
-    export default {
-        name: "App",
-        store: store,
-        components: {
-            Sockets,
-            Hand
-        },
-        data: function () {
-            return {
-                message: "WAITING"
-            }
-        },
-        computed: {
-            ...mapGetters(['isConnected', 'name', 'socketMessage'])
-        },
-        methods: {
-            sendMessage: function (message) {
-                console.log("User wants to send", message);
-                this.$socket.emit("message", message);
-            },
-            mockCards() {
-                return [
-                    {"value": "ace", "color": "hearts"},
-                    {"value": "ace", "color": "clubs"},
-                    {"value": "ace", "color": "diamonds"},
-                    {"value": "ace", "color": "spades"}
-                ];
-            },
-            ...mapMutations(['setName']),
-            // ...mapActions(['setNumberToRemoteValue']),
-        }
+export default {
+  name: "App",
+  store: store,
+  components: {
+    Sockets,
+    Hand
+  },
+  data: function() {
+    return {
+      message: "WAITING"
     };
-
+  },
+  computed: {
+    ...mapGetters(["isConnected", "name", "socketMessage"])
+  },
+  methods: {
+    sendMessage: function(message) {
+      console.log("User wants to send", message);
+      this.$socket.emit("message", message);
+    },
+    mockCards() {
+      return [
+        { value: "ace", color: "hearts" },
+        { value: "ace", color: "clubs" },
+        { value: "ace", color: "diamonds" },
+        { value: "ace", color: "spades" }
+      ];
+    },
+    ...mapMutations(["setName"])
+    // ...mapActions(['setNumberToRemoteValue']),
+  }
+};
 </script>
 
 <style>
-    #app {
-        font-family: Avenir, Helvetica, Arial, sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-align: center;
-        color: #2c3e50;
-        margin-top: 60px;
-    }
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
 
-    #game {
-        margin-top: 20px;
-    }
+#game {
+  margin-top: 20px;
+}
 </style>
diff --git a/client/src/components/Card.vue b/client/src/components/Card.vue
index de97a64..148e181 100644
--- a/client/src/components/Card.vue
+++ b/client/src/components/Card.vue
@@ -1,55 +1,72 @@
 <template>
-    <div class="card">
-        <img class="card-pic" v-bind:src="imageSrc()">
-        <p>{{ text() }}</p>
+  <div class="card">
+    <div>
+      <b-card
+        title="Card Title"
+        img-src="https://picsum.photos/600/300/?image=25"
+        img-alt="Image"
+        img-top
+        tag="article"
+        style="max-width: 20rem;"
+        class="mb-2"
+      >
+        <b-card-text>
+          Some quick example text to build on the card title and make up the
+          bulk of the card's content.
+        </b-card-text>
+
+        <b-button href="#" variant="primary">Go somewhere</b-button>
+      </b-card>
     </div>
+    <img class="card-pic" v-bind:src="imageSrc()" />
+    <p>{{ text() }}</p>
+  </div>
 </template>
 <script>
-    export default {
-        name: "Card",
-        props: {
-            value: String,
-            color: String,
-        },
-        methods: {
-            imageSrc() {
-                return `/img/${this.value}_of_${this.color}.png`
-            },
-            text: function () {
-                console.log("Generating text for", this);
-                // Translate
-                let valueText = {
-                    "2": "Deux",
-                    "3": "Trois",
-                    "4": "Quatre",
-                    "5": "Cinq",
-                    "6": "Six",
-                    "7": "Sept",
-                    "8": "Huit",
-                    "9": "Neuf",
-                    "10": "Dix",
-                    "jack": "Valet",
-                    "queen": "Dame",
-                    "king": "Roi",
-                    "ace": "As"
-                }[this.value];
-                let colorText = {
-                    "hearts": "Coeur",
-                    "spades": "Pique",
-                    "clubs": "Trèfle",
-                    "diamonds": "Carreau"
-                }[this.color];
+export default {
+  name: "Card",
+  props: {
+    value: String,
+    color: String
+  },
+  methods: {
+    imageSrc() {
+      return `/img/${this.value}_of_${this.color}.png`;
+    },
+    text: function() {
+      // Translate
+      let valueText = {
+        "2": "Deux",
+        "3": "Trois",
+        "4": "Quatre",
+        "5": "Cinq",
+        "6": "Six",
+        "7": "Sept",
+        "8": "Huit",
+        "9": "Neuf",
+        "10": "Dix",
+        jack: "Valet",
+        queen: "Dame",
+        king: "Roi",
+        ace: "As"
+      }[this.value];
+      let colorText = {
+        hearts: "Coeur",
+        spades: "Pique",
+        clubs: "Trèfle",
+        diamonds: "Carreau"
+      }[this.color];
 
-                // Capitalize
-                valueText = valueText.charAt(0).toUpperCase() + valueText.slice(1);
-                colorText = colorText.charAt(0).toUpperCase() + colorText.slice(1);
-                return `${valueText} de ${colorText}`
-            }
-        }
+      // Capitalize
+      valueText = valueText.charAt(0).toUpperCase() + valueText.slice(1);
+      colorText = colorText.charAt(0).toUpperCase() + colorText.slice(1);
+      return `${valueText} de ${colorText}`;
     }
+  }
+};
 </script>
 <style scoped>
-    .card-pic {
-        max-width: 150px;
-    }
-</style>
\ No newline at end of file
+.card-pic {
+  max-width: 150px;
+}
+</style>
diff --git a/client/src/components/Hand.vue b/client/src/components/Hand.vue
index 4d2b122..10c9616 100644
--- a/client/src/components/Hand.vue
+++ b/client/src/components/Hand.vue
@@ -1,33 +1,34 @@
 <template>
-    <div id="hand">
-        <p>{{count()}} cartes. </p>
-        <Card v-for="card in cards"
-              v-bind:key="card.value + ' ' + card.color"
-              v-bind:value="card.value"
-              v-bind:color="card.color"
-        />
-    </div>
+  <div id="hand">
+    <p>{{ count() }} cartes.</p>
+    <Card
+      v-for="card in cards"
+      v-bind:key="card.value + ' ' + card.color"
+      v-bind:value="card.value"
+      v-bind:color="card.color"
+    />
+  </div>
 </template>
 <script>
-    import Card from "./Card";
+import Card from "./Card";
 
-    export default {
-        name: "Hand",
-        components: {
-            Card
-        },
-        props: {
-            cards: Array,
-        },
-        methods: {
-            count() {
-                return this.cards.length;
-            }
-        }
+export default {
+  name: "Hand",
+  components: {
+    Card
+  },
+  props: {
+    cards: Array
+  },
+  methods: {
+    count() {
+      return this.cards.length;
     }
+  }
+};
 </script>
 <style scoped>
-    .card-pic {
-        max-width: 100px;
-    }
-</style>
\ No newline at end of file
+.card-pic {
+  max-width: 100px;
+}
+</style>