diff --git a/packages/configuration-builder/src/ColorPickerField/ColorPickerField.tsx b/packages/configuration-builder/src/ColorPickerField/ColorPickerField.tsx
index 03dd033a1..1343d1d1b 100644
--- a/packages/configuration-builder/src/ColorPickerField/ColorPickerField.tsx
+++ b/packages/configuration-builder/src/ColorPickerField/ColorPickerField.tsx
@@ -86,6 +86,7 @@ export function ColorPickerField(props: Props) {
 
   const state = useSelectState({
     ...props,
+<<<<<<< HEAD
     selectedKey: props.value,
     isDisabled: props.disabled,
     children: getColorItems(props.colors),
@@ -94,6 +95,12 @@ export function ColorPickerField(props: Props) {
       if (item) {
         props.onChange(item.textValue);
       }
+=======
+    isDisabled: props.disabled,
+    children: getColorItems(props.colors),
+    onSelectionChange: (key) => {
+      props.onChange(state.collection.getItem(key)!.textValue);
+>>>>>>> e2d57964 (Implement ColorPickerField)
     },
   });
 
@@ -145,7 +152,11 @@ export function ColorPickerField(props: Props) {
       >
         <Box {...valueProps} flexGrow={1} textAlign="left">
           <Body size={inputConfig.fontSize} color={props.disabled ? "disabled" : "primary"}>
+<<<<<<< HEAD
             {state.selectedItem ? state.selectedItem.rendered : ""}
+=======
+            {props.value}
+>>>>>>> e2d57964 (Implement ColorPickerField)
           </Body>
         </Box>
         <Box paddingLeft={16} aria-hidden="true">
@@ -157,7 +168,17 @@ export function ColorPickerField(props: Props) {
       </Box>
       {state.isOpen && (
         <Popover triggerRef={ref} onClose={state.close}>
+<<<<<<< HEAD
           <PalettesDropdown colors={props.colors} state={state} menuProps={menuProps} />
+=======
+          <PalettesDropdown
+            colors={props.colors}
+            value={props.value}
+            onChange={props.onChange}
+            state={state}
+            menuProps={menuProps}
+          />
+>>>>>>> e2d57964 (Implement ColorPickerField)
         </Popover>
       )}
     </Field>
diff --git a/packages/configuration-builder/src/ColorPickerField/PalettesDropdown.tsx b/packages/configuration-builder/src/ColorPickerField/PalettesDropdown.tsx
index 36a467da1..0f0bc3663 100644
--- a/packages/configuration-builder/src/ColorPickerField/PalettesDropdown.tsx
+++ b/packages/configuration-builder/src/ColorPickerField/PalettesDropdown.tsx
@@ -1,4 +1,5 @@
 import { Box, Card, Divider, Inline, Label, Stack } from "@buildo/bento-design-system";
+<<<<<<< HEAD
 import { ThemeConfig, useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
 import { colorBoxRecipe } from "./PalettesDropdown.css";
 import { SelectState } from "@react-stately/select";
@@ -10,6 +11,19 @@ import { PaletteName, getPalette, getPaletteKeyColor } from "../utils/paletteUti
 
 type Props = {
   colors: ThemeConfig["colors"];
+=======
+import { ThemeConfig } from "../ConfiguratorStatusContext";
+import { colorBoxRecipe } from "./PalettesDropdown.css";
+import { SelectState } from "@react-stately/select";
+import { AriaListBoxOptions, useListBox, useOption } from "@react-aria/listbox";
+import { Key, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+  colors: ThemeConfig["colors"];
+  value: string | null;
+  onChange: (value: string) => void;
+>>>>>>> e2d57964 (Implement ColorPickerField)
   state: SelectState<object>;
   menuProps: AriaListBoxOptions<object>;
 };
