diff --git a/client/index.html b/client/index.html
index 448c204..e20ac1d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
+    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css"> 
     <title>client</title>
   </head>
   <body>
diff --git a/client/package-lock.json b/client/package-lock.json
index bdd95e7..bce7db2 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1797,6 +1797,14 @@
         "electron-to-chromium": "^1.3.30"
       }
     },
+    "buefy": {
+      "version": "0.8.13",
+      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.13.tgz",
+      "integrity": "sha512-SpJq1Bl569mT6YujrEpyqn1al6U2PcBBQkVdgdKFrW+zjh1BAcs3+sNx7+r0tPSBsLYsSU2ZZsfkFzWOnOTX8A==",
+      "requires": {
+        "bulma": "0.7.5"
+      }
+    },
     "buffer": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
diff --git a/client/package.json b/client/package.json
index 182fdbf..dcbf88b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^0.18.1",
+    "buefy": "^0.8.13",
     "bulma": "^0.7.5",
     "bulma-slider": "^2.0.0",
     "vue": "^2.6.11",
diff --git a/client/src/App.vue b/client/src/App.vue
index 89a5678..6599459 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -10,28 +10,30 @@ export default {
   name: 'App',
 };
 </script>
+<style lang="scss">
+@import "~bulma/sass/utilities/_all";
+  $primary: #00858C;
+  $primary-invert: findColorInvert($primary);
+$colors: (
+    "white": ($white, $black),
+    "black": ($black, $white),
+    "light": ($light, $light-invert),
+    "dark": ($dark, $dark-invert),
+    "primary": ($primary, $primary-invert),
+    "info": ($info, $info-invert),
+    "success": ($success, $success-invert),
+    "warning": ($warning, $warning-invert),
+    "danger": ($danger, $danger-invert),
 
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-h1,h2 {
-  font-weight: normal;
-  font-size: 2em;
-  font-weight: bold;
-  
-}
+);
+$link: $primary;
+$link-invert: $primary-invert;
+$link-focus-border: $primary;
 
-p {
-  text-align: justify;
-}
+// Import Bulma and Buefy styles
+@import "~bulma";
+@import "~buefy/src/scss/buefy";
 
 
-.hero {
-    background-color: #00858C;
-    color: white;
-}
-
 </style>
+
diff --git a/client/src/components/Teammood.vue b/client/src/components/Teammood.vue
index 064090d..5a75a4d 100644
--- a/client/src/components/Teammood.vue
+++ b/client/src/components/Teammood.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <section class="hero has-text-centered is-fullheigh">
+    <section class="hero is-primary has-text-centered is-fullheigh">
       <div class="hero-body">
-        <h1 class="has-text-white-bis title">Teammood</h1>
+        <h1 class="title">Teammood</h1>
         <h2 class="Subtitle">Bienvenue {{$store.getters.name}}</h2>
       </div>
     </section>
@@ -11,18 +11,17 @@
         <div class="field is-grouped-centered">
           <div class="control">
             <label class="label">Humeur</label>
-            <input title="humeur" v-model="humeur" id="humeur" class="slider  is-fullwidth is-medium is-success is-circle" step="1" min="0" max="5"  type="range">
-            <output for="humeur">{{humeur}}</output>
+            <b-slider rounded title="humeur" v-model="humeur" id="humeur" :step="1" :min="0" :max="5"  ></b-slider>
           </div>
           <div class="control">
             <label class="label">stress</label>
-            <input title="stress" v-model="stress" id="stress"  class="slider  is-fullwidth is-medium is-success is-circle" step="1" min="0" max="5"  type="range">
-            <output for="stress">{{stress}}</output>
+            <b-slider rounded title="stress" v-model="stress" id="stress"   :step="1" :min="0" :max="5"></b-slider>
+
           </div>
           <div class="control">
             <label class="label">fatigue</label>
-            <input title="fatigue" v-model="fatigue" id="fatigue"  class="slider  is-fullwidth is-medium is-success is-circle" step="1" min="0" max="5"  type="range">
-          <output for="fatigue">{{fatigue}}</output>
+            <b-slider rounded title="fatigue" v-model="fatigue" id="fatigue"  :step="1" :min="0" :max="5"  ></b-slider>
+
           </div>
 
 
@@ -73,7 +72,7 @@ export default {
   },
   mounted() {
 
-    
+    console.log(this)
 
     if(!this.$store.getters.name){
       this.showModalname=true;
diff --git a/client/src/components/modal.vue b/client/src/components/modal.vue
index 5986b79..c5b861c 100644
--- a/client/src/components/modal.vue
+++ b/client/src/components/modal.vue
@@ -1,8 +1,8 @@
 <template>
 <div>
-  <div class="modal is-active">
+  <div :width="640" class="modal is-active">
     <div class="modal-background"></div>
-     <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
+      <button v-if="this.$store.getters.name" class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
     <div class="modal-content box">
          <slot></slot>
     </div>
diff --git a/client/src/components/modalname.vue b/client/src/components/modalname.vue
index 53f472f..b638ca4 100644
--- a/client/src/components/modalname.vue
+++ b/client/src/components/modalname.vue
@@ -1,8 +1,8 @@
 <!-- components/Login.vue -->
 <template>
   <modal @close="$emit('close')">
-      <div class="hero">
-        <div class="hero-body has-text-centered">
+      <div class="hero is-primary ">
+        <div class="hero-body  has-text-centered">
           <h2 class="has-text-white-bis title ">Entrer votre Nom.</h2>
           <p class="subtitle error-msg">{{ errorMsg }}</p>
         </div>
diff --git a/client/src/main.js b/client/src/main.js
index ceff0b1..0016f01 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -4,8 +4,9 @@ import Vue from 'vue';
 import App from './App';
 import router from './router';
 import store from './store';
-import './../node_modules/bulma/css/bulma.css';
-import './../node_modules/bulma-slider/dist/css/bulma-slider.min.css';
+import Buefy from 'buefy'
+import 'buefy/dist/buefy.css'
+Vue.use(Buefy)
 Vue.config.productionTip = false;
 /* eslint-disable no-new */
 new Vue({
diff --git a/readme.md b/readme.md
index 8a8f3e2..1372983 100644
--- a/readme.md
+++ b/readme.md
@@ -1 +1 @@
-![site](img/site.png)
\ No newline at end of file
+![site](img/site.png)pal
\ No newline at end of file
