diff --git a/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/README.md b/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/README.md
new file mode 100644
index 0000000000..92c842b04a
--- /dev/null
+++ b/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/README.md	
@@ -0,0 +1,19 @@
+# Field Color-Coding Based on Choice Values
+
+## Purpose
+Dynamically change the background color of any choice field on a form based on the selected backend value.
+
+## How to Use
+1. Create an OnChange client script on the desired choice field.
+2. Replace `'your_field_name'` in the script with your actual field name.
+3. Update the `colorMap` with relevant backend choice values and colors.
+4. Save and test on the form.
+
+## Key Points
+- Works with any choice field
+- Uses backend values of choices for mapping colors.
+
+## Demo
+
+<img width="1710" height="557" alt="image" src="https://github.com/user-attachments/assets/9fb9e68a-1ade-4eb5-81cc-c947c970bd6f" />
+
diff --git a/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/setColor.js b/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/setColor.js
new file mode 100644
index 0000000000..9538d57461
--- /dev/null
+++ b/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/setColor.js	
@@ -0,0 +1,15 @@
+function onChange(control, oldValue, newValue, isLoading) {
+
+  var colorMap = {
+    '1': '#e74c3c',  // Critical - strong red
+    '2': '#e67e22',  // High - bright orange
+    '3': '#f1c40f',  // Moderate - yellow
+    '4': '#3498db',  // Low - blue
+    '5': '#27ae60'   // Planning - green
+  };
+
+  var priorityField = g_form.getControl('priority');
+  if (!priorityField) return;
+
+  priorityField.style.backgroundColor = colorMap[newValue] || '';
+}