diff --git a/app/assets/stylesheets/kluk.css b/app/assets/stylesheets/kluk.css
index 9fdd20d..152f4c3 100644
--- a/app/assets/stylesheets/kluk.css
+++ b/app/assets/stylesheets/kluk.css
@@ -20,39 +20,34 @@ body {
   background: black;
   width: 10px;
   height: 10px;
-  margin-left: 15px;
 }
 
 .bar-creatif {
   background: red;
   width: 10px;
   height: 10px;
-  margin-left: 15px;
 }
 
 .bar-frigo {
   background: gray;
   width: 10px;
   height: 10px;
-  margin-left: 15px;
 }
 
 .bar-croisiere {
   background: green;
   width: 10px;
   height: 10px;
-  margin-left: 15px;
 }
 
 .bar-en-charge {
   background: orange;
   width: 10px;
   height: 10px;
-  margin-left: 15px;
 }
 
 .bar-explain {
-  padding-left: 3px;
+  padding-left: 5px;
 }
 
 .day {
diff --git a/app/views/moods/index.html.erb b/app/views/moods/index.html.erb
index f9977f1..ac2c8cd 100644
--- a/app/views/moods/index.html.erb
+++ b/app/views/moods/index.html.erb
@@ -22,23 +22,23 @@
     </div>
     <div class="level m-auto">
       <div class="level-item has-text-centered">
-          <div class="bar-frigo"></div>
+          <span class="bar-frigo"></span>
           <div class="bar-explain">Triste</div>
       </div>
       <div class="level-item has-text-centered">
-        <div class="bar-en-charge"></div>
+        <span class="bar-en-charge"></span>
         <div class="bar-explain">En charge</div>
       </div>
       <div class="level-item has-text-centered">
-        <div class="bar-croisiere"></div>
+        <span class="bar-croisiere"></span>
         <div class="bar-explain">Croisiere</div>
       </div>
       <div class="level-item has-text-centered">
-        <div class="bar-creatif"></div>
+        <span class="bar-creatif"></span>
         <div class="bar-explain">Créatif</div>
       </div>
       <div class="level-item has-text-centered">
-        <div class="bar-afond"></div>
+        <span class="bar-afond"></span>
         <div class="bar-explain">A fond</div>
       </div>
     </div>