diff --git a/assets/css/app.scss b/assets/css/app.scss
index 960c0b40d1..f3e5dde6b8 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -272,12 +272,7 @@
     @apply w-auto;
   }
 
-  // Forms
-  input {
-    appearance: auto !important;
-    border-width: 1px !important;
-  }
-
+  // Form
   .has-error input, .has-error select {
     border-color: red !important;
   }
diff --git a/assets/css/scss/atoms/_color_picker.scss b/assets/css/scss/atoms/_color_picker.scss
new file mode 100644
index 0000000000..7a6e0f3456
--- /dev/null
+++ b/assets/css/scss/atoms/_color_picker.scss
@@ -0,0 +1,29 @@
+.color-picker {
+  @apply flex flex-col justify-center gap-0 relative;
+
+  label {
+    @apply absolute -top-2.5 left-2 text-caption px-1 bg-white text-primary z-[2] max-w-full truncate;
+  }
+
+  input[type="color"] {
+    @apply h-auto w-12 cursor-pointer p-2 bg-white border-support-3 border border-r-0 transition-none;
+  }
+
+  .p-inputgroup .p-inputtext {
+    @apply w-24 transition-none grow-0 shrink-0;
+  }
+
+  &:hover {
+    input[type="color"],
+    .p-inputgroup .p-inputtext {
+      @apply border-primary;
+    }
+  }
+
+  &:has(.p-inputtext:focus) {
+    input[type="color"],
+    input[type="color"] {
+      @apply border-primary;
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/css/scss/index.scss b/assets/css/scss/index.scss
index 26199447da..71fa716aa0 100755
--- a/assets/css/scss/index.scss
+++ b/assets/css/scss/index.scss
@@ -19,6 +19,7 @@
 @import "atoms/buttons";
 @import "atoms/calendar";
 @import "atoms/checkbox";
+@import "atoms/color_picker";
 @import "atoms/divider";
 @import "atoms/dropdown";
 @import "atoms/fieldset";
diff --git a/assets/vue/components/basecomponents/BaseColorPicker.vue b/assets/vue/components/basecomponents/BaseColorPicker.vue
index 3e80b51437..aa1ea5cbe8 100644
--- a/assets/vue/components/basecomponents/BaseColorPicker.vue
+++ b/assets/vue/components/basecomponents/BaseColorPicker.vue
@@ -1,38 +1,27 @@
 <template>
-  <div class="flex flex-col justify-center gap-0">
-    <p
+  <div class="color-picker">
+    <label
       v-if="label"
-      class="text-body-2 mb-1.5"
       v-text="label"
     />
-    <div class="flex flex-row gap-2 h-10">
+    <InputGroup>
       <input
         :value="hexColor"
-        class="h-12 w-12 cursor-pointer rounded-lg"
         type="color"
         @input="inputColorPicked($event.target.value)"
       />
-      <BaseInputText
-        label=""
-        class="w-32"
-        input-class="mb-0"
+      <InputText
+        :invalid="inputHexError !== ''"
         :model-value="inputText"
-        :error-text="inputHexError"
-        :is-invalid="inputHexError !== ''"
-        :form-submitted="inputHexError !== ''"
         @update:model-value="inputColorPickedFromInputText"
       />
-    </div>
+    </InputGroup>
     <small
       v-if="error"
-      class="text-danger h-4"
+      class="p-error"
     >
       {{ error }}
     </small>
-    <div
-      v-else
-      class="h-4"
-    ></div>
   </div>
 </template>
 
@@ -40,7 +29,8 @@
 import Color from "colorjs.io"
 import { computed, onMounted, ref, watch } from "vue"
 import { useI18n } from "vue-i18n"
-import BaseInputText from "./BaseInputText.vue"
+import InputGroup from "primevue/inputgroup"
+import InputText from "primevue/inputtext"
 
 const { t } = useI18n()