diff --git a/.playground/pages/composant/form/client.vue b/.playground/pages/composant/form/client.vue
index ac6131c..e2887a1 100644
--- a/.playground/pages/composant/form/client.vue
+++ b/.playground/pages/composant/form/client.vue
@@ -78,7 +78,10 @@
             <div class="grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
               <MalioInputTextArea label="Descritpion" resize="none" groupClass="row-span-2" textInput="h-full"/>
               <MalioInputText v-model="concurrent" label="Concurrent"/>
-              <MalioInputText label="Date création"/>
+              <MalioDate
+                v-model="dateCreation"
+                label="Date création"
+              />
               <MalioInputText label="Nombre de salariés" />
               <MalioInputAmount label="CA"/>
               <MalioInputText label="Dirigeant" />
@@ -158,6 +161,7 @@
 
 <script setup lang="ts">
 import {ref, computed, watch} from 'vue'
+import MalioDate from "../../../../app/components/malio/date/Date.vue";
 
 type Commune = {
   nom: string
@@ -279,6 +283,7 @@ const onSearchAdresse = async (query: string) => {
 
 const tabsValue = ref('information')
 const concurrent = ref('')
+const dateCreation = ref<string | null>(null)
 
 const informationValid = computed(() => concurrent.value.trim().length > 0)
 const adressesValid = computed(() => /^\d{5}$/.test(codePostal.value))
diff --git a/app/components/malio/date/internal/CalendarField.vue b/app/components/malio/date/internal/CalendarField.vue
index 826e320..15e9148 100644
--- a/app/components/malio/date/internal/CalendarField.vue
+++ b/app/components/malio/date/internal/CalendarField.vue
@@ -37,7 +37,7 @@
           v-if="showClear"
           type="button"
           data-test="clear"
-          class="text-m-muted hover:text-black"
+          class="text-m-muted hover:text-m-primary"
           aria-label="Effacer la date"
           @click.stop="emit('clear')"
         >