diff --git a/src/app/vote-choice/vote-choice.component.html b/src/app/vote-choice/vote-choice.component.html
index e4a30afd..aee7a1b8 100644
--- a/src/app/vote-choice/vote-choice.component.html
+++ b/src/app/vote-choice/vote-choice.component.html
@@ -1,52 +1,42 @@
-<div class="choice_container">
-    <div class="info">
-        <div class="date" *ngIf="choice.date">
-            <div class="date-day">
-                {{choice.date | date:'EEEE'}}
-            </div>
-            <div class="date-month-number">
-                {{choice.date | date:'dd'}}
-            </div>
-            <div class="date-month">
-                {{choice.date | date:'LLLL'}}
-            </div>
-            <div class="date-hour">
-                {{choice.date | date:'H:m'}}
-            </div>
-            <div class="description">
-                {{choice.text}}
-            </div>
-            <h3>{{choice.date | date:'EEEE'}} <span>{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLLL'}} </h3>
-            <h3>08:00</h3>
-        </div>
-        <div class="nombre_vote">
-        <span class="count-yes">
-            <p>{{choice.votesCount.yes}}</p><img width="20px" height="21px" src="../../assets/img/votant-sur.svg">
-        </span>
-            <span class="count-maybe">
-            <p>{{choice.votesCount.maybe}}</p><img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg">
-        </span>
-        </div>
-        <div class="vote">
-            <!-- show only the yes check if the config is set to simpleAnswer -->
-            <button>
-            <img width="16px" height="12px"
-                 src="../../assets/img/check.svg"
-                 (click)="setAnswserTo('yes')">
-                 </button>
-                 <button>
-            <img width="19px" height="15px"
-                 src="../../assets/img/check-2.svg"
-                 (click)="setAnswserTo('maybe')"
-                 *ngIf="!choice.simpleAnswer">
-                 </button>
-                 <button>
-            <img width="12px" height="12px"
-                 src="../../assets/img/croix.svg"
-                 (click)="setAnswserTo('no')"
-                 *ngIf="!choice.simpleAnswer">
-                 </button>
-        </div>
+<div class="choicebox choicebox--active">
 
+    <div class="choicebox__time">
+        <div class="choicebox__date" *ngIf="choice.date">
+            {{choice.date | date:'EEE'}} <span class="choicebox__day">{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLL'}}
+        </div>
+        <div class="choicebox__hour">
+            08:00
+        </div>
     </div>
+    <div class="choicebox__actions">
+        <!-- show only the yes check if the config is set to simpleAnswer -->
+        <button class="choicebox__btn choicebox__btn--yes" type="button">
+            <img src="../../assets/img/check.svg" (click)="setAnswserTo('yes')" alt="">
+        </button>
+        <button class="choicebox__btn choicebox__btn--maybe" type="button">
+            <img src="../../assets/img/check-2.svg" (click)="setAnswserTo('maybe')" alt="" *ngIf="!choice.simpleAnswer">
+        </button>
+        <button class="choicebox__btn choicebox__btn--no" type="button">
+            <img src="../../assets/img/croix.svg" (click)="setAnswserTo('no')" alt="" *ngIf="!choice.simpleAnswer">
+        </button>
+    </div>
+    <div class="choicebox__count">
+        <div class="choicebox__votes">
+            <div class="choicebox__vote choicebox__vote--yes">
+                {{choice.votesCount.yes}}
+                <img width="20px" height="21px" src="../../assets/img/votant-sur.svg" alt="">
+            </div>
+            <div class="choicebox__vote choicebox__vote--maybe">
+                {{choice.votesCount.maybe}}
+                <img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg" alt="">
+            </div>
+        </div>
+        <div class="choicebox__countxt">
+            Choix ayant reçu le plus de votes
+        </div>
+    </div>
+
+
 </div>
+
+<br><!-- à virer -->
\ No newline at end of file
diff --git a/src/app/vote-choice/vote-choice.component.scss b/src/app/vote-choice/vote-choice.component.scss
index a1303168..b28c4636 100644
--- a/src/app/vote-choice/vote-choice.component.scss
+++ b/src/app/vote-choice/vote-choice.component.scss
@@ -1,67 +1,164 @@
-.choice_container {
-    width: 320px;
-    height: 172px;
-    box-shadow: 0 3px 6px 0 rgba(black, 0.2);
-    overflow: auto;
-    display: flex;
-align-items: center;
-flex-direction: row;
-}
-.vote img{
-  vertical-align: middle;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
+// ---------------------------------------------------------
+// -- VOTE CHOICE COMPONENT
+// ---------------------------------------------------------
+
+// -- IMPORTS
+// ----------------------------
+
+@import "../../assets/scss/variables";
+
+
+
+// -- VARIABLES
+// ----------------------------
+
+$box-padding: 2rem;
+$box-border-width: .6rem;
+$btn-size: 5rem;
+$btn-margin-x: 1rem;
+$btn-margin-y: 1.5rem;
+$btn-wrap-size: calc(2 * #{$btn-size} + 4 * #{$btn-margin-x});
+$breakpoint-responsive: 640px; // à définir
+
+
+
+// -- GLOBAL
+// ----------------------------
+
+.choicebox {
+    position: relative;
+    min-width: 32rem;
+    padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width});
+    border-left: $box-border-width solid transparent;
+    background-color: $white;
+    box-shadow: 0 .3rem .6rem 0 rgba($black, .2);
+    &--active {
+        padding-left: $box-padding;
+        border-left-color: $primary_color;
+    }
+
+    @media (min-width: $breakpoint-responsive) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
 
 }
 
-h2, h3 {
-    font-weight: normal;
+
+
+// -- DATE
+// ----------------------------
+
+.choicebox__time {
+    margin-bottom: 3rem;
+    padding-right: $btn-wrap-size;
+    font-size: 1.8rem;
+
+    @media (min-width: $breakpoint-responsive) {
+        margin-bottom: 0;
+        padding-right: 0;
+    }
 }
 
-span {
+.choicebox__date {
+    margin-bottom: .5rem;
+    white-space: nowrap;
+    text-transform: capitalize;
+
+    @media (min-width: $breakpoint-responsive) {
+        margin-bottom: 0;
+    }
+}
+
+.choicebox__day {
+    font-size: 2.4rem;
     font-weight: bold;
-    font-size: 24px;
 }
 
-.nombre_vote {
+
+
+// -- VOTE BTNS
+// ----------------------------
+
+.choicebox__actions {
+    position: absolute;
+    display: flex;
+    max-width: $btn-wrap-size;
+    top: 50%;
+    right: $box-padding;
+    flex-flow: row-reverse wrap;
+    transform: translateY(-50%);
+
+    @media (min-width: $breakpoint-responsive) {
+        position: static;
+        max-width: none;
+        flex-flow: row nowrap;
+        transform: none;
+    }
+}
+
+.choicebox__btn {
+    display: flex;
+    width: $btn-size;
+    height: $btn-size;
+    align-items: center;
+    justify-content: center;
+    margin: $btn-margin-y $btn-margin-x;
+    border: .1rem solid $primary_color;
+    border-radius: 50%;
+
+    @media (min-width: $breakpoint-responsive) {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    &:focus,
+    &:hover,
+    &:active {
+        border-color: #ccc9c9;
+        background-color: #f7f7f7;
+    }
+
+    &--maybe {
+        position: relative;
+        top: calc( (#{$btn-size} + 2 * #{$btn-margin-y}) / 2 );
+        @media (min-width: $breakpoint-responsive) {
+            top: auto;
+            left: auto;
+        }
+    }
+
+    &--active {
+        border-width: .3rem;
+        border-color: #bf83c2;
+    }
+}
+
+
+
+// -- VOTE COUNT
+// ----------------------------
+
+.choicebox__count {
+    padding-right: $btn-wrap-size;
+
+    @media (min-width: $breakpoint-responsive) {
+        padding-right: 0;
+    }
+}
+
+.choicebox__vote {
+    display: inline-block;
     vertical-align: middle;
-    float: left;
+    margin-right: 3rem;
+}
 
-}
-.nombre_vote span{
-  display: flex;
-  align-items: center;
-}
-// TODO intricate selectors
-.nombre_vote p {
-    font-weight: normal;
-    font-size: 16px;
-}
-.vote{
-  justify-content: flex-end;
-  align-items: flex-end;
-}
-.vote button{
-border: 1px solid  #aeafb1;;
-border-radius: 50%;
-width:48px;
-height: 48px;
-display: flex;
-align-items: center;
-}
-.vote button:hover{
-  border-color: #807e7e;
-  transition:0,5s;
-}
-.vote button:focus{
-  border:3px solid #bf83c2;
-  outline:0;
-}
-.nombre_vote img{
-/*  vertical-align: middle;
-  display:inline;*/
-  display: block;
-width: 20px;
-height: 20px;
-}
+.choicebox__countxt {
+    display: none;
+    margin-top: .5rem;
+    color: $primary_color;
+    .choicebox--active & {
+        display: block;
+    }
+}
\ No newline at end of file