diff --git a/resources/ts/bo/components/QrCodeComponent.vue b/resources/ts/bo/components/QrCodeComponent.vue
index 58054ae..ddaeb5b 100644
--- a/resources/ts/bo/components/QrCodeComponent.vue
+++ b/resources/ts/bo/components/QrCodeComponent.vue
@@ -158,12 +158,18 @@
                   for="dotsOptions-color"
                   class="form-label"
                 >Couleur des points</label>
-                <input
-                  v-model="options.dotsOptions.color"
-                  placeholder="Add data"
-                  class="form-control"
-                  id="dotsOptions-color"
-                >
+                <div class="d-flex justify-content-center my-3">
+                  <Vue3ColorPicker
+                    v-model="options.dotsOptions.color"
+                    mode="solid"
+                    type="HEX"
+                    input-type="RGB"
+                    :show-input-menu="false"
+                    :show-picker-mode="false"
+                    :show-color-list="false"
+                    :show-alpha="false"
+                  />
+                </div>
 
                 <label
                   for="dotsOptions-type"
@@ -225,12 +231,18 @@
                   for="cornersSquareOptions-color"
                   class="form-label"
                 >Couleur des coins</label>
-                <input
-                  v-model="options.cornersSquareOptions.color"
-                  placeholder="Add data"
-                  class="form-control"
-                  id="cornersSquareOptions-color"
-                >
+                <div class="d-flex justify-content-center my-3">
+                  <Vue3ColorPicker
+                    v-model="options.cornersSquareOptions.color"
+                    mode="solid"
+                    type="HEX"
+                    input-type="RGB"
+                    :show-input-menu="false"
+                    :show-picker-mode="false"
+                    :show-color-list="false"
+                    :show-alpha="false"
+                  />
+                </div>
 
                 <label
                   for="cornersSquareOptions-type"
@@ -257,12 +269,18 @@
                   for="cornersDotOptions-color"
                   class="form-label"
                 >Couleur de l'intérieur des coins</label>
-                <input
-                  v-model="options.cornersDotOptions.color"
-                  placeholder="Add data"
-                  class="form-control"
-                  id="cornersDotOptions-color"
-                >
+                <div class="d-flex justify-content-center my-3">
+                  <Vue3ColorPicker
+                    v-model="options.cornersDotOptions.color"
+                    mode="solid"
+                    type="HEX"
+                    input-type="RGB"
+                    :show-input-menu="false"
+                    :show-picker-mode="false"
+                    :show-color-list="false"
+                    :show-alpha="false"
+                  />
+                </div>
 
                 <label
                   for="cornersDotOptions-type"