diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss
index e08569ff9..6089c0eee 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss
@@ -140,7 +140,7 @@ $colors: (
 
 // scss-docs-start theme-color-variables
 $primary:       $blue;
-$secondary:     $gray-200;
+$secondary:     $gray-500;
 $success:       $green;
 $info:          $yellow;
 $warning:       $orange;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue
index 42461bd06..3f8f3fcc9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="badge bg-secondary">{{ issue.text }}</span>
+  <span class="badge bg-chill-light-gray text-dark">{{ issue.text }}</span>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
index a1e2690e2..5add6b39c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
@@ -8,10 +8,10 @@
    </div>
    
    <div>
-      <button class="badge rounded-pill" :class="{ 'badge-primary': isEmergency, 'badge-secondary': !isEmergency }" @click="toggleEmergency">
+      <button class="badge rounded-pill" :class="{ 'bg-primary': isEmergency, 'bg-secondary': !isEmergency }" @click="toggleEmergency">
          {{ $t('course.emergency') }}
       </button>
-      <button class="badge rounded-pill" :class="{ 'badge-primary': isConfidential, 'badge-secondary': !isConfidential }" @click="toggleConfidential">
+      <button class="badge rounded-pill" :class="{ 'bg-primary': isConfidential, 'bg-secondary': !isConfidential }" @click="toggleConfidential">
          {{ $t('course.confidential') }}
       </button>
    </div>
@@ -82,7 +82,7 @@ export default {
     }
     button.badge {
        margin-left: 0.8em;
-       &.badge-secondary {
+       &.bg-secondary {
            opacity: 0.5;
            &:hover {
               opacity: 0.7;
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
index 24126302e..6ed158849 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
@@ -45,7 +45,7 @@
                                 class="badge-member{%- if m.holder %} holder{% endif -%}{%- if m.position.ordering >= 2 %} child{% endif -%}"
                                 title="{{ m.position.label.fr }}">
                                 {%- if m.holder %} 
-                                <span class="badge bg-secondary">
+                                <span class="badge bg-chill-light-gray text-chill-gray">
                                     {{ 'household.holder'|trans }}
                                 </span>
                                 {% endif -%}