diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 30a6faf102..7ef58adbaa 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -7,6 +7,7 @@
   import InfoWord from './InfoWord.svelte'
 
   export let supportLevelClass = ''
+  export let supportLevelIconColor = ""
   export let supportLevelIcon = ""
   export let supportLevelIconTooltip = ""
   export let supportLevelText = ""
@@ -89,14 +90,13 @@
   </div>
   <div class={`line ${supportLevelClass}`}>
     <span class="bullet">•</span>
-    <div 
-      class={`chip supportChip ${supportLevelClass}`}
+    <InfoWord
       on:mouseenter={() => handleMouseenter("support")}
       on:mouseleave={() => handleMouseleave("support")}
-      >
-      <Icon size="S" tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
-      <span class="text">{supportLevelText}</span>
-    </div>
+      icon={supportLevelIcon}
+      color={supportLevelIconColor}
+      text={supportLevelText}
+    />
     <span class="space" />
     <span class="text">with</span>
     <span class="space" />
@@ -111,15 +111,11 @@
       <span class="bullet">•</span>
       <span class="text">Any</span>
     <span class="space" />
-    <div 
-      class="chip info"
+    <InfoWord
       on:mouseenter={() => handleMouseenter("stringsAndNumbers")}
       on:mouseleave={() => handleMouseleave("stringsAndNumbers")}
-      >
-        <span class="text">
-        non-number values
-        </span>
-      </div>
+      text="non-number-values"
+    />
     <span class="space" />
       <span class="text">
         will be ignored
@@ -132,15 +128,11 @@
       <span class="bullet">•</span>
       <span class="text">No</span>
     <span class="space" />
-      <div 
-        class="chip info"
-        on:mouseenter={() => handleMouseenter("required")}
-        on:mouseleave={() => handleMouseleave("required")}
-        >
-          <span class="text">
-            required
-          </span>
-        </div>
+    <InfoWord
+      on:mouseenter={() => handleMouseenter("required")}
+      on:mouseleave={() => handleMouseleave("required")}
+      text="required"
+    />
     <span class="space" />
       <a target="_blank" rel="noopener noreferrer" href={"https://docs.budibase.com/docs/budibasedb#constraints"} class="chip link topLink">
         <Icon size="S" name={"DataUnavailable"} />
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index c505d05afd..7e71075176 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -133,6 +133,7 @@
     if (level === validatorConstants.unsupported) {
       return {
         class: "supportLevelUnsupported",
+        iconColor: "var(--red)",
         icon: "Alert",
         iconTooltip: fieldSupport[optionKey]?.message,
         text: "Not compatible"
@@ -142,6 +143,7 @@
     if (level === validatorConstants.partialSupport) {
       return {
         class: "supportLevelPartialSupport",
+        iconColor: "var(--yellow)",
         icon: "AlertCheck",
         iconTooltip: fieldSupport[optionKey]?.message,
         text: "Partially compatible"
@@ -151,6 +153,7 @@
     if (level === validatorConstants.supported) {
       return {
         class: "supportLevelSupported",
+        iconColor: "var(--green)",
         icon: "CheckmarkCircle",
         iconTooltip: fieldSupport[optionKey]?.message,
         text: "Compatible"
@@ -159,6 +162,7 @@
 
     return {
       class: "supportLevelPartialSupport",
+      iconColor: "var(--yellow)",
       icon: "AlertCheck",
       iconTooltip: "",
       text: "Partially Compatible"
@@ -213,6 +217,7 @@
     support={fieldSupport[currentOption]}
     supportLevelClass={currentOptionSupport.class}
     supportLevelIcon={currentOptionSupport.icon}
+    supportLevelIconColor={currentOptionSupport.iconColor}
     supportLevelIconTooltip={currentOptionSupport.iconTooltip}
     supportLevelText={currentOptionSupport.text}
     columnIcon={getOptionIcon(currentOption)}
@@ -226,6 +231,7 @@
     support={fieldSupport[previousOption]}
     supportLevelClass={previousOptionSupport.class}
     supportLevelIcon={previousOptionSupport.icon}
+    supportLevelIconColor={previousOptionSupport.iconColor}
     supportLevelIconTooltip={previousOptionSupport.iconTooltip}
     supportLevelText={previousOptionSupport.text}
     columnIcon={getOptionIcon(previousOption)}