diff --git a/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx b/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
index 4f2e6805..6ed59a52 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
@@ -264,7 +264,16 @@ function ChartTabAnnotations(props: FormEditProps) {
                       }
                       errorMessage={errors.commonAnnotationSettingsDto?.color}
                     >
-                      <Field name="commonAnnotationSettingsDto.color" component={Input} />
+                      <Field name="commonAnnotationSettingsDto.color">
+                        {({ field, form }: FieldProps) => (
+                          <Input
+                            {...field}
+                            type="color"
+                            className='!h-10 !p-0 !m-0 !border-0'
+                            onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                          />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
@@ -502,11 +511,16 @@ function ChartTabAnnotations(props: FormEditProps) {
                       }
                       errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
                     >
-                      <Field
-                        type="text"
-                        name="commonAnnotationSettingsDto.border.color"
-                        component={Input}
-                      />
+                      <Field name="commonAnnotationSettingsDto.border.color">
+                        {({ field, form }: FieldProps) => (
+                          <Input
+                            {...field}
+                            type="color"
+                            className='!h-10 !p-0 !m-0 !border-0'
+                            onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                          />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
@@ -583,7 +597,16 @@ function ChartTabAnnotations(props: FormEditProps) {
                       }
                       errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
                     >
-                      <Field name="commonAnnotationSettingsDto.font.color" component={Input} />
+                      <Field name="commonAnnotationSettingsDto.font.color">
+                        {({ field, form }: FieldProps) => (
+                          <Input
+                            {...field}
+                            type="color"
+                            className='!h-10 !p-0 !m-0 !border-0'
+                            onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                          />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
diff --git a/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx b/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
index 893e71cd..0be9600a 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
@@ -328,7 +328,16 @@ function ChartTabAxis(props: FormEditProps) {
                       }
                       errorMessage={errors.argumentAxisDto?.grid?.color}
                     >
-                      <Field type="text" name="argumentAxisDto.grid.color" component={Input} />
+                      <Field name="argumentAxisDto.grid.color">
+                        {({ field, form }: FieldProps) => (
+                          <Input
+                            {...field}
+                            type="color"
+                            className='!h-10 !p-0 !m-0 !border-0'
+                            onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                          />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
@@ -485,11 +494,16 @@ function ChartTabAxis(props: FormEditProps) {
                       }
                       errorMessage={errors.commonAxisSettingsDto?.grid?.color}
                     >
-                      <Field
-                        type="text"
-                        name="commonAxisSettingsDto.grid.color"
-                        component={Input}
-                      />
+                      <Field name="commonAxisSettingsDto.grid.color">
+                        {({ field, form }: FieldProps) => (
+                          <Input
+                            {...field}
+                            type="color"
+                            className='!h-10 !p-0 !m-0 !border-0'
+                            onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                          />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
diff --git a/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx b/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
index a37c7f70..bc44d9a4 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
@@ -17,7 +17,7 @@ import { Field, FieldProps, Form, Formik, FormikErrors, FormikTouched } from 'fo
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
-import { ListFormEditTabs, themeOptions } from '@/proxy/admin/list-form/options'
+import { ListFormEditTabs, themeOptions, tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
 import { object } from 'yup'
 import {
   chartPaletteOptions,
@@ -382,7 +382,16 @@ function ChartTabCommonSettings(props: FormEditProps) {
                       invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
                       errorMessage={errors.tooltipDto?.color}
                     >
-                      <Field name="tooltipDto.color" component={Input} />
+                      <Field name="tooltipDto.color">
+                        {({ field, form }: FieldProps) => (
+                          <Input
+                            {...field}
+                            type="color"
+                            className='!h-10 !p-0 !m-0 !border-0'
+                            onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                          />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
@@ -440,7 +449,16 @@ function ChartTabCommonSettings(props: FormEditProps) {
                       }
                       errorMessage={errors.tooltipDto?.font?.color}
                     >
-                      <Field name="tooltipDto.font.color" component={Input} />
+                      <Field name="tooltipDto.font.color">
+                        {({ field, form }: FieldProps) => (
+                          <Input
+                            {...field}
+                            type="color"
+                            className='!h-10 !p-0 !m-0 !border-0'
+                            onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                          />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
@@ -617,7 +635,16 @@ function ChartTabCommonSettings(props: FormEditProps) {
                     invalid={!!(errors.scrollBarDto?.color && touched.scrollBarDto?.color)}
                     errorMessage={errors.scrollBarDto?.color}
                   >
-                    <Field name="scrollBarDto.color" component={Input} />
+                    <Field name="scrollBarDto.color">
+                      {({ field, form }: FieldProps) => (
+                        <Input
+                          {...field}
+                          type="color"
+                          className='!h-10 !p-0 !m-0 !border-0'
+                          onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                        />
+                      )}
+                    </Field>
                   </FormItem>
 
                   <FormItem
diff --git a/ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx b/ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx
index 1d622baa..870adba3 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx
@@ -44,7 +44,16 @@ function ChartTabCrosshair(props: FormEditProps) {
                   invalid={!!(errors.crosshairDto?.color && touched.crosshairDto?.color)}
                   errorMessage={errors.crosshairDto?.color}
                 >
-                  <Field type="text" name="crosshairDto.color" component={Input} />
+                  <Field name="crosshairDto.color">
+                    {({ field, form }: FieldProps) => (
+                      <Input
+                        {...field}
+                        type="color"
+                        className='!h-10 !p-0 !m-0 !border-0'
+                        onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                      />
+                    )}
+                  </Field>
                 </FormItem>
 
                 <FormItem
@@ -98,7 +107,16 @@ function ChartTabCrosshair(props: FormEditProps) {
                   }
                   errorMessage={errors.crosshairDto?.label?.backgroundColor}
                 >
-                  <Field type="text" name="crosshairDto.label.backgroundColor" component={Input} />
+                  <Field name="crosshairDto.label.backgroundColor">
+                    {({ field, form }: FieldProps) => (
+                      <Input
+                        {...field}
+                        type="color"
+                        className='!h-10 !p-0 !m-0 !border-0'
+                        onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                      />
+                    )}
+                  </Field>
                 </FormItem>
 
                 <FormItem
@@ -149,7 +167,16 @@ function ChartTabCrosshair(props: FormEditProps) {
                   }
                   errorMessage={errors.crosshairDto?.label?.font?.color}
                 >
-                  <Field type="text" name="crosshairDto.label.font.color" component={Input} />
+                  <Field name="crosshairDto.label.font.color">
+                    {({ field, form }: FieldProps) => (
+                      <Input
+                        {...field}
+                        type="color"
+                        className='!h-10 !p-0 !m-0 !border-0'
+                        onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                      />
+                    )}
+                  </Field>
                 </FormItem>
 
                 <FormItem
@@ -205,7 +232,7 @@ function ChartTabCrosshair(props: FormEditProps) {
                 >
                   <Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
                 </FormItem>
-
+                
                 <FormItem
                   label="Color"
                   invalid={
@@ -216,7 +243,16 @@ function ChartTabCrosshair(props: FormEditProps) {
                   }
                   errorMessage={errors.crosshairDto?.horizontalLine?.color}
                 >
-                  <Field type="text" name="crosshairDto.horizontalLine.color" component={Input} />
+                  <Field name="crosshairDto.horizontalLine.color">
+                    {({ field, form }: FieldProps) => (
+                      <Input
+                        {...field}
+                        type="color"
+                        className='!h-10 !p-0 !m-0 !border-0'
+                        onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                      />
+                    )}
+                  </Field>
                 </FormItem>
 
                 <FormItem
@@ -283,7 +319,16 @@ function ChartTabCrosshair(props: FormEditProps) {
                   }
                   errorMessage={errors.crosshairDto?.verticalLine?.color}
                 >
-                  <Field type="text" name="crosshairDto.verticalLine.color" component={Input} />
+                  <Field name="crosshairDto.verticalLine.color">
+                    {({ field, form }: FieldProps) => (
+                      <Input
+                        {...field}
+                        type="color"
+                        className='!h-10 !p-0 !m-0 !border-0'
+                        onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                      />
+                    )}
+                  </Field>
                 </FormItem>
 
                 <FormItem
diff --git a/ui/src/views/admin/listForm/edit/ChartTabExport.tsx b/ui/src/views/admin/listForm/edit/ChartTabExport.tsx
index 14ccd9b5..8a9de72a 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabExport.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabExport.tsx
@@ -1,5 +1,5 @@
 import { Button, Card, Checkbox, FormContainer, FormItem, Input } from '@/components/ui'
-import { Field, Form, Formik } from 'formik'
+import { Field, FieldProps, Form, Formik } from 'formik'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
@@ -44,7 +44,16 @@ function ChartTabExport(props: FormEditProps) {
               invalid={errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor}
               errorMessage={errors.exportDto?.backgroundColor}
             >
-              <Field type="text" name="exportDto.backgroundColor" component={Input} />
+              <Field name="exportDto.backgroundColor">
+                {({ field, form }: FieldProps) => (
+                  <Input
+                    {...field}
+                    type="color"
+                    className='!h-10 !p-0 !m-0 !border-0'
+                    onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                  />
+                )}
+              </Field>
             </FormItem>
 
             <FormItem
diff --git a/ui/src/views/admin/listForm/edit/ChartTabLegend.tsx b/ui/src/views/admin/listForm/edit/ChartTabLegend.tsx
index bbfef446..c627bd21 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabLegend.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabLegend.tsx
@@ -55,6 +55,7 @@ function ChartTabLegend(props: FormEditProps) {
                   <Field name="legendDto.visible" component={Checkbox} />
                 </FormItem>
 
+
                 <FormItem
                   label="Background Color"
                   invalid={
@@ -62,7 +63,16 @@ function ChartTabLegend(props: FormEditProps) {
                   }
                   errorMessage={errors.legendDto?.backgroundColor}
                 >
-                  <Field name="legendDto.backgroundColor" component={Input} />
+                  <Field name="legendDto.backgroundColor">
+                    {({ field, form }: FieldProps) => (
+                      <Input
+                        {...field}
+                        type="color"
+                        className='!h-10 !p-0 !m-0 !border-0'
+                        onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                      />
+                    )}
+                  </Field>
                 </FormItem>
 
                 <FormItem
@@ -148,9 +158,18 @@ function ChartTabLegend(props: FormEditProps) {
                   invalid={!!(errors.legendDto?.border?.color && touched.legendDto?.border?.color)}
                   errorMessage={errors.legendDto?.border?.color}
                 >
-                  <Field name="legendDto.border.color" component={Input} />
+                  <Field name="legendDto.border.color">
+                    {({ field, form }: FieldProps) => (
+                      <Input
+                        {...field}
+                        type="color"
+                        className='!h-10 !p-0 !m-0 !border-0'
+                        onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                      />
+                    )}
+                  </Field>
                 </FormItem>
-
+                
                 <FormItem
                   label="Dash Style"
                   invalid={
diff --git a/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx b/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx
index 016e5519..d60fb385 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx
@@ -4,7 +4,7 @@ import THead from '@/components/ui/Table/THead'
 import Td from '@/components/ui/Table/Td'
 import Th from '@/components/ui/Table/Th'
 import Tr from '@/components/ui/Table/Tr'
-import { Field, Form, Formik } from 'formik'
+import { Field, FieldProps, Form, Formik } from 'formik'
 import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useStoreState } from '@/store/store'
@@ -57,7 +57,16 @@ function ChartTabPanes(props: FormEditProps) {
                 }
                 errorMessage={errors.commonPaneSettingsDto?.backgroundColor}
               >
-                <Field type="text" name="commonPaneSettingsDto.backgroundColor" component={Input} />
+                <Field name="commonPaneSettingsDto.backgroundColor">
+                  {({ field, form }: FieldProps) => (
+                    <Input
+                      {...field}
+                      type="color"
+                      className='!h-10 !p-0 !m-0 !border-0'
+                      onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                    />
+                  )}
+                </Field>
               </FormItem>
             </Card>
             <Card className="my-2" bodyClass="p-0">
diff --git a/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx b/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
index d70764f9..8e99f2a0 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
@@ -438,7 +438,16 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
                     }
                     errorMessage={errors.commonSeriesSettingsDto?.color}
                   >
-                    <Field name="commonSeriesSettingsDto.color" component={Input} />
+                    <Field name="commonSeriesSettingsDto.color">
+                      {({ field, form }: FieldProps) => (
+                        <Input
+                          {...field}
+                          type="color"
+                          className='!h-10 !p-0 !m-0 !border-0'
+                          onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                        />
+                      )}
+                    </Field>
                   </FormItem>
 
                   <FormItem
diff --git a/ui/src/views/admin/listForm/edit/ChartTabZoomAndPan.tsx b/ui/src/views/admin/listForm/edit/ChartTabZoomAndPan.tsx
index 6f8ab878..39f543f8 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabZoomAndPan.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabZoomAndPan.tsx
@@ -145,7 +145,16 @@ const ChartTabZoomAndPan = (props: FormEditProps) => {
                   }
                   errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
                 >
-                  <Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} />
+                  <Field name="zoomAndPanDto.dragBoxStyle.color">
+                    {({ field, form }: FieldProps) => (
+                      <Input
+                        {...field}
+                        type="color"
+                        className='!h-10 !p-0 !m-0 !border-0'
+                        onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                      />
+                    )}
+                  </Field>
                 </FormItem>
 
                 <FormItem
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
index d47bebbb..38e42e95 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
@@ -262,13 +262,22 @@ function JsonRowOpDialogAnnotation({
                           >
                             <Field name="argument" component={Input} />
                           </FormItem>
-
+                          
                           <FormItem
                             label="Color"
                             invalid={errors.color && touched.color}
                             errorMessage={errors.color}
                           >
-                            <Field type="text" name="color" component={Input} />
+                            <Field name="color">
+                              {({ field, form }: FieldProps) => (
+                                <Input
+                                  {...field}
+                                  type="color"
+                                  className='!h-10 !p-0 !m-0 !border-0'
+                                  onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                                />
+                              )}
+                            </Field>
                           </FormItem>
 
                           <FormItem
@@ -390,7 +399,16 @@ function JsonRowOpDialogAnnotation({
                             invalid={errors.border?.color && touched.border?.color}
                             errorMessage={errors.border?.color}
                           >
-                            <Field type="text" name="border.color" component={Input} />
+                            <Field name="border.color">
+                              {({ field, form }: FieldProps) => (
+                                <Input
+                                  {...field}
+                                  type="color"
+                                  className='!h-10 !p-0 !m-0 !border-0'
+                                  onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                                />
+                              )}
+                            </Field>
                           </FormItem>
 
                           <FormItem
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
index 2bcffe77..2f33396f 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
@@ -305,7 +305,16 @@ function JsonRowOpDialogAxis({
                                 invalid={errors.grid?.color && touched.grid?.color}
                                 errorMessage={errors.grid?.color}
                               >
-                                <Field type="text" name="grid.color" component={Input} />
+                                <Field name="grid.color">
+                                  {({ field, form }: FieldProps) => (
+                                    <Input
+                                      {...field}
+                                      type="color"
+                                      className='!h-10 !p-0 !m-0 !border-0'
+                                      onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                                    />
+                                  )}
+                                </Field>
                               </FormItem>
 
                               <FormItem
@@ -326,7 +335,16 @@ function JsonRowOpDialogAxis({
                                 invalid={errors.breakStyle?.color && touched.breakStyle?.color}
                                 errorMessage={errors.breakStyle?.color}
                               >
-                                <Field type="text" name="breakStyle.color" component={Input} />
+                                <Field name="breakStyle.color">
+                                  {({ field, form }: FieldProps) => (
+                                    <Input
+                                      {...field}
+                                      type="color"
+                                      className='!h-10 !p-0 !m-0 !border-0'
+                                      onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                                    />
+                                  )}
+                                </Field>
                               </FormItem>
 
                               <FormItem
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx
index 05393ffe..6d19aff1 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx
@@ -12,7 +12,7 @@ import {
 import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
 import { useStoreActions } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Field, Form, Formik } from 'formik'
+import { Field, FieldProps, Form, Formik } from 'formik'
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import { number, object, string } from 'yup'
 import { JsonRowDialogData } from './types'
@@ -131,7 +131,16 @@ function JsonRowOpDialogPane({
                       invalid={errors.backgroundColor && touched.backgroundColor}
                       errorMessage={errors.backgroundColor}
                     >
-                      <Field type="text" name="backgroundColor" component={Input} />
+                      <Field name="backgroundColor">
+                        {({ field, form }: FieldProps) => (
+                          <Input
+                            {...field}
+                            type="color"
+                            className='!h-10 !p-0 !m-0 !border-0'
+                            onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                          />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
index b5b4e9ca..730d3a20 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
@@ -398,7 +398,16 @@ function JsonRowOpDialogSeries({
                       invalid={errors.color && touched.color}
                       errorMessage={errors.color}
                     >
-                      <Field type="text" name="color" component={Input} />
+                      <Field name="color">
+                        {({ field, form }: FieldProps) => (
+                          <Input
+                            {...field}
+                            type="color"
+                            className='!h-10 !p-0 !m-0 !border-0'
+                            onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                          />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
@@ -448,7 +457,16 @@ function JsonRowOpDialogSeries({
                         invalid={errors.label?.backgroundColor && touched.label?.backgroundColor}
                         errorMessage={errors.label?.backgroundColor}
                       >
-                        <Field type="text" name="label.backgroundColor" component={Input} />
+                        <Field name="label.backgroundColor">
+                          {({ field, form }: FieldProps) => (
+                            <Input
+                              {...field}
+                              type="color"
+                              className='!h-10 !p-0 !m-0 !border-0'
+                              onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                            />
+                          )}
+                        </Field>
                       </FormItem>
 
                       <FormItem
@@ -482,7 +500,16 @@ function JsonRowOpDialogSeries({
 
                       <Card className="my-2" header="Font">
                         <FormItem label="Color">
-                          <Field name="label.font.color" component={Input} />
+                          <Field name="label.font.color">
+                            {({ field, form }: FieldProps) => (
+                              <Input
+                                {...field}
+                                type="color"
+                                className='!h-10 !p-0 !m-0 !border-0'
+                                onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                              />
+                            )}
+                          </Field>
                         </FormItem>
 
                         <FormItem label="Family">
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
index fc5e8342..733726b7 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
@@ -328,48 +328,6 @@ function JsonRowOpDialogWidget({
                         component={Input}
                       />
                     </FormItem>
-
-                    {/* <FormItem
-                      label="Color"
-                      invalid={errors.color && touched.color}
-                      errorMessage={errors.color}
-                    >
-                      <Field type="text" autoComplete="off" name="color" placeholder="Color">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            isClearable={true}
-                            options={widgetColorOptions}
-                            value={widgetColorOptions?.filter(
-                              (option: any) => option.value === values.color,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-
-                    <FormItem
-                      label="Icon"
-                      invalid={errors.icon && touched.icon}
-                      errorMessage={errors.icon}
-                    >
-                      <Field type="text" autoComplete="off" name="icon" placeholder="Icon">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            isClearable={true}
-                            options={widgetIconOptions}
-                            value={widgetIconOptions?.filter(
-                              (option: any) => option.value === values.icon,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem> */}
                   </div>
                   <div className="text-right mt-4">
                     <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>