From fac67f016e5e67c682796689c9123c03de94c1e4 Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Wed, 7 Oct 2026 19:45:29 +0530
Subject: [PATCH 01/14] fix(ui): correct Governance form and graph theming

---
 .../TestCaseStatusModal.component.tsx         |   1 -
 .../IncidentManager.component.tsx             |   2 -
 .../OntologyExplorer/FilterToolbar.tsx        |   2 +-
 .../OntologyAuthoringInspector.tsx            |   2 +-
 .../OntologyExplorer/OntologyDataGraph.tsx    |   2 +-
 .../OntologyExplorer.constants.ts             | 266 ++++++++++--------
 .../OntologyExplorer/OntologyExplorer.tsx     |   8 +-
 .../OntologyImportExportModal.tsx             |  10 +-
 .../OntologyExplorer/OntologyLibrary.tsx      |   2 +-
 .../OntologyNodeRelationsContent.tsx          |   2 +-
 .../OntologyStudioQueryConsole.css            |  12 +-
 .../PortOverlay.component.tsx                 |   2 +-
 .../OntologyExplorer/hooks/useGraphData.ts    |  13 +-
 .../hooks/useOntologyGraph.ts                 |   7 +-
 .../utils/graphStyles.test.ts                 |  39 ++-
 .../OntologyExplorer/utils/graphStyles.ts     |  48 ++--
 .../utils/relationshipTypeUtils.ts            |  20 +-
 .../GlossaryLeftPanel.component.tsx           |   8 +-
 .../RequestDescriptionPage.tsx                | 211 +++++++-------
 .../RequestTagPage/RequestTagPage.tsx         | 214 +++++++-------
 .../UpdateDescriptionPage.tsx                 | 206 ++++++++------
 .../TasksPage/UpdateTagPage/UpdateTagPage.tsx | 206 ++++++++------
 .../pages/TasksPage/shared/Assignees.test.tsx |  20 +-
 .../src/pages/TasksPage/shared/Assignees.tsx  | 162 ++++-------
 .../TasksPage/shared/DescriptionTabs.tsx      |  16 +-
 .../shared/TaskPayloadSchemaFields.test.tsx   |  52 +++-
 .../shared/TaskPayloadSchemaFields.tsx        | 206 +++++++-------
 27 files changed, 932 insertions(+), 807 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCaseStatusModal/TestCaseStatusModal.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCaseStatusModal/TestCaseStatusModal.component.tsx
index 0691340a8a5a..28dd4166b5d8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCaseStatusModal/TestCaseStatusModal.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCaseStatusModal/TestCaseStatusModal.component.tsx
@@ -371,7 +371,6 @@ export const TestCaseStatusModal = ({
               },
             ]}>
             <Assignees
-              allowClear
               isSingleSelect
               options={options}
               value={updatedAssignees}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/IncidentManager/IncidentManager.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/IncidentManager/IncidentManager.component.tsx
index caed60eec6cb..a27c154cafb7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/IncidentManager/IncidentManager.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/IncidentManager/IncidentManager.component.tsx
@@ -115,9 +115,7 @@ const IncidentManager = ({
           data-testid="incident-filter-controls">
           <Form.Item className="m-b-0" label={t('label.assignee')}>
             <Assignees
-              allowClear
               isSingleSelect
-              showArrow
               className="w-min-10"
               options={assigneeOptionsWithSelected}
               placeholder={t('label.assignee')}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/FilterToolbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/FilterToolbar.tsx
index e011638f3912..3a42e2423cb8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/FilterToolbar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/FilterToolbar.tsx
@@ -131,7 +131,7 @@ const FilterToolbarActions: React.FC<FilterToolbarActionsProps> = ({
       {showLoadedCount && (
         <Typography
           as="span"
-          className="tw:whitespace-nowrap tw:pr-1 tw:text-(--color-text-tertiary)"
+          className="tw:whitespace-nowrap tw:pr-1 tw:text-tertiary"
           size="text-sm">
           {t('label.loaded-x-of-y-entity', {
             loaded: loadedTermCount,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyAuthoringInspector.tsx b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyAuthoringInspector.tsx
index ca3328dfc8df..a5e9afc0708b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyAuthoringInspector.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyAuthoringInspector.tsx
@@ -270,7 +270,7 @@ const OntologyAuthoringInspector = ({
     );
     const colorMeta = effectiveColor
       ? COLOR_META_BY_HEX[effectiveColor.toLowerCase()] ?? {
-          background: 'var(--color-bg-secondary)',
+          background: 'var(--tw-color-bg-secondary)',
           color: effectiveColor,
         }
       : undefined;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.tsx b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.tsx
index ae40a9a4e54c..7d753f5b5b72 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.tsx
@@ -405,7 +405,7 @@ const OntologyDataGraph = ({
           getEffectiveRelationColor(
             layout.edge.relationType,
             relationshipType
-          ) ?? 'var(--color-border-brand)';
+          ) ?? 'var(--tw-color-border-brand)';
         const color =
           effectiveColor.startsWith('var(') && relationshipType
             ? getRelationshipHexColor(relationshipType)
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts
index fb2a96e860c8..4ac6283c4814 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts
@@ -46,203 +46,235 @@ export const DEFAULT_GLOSSARY_TERM_RELATION_TYPES_FALLBACK = [
   DEFAULT_RELATIONSHIP_TYPE,
 ];
 
+const RELATION_PALETTES = {
+  brand: {
+    color: 'var(--tw-color-utility-brand-700)',
+    background: 'var(--tw-color-utility-brand-50)',
+  },
+  error: {
+    color: 'var(--tw-color-utility-error-700)',
+    background: 'var(--tw-color-utility-error-50)',
+  },
+  warning: {
+    color: 'var(--tw-color-utility-warning-700)',
+    background: 'var(--tw-color-utility-warning-50)',
+  },
+  success: {
+    color: 'var(--tw-color-utility-success-700)',
+    background: 'var(--tw-color-utility-success-50)',
+  },
+  'blue-light': {
+    color: 'var(--tw-color-utility-blue-light-700)',
+    background: 'var(--tw-color-utility-blue-light-50)',
+  },
+  blue: {
+    color: 'var(--tw-color-utility-blue-700)',
+    background: 'var(--tw-color-utility-blue-50)',
+  },
+  purple: {
+    color: 'var(--tw-color-utility-purple-700)',
+    background: 'var(--tw-color-utility-purple-50)',
+  },
+  fuchsia: {
+    color: 'var(--tw-color-utility-fuchsia-700)',
+    background: 'var(--tw-color-utility-fuchsia-50)',
+  },
+  orange: {
+    color: 'var(--tw-color-utility-orange-700)',
+    background: 'var(--tw-color-utility-orange-50)',
+  },
+  pink: {
+    color: 'var(--tw-color-utility-pink-700)',
+    background: 'var(--tw-color-utility-pink-50)',
+  },
+  'gray-blue': {
+    color: 'var(--tw-color-utility-gray-blue-700)',
+    background: 'var(--tw-color-utility-gray-blue-50)',
+  },
+  teal: {
+    color: 'var(--tw-color-utility-teal-700)',
+    background: 'var(--tw-color-utility-teal-50)',
+  },
+  gray: {
+    color: 'var(--tw-color-utility-gray-700)',
+    background: 'var(--tw-color-utility-gray-50)',
+  },
+  violet: {
+    color: 'var(--tw-color-utility-violet-700)',
+    background: 'var(--tw-color-utility-violet-50)',
+  },
+  moss: {
+    color: 'var(--tw-color-utility-moss-700)',
+    background: 'var(--tw-color-utility-moss-50)',
+  },
+  cyan: {
+    color: 'var(--tw-color-utility-cyan-700)',
+    background: 'var(--tw-color-utility-cyan-50)',
+  },
+  rose: {
+    color: 'var(--tw-color-utility-rose-700)',
+    background: 'var(--tw-color-utility-rose-50)',
+  },
+};
+
 export const RELATION_META: Record<
   string,
   { color: string; background: string; labelKey: string }
 > = {
   relatedTo: {
-    color: '#1570ef',
-    background: '#eff8ff',
+    ...RELATION_PALETTES['brand'],
     labelKey: 'label.related-to',
   },
   related: {
-    color: '#1570ef',
-    background: '#eff8ff',
+    ...RELATION_PALETTES['brand'],
     labelKey: 'label.related',
   },
   synonym: {
-    color: '#b42318',
-    background: '#fef3f2',
+    ...RELATION_PALETTES['error'],
     labelKey: 'label.synonym',
   },
   antonym: {
-    color: '#b54708',
-    background: '#fffaeb',
+    ...RELATION_PALETTES['warning'],
     labelKey: 'label.antonym',
   },
   typeOf: {
-    color: '#067647',
-    background: '#ecfdf3',
+    ...RELATION_PALETTES['success'],
     labelKey: 'label.type-of',
   },
   hasTypes: {
-    color: '#067647',
-    background: '#ecfdf3',
+    ...RELATION_PALETTES['success'],
     labelKey: 'label.has-types',
   },
   hasA: {
-    color: '#026aa2',
-    background: '#f0f9ff',
+    ...RELATION_PALETTES['blue-light'],
     labelKey: 'label.has-a',
   },
   partOf: {
-    color: '#026aa2',
-    background: '#f0f9ff',
+    ...RELATION_PALETTES['blue-light'],
     labelKey: 'label.part-of',
   },
   hasPart: {
-    color: '#155eef',
-    background: '#eff4ff',
+    ...RELATION_PALETTES['blue'],
     labelKey: 'label.has-part',
   },
   componentOf: {
-    color: '#026aa2',
-    background: '#f0f9ff',
+    ...RELATION_PALETTES['blue-light'],
     labelKey: 'label.component-of',
   },
   composedOf: {
-    color: '#026aa2',
-    background: '#f0f9ff',
+    ...RELATION_PALETTES['blue-light'],
     labelKey: 'label.composed-of',
   },
   calculatedFrom: {
-    color: '#6938ef',
-    background: '#f4f3ff',
+    ...RELATION_PALETTES['purple'],
     labelKey: 'label.calculated-from',
   },
   usedToCalculate: {
-    color: '#ba24d5',
-    background: '#fdf4ff',
+    ...RELATION_PALETTES['fuchsia'],
     labelKey: 'label.used-to-calculate',
   },
   derivedFrom: {
-    color: '#bc1b06',
-    background: '#fff4ed',
+    ...RELATION_PALETTES['orange'],
     labelKey: 'label.derived-from',
   },
   seeAlso: {
-    color: '#c11574',
-    background: '#fdf2fa',
+    ...RELATION_PALETTES['pink'],
     labelKey: 'label.see-also',
   },
   parentOf: {
-    color: '#1570ef',
-    background: '#eff8ff',
+    ...RELATION_PALETTES['brand'],
     labelKey: 'label.parent-of',
   },
   childOf: {
-    color: '#1570ef',
-    background: '#eff8ff',
+    ...RELATION_PALETTES['brand'],
     labelKey: 'label.child-of',
   },
   broader: {
-    color: '#067647',
-    background: '#ecfdf3',
+    ...RELATION_PALETTES['success'],
     labelKey: 'label.broader',
   },
   narrower: {
-    color: '#4e5ba6',
-    background: '#f8f9fc',
+    ...RELATION_PALETTES['gray-blue'],
     labelKey: 'label.narrower',
   },
   isA: {
-    color: '#067647',
-    background: '#ecfdf3',
+    ...RELATION_PALETTES['success'],
     labelKey: 'label.is-a',
   },
   instanceOf: {
-    color: '#067647',
-    background: '#ecfdf3',
+    ...RELATION_PALETTES['success'],
     labelKey: 'label.instance-of',
   },
   owns: {
-    color: '#6938ef',
-    background: '#f4f3ff',
+    ...RELATION_PALETTES['purple'],
     labelKey: 'label.owns',
   },
   ownedBy: {
-    color: '#6938ef',
-    background: '#f4f3ff',
+    ...RELATION_PALETTES['purple'],
     labelKey: 'label.owned-by',
   },
   manages: {
-    color: '#1570ef',
-    background: '#eff8ff',
+    ...RELATION_PALETTES['brand'],
     labelKey: 'label.manages',
   },
   managedBy: {
-    color: '#1570ef',
-    background: '#eff8ff',
+    ...RELATION_PALETTES['brand'],
     labelKey: 'label.managed-by',
   },
   contains: {
-    color: '#026aa2',
-    background: '#f0f9ff',
+    ...RELATION_PALETTES['blue-light'],
     labelKey: 'label.contains',
   },
   containedIn: {
-    color: '#026aa2',
-    background: '#f0f9ff',
+    ...RELATION_PALETTES['blue-light'],
     labelKey: 'label.contained-in',
   },
   dependsOn: {
-    color: '#b42318',
-    background: '#fef3f2',
+    ...RELATION_PALETTES['error'],
     labelKey: 'label.depends-on',
   },
   usedBy: {
-    color: '#b54708',
-    background: '#fffaeb',
+    ...RELATION_PALETTES['warning'],
     labelKey: 'label.used-by',
   },
   metricFor: {
-    color: '#026aa2',
-    background: '#f0f9ff',
+    ...RELATION_PALETTES['blue-light'],
     labelKey: 'label.metric-for',
   },
   hasGlossaryTerm: {
-    color: '#107569',
-    background: '#f0fdf9',
+    ...RELATION_PALETTES['teal'],
     labelKey: 'label.tagged-with',
   },
   custom1: {
-    color: '#bc1b06',
-    background: '#fff4ed',
+    ...RELATION_PALETTES['orange'],
     labelKey: 'label.color-orange',
   },
   custom2: {
-    color: '#535862',
-    background: '#fafafa',
+    ...RELATION_PALETTES['gray'],
     labelKey: 'label.color-gray',
   },
   custom6: {
-    color: '#107569',
-    background: '#f0fdf9',
+    ...RELATION_PALETTES['teal'],
     labelKey: 'label.color-rose',
   },
   custom4: {
-    color: '#7839ee',
-    background: '#f5f3ff',
+    ...RELATION_PALETTES['violet'],
     labelKey: 'label.color-teal',
   },
   custom5: {
-    color: '#4f7a21',
-    background: '#f5fbee',
+    ...RELATION_PALETTES['moss'],
     labelKey: 'label.color-moss',
   },
   custom7: {
-    color: '#0e7090',
-    background: '#ecfdff',
+    ...RELATION_PALETTES['cyan'],
     labelKey: 'label.color-cyan',
   },
   custom3: {
-    color: '#e31b54',
-    background: '#fff1f3',
+    ...RELATION_PALETTES['rose'],
     labelKey: 'label.color-violet',
   },
   default: {
-    color: '#535862',
-    background: '#fafafa',
+    ...RELATION_PALETTES['gray'],
     labelKey: 'label.relation-type',
   },
 };
@@ -256,95 +288,78 @@ export const COLOR_META_BY_HEX: Record<
   { color: string; background: string; labelKey: string }
 > = {
   '#1570ef': {
-    color: '#1570ef',
-    background: '#eff8ff',
+    ...RELATION_PALETTES['brand'],
     labelKey: 'label.color-blue',
   },
   '#b42318': {
-    color: '#b42318',
-    background: '#fef3f2',
+    ...RELATION_PALETTES['error'],
     labelKey: 'label.color-red',
   },
   '#b54708': {
-    color: '#b54708',
-    background: '#fffaeb',
+    ...RELATION_PALETTES['warning'],
     labelKey: 'label.color-yellow',
   },
   '#067647': {
-    color: '#067647',
-    background: '#ecfdf3',
+    ...RELATION_PALETTES['success'],
     labelKey: 'label.color-green',
   },
   '#4e5ba6': {
-    color: '#4e5ba6',
-    background: '#f8f9fc',
+    ...RELATION_PALETTES['gray-blue'],
     labelKey: 'label.color-blue-gray',
   },
   '#026aa2': {
-    color: '#026aa2',
-    background: '#f0f9ff',
+    ...RELATION_PALETTES['blue-light'],
     labelKey: 'label.color-blue-light',
   },
   '#155eef': {
-    color: '#155eef',
-    background: '#eff4ff',
+    ...RELATION_PALETTES['blue'],
     labelKey: 'label.color-dark-blue',
   },
   '#6938ef': {
-    color: '#6938ef',
-    background: '#f4f3ff',
+    ...RELATION_PALETTES['purple'],
     labelKey: 'label.color-purple',
   },
   '#ba24d5': {
-    color: '#ba24d5',
-    background: '#fdf4ff',
+    ...RELATION_PALETTES['fuchsia'],
     labelKey: 'label.color-fuchsia',
   },
   '#c11574': {
-    color: '#c11574',
-    background: '#fdf2fa',
+    ...RELATION_PALETTES['pink'],
     labelKey: 'label.color-pink',
   },
   '#bc1b06': {
-    color: '#bc1b06',
-    background: '#fff4ed',
+    ...RELATION_PALETTES['orange'],
     labelKey: 'label.color-orange',
   },
   '#107569': {
-    color: '#107569',
-    background: '#f0fdf9',
+    ...RELATION_PALETTES['teal'],
     labelKey: 'label.color-rose',
   },
   '#535862': {
-    color: '#535862',
-    background: '#fafafa',
+    ...RELATION_PALETTES['gray'],
     labelKey: 'label.color-gray',
   },
   '#e31b54': {
-    color: '#e31b54',
-    background: '#fff1f3',
+    ...RELATION_PALETTES['rose'],
     labelKey: 'label.color-violet',
   },
   '#7839ee': {
-    color: '#7839ee',
-    background: '#f5f3ff',
+    ...RELATION_PALETTES['violet'],
     labelKey: 'label.color-teal',
   },
   '#4f7a21': {
-    color: '#4f7a21',
-    background: '#f5fbee',
+    ...RELATION_PALETTES['moss'],
     labelKey: 'label.color-moss',
   },
   '#0e7090': {
-    color: '#0e7090',
-    background: '#ecfdff',
+    ...RELATION_PALETTES['cyan'],
     labelKey: 'label.color-cyan',
   },
 };
 
-const BORDER_PRIMARY_TOKEN = 'var(--color-border-primary)';
+const BORDER_PRIMARY_TOKEN = 'var(--tw-color-border-primary)';
 const BORDER_PRIMARY_FALLBACK = '#D5D7DA';
-const BORDER_SECONDARY_TOKEN = 'var(--color-border-secondary)';
+const BORDER_SECONDARY_TOKEN = 'var(--tw-color-border-secondary)';
 
 export const EDGE_STROKE_COLOR = BORDER_PRIMARY_TOKEN;
 // SVG presentation attributes do not resolve CSS variables, so DOM-drawn
@@ -355,12 +370,12 @@ export const DIMMED_NODE_OPACITY = 0.32;
 export const DIMMED_EDGE_OPACITY = 0.12;
 export const DIMMED_EDGE_LABEL_OPACITY = 0.16;
 
-export const NODE_FILL_DEFAULT = 'var(--color-bg-primary)';
+export const NODE_FILL_DEFAULT = 'var(--tw-color-bg-primary)';
 export const NODE_BORDER_COLOR = BORDER_SECONDARY_TOKEN;
-export const NODE_SELECTED_STROKE = 'var(--color-border-brand)';
+export const NODE_SELECTED_STROKE = 'var(--tw-color-border-brand)';
 export const NODE_SELECTED_LINE_WIDTH = 2.5;
 export const NODE_SELECTED_HALO_LINE_WIDTH = 4;
-export const NODE_SELECTED_HALO_FILL = 'var(--color-bg-brand-primary)';
+export const NODE_SELECTED_HALO_FILL = 'var(--tw-color-bg-brand-primary)';
 export const NODE_BORDER_RADIUS = 9;
 export const NODE_PADDING_V = 9;
 export const NODE_PADDING_H = 12;
@@ -374,25 +389,26 @@ export const NODE_LABEL_PADDING: [number, number, number, number] = [
 export const COMBO_FILL_DEFAULT = NODE_FILL_DEFAULT;
 export const COMBO_BODY_FILL_OPACITY = '22';
 export const COMBO_LABEL_BG_OPACITY = '40';
-export const NODE_LABEL_FILL = 'var(--color-text-primary)';
-export const NODE_LABEL_FILL_INVERSE = 'var(--color-text-white)';
+export const NODE_LABEL_FILL = 'var(--tw-color-text-primary)';
+export const NODE_LABEL_FILL_INVERSE = 'var(--tw-color-text-white)';
 export const BRAND_BLUE_FALLBACK = '#3b82f6';
 export const COMBO_COLOR_FALLBACK = '#94a3b8';
-export const DATA_MODE_ASSET_COUNT_BADGE_BG = 'var(--color-bg-primary-solid)';
-export const DATA_MODE_LOAD_MORE_BADGE_BG = 'var(--color-bg-brand-solid)';
+export const DATA_MODE_ASSET_COUNT_BADGE_BG =
+  'var(--tw-color-bg-primary-solid)';
+export const DATA_MODE_LOAD_MORE_BADGE_BG = 'var(--tw-color-bg-brand-solid)';
 export const NODE_LABEL_FONT_SIZE = 11;
 export const NODE_LABEL_FONT_WEIGHT = 600;
 export const NODE_SHADOW_COLOR = BORDER_SECONDARY_TOKEN;
 export const NODE_SHADOW_BLUR = 2;
 export const NODE_SHADOW_OFFSET_Y = 1;
 
-export const EDGE_LABEL_FILL = 'var(--color-text-tertiary)';
+export const EDGE_LABEL_FILL = 'var(--tw-color-text-tertiary)';
 export const EDGE_LABEL_FONT_SIZE = 10;
 export const EDGE_LABEL_FONT_WEIGHT = 600;
 export const EDGE_LABEL_FONT_FAMILY = 'Inter';
 export const EDGE_LABEL_LINE_HEIGHT = 16;
 export const EDGE_LABEL_LETTER_SPACING = 0;
-export const EDGE_LABEL_BG_FILL = 'var(--color-bg-secondary)';
+export const EDGE_LABEL_BG_FILL = 'var(--tw-color-bg-secondary)';
 export const EDGE_LABEL_BG_STROKE = NODE_FILL_DEFAULT;
 export const EDGE_LABEL_BG_RADIUS = 3;
 export const EDGE_LABEL_BG_SHADOW_COLOR = BORDER_SECONDARY_TOKEN;
@@ -544,11 +560,11 @@ export const NODE_LABEL_FILL_FALLBACK = '#1e293b';
 // A metric node is a governed Metric entity drawn next to the concept it
 // measures, not a concept: muted and dashed so it never reads as authorable.
 export const STUDIO_METRIC_NODE_KIND = 'metric';
-export const METRIC_NODE_FILL = 'var(--color-bg-secondary)';
+export const METRIC_NODE_FILL = 'var(--tw-color-bg-secondary)';
 export const METRIC_NODE_FILL_FALLBACK = '#FAFAFA';
 export const METRIC_NODE_STROKE = BORDER_PRIMARY_TOKEN;
 export const METRIC_NODE_STROKE_FALLBACK = BORDER_PRIMARY_FALLBACK;
-export const METRIC_NODE_MUTED_COLOR = 'var(--color-text-tertiary)';
+export const METRIC_NODE_MUTED_COLOR = 'var(--tw-color-text-tertiary)';
 export const METRIC_NODE_MUTED_COLOR_FALLBACK = '#535862';
 export const METRIC_NODE_LINE_DASH = [4, 3];
 export const NODE_SHADOW_COLOR_FALLBACK = 'rgba(0,0,0,0.12)';
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.tsx
index 8a0ed015a9d5..6a3728a14a2d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.tsx
@@ -93,9 +93,9 @@ const SearchInputIcon = ({ className }: { className?: string }) => (
   <Search aria-hidden="true" className={className} />
 );
 const DEFAULT_GRAPH_BACKDROP_CLASS =
-  'tw:absolute tw:inset-0 tw:z-0 tw:bg-primary tw:[background-image:radial-gradient(circle,var(--color-border-secondary)_1px,transparent_1px)] tw:[background-size:14px_14px]';
+  'tw:absolute tw:inset-0 tw:z-0 tw:bg-canvas tw:[background-image:radial-gradient(circle,var(--tw-color-border-secondary)_1px,transparent_1px)] tw:[background-size:14px_14px]';
 const STUDIO_GRAPH_BACKDROP_CLASS =
-  'tw:absolute tw:inset-0 tw:z-0 tw:bg-primary tw:[background-image:radial-gradient(circle,var(--color-border-secondary)_1px,transparent_1px)] tw:[background-size:22px_22px]';
+  'tw:absolute tw:inset-0 tw:z-0 tw:bg-canvas tw:[background-image:radial-gradient(circle,var(--tw-color-border-secondary)_1px,transparent_1px)] tw:[background-size:22px_22px]';
 
 const ONTOLOGY_TOOLBAR_CARD_CLASS =
   'tw:z-6 tw:border tw:border-utility-gray-blue-100 tw:shadow-md';
@@ -242,7 +242,7 @@ function LoadingGraphEmptyState() {
       data-testid="ontology-graph-loading">
       <div
         aria-label={t('label.loading')}
-        className="tw:h-10 tw:w-10 tw:animate-spin tw:rounded-full tw:border-2 tw:border-secondary tw:border-t-(--color-bg-brand-solid)"
+        className="tw:h-10 tw:w-10 tw:animate-spin tw:rounded-full tw:border-2 tw:border-secondary tw:border-t-(--tw-color-bg-brand-solid)"
         role="status"
       />
       <Typography as="p" className="tw:mt-4 tw:text-tertiary">
@@ -1039,7 +1039,7 @@ const OntologyExplorer: React.FC<OntologyExplorerProps> = ({
                 <div className="tw:flex tw:items-center tw:gap-2 tw:rounded-full tw:border tw:border-utility-gray-blue-100 tw:bg-primary tw:px-4 tw:py-2 tw:shadow-md">
                   <div
                     aria-label={t('label.loading')}
-                    className="tw:h-4 tw:w-4 tw:animate-spin tw:rounded-full tw:border-2 tw:border-secondary tw:border-t-(--color-bg-brand-solid)"
+                    className="tw:h-4 tw:w-4 tw:animate-spin tw:rounded-full tw:border-2 tw:border-secondary tw:border-t-(--tw-color-bg-brand-solid)"
                     role="status"
                   />
                   <Typography size="text-sm" weight="medium">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyImportExportModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyImportExportModal.tsx
index b1d914b2cf08..950d3d937354 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyImportExportModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyImportExportModal.tsx
@@ -100,12 +100,12 @@ const FORMAT_MEDIA_TYPE: Record<OntologyExportFormat, string> = {
   turtle: 'text/turtle',
 };
 
-const PREVIEW_BG = 'var(--color-bg-primary-solid)';
+const PREVIEW_BG = 'var(--tw-color-bg-primary-solid)';
 const SYNTAX_COLOR = {
-  default: 'var(--color-text-secondary_on-brand)',
-  keyword: 'var(--color-utility-blue-400)',
-  string: 'var(--color-utility-success-400)',
-  term: 'var(--color-utility-orange-400)',
+  default: 'var(--tw-color-text-secondary_on-brand)',
+  keyword: 'var(--tw-color-utility-blue-400)',
+  string: 'var(--tw-color-utility-success-400)',
+  term: 'var(--tw-color-utility-orange-400)',
 };
 const SYNTAX_TOKEN =
   /("(?:[^"\\]|\\.)*"(?:@[\w-]+)?)|(<[^>\s]*>)|(\b[A-Za-z][\w-]*:[\w/#.-]*)|(\ba\b)/g;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyLibrary.tsx b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyLibrary.tsx
index ee3f7416f9cb..8cc72a2f62f0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyLibrary.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyLibrary.tsx
@@ -51,7 +51,7 @@ interface OntologyLibraryProps {
 const EMPTY_INSTALLATIONS: OntologyPackInstallation[] = [];
 const LIBRARY_ICON_CLASS =
   'tw:grid tw:size-8 tw:shrink-0 tw:place-items-center tw:rounded-[9px] ' +
-  'tw:bg-[linear-gradient(160deg,var(--color-utility-blue-light-500),var(--color-bg-brand-solid))] tw:text-white';
+  'tw:bg-[linear-gradient(160deg,var(--tw-color-utility-blue-light-500),var(--tw-color-bg-brand-solid))] tw:text-white';
 const INSTALLED_COUNT_CLASS =
   'tw:inline-flex tw:shrink-0 tw:items-center tw:rounded-full tw:border ' +
   'tw:border-utility-success-200 tw:bg-utility-success-50 tw:px-[11px] tw:py-1 ' +
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyNodeRelationsContent.tsx b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyNodeRelationsContent.tsx
index 429e571fe83a..77d209601cc9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyNodeRelationsContent.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyNodeRelationsContent.tsx
@@ -261,7 +261,7 @@ export const OntologyNodeRelationsContent: React.FC<
               );
               const meta = effectiveColor
                 ? COLOR_META_BY_HEX[effectiveColor.toLowerCase()] ?? {
-                    background: 'var(--color-bg-secondary)',
+                    background: 'var(--tw-color-bg-secondary)',
                     color: effectiveColor,
                   }
                 : undefined;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyStudioQueryConsole.css b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyStudioQueryConsole.css
index ed6d9bcf4365..9d1365395c1b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyStudioQueryConsole.css
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyStudioQueryConsole.css
@@ -14,11 +14,11 @@
 .ontology-studio-query-editor .cm-editor {
   height: auto;
   min-height: 138px;
-  background: var(--color-bg-primary);
-  color: var(--color-text-primary);
+  background: var(--tw-color-bg-primary);
+  color: var(--tw-color-text-primary);
   font-family: 'Geist Mono', ui-monospace, monospace;
-  font-size: var(--om-font-size-xs);
-  font-weight: var(--om-font-weight-regular);
+  font-size: var(--tw-text-xs);
+  font-weight: var(--tw-font-weight-normal);
   line-height: 1.6;
 }
 
@@ -32,7 +32,7 @@
 }
 
 .ontology-studio-query-editor .cm-content {
-  padding: var(--om-space-12) var(--om-space-16);
+  padding: calc(var(--tw-spacing) * 3) calc(var(--tw-spacing) * 4);
 }
 
 .ontology-studio-query-editor .cm-line {
@@ -40,5 +40,5 @@
 }
 
 .ontology-studio-query-editor .cm-content > .cm-line:nth-child(-n + 2) span {
-  color: var(--color-utility-purple-600);
+  color: var(--tw-color-utility-purple-600);
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/PortOverlay.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/PortOverlay.component.tsx
index 49da27d06a9d..4050dfb90a27 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/PortOverlay.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/PortOverlay.component.tsx
@@ -153,7 +153,7 @@ const PortOverlay: React.FC<PortOverlayProps> = ({
           style={{ overflow: 'visible' }}>
           <line
             data-testid="ontology-connection-line"
-            stroke="var(--color-bg-brand-solid)"
+            stroke="var(--tw-color-bg-brand-solid)"
             strokeDasharray="6 5"
             strokeWidth={2.4}
             x1={lineStart.x}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/hooks/useGraphData.ts b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/hooks/useGraphData.ts
index f61c6e4f71a2..43c4e9a7ddde 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/hooks/useGraphData.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/hooks/useGraphData.ts
@@ -72,7 +72,7 @@ import {
   isSymmetricRelationship,
 } from '../utils/relationshipTypeUtils';
 
-const COLOR_BLUE_600 = 'var(--color-blue-600)';
+const COLOR_BLUE_600 = 'var(--tw-color-blue-600)';
 
 const STUDIO_DEFAULT_ACCENT = '#84CAFF';
 const STUDIO_COMPLIANCE_ACCENT = '#DC6803';
@@ -886,7 +886,12 @@ function buildDefaultNodeData(
       ),
       ...(ctx.studioMode && {
         label: false,
-        stroke: node.type === 'glossaryTermIsolated' ? '#FEDF89' : '#E9EAEB',
+        stroke: getCanvasColor(
+          node.type === 'glossaryTermIsolated'
+            ? 'var(--tw-color-utility-warning-200)'
+            : 'var(--tw-color-border-secondary)',
+          '#E9EAEB'
+        ),
         studioLabelText: state.label,
         studioAccentColor: state.studioAccentColor ?? STUDIO_DEFAULT_ACCENT,
         studioEditMode: ctx.isEditMode,
@@ -1416,7 +1421,7 @@ function extraComboPadding(
 function buildHierarchyCombos(params: BuildCombosParams): ComboData[] {
   return params.hierarchyCombos.map((combo) => {
     const color =
-      params.glossaryColorMap[combo.glossaryId] ?? 'var(--color-gray-400)';
+      params.glossaryColorMap[combo.glossaryId] ?? 'var(--tw-color-gray-400)';
     const isComboDimmed = Boolean(
       params.searchGlossarySet &&
         !params.searchGlossarySet.has(combo.glossaryId)
@@ -1458,7 +1463,7 @@ function buildGlossaryGroupCombos(params: BuildCombosParams): ComboData[] {
     const name =
       terms[0].group ?? (glossary ? glossary.displayName || glossary.name : '');
     const color =
-      params.glossaryColorMap[glossaryId] ?? 'var(--color-gray-400)';
+      params.glossaryColorMap[glossaryId] ?? 'var(--tw-color-gray-400)';
     const isComboDimmed = Boolean(
       params.searchGlossarySet && !params.searchGlossarySet.has(glossaryId)
     );
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/hooks/useOntologyGraph.ts b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/hooks/useOntologyGraph.ts
index bcb596768118..27861789e548 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/hooks/useOntologyGraph.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/hooks/useOntologyGraph.ts
@@ -510,7 +510,12 @@ function getStudioNodeKindStyle(
   }
 
   return {
-    stroke: ontNode?.type === 'glossaryTermIsolated' ? '#FEDF89' : '#E9EAEB',
+    stroke: getCanvasColor(
+      ontNode?.type === 'glossaryTermIsolated'
+        ? 'var(--tw-color-utility-warning-200)'
+        : 'var(--tw-color-border-secondary)',
+      '#E9EAEB'
+    ),
   };
 }
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.test.ts b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.test.ts
index cd809280d27e..20ee1100b192 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.test.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.test.ts
@@ -62,16 +62,29 @@ const mockComputedStyle = (
 
 const resolveSemanticColor = (color: string, fallback: string): string =>
   ({
-    'var(--color-bg-primary)': 'rgb(12, 14, 18)',
-    'var(--color-bg-secondary)': 'rgb(24, 27, 33)',
-    'var(--color-border-primary)': 'rgb(55, 58, 65)',
-    'var(--color-border-secondary)': 'rgb(34, 38, 47)',
-    'var(--color-text-primary)': 'rgb(247, 247, 247)',
-    'var(--color-text-tertiary)': 'rgb(148, 153, 162)',
-    'var(--color-text-white)': 'rgb(255, 255, 255)',
+    'var(--tw-color-bg-primary)': 'rgb(12, 14, 18)',
+    'var(--tw-color-bg-secondary)': 'rgb(24, 27, 33)',
+    'var(--tw-color-border-primary)': 'rgb(55, 58, 65)',
+    'var(--tw-color-border-secondary)': 'rgb(34, 38, 47)',
+    'var(--tw-color-text-primary)': 'rgb(247, 247, 247)',
+    'var(--tw-color-text-tertiary)': 'rgb(148, 153, 162)',
+    'var(--tw-color-text-white)': 'rgb(255, 255, 255)',
   }[color] ?? fallback);
 
 describe('theme-aware graph styles', () => {
+  it('uses the active canvas surface for studio relation badges', () => {
+    const style = getEdgeRelationLabelStyle(
+      'RELATED TO',
+      undefined,
+      undefined,
+      true,
+      resolveSemanticColor
+    );
+
+    expect(style.labelBackgroundFill).toBe('rgb(24, 27, 33)');
+    expect(style.labelBackgroundStroke).toBe('rgb(55, 58, 65)');
+  });
+
   it('resolves semantic surface colors before returning a rectangular canvas node', () => {
     const style = buildDefaultRectNodeStyle(
       resolveSemanticColor,
@@ -147,7 +160,7 @@ describe('theme-aware graph styles', () => {
       .mockReturnValue(null);
     const style = buildComboStyle(
       'Marketing',
-      'var(--color-border-primary)',
+      'var(--tw-color-border-primary)',
       0,
       resolveSemanticColor
     );
@@ -257,7 +270,9 @@ describe('getCanvasColor', () => {
       .spyOn(globalThis, 'document', 'get')
       .mockReturnValue(undefined as unknown as Document);
 
-    expect(getCanvasColor('var(--color-missing)', '#abcdef')).toBe('#abcdef');
+    expect(getCanvasColor('var(--tw-color-missing)', '#abcdef')).toBe(
+      '#abcdef'
+    );
   });
 
   it('returns the input unchanged when it is not a var() token', () => {
@@ -270,12 +285,12 @@ describe('getCanvasColor', () => {
       .spyOn(window, 'getComputedStyle')
       .mockReturnValue(mockComputedStyle('rgb(1, 2, 3)'));
 
-    const first = getCanvasColor('var(--color-cache-probe)', '#zzzzzz');
+    const first = getCanvasColor('var(--tw-color-cache-probe)', '#zzzzzz');
 
     expect(first).toBe('rgb(1, 2, 3)');
 
     spy.mockReturnValue(mockComputedStyle('rgb(9, 9, 9)'));
-    const second = getCanvasColor('var(--color-cache-probe)', '#zzzzzz');
+    const second = getCanvasColor('var(--tw-color-cache-probe)', '#zzzzzz');
 
     expect(second).toBe('rgb(1, 2, 3)');
   });
@@ -285,7 +300,7 @@ describe('getCanvasColor', () => {
       .spyOn(window, 'getComputedStyle')
       .mockReturnValue(mockComputedStyle('rgba(0, 0, 0, 0)', '12px'));
 
-    expect(getCanvasColor('var(--color-unresolvable)', '#fedcba')).toBe(
+    expect(getCanvasColor('var(--tw-color-unresolvable)', '#fedcba')).toBe(
       '#fedcba'
     );
   });
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts
index 11977c21daa1..e0b1bc33f048 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts
@@ -386,9 +386,12 @@ function parseColorToRgbTriplet(val: string): [number, number, number] | null {
 function mixAccentLikeScale50(rgb: [number, number, number]): string {
   const t = GLOSSARY_HEADER_MIX_ACCENT;
   const clamp = (n: number) => Math.min(255, Math.max(0, n));
-  const r = clamp(Math.round(rgb[0] * t + 255 * (1 - t)));
-  const g = clamp(Math.round(rgb[1] * t + 255 * (1 - t)));
-  const b = clamp(Math.round(rgb[2] * t + 255 * (1 - t)));
+  const surface = parseColorToRgbTriplet(
+    getCanvasColor(NODE_FILL_DEFAULT, '#ffffff')
+  ) ?? [255, 255, 255];
+  const r = clamp(Math.round(rgb[0] * t + surface[0] * (1 - t)));
+  const g = clamp(Math.round(rgb[1] * t + surface[1] * (1 - t)));
+  const b = clamp(Math.round(rgb[2] * t + surface[2] * (1 - t)));
   const x = (n: number) => n.toString(16).padStart(2, '0');
 
   return `#${x(r)}${x(g)}${x(b)}`;
@@ -396,10 +399,10 @@ function mixAccentLikeScale50(rgb: [number, number, number]): string {
 
 /**
  * Glossary combo header: light "50" wash matching the glossary accent (title + border stroke).
- * For `var(--color-*-scale)` strokes, resolves `var(--color-*-50)`. For hex palette strokes, blends toward white.
+ * Token strokes use the palette’s 50 shade. Stored custom colors blend toward the active surface.
  */
 export function glossaryComboHeaderFill(stroke: string): string {
-  const blendTowardWhite = (): string => {
+  const blendTowardSurface = (): string => {
     const resolved = stroke.startsWith('var(')
       ? getCanvasColor(stroke, '#94a3b8')
       : stroke;
@@ -409,13 +412,13 @@ export function glossaryComboHeaderFill(stroke: string): string {
   };
 
   if (stroke.startsWith('var(')) {
-    const m = stroke.match(/^var\((--color-[a-z0-9-]+)-\d{2,3}\)$/i);
+    const m = stroke.match(/^var\((--tw-color-[a-z0-9-]+)-\d{2,3}\)$/i);
     if (m) {
-      return getCanvasColor(`var(${m[1]}-50)`, blendTowardWhite());
+      return getCanvasColor(`var(${m[1]}-50)`, blendTowardSurface());
     }
   }
 
-  return blendTowardWhite();
+  return blendTowardSurface();
 }
 
 export const LABEL_PLACEMENT_BOTTOM = 'bottom';
@@ -591,17 +594,17 @@ const STUDIO_EDGE_LABEL_PADDING: [number, number, number, number] = [
   2, 7, 2, 7,
 ];
 const STUDIO_EDGE_BORDER_BY_COLOR: Record<string, string> = {
-  '#079455': '#ABEFC6',
-  '#0e9384': '#99E5D9',
-  '#1570ef': '#D1E9FF',
-  '#3538cd': '#C7D7FE',
-  '#5925dc': '#D9D6FE',
-  '#6172f3': '#C7D7FE',
-  '#717680': '#E9EAEB',
-  '#7a5af8': '#E3DEFC',
-  '#c11574': '#FCCEEE',
-  '#dc6803': '#FEDF89',
-  '#e31b54': '#FECDD6',
+  '#079455': 'var(--tw-color-utility-success-200)',
+  '#0e9384': 'var(--tw-color-utility-teal-200)',
+  '#1570ef': 'var(--tw-color-utility-brand-200)',
+  '#3538cd': 'var(--tw-color-utility-indigo-200)',
+  '#5925dc': 'var(--tw-color-utility-violet-200)',
+  '#6172f3': 'var(--tw-color-utility-indigo-200)',
+  '#717680': 'var(--tw-color-utility-gray-200)',
+  '#7a5af8': 'var(--tw-color-utility-purple-200)',
+  '#c11574': 'var(--tw-color-utility-pink-200)',
+  '#dc6803': 'var(--tw-color-utility-warning-200)',
+  '#e31b54': 'var(--tw-color-utility-rose-200)',
 };
 
 export function getEffectiveRelationColor(
@@ -648,7 +651,7 @@ const getEdgeLabelBackgroundFill = (
   getColor: (cssVar: string, fallback: string) => string
 ): string => {
   if (studioMode) {
-    return '#FFFFFF';
+    return getColor(EDGE_LABEL_BG_FILL, '#FFFFFF');
   }
 
   return meta
@@ -663,7 +666,10 @@ const getEdgeLabelBackgroundStroke = (
   getColor: (cssVar: string, fallback: string) => string
 ): string => {
   if (studioMode) {
-    return studioBorderColor ?? '#E9EAEB';
+    return getColor(
+      studioBorderColor ?? 'var(--tw-color-border-primary)',
+      '#E9EAEB'
+    );
   }
 
   return meta ? 'none' : getColor(EDGE_LABEL_BG_STROKE, '#FFF');
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/relationshipTypeUtils.ts b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/relationshipTypeUtils.ts
index 647cd26a9753..5e9c39d55722 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/relationshipTypeUtils.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/relationshipTypeUtils.ts
@@ -38,16 +38,16 @@ const HIERARCHICAL_PREDICATES = new Set([
 ]);
 
 const PALETTE_COLOR_TOKENS: Record<PaletteKey, string> = {
-  [PaletteKey.Amber]: 'var(--color-utility-warning-500)',
-  [PaletteKey.Blue]: 'var(--color-utility-blue-500)',
-  [PaletteKey.Gray]: 'var(--color-utility-gray-500)',
-  [PaletteKey.Green]: 'var(--color-utility-success-500)',
-  [PaletteKey.Indigo]: 'var(--color-utility-indigo-500)',
-  [PaletteKey.Pink]: 'var(--color-utility-pink-500)',
-  [PaletteKey.Purple]: 'var(--color-utility-purple-500)',
-  [PaletteKey.Rose]: 'var(--color-fg-error-primary)',
-  [PaletteKey.Teal]: 'var(--color-utility-success-600)',
-  [PaletteKey.Violet]: 'var(--color-utility-purple-600)',
+  [PaletteKey.Amber]: 'var(--tw-color-utility-warning-500)',
+  [PaletteKey.Blue]: 'var(--tw-color-utility-blue-500)',
+  [PaletteKey.Gray]: 'var(--tw-color-utility-gray-500)',
+  [PaletteKey.Green]: 'var(--tw-color-utility-success-500)',
+  [PaletteKey.Indigo]: 'var(--tw-color-utility-indigo-500)',
+  [PaletteKey.Pink]: 'var(--tw-color-utility-pink-500)',
+  [PaletteKey.Purple]: 'var(--tw-color-utility-purple-500)',
+  [PaletteKey.Rose]: 'var(--tw-color-fg-error-primary)',
+  [PaletteKey.Teal]: 'var(--tw-color-utility-success-600)',
+  [PaletteKey.Violet]: 'var(--tw-color-utility-purple-600)',
 };
 
 const PALETTE_HEX_COLORS: Record<PaletteKey, string> = {
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx
index 0cfb1e408c60..c2407d5c912b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx
@@ -12,10 +12,12 @@
  */
 
 import { Button, NavList, Typography } from '@openmetadata/ui-core-components';
-import { Glossary as GlossaryIcon } from '@openmetadata/ui-core-components/icons';
+import {
+  Glossary as GlossaryIcon,
+  Plus,
+} from '@openmetadata/ui-core-components/icons';
 import { useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as PlusIcon } from '../../../assets/svg/plus-primary.svg';
 import GlossaryV1Skeleton from '../../../components/common/Skeleton/GlossaryV1/GlossaryV1LeftPanelSkeleton.component';
 import { usePermissionProvider } from '../../../context/PermissionProvider/PermissionProvider';
 import { ResourceEntity } from '../../../enums/permissions.enum';
@@ -96,7 +98,7 @@ const GlossaryLeftPanel = ({
                 className="tw:w-full"
                 color="secondary"
                 data-testid="add-glossary"
-                iconLeading={<PlusIcon style={{ height: 16, width: 16 }} />}
+                iconLeading={<Plus className="tw:text-fg-brand-primary" />}
                 size="sm"
                 onPress={onAddGlossary}>
                 <Typography className="tw:text-brand-tertiary" weight="regular">
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
index eef037f6fab9..6b1d3987c0cd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
@@ -11,12 +11,21 @@
  *  limitations under the License.
  */
 
-import { Typography } from '@openmetadata/ui-core-components';
-import { Button, Form, FormProps, Input, Space } from 'antd';
-import { useForm } from 'antd/lib/form/Form';
+import {
+  Box,
+  Button,
+  Card,
+  FieldTypes,
+  FormField,
+  getField,
+  HintText,
+  HookForm,
+  Typography,
+} from '@openmetadata/ui-core-components';
 import { AxiosError } from 'axios';
 import { isEmpty } from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { ActivityFeedTabs } from '../../../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface';
@@ -67,7 +76,9 @@ const RequestDescription = () => {
   const { t } = useTranslation();
   const location = useCustomLocation();
   const navigate = useNavigate();
-  const [form] = useForm();
+  const form = useForm<{ title: string; assignees: Option[] }>({
+    defaultValues: { title: '', assignees: [] },
+  });
 
   const { entityType } = useRequiredParams<{ entityType: EntityType }>();
 
@@ -115,7 +126,10 @@ const RequestDescription = () => {
     return getDescriptionTaskFieldPath(field, value);
   };
 
-  const onCreateTask: FormProps['onFinish'] = async (formValues) => {
+  const onCreateTask = async (formValues: {
+    title: string;
+    assignees: Option[];
+  }) => {
     setIsLoading(true);
     if (assignees.length) {
       const data: CreateTask = {
@@ -175,11 +189,9 @@ const RequestDescription = () => {
       setAssignees(defaultAssignee);
       setOptions(defaultAssignee);
     }
-    form.setFieldsValue({
-      title: taskMessage.trimEnd(),
-      assignees: defaultAssignee,
-    });
-  }, [entityData]);
+    form.setValue('title', taskMessage.trimEnd());
+    form.setValue('assignees', defaultAssignee ?? []);
+  }, [entityData, form, taskMessage]);
 
   useEffect(() => {
     setPayload({
@@ -204,103 +216,114 @@ const RequestDescription = () => {
       className="content-height-with-resizable-panel"
       firstPanel={{
         className: 'content-resizable-panel-container',
-        cardClassName: 'max-width-md m-x-auto',
+        wrapInCard: false,
         allowScroll: true,
         minWidth: 700,
         flex: 0.6,
         children: (
-          <div className="d-grid gap-4">
-            <TitleBreadcrumb
-              titleLinks={[
-                ...getBreadCrumbList(entityData, entityType),
-                {
-                  name: t('label.create-entity', {
-                    entity: t('label.task'),
-                  }),
-                  activeTitle: true,
-                  url: '',
-                },
-              ]}
-            />
-
-            <div
-              className="m-t-0 request-description"
-              key="request-description">
-              <Typography as="p" className="text-base" data-testid="form-title">
-                {t('label.create-entity', {
-                  entity: t('label.task'),
-                })}
-              </Typography>
-              <Form
-                data-testid="form-container"
-                form={form}
-                layout="vertical"
-                onFinish={onCreateTask}>
-                <Form.Item
-                  data-testid="title"
-                  label={`${t('label.task-entity', {
-                    entity: t('label.title'),
-                  })}:`}
-                  name="title">
-                  <Input
-                    disabled
-                    placeholder={t('label.task-entity', {
-                      entity: t('label.title'),
-                    })}
-                  />
-                </Form.Item>
-                <Form.Item
-                  data-testid="assignees"
-                  label={`${t('label.assignee-plural')}:`}
-                  name="assignees"
-                  rules={[
+          <Card className="max-width-md m-x-auto">
+            <Card.Content>
+              <Box direction="col" gap={4}>
+                <TitleBreadcrumb
+                  titleLinks={[
+                    ...getBreadCrumbList(entityData, entityType),
                     {
-                      required: true,
-                      message: t('message.field-text-is-required', {
-                        fieldText: t('label.assignee-plural'),
+                      name: t('label.create-entity', {
+                        entity: t('label.task'),
                       }),
+                      activeTitle: true,
+                      url: '',
                     },
-                  ]}>
-                  <Assignees
-                    options={options}
-                    value={assignees}
-                    onChange={setAssignees}
-                    onSearch={onSearch}
-                  />
-                </Form.Item>
-                <TaskPayloadSchemaFields
-                  payload={payload}
-                  schema={taskFormSchema?.formSchema}
-                  uiSchema={taskFormSchema?.uiSchema}
-                  onChange={setPayload}
+                  ]}
                 />
 
-                <Form.Item noStyle>
-                  <Space
-                    className="w-full justify-end"
-                    data-testid="cta-buttons"
-                    size={16}>
-                    <Button data-testid="cancel-btn" type="link" onClick={back}>
-                      {t('label.back')}
-                    </Button>
-                    <Button
-                      data-testid="submit-btn"
-                      htmlType="submit"
-                      loading={isLoading}
-                      type="primary">
-                      {payload.newDescription
-                        ? t('label.suggest')
-                        : t('label.save')}
-                    </Button>
-                  </Space>
-                </Form.Item>
-              </Form>
-            </div>
-          </div>
+                <div
+                  className="m-t-0 request-description"
+                  key="request-description">
+                  <Typography
+                    as="p"
+                    className="text-base"
+                    data-testid="form-title">
+                    {t('label.create-entity', {
+                      entity: t('label.task'),
+                    })}
+                  </Typography>
+                  <HookForm
+                    className="tw:flex tw:flex-col tw:gap-6"
+                    data-testid="form-container"
+                    form={form}
+                    onSubmit={form.handleSubmit(onCreateTask)}>
+                    {getField({
+                      name: 'title',
+                      type: FieldTypes.TEXT,
+                      label: t('label.task-entity', {
+                        entity: t('label.title'),
+                      }),
+                      props: { 'data-testid': 'title', isDisabled: true },
+                    })}
+                    <FormField
+                      control={form.control}
+                      name="assignees"
+                      rules={{
+                        required: t('message.field-text-is-required', {
+                          fieldText: t('label.assignee-plural'),
+                        }),
+                      }}>
+                      {({ field, fieldState }) => (
+                        <Box data-testid="assignees" direction="col" gap={1}>
+                          <Assignees
+                            isRequired
+                            isInvalid={fieldState.invalid}
+                            label={t('label.assignee-plural')}
+                            options={options}
+                            value={field.value}
+                            onBlur={field.onBlur}
+                            onChange={(values) => {
+                              field.onChange(values);
+                              setAssignees(values);
+                            }}
+                            onSearch={onSearch}
+                          />
+                          {fieldState.error?.message && (
+                            <HintText isInvalid>
+                              {fieldState.error.message}
+                            </HintText>
+                          )}
+                        </Box>
+                      )}
+                    </FormField>
+                    <TaskPayloadSchemaFields
+                      payload={payload}
+                      schema={taskFormSchema?.formSchema}
+                      uiSchema={taskFormSchema?.uiSchema}
+                      onChange={setPayload}
+                    />
+                    <Box data-testid="cta-buttons" gap={4} justify="end">
+                      <Button
+                        color="link-gray"
+                        data-testid="cancel-btn"
+                        onPress={back}>
+                        {t('label.back')}
+                      </Button>
+                      <Button
+                        data-testid="submit-btn"
+                        isLoading={isLoading}
+                        type="submit">
+                        {payload.newDescription
+                          ? t('label.suggest')
+                          : t('label.save')}
+                      </Button>
+                    </Box>
+                  </HookForm>
+                </div>
+              </Box>
+            </Card.Content>
+          </Card>
         ),
       }}
       pageTitle={t('label.request-description')}
       secondPanel={{
+        wrapInCard: false,
         className: 'content-resizable-panel-container',
         minWidth: 60,
         flex: 0.4,
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
index 1bdbabeeea4d..59f8d906decc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
@@ -11,12 +11,21 @@
  *  limitations under the License.
  */
 
-import { Typography } from '@openmetadata/ui-core-components';
-import { Button, Form, FormProps, Input, Space } from 'antd';
-import { useForm } from 'antd/lib/form/Form';
+import {
+  Box,
+  Button,
+  Card,
+  FieldTypes,
+  FormField,
+  getField,
+  HintText,
+  HookForm,
+  Typography,
+} from '@openmetadata/ui-core-components';
 import { AxiosError } from 'axios';
 import { isEmpty } from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { ActivityFeedTabs } from '../../../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface';
@@ -68,7 +77,9 @@ const RequestTag = () => {
   const { t } = useTranslation();
   const location = useCustomLocation();
   const navigate = useNavigate();
-  const [form] = useForm();
+  const form = useForm<{ title: string; assignees: Option[] }>({
+    defaultValues: { title: '', assignees: [] },
+  });
   const { entityType } = useRequiredParams<{ entityType: EntityType }>();
   const { fqn } = useFqn();
   const queryParams = new URLSearchParams(location.search);
@@ -114,7 +125,10 @@ const RequestTag = () => {
     return getTagTaskFieldPath(field, value);
   };
 
-  const onCreateTask: FormProps['onFinish'] = async (formValues) => {
+  const onCreateTask = async (formValues: {
+    title: string;
+    assignees: Option[];
+  }) => {
     setIsLoading(true);
 
     const data: CreateTask = {
@@ -167,11 +181,9 @@ const RequestTag = () => {
       setAssignees(defaultAssignee);
       setOptions((prev) => [...defaultAssignee, ...prev]);
     }
-    form.setFieldsValue({
-      title: taskMessage.trimEnd(),
-      assignees: defaultAssignee,
-    });
-  }, [entityData]);
+    form.setValue('title', taskMessage.trimEnd());
+    form.setValue('assignees', defaultAssignee ?? []);
+  }, [entityData, form, taskMessage]);
 
   useEffect(() => {
     setPayload({
@@ -197,105 +209,113 @@ const RequestTag = () => {
     <ResizablePanels
       className="content-height-with-resizable-panel"
       firstPanel={{
-        className: 'content-resizable-panel-container bg-white',
+        className: 'content-resizable-panel-container',
         minWidth: 700,
         flex: 0.6,
-        cardClassName: 'max-width-md m-x-auto',
+        wrapInCard: false,
         allowScroll: true,
         children: (
-          <div className="d-grid gap-4">
-            <TitleBreadcrumb
-              titleLinks={[
-                ...getBreadCrumbList(entityData, entityType),
-                {
-                  name: t('label.create-entity', {
-                    entity: t('label.task'),
-                  }),
-                  activeTitle: true,
-                  url: '',
-                },
-              ]}
-            />
-            <div className="m-t-0 request-tags" key="request-tags">
-              <Typography as="p" className="text-base" data-testid="form-title">
-                {t('label.create-entity', {
-                  entity: t('label.task'),
-                })}
-              </Typography>
-              <Form
-                data-testid="form-container"
-                form={form}
-                initialValues={{
-                  suggestTags: [],
-                }}
-                layout="vertical"
-                onFinish={onCreateTask}>
-                <Form.Item
-                  data-testid="title"
-                  label={`${t('label.task-entity', {
-                    entity: t('label.title'),
-                  })}:`}
-                  name="title">
-                  <Input
-                    disabled
-                    placeholder={`${t('label.task-entity', {
-                      entity: t('label.title'),
-                    })}`}
-                  />
-                </Form.Item>
-                <Form.Item
-                  data-testid="assignees"
-                  label={`${t('label.assignee-plural')}:`}
-                  name="assignees"
-                  rules={[
+          <Card className="max-width-md m-x-auto">
+            <Card.Content>
+              <Box direction="col" gap={4}>
+                <TitleBreadcrumb
+                  titleLinks={[
+                    ...getBreadCrumbList(entityData, entityType),
                     {
-                      required: true,
-                      message: t('message.field-text-is-required', {
-                        fieldText: t('label.assignee-plural'),
+                      name: t('label.create-entity', {
+                        entity: t('label.task'),
                       }),
+                      activeTitle: true,
+                      url: '',
                     },
-                  ]}>
-                  <Assignees
-                    options={options}
-                    value={assignees}
-                    onChange={setAssignees}
-                    onSearch={onSearch}
-                  />
-                </Form.Item>
-                <TaskPayloadSchemaFields
-                  payload={payload}
-                  schema={taskFormSchema?.formSchema}
-                  uiSchema={taskFormSchema?.uiSchema}
-                  onChange={setPayload}
+                  ]}
                 />
-
-                <Form.Item>
-                  <Space
-                    className="w-full justify-end"
-                    data-testid="cta-buttons"
-                    size={16}>
-                    <Button data-testid="cancel-btn" type="link" onClick={back}>
-                      {t('label.back')}
-                    </Button>
-                    <Button
-                      data-testid="submit-tag-request"
-                      htmlType="submit"
-                      loading={isLoading}
-                      type="primary">
-                      {(payload.tagsToAdd as TagLabel[] | undefined)?.length
-                        ? t('label.suggest')
-                        : t('label.save')}
-                    </Button>
-                  </Space>
-                </Form.Item>
-              </Form>
-            </div>
-          </div>
+                <div className="m-t-0 request-tags" key="request-tags">
+                  <Typography
+                    as="p"
+                    className="text-base"
+                    data-testid="form-title">
+                    {t('label.create-entity', {
+                      entity: t('label.task'),
+                    })}
+                  </Typography>
+                  <HookForm
+                    className="tw:flex tw:flex-col tw:gap-6"
+                    data-testid="form-container"
+                    form={form}
+                    onSubmit={form.handleSubmit(onCreateTask)}>
+                    {getField({
+                      name: 'title',
+                      type: FieldTypes.TEXT,
+                      label: t('label.task-entity', {
+                        entity: t('label.title'),
+                      }),
+                      props: { 'data-testid': 'title', isDisabled: true },
+                    })}
+                    <FormField
+                      control={form.control}
+                      name="assignees"
+                      rules={{
+                        required: t('message.field-text-is-required', {
+                          fieldText: t('label.assignee-plural'),
+                        }),
+                      }}>
+                      {({ field, fieldState }) => (
+                        <Box data-testid="assignees" direction="col" gap={1}>
+                          <Assignees
+                            isRequired
+                            isInvalid={fieldState.invalid}
+                            label={t('label.assignee-plural')}
+                            options={options}
+                            value={field.value}
+                            onBlur={field.onBlur}
+                            onChange={(values) => {
+                              field.onChange(values);
+                              setAssignees(values);
+                            }}
+                            onSearch={onSearch}
+                          />
+                          {fieldState.error?.message && (
+                            <HintText isInvalid>
+                              {fieldState.error.message}
+                            </HintText>
+                          )}
+                        </Box>
+                      )}
+                    </FormField>
+                    <TaskPayloadSchemaFields
+                      payload={payload}
+                      schema={taskFormSchema?.formSchema}
+                      uiSchema={taskFormSchema?.uiSchema}
+                      onChange={setPayload}
+                    />
+                    <Box data-testid="cta-buttons" gap={4} justify="end">
+                      <Button
+                        color="link-gray"
+                        data-testid="cancel-btn"
+                        onPress={back}>
+                        {t('label.back')}
+                      </Button>
+                      <Button
+                        data-testid="submit-tag-request"
+                        isLoading={isLoading}
+                        type="submit">
+                        {(payload.tagsToAdd as TagLabel[] | undefined)?.length
+                          ? t('label.suggest')
+                          : t('label.save')}
+                      </Button>
+                    </Box>
+                  </HookForm>
+                </div>
+              </Box>
+            </Card.Content>
+          </Card>
         ),
       }}
       pageTitle={t('label.request-tag-plural')}
       secondPanel={{
-        className: 'content-resizable-panel-container bg-white',
+        wrapInCard: false,
+        className: 'content-resizable-panel-container',
         minWidth: 60,
         flex: 0.4,
         children: (
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
index a0ee345c81d2..da4b970bb1df 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
@@ -11,12 +11,21 @@
  *  limitations under the License.
  */
 
-import { Typography } from '@openmetadata/ui-core-components';
-import { Button, Form, FormProps, Input, Space } from 'antd';
-import { useForm } from 'antd/lib/form/Form';
+import {
+  Box,
+  Button,
+  Card,
+  FieldTypes,
+  FormField,
+  getField,
+  HintText,
+  HookForm,
+  Typography,
+} from '@openmetadata/ui-core-components';
 import { AxiosError } from 'axios';
 import { isEmpty, isUndefined } from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { ActivityFeedTabs } from '../../../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface';
@@ -26,7 +35,6 @@ import TitleBreadcrumb from '../../../components/common/TitleBreadcrumb/TitleBre
 import ExploreSearchCard from '../../../components/ExploreV1/ExploreSearchCard/ExploreSearchCard';
 import { SearchedDataProps } from '../../../components/SearchedData/SearchedData.interface';
 import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
-import { VALIDATION_MESSAGES } from '../../../constants/constants';
 import { TASK_SANITIZE_VALUE_REGEX } from '../../../constants/regex.constants';
 import { EntityTabs, EntityType } from '../../../enums/entity.enum';
 import { Glossary } from '../../../generated/entity/data/glossary';
@@ -71,7 +79,9 @@ import { EntityData, Option } from '../TasksPage.interface';
 const UpdateDescription = () => {
   const location = useCustomLocation();
   const navigate = useNavigate();
-  const [form] = useForm();
+  const form = useForm<{ title: string; assignees: Option[] }>({
+    defaultValues: { title: '', assignees: [] },
+  });
 
   const { entityType } = useRequiredParams<{ entityType: EntityType }>();
   const { fqn } = useFqn();
@@ -144,7 +154,10 @@ const UpdateDescription = () => {
     return getDescriptionTaskFieldPath(field, value);
   };
 
-  const onCreateTask: FormProps['onFinish'] = async (formValues) => {
+  const onCreateTask = async (formValues: {
+    title: string;
+    assignees: Option[];
+  }) => {
     setIsLoading(true);
 
     try {
@@ -200,12 +213,9 @@ const UpdateDescription = () => {
       setAssignees(defaultAssignee);
       setOptions(defaultAssignee);
     }
-    form.setFieldsValue({
-      title: taskMessage.trimEnd(),
-      assignees: defaultAssignee,
-      description: getDescription(),
-    });
-  }, [entityData]);
+    form.setValue('title', taskMessage.trimEnd());
+    form.setValue('assignees', defaultAssignee ?? []);
+  }, [entityData, form, taskMessage]);
 
   useEffect(() => {
     const description = getDescription();
@@ -231,92 +241,112 @@ const UpdateDescription = () => {
       className="content-height-with-resizable-panel"
       firstPanel={{
         className: 'content-resizable-panel-container',
-        cardClassName: 'max-width-md m-x-auto',
+        wrapInCard: false,
         allowScroll: true,
         minWidth: 700,
         flex: 0.6,
         children: (
-          <div className="d-grid gap-4">
-            <TitleBreadcrumb
-              titleLinks={[
-                ...getBreadCrumbList(entityData, entityType),
-                {
-                  name: t('label.create-entity', {
-                    entity: t('label.task'),
-                  }),
-                  activeTitle: true,
-                  url: '',
-                },
-              ]}
-            />
-
-            <div className="m-t-0 request-description" key="update-description">
-              <Typography as="p" className="text-base" data-testid="form-title">
-                {t('label.create-entity', {
-                  entity: t('label.task'),
-                })}
-              </Typography>
-              <Form
-                data-testid="form-container"
-                form={form}
-                layout="vertical"
-                validateMessages={VALIDATION_MESSAGES}
-                onFinish={onCreateTask}>
-                <Form.Item
-                  data-testid="title"
-                  label={`${t('label.title')}:`}
-                  name="title">
-                  <Input
-                    disabled
-                    placeholder={t('label.task-entity', {
-                      entity: t('label.title'),
-                    })}
-                  />
-                </Form.Item>
-                <Form.Item
-                  data-testid="assignees"
-                  label={`${t('label.assignee-plural')}:`}
-                  name="assignees"
-                  rules={[{ required: true }]}>
-                  <Assignees
-                    options={options}
-                    value={assignees}
-                    onChange={setAssignees}
-                    onSearch={onSearch}
-                  />
-                </Form.Item>
-
-                <TaskPayloadSchemaFields
-                  payload={payload}
-                  schema={taskFormSchema?.formSchema}
-                  uiSchema={taskFormSchema?.uiSchema}
-                  onChange={setPayload}
+          <Card className="max-width-md m-x-auto">
+            <Card.Content>
+              <Box direction="col" gap={4}>
+                <TitleBreadcrumb
+                  titleLinks={[
+                    ...getBreadCrumbList(entityData, entityType),
+                    {
+                      name: t('label.create-entity', {
+                        entity: t('label.task'),
+                      }),
+                      activeTitle: true,
+                      url: '',
+                    },
+                  ]}
                 />
 
-                <Form.Item>
-                  <Space
-                    className="w-full justify-end"
-                    data-testid="cta-buttons"
-                    size={16}>
-                    <Button data-testid="cancel-btn" type="link" onClick={back}>
-                      {t('label.back')}
-                    </Button>
-                    <Button
-                      data-testid="submit-btn"
-                      htmlType="submit"
-                      loading={isLoading}
-                      type="primary">
-                      {t('label.save')}
-                    </Button>
-                  </Space>
-                </Form.Item>
-              </Form>
-            </div>
-          </div>
+                <div
+                  className="m-t-0 request-description"
+                  key="update-description">
+                  <Typography
+                    as="p"
+                    className="text-base"
+                    data-testid="form-title">
+                    {t('label.create-entity', {
+                      entity: t('label.task'),
+                    })}
+                  </Typography>
+                  <HookForm
+                    className="tw:flex tw:flex-col tw:gap-6"
+                    data-testid="form-container"
+                    form={form}
+                    onSubmit={form.handleSubmit(onCreateTask)}>
+                    {getField({
+                      name: 'title',
+                      type: FieldTypes.TEXT,
+                      label: t('label.task-entity', {
+                        entity: t('label.title'),
+                      }),
+                      props: { 'data-testid': 'title', isDisabled: true },
+                    })}
+                    <FormField
+                      control={form.control}
+                      name="assignees"
+                      rules={{
+                        required: t('message.field-text-is-required', {
+                          fieldText: t('label.assignee-plural'),
+                        }),
+                      }}>
+                      {({ field, fieldState }) => (
+                        <Box data-testid="assignees" direction="col" gap={1}>
+                          <Assignees
+                            isRequired
+                            isInvalid={fieldState.invalid}
+                            label={t('label.assignee-plural')}
+                            options={options}
+                            value={field.value}
+                            onBlur={field.onBlur}
+                            onChange={(values) => {
+                              field.onChange(values);
+                              setAssignees(values);
+                            }}
+                            onSearch={onSearch}
+                          />
+                          {fieldState.error?.message && (
+                            <HintText isInvalid>
+                              {fieldState.error.message}
+                            </HintText>
+                          )}
+                        </Box>
+                      )}
+                    </FormField>
+                    <TaskPayloadSchemaFields
+                      payload={payload}
+                      schema={taskFormSchema?.formSchema}
+                      uiSchema={taskFormSchema?.uiSchema}
+                      onChange={setPayload}
+                    />
+                    <Box data-testid="cta-buttons" gap={4} justify="end">
+                      <Button
+                        color="link-gray"
+                        data-testid="cancel-btn"
+                        onPress={back}>
+                        {t('label.back')}
+                      </Button>
+                      <Button
+                        data-testid="submit-btn"
+                        isLoading={isLoading}
+                        type="submit">
+                        {t('label.save')}
+                      </Button>
+                    </Box>
+                  </HookForm>
+                </div>
+              </Box>
+            </Card.Content>
+          </Card>
         ),
       }}
       pageTitle={t('label.update-description')}
       secondPanel={{
+        wrapInCard: false,
         className: 'content-resizable-panel-container',
         minWidth: 60,
         flex: 0.4,
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
index 6634d3c0111f..d1c38ca75f4f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
@@ -11,12 +11,21 @@
  *  limitations under the License.
  */
 
-import { Typography } from '@openmetadata/ui-core-components';
-import { Button, Form, FormProps, Input, Space } from 'antd';
-import { useForm } from 'antd/lib/form/Form';
+import {
+  Box,
+  Button,
+  Card,
+  FieldTypes,
+  FormField,
+  getField,
+  HintText,
+  HookForm,
+  Typography,
+} from '@openmetadata/ui-core-components';
 import { AxiosError } from 'axios';
 import { isEmpty, isUndefined } from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { ActivityFeedTabs } from '../../../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface';
@@ -73,7 +82,9 @@ const UpdateTag = () => {
   const location = useCustomLocation();
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const [form] = useForm();
+  const form = useForm<{ title: string; assignees: Option[] }>({
+    defaultValues: { title: '', assignees: [] },
+  });
 
   const { entityType } = useRequiredParams<{ entityType: EntityType }>();
 
@@ -149,7 +160,10 @@ const UpdateTag = () => {
     return getTagTaskFieldPath(field, value);
   };
 
-  const onCreateTask: FormProps['onFinish'] = async (formValues) => {
+  const onCreateTask = async (formValues: {
+    title: string;
+    assignees: Option[];
+  }) => {
     setIsLoading(true);
 
     const data: CreateTask = {
@@ -207,11 +221,9 @@ const UpdateTag = () => {
       setAssignees(defaultAssignee);
       setOptions(defaultAssignee);
     }
-    form.setFieldsValue({
-      title: taskMessage.trimEnd(),
-      assignees: defaultAssignee,
-    });
-  }, [entityData, columnObject]);
+    form.setValue('title', taskMessage.trimEnd());
+    form.setValue('assignees', defaultAssignee ?? []);
+  }, [entityData, form, taskMessage]);
 
   useEffect(() => {
     setPayload({
@@ -237,101 +249,113 @@ const UpdateTag = () => {
     <ResizablePanels
       className="content-height-with-resizable-panel"
       firstPanel={{
-        className: 'content-resizable-panel-container bg-white',
+        className: 'content-resizable-panel-container',
         minWidth: 700,
         flex: 0.6,
-        cardClassName: 'max-width-md m-x-auto',
+        wrapInCard: false,
         allowScroll: true,
         children: (
-          <div className="d-grid gap-4">
-            <TitleBreadcrumb
-              titleLinks={[
-                ...getBreadCrumbList(entityData, entityType),
-                {
-                  name: t('label.create-entity', {
-                    entity: t('label.task'),
-                  }),
-                  activeTitle: true,
-                  url: '',
-                },
-              ]}
-            />
-            <div className="m-t-0 request-tags" key="update-tags">
-              <Typography as="p" className="text-base" data-testid="form-title">
-                {t('label.create-entity', {
-                  entity: t('label.task'),
-                })}
-              </Typography>
-              <Form
-                data-testid="form-container"
-                form={form}
-                layout="vertical"
-                onFinish={onCreateTask}>
-                <Form.Item
-                  data-testid="title"
-                  label={`${t('label.title')}:`}
-                  name="title">
-                  <Input
-                    disabled
-                    placeholder={t('label.task-entity', {
-                      entity: t('label.title'),
-                    })}
-                  />
-                </Form.Item>
-                <Form.Item
-                  data-testid="assignees"
-                  label={`${t('label.assignee-plural')}:`}
-                  name="assignees"
-                  rules={[
+          <Card className="max-width-md m-x-auto">
+            <Card.Content>
+              <Box direction="col" gap={4}>
+                <TitleBreadcrumb
+                  titleLinks={[
+                    ...getBreadCrumbList(entityData, entityType),
                     {
-                      required: true,
-                      message: t('message.field-text-is-required', {
-                        fieldText: t('label.assignee-plural'),
+                      name: t('label.create-entity', {
+                        entity: t('label.task'),
                       }),
+                      activeTitle: true,
+                      url: '',
                     },
-                  ]}>
-                  <Assignees
-                    options={options}
-                    value={assignees}
-                    onChange={setAssignees}
-                    onSearch={onSearch}
-                  />
-                </Form.Item>
-
-                <TaskPayloadSchemaFields
-                  payload={payload}
-                  schema={taskFormSchema?.formSchema}
-                  uiSchema={taskFormSchema?.uiSchema}
-                  onChange={setPayload}
+                  ]}
                 />
-
-                <Form.Item>
-                  <Space
-                    className="w-full justify-end"
-                    data-testid="cta-buttons"
-                    size={16}>
-                    <Button data-testid="cancel-btn" type="link" onClick={back}>
-                      {t('label.back')}
-                    </Button>
-                    <Button
-                      data-testid="submit-tag-request"
-                      htmlType="submit"
-                      loading={isLoading}
-                      type="primary">
-                      {t('label.save')}
-                    </Button>
-                  </Space>
-                </Form.Item>
-              </Form>
-            </div>
-          </div>
+                <div className="m-t-0 request-tags" key="update-tags">
+                  <Typography
+                    as="p"
+                    className="text-base"
+                    data-testid="form-title">
+                    {t('label.create-entity', {
+                      entity: t('label.task'),
+                    })}
+                  </Typography>
+                  <HookForm
+                    className="tw:flex tw:flex-col tw:gap-6"
+                    data-testid="form-container"
+                    form={form}
+                    onSubmit={form.handleSubmit(onCreateTask)}>
+                    {getField({
+                      name: 'title',
+                      type: FieldTypes.TEXT,
+                      label: t('label.task-entity', {
+                        entity: t('label.title'),
+                      }),
+                      props: { 'data-testid': 'title', isDisabled: true },
+                    })}
+                    <FormField
+                      control={form.control}
+                      name="assignees"
+                      rules={{
+                        required: t('message.field-text-is-required', {
+                          fieldText: t('label.assignee-plural'),
+                        }),
+                      }}>
+                      {({ field, fieldState }) => (
+                        <Box data-testid="assignees" direction="col" gap={1}>
+                          <Assignees
+                            isRequired
+                            isInvalid={fieldState.invalid}
+                            label={t('label.assignee-plural')}
+                            options={options}
+                            value={field.value}
+                            onBlur={field.onBlur}
+                            onChange={(values) => {
+                              field.onChange(values);
+                              setAssignees(values);
+                            }}
+                            onSearch={onSearch}
+                          />
+                          {fieldState.error?.message && (
+                            <HintText isInvalid>
+                              {fieldState.error.message}
+                            </HintText>
+                          )}
+                        </Box>
+                      )}
+                    </FormField>
+                    <TaskPayloadSchemaFields
+                      payload={payload}
+                      schema={taskFormSchema?.formSchema}
+                      uiSchema={taskFormSchema?.uiSchema}
+                      onChange={setPayload}
+                    />
+                    <Box data-testid="cta-buttons" gap={4} justify="end">
+                      <Button
+                        color="link-gray"
+                        data-testid="cancel-btn"
+                        onPress={back}>
+                        {t('label.back')}
+                      </Button>
+                      <Button
+                        data-testid="submit-tag-request"
+                        isLoading={isLoading}
+                        type="submit">
+                        {t('label.save')}
+                      </Button>
+                    </Box>
+                  </HookForm>
+                </div>
+              </Box>
+            </Card.Content>
+          </Card>
         ),
       }}
       pageTitle={t('label.update-entity', {
         entity: i18n.t('label.tag'),
       })}
       secondPanel={{
-        className: 'content-resizable-panel-container bg-white',
+        wrapInCard: false,
+        className: 'content-resizable-panel-container',
         minWidth: 60,
         flex: 0.4,
         children: (
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx
index a423fe6d87c8..c884c91b77ca 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Assignees from './Assignees';
 
 const mockOptions = [
@@ -50,11 +50,19 @@ const mockProps = {
   onChange: jest.fn(),
 };
 
-jest.mock('../../../components/common/UserTag/UserTag.component', () => ({
-  UserTag: jest.fn().mockReturnValue(<div>UserTag</div>),
-}));
-
 describe('Test assignees component', () => {
+  it('preserves the selected assignee label and identity', async () => {
+    const onChange = jest.fn();
+    render(<Assignees {...mockProps} value={[]} onChange={onChange} />);
+
+    fireEvent.mouseDown(screen.getByRole('combobox'));
+    fireEvent.click(await screen.findByText('adam_matthews2'));
+
+    await waitFor(() =>
+      expect(onChange).toHaveBeenCalledWith([mockOptions[0]])
+    );
+  });
+
   it('Should render the component', async () => {
     render(<Assignees {...mockProps} />);
 
@@ -62,7 +70,7 @@ describe('Test assignees component', () => {
 
     fireEvent.change(container, { target: { value: 'adam_matthews2' } });
 
-    const options = await screen.findByTestId(`adam_matthews2`);
+    const options = await screen.findByText('adam_matthews2');
 
     expect(container).toBeInTheDocument();
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx
index ed812acf4b62..82b266e02a2d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx
@@ -11,24 +11,26 @@
  *  limitations under the License.
  */
 
-import { Typography } from '@openmetadata/ui-core-components';
-import { Select, SelectProps } from 'antd';
-import { DefaultOptionType } from 'antd/lib/select';
-
-import { debounce, groupBy, isArray, isUndefined } from 'lodash';
-import { FC, useMemo } from 'react';
+import {
+  Autocomplete,
+  AutocompleteProps,
+  Avatar,
+} from '@openmetadata/ui-core-components';
+import { Users01 } from '@openmetadata/ui-core-components/icons';
+import { debounce, uniqBy } from 'lodash';
+import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as TeamIcon } from '../../../assets/svg/teams-grey.svg';
-import { UserTag } from '../../../components/common/UserTag/UserTag.component';
-import { UserTagSize } from '../../../components/common/UserTag/UserTag.interface';
-import { OwnerType } from '../../../enums/user.enum';
 import { Option } from '../TasksPage.interface';
-import './Assignee.less';
 
 interface Props
   extends Omit<
-    SelectProps<Option[], DefaultOptionType>,
-    'onChange' | 'onSearch' | 'value' | 'options'
+    AutocompleteProps,
+    | 'children'
+    | 'items'
+    | 'selectedItems'
+    | 'onSearchChange'
+    | 'onChange'
+    | 'value'
   > {
   options: Option[];
   value: Option[];
@@ -38,7 +40,7 @@ interface Props
   isSingleSelect?: boolean;
 }
 
-const Assignees: FC<Props> = ({
+const Assignees = ({
   value: assignees = [],
   onSearch,
   onChange,
@@ -46,98 +48,56 @@ const Assignees: FC<Props> = ({
   disabled,
   isSingleSelect = false,
   ...rest
-}) => {
+}: Props) => {
   const { t } = useTranslation();
-  const handleOnChange = (
-    _values: Option[],
-    newOptions?: DefaultOptionType | DefaultOptionType[]
-  ) => {
-    if (isUndefined(newOptions)) {
-      onChange(newOptions as unknown as Option[]);
-
-      return;
-    }
-
-    const normalizedOptions = isArray(newOptions) ? newOptions : [newOptions];
-    const newValues = normalizedOptions.map((option) => ({
-      label: option['data-label'],
-      value: option.value,
-      type: option.type,
-      name: option.name,
-      displayName: option.displayName,
-    }));
-
-    onChange(newValues as Option[]);
-  };
+  const search = useMemo(() => debounce(onSearch, 300), [onSearch]);
+  useEffect(() => () => search.cancel(), [search]);
 
-  const updatedOption = useMemo(() => {
-    const groupByType = groupBy(options, (d) => d.type);
-    const groupOptions = [];
-    if (!isUndefined(groupByType.team)) {
-      groupOptions.push({
-        type: 'group',
-        label: 'Teams',
-        value: OwnerType.TEAM,
-        options: groupByType.team.map((team) => ({
-          ...team,
-          label: (
-            <div
-              className="d-flex items-center"
-              data-testid={team.name}
-              key={team.value}>
-              <TeamIcon
-                className="vertical-middle m-r-xs"
-                height={16}
-                width={16}
-              />
-              <Typography>{team.label}</Typography>
-            </div>
-          ),
-        })),
-      });
-    }
-    if (!isUndefined(groupByType.user)) {
-      groupOptions.push({
-        type: 'group',
-        label: 'Users',
-        value: OwnerType.USER,
-        options: groupByType.user.map((user) => ({
-          ...user,
-          label: (
-            <div data-testid={user.name}>
-              <UserTag
-                className="assignee-item"
-                id={user.name ?? ''}
-                name={user.label}
-                size={UserTagSize.small}
-              />
-            </div>
-          ),
-        })),
-      });
-    }
-
-    return groupOptions;
-  }, [options]);
+  const toItem = (option: Option) => ({
+    id: option.value,
+    label: option.label,
+    supportingText: option.type === 'team' ? t('label.team') : t('label.user'),
+    icon:
+      option.type === 'team' ? (
+        <Avatar placeholderIcon={Users01} size="xs" />
+      ) : (
+        <Avatar initials={option.label?.charAt(0).toUpperCase()} size="xs" />
+      ),
+  });
+  // Selected identities must survive when a remote search replaces the option page.
+  const availableOptions = uniqBy([...options, ...assignees], 'value');
 
   return (
-    <Select
-      showSearch
-      className="ant-select-custom select-assignee"
-      data-testid="select-assignee"
-      defaultActiveFirstOption={false}
-      disabled={disabled}
-      filterOption={false}
-      mode={isSingleSelect ? undefined : 'multiple'}
-      notFoundContent={null}
-      options={updatedOption}
-      placeholder={t('label.select-to-search')}
-      suffixIcon={null}
-      value={assignees.length ? assignees : undefined}
-      onChange={handleOnChange}
-      onSearch={debounce(onSearch, 300)}
+    <Autocomplete
       {...rest}
-    />
+      data-testid="select-assignee"
+      filterOption={() => true}
+      isDisabled={disabled}
+      items={availableOptions.map(toItem)}
+      multiple={!isSingleSelect}
+      placeholder={rest.placeholder ?? t('label.select-to-search')}
+      selectedItems={assignees.map(toItem)}
+      onItemCleared={(key) =>
+        onChange(assignees.filter((option) => option.value !== key))
+      }
+      onItemInserted={(key) => {
+        const option = availableOptions.find((item) => item.value === key);
+        if (option) {
+          onChange(
+            isSingleSelect ? [option] : uniqBy([...assignees, option], 'value')
+          );
+        }
+      }}
+      onSearchChange={search}>
+      {(item) => (
+        <Autocomplete.Item
+          {...item}
+          data-testid={
+            availableOptions.find((option) => option.value === item.id)?.name
+          }
+        />
+      )}
+    </Autocomplete>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/DescriptionTabs.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/DescriptionTabs.tsx
index 57cd8823640c..d8fbdb9fa31d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/DescriptionTabs.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/DescriptionTabs.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Tabs } from '@openmetadata/ui-core-components';
+import { Box, Tabs, Typography } from '@openmetadata/ui-core-components';
 import { Change } from 'diff';
 import { isEqual } from 'lodash';
 import { lazy, useCallback, useRef, useState } from 'react';
@@ -62,7 +62,7 @@ export const DescriptionTabs = ({
         setDiffs([]);
       }
     },
-    [markdownRef]
+    [description]
   );
 
   return (
@@ -76,18 +76,20 @@ export const DescriptionTabs = ({
         <Tabs.Item data-testid="new-tab" id="3" label="New" />
       </Tabs.List>
       <Tabs.Panel id="1">
-        <div className="border border-main rounded-4 p-sm m-t-sm">
+        <Box
+          className="tw:mt-3 tw:rounded-md tw:border tw:border-primary tw:p-3"
+          direction="col">
           {description?.trim() ? (
             <RichTextEditorPreviewerV1
               enableSeeMoreVariant={false}
               markdown={description}
             />
           ) : (
-            <span className="text-grey-muted">
+            <Typography color="tertiary">
               {t('label.no-entity', { entity: t('label.description') })}
-            </span>
+            </Typography>
           )}
-        </div>
+        </Box>
       </Tabs.Panel>
       <Tabs.Panel id="2">
         <DiffView
@@ -98,7 +100,7 @@ export const DescriptionTabs = ({
       {/* Kept mounted so the editor keeps its edits and the Diff tab can read them via markdownRef. */}
       <Tabs.Panel shouldForceMount className="tw:data-inert:hidden" id="3">
         <RichTextEditor
-          className="m-t-sm"
+          className="new-form-style tw:mt-3"
           initialValue={suggestion}
           placeHolder={placeHolder ?? t('label.update-description')}
           ref={markdownRef}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.test.tsx
index 8cf7b89d7f91..6c5a0f5d3d94 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.test.tsx
@@ -26,11 +26,17 @@
 
 import { fireEvent, render, screen } from '@testing-library/react';
 import { act, ReactNode } from 'react';
-import { TagLabel, TagSource } from '../../../generated/type/tagLabel';
+import {
+  LabelType,
+  State,
+  TagLabel,
+  TagSource,
+} from '../../../generated/type/tagLabel';
 import { JsonSchemaObject } from '../../../rest/taskFormSchemasAPI';
 import TaskPayloadSchemaFields from './TaskPayloadSchemaFields';
 
 jest.mock('@openmetadata/ui-core-components', () => ({
+  ...jest.requireActual('@openmetadata/ui-core-components'),
   Badge: ({ children }: { children?: ReactNode }) => <span>{children}</span>,
   Box: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
   Button: ({
@@ -64,15 +70,15 @@ jest.mock('./TagsTabs', () => ({
       onClick={() =>
         onChange([
           {
-            labelType: 'Manual',
+            labelType: LabelType.Manual,
             source: TagSource.Classification,
-            state: 'Confirmed',
+            state: State.Confirmed,
             tagFQN: 'Classification.PersonalData.Personal',
           },
           {
-            labelType: 'Manual',
+            labelType: LabelType.Manual,
             source: TagSource.Classification,
-            state: 'Confirmed',
+            state: State.Confirmed,
             tagFQN: 'PII.Sensitive',
           },
         ])
@@ -89,9 +95,9 @@ jest.mock('./TagSuggestion', () =>
       onClick={() =>
         onChange([
           {
-            labelType: 'Manual',
+            labelType: LabelType.Manual,
             source: TagSource.Classification,
-            state: 'Confirmed',
+            state: State.Confirmed,
             tagFQN: 'Tier.Tier1',
           },
         ])
@@ -102,20 +108,40 @@ jest.mock('./TagSuggestion', () =>
 );
 
 const PERSONAL_TAG: TagLabel = {
-  labelType: 'Manual',
+  labelType: LabelType.Manual,
   source: TagSource.Classification,
-  state: 'Confirmed',
+  state: State.Confirmed,
   tagFQN: 'Classification.PersonalData.Personal',
 };
 
 const CONFIDENTIAL_TAG: TagLabel = {
-  labelType: 'Manual',
+  labelType: LabelType.Manual,
   source: TagSource.Classification,
-  state: 'Confirmed',
+  state: State.Confirmed,
   tagFQN: 'Classification.PersonalData.Confidential',
 };
 
 describe('TaskPayloadSchemaFields', () => {
+  it('associates required schema fields with their accessible labels', () => {
+    render(
+      <TaskPayloadSchemaFields
+        payload={{ reviewNotes: '' }}
+        schema={{
+          type: 'object',
+          required: ['reviewNotes'],
+          properties: {
+            reviewNotes: { title: 'Review Notes', type: 'string' },
+          },
+        }}
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(
+      screen.getByRole('textbox', { name: /Review Notes/ })
+    ).toBeRequired();
+  });
+
   it('updates description payload fields through the schema widget', () => {
     const onChange = jest.fn();
     const schema: JsonSchemaObject = {
@@ -193,9 +219,9 @@ describe('TaskPayloadSchemaFields', () => {
       currentTags: [PERSONAL_TAG, CONFIDENTIAL_TAG],
       tagsToAdd: [
         {
-          labelType: 'Manual',
+          labelType: LabelType.Manual,
           source: TagSource.Classification,
-          state: 'Confirmed',
+          state: State.Confirmed,
           tagFQN: 'PII.Sensitive',
         },
       ],
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx
index 11c2283053da..4bdd88b8745a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx
@@ -10,27 +10,18 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-/*
- *  Copyright 2026 Collate.
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *  http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
 
 import {
   Badge,
   Box,
   Button,
+  Checkbox,
+  FormItemLabel,
+  Input,
+  Select,
+  TextArea,
   Typography,
 } from '@openmetadata/ui-core-components';
-import { Checkbox, Form, Input, InputNumber, Select } from 'antd';
 import { uniqBy } from 'lodash';
 import {
   ReactNode,
@@ -125,10 +116,7 @@ const ClampedText = ({ text }: { text: string }) => {
         </span>
       )}
       {expanded && (
-        <Button
-          className="tw:p-0! tw:h-auto! tw:min-h-0! tw:text-sm tw:font-medium"
-          color="link-color"
-          onPress={() => setExpanded(false)}>
+        <Button color="link-color" size="sm" onPress={() => setExpanded(false)}>
           {t('label.show-less')}
         </Button>
       )}
@@ -182,7 +170,7 @@ function selectFieldWidgetKind(
 const StringArrayDisplay = ({ items }: { items: string[] }) => {
   if (items.length === 0) {
     return (
-      <Typography className="tw:text-gray-400" size="text-sm">
+      <Typography className="tw:text-quaternary" size="text-sm">
         --
       </Typography>
     );
@@ -221,7 +209,14 @@ const TaskPayloadSchemaFields = ({
   }, [properties, uiSchema]);
 
   const requiredFields = useMemo(
-    () => new Set(Array.isArray(schema?.required) ? schema.required : []),
+    () =>
+      new Set(
+        Array.isArray(schema?.required)
+          ? schema.required.filter(
+              (field): field is string => typeof field === 'string'
+            )
+          : []
+      ),
     [schema]
   );
 
@@ -323,11 +318,11 @@ const TaskPayloadSchemaFields = ({
             src={iconSrc}
           />
         )}
-        <Typography className="tw:text-gray-500" size="text-sm">
+        <Typography className="tw:text-tertiary" size="text-sm">
           {label}
         </Typography>
       </Box>
-      <Typography className="tw:text-gray-500" size="text-sm">
+      <Typography className="tw:text-tertiary" size="text-sm">
         :
       </Typography>
       <div className="tw:min-w-0 tw:overflow-hidden tw:wrap-break-word">
@@ -339,7 +334,7 @@ const TaskPayloadSchemaFields = ({
   const renderReadOnlyValue = (value: unknown) => {
     if (value === null || value === undefined || value === '') {
       return (
-        <Typography className="tw:text-gray-400" size="text-sm">
+        <Typography className="tw:text-quaternary" size="text-sm">
           --
         </Typography>
       );
@@ -369,7 +364,7 @@ const TaskPayloadSchemaFields = ({
         {description ? (
           <Typography
             as="span"
-            className="tw:block tw:text-gray-400 tw:mt-0.5"
+            className="tw:block tw:text-quaternary tw:mt-0.5"
             size="text-sm">
             {description}
           </Typography>
@@ -400,14 +395,14 @@ const TaskPayloadSchemaFields = ({
             </Badge>
           ))
         ) : (
-          <Typography className="tw:text-gray-400" size="text-sm">
+          <Typography className="tw:text-quaternary" size="text-sm">
             --
           </Typography>
         )}
         {description ? (
           <Typography
             as="span"
-            className="tw:block tw:w-full tw:text-gray-400 tw:mt-0.5"
+            className="tw:block tw:w-full tw:text-quaternary tw:mt-0.5"
             size="text-sm">
             {description}
           </Typography>
@@ -446,7 +441,8 @@ const TaskPayloadSchemaFields = ({
     }
 
     return (
-      <Form.Item key={fieldName} label={`${label}:`}>
+      <Box direction="col" gap={2} key={fieldName}>
+        <FormItemLabel label={label} />
         <DescriptionTabs
           suggestion={String(payload.newDescription ?? '')}
           value={String(payload.currentDescription ?? '')}
@@ -457,7 +453,7 @@ const TaskPayloadSchemaFields = ({
             {description}
           </Typography>
         ) : null}
-      </Form.Item>
+      </Box>
     );
   };
 
@@ -484,7 +480,8 @@ const TaskPayloadSchemaFields = ({
     }
 
     return (
-      <Form.Item key={fieldName} label={`${label}:`}>
+      <Box direction="col" gap={2} key={fieldName}>
+        <FormItemLabel label={label} />
         <TagsTabs
           tags={currentTags}
           value={suggestedTags}
@@ -494,7 +491,7 @@ const TaskPayloadSchemaFields = ({
             );
             const newTagFqns = new Set(newTags.map((tag) => tag.tagFQN));
 
-            onChange({
+            onChange?.({
               ...payload,
               tagsToAdd: newTags.filter(
                 (tag) => !currentTagFqns.has(tag.tagFQN)
@@ -510,7 +507,7 @@ const TaskPayloadSchemaFields = ({
             {description}
           </Typography>
         ) : null}
-      </Form.Item>
+      </Box>
     );
   };
 
@@ -530,7 +527,8 @@ const TaskPayloadSchemaFields = ({
     }
 
     return (
-      <Form.Item key={fieldName} label={`${label}:`}>
+      <Box direction="col" gap={2} key={fieldName}>
+        <FormItemLabel label={label} />
         <TagSuggestion
           value={(payload[fieldName] as TagLabel[] | undefined) ?? []}
           onChange={(newTags) => updateField(fieldName, newTags)}
@@ -540,7 +538,7 @@ const TaskPayloadSchemaFields = ({
             {description}
           </Typography>
         ) : null}
-      </Form.Item>
+      </Box>
     );
   };
 
@@ -560,30 +558,23 @@ const TaskPayloadSchemaFields = ({
     }
 
     return (
-      <Form.Item
+      <Select
+        hint={description}
+        isRequired={requiredFields.has(fieldName)}
         key={fieldName}
-        label={`${label}:`}
-        required={requiredFields.has(fieldName)}
-        rules={
-          requiredFields.has(fieldName)
-            ? [{ required: true, message: `${label} is required` }]
-            : undefined
-        }>
-        <Select
-          options={(fieldSchema?.enum ?? []).map((value) => ({
-            label: value,
-            value,
-          }))}
-          value={getFieldValue(fieldName) as string | undefined}
-          onChange={(value) => updateField(fieldName, value)}
-        />
-      </Form.Item>
+        label={label}
+        selectedKey={getFieldValue(fieldName) as string | undefined}
+        onSelectionChange={(value) => updateField(fieldName, value)}>
+        {(fieldSchema?.enum ?? []).map((value) => (
+          <Select.Item id={value} key={value} label={value} />
+        ))}
+      </Select>
     );
   };
 
   const renderNumberField: FieldRenderer = (
     fieldName,
-    _fieldSchema,
+    fieldSchema,
     label,
     description
   ) => {
@@ -596,14 +587,21 @@ const TaskPayloadSchemaFields = ({
       );
     }
 
+    const value = getFieldValue(fieldName);
+
     return (
-      <Form.Item key={fieldName} label={`${label}:`}>
-        <InputNumber
-          className="w-full"
-          value={getFieldValue(fieldName) as number | undefined}
-          onChange={(value) => updateField(fieldName, value)}
-        />
-      </Form.Item>
+      <Input
+        hint={description}
+        isRequired={requiredFields.has(fieldName)}
+        key={fieldName}
+        label={label}
+        step={fieldSchema?.type === 'integer' ? 1 : 'any'}
+        type="number"
+        value={value == null ? '' : String(value)}
+        onChange={(value) =>
+          updateField(fieldName, value === '' ? null : Number(value))
+        }
+      />
     );
   };
 
@@ -623,13 +621,13 @@ const TaskPayloadSchemaFields = ({
     }
 
     return (
-      <Form.Item key={fieldName} label={`${label}:`} valuePropName="checked">
-        <Checkbox
-          checked={Boolean(getFieldValue(fieldName, false))}
-          onChange={(event) => updateField(fieldName, event.target.checked)}>
-          {description}
-        </Checkbox>
-      </Form.Item>
+      <Checkbox
+        hint={description}
+        isSelected={Boolean(getFieldValue(fieldName, false))}
+        key={fieldName}
+        label={label}
+        onChange={(value) => updateField(fieldName, value)}
+      />
     );
   };
 
@@ -649,21 +647,15 @@ const TaskPayloadSchemaFields = ({
     }
 
     return (
-      <Form.Item
+      <TextArea
+        hint={description}
+        isRequired={requiredFields.has(fieldName)}
         key={fieldName}
-        label={`${label}:`}
-        required={requiredFields.has(fieldName)}
-        rules={
-          requiredFields.has(fieldName)
-            ? [{ required: true, message: `${label} is required` }]
-            : undefined
-        }>
-        <Input.TextArea
-          autoSize={{ minRows: 4, maxRows: 10 }}
-          value={String(getFieldValue(fieldName, '') ?? '')}
-          onChange={(event) => updateField(fieldName, event.target.value)}
-        />
-      </Form.Item>
+        label={label}
+        rows={4}
+        value={String(getFieldValue(fieldName, '') ?? '')}
+        onChange={(value) => updateField(fieldName, value)}
+      />
     );
   };
 
@@ -698,26 +690,23 @@ const TaskPayloadSchemaFields = ({
     }
 
     return (
-      <Form.Item key={fieldName} label={`${label}:`}>
-        <Input.TextArea
-          autoSize={{ minRows: 4, maxRows: 12 }}
-          value={stringifyValue(
-            getFieldValue(fieldName, fieldSchema?.type === 'array' ? [] : {})
-          )}
-          onChange={(event) => {
-            try {
-              updateField(fieldName, JSON.parse(event.target.value));
-            } catch {
-              updateField(fieldName, event.target.value);
-            }
-          }}
-        />
-        {description ? (
-          <Typography as="p" className="m-b-0 m-t-xs" color="secondary">
-            {description}
-          </Typography>
-        ) : null}
-      </Form.Item>
+      <TextArea
+        hint={description}
+        key={fieldName}
+        label={label}
+        rows={4}
+        value={stringifyValue(
+          getFieldValue(fieldName, fieldSchema?.type === 'array' ? [] : {})
+        )}
+        onChange={(value) => {
+          try {
+            updateField(fieldName, JSON.parse(value));
+          } catch {
+            // Keep partially typed JSON editable until it becomes a valid value.
+            updateField(fieldName, value);
+          }
+        }}
+      />
     );
   };
 
@@ -737,17 +726,14 @@ const TaskPayloadSchemaFields = ({
     }
 
     return (
-      <Form.Item key={fieldName} label={`${label}:`}>
-        <Input
-          value={String(getFieldValue(fieldName, '') ?? '')}
-          onChange={(event) => updateField(fieldName, event.target.value)}
-        />
-        {description ? (
-          <Typography as="p" className="m-b-0 m-t-xs" color="secondary">
-            {description}
-          </Typography>
-        ) : null}
-      </Form.Item>
+      <Input
+        hint={description}
+        isRequired={requiredFields.has(fieldName)}
+        key={fieldName}
+        label={label}
+        value={String(getFieldValue(fieldName, '') ?? '')}
+        onChange={(value) => updateField(fieldName, value)}
+      />
     );
   };
 

From f044437e9efd9f1fe2ab4a0b15fe93cbf6deb7d5 Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Wed, 7 Oct 2026 20:06:39 +0530
Subject: [PATCH 02/14] fix(ui): preserve relation palettes across graph
 rendering paths

---
 .../OntologyDataGraph.test.tsx                | 98 +++++++++++++++++++
 .../OntologyExplorer/OntologyDataGraph.tsx    | 15 +--
 .../OntologyExplorer.constants.ts             |  6 ++
 .../OntologyExplorer.test.tsx                 |  4 +-
 .../utils/graphStyles.test.ts                 | 33 ++++++-
 .../OntologyExplorer/utils/graphStyles.ts     |  7 ++
 6 files changed, 149 insertions(+), 14 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.test.tsx

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.test.tsx
new file mode 100644
index 000000000000..d8a7b0b01077
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.test.tsx
@@ -0,0 +1,98 @@
+/*
+ *  Copyright 2026 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+jest.mock('@antv/g', () => ({
+  Circle: class {},
+  Group: class {},
+  Image: class {},
+  Line: class {},
+  Rect: class {},
+  Text: class {},
+}));
+
+jest.mock('@antv/g6', () => ({
+  Circle: class {},
+  ExtensionCategory: { COMBO: 'combo', EDGE: 'edge', NODE: 'node' },
+  Line: class {},
+  Polyline: class {},
+  Quadratic: class {},
+  Rect: class {},
+  RectCombo: class {},
+  idOf: (value: unknown) => value,
+  register: jest.fn(),
+}));
+
+import { render, screen } from '@testing-library/react';
+import { PaletteKey } from '../../generated/entity/data/relationshipType';
+import { createRelationshipTypeMock } from '../../mocks/Ontology.mock';
+import OntologyDataGraph from './OntologyDataGraph';
+import { RELATION_META } from './OntologyExplorer.constants';
+
+it('keeps the built-in relation token on Data mode edges, arrows, and badges', () => {
+  render(
+    <OntologyDataGraph
+      data={{
+        nodes: [
+          {
+            id: 'customer',
+            label: 'Customer',
+            type: 'glossaryTerm',
+            assetCount: 1,
+          },
+          {
+            id: 'account',
+            label: 'Account',
+            type: 'glossaryTerm',
+            assetCount: 1,
+          },
+        ],
+        edges: [
+          {
+            from: 'customer',
+            to: 'account',
+            label: 'synonym',
+            relationType: 'synonym',
+          },
+        ],
+      }}
+      glossaryColorMap={{}}
+      hasMoreTerms={false}
+      isLoadingMoreTerms={false}
+      relationTypes={[
+        createRelationshipTypeMock({
+          name: 'synonym',
+          paletteKey: PaletteKey.Blue,
+          systemDefined: true,
+        }),
+      ]}
+      onLoadMore={jest.fn()}
+      onLoadMoreTerms={jest.fn()}
+      onPaneClick={jest.fn()}
+      onSelectNode={jest.fn()}
+    />
+  );
+  const color = RELATION_META.synonym.color;
+
+  expect(screen.getByTestId('ontology-data-semantic-edge')).toHaveAttribute(
+    'stroke',
+    color
+  );
+  expect(screen.getByTestId('ontology-data-edge-arrow')).toHaveAttribute(
+    'fill',
+    color
+  );
+  expect(screen.getByTestId('ontology-data-semantic-edge-label')).toHaveStyle({
+    color,
+    borderColor: color,
+  });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.tsx b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.tsx
index 7d753f5b5b72..dacec75e25fa 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.tsx
@@ -26,14 +26,10 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RelationshipType } from '../../generated/entity/data/relationshipType';
-import { resolveCssColor } from '../../utils/common/cssColor.utils';
 import entityUtilClassBase from '../../utils/EntityUtilClassBase';
 import serviceUtilClassBase from '../../utils/ServiceUtilClassBase';
 import OntologyControlButtons from './OntologyControlButtons';
-import {
-  DATA_MODE_MAX_RENDER_COUNT,
-  EDGE_STROKE_COLOR_FALLBACK,
-} from './OntologyExplorer.constants';
+import { DATA_MODE_MAX_RENDER_COUNT } from './OntologyExplorer.constants';
 import {
   OntologyEdge,
   OntologyGraphData,
@@ -58,7 +54,6 @@ import {
   formatRelationLabel,
   getEffectiveRelationColor,
 } from './utils/graphStyles';
-import { getRelationshipHexColor } from './utils/relationshipTypeUtils';
 
 interface OntologyDataGraphProps {
   data: OntologyGraphData;
@@ -401,15 +396,13 @@ const OntologyDataGraph = ({
         const relationshipType = relationshipTypeByName.get(
           layout.edge.relationType
         );
-        const effectiveColor =
+        // DOM/SVG resolves theme variables after a theme switch; a stored palette
+        // hex would discard the built-in relation's active foreground.
+        const color =
           getEffectiveRelationColor(
             layout.edge.relationType,
             relationshipType
           ) ?? 'var(--tw-color-border-brand)';
-        const color =
-          effectiveColor.startsWith('var(') && relationshipType
-            ? getRelationshipHexColor(relationshipType)
-            : resolveCssColor(effectiveColor, EDGE_STROKE_COLOR_FALLBACK);
 
         return {
           ...layout,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts
index 4ac6283c4814..a6534f8c1a1b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts
@@ -357,6 +357,12 @@ export const COLOR_META_BY_HEX: Record<
   },
 };
 
+// Persisted palettes use hex keys, while built-in relations now supply theme tokens.
+// Both forms must find the same badge background and palette metadata.
+for (const meta of Object.values(COLOR_META_BY_HEX)) {
+  COLOR_META_BY_HEX[meta.color] = meta;
+}
+
 const BORDER_PRIMARY_TOKEN = 'var(--tw-color-border-primary)';
 const BORDER_PRIMARY_FALLBACK = '#D5D7DA';
 const BORDER_SECONDARY_TOKEN = 'var(--tw-color-border-secondary)';
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.test.tsx
index 6f735c71c164..76985979b480 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.test.tsx
@@ -312,7 +312,7 @@ describe('OntologyExplorer Studio data controls', () => {
     ).not.toBeInTheDocument();
   });
 
-  it('resolves palette tokens before painting custom SVG relationships', () => {
+  it('preserves palette tokens so custom SVG relationships follow theme changes', () => {
     const state = createExplorerState({
       explorationMode: 'data',
       graphDataToShow: {
@@ -339,7 +339,7 @@ describe('OntologyExplorer Studio data controls', () => {
 
     expect(screen.getByTestId('ontology-data-semantic-edge')).toHaveAttribute(
       'stroke',
-      '#7a5af8'
+      'var(--tw-color-utility-purple-500)'
     );
   });
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.test.ts b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.test.ts
index 20ee1100b192..d20942bc5e1e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.test.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.test.ts
@@ -34,7 +34,10 @@ jest.mock('@antv/g6', () => ({
 
 import { PaletteKey } from '../../../generated/entity/data/relationshipType';
 import { createRelationshipTypeMock } from '../../../mocks/Ontology.mock';
-import { RELATION_META } from '../OntologyExplorer.constants';
+import {
+  COLOR_META_BY_HEX,
+  RELATION_META,
+} from '../OntologyExplorer.constants';
 import {
   buildComboStyle,
   buildDataModeAssetNodeStyle,
@@ -72,6 +75,34 @@ const resolveSemanticColor = (color: string, fallback: string): string =>
   }[color] ?? fallback);
 
 describe('theme-aware graph styles', () => {
+  it('finds palette backgrounds for both saved hex colors and built-in theme tokens', () => {
+    expect(COLOR_META_BY_HEX['#1570ef'].color).toBe(
+      RELATION_META.relatedTo.color
+    );
+
+    for (const { color, background } of Object.values(RELATION_META)) {
+      expect(COLOR_META_BY_HEX[color]).toMatchObject({ color, background });
+    }
+  });
+
+  it('keeps a built-in studio badge border in the relation palette', () => {
+    const colors: Record<string, string> = {
+      'var(--tw-color-utility-error-200)': 'rgb(145, 32, 24)',
+      'var(--tw-color-utility-error-700)': 'rgb(249, 112, 102)',
+    };
+    const style = getEdgeRelationLabelStyle(
+      'SYNONYM',
+      'synonym',
+      RELATION_META.synonym.color,
+      true,
+      (color, fallback) =>
+        colors[color] ?? resolveSemanticColor(color, fallback)
+    );
+
+    expect(style.labelBackgroundStroke).toBe('rgb(145, 32, 24)');
+    expect(style.labelFill).toBe('rgb(249, 112, 102)');
+  });
+
   it('uses the active canvas surface for studio relation badges', () => {
     const style = getEdgeRelationLabelStyle(
       'RELATED TO',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts
index e0b1bc33f048..c6d0956adc39 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts
@@ -594,6 +594,13 @@ const STUDIO_EDGE_LABEL_PADDING: [number, number, number, number] = [
   2, 7, 2, 7,
 ];
 const STUDIO_EDGE_BORDER_BY_COLOR: Record<string, string> = {
+  // Built-in foregrounds use utility-700; their badge border uses the same palette's utility-200.
+  ...Object.fromEntries(
+    Object.values(COLOR_META_BY_HEX).map(({ color }) => [
+      color,
+      color.replace('-700)', '-200)'),
+    ])
+  ),
   '#079455': 'var(--tw-color-utility-success-200)',
   '#0e9384': 'var(--tw-color-utility-teal-200)',
   '#1570ef': 'var(--tw-color-utility-brand-200)',

From 3ace22042d598c58b77a596291b0e00943782d11 Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Wed, 7 Oct 2026 20:14:28 +0530
Subject: [PATCH 03/14] refactor(ui): remove obsolete SVG color fallback

---
 .../components/OntologyExplorer/OntologyExplorer.constants.ts  | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts
index a6534f8c1a1b..d2b11394f933 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts
@@ -368,9 +368,6 @@ const BORDER_PRIMARY_FALLBACK = '#D5D7DA';
 const BORDER_SECONDARY_TOKEN = 'var(--tw-color-border-secondary)';
 
 export const EDGE_STROKE_COLOR = BORDER_PRIMARY_TOKEN;
-// SVG presentation attributes do not resolve CSS variables, so DOM-drawn
-// edges resolve the token first and fall back to this.
-export const EDGE_STROKE_COLOR_FALLBACK = BORDER_PRIMARY_FALLBACK;
 export const DATA_MODE_ASSET_EDGE_STROKE_COLOR = BORDER_SECONDARY_TOKEN;
 export const DIMMED_NODE_OPACITY = 0.32;
 export const DIMMED_EDGE_OPACITY = 0.12;

From 092e981fda589162b969d529a19050a3a946370d Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Wed, 7 Oct 2026 20:40:05 +0530
Subject: [PATCH 04/14] fix(ui): validate selected task assignees instead of
 search text

---
 .../pages/TasksPage/shared/Assignees.test.tsx | 20 +++++++++++++++++++
 .../src/pages/TasksPage/shared/Assignees.tsx  |  2 ++
 2 files changed, 22 insertions(+)

diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx
index c884c91b77ca..4aa6f082583a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx
@@ -51,6 +51,26 @@ const mockProps = {
 };
 
 describe('Test assignees component', () => {
+  it('allows a required assignee selection with an empty search query to submit', () => {
+    const { container } = render(
+      <form>
+        <Assignees
+          {...mockProps}
+          isRequired
+          label="Assignees"
+          value={[mockOptions[0]]}
+        />
+      </form>
+    );
+
+    expect(screen.getByRole('combobox')).toHaveValue('');
+    expect(container.querySelector('form')?.checkValidity()).toBe(true);
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-required',
+      'true'
+    );
+  });
+
   it('preserves the selected assignee label and identity', async () => {
     const onChange = jest.fn();
     render(<Assignees {...mockProps} value={[]} onChange={onChange} />);
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx
index 82b266e02a2d..7618402bdf26 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx
@@ -67,6 +67,7 @@ const Assignees = ({
   // Selected identities must survive when a remote search replaces the option page.
   const availableOptions = uniqBy([...options, ...assignees], 'value');
 
+  // Form rules validate selected identities; the search query clears after selection.
   return (
     <Autocomplete
       {...rest}
@@ -77,6 +78,7 @@ const Assignees = ({
       multiple={!isSingleSelect}
       placeholder={rest.placeholder ?? t('label.select-to-search')}
       selectedItems={assignees.map(toItem)}
+      validationBehavior="aria"
       onItemCleared={(key) =>
         onChange(assignees.filter((option) => option.value !== key))
       }

From b0c1c8c792933ce25097d09df727614e309fd0b3 Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Wed, 7 Oct 2026 21:22:48 +0530
Subject: [PATCH 05/14] refactor(ui): drop dead Task styles and legacy classes

Remove unused task-page.style.less and Assignee.less, replace legacy
spacing/typography classes with tw: utilities and Typography props, and
make the schema field fade follow the active surface in dark mode.
---
 .../OntologyDataGraph.test.tsx                | 98 -------------------
 .../RequestDescriptionPage.tsx                | 12 +--
 .../RequestTagPage/RequestTagPage.tsx         | 10 +-
 .../UpdateDescriptionPage.tsx                 | 12 +--
 .../TasksPage/UpdateTagPage/UpdateTagPage.tsx | 10 +-
 .../src/pages/TasksPage/shared/Assignee.less  | 25 -----
 .../TasksPage/shared/DescriptionTabs.tsx      |  4 +-
 .../shared/TaskPayloadSchemaFields.tsx        | 12 +--
 .../src/pages/TasksPage/task-page.style.less  | 23 -----
 9 files changed, 20 insertions(+), 186 deletions(-)
 delete mode 100644 openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.test.tsx
 delete mode 100644 openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less
 delete mode 100644 openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/task-page.style.less

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.test.tsx
deleted file mode 100644
index d8a7b0b01077..000000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyDataGraph.test.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- *  Copyright 2026 Collate.
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *  http://www.apache.org/licenses/LICENSE-2.0
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-jest.mock('@antv/g', () => ({
-  Circle: class {},
-  Group: class {},
-  Image: class {},
-  Line: class {},
-  Rect: class {},
-  Text: class {},
-}));
-
-jest.mock('@antv/g6', () => ({
-  Circle: class {},
-  ExtensionCategory: { COMBO: 'combo', EDGE: 'edge', NODE: 'node' },
-  Line: class {},
-  Polyline: class {},
-  Quadratic: class {},
-  Rect: class {},
-  RectCombo: class {},
-  idOf: (value: unknown) => value,
-  register: jest.fn(),
-}));
-
-import { render, screen } from '@testing-library/react';
-import { PaletteKey } from '../../generated/entity/data/relationshipType';
-import { createRelationshipTypeMock } from '../../mocks/Ontology.mock';
-import OntologyDataGraph from './OntologyDataGraph';
-import { RELATION_META } from './OntologyExplorer.constants';
-
-it('keeps the built-in relation token on Data mode edges, arrows, and badges', () => {
-  render(
-    <OntologyDataGraph
-      data={{
-        nodes: [
-          {
-            id: 'customer',
-            label: 'Customer',
-            type: 'glossaryTerm',
-            assetCount: 1,
-          },
-          {
-            id: 'account',
-            label: 'Account',
-            type: 'glossaryTerm',
-            assetCount: 1,
-          },
-        ],
-        edges: [
-          {
-            from: 'customer',
-            to: 'account',
-            label: 'synonym',
-            relationType: 'synonym',
-          },
-        ],
-      }}
-      glossaryColorMap={{}}
-      hasMoreTerms={false}
-      isLoadingMoreTerms={false}
-      relationTypes={[
-        createRelationshipTypeMock({
-          name: 'synonym',
-          paletteKey: PaletteKey.Blue,
-          systemDefined: true,
-        }),
-      ]}
-      onLoadMore={jest.fn()}
-      onLoadMoreTerms={jest.fn()}
-      onPaneClick={jest.fn()}
-      onSelectNode={jest.fn()}
-    />
-  );
-  const color = RELATION_META.synonym.color;
-
-  expect(screen.getByTestId('ontology-data-semantic-edge')).toHaveAttribute(
-    'stroke',
-    color
-  );
-  expect(screen.getByTestId('ontology-data-edge-arrow')).toHaveAttribute(
-    'fill',
-    color
-  );
-  expect(screen.getByTestId('ontology-data-semantic-edge-label')).toHaveStyle({
-    color,
-    borderColor: color,
-  });
-});
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
index 6b1d3987c0cd..3a8b356c2512 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
@@ -69,7 +69,6 @@ import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils';
 import { useRequiredParams } from '../../../utils/useRequiredParams';
 import Assignees from '../shared/Assignees';
 import TaskPayloadSchemaFields from '../shared/TaskPayloadSchemaFields';
-import '../task-page.style.less';
 import { EntityData, Option } from '../TasksPage.interface';
 
 const RequestDescription = () => {
@@ -221,7 +220,7 @@ const RequestDescription = () => {
         minWidth: 700,
         flex: 0.6,
         children: (
-          <Card className="max-width-md m-x-auto">
+          <Card className="tw:mx-auto tw:max-w-3xl">
             <Card.Content>
               <Box direction="col" gap={4}>
                 <TitleBreadcrumb
@@ -237,13 +236,8 @@ const RequestDescription = () => {
                   ]}
                 />
 
-                <div
-                  className="m-t-0 request-description"
-                  key="request-description">
-                  <Typography
-                    as="p"
-                    className="text-base"
-                    data-testid="form-title">
+                <div key="request-description">
+                  <Typography as="p" data-testid="form-title" size="text-md">
                     {t('label.create-entity', {
                       entity: t('label.task'),
                     })}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
index 59f8d906decc..ec2445020081 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
@@ -70,7 +70,6 @@ import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils';
 import { useRequiredParams } from '../../../utils/useRequiredParams';
 import Assignees from '../shared/Assignees';
 import TaskPayloadSchemaFields from '../shared/TaskPayloadSchemaFields';
-import '../task-page.style.less';
 import { EntityData, Option } from '../TasksPage.interface';
 
 const RequestTag = () => {
@@ -215,7 +214,7 @@ const RequestTag = () => {
         wrapInCard: false,
         allowScroll: true,
         children: (
-          <Card className="max-width-md m-x-auto">
+          <Card className="tw:mx-auto tw:max-w-3xl">
             <Card.Content>
               <Box direction="col" gap={4}>
                 <TitleBreadcrumb
@@ -230,11 +229,8 @@ const RequestTag = () => {
                     },
                   ]}
                 />
-                <div className="m-t-0 request-tags" key="request-tags">
-                  <Typography
-                    as="p"
-                    className="text-base"
-                    data-testid="form-title">
+                <div key="request-tags">
+                  <Typography as="p" data-testid="form-title" size="text-md">
                     {t('label.create-entity', {
                       entity: t('label.task'),
                     })}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
index da4b970bb1df..246d59085237 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
@@ -73,7 +73,6 @@ import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils';
 import { useRequiredParams } from '../../../utils/useRequiredParams';
 import Assignees from '../shared/Assignees';
 import TaskPayloadSchemaFields from '../shared/TaskPayloadSchemaFields';
-import '../task-page.style.less';
 import { EntityData, Option } from '../TasksPage.interface';
 
 const UpdateDescription = () => {
@@ -246,7 +245,7 @@ const UpdateDescription = () => {
         minWidth: 700,
         flex: 0.6,
         children: (
-          <Card className="max-width-md m-x-auto">
+          <Card className="tw:mx-auto tw:max-w-3xl">
             <Card.Content>
               <Box direction="col" gap={4}>
                 <TitleBreadcrumb
@@ -262,13 +261,8 @@ const UpdateDescription = () => {
                   ]}
                 />
 
-                <div
-                  className="m-t-0 request-description"
-                  key="update-description">
-                  <Typography
-                    as="p"
-                    className="text-base"
-                    data-testid="form-title">
+                <div key="update-description">
+                  <Typography as="p" data-testid="form-title" size="text-md">
                     {t('label.create-entity', {
                       entity: t('label.task'),
                     })}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
index d1c38ca75f4f..b3375422251e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
@@ -75,7 +75,6 @@ import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils';
 import { useRequiredParams } from '../../../utils/useRequiredParams';
 import Assignees from '../shared/Assignees';
 import TaskPayloadSchemaFields from '../shared/TaskPayloadSchemaFields';
-import '../task-page.style.less';
 import { EntityData, Option } from '../TasksPage.interface';
 
 const UpdateTag = () => {
@@ -255,7 +254,7 @@ const UpdateTag = () => {
         wrapInCard: false,
         allowScroll: true,
         children: (
-          <Card className="max-width-md m-x-auto">
+          <Card className="tw:mx-auto tw:max-w-3xl">
             <Card.Content>
               <Box direction="col" gap={4}>
                 <TitleBreadcrumb
@@ -270,11 +269,8 @@ const UpdateTag = () => {
                     },
                   ]}
                 />
-                <div className="m-t-0 request-tags" key="update-tags">
-                  <Typography
-                    as="p"
-                    className="text-base"
-                    data-testid="form-title">
+                <div key="update-tags">
+                  <Typography as="p" data-testid="form-title" size="text-md">
                     {t('label.create-entity', {
                       entity: t('label.task'),
                     })}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less
deleted file mode 100644
index d3b3b9f4d2aa..000000000000
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- *  Copyright 2022 Collate.
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *  http://www.apache.org/licenses/LICENSE-2.0
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-.assignee-tag {
-  display: flex;
-  align-items: center;
-  padding: var(--om-space-2) var(--om-space-3);
-  margin: var(--om-space-1) var(--om-space-2);
-}
-
-.assignee-item {
-  .profile-image {
-    vertical-align: middle;
-  }
-}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/DescriptionTabs.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/DescriptionTabs.tsx
index d8fbdb9fa31d..0c4d08c81b7e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/DescriptionTabs.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/DescriptionTabs.tsx
@@ -85,7 +85,7 @@ export const DescriptionTabs = ({
               markdown={description}
             />
           ) : (
-            <Typography color="tertiary">
+            <Typography color="secondary">
               {t('label.no-entity', { entity: t('label.description') })}
             </Typography>
           )}
@@ -93,7 +93,7 @@ export const DescriptionTabs = ({
       </Tabs.Panel>
       <Tabs.Panel id="2">
         <DiffView
-          className="border border-main rounded-4 p-sm m-t-sm"
+          className="tw:mt-3 tw:rounded-md tw:border tw:border-primary tw:p-3"
           diffArr={diffs}
         />
       </Tabs.Panel>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx
index 4bdd88b8745a..453582a942a6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx
@@ -103,7 +103,7 @@ const ClampedText = ({ text }: { text: string }) => {
       </p>
       {!expanded && isClamped && (
         <span className="tw:absolute tw:bottom-0 tw:right-0 tw:flex tw:items-end">
-          <span className="tw:inline-block tw:w-8 tw:h-5 tw:bg-linear-to-r tw:from-white/0 tw:to-white" />
+          <span className="tw:inline-block tw:w-8 tw:h-5 tw:bg-linear-to-r tw:from-transparent tw:to-bg-primary" />
           <span className="tw:bg-primary tw:text-sm tw:text-primary tw:select-none tw:pr-0.5">
             …
           </span>
@@ -318,11 +318,11 @@ const TaskPayloadSchemaFields = ({
             src={iconSrc}
           />
         )}
-        <Typography className="tw:text-tertiary" size="text-sm">
+        <Typography color="secondary" size="text-sm">
           {label}
         </Typography>
       </Box>
-      <Typography className="tw:text-tertiary" size="text-sm">
+      <Typography color="secondary" size="text-sm">
         :
       </Typography>
       <div className="tw:min-w-0 tw:overflow-hidden tw:wrap-break-word">
@@ -449,7 +449,7 @@ const TaskPayloadSchemaFields = ({
           onChange={(value) => updateField(fieldName, value)}
         />
         {description ? (
-          <Typography as="p" className="m-b-0 m-t-xs" color="secondary">
+          <Typography as="p" className="tw:mb-0 tw:mt-1" color="secondary">
             {description}
           </Typography>
         ) : null}
@@ -503,7 +503,7 @@ const TaskPayloadSchemaFields = ({
           }}
         />
         {description ? (
-          <Typography as="p" className="m-b-0 m-t-xs" color="secondary">
+          <Typography as="p" className="tw:mb-0 tw:mt-1" color="secondary">
             {description}
           </Typography>
         ) : null}
@@ -534,7 +534,7 @@ const TaskPayloadSchemaFields = ({
           onChange={(newTags) => updateField(fieldName, newTags)}
         />
         {description ? (
-          <Typography as="p" className="m-b-0 m-t-xs" color="secondary">
+          <Typography as="p" className="tw:mb-0 tw:mt-1" color="secondary">
             {description}
           </Typography>
         ) : null}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/task-page.style.less b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/task-page.style.less
deleted file mode 100644
index a89555eb50eb..000000000000
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/task-page.style.less
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- *  Copyright 2023 Collate.
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *  http://www.apache.org/licenses/LICENSE-2.0
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-.request-tags,
-.request-description {
-  .ant-select-custom {
-    margin: 0;
-  }
-}
-
-.task-data {
-  width: unset;
-}

From f10cb2b98d13937970803c56b258463ebfa8a480 Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Wed, 7 Oct 2026 21:48:28 +0530
Subject: [PATCH 06/14] test(ui): target core task form controls in Playwright

Task title and assignee fields moved from antd to core Input/Autocomplete;
update selectors to the new DOM (title input, combobox input, selected-item
remove button, field hint error).
---
 .../Tasks/TaskAssigneeManagement.spec.ts      |  2 +-
 .../e2e/Features/Tasks/TaskCreation.spec.ts   | 12 +++----
 .../playwright/e2e/Pages/TasksUIFlow.spec.ts  | 28 +++++++++-------
 .../resources/ui/playwright/utils/glossary.ts | 32 +++++++------------
 .../resources/ui/playwright/utils/task.ts     | 32 +++++++------------
 .../ui/playwright/utils/taskWorkflow.ts       |  4 +--
 6 files changed, 47 insertions(+), 63 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskAssigneeManagement.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskAssigneeManagement.spec.ts
index 7faea5f3ea15..591b087b3982 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskAssigneeManagement.spec.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskAssigneeManagement.spec.ts
@@ -100,7 +100,7 @@ test.describe('Task Assignee Management', () => {
 
     const existingAssigneeRemoveButton = page
       .locator(
-        '[data-testid="select-assignee"] .ant-select-selection-item-remove'
+        '[data-testid="select-assignee"] [data-testid="autocomplete-selected-item"] button'
       )
       .first();
 
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskCreation.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskCreation.spec.ts
index b375f0f89b6e..bfd510f5bb36 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskCreation.spec.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskCreation.spec.ts
@@ -84,7 +84,7 @@ test.describe('Task Creation - Request Description', () => {
     await expect(page.getByTestId('form-container')).toBeVisible();
 
     // Verify title contains description request info
-    const titleField = page.locator('#title');
+    const titleField = page.getByTestId('title').locator('input');
     await expect(titleField).toBeVisible();
     const titleValue = await titleField.inputValue();
     expect(titleValue.toLowerCase()).toContain('description');
@@ -144,7 +144,7 @@ test.describe('Task Creation - Request Description', () => {
       await expect(page.getByTestId('form-container')).toBeVisible();
 
       // Verify this is a column-level task by checking the about field references a column
-      const titleField = page.locator('#title');
+      const titleField = page.getByTestId('title').locator('input');
       const titleValue = await titleField.inputValue();
       expect(titleValue.toLowerCase()).toContain('description');
 
@@ -175,9 +175,7 @@ test.describe('Task Creation - Request Description', () => {
     await expect(page.getByTestId('form-container')).toBeVisible();
 
     // Assignee field - search and select user
-    const assigneeInput = page.locator(
-      '[data-testid="select-assignee"] .ant-select-selector input'
-    );
+    const assigneeInput = page.locator('[data-testid="select-assignee"] input');
     await assigneeInput.click();
 
     // Search for user
@@ -217,7 +215,7 @@ test.describe('Task Creation - Request Description', () => {
     await submitBtn.click();
 
     // Should show validation error for assignee field
-    const assigneeError = page.locator('.ant-form-item-explain-error');
+    const assigneeError = page.getByTestId('assignees').getByText(/required/i);
     await expect(assigneeError).toBeVisible();
   });
 });
@@ -274,7 +272,7 @@ test.describe('Task Creation - Request Tags', () => {
       await expect(page.getByTestId('form-container')).toBeVisible();
 
       // Verify title contains tag info
-      const titleField = page.locator('#title');
+      const titleField = page.getByTestId('title').locator('input');
       const titleValue = await titleField.inputValue();
       expect(titleValue.toLowerCase()).toContain('tag');
 
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TasksUIFlow.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TasksUIFlow.spec.ts
index e9d316486e57..b1642f78536b 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TasksUIFlow.spec.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TasksUIFlow.spec.ts
@@ -57,11 +57,11 @@ const createDescriptionTaskViaUI = async (
 ) => {
   await page.getByTestId('request-description').click();
 
-  await page.waitForSelector('#title', { state: 'visible' });
+  await expect(page.getByTestId('title').locator('input')).toBeVisible();
 
-  expect(await page.locator('#title').inputValue()).toContain(
-    `description for ${entityType}`
-  );
+  expect(
+    await page.getByTestId('title').locator('input').inputValue()
+  ).toContain(`description for ${entityType}`);
 
   await selectAssignee(page, assigneeName);
 
@@ -84,11 +84,11 @@ const createTagTaskViaUI = async (
 ) => {
   await page.getByTestId('request-entity-tags').click();
 
-  await page.waitForSelector('#title', { state: 'visible' });
+  await expect(page.getByTestId('title').locator('input')).toBeVisible();
 
-  expect(await page.locator('#title').inputValue()).toContain(
-    `tags for ${entityType}`
-  );
+  expect(
+    await page.getByTestId('title').locator('input').inputValue()
+  ).toContain(`tags for ${entityType}`);
 
   await selectAssignee(page, assigneeName);
   await addTagSuggestion({
@@ -326,9 +326,11 @@ test.describe('Task Workflow - Table Column Tasks', () => {
     });
 
     await test.step('Fill task form and submit', async () => {
-      await page.waitForSelector('#title', { state: 'visible' });
+      await expect(page.getByTestId('title').locator('input')).toBeVisible();
 
-      expect(await page.locator('#title').inputValue()).toContain('columns');
+      expect(
+        await page.getByTestId('title').locator('input').inputValue()
+      ).toContain('columns');
 
       await selectAssignee(page, userName);
 
@@ -375,9 +377,11 @@ test.describe('Task Workflow - Table Column Tasks', () => {
     });
 
     await test.step('Fill tag task form and submit', async () => {
-      await page.waitForSelector('#title', { state: 'visible' });
+      await expect(page.getByTestId('title').locator('input')).toBeVisible();
 
-      expect(await page.locator('#title').inputValue()).toContain('columns');
+      expect(
+        await page.getByTestId('title').locator('input').inputValue()
+      ).toContain('columns');
 
       await selectAssignee(page, userName);
 
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts
index 346ad592747f..643a5266a182 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts
@@ -1280,26 +1280,22 @@ export const createDescriptionTaskForGlossary = async (
   const entityType = isGlossary ? 'glossary' : 'glossaryTerm';
   const entityName = get(entity, 'responseData.displayName');
 
-  await expect(page.locator('#title')).toHaveValue(
+  await expect(page.getByTestId('title').locator('input')).toHaveValue(
     `${
       addDescription ? 'Update' : 'Request'
     } description for ${entityType} ${entityName}`
   );
 
   if (isUndefined(value.assignee)) {
-    await expect(
-      page.locator('[data-testid="select-assignee"] > .ant-select-selector')
-    ).toHaveText(value.assignee ?? '');
+    await expect(page.getByTestId('select-assignee')).toContainText(
+      value.assignee ?? ''
+    );
 
     await expect(
-      page.locator(
-        '[data-testid="select-assignee"] > .ant-select-selector input'
-      )
+      page.locator('[data-testid="select-assignee"] input')
     ).toBeDisabled();
   } else {
-    const assigneeField = page.locator(
-      '[data-testid="select-assignee"] > .ant-select-selector #assignees'
-    );
+    const assigneeField = page.locator('[data-testid="select-assignee"] input');
     await assigneeField.click();
 
     const userSearchResponse = page.waitForResponse(
@@ -1336,25 +1332,21 @@ export const createTagTaskForGlossary = async (
   const entityType = isGlossary ? 'glossary' : 'glossaryTerm';
   const entityName = get(entity, 'responseData.displayName');
 
-  await expect(page.locator('#title')).toHaveValue(
+  await expect(page.getByTestId('title').locator('input')).toHaveValue(
     `Request tags for ${entityType} ${entityName}`
   );
 
   if (isUndefined(value.assignee)) {
-    await expect(
-      page.locator('[data-testid="select-assignee"] > .ant-select-selector')
-    ).toHaveText(value.assignee ?? '');
+    await expect(page.getByTestId('select-assignee')).toContainText(
+      value.assignee ?? ''
+    );
 
     await expect(
-      page.locator(
-        '[data-testid="select-assignee"] > .ant-select-selector input'
-      )
+      page.locator('[data-testid="select-assignee"] input')
     ).toBeDisabled();
   } else {
     // select assignee
-    const assigneeField = page.locator(
-      '[data-testid="select-assignee"] > .ant-select-selector #assignees'
-    );
+    const assigneeField = page.locator('[data-testid="select-assignee"] input');
     await assigneeField.click();
     const userSearchResponse = page.waitForResponse(
       `/api/v1/search/query?q=*${value.assignee}**&index=user%2Cteam*`
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts
index 2a7e1b68e83b..41a1dcc93526 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts
@@ -108,7 +108,7 @@ export const createDescriptionTask = async (
   addDescription = true,
   assigneeDisabled?: boolean
 ) => {
-  await expect(page.locator('#title')).toHaveValue(
+  await expect(page.getByTestId('title').locator('input')).toHaveValue(
     `${addDescription ? 'Update' : 'Request'} description for table ${
       value.columnName
         ? `${value.term} columns/${value.columnName}`
@@ -117,19 +117,15 @@ export const createDescriptionTask = async (
   );
 
   if (isUndefined(value.assignee) || assigneeDisabled) {
-    await expect(
-      page.locator('[data-testid="select-assignee"] > .ant-select-selector')
-    ).toHaveText(value.assignee);
+    await expect(page.getByTestId('select-assignee')).toContainText(
+      value.assignee ?? ''
+    );
 
     await expect(
-      page.locator(
-        '[data-testid="select-assignee"] > .ant-select-selector input'
-      )
+      page.locator('[data-testid="select-assignee"] input')
     ).toBeDisabled();
   } else {
-    const assigneeField = page.locator(
-      '[data-testid="select-assignee"] > .ant-select-selector #assignees'
-    );
+    const assigneeField = page.locator('[data-testid="select-assignee"] input');
     await assigneeField.click();
     await assigneeField.fill(value.assignee);
 
@@ -157,25 +153,21 @@ export const createTagTask = async (
   addTag = true,
   assigneeDisabled?: boolean
 ) => {
-  await expect(page.locator('#title')).toHaveValue(
+  await expect(page.getByTestId('title').locator('input')).toHaveValue(
     `Request tags for table ${value.term}`
   );
 
   if (isUndefined(value.assignee) || assigneeDisabled) {
-    await expect(
-      page.locator('[data-testid="select-assignee"] > .ant-select-selector')
-    ).toHaveText(value.assignee);
+    await expect(page.getByTestId('select-assignee')).toContainText(
+      value.assignee ?? ''
+    );
 
     await expect(
-      page.locator(
-        '[data-testid="select-assignee"] > .ant-select-selector input'
-      )
+      page.locator('[data-testid="select-assignee"] input')
     ).toBeDisabled();
   } else {
     // select assignee
-    const assigneeField = page.locator(
-      '[data-testid="select-assignee"] > .ant-select-selector #assignees'
-    );
+    const assigneeField = page.locator('[data-testid="select-assignee"] input');
     await assigneeField.click();
     await assigneeField.fill(value.assignee);
 
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/taskWorkflow.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/taskWorkflow.ts
index 1c75883a602b..d83bbf392859 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/utils/taskWorkflow.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/taskWorkflow.ts
@@ -214,9 +214,7 @@ export const openTaskForm = async (page: Page, route: string) => {
 };
 
 export const selectAssignee = async (page: Page, assigneeName: string) => {
-  const assigneeInput = page.locator(
-    '[data-testid="select-assignee"] .ant-select-selection-search input'
-  );
+  const assigneeInput = page.locator('[data-testid="select-assignee"] input');
   const assigneeOption = page.getByTestId(assigneeName);
   const assigneeSearchResponse = page
     .waitForResponse(

From ea1134f6beee748212dce062d9e576e2e706134d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 7 Oct 2026 16:19:18 +0000
Subject: [PATCH 07/14] chore(playwright): auto-refresh
 impact-map.generated.json

---
 .github/playwright/impact-map.generated.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/playwright/impact-map.generated.json b/.github/playwright/impact-map.generated.json
index a4e0c257173d..eb818c626464 100644
--- a/.github/playwright/impact-map.generated.json
+++ b/.github/playwright/impact-map.generated.json
@@ -8223,6 +8223,7 @@
         "openmetadata-ui/src/main/resources/ui/src/components/Settings/CustomProperty/CustomPropertyEditForm/CustomPropertyEditForm.tsx"
       ],
       "specs": [
+        "playwright/e2e/Features/Tasks/TaskAssigneeManagement.spec.ts",
         "playwright/e2e/Pages/CustomProperties.spec.ts"
       ]
     },

From 127a56cb1a85aa529fed8960e87f39b63c6687a3 Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Thu, 8 Oct 2026 02:43:50 +0530
Subject: [PATCH 08/14] fix(ui): prune stale lint suppressions and resolve
 Sonar issues

Prune the TasksUIFlow no-wait-for-selector baseline the Playwright selector
update fixed, switch the schema enum Select to the non-deprecated
value/onChange API, and use RegExp.exec for the palette token match.
---
 .../src/main/resources/ui/eslint-suppressions.json            | 3 ---
 .../ui/src/components/OntologyExplorer/utils/graphStyles.ts   | 2 +-
 .../ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx | 4 ++--
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/eslint-suppressions.json b/openmetadata-ui/src/main/resources/ui/eslint-suppressions.json
index 5af0df8b0bcb..82b29fcd3308 100644
--- a/openmetadata-ui/src/main/resources/ui/eslint-suppressions.json
+++ b/openmetadata-ui/src/main/resources/ui/eslint-suppressions.json
@@ -598,9 +598,6 @@
   "playwright/e2e/Pages/TasksUIFlow.spec.ts": {
     "om-playwright/no-positional-locator": {
       "count": 5
-    },
-    "playwright/no-wait-for-selector": {
-      "count": 4
     }
   },
   "playwright/e2e/Pages/TestSuite.spec.ts": {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts
index c6d0956adc39..5470d04ebfe2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts
@@ -412,7 +412,7 @@ export function glossaryComboHeaderFill(stroke: string): string {
   };
 
   if (stroke.startsWith('var(')) {
-    const m = stroke.match(/^var\((--tw-color-[a-z0-9-]+)-\d{2,3}\)$/i);
+    const m = /^var\((--tw-color-[a-z0-9-]+)-\d{2,3}\)$/i.exec(stroke);
     if (m) {
       return getCanvasColor(`var(${m[1]}-50)`, blendTowardSurface());
     }
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx
index 453582a942a6..fa682a771f78 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPayloadSchemaFields.tsx
@@ -563,8 +563,8 @@ const TaskPayloadSchemaFields = ({
         isRequired={requiredFields.has(fieldName)}
         key={fieldName}
         label={label}
-        selectedKey={getFieldValue(fieldName) as string | undefined}
-        onSelectionChange={(value) => updateField(fieldName, value)}>
+        value={(getFieldValue(fieldName) as string | undefined) ?? null}
+        onChange={(value) => updateField(fieldName, value)}>
         {(fieldSchema?.enum ?? []).map((value) => (
           <Select.Item id={value} key={value} label={value} />
         ))}

From 4e3a6156b53e92191070f002fbb3d47c039fa71e Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Thu, 8 Oct 2026 03:05:02 +0530
Subject: [PATCH 09/14] test(ui): lower no-wait-for-selector suppression
 ratchet to 14

The TasksUIFlow selector update removed four baselined waitForSelector
calls; record the pruned count so the guardrail corpus test passes.
---
 .../resources/ui/playwright/eslint-rules/tests/corpus.test.mjs  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs b/openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs
index a351968ba010..3d9eedc5ab0e 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs
+++ b/openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs
@@ -49,7 +49,7 @@ test('the suppressions baseline matches its recorded state exactly', () => {
     'om-playwright/no-positional-locator': 603,
     'om-playwright/require-assertion-per-test': 1,
     'playwright/no-skipped-test': 2,
-    'playwright/no-wait-for-selector': 18,
+    'playwright/no-wait-for-selector': 14,
   };
 
   assert.deepStrictEqual(

From 9c9ea489b762fbb331307a681fb2febdd8937d44 Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Thu, 8 Oct 2026 09:32:15 +0530
Subject: [PATCH 10/14] test(ui): target core assignee and schema field
 controls in remaining specs

Incident reassignment, the incident assignee filter, the Tags task flow
and the custom task form still drove antd selectors (.ant-select-selector,
close-circle, .ant-form-item). Use the Autocomplete input, its selected-item
remove button and label-based textbox locators, and prune the baselines
these changes fixed.
---
 .../main/resources/ui/eslint-suppressions.json   |  4 ++--
 .../e2e/Features/IncidentManager.spec.ts         | 10 +++++-----
 .../Tasks/TaskCustomFormWorkflow.spec.ts         | 16 ++++++----------
 .../ui/playwright/e2e/Pages/Tags.spec.ts         |  2 +-
 .../eslint-rules/tests/corpus.test.mjs           |  2 +-
 .../ui/playwright/utils/incidentManager.ts       |  7 +++----
 6 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/eslint-suppressions.json b/openmetadata-ui/src/main/resources/ui/eslint-suppressions.json
index 82b29fcd3308..1d87f3cc7c2e 100644
--- a/openmetadata-ui/src/main/resources/ui/eslint-suppressions.json
+++ b/openmetadata-ui/src/main/resources/ui/eslint-suppressions.json
@@ -352,7 +352,7 @@
   },
   "playwright/e2e/Features/Tasks/TaskCustomFormWorkflow.spec.ts": {
     "om-playwright/no-positional-locator": {
-      "count": 6
+      "count": 4
     }
   },
   "playwright/e2e/Features/Tasks/TaskDashboardEntity.spec.ts": {
@@ -767,7 +767,7 @@
   },
   "playwright/utils/incidentManager.ts": {
     "om-playwright/no-positional-locator": {
-      "count": 8
+      "count": 7
     }
   },
   "playwright/utils/lineage.ts": {
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts
index 68abdb66ab83..2829dbd4be83 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts
@@ -259,12 +259,11 @@ const reassignIncidentTask = async (
 ) => {
   const reassignModal = await openIncidentReassignModal(page, testCaseName);
   const assigneeSelect = reassignModal.getByTestId('select-assignee');
-  const assigneeSelector = assigneeSelect.locator('.ant-select-selector');
   const assigneeInput = assigneeSelect.getByRole('combobox');
   const assigneeOption = page.getByTestId(assignee.name.toLowerCase());
 
-  await expect(assigneeSelector).toBeVisible();
-  await assigneeSelector.click();
+  await expect(assigneeInput).toBeVisible();
+  await assigneeInput.click();
   await assigneeInput.fill(assignee.displayName);
   await expect(assigneeOption).toBeVisible({ timeout: ACTION_TIMEOUT });
 
@@ -1123,7 +1122,7 @@ test.describe('Incident Manager', PLAYWRIGHT_INGESTION_TAG_OBJ, () => {
       await afterAction();
     }
 
-    await page.click('[data-testid="select-assignee"]');
+    await page.click('[data-testid="select-assignee"] input');
     const assigneeOption = page.locator(
       `[data-testid="${assigneeTestCase.username}"]`
     );
@@ -1149,7 +1148,8 @@ test.describe('Incident Manager', PLAYWRIGHT_INGESTION_TAG_OBJ, () => {
     );
     await page
       .getByTestId('select-assignee')
-      .getByLabel('close-circle')
+      .getByTestId('autocomplete-selected-item')
+      .getByRole('button')
       .click();
     await nonAssigneeFilterRes;
 
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskCustomFormWorkflow.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskCustomFormWorkflow.spec.ts
index 4d33a8108095..f2c8566842df 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskCustomFormWorkflow.spec.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Tasks/TaskCustomFormWorkflow.spec.ts
@@ -474,16 +474,12 @@ test.describe.serial(
 
         const visibleModal = page.getByRole('dialog').first();
         await expect(visibleModal).toBeVisible();
-        const proposedTextField = visibleModal
-          .locator('.ant-form-item')
-          .filter({ hasText: 'Proposed Text' })
-          .getByRole('textbox')
-          .first();
-        const reviewNotesField = visibleModal
-          .locator('.ant-form-item')
-          .filter({ hasText: 'Review Notes' })
-          .getByRole('textbox')
-          .first();
+        const proposedTextField = visibleModal.getByRole('textbox', {
+          name: /Proposed Text/,
+        });
+        const reviewNotesField = visibleModal.getByRole('textbox', {
+          name: /Review Notes/,
+        });
 
         await proposedTextField.fill(updatedDescription);
         await reviewNotesField.fill(updatedReviewNotes);
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Tags.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Tags.spec.ts
index 27faef5f0c5f..e23d65cffea8 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Tags.spec.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Tags.spec.ts
@@ -390,7 +390,7 @@ test('Classification Page', async ({ page }) => {
 
     await page.click('[data-testid="request-entity-tags"]');
 
-    await page.click('[data-testid="select-assignee"]');
+    await page.click('[data-testid="select-assignee"] input');
     const assigneeResponse = page.waitForResponse(
       '/api/v1/search/query?q=*&index=user*team*'
     );
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs b/openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs
index 3d9eedc5ab0e..68c877d6349e 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs
+++ b/openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs
@@ -46,7 +46,7 @@ test('the suppressions baseline matches its recorded state exactly', () => {
     // DomainFilterQueryFilter, ActivityFeed, and SearchExport; the core
     // Popover/Dropdown migration also removed a positional locator.
     // Two below that again: this branch deletes the S3 sample-data storage tests.
-    'om-playwright/no-positional-locator': 603,
+    'om-playwright/no-positional-locator': 600,
     'om-playwright/require-assertion-per-test': 1,
     'playwright/no-skipped-test': 2,
     'playwright/no-wait-for-selector': 14,
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/incidentManager.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/incidentManager.ts
index be15c477bfd3..1bd5359b07b3 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/utils/incidentManager.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/incidentManager.ts
@@ -189,17 +189,16 @@ export const addAssigneeFromPopoverWidget = async (data: {
 
     const assigneeModal = page.locator('.ant-modal-content').last();
     const assigneeSelect = assigneeModal.getByTestId('select-assignee');
-    const assigneeSelector = assigneeSelect.locator('.ant-select-selector');
-    const assigneeInput = assigneeSelect.locator('input').last();
+    const assigneeInput = assigneeSelect.locator('input');
     const assigneeOption = page.getByTestId(user.name).first();
     const normalizedAssigneeOption = page
       .getByTestId(user.name.toLowerCase())
       .first();
 
     await expect(assigneeModal).toBeVisible();
-    await expect(assigneeSelector).toBeVisible();
+    await expect(assigneeInput).toBeVisible();
 
-    await assigneeSelector.click();
+    await assigneeInput.click();
     await assigneeInput.fill(user.displayName);
 
     if (await assigneeOption.isVisible().catch(() => false)) {

From 73daca299a8d362ac25fe38dea8fd4d7144dc978 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 8 Oct 2026 04:02:58 +0000
Subject: [PATCH 11/14] chore(playwright): auto-refresh
 impact-map.generated.json

---
 .github/playwright/impact-map.generated.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/playwright/impact-map.generated.json b/.github/playwright/impact-map.generated.json
index eb818c626464..23ec595b2d9e 100644
--- a/.github/playwright/impact-map.generated.json
+++ b/.github/playwright/impact-map.generated.json
@@ -8223,6 +8223,7 @@
         "openmetadata-ui/src/main/resources/ui/src/components/Settings/CustomProperty/CustomPropertyEditForm/CustomPropertyEditForm.tsx"
       ],
       "specs": [
+        "playwright/e2e/Features/IncidentManager.spec.ts",
         "playwright/e2e/Features/Tasks/TaskAssigneeManagement.spec.ts",
         "playwright/e2e/Pages/CustomProperties.spec.ts"
       ]

From 85b36073053d51820fdd000965719e83a0e7114c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 8 Oct 2026 06:04:32 +0000
Subject: [PATCH 12/14] chore(playwright): auto-refresh
 impact-map.generated.json

---
 .github/playwright/impact-map.generated.json | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/.github/playwright/impact-map.generated.json b/.github/playwright/impact-map.generated.json
index 23ec595b2d9e..4934a3d74d75 100644
--- a/.github/playwright/impact-map.generated.json
+++ b/.github/playwright/impact-map.generated.json
@@ -1135,7 +1135,8 @@
         "playwright/e2e/Features/DataQuality/BundleSuiteBulkOperations.spec.ts",
         "playwright/e2e/Features/DataQuality/TestCaseDetailsPage.spec.ts",
         "playwright/e2e/Pages/LogsViewer.spec.ts",
-        "playwright/e2e/Pages/TestSuite.spec.ts"
+        "playwright/e2e/Pages/TestSuite.spec.ts",
+        "playwright/e2e/Pages/TestSuiteDetailsPage.spec.ts"
       ]
     },
     {
@@ -6500,7 +6501,8 @@
       ],
       "specs": [
         "playwright/e2e/Features/DataQuality/BundleSuiteBulkOperations.spec.ts",
-        "playwright/e2e/Features/Table.spec.ts"
+        "playwright/e2e/Features/Table.spec.ts",
+        "playwright/e2e/Pages/TestSuiteDetailsPage.spec.ts"
       ]
     },
     {
@@ -9715,7 +9717,8 @@
         "playwright/e2e/Features/Tasks/ActivityFeed.spec.ts",
         "playwright/e2e/Features/Tasks/TaskNavigation.spec.ts",
         "playwright/e2e/Pages/DataProducts.spec.ts",
-        "playwright/e2e/Pages/Domains.spec.ts"
+        "playwright/e2e/Pages/Domains.spec.ts",
+        "playwright/e2e/Pages/TestSuiteDetailsPage.spec.ts"
       ]
     },
     {
@@ -11699,7 +11702,8 @@
         "playwright/e2e/Features/IncidentManagerPagination.spec.ts",
         "playwright/e2e/Pages/IngestionLogStreamLive.spec.ts",
         "playwright/e2e/Pages/LogsViewer.spec.ts",
-        "playwright/e2e/Pages/TestSuite.spec.ts"
+        "playwright/e2e/Pages/TestSuite.spec.ts",
+        "playwright/e2e/Pages/TestSuiteDetailsPage.spec.ts"
       ]
     },
     {

From 57606159c670346f0518c915594a3eab06f48476 Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Thu, 8 Oct 2026 13:49:04 +0530
Subject: [PATCH 13/14] test(ui): clear the selected assignee before
 reassigning an incident

The reassign modal uses single-select Assignees; core Autocomplete hides
its input while an item is selected, so remove the current assignee
before searching for the new one.
---
 .../ui/playwright/e2e/Features/IncidentManager.spec.ts   | 8 ++++++++
 .../resources/ui/playwright/utils/incidentManager.ts     | 9 +++++++++
 2 files changed, 17 insertions(+)

diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts
index 2829dbd4be83..0112fd1559a1 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts
@@ -262,6 +262,14 @@ const reassignIncidentTask = async (
   const assigneeInput = assigneeSelect.getByRole('combobox');
   const assigneeOption = page.getByTestId(assignee.name.toLowerCase());
 
+  // Single-select core Autocomplete hides its input while an item is selected.
+  const selectedAssignee = assigneeSelect.getByTestId(
+    'autocomplete-selected-item'
+  );
+  if (await selectedAssignee.isVisible()) {
+    await selectedAssignee.getByRole('button').click();
+  }
+
   await expect(assigneeInput).toBeVisible();
   await assigneeInput.click();
   await assigneeInput.fill(assignee.displayName);
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/incidentManager.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/incidentManager.ts
index 1bd5359b07b3..487e43df59de 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/utils/incidentManager.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/incidentManager.ts
@@ -196,6 +196,15 @@ export const addAssigneeFromPopoverWidget = async (data: {
       .first();
 
     await expect(assigneeModal).toBeVisible();
+
+    // Single-select core Autocomplete hides its input while an item is selected.
+    const selectedAssignee = assigneeSelect.getByTestId(
+      'autocomplete-selected-item'
+    );
+    if (await selectedAssignee.isVisible()) {
+      await selectedAssignee.getByRole('button').click();
+    }
+
     await expect(assigneeInput).toBeVisible();
 
     await assigneeInput.click();

From b71edf003c4750ffdb4c11c06ac3bd887b24cc38 Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Thu, 8 Oct 2026 17:20:43 +0530
Subject: [PATCH 14/14] test(ui): choose the incident root cause from the core
 Select

The resolve transition requires testCaseFailureReason, rendered by the
schema fields as a core Select. The spec still looked for .ant-select-selector,
skipped the reason, and Save stopped at the required-field check. Pick the
option by the Root Cause label and lower the positional-locator ratchet.
---
 .../src/main/resources/ui/eslint-suppressions.json       | 2 +-
 .../ui/playwright/e2e/Features/IncidentManager.spec.ts   | 9 ++++-----
 .../ui/playwright/eslint-rules/tests/corpus.test.mjs     | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/eslint-suppressions.json b/openmetadata-ui/src/main/resources/ui/eslint-suppressions.json
index 75aa9028dda3..667609d0cd07 100644
--- a/openmetadata-ui/src/main/resources/ui/eslint-suppressions.json
+++ b/openmetadata-ui/src/main/resources/ui/eslint-suppressions.json
@@ -234,7 +234,7 @@
   },
   "playwright/e2e/Features/IncidentManager.spec.ts": {
     "om-playwright/no-positional-locator": {
-      "count": 10
+      "count": 9
     }
   },
   "playwright/e2e/Features/IngestionListNameSorting.spec.ts": {
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts
index 0112fd1559a1..ee6e3b0372f2 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts
@@ -749,15 +749,14 @@ test.describe('Incident Manager', PLAYWRIGHT_INGESTION_TAG_OBJ, () => {
       await openIncidentTaskTab(actorPage, true);
       const resolveModal = await openIncidentResolveDialog(actorPage);
       const resolveTextareas = resolveModal.locator('textarea');
-      const resolveReasonSelect = resolveModal
-        .locator('.ant-select-selector')
-        .first();
+      const resolveReasonSelect = resolveModal.getByRole('button', {
+        name: /Root Cause/i,
+      });
       const textareaCount = await resolveTextareas.count();
 
       if (await resolveReasonSelect.isVisible().catch(() => false)) {
         await resolveReasonSelect.click();
-        await actorPage.keyboard.press('ArrowDown');
-        await actorPage.keyboard.press('Enter');
+        await actorPage.getByRole('option', { name: 'MissingData' }).click();
         await resolveTextareas.first().fill('test');
       } else if (textareaCount >= 2) {
         await resolveTextareas.nth(0).fill('Missing Data');
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs b/openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs
index 452e8b95b84a..d732448a6890 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs
+++ b/openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs
@@ -49,7 +49,7 @@ test('the suppressions baseline matches its recorded state exactly', () => {
     // ChangeSummaryBadge's button lookup remove three more positional locators;
     // the core assignee/schema-field selectors in the task and incident specs
     // remove three more.
-    'om-playwright/no-positional-locator': 599,
+    'om-playwright/no-positional-locator': 598,
     'om-playwright/require-assertion-per-test': 1,
     'playwright/no-skipped-test': 2,
     'playwright/no-wait-for-selector': 14,