diff --git a/packages/synapse-bridge/CHANGELOG.md b/packages/synapse-bridge/CHANGELOG.md
index c3794f9b08..36b337a0cc 100644
--- a/packages/synapse-bridge/CHANGELOG.md
+++ b/packages/synapse-bridge/CHANGELOG.md
@@ -1,12 +1,12 @@
 #### v3.0.4
 
-- NirField: delete validation key in simple mode [`#3786`](https://github.com/assurance-maladie-digital/design-system/pull/3786)
-- DatePicker: fix hint padding [`#3781`](https://github.com/assurance-maladie-digital/design-system/pull/3781)
+-   NirField: delete validation key in simple mode [`#3786`](https://github.com/assurance-maladie-digital/design-system/pull/3786)
+-   DatePicker: fix hint padding [`#3781`](https://github.com/assurance-maladie-digital/design-system/pull/3781)
 
 #### v3.0.3
 
-- NotificationBar: fix success color [`#3777`](https://github.com/assurance-maladie-digital/design-system/pull/3777)
-- DatePicker: refacto and fix bugs [`#3763`](https://github.com/assurance-maladie-digital/design-system/pull/3763)
+-   NotificationBar: fix success color [`#3777`](https://github.com/assurance-maladie-digital/design-system/pull/3777)
+-   DatePicker: refacto and fix bugs [`#3763`](https://github.com/assurance-maladie-digital/design-system/pull/3763)
 
 #### v3.0.2
 
diff --git a/packages/synapse-bridge/src/form-builder/FormBuilder/tests/__snapshots__/FormBuilder.spec.ts.snap b/packages/synapse-bridge/src/form-builder/FormBuilder/tests/__snapshots__/FormBuilder.spec.ts.snap
index 96ca7c3c63..09f1e747cf 100644
--- a/packages/synapse-bridge/src/form-builder/FormBuilder/tests/__snapshots__/FormBuilder.spec.ts.snap
+++ b/packages/synapse-bridge/src/form-builder/FormBuilder/tests/__snapshots__/FormBuilder.spec.ts.snap
@@ -821,15 +821,15 @@ exports[`FormBuilder > renders correctly 1`] = `
       </h4>
       <!--v-if-->
       <div data-v-60156eea="" data-v-9067cb71="">
-        <div data-v-044548c4="" data-v-60156eea="" class="vd-select-btn-field" type="choiceButton" color="primary">
+        <div data-v-044548c4="" data-v-60156eea="" class="vd-select-btn-field bg-secondary" type="choiceButton" color="primary">
           <ul data-v-044548c4="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle vd-select-btn-field-toggle d-flex flex-wrap text-primary">
             <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Oui</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Oui</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
                 <!---->
                 <!---->
               </button></li>
             <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Non</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Non</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
                 <!---->
                 <!---->
               </button></li>
@@ -845,25 +845,25 @@ exports[`FormBuilder > renders correctly 1`] = `
       </h4>
       <!--v-if-->
       <div data-v-60156eea="" data-v-9067cb71="">
-        <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field" type="choiceButton" color="primary">
+        <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field bg-secondary" type="choiceButton" color="primary">
           <ul data-v-044548c4="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle flex-column vd-select-btn-field-toggle d-flex flex-wrap text-primary">
             <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="test1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Multiple 1</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Multiple 1</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
                 <!---->
                 <!---->
               </button></li>
             <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="22"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Multiple 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Multiple 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
                 <!---->
                 <!---->
               </button></li>
             <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="33"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Seul 1</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Seul 1</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
                 <!---->
                 <!---->
               </button></li>
             <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="44"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Seul 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Seul 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
                 <!---->
                 <!---->
               </button></li>
@@ -879,7 +879,7 @@ exports[`FormBuilder > renders correctly 1`] = `
       </h4>
       <!--v-if-->
       <div data-v-60156eea="" data-v-9067cb71="">
-        <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field" type="choiceButton" color="primary">
+        <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field bg-secondary" type="choiceButton" color="primary">
           <ul data-v-044548c4="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle flex-column vd-select-btn-field-toggle d-flex flex-wrap text-primary">
             <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--active v-btn--flat v-theme--light bg-primary v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-flat py-2 d-flex align-items-center justify-space-between" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="true" aria-label="Sélectionné" value="1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
                 <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Texte qui permet de tester sur plusieurs lignes</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: visible;" role="img" aria-hidden="false" aria-label="Sélectionné"></i></span>
@@ -887,7 +887,7 @@ exports[`FormBuilder > renders correctly 1`] = `
                 <!---->
               </button></li>
             <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Texte 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Texte 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
                 <!---->
                 <!---->
               </button></li>
@@ -903,7 +903,7 @@ exports[`FormBuilder > renders correctly 1`] = `
       </h4>
       <!--v-if-->
       <div data-v-60156eea="" data-v-9067cb71="">
-        <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field" type="choiceButton" variant="outlined" color="primary">
+        <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field bg-secondary" type="choiceButton" variant="outlined" color="primary">
           <ul data-v-044548c4="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle flex-column vd-select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Classic field">
             <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--active v-btn--flat v-theme--light bg-primary v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-flat py-2 d-flex align-items-center justify-space-between" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="true" aria-label="Sélectionné" value="0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
                 <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">S</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: visible;" role="img" aria-hidden="false" aria-label="Sélectionné"></i></span>
@@ -916,12 +916,12 @@ exports[`FormBuilder > renders correctly 1`] = `
                 <!---->
               </button></li>
             <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">L</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">L</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
                 <!---->
                 <!---->
               </button></li>
             <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">XL</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+                <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">XL</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
                 <!---->
                 <!---->
               </button></li>
diff --git a/packages/synapse-bridge/src/form-builder/FormField/fields/tests/__snapshots__/ChoiceField.spec.ts.snap b/packages/synapse-bridge/src/form-builder/FormField/fields/tests/__snapshots__/ChoiceField.spec.ts.snap
index 6f5bc459df..be00a6ff0a 100644
--- a/packages/synapse-bridge/src/form-builder/FormField/fields/tests/__snapshots__/ChoiceField.spec.ts.snap
+++ b/packages/synapse-bridge/src/form-builder/FormField/fields/tests/__snapshots__/ChoiceField.spec.ts.snap
@@ -293,20 +293,20 @@ exports[`ChoiceField > renders with multiple error messages 1`] = `
 <div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div data-v-60156eea="">
-      <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field" type="choiceButton" color="primary">
+      <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field bg-secondary" type="choiceButton" color="primary">
         <ul data-v-044548c4="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle flex-column vd-select-btn-field-toggle d-flex flex-wrap text-primary">
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">S</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">S</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">M</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">M</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="autre"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Autre</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Autre</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
@@ -324,20 +324,20 @@ exports[`ChoiceField > renders with single error message 1`] = `
 <div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div data-v-60156eea="">
-      <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field" type="choiceButton" color="primary">
+      <div data-v-044548c4="" data-v-60156eea="" class="vd-form-input vd-select-btn-field bg-secondary" type="choiceButton" color="primary">
         <ul data-v-044548c4="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle flex-column vd-select-btn-field-toggle d-flex flex-wrap text-primary">
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">S</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">S</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">M</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">M</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="autre"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Autre</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Autre</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
diff --git a/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue b/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue
index 980a32208a..0e300fcc15 100644
--- a/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue
+++ b/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue
@@ -307,7 +307,10 @@ export default defineComponent({
 								class="error-message"
 							>
 								<ul>
-									<li v-for="error in errorMessages" :key="error">
+									<li
+										v-for="error in errorMessages"
+										:key="error"
+									>
 										{{ error }}
 									</li>
 								</ul>
diff --git a/packages/synapse-bridge/src/patterns/NirField/tests/NirField.spec.ts b/packages/synapse-bridge/src/patterns/NirField/tests/NirField.spec.ts
index 119441c1ec..d185297955 100644
--- a/packages/synapse-bridge/src/patterns/NirField/tests/NirField.spec.ts
+++ b/packages/synapse-bridge/src/patterns/NirField/tests/NirField.spec.ts
@@ -591,5 +591,5 @@ describe('NirField', () => {
 
 		expect(wrapper.text()).toContain(locales.errorRequiredNumber)
 		expect(wrapper.text()).not.toContain(locales.errorRequiredKey)
-	});
+	})
 })
diff --git a/packages/synapse-bridge/src/patterns/NotificationBar/NotificationBar.vue b/packages/synapse-bridge/src/patterns/NotificationBar/NotificationBar.vue
index 3099b83647..1012faad02 100644
--- a/packages/synapse-bridge/src/patterns/NotificationBar/NotificationBar.vue
+++ b/packages/synapse-bridge/src/patterns/NotificationBar/NotificationBar.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import {defineComponent} from 'vue'
-import {mapActions, mapGetters} from 'vuex'
+import { defineComponent } from 'vue'
+import { mapActions, mapGetters } from 'vuex'
 import {
 	mdiAlertCircleOutline,
 	mdiAlertOctagonOutline,
@@ -8,10 +8,10 @@ import {
 	mdiClose,
 	mdiInformationOutline,
 } from '@mdi/js'
-import {config} from './config'
-import {locales} from './locales'
-import {customizable} from '@/mixins/customizable'
-import type {IndexedObject} from '@/types'
+import { config } from './config'
+import { locales } from './locales'
+import { customizable } from '@/mixins/customizable'
+import type { IndexedObject } from '@/types'
 
 export default defineComponent({
 	mixins: [customizable(config)],
@@ -90,17 +90,18 @@ export default defineComponent({
 	watch: {
 		notification(): void {
 			if (!this.notification) {
-				this.snackbar = false;
-				return;
+				this.snackbar = false
+				return
 			}
 
-			this.snackbar = true;
+			this.snackbar = true
 			if (this.notification.type === 'success') {
-				this.snackbarColor = '#56C271';
+				this.snackbarColor = '#56C271'
 			} else {
-				this.snackbarColor = this.options.snackBar.color || this.notification.type;
+				this.snackbarColor =
+					this.options.snackBar.color || this.notification.type
 			}
-		}
+		},
 	},
 	methods: {
 		...mapActions('notification', {
@@ -145,7 +146,7 @@ export default defineComponent({
 
 			{{ notification?.message }}
 
-			<VSpacer/>
+			<VSpacer />
 
 			<VDivider
 				v-if="mobileVersion && hasLongContent"
@@ -164,7 +165,7 @@ export default defineComponent({
 					class="mx-4"
 				/>
 				<slot :attrs="actionSlotAttrs" name="action"></slot>
-				<slot name="default"/>
+				<slot name="default" />
 				<VBtn
 					:class="{ 'ma-0': smallCloseBtn }"
 					:color="contentColor"
@@ -245,6 +246,6 @@ $breakpoint-xs: 600px;
 
 :deep(.v-divider--vertical) {
 	height: 35px;
-	opacity: 0.50;
+	opacity: 0.5;
 }
 </style>
diff --git a/packages/synapse-bridge/src/patterns/SelectBtnField/SelectBtnField.vue b/packages/synapse-bridge/src/patterns/SelectBtnField/SelectBtnField.vue
index 9876888d6f..8d6819e92a 100644
--- a/packages/synapse-bridge/src/patterns/SelectBtnField/SelectBtnField.vue
+++ b/packages/synapse-bridge/src/patterns/SelectBtnField/SelectBtnField.vue
@@ -139,7 +139,10 @@ export default defineComponent({
 </script>
 
 <template>
-	<div :class="{ 'vd-form-input': !inline }" class="vd-select-btn-field">
+	<div
+		:class="{ 'vd-form-input': !inline }"
+		class="vd-select-btn-field bg-secondary"
+	>
 		<VBtnToggle
 			v-bind="options.btnToggle"
 			tag="ul"
@@ -178,7 +181,6 @@ export default defineComponent({
 						v-bind="options.icon"
 						:style="getIconStyles(item)"
 						role="img"
-						:hidden="!isSelected(item.value)"
 						:aria-hidden="!isSelected(item.value)"
 						aria-label="Sélectionné"
 					>
@@ -214,10 +216,12 @@ export default defineComponent({
 
 .vd-select-btn-field-toggle {
 	background: none !important;
+	padding-left: 0 !important;
 
 	.v-btn {
 		background: #fff;
 		border-width: 1px !important;
+		min-width: 48px !important;
 
 		&.v-btn--active::before {
 			opacity: 0 !important;
@@ -226,11 +230,11 @@ export default defineComponent({
 		:deep(.v-btn__content) {
 			flex-shrink: 1 !important;
 		}
+	}
 
-		:deep(.v-icon__svg) {
-			height: 1.5rem;
-			width: 1.5rem;
-		}
+	.v-icon {
+		height: 1.5rem;
+		width: 1.5rem;
 	}
 
 	&.flex-column {
diff --git a/packages/synapse-bridge/src/patterns/SelectBtnField/tests/__snapshots__/SelectBtnField.spec.ts.snap b/packages/synapse-bridge/src/patterns/SelectBtnField/tests/__snapshots__/SelectBtnField.spec.ts.snap
index ac1f3f2b03..133c41b7f4 100644
--- a/packages/synapse-bridge/src/patterns/SelectBtnField/tests/__snapshots__/SelectBtnField.spec.ts.snap
+++ b/packages/synapse-bridge/src/patterns/SelectBtnField/tests/__snapshots__/SelectBtnField.spec.ts.snap
@@ -4,15 +4,15 @@ exports[`SelectBtnField > display correctly in dark mode with an error 1`] = `
 <div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div>
-      <div data-v-044548c4="" class="vd-select-btn-field">
+      <div data-v-044548c4="" class="vd-select-btn-field bg-secondary">
         <ul data-v-044548c4="" class="v-btn-group v-theme--dark v-btn-group--density-default v-btn-toggle vd-select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="test1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 1</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 1</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="test2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
@@ -25,20 +25,20 @@ exports[`SelectBtnField > display correctly in dark mode with an error 1`] = `
 `;
 
 exports[`SelectBtnField > display correctly with an error 1`] = `
-<div data-v-044548c4="" class="vd-form-input vd-select-btn-field">
+<div data-v-044548c4="" class="vd-form-input vd-select-btn-field bg-secondary">
   <ul data-v-044548c4="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle flex-column vd-select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
     <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="test"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
         <!---->
         <!---->
       </button></li>
     <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="test2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
         <!---->
         <!---->
       </button></li>
     <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="test3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 3</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 3</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
         <!---->
         <!---->
       </button></li>
@@ -51,15 +51,15 @@ exports[`SelectBtnField > display correctly with in dark mode with an hint 1`] =
 <div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div>
-      <div data-v-044548c4="" class="vd-select-btn-field">
+      <div data-v-044548c4="" class="vd-select-btn-field bg-secondary">
         <ul data-v-044548c4="" class="v-btn-group v-theme--dark v-btn-group--density-default v-btn-toggle vd-select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="test1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 1</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 1</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
           <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="test2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
               <!---->
               <!---->
             </button></li>
@@ -72,20 +72,20 @@ exports[`SelectBtnField > display correctly with in dark mode with an hint 1`] =
 `;
 
 exports[`SelectBtnField > render correctly in multiple mode 1`] = `
-<div data-v-044548c4="" class="vd-form-input vd-select-btn-field">
+<div data-v-044548c4="" class="vd-form-input vd-select-btn-field bg-secondary">
   <ul data-v-044548c4="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle flex-column vd-select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
     <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="test"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
         <!---->
         <!---->
       </button></li>
     <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value=""><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
         <!---->
         <!---->
       </button></li>
     <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="test3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 3</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 3</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
         <!---->
         <!---->
       </button></li>
@@ -95,27 +95,27 @@ exports[`SelectBtnField > render correctly in multiple mode 1`] = `
 `;
 
 exports[`SelectBtnField > renders correctly 1`] = `
-<div data-v-044548c4="" class="vd-form-input vd-select-btn-field">
+<div data-v-044548c4="" class="vd-form-input vd-select-btn-field bg-secondary">
   <ul data-v-044548c4="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle flex-column vd-select-btn-field-toggle d-flex flex-wrap text-primary"></ul>
   <!--v-if-->
 </div>
 `;
 
 exports[`SelectBtnField > renders correctly with props 1`] = `
-<div data-v-044548c4="" class="vd-form-input vd-select-btn-field">
+<div data-v-044548c4="" class="vd-form-input vd-select-btn-field bg-secondary">
   <ul data-v-044548c4="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle flex-column vd-select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
     <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="test"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
         <!---->
         <!---->
       </button></li>
     <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value=""><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 2</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
         <!---->
         <!---->
       </button></li>
     <li data-v-044548c4="" class="vd-select-list-item"><button data-v-044548c4="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-selected="false" aria-label="" value="test3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 3</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" hidden="" aria-label="Sélectionné"></i></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-044548c4="" class="text-body-1">Test 3</span><i data-v-044548c4="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
         <!---->
         <!---->
       </button></li>