diff --git a/frontend/ee b/frontend/ee
index 48b34618a9..8abe6a2691 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 48b34618a96d70a64fa6579a54da941e457899d0
+Subproject commit 8abe6a26910d0e1758f5fa3684c81187afdb2e33
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/button.js b/frontend/src/AppBuilder/WidgetManager/widgets/button.js
index 67da105c55..d5b6a58214 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/button.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/button.js
@@ -61,7 +61,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -74,7 +74,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -83,7 +83,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -92,7 +92,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     loaderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Loader color',
       validation: {
         schema: { type: 'string' },
@@ -110,7 +110,7 @@ export const buttonConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' } },
       accordian: 'button',
@@ -219,10 +219,10 @@ export const buttonConfig = {
     events: [],
     styles: {
       textColor: { value: '#FFFFFF' },
-      borderColor: { value: '#4368E3' },
+      borderColor: { value: 'var(--primary-brand)' },
       loaderColor: { value: '#FFFFFF' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#4368E3' },
+      backgroundColor: { value: 'var(--primary-brand)' },
       iconColor: { value: '#FFFFFF' },
       direction: { value: 'left' },
       padding: { value: 'default' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
index c0fa889dd5..49957bc03e 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
@@ -68,7 +68,7 @@ export const buttonGroupConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -76,7 +76,7 @@ export const buttonGroupConfig = {
       },
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -108,7 +108,7 @@ export const buttonGroupConfig = {
       },
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Selected text colour',
       validation: {
         schema: { type: 'string' },
@@ -116,11 +116,11 @@ export const buttonGroupConfig = {
       },
     },
     selectedBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Selected background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#007bff',
+        defaultValue: 'var(--primary-brand)',
       },
     },
   },
@@ -147,7 +147,7 @@ export const buttonGroupConfig = {
       borderRadius: { value: '{{4}}' },
       disabledState: { value: '{{false}}' },
       selectedTextColor: { value: '#FFFFFF' },
-      selectedBackgroundColor: { value: '#4368E3' },
+      selectedBackgroundColor: { value: 'var(--primary-brand)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/chart.js b/frontend/src/AppBuilder/WidgetManager/widgets/chart.js
index 72ab688056..81dbd2547a 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/chart.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/chart.js
@@ -39,13 +39,13 @@ export const chartConfig = {
       },
     },
     markerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Marker color',
       validation: {
         schema: {
           type: 'string',
         },
-        defaultValue: '#CDE1F8',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     showAxes: {
@@ -134,7 +134,7 @@ export const chartConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
     },
@@ -192,7 +192,7 @@ export const chartConfig = {
     },
     properties: {
       title: { value: 'This title can be changed' },
-      markerColor: { value: '#CDE1F8' },
+      markerColor: { value: 'var(--primary-brand)' },
       showAxes: { value: '{{true}}' },
       showGridLines: { value: '{{true}}' },
       plotFromJson: { value: '{{false}}' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js b/frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js
index c9b6424020..ca509979cb 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js
@@ -70,7 +70,7 @@ export const checkboxConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -78,7 +78,7 @@ export const checkboxConfig = {
       accordian: 'label',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -86,7 +86,7 @@ export const checkboxConfig = {
       accordian: 'switch',
     },
     checkboxColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Checked color',
       validation: {
         schema: { type: 'string' },
@@ -94,7 +94,7 @@ export const checkboxConfig = {
       accordian: 'switch',
     },
     uncheckedColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Unchecked color',
       validation: {
         schema: { type: 'string' },
@@ -102,7 +102,7 @@ export const checkboxConfig = {
       accordian: 'switch',
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -183,7 +183,7 @@ export const checkboxConfig = {
     styles: {
       disabledState: { value: '{{false}}' },
       textColor: { value: '#1B1F24' },
-      checkboxColor: { value: '#4368E3' },
+      checkboxColor: { value: 'var(--primary-brand)' },
       uncheckedColor: { value: '#E4E7EB' },
       borderColor: { value: '#CCD1D5' },
       handleColor: { value: '#FFFFFF' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js b/frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js
index a7ffd551af..2babc27a12 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js
@@ -32,15 +32,15 @@ export const circularProgressbarConfig = {
   events: {},
   styles: {
     color: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text Color',
       validation: {
         schema: { type: 'string' },
@@ -104,7 +104,7 @@ export const circularProgressbarConfig = {
     },
     events: [],
     styles: {
-      color: { value: '' },
+      color: { value: 'var(--primary-brand)' },
       textColor: { value: '' },
       textSize: { value: '{{16}}' },
       strokeWidth: { value: '{{8}}' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js b/frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js
index b2fddd7e4c..6ecdede1a8 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js
@@ -4,7 +4,7 @@ export const colorPickerConfig = {
   description: 'Choose colors from a palette',
   component: 'ColorPicker',
   properties: {
-    defaultColor: { type: 'color', displayName: 'Default color' },
+    defaultColor: { type: 'colorSwatches', displayName: 'Default color' },
   },
   defaultSize: {
     width: 9,
@@ -14,7 +14,9 @@ export const colorPickerConfig = {
     {
       displayName: 'Set Color',
       handle: 'setColor',
-      params: [{ handle: 'color', displayName: 'color', defaultValue: '#ffffff', type: 'color' }],
+      params: [
+        { handle: 'colorSwatches', displayName: 'colorSwatches', defaultValue: '#ffffff', type: 'colorSwatches' },
+      ],
     },
   ],
   others: {
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/container.js b/frontend/src/AppBuilder/WidgetManager/widgets/container.js
index 37a895f553..c4f5ac8d49 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/container.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/container.js
@@ -71,7 +71,7 @@ export const containerConfig = {
   events: {},
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -80,7 +80,7 @@ export const containerConfig = {
       accordian: 'container',
     },
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -89,7 +89,7 @@ export const containerConfig = {
       accordian: 'header',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js
index 87de5d137b..ea56598d2e 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js
@@ -169,8 +169,8 @@ export const datePickerV2Config = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -220,31 +220,31 @@ export const datePickerV2Config = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -257,7 +257,7 @@ export const datePickerV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js b/frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js
index 1f38a8df6d..2fcd5bfb42 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js
@@ -199,8 +199,8 @@ export const daterangepickerConfig = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -250,31 +250,31 @@ export const daterangepickerConfig = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -287,7 +287,7 @@ export const daterangepickerConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js
index 388eb9786c..658cc31c01 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js
@@ -214,8 +214,8 @@ export const datetimePickerV2Config = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -265,31 +265,31 @@ export const datetimePickerV2Config = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -302,7 +302,7 @@ export const datetimePickerV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js
index 045f894816..3905c7583d 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js
@@ -15,7 +15,7 @@ export const dividerConfig = {
   events: {},
   styles: {
     dividerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Divider color',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js b/frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js
index b2c58acc7a..b8b090af24 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js
@@ -128,7 +128,7 @@ export const dropdownConfig = {
       defaultValue: true,
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Selected text color',
       validation: {
         schema: {
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js
index 247af3ccef..8e5355f789 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js
@@ -101,7 +101,7 @@ export const dropdownV2Config = {
   },
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -153,31 +153,31 @@ export const dropdownV2Config = {
     },
 
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -190,7 +190,7 @@ export const dropdownV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/form.js b/frontend/src/AppBuilder/WidgetManager/widgets/form.js
index 0e9f5f4ce3..6dab504819 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/form.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/form.js
@@ -249,7 +249,7 @@ export const formConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -267,7 +267,7 @@ export const formConfig = {
       },
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/icon.js b/frontend/src/AppBuilder/WidgetManager/widgets/icon.js
index aea06c976c..761a2da425 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/icon.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/icon.js
@@ -61,7 +61,7 @@ export const iconConfig = {
   },
   styles: {
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/image.js b/frontend/src/AppBuilder/WidgetManager/widgets/image.js
index c4bd7b6147..f3014e3e02 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/image.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/image.js
@@ -144,7 +144,7 @@ export const imageConfig = {
       accordian: 'Image',
     },
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -153,7 +153,7 @@ export const imageConfig = {
       accordian: 'Container',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/kanban.js b/frontend/src/AppBuilder/WidgetManager/widgets/kanban.js
index 0705581c51..cd39d0bd7b 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/kanban.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/kanban.js
@@ -77,7 +77,7 @@ export const kanbanConfig = {
   styles: {
     disabledState: { type: 'toggle', displayName: 'Disable' },
     visibility: { type: 'toggle', displayName: 'Visibility' },
-    accentColor: { type: 'color', displayName: 'Accent color' },
+    accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
   },
   actions: [
     {
@@ -157,7 +157,7 @@ export const kanbanConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
-      accentColor: { value: '#4d72fa' },
+      accentColor: { value: 'var(--primary-brand)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/kanbanBoard.js b/frontend/src/AppBuilder/WidgetManager/widgets/kanbanBoard.js
index 4929bad9fe..4363c0d0b7 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/kanbanBoard.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/kanbanBoard.js
@@ -30,7 +30,7 @@ export const kanbanBoardConfig = {
     visibility: { type: 'toggle', displayName: 'Visibility' },
     width: { type: 'number', displayName: 'Width' },
     minWidth: { type: 'number', displayName: 'Min Width' },
-    accentColor: { type: 'color', displayName: 'Accent color' },
+    accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
   },
   exposedVariables: {
     columns: {},
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/link.js b/frontend/src/AppBuilder/WidgetManager/widgets/link.js
index bf419e16c0..d04d72dffa 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/link.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/link.js
@@ -46,7 +46,7 @@ export const linkConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
index a813bb5a0b..fbd3c76a59 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
@@ -120,7 +120,7 @@ export const listviewConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -128,7 +128,7 @@ export const listviewConfig = {
       },
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/modal.js b/frontend/src/AppBuilder/WidgetManager/widgets/modal.js
index 42740ad9c1..c0a0844607 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/modal.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/modal.js
@@ -81,7 +81,7 @@ export const modalConfig = {
   },
   styles: {
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header background color',
       validation: {
         schema: { type: 'string' },
@@ -89,7 +89,7 @@ export const modalConfig = {
       },
     },
     headerTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header title color',
       validation: {
         schema: { type: 'string' },
@@ -97,7 +97,7 @@ export const modalConfig = {
       },
     },
     bodyBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Body background color',
       validation: {
         schema: { type: 'string' },
@@ -121,7 +121,7 @@ export const modalConfig = {
       },
     },
     triggerButtonBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button background color',
       validation: {
         schema: { type: 'string' },
@@ -129,7 +129,7 @@ export const modalConfig = {
       },
     },
     triggerButtonTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button text color',
       validation: {
         schema: { type: 'string' },
@@ -175,7 +175,7 @@ export const modalConfig = {
       bodyBackgroundColor: { value: '#ffffffff' },
       disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
-      triggerButtonBackgroundColor: { value: '#4D72FA' },
+      triggerButtonBackgroundColor: { value: 'var(--primary-brand)' },
       triggerButtonTextColor: { value: '#ffffffff' },
     },
   },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js
index 6aefd71067..2bc4cae17b 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js
@@ -165,7 +165,7 @@ export const multiselectV2Config = {
 
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -218,32 +218,32 @@ export const multiselectV2Config = {
     },
 
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
 
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error Text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -256,7 +256,7 @@ export const multiselectV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: {
         schema: { type: 'string' },
@@ -365,7 +365,7 @@ export const multiselectV2Config = {
       icon: { value: 'IconHome2' },
       iconVisibility: { value: false },
       iconColor: { value: '#6A727C' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js
index fe3947e47b..cba9c04cd1 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js
@@ -72,7 +72,7 @@ export const numberinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -124,31 +124,31 @@ export const numberinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -161,7 +161,7 @@ export const numberinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
       accordian: 'field',
@@ -279,7 +279,7 @@ export const numberinputConfig = {
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },
       borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
       errTextColor: { value: '#D72D39' },
       textColor: { value: '#1B1F24' },
       color: { value: '#1B1F24' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js
index 92a4a4711c..fad0d00735 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js
@@ -84,7 +84,7 @@ export const passinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -136,31 +136,31 @@ export const passinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -173,7 +173,7 @@ export const passinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
       accordian: 'field',
@@ -278,7 +278,7 @@ export const passinputConfig = {
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },
       borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
       errTextColor: { value: '#D72D39' },
       textColor: { value: '#1B1F24' },
       iconColor: { value: '#CFD3D859' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js
index 2ff6ca6c7c..62a084d75a 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js
@@ -89,7 +89,7 @@ export const radiobuttonV2Config = {
   },
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -139,7 +139,7 @@ export const radiobuttonV2Config = {
       isFxNotRequired: true,
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },
@@ -147,7 +147,7 @@ export const radiobuttonV2Config = {
       accordian: 'switch',
     },
     switchOnBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Checked background',
       validation: {
         schema: { type: 'string' },
@@ -158,7 +158,7 @@ export const radiobuttonV2Config = {
       tooltipPlacement: 'bottom',
     },
     switchOffBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Unchecked background',
       validation: {
         schema: { type: 'string' },
@@ -169,7 +169,7 @@ export const radiobuttonV2Config = {
       tooltipPlacement: 'bottom',
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -177,7 +177,7 @@ export const radiobuttonV2Config = {
       accordian: 'switch',
     },
     optionsTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js b/frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js
index d6ec057526..66d055ca5e 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js
@@ -53,7 +53,7 @@ export const radiobuttonConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -61,11 +61,11 @@ export const radiobuttonConfig = {
       },
     },
     activeColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Active color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     visibility: {
@@ -113,7 +113,7 @@ export const radiobuttonConfig = {
     events: [],
     styles: {
       textColor: { value: '' },
-      activeColor: { value: '' },
+      activeColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js b/frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js
index 151dca3384..320e7a6741 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js
@@ -53,7 +53,7 @@ export const rangeSliderConfig = {
   },
   styles: {
     lineColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Line color',
       validation: {
         schema: { type: 'string' },
@@ -61,7 +61,7 @@ export const rangeSliderConfig = {
       },
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -69,7 +69,7 @@ export const rangeSliderConfig = {
       },
     },
     trackColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Track color',
       validation: {
         schema: { type: 'string' },
@@ -109,7 +109,7 @@ export const rangeSliderConfig = {
     styles: {
       lineColor: { value: '' },
       handleColor: { value: '' },
-      trackColor: { value: '' },
+      trackColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
     },
   },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/spinner.js b/frontend/src/AppBuilder/WidgetManager/widgets/spinner.js
index a6bf80b9be..c38bfdc468 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/spinner.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/spinner.js
@@ -23,11 +23,11 @@ export const spinnerConfig = {
       },
     },
     colour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Colour',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#0565ff',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     size: {
@@ -54,7 +54,7 @@ export const spinnerConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       size: { value: 'sm' },
-      colour: { value: '#0565ff' },
+      colour: { value: 'var(--primary-brand)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/starrating.js b/frontend/src/AppBuilder/WidgetManager/widgets/starrating.js
index 01240d0369..8cb239133d 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/starrating.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/starrating.js
@@ -58,7 +58,7 @@ export const starratingConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Star color',
       validation: {
         schema: { type: 'string' },
@@ -66,7 +66,7 @@ export const starratingConfig = {
       },
     },
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Label color',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/statistics.js b/frontend/src/AppBuilder/WidgetManager/widgets/statistics.js
index d364d78524..ecf1f70aed 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/statistics.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/statistics.js
@@ -55,22 +55,22 @@ export const statisticsConfig = {
   events: {},
   styles: {
     primaryLabelColour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Primary label colour',
       validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
     },
     primaryTextColour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Primary text  colour',
       validation: { schema: { type: 'string' }, defaultValue: '#000000' },
     },
     secondaryLabelColour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Secondary label colour',
       validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
     },
     secondaryTextColour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Secondary text colour',
       validation: { schema: { type: 'string' }, defaultValue: '#36AF8B' },
     },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
index a39c634919..0a6a2cd575 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
@@ -45,15 +45,15 @@ export const stepsConfig = {
   },
   styles: {
     color: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -101,7 +101,7 @@ export const stepsConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       theme: { value: 'titles' },
-      color: { value: '' },
+      color: { value: 'var(--primary-brand)' },
       textColor: { value: '' },
     },
   },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/table.js b/frontend/src/AppBuilder/WidgetManager/widgets/table.js
index 8a89701494..9f0c4fd723 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/table.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/table.js
@@ -157,7 +157,7 @@ export const tableConfig = {
       defaultValue: 'clientSide',
     },
     actionButtonBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -165,7 +165,7 @@ export const tableConfig = {
       },
     },
     actionButtonTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -293,7 +293,7 @@ export const tableConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text Color',
       validation: {
         schema: { type: 'string' },
@@ -404,7 +404,7 @@ export const tableConfig = {
       accordian: 'Container',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/tabs.js b/frontend/src/AppBuilder/WidgetManager/widgets/tabs.js
index a397979a3e..3f55c7ea90 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/tabs.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/tabs.js
@@ -109,11 +109,11 @@ export const tabsConfig = {
   events: { onTabSwitch: { displayName: 'On tab switch' } },
   styles: {
     highlightColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Highlight color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     visibility: {
@@ -174,7 +174,7 @@ export const tabsConfig = {
     },
     events: [],
     styles: {
-      highlightColor: { value: '#375FCF' },
+      highlightColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       tabWidth: { value: 'auto' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/text.js b/frontend/src/AppBuilder/WidgetManager/widgets/text.js
index ada530d127..8ed1edffd1 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/text.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/text.js
@@ -105,7 +105,7 @@ export const textConfig = {
       accordian: 'Text',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: {
         schema: { type: 'string' },
@@ -185,7 +185,7 @@ export const textConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -195,7 +195,7 @@ export const textConfig = {
       colorPickerPosition: 'top',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/textinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/textinput.js
index 83efe72b87..e259ecddd0 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/textinput.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/textinput.js
@@ -80,7 +80,7 @@ export const textinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -132,13 +132,13 @@ export const textinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
@@ -146,17 +146,17 @@ export const textinputConfig = {
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -169,7 +169,7 @@ export const textinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
       accordian: 'field',
@@ -283,7 +283,7 @@ export const textinputConfig = {
     styles: {
       textColor: { value: '#1B1F24' },
       borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
       errTextColor: { value: '#D72D39' },
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/timeline.js b/frontend/src/AppBuilder/WidgetManager/widgets/timeline.js
index 6ece608f5c..63776f0b99 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/timeline.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/timeline.js
@@ -48,7 +48,7 @@ export const timelineConfig = {
     properties: {
       data: {
         value:
-          "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: '#4d72fa'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: '#4d72fa'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: '#4d72fa'} \n] }}",
+          "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: 'var(--primary-brand)'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: 'var(--primary-brand)'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: 'var(--primary-brand)'} \n] }}",
       },
       hideDate: { value: '{{false}}' },
     },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js b/frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js
index 79a3d05d4e..a5a1fb6b06 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js
@@ -164,7 +164,7 @@ export const timePickerConfig = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -215,31 +215,31 @@ export const timePickerConfig = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -252,7 +252,7 @@ export const timePickerConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js b/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js
index ec3a97450d..bd646a47f3 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js
@@ -32,14 +32,14 @@ export const toggleswitchConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
       },
     },
     toggleSwitchColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Toggle switch color',
       validation: {
         schema: { type: 'string' },
@@ -75,7 +75,7 @@ export const toggleswitchConfig = {
     events: [],
     styles: {
       textColor: { value: '' },
-      toggleSwitchColor: { value: '' },
+      toggleSwitchColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js b/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js
index 6753fbb50d..4bc21f3a86 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js
@@ -71,7 +71,7 @@ export const toggleSwitchV2Config = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text Color',
       validation: {
         schema: { type: 'string' },
@@ -79,7 +79,7 @@ export const toggleSwitchV2Config = {
       accordian: 'label',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -87,7 +87,7 @@ export const toggleSwitchV2Config = {
       accordian: 'switch',
     },
     toggleSwitchColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Checked color',
       validation: {
         schema: { type: 'string' },
@@ -95,7 +95,7 @@ export const toggleSwitchV2Config = {
       accordian: 'switch',
     },
     uncheckedColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Unchecked color',
       validation: {
         schema: { type: 'string' },
@@ -103,7 +103,7 @@ export const toggleSwitchV2Config = {
       accordian: 'switch',
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -181,7 +181,7 @@ export const toggleSwitchV2Config = {
     events: [],
     styles: {
       textColor: { value: '#1B1F24' },
-      toggleSwitchColor: { value: '#4368E3' }, //keeping same key for backward comopatibility
+      toggleSwitchColor: { value: 'var(--primary-brand)' }, //keeping same key for backward comopatibility
       uncheckedColor: { value: '#E4E7EB' },
       borderColor: { value: '#E4E7EB' },
       handleColor: { value: '#FFFFFF' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js b/frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js
index 1d7485b47a..898f0b3ed0 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js
@@ -23,8 +23,8 @@ export const treeSelectConfig = {
     onUnCheck: { displayName: 'On uncheck' },
   },
   styles: {
-    textColor: { type: 'color', displayName: 'Text Color' },
-    checkboxColor: { type: 'color', displayName: 'Checkbox color' },
+    textColor: { type: 'colorSwatches', displayName: 'Text Color' },
+    checkboxColor: { type: 'colorSwatches', displayName: 'Checkbox color' },
     visibility: { type: 'toggle', displayName: 'Visibility' },
     disabledState: { type: 'toggle', displayName: 'Disable' },
   },
@@ -71,7 +71,7 @@ export const treeSelectConfig = {
     events: [],
     styles: {
       textColor: { value: '' },
-      checkboxColor: { value: '' },
+      checkboxColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js b/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js
index 443526c3b8..e43b81adf7 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js
@@ -15,7 +15,7 @@ export const verticalDividerConfig = {
   events: {},
   styles: {
     dividerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Divider color',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/AppBuilder/Widgets/Modal.jsx b/frontend/src/AppBuilder/Widgets/Modal.jsx
index 5543ce4ee0..e63118a4e6 100644
--- a/frontend/src/AppBuilder/Widgets/Modal.jsx
+++ b/frontend/src/AppBuilder/Widgets/Modal.jsx
@@ -178,6 +178,7 @@ export const Modal = function Modal({
       display: visibility ? '' : 'none',
       '--tblr-btn-color-darker': tinycolor(triggerButtonBackgroundColor).darken(8).toString(),
       boxShadow,
+      borderColor: 'var(--primary-brand)',
     },
   };
 
diff --git a/frontend/src/Editor/Components/DropDown.jsx b/frontend/src/Editor/Components/DropDown.jsx
index 891391f0f4..b98be4e57d 100644
--- a/frontend/src/Editor/Components/DropDown.jsx
+++ b/frontend/src/Editor/Components/DropDown.jsx
@@ -236,7 +236,7 @@ export const DropDown = function DropDown({
             minWidth: 'max-content',
           }
         : {
-            backgroundColor: state.value === currentValue ? '#7A95FB' : 'white',
+            backgroundColor: state.value === currentValue ? 'var(--primary-brand)' : 'white',
             color: state.isDisabled ? '#88909694' : state.value === currentValue ? 'white' : 'black',
             ':hover': {
               backgroundColor: state.isDisabled ? 'transparent' : state.value === currentValue ? '#3650AF' : '#d8dce9',
diff --git a/frontend/src/Editor/Components/FilePicker.jsx b/frontend/src/Editor/Components/FilePicker.jsx
index b2e2b1ff86..29b127ec7c 100644
--- a/frontend/src/Editor/Components/FilePicker.jsx
+++ b/frontend/src/Editor/Components/FilePicker.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef } from 'react';
+// eslint-disable-next-line import/no-unresolved
 import { useDropzone } from 'react-dropzone';
 import { toast } from 'react-hot-toast';
 // eslint-disable-next-line import/no-unresolved
@@ -311,7 +312,11 @@ export const FilePicker = ({
     <section>
       <div className="container" {...getRootProps({ style, className: 'dropzone' })} data-cy={dataCy}>
         <input {...getInputProps()} />
-        <FilePicker.Signifiers signifier={accepted} feedback={null} cls="spinner-border text-azure p-0" />
+        <FilePicker.Signifiers
+          signifier={accepted}
+          feedback={null}
+          cls="spinner-border text-azure p-0 spinner-border-filepicker"
+        />
 
         {showSelectedFiles && !accepted ? (
           <FilePicker.AcceptedFiles width={width - 10} height={height}>
diff --git a/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx b/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx
index ab87fb22b7..56b38b2edb 100644
--- a/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx
@@ -8,7 +8,7 @@ import { highlightText } from '../DropdownV2/utils';
 const CustomOption = (props) => {
   return (
     <Option {...props}>
-      <div className="d-flex">
+      <div className="d-flex multiselct-widget-option">
         <FormCheck checked={props.isSelected} disabled={props?.isDisabled} />
         <span style={{ marginLeft: '5px' }}>
           {highlightText(props.label?.toString(), props.selectProps.inputValue)}
diff --git a/frontend/src/Editor/Components/TextArea.jsx b/frontend/src/Editor/Components/TextArea.jsx
index cd7afc7e0d..e54f87ed3a 100644
--- a/frontend/src/Editor/Components/TextArea.jsx
+++ b/frontend/src/Editor/Components/TextArea.jsx
@@ -46,7 +46,7 @@ export const TextArea = function TextArea({
         setExposedVariable('value', e.target.value);
       }}
       type="text"
-      className="form-control textarea"
+      className="form-control textarea textarea-widget"
       placeholder={properties.placeholder}
       style={{
         height,
diff --git a/frontend/src/Editor/Components/Timer.jsx b/frontend/src/Editor/Components/Timer.jsx
index b7b1f529fd..d40dfcac40 100644
--- a/frontend/src/Editor/Components/Timer.jsx
+++ b/frontend/src/Editor/Components/Timer.jsx
@@ -164,19 +164,25 @@ export const Timer = function Timer({ height, properties = {}, styles, setExpose
         <div className="btn-list justify-content-end">
           {state === 'initial' && (
             <a
-              className={`btn btn-primary${styles.disabledState || isStartDisabled() ? ' disabled' : ''}`}
+              className={`btn btn-primary timer-btn${styles.disabledState || isStartDisabled() ? ' disabled' : ''}`}
               onClick={() => onStart()}
             >
               Start
             </a>
           )}
           {state === 'running' && (
-            <a className={`btn btn-outline-primary${styles.disabledState ? ' disabled' : ''}`} onClick={onPause}>
+            <a
+              className={`btn btn-outline-primary timer-btn-hover ${styles.disabledState ? ' disabled' : ''}`}
+              onClick={onPause}
+            >
               Pause
             </a>
           )}
           {state === 'paused' && (
-            <a className={`btn btn-outline-primary${styles.disabledState ? ' disabled' : ''}`} onClick={onResume}>
+            <a
+              className={`btn btn-outline-primary timer-btn-hover ${styles.disabledState ? ' disabled' : ''}`}
+              onClick={onResume}
+            >
               Resume
             </a>
           )}
diff --git a/server/src/modules/apps/services/widget-config/timepickerV2.js b/server/src/modules/apps/services/widget-config/timepickerV2.js
deleted file mode 100644
index 22f64ea366..0000000000
--- a/server/src/modules/apps/services/widget-config/timepickerV2.js
+++ /dev/null
@@ -1,351 +0,0 @@
-export const timePickerConfig = {
-  name: 'TimePicker',
-  displayName: 'Time Picker',
-  description: 'Choose date and time',
-  component: 'TimePicker',
-  defaultSize: {
-    width: 10,
-    height: 40,
-  },
-  validation: {
-    minTime: {
-      type: 'timepicker',
-      placeholder: 'HH:mm',
-      displayName: 'Min Time',
-    },
-    maxTime: {
-      type: 'timepicker',
-      placeholder: 'HH:mm',
-      displayName: 'Max Time',
-    },
-    customRule: {
-      type: 'code',
-      displayName: 'Custom validation',
-    },
-    mandatory: {
-      type: 'toggle',
-      displayName: 'Make this field mandatory',
-    },
-  },
-  others: {
-    showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
-    showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
-  },
-  properties: {
-    label: {
-      type: 'code',
-      displayName: 'Label',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: 'Label',
-      },
-      accordian: 'Data',
-    },
-    defaultValue: {
-      type: 'code',
-      displayName: 'Default value',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '00:00',
-      },
-    },
-    isTimezoneEnabled: {
-      type: 'toggle',
-      displayName: 'Manage time zones',
-      validation: { schema: { type: 'boolean' }, defaultValue: false },
-      section: 'formatting',
-    },
-    loadingState: {
-      type: 'toggle',
-      displayName: 'Loading state',
-      validation: { schema: { type: 'boolean' }, defaultValue: true },
-      section: 'additionalActions',
-    },
-    visibility: {
-      type: 'toggle',
-      displayName: 'Visibility',
-      validation: { schema: { type: 'boolean' }, defaultValue: true },
-
-      section: 'additionalActions',
-    },
-    disabledState: {
-      type: 'toggle',
-      displayName: 'Disable',
-      validation: { schema: { type: 'boolean' }, defaultValue: true },
-      section: 'additionalActions',
-    },
-    tooltip: {
-      type: 'code',
-      displayName: 'Tooltip',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: 'Enter tooltip text',
-      },
-      section: 'additionalActions',
-      placeholder: 'Enter tooltip text',
-    },
-  },
-  events: {
-    onSelect: { displayName: 'On select' },
-    onFocus: { displayName: 'On focus' },
-    onBlur: { displayName: 'On blur' },
-  },
-  actions: [
-    {
-      handle: 'setValue',
-      displayName: 'Set value',
-      params: [
-        { handle: 'value', displayName: 'Value' },
-        { handle: 'format', displayName: 'Format' },
-      ],
-    },
-    {
-      handle: 'clearValue',
-      displayName: 'Clear value',
-    },
-    {
-      handle: 'setTime',
-      displayName: 'Set time',
-      params: [
-        { handle: 'value', displayName: 'Value' },
-        { handle: 'format', displayName: 'Format' },
-      ],
-    },
-    {
-      handle: 'setValueInTimestamp',
-      displayName: 'Set value in timestamp',
-      params: [{ handle: 'value', displayName: 'Value' }],
-    },
-    {
-      handle: 'setMinTime',
-      displayName: 'Set min time',
-      params: [{ handle: 'value', displayName: 'Value' }],
-    },
-    {
-      handle: 'setMaxTime',
-      displayName: 'Set max time',
-      params: [{ handle: 'value', displayName: 'Value' }],
-    },
-    {
-      handle: 'setDisplayTimezone',
-      displayName: 'Set display timezone',
-      params: [{ handle: 'value', displayName: 'Value' }],
-    },
-    {
-      handle: 'setStoreTimezone',
-      displayName: 'Set store timezone',
-      params: [{ handle: 'value', displayName: 'Value' }],
-    },
-    {
-      handle: 'setVisibility',
-      displayName: 'Set visibility',
-      params: [{ handle: 'value', displayName: 'Value', defaultValue: `{{true}}`, type: 'toggle' }],
-    },
-    {
-      handle: 'setLoading',
-      displayName: 'Set loading',
-      params: [{ handle: 'value', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
-    },
-    {
-      handle: 'setDisable',
-      displayName: 'Set disable',
-      params: [{ handle: 'value', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
-    },
-    {
-      handle: 'setFocus',
-      displayName: 'Set focus',
-    },
-    {
-      handle: 'setBlur',
-      displayName: 'Set blur',
-    },
-  ],
-  styles: {
-    labelColor: {
-      type: 'color',
-      displayName: 'Color',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
-      accordian: 'label',
-    },
-    alignment: {
-      type: 'switch',
-      displayName: 'Alignment',
-      validation: { schema: { type: 'string' }, defaultValue: 'top' },
-      options: [
-        { displayName: 'Side', value: 'side' },
-        { displayName: 'Top', value: 'top' },
-      ],
-      accordian: 'label',
-    },
-    direction: {
-      type: 'switch',
-      displayName: 'Direction',
-      validation: { schema: { type: 'string' }, defaultValue: 'left' },
-      showLabel: false,
-      isIcon: true,
-      options: [
-        { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
-        { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
-      ],
-      accordian: 'label',
-      isFxNotRequired: true,
-    },
-    labelWidth: {
-      type: 'slider',
-      displayName: 'Width',
-      accordian: 'label',
-      conditionallyRender: {
-        key: 'alignment',
-        value: 'side',
-      },
-      isFxNotRequired: true,
-    },
-    auto: {
-      type: 'checkbox',
-      displayName: 'auto',
-      showLabel: false,
-      validation: { schema: { type: 'boolean' } },
-      accordian: 'label',
-      conditionallyRender: {
-        key: 'alignment',
-        value: 'side',
-      },
-      isFxNotRequired: true,
-    },
-    fieldBackgroundColor: {
-      type: 'color',
-      displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
-      accordian: 'field',
-    },
-    fieldBorderColor: {
-      type: 'color',
-      displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
-      accordian: 'field',
-    },
-    accentColor: {
-      type: 'color',
-      displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
-      accordian: 'field',
-    },
-    selectedTextColor: {
-      type: 'color',
-      displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
-      accordian: 'field',
-    },
-    errTextColor: {
-      type: 'color',
-      displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
-      accordian: 'field',
-    },
-    icon: {
-      type: 'icon',
-      displayName: 'Icon',
-      validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' },
-      accordian: 'field',
-      visibility: false,
-    },
-    iconColor: {
-      type: 'color',
-      displayName: '',
-      showLabel: false,
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#6A727C',
-      },
-      accordian: 'field',
-    },
-    iconDirection: {
-      type: 'switch',
-      displayName: '',
-      validation: { schema: { type: 'string' } },
-      showLabel: false,
-      isIcon: true,
-      options: [
-        { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
-        { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
-      ],
-      accordian: 'field',
-    },
-    fieldBorderRadius: {
-      type: 'input',
-      displayName: 'Border radius',
-      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 6 },
-      accordian: 'field',
-    },
-    boxShadow: {
-      type: 'boxShadow',
-      displayName: 'Box shadow',
-      validation: {
-        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
-        defaultValue: '0px 0px 0px 0px #121212',
-      },
-      accordian: 'field',
-    },
-    padding: {
-      type: 'switch',
-      displayName: 'Padding',
-      validation: {
-        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
-        defaultValue: 'default',
-      },
-      options: [
-        { displayName: 'Default', value: 'default' },
-        { displayName: 'None', value: 'none' },
-      ],
-      accordian: 'container',
-    },
-  },
-
-  exposedVariables: {
-    value: '',
-  },
-  definition: {
-    others: {
-      showOnDesktop: { value: '{{true}}' },
-      showOnMobile: { value: '{{false}}' },
-    },
-    validation: {
-      minTime: { value: '' },
-      maxTime: { value: '' },
-      customRule: { value: '' },
-      mandatory: { value: '{{false}}' },
-    },
-    properties: {
-      label: { value: 'Label' },
-      defaultValue: { value: '00:00' },
-      timeFormat: { value: 'HH:mm' },
-      isTimezoneEnabled: { value: '{{false}}' },
-      displayTimezone: { value: 'UTC' },
-      storeTimezone: { value: 'UTC' },
-      loadingState: { value: '{{false}}' },
-      visibility: { value: '{{true}}' },
-      disabledState: { value: '{{false}}' },
-      tooltip: { value: '' },
-    },
-    events: [],
-    styles: {
-      labelColor: { value: '#1B1F24' },
-      alignment: { value: 'side' },
-      direction: { value: 'left' },
-      labelWidth: { value: '20' },
-      auto: { value: '{{true}}' },
-      fieldBackgroundColor: { value: '#fff' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      selectedTextColor: { value: '#1B1F24' },
-      errTextColor: { value: '#E54D2E' },
-      icon: { value: 'IconClock' },
-      iconVisibility: { value: true },
-      iconDirection: { value: 'left' },
-      fieldBorderRadius: { value: '{{6}}' },
-      boxShadow: { value: '0px 0px 0px 0px #121212' },
-      padding: { value: 'default' },
-      iconColor: { value: '#6A727C' },
-    },
-  },
-};
diff --git a/server/src/modules/apps/services/widget-config/boundedBox.js b/server/src/modules/apps/services/widgets/boundedBox.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/boundedBox.js
rename to server/src/modules/apps/services/widgets/boundedBox.js
diff --git a/server/src/modules/apps/services/widget-config/button.js b/server/src/modules/apps/services/widgets/button.js
similarity index 94%
rename from server/src/modules/apps/services/widget-config/button.js
rename to server/src/modules/apps/services/widgets/button.js
index 73b4a03bd4..d5b6a58214 100644
--- a/server/src/modules/apps/services/widget-config/button.js
+++ b/server/src/modules/apps/services/widgets/button.js
@@ -61,7 +61,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -74,7 +74,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -83,7 +83,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -92,7 +92,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     loaderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Loader color',
       validation: {
         schema: { type: 'string' },
@@ -110,7 +110,7 @@ export const buttonConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' } },
       accordian: 'button',
@@ -132,10 +132,7 @@ export const buttonConfig = {
     borderRadius: {
       type: 'numberInput',
       displayName: 'Border radius',
-      validation: {
-        validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
-        defaultValue: false,
-      },
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: false },
       accordian: 'button',
     },
     boxShadow: {
@@ -222,10 +219,10 @@ export const buttonConfig = {
     events: [],
     styles: {
       textColor: { value: '#FFFFFF' },
-      borderColor: { value: '#4368E3' },
+      borderColor: { value: 'var(--primary-brand)' },
       loaderColor: { value: '#FFFFFF' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#4368E3' },
+      backgroundColor: { value: 'var(--primary-brand)' },
       iconColor: { value: '#FFFFFF' },
       direction: { value: 'left' },
       padding: { value: 'default' },
diff --git a/server/src/modules/apps/services/widget-config/buttonGroup.js b/server/src/modules/apps/services/widgets/buttonGroup.js
similarity index 94%
rename from server/src/modules/apps/services/widget-config/buttonGroup.js
rename to server/src/modules/apps/services/widgets/buttonGroup.js
index c0fa889dd5..49957bc03e 100644
--- a/server/src/modules/apps/services/widget-config/buttonGroup.js
+++ b/server/src/modules/apps/services/widgets/buttonGroup.js
@@ -68,7 +68,7 @@ export const buttonGroupConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -76,7 +76,7 @@ export const buttonGroupConfig = {
       },
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -108,7 +108,7 @@ export const buttonGroupConfig = {
       },
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Selected text colour',
       validation: {
         schema: { type: 'string' },
@@ -116,11 +116,11 @@ export const buttonGroupConfig = {
       },
     },
     selectedBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Selected background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#007bff',
+        defaultValue: 'var(--primary-brand)',
       },
     },
   },
@@ -147,7 +147,7 @@ export const buttonGroupConfig = {
       borderRadius: { value: '{{4}}' },
       disabledState: { value: '{{false}}' },
       selectedTextColor: { value: '#FFFFFF' },
-      selectedBackgroundColor: { value: '#4368E3' },
+      selectedBackgroundColor: { value: 'var(--primary-brand)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/calendar.js b/server/src/modules/apps/services/widgets/calendar.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/calendar.js
rename to server/src/modules/apps/services/widgets/calendar.js
diff --git a/server/src/modules/apps/services/widget-config/chart.js b/server/src/modules/apps/services/widgets/chart.js
similarity index 97%
rename from server/src/modules/apps/services/widget-config/chart.js
rename to server/src/modules/apps/services/widgets/chart.js
index 72ab688056..81dbd2547a 100644
--- a/server/src/modules/apps/services/widget-config/chart.js
+++ b/server/src/modules/apps/services/widgets/chart.js
@@ -39,13 +39,13 @@ export const chartConfig = {
       },
     },
     markerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Marker color',
       validation: {
         schema: {
           type: 'string',
         },
-        defaultValue: '#CDE1F8',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     showAxes: {
@@ -134,7 +134,7 @@ export const chartConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
     },
@@ -192,7 +192,7 @@ export const chartConfig = {
     },
     properties: {
       title: { value: 'This title can be changed' },
-      markerColor: { value: '#CDE1F8' },
+      markerColor: { value: 'var(--primary-brand)' },
       showAxes: { value: '{{true}}' },
       showGridLines: { value: '{{true}}' },
       plotFromJson: { value: '{{false}}' },
diff --git a/server/src/modules/apps/services/widget-config/checkbox.js b/server/src/modules/apps/services/widgets/checkbox.js
similarity index 96%
rename from server/src/modules/apps/services/widget-config/checkbox.js
rename to server/src/modules/apps/services/widgets/checkbox.js
index c9b6424020..ca509979cb 100644
--- a/server/src/modules/apps/services/widget-config/checkbox.js
+++ b/server/src/modules/apps/services/widgets/checkbox.js
@@ -70,7 +70,7 @@ export const checkboxConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -78,7 +78,7 @@ export const checkboxConfig = {
       accordian: 'label',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -86,7 +86,7 @@ export const checkboxConfig = {
       accordian: 'switch',
     },
     checkboxColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Checked color',
       validation: {
         schema: { type: 'string' },
@@ -94,7 +94,7 @@ export const checkboxConfig = {
       accordian: 'switch',
     },
     uncheckedColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Unchecked color',
       validation: {
         schema: { type: 'string' },
@@ -102,7 +102,7 @@ export const checkboxConfig = {
       accordian: 'switch',
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -183,7 +183,7 @@ export const checkboxConfig = {
     styles: {
       disabledState: { value: '{{false}}' },
       textColor: { value: '#1B1F24' },
-      checkboxColor: { value: '#4368E3' },
+      checkboxColor: { value: 'var(--primary-brand)' },
       uncheckedColor: { value: '#E4E7EB' },
       borderColor: { value: '#CCD1D5' },
       handleColor: { value: '#FFFFFF' },
diff --git a/server/src/modules/apps/services/widget-config/circularProgressbar.js b/server/src/modules/apps/services/widgets/circularProgressbar.js
similarity index 92%
rename from server/src/modules/apps/services/widget-config/circularProgressbar.js
rename to server/src/modules/apps/services/widgets/circularProgressbar.js
index a7ffd551af..2babc27a12 100644
--- a/server/src/modules/apps/services/widget-config/circularProgressbar.js
+++ b/server/src/modules/apps/services/widgets/circularProgressbar.js
@@ -32,15 +32,15 @@ export const circularProgressbarConfig = {
   events: {},
   styles: {
     color: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text Color',
       validation: {
         schema: { type: 'string' },
@@ -104,7 +104,7 @@ export const circularProgressbarConfig = {
     },
     events: [],
     styles: {
-      color: { value: '' },
+      color: { value: 'var(--primary-brand)' },
       textColor: { value: '' },
       textSize: { value: '{{16}}' },
       strokeWidth: { value: '{{8}}' },
diff --git a/server/src/modules/apps/services/widget-config/codeEditor.js b/server/src/modules/apps/services/widgets/codeEditor.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/codeEditor.js
rename to server/src/modules/apps/services/widgets/codeEditor.js
diff --git a/server/src/modules/apps/services/widget-config/colorPicker.js b/server/src/modules/apps/services/widgets/colorPicker.js
similarity index 83%
rename from server/src/modules/apps/services/widget-config/colorPicker.js
rename to server/src/modules/apps/services/widgets/colorPicker.js
index b2fddd7e4c..6ecdede1a8 100644
--- a/server/src/modules/apps/services/widget-config/colorPicker.js
+++ b/server/src/modules/apps/services/widgets/colorPicker.js
@@ -4,7 +4,7 @@ export const colorPickerConfig = {
   description: 'Choose colors from a palette',
   component: 'ColorPicker',
   properties: {
-    defaultColor: { type: 'color', displayName: 'Default color' },
+    defaultColor: { type: 'colorSwatches', displayName: 'Default color' },
   },
   defaultSize: {
     width: 9,
@@ -14,7 +14,9 @@ export const colorPickerConfig = {
     {
       displayName: 'Set Color',
       handle: 'setColor',
-      params: [{ handle: 'color', displayName: 'color', defaultValue: '#ffffff', type: 'color' }],
+      params: [
+        { handle: 'colorSwatches', displayName: 'colorSwatches', defaultValue: '#ffffff', type: 'colorSwatches' },
+      ],
     },
   ],
   others: {
diff --git a/server/src/modules/apps/services/widget-config/container.js b/server/src/modules/apps/services/widgets/container.js
similarity index 96%
rename from server/src/modules/apps/services/widget-config/container.js
rename to server/src/modules/apps/services/widgets/container.js
index ec1d5174b0..c4f5ac8d49 100644
--- a/server/src/modules/apps/services/widget-config/container.js
+++ b/server/src/modules/apps/services/widgets/container.js
@@ -71,7 +71,7 @@ export const containerConfig = {
   events: {},
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -80,7 +80,7 @@ export const containerConfig = {
       accordian: 'container',
     },
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -89,7 +89,7 @@ export const containerConfig = {
       accordian: 'header',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -153,7 +153,7 @@ export const containerConfig = {
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
-      showHeader: {value: `{{true}}`},
+      showHeader: { value: `{{true}}` },
       loadingState: { value: `{{false}}` },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
diff --git a/server/src/modules/apps/services/widget-config/customComponent.js b/server/src/modules/apps/services/widgets/customComponent.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/customComponent.js
rename to server/src/modules/apps/services/widgets/customComponent.js
diff --git a/server/src/modules/apps/services/widget-config/datepicker.js b/server/src/modules/apps/services/widgets/datepicker.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/datepicker.js
rename to server/src/modules/apps/services/widgets/datepicker.js
diff --git a/server/src/modules/apps/services/widget-config/datepickerV2.js b/server/src/modules/apps/services/widgets/datepickerV2.js
similarity index 97%
rename from server/src/modules/apps/services/widget-config/datepickerV2.js
rename to server/src/modules/apps/services/widgets/datepickerV2.js
index 87de5d137b..ea56598d2e 100644
--- a/server/src/modules/apps/services/widget-config/datepickerV2.js
+++ b/server/src/modules/apps/services/widgets/datepickerV2.js
@@ -169,8 +169,8 @@ export const datePickerV2Config = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -220,31 +220,31 @@ export const datePickerV2Config = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -257,7 +257,7 @@ export const datePickerV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {
diff --git a/server/src/modules/apps/services/widget-config/daterangepicker.js b/server/src/modules/apps/services/widgets/daterangepicker.js
similarity index 97%
rename from server/src/modules/apps/services/widget-config/daterangepicker.js
rename to server/src/modules/apps/services/widgets/daterangepicker.js
index 1f38a8df6d..2fcd5bfb42 100644
--- a/server/src/modules/apps/services/widget-config/daterangepicker.js
+++ b/server/src/modules/apps/services/widgets/daterangepicker.js
@@ -199,8 +199,8 @@ export const daterangepickerConfig = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -250,31 +250,31 @@ export const daterangepickerConfig = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -287,7 +287,7 @@ export const daterangepickerConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {
diff --git a/server/src/modules/apps/services/widget-config/datetimepickerV2.js b/server/src/modules/apps/services/widgets/datetimepickerV2.js
similarity index 97%
rename from server/src/modules/apps/services/widget-config/datetimepickerV2.js
rename to server/src/modules/apps/services/widgets/datetimepickerV2.js
index 388eb9786c..658cc31c01 100644
--- a/server/src/modules/apps/services/widget-config/datetimepickerV2.js
+++ b/server/src/modules/apps/services/widgets/datetimepickerV2.js
@@ -214,8 +214,8 @@ export const datetimePickerV2Config = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -265,31 +265,31 @@ export const datetimePickerV2Config = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -302,7 +302,7 @@ export const datetimePickerV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {
diff --git a/server/src/modules/apps/services/widget-config/divider.js b/server/src/modules/apps/services/widgets/divider.js
similarity index 97%
rename from server/src/modules/apps/services/widget-config/divider.js
rename to server/src/modules/apps/services/widgets/divider.js
index 045f894816..3905c7583d 100644
--- a/server/src/modules/apps/services/widget-config/divider.js
+++ b/server/src/modules/apps/services/widgets/divider.js
@@ -15,7 +15,7 @@ export const dividerConfig = {
   events: {},
   styles: {
     dividerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Divider color',
       validation: {
         schema: { type: 'string' },
diff --git a/server/src/modules/apps/services/widget-config/dropdown.js b/server/src/modules/apps/services/widgets/dropdown.js
similarity index 99%
rename from server/src/modules/apps/services/widget-config/dropdown.js
rename to server/src/modules/apps/services/widgets/dropdown.js
index b2c58acc7a..b8b090af24 100644
--- a/server/src/modules/apps/services/widget-config/dropdown.js
+++ b/server/src/modules/apps/services/widgets/dropdown.js
@@ -128,7 +128,7 @@ export const dropdownConfig = {
       defaultValue: true,
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Selected text color',
       validation: {
         schema: {
diff --git a/server/src/modules/apps/services/widget-config/dropdownV2.js b/server/src/modules/apps/services/widgets/dropdownV2.js
similarity index 97%
rename from server/src/modules/apps/services/widget-config/dropdownV2.js
rename to server/src/modules/apps/services/widgets/dropdownV2.js
index 247af3ccef..8e5355f789 100644
--- a/server/src/modules/apps/services/widget-config/dropdownV2.js
+++ b/server/src/modules/apps/services/widgets/dropdownV2.js
@@ -101,7 +101,7 @@ export const dropdownV2Config = {
   },
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -153,31 +153,31 @@ export const dropdownV2Config = {
     },
 
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -190,7 +190,7 @@ export const dropdownV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {
diff --git a/server/src/modules/apps/services/widget-config/filepicker.js b/server/src/modules/apps/services/widgets/filepicker.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/filepicker.js
rename to server/src/modules/apps/services/widgets/filepicker.js
diff --git a/server/src/modules/apps/services/widget-config/form.js b/server/src/modules/apps/services/widgets/form.js
similarity index 98%
rename from server/src/modules/apps/services/widget-config/form.js
rename to server/src/modules/apps/services/widgets/form.js
index ac82fcb171..6dab504819 100644
--- a/server/src/modules/apps/services/widget-config/form.js
+++ b/server/src/modules/apps/services/widgets/form.js
@@ -249,7 +249,7 @@ export const formConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -267,7 +267,7 @@ export const formConfig = {
       },
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -317,6 +317,7 @@ export const formConfig = {
         value:
           "{{ {title: 'User registration form', properties: {firstname: {type: 'textinput',value: 'Maria',label:'First name', validation:{maxLength:6}, styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},lastname:{type: 'textinput',value: 'Doe', label:'Last name', styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},age:{type:'number', label:'Age'},}, submitButton: {value: 'Submit', styles: {backgroundColor: '#3a433b',borderColor:'#595959'}}} }}",
       },
+      buttonToSubmit: { value: '{{"none"}}' },
     },
     events: [],
     styles: {
diff --git a/server/src/modules/apps/services/widget-config/html.js b/server/src/modules/apps/services/widgets/html.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/html.js
rename to server/src/modules/apps/services/widgets/html.js
diff --git a/server/src/modules/apps/services/widget-config/icon.js b/server/src/modules/apps/services/widgets/icon.js
similarity index 99%
rename from server/src/modules/apps/services/widget-config/icon.js
rename to server/src/modules/apps/services/widgets/icon.js
index aea06c976c..761a2da425 100644
--- a/server/src/modules/apps/services/widget-config/icon.js
+++ b/server/src/modules/apps/services/widgets/icon.js
@@ -61,7 +61,7 @@ export const iconConfig = {
   },
   styles: {
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: {
         schema: { type: 'string' },
diff --git a/server/src/modules/apps/services/widget-config/iframe.js b/server/src/modules/apps/services/widgets/iframe.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/iframe.js
rename to server/src/modules/apps/services/widgets/iframe.js
diff --git a/server/src/modules/apps/services/widget-config/image.js b/server/src/modules/apps/services/widgets/image.js
similarity index 99%
rename from server/src/modules/apps/services/widget-config/image.js
rename to server/src/modules/apps/services/widgets/image.js
index c4bd7b6147..f3014e3e02 100644
--- a/server/src/modules/apps/services/widget-config/image.js
+++ b/server/src/modules/apps/services/widgets/image.js
@@ -144,7 +144,7 @@ export const imageConfig = {
       accordian: 'Image',
     },
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -153,7 +153,7 @@ export const imageConfig = {
       accordian: 'Container',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },
diff --git a/server/src/modules/apps/services/widget-config/index.js b/server/src/modules/apps/services/widgets/index.js
similarity index 74%
rename from server/src/modules/apps/services/widget-config/index.js
rename to server/src/modules/apps/services/widgets/index.js
index 5ded535dd9..2540cdeeef 100644
--- a/server/src/modules/apps/services/widget-config/index.js
+++ b/server/src/modules/apps/services/widgets/index.js
@@ -58,7 +58,7 @@ import { datetimePickerV2Config } from './datetimepickerV2';
 import { datePickerV2Config } from './datepickerV2';
 import { timePickerConfig } from './timepicker';
 
-const widgets = {
+export {
   buttonConfig,
   tableConfig,
   chartConfig,
@@ -119,48 +119,3 @@ const widgets = {
   iconConfig,
   boundedBoxConfig,
 };
-
-const universalProps = {
-  properties: {},
-  general: {
-    tooltip: { type: 'code', displayName: 'Tooltip', validation: { schema: { type: 'string' } } },
-  },
-  others: {},
-  events: {},
-  styles: {},
-  validate: true,
-  generalStyles: {
-    boxShadow: { type: 'boxShadow', displayName: 'Box Shadow' },
-  },
-  definition: {
-    others: {},
-    events: [],
-    styles: {},
-    generalStyles: {
-      boxShadow: { value: '0px 0px 0px 0px #00000040' },
-    },
-  },
-};
-
-const combineProperties = (widget, universal, isArray = false) => {
-  return {
-    ...universal,
-    ...widget,
-    properties: { ...universal.properties, ...widget.properties },
-    general: { ...universal.general, ...widget.general },
-    others: { ...universal.others, ...widget.others },
-    events: isArray ? [...universal.events, ...widget.events] : { ...universal.events, ...widget.events },
-    styles: { ...universal.styles, ...widget.styles },
-    generalStyles: { ...universal.generalStyles, ...widget.generalStyles },
-    exposedVariables: { ...universal.exposedVariables, ...widget.exposedVariables },
-  };
-};
-
-export const componentTypes = Object.values(widgets).map((widget) => {
-  return {
-    ...combineProperties(widget, universalProps),
-    definition: combineProperties(widget.definition, universalProps.definition, true),
-  };
-});
-
-export default widgets;
diff --git a/server/src/modules/apps/services/widget-config/kanban.js b/server/src/modules/apps/services/widgets/kanban.js
similarity index 97%
rename from server/src/modules/apps/services/widget-config/kanban.js
rename to server/src/modules/apps/services/widgets/kanban.js
index 0705581c51..cd39d0bd7b 100644
--- a/server/src/modules/apps/services/widget-config/kanban.js
+++ b/server/src/modules/apps/services/widgets/kanban.js
@@ -77,7 +77,7 @@ export const kanbanConfig = {
   styles: {
     disabledState: { type: 'toggle', displayName: 'Disable' },
     visibility: { type: 'toggle', displayName: 'Visibility' },
-    accentColor: { type: 'color', displayName: 'Accent color' },
+    accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
   },
   actions: [
     {
@@ -157,7 +157,7 @@ export const kanbanConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
-      accentColor: { value: '#4d72fa' },
+      accentColor: { value: 'var(--primary-brand)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/kanbanBoard.js b/server/src/modules/apps/services/widgets/kanbanBoard.js
similarity index 96%
rename from server/src/modules/apps/services/widget-config/kanbanBoard.js
rename to server/src/modules/apps/services/widgets/kanbanBoard.js
index 4929bad9fe..4363c0d0b7 100644
--- a/server/src/modules/apps/services/widget-config/kanbanBoard.js
+++ b/server/src/modules/apps/services/widgets/kanbanBoard.js
@@ -30,7 +30,7 @@ export const kanbanBoardConfig = {
     visibility: { type: 'toggle', displayName: 'Visibility' },
     width: { type: 'number', displayName: 'Width' },
     minWidth: { type: 'number', displayName: 'Min Width' },
-    accentColor: { type: 'color', displayName: 'Accent color' },
+    accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
   },
   exposedVariables: {
     columns: {},
diff --git a/server/src/modules/apps/services/widget-config/link.js b/server/src/modules/apps/services/widgets/link.js
similarity index 98%
rename from server/src/modules/apps/services/widget-config/link.js
rename to server/src/modules/apps/services/widgets/link.js
index bf419e16c0..d04d72dffa 100644
--- a/server/src/modules/apps/services/widget-config/link.js
+++ b/server/src/modules/apps/services/widgets/link.js
@@ -46,7 +46,7 @@ export const linkConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
diff --git a/server/src/modules/apps/services/widget-config/listview.js b/server/src/modules/apps/services/widgets/listview.js
similarity index 98%
rename from server/src/modules/apps/services/widget-config/listview.js
rename to server/src/modules/apps/services/widgets/listview.js
index a813bb5a0b..fbd3c76a59 100644
--- a/server/src/modules/apps/services/widget-config/listview.js
+++ b/server/src/modules/apps/services/widgets/listview.js
@@ -120,7 +120,7 @@ export const listviewConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -128,7 +128,7 @@ export const listviewConfig = {
       },
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
diff --git a/server/src/modules/apps/services/widget-config/map.js b/server/src/modules/apps/services/widgets/map.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/map.js
rename to server/src/modules/apps/services/widgets/map.js
diff --git a/server/src/modules/apps/services/widget-config/modal.js b/server/src/modules/apps/services/widgets/modal.js
similarity index 89%
rename from server/src/modules/apps/services/widget-config/modal.js
rename to server/src/modules/apps/services/widgets/modal.js
index 60f791831e..c0a0844607 100644
--- a/server/src/modules/apps/services/widget-config/modal.js
+++ b/server/src/modules/apps/services/widgets/modal.js
@@ -20,19 +20,6 @@ export const modalConfig = {
         defaultValue: 'This title can be changed',
       },
     },
-    titleAlignment: {
-      type: 'select',
-      displayName: 'Title alignment',
-      options: [
-        { name: 'left', value: 'left' },
-        { name: 'center', value: 'center' },
-        { name: 'right', value: 'right' },
-      ],
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: 'left',
-      },
-    },
     loadingState: {
       type: 'toggle',
       displayName: 'Loading state',
@@ -94,7 +81,7 @@ export const modalConfig = {
   },
   styles: {
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header background color',
       validation: {
         schema: { type: 'string' },
@@ -102,7 +89,7 @@ export const modalConfig = {
       },
     },
     headerTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header title color',
       validation: {
         schema: { type: 'string' },
@@ -110,7 +97,7 @@ export const modalConfig = {
       },
     },
     bodyBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Body background color',
       validation: {
         schema: { type: 'string' },
@@ -134,7 +121,7 @@ export const modalConfig = {
       },
     },
     triggerButtonBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button background color',
       validation: {
         schema: { type: 'string' },
@@ -142,7 +129,7 @@ export const modalConfig = {
       },
     },
     triggerButtonTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button text color',
       validation: {
         schema: { type: 'string' },
@@ -188,7 +175,7 @@ export const modalConfig = {
       bodyBackgroundColor: { value: '#ffffffff' },
       disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
-      triggerButtonBackgroundColor: { value: '#4D72FA' },
+      triggerButtonBackgroundColor: { value: 'var(--primary-brand)' },
       triggerButtonTextColor: { value: '#ffffffff' },
     },
   },
diff --git a/server/src/modules/apps/services/widget-config/multiselect.js b/server/src/modules/apps/services/widgets/multiselect.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/multiselect.js
rename to server/src/modules/apps/services/widgets/multiselect.js
diff --git a/server/src/modules/apps/services/widget-config/multiselectV2.js b/server/src/modules/apps/services/widgets/multiselectV2.js
similarity index 97%
rename from server/src/modules/apps/services/widget-config/multiselectV2.js
rename to server/src/modules/apps/services/widgets/multiselectV2.js
index 6aefd71067..2bc4cae17b 100644
--- a/server/src/modules/apps/services/widget-config/multiselectV2.js
+++ b/server/src/modules/apps/services/widgets/multiselectV2.js
@@ -165,7 +165,7 @@ export const multiselectV2Config = {
 
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -218,32 +218,32 @@ export const multiselectV2Config = {
     },
 
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
 
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error Text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -256,7 +256,7 @@ export const multiselectV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: {
         schema: { type: 'string' },
@@ -365,7 +365,7 @@ export const multiselectV2Config = {
       icon: { value: 'IconHome2' },
       iconVisibility: { value: false },
       iconColor: { value: '#6A727C' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/numberinput.js b/server/src/modules/apps/services/widgets/numberinput.js
similarity index 94%
rename from server/src/modules/apps/services/widget-config/numberinput.js
rename to server/src/modules/apps/services/widgets/numberinput.js
index b0f72e6d81..cba9c04cd1 100644
--- a/server/src/modules/apps/services/widget-config/numberinput.js
+++ b/server/src/modules/apps/services/widgets/numberinput.js
@@ -20,10 +20,7 @@ export const numberinputConfig = {
     value: {
       type: 'code',
       displayName: 'Default value',
-      validation: {
-        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
-        defaultValue: 0,
-      },
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 0 },
     },
     placeholder: {
       type: 'code',
@@ -75,7 +72,7 @@ export const numberinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -127,31 +124,31 @@ export const numberinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -164,7 +161,7 @@ export const numberinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
       accordian: 'field',
@@ -282,7 +279,7 @@ export const numberinputConfig = {
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },
       borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
       errTextColor: { value: '#D72D39' },
       textColor: { value: '#1B1F24' },
       color: { value: '#1B1F24' },
diff --git a/server/src/modules/apps/services/widget-config/pagination.js b/server/src/modules/apps/services/widgets/pagination.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/pagination.js
rename to server/src/modules/apps/services/widgets/pagination.js
diff --git a/server/src/modules/apps/services/widget-config/passwordinput.js b/server/src/modules/apps/services/widgets/passwordinput.js
similarity index 95%
rename from server/src/modules/apps/services/widget-config/passwordinput.js
rename to server/src/modules/apps/services/widgets/passwordinput.js
index 92a4a4711c..fad0d00735 100644
--- a/server/src/modules/apps/services/widget-config/passwordinput.js
+++ b/server/src/modules/apps/services/widgets/passwordinput.js
@@ -84,7 +84,7 @@ export const passinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -136,31 +136,31 @@ export const passinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -173,7 +173,7 @@ export const passinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
       accordian: 'field',
@@ -278,7 +278,7 @@ export const passinputConfig = {
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },
       borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
       errTextColor: { value: '#D72D39' },
       textColor: { value: '#1B1F24' },
       iconColor: { value: '#CFD3D859' },
diff --git a/server/src/modules/apps/services/widget-config/pdf.js b/server/src/modules/apps/services/widgets/pdf.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/pdf.js
rename to server/src/modules/apps/services/widgets/pdf.js
diff --git a/server/src/modules/apps/services/widget-config/qrscanner.js b/server/src/modules/apps/services/widgets/qrscanner.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/qrscanner.js
rename to server/src/modules/apps/services/widgets/qrscanner.js
diff --git a/server/src/modules/apps/services/widget-config/radioButtonV2.js b/server/src/modules/apps/services/widgets/radioButtonV2.js
similarity index 97%
rename from server/src/modules/apps/services/widget-config/radioButtonV2.js
rename to server/src/modules/apps/services/widgets/radioButtonV2.js
index 2ff6ca6c7c..62a084d75a 100644
--- a/server/src/modules/apps/services/widget-config/radioButtonV2.js
+++ b/server/src/modules/apps/services/widgets/radioButtonV2.js
@@ -89,7 +89,7 @@ export const radiobuttonV2Config = {
   },
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -139,7 +139,7 @@ export const radiobuttonV2Config = {
       isFxNotRequired: true,
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },
@@ -147,7 +147,7 @@ export const radiobuttonV2Config = {
       accordian: 'switch',
     },
     switchOnBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Checked background',
       validation: {
         schema: { type: 'string' },
@@ -158,7 +158,7 @@ export const radiobuttonV2Config = {
       tooltipPlacement: 'bottom',
     },
     switchOffBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Unchecked background',
       validation: {
         schema: { type: 'string' },
@@ -169,7 +169,7 @@ export const radiobuttonV2Config = {
       tooltipPlacement: 'bottom',
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -177,7 +177,7 @@ export const radiobuttonV2Config = {
       accordian: 'switch',
     },
     optionsTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: {
         schema: { type: 'string' },
diff --git a/server/src/modules/apps/services/widget-config/radiobutton.js b/server/src/modules/apps/services/widgets/radiobutton.js
similarity index 91%
rename from server/src/modules/apps/services/widget-config/radiobutton.js
rename to server/src/modules/apps/services/widgets/radiobutton.js
index 40c9d3ef5c..66d055ca5e 100644
--- a/server/src/modules/apps/services/widget-config/radiobutton.js
+++ b/server/src/modules/apps/services/widgets/radiobutton.js
@@ -1,6 +1,6 @@
 export const radiobuttonConfig = {
-  name: 'RadioButton',
-  displayName: 'Radio Button',
+  name: 'RadioButtonLegacy',
+  displayName: 'Radio Button (Legacy)',
   description: 'Select one from multiple choices',
   component: 'RadioButton',
   defaultSize: {
@@ -53,7 +53,7 @@ export const radiobuttonConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -61,11 +61,11 @@ export const radiobuttonConfig = {
       },
     },
     activeColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Active color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     visibility: {
@@ -97,9 +97,7 @@ export const radiobuttonConfig = {
       ],
     },
   ],
-  exposedVariables: {
-    value: true,
-  },
+  exposedVariables: {},
   definition: {
     others: {
       showOnDesktop: { value: '{{true}}' },
@@ -115,7 +113,7 @@ export const radiobuttonConfig = {
     events: [],
     styles: {
       textColor: { value: '' },
-      activeColor: { value: '' },
+      activeColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },
diff --git a/server/src/modules/apps/services/widget-config/rangeslider.js b/server/src/modules/apps/services/widgets/rangeslider.js
similarity index 94%
rename from server/src/modules/apps/services/widget-config/rangeslider.js
rename to server/src/modules/apps/services/widgets/rangeslider.js
index 151dca3384..320e7a6741 100644
--- a/server/src/modules/apps/services/widget-config/rangeslider.js
+++ b/server/src/modules/apps/services/widgets/rangeslider.js
@@ -53,7 +53,7 @@ export const rangeSliderConfig = {
   },
   styles: {
     lineColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Line color',
       validation: {
         schema: { type: 'string' },
@@ -61,7 +61,7 @@ export const rangeSliderConfig = {
       },
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -69,7 +69,7 @@ export const rangeSliderConfig = {
       },
     },
     trackColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Track color',
       validation: {
         schema: { type: 'string' },
@@ -109,7 +109,7 @@ export const rangeSliderConfig = {
     styles: {
       lineColor: { value: '' },
       handleColor: { value: '' },
-      trackColor: { value: '' },
+      trackColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
     },
   },
diff --git a/server/src/modules/apps/services/widget-config/richtextarea.js b/server/src/modules/apps/services/widgets/richtextarea.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/richtextarea.js
rename to server/src/modules/apps/services/widgets/richtextarea.js
diff --git a/server/src/modules/apps/services/widget-config/spinner.js b/server/src/modules/apps/services/widgets/spinner.js
similarity index 90%
rename from server/src/modules/apps/services/widget-config/spinner.js
rename to server/src/modules/apps/services/widgets/spinner.js
index a6bf80b9be..c38bfdc468 100644
--- a/server/src/modules/apps/services/widget-config/spinner.js
+++ b/server/src/modules/apps/services/widgets/spinner.js
@@ -23,11 +23,11 @@ export const spinnerConfig = {
       },
     },
     colour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Colour',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#0565ff',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     size: {
@@ -54,7 +54,7 @@ export const spinnerConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       size: { value: 'sm' },
-      colour: { value: '#0565ff' },
+      colour: { value: 'var(--primary-brand)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/starrating.js b/server/src/modules/apps/services/widgets/starrating.js
similarity index 97%
rename from server/src/modules/apps/services/widget-config/starrating.js
rename to server/src/modules/apps/services/widgets/starrating.js
index 01240d0369..8cb239133d 100644
--- a/server/src/modules/apps/services/widget-config/starrating.js
+++ b/server/src/modules/apps/services/widgets/starrating.js
@@ -58,7 +58,7 @@ export const starratingConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Star color',
       validation: {
         schema: { type: 'string' },
@@ -66,7 +66,7 @@ export const starratingConfig = {
       },
     },
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Label color',
       validation: {
         schema: { type: 'string' },
diff --git a/server/src/modules/apps/services/widget-config/statistics.js b/server/src/modules/apps/services/widgets/statistics.js
similarity index 96%
rename from server/src/modules/apps/services/widget-config/statistics.js
rename to server/src/modules/apps/services/widgets/statistics.js
index d364d78524..ecf1f70aed 100644
--- a/server/src/modules/apps/services/widget-config/statistics.js
+++ b/server/src/modules/apps/services/widgets/statistics.js
@@ -55,22 +55,22 @@ export const statisticsConfig = {
   events: {},
   styles: {
     primaryLabelColour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Primary label colour',
       validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
     },
     primaryTextColour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Primary text  colour',
       validation: { schema: { type: 'string' }, defaultValue: '#000000' },
     },
     secondaryLabelColour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Secondary label colour',
       validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
     },
     secondaryTextColour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Secondary text colour',
       validation: { schema: { type: 'string' }, defaultValue: '#36AF8B' },
     },
diff --git a/server/src/modules/apps/services/widget-config/steps.js b/server/src/modules/apps/services/widgets/steps.js
similarity index 94%
rename from server/src/modules/apps/services/widget-config/steps.js
rename to server/src/modules/apps/services/widgets/steps.js
index a39c634919..c8b9753d9a 100644
--- a/server/src/modules/apps/services/widget-config/steps.js
+++ b/server/src/modules/apps/services/widgets/steps.js
@@ -45,15 +45,15 @@ export const stepsConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -101,7 +101,7 @@ export const stepsConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       theme: { value: 'titles' },
-      color: { value: '' },
+      color: { value: 'var(--primary-brand)' },
       textColor: { value: '' },
     },
   },
diff --git a/server/src/modules/apps/services/widget-config/svgImage.js b/server/src/modules/apps/services/widgets/svgImage.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/svgImage.js
rename to server/src/modules/apps/services/widgets/svgImage.js
diff --git a/server/src/modules/apps/services/widget-config/table.js b/server/src/modules/apps/services/widgets/table.js
similarity index 89%
rename from server/src/modules/apps/services/widget-config/table.js
rename to server/src/modules/apps/services/widgets/table.js
index 735feccbc7..9f0c4fd723 100644
--- a/server/src/modules/apps/services/widget-config/table.js
+++ b/server/src/modules/apps/services/widgets/table.js
@@ -157,7 +157,7 @@ export const tableConfig = {
       defaultValue: 'clientSide',
     },
     actionButtonBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -165,7 +165,7 @@ export const tableConfig = {
       },
     },
     actionButtonTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -293,7 +293,7 @@ export const tableConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text Color',
       validation: {
         schema: { type: 'string' },
@@ -373,7 +373,6 @@ export const tableConfig = {
     },
     maxRowHeightValue: {
       type: 'tableRowHeightInput',
-      isFxNotRequired: true,
       showLabel: false,
       validation: {
         schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
@@ -405,7 +404,7 @@ export const tableConfig = {
       accordian: 'Container',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },
@@ -517,7 +516,7 @@ export const tableConfig = {
       loadingState: { value: '{{false}}' },
       data: {
         value:
-          "{{ [ \n\t\t{ id: 1, name: 'Olivia Nguyen', email: 'olivia.nguyen@example.com', date: '15/05/2022', phone: 9876543210, interest: ['Reading', 'Traveling','Photography'], photo: 'https://reqres.in/img/faces/7-image.jpg' }, \n\t\t{ id: 2, name: 'Liam Patel', email: 'liam.patel@example.com', date: '20/09/2021', phone: 8765432109, interest: ['Cooking','Gardening','Hiking'], photo: 'https://reqres.in/img/faces/5-image.jpg' }, \n\t\t{ id: 3, name: 'Sophia Reyes', email: 'sophia.reyes@example.com', date: '01/01/2023', phone: 7654321098, interest: ['Music','Dancing','Crafting'], photo: 'https://reqres.in/img/faces/3-image.jpg' }, \n\t\t{ id: 4, name: 'Jacob Hernandez', email: 'jacob.hernandez@example.com', date: '10/11/2022', phone: 6543210987, interest: ['Reading', 'Traveling', 'Volunteering'], photo: 'https://reqres.in/img/faces/1-image.jpg' }, \n\t\t{ id: 5, name: 'William Sanchez', email: 'william.sanchez@example.com', date: '07/01/2021', phone: 4321098765, interest: ['Music', 'Dancing', 'Hiking'], photo: 'https://reqres.in/img/faces/4-image.jpg' }, \n\t\t{ id: 6, name: 'Ethan Morales', email: 'ethan.morales@example.com', date: '05/11/2021', phone: 2109876543, interest: ['Cooking', 'Traveling', 'Photography'], photo: 'https://reqres.in/img/faces/6-image.jpg' }, \n\t\t{ id: 7, name: 'Mia Tiana', email: 'mia.tiana@example.com', date: '21/11/2022', phone: 1098705217, interest: ['Music', 'Gardening', 'Hiking'], photo: 'https://reqres.in/img/faces/2-image.jpg' }, \n\t\t{ id: 8, name: 'Lucas Ramirez', email: 'lucas.ramirez@example.com', date: '31/03/2023', phone: 9876543210, interest: ['Reading', 'Dancing', 'Crafting'], photo: 'https://reqres.in/img/faces/9-image.jpg' }, \n\t\t{ id: 9, name: 'Alexander Vela', email: 'alexander.vela@example.com', date: '07/09/2022', phone: 7654321098, interest: ['Music','Gardening','Photography'], photo: 'https://reqres.in/img/faces/8-image.jpg' }, \n\t\t{ id: 10, name: 'Michael Reyes', email: 'michael.reyes@example.com', date: '25/12/2021', phone: 5432109876, interest: ['Cooking','Crafting','Volunteering'], photo: 'https://reqres.in/img/faces/10-image.jpg' } \n] }}",
+          "{{ [ \n\t\t{ id: 1, name: 'Olivia Nguyen', email: 'olivia.nguyen@example.com', date: '15/05/2022', mobile_number: 9876543210, interest: ['Reading', 'Traveling','Photography'], photo: 'https://reqres.in/img/faces/7-image.jpg' }, \n\t\t{ id: 2, name: 'Liam Patel', email: 'liam.patel@example.com', date: '20/09/2021', mobile_number: 8765432109, interest: ['Cooking','Gardening','Hiking'], photo: 'https://reqres.in/img/faces/5-image.jpg' }, \n\t\t{ id: 3, name: 'Sophia Reyes', email: 'sophia.reyes@example.com', date: '01/01/2023', mobile_number: 7654321098, interest: ['Music','Dancing','Crafting'], photo: 'https://reqres.in/img/faces/3-image.jpg' }, \n\t\t{ id: 4, name: 'Jacob Hernandez', email: 'jacob.hernandez@example.com', date: '10/11/2022', mobile_number: 6543210987, interest: ['Reading', 'Traveling', 'Volunteering'], photo: 'https://reqres.in/img/faces/1-image.jpg' }, \n\t\t{ id: 5, name: 'William Sanchez', email: 'william.sanchez@example.com', date: '07/01/2021', mobile_number: 4321098765, interest: ['Music', 'Dancing', 'Hiking'], photo: 'https://reqres.in/img/faces/4-image.jpg' }, \n\t\t{ id: 6, name: 'Ethan Morales', email: 'ethan.morales@example.com', date: '05/11/2021', mobile_number: 2109876543, interest: ['Cooking', 'Traveling', 'Photography'], photo: 'https://reqres.in/img/faces/6-image.jpg' }, \n\t\t{ id: 7, name: 'Mia Tiana', email: 'mia.tiana@example.com', date: '21/11/2022', mobile_number: 1098705217, interest: ['Music', 'Gardening', 'Hiking'], photo: 'https://reqres.in/img/faces/2-image.jpg' }, \n\t\t{ id: 8, name: 'Lucas Ramirez', email: 'lucas.ramirez@example.com', date: '31/03/2023', mobile_number: 9876543210, interest: ['Reading', 'Dancing', 'Crafting'], photo: 'https://reqres.in/img/faces/9-image.jpg' }, \n\t\t{ id: 9, name: 'Alexander Vela', email: 'alexander.vela@example.com', date: '07/09/2022', mobile_number: 7654321098, interest: ['Music','Gardening','Photography'], photo: 'https://reqres.in/img/faces/8-image.jpg' }, \n\t\t{ id: 10, name: 'Michael Reyes', email: 'michael.reyes@example.com', date: '25/12/2021', mobile_number: 5432109876, interest: ['Cooking','Crafting','Volunteering'], photo: 'https://reqres.in/img/faces/10-image.jpg' } \n] }}",
       },
       useDynamicColumn: { value: '{{false}}' },
       columnData: {
@@ -591,8 +590,8 @@ export const tableConfig = {
             columnSize: 130,
           },
           {
-            name: 'phone',
-            key: 'phone',
+            name: 'mobile_number',
+            key: 'mobile_number',
             id: '9c2e3c40572a4aefb8e179ee39a0e1ac9dc2b2e6634be56e1c05be13c3d1de56',
             autogenerated: true,
             fxActiveFields: [],
diff --git a/server/src/modules/apps/services/widget-config/tabs.js b/server/src/modules/apps/services/widgets/tabs.js
similarity index 96%
rename from server/src/modules/apps/services/widget-config/tabs.js
rename to server/src/modules/apps/services/widgets/tabs.js
index a397979a3e..3f55c7ea90 100644
--- a/server/src/modules/apps/services/widget-config/tabs.js
+++ b/server/src/modules/apps/services/widgets/tabs.js
@@ -109,11 +109,11 @@ export const tabsConfig = {
   events: { onTabSwitch: { displayName: 'On tab switch' } },
   styles: {
     highlightColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Highlight color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     visibility: {
@@ -174,7 +174,7 @@ export const tabsConfig = {
     },
     events: [],
     styles: {
-      highlightColor: { value: '#375FCF' },
+      highlightColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       tabWidth: { value: 'auto' },
diff --git a/server/src/modules/apps/services/widget-config/tags.js b/server/src/modules/apps/services/widgets/tags.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/tags.js
rename to server/src/modules/apps/services/widgets/tags.js
diff --git a/server/src/modules/apps/services/widget-config/text.js b/server/src/modules/apps/services/widgets/text.js
similarity index 99%
rename from server/src/modules/apps/services/widget-config/text.js
rename to server/src/modules/apps/services/widgets/text.js
index ada530d127..8ed1edffd1 100644
--- a/server/src/modules/apps/services/widget-config/text.js
+++ b/server/src/modules/apps/services/widgets/text.js
@@ -105,7 +105,7 @@ export const textConfig = {
       accordian: 'Text',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: {
         schema: { type: 'string' },
@@ -185,7 +185,7 @@ export const textConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -195,7 +195,7 @@ export const textConfig = {
       colorPickerPosition: 'top',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },
diff --git a/server/src/modules/apps/services/widget-config/textarea.js b/server/src/modules/apps/services/widgets/textarea.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/textarea.js
rename to server/src/modules/apps/services/widgets/textarea.js
diff --git a/server/src/modules/apps/services/widget-config/textinput.js b/server/src/modules/apps/services/widgets/textinput.js
similarity index 96%
rename from server/src/modules/apps/services/widget-config/textinput.js
rename to server/src/modules/apps/services/widgets/textinput.js
index 83efe72b87..e259ecddd0 100644
--- a/server/src/modules/apps/services/widget-config/textinput.js
+++ b/server/src/modules/apps/services/widgets/textinput.js
@@ -80,7 +80,7 @@ export const textinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -132,13 +132,13 @@ export const textinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
@@ -146,17 +146,17 @@ export const textinputConfig = {
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -169,7 +169,7 @@ export const textinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
       accordian: 'field',
@@ -283,7 +283,7 @@ export const textinputConfig = {
     styles: {
       textColor: { value: '#1B1F24' },
       borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
       errTextColor: { value: '#D72D39' },
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },
diff --git a/server/src/modules/apps/services/widget-config/timeline.js b/server/src/modules/apps/services/widgets/timeline.js
similarity index 80%
rename from server/src/modules/apps/services/widget-config/timeline.js
rename to server/src/modules/apps/services/widgets/timeline.js
index 6ece608f5c..63776f0b99 100644
--- a/server/src/modules/apps/services/widget-config/timeline.js
+++ b/server/src/modules/apps/services/widgets/timeline.js
@@ -48,7 +48,7 @@ export const timelineConfig = {
     properties: {
       data: {
         value:
-          "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: '#4d72fa'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: '#4d72fa'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: '#4d72fa'} \n] }}",
+          "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: 'var(--primary-brand)'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: 'var(--primary-brand)'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: 'var(--primary-brand)'} \n] }}",
       },
       hideDate: { value: '{{false}}' },
     },
diff --git a/server/src/modules/apps/services/widget-config/timepicker.js b/server/src/modules/apps/services/widgets/timepicker.js
similarity index 97%
rename from server/src/modules/apps/services/widget-config/timepicker.js
rename to server/src/modules/apps/services/widgets/timepicker.js
index 79a3d05d4e..a5a1fb6b06 100644
--- a/server/src/modules/apps/services/widget-config/timepicker.js
+++ b/server/src/modules/apps/services/widgets/timepicker.js
@@ -164,7 +164,7 @@ export const timePickerConfig = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -215,31 +215,31 @@ export const timePickerConfig = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -252,7 +252,7 @@ export const timePickerConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {
diff --git a/server/src/modules/apps/services/widget-config/timer.js b/server/src/modules/apps/services/widgets/timer.js
similarity index 100%
rename from server/src/modules/apps/services/widget-config/timer.js
rename to server/src/modules/apps/services/widgets/timer.js
diff --git a/server/src/modules/apps/services/widget-config/toggleswitch.js b/server/src/modules/apps/services/widgets/toggleswitch.js
similarity index 93%
rename from server/src/modules/apps/services/widget-config/toggleswitch.js
rename to server/src/modules/apps/services/widgets/toggleswitch.js
index ec3a97450d..bd646a47f3 100644
--- a/server/src/modules/apps/services/widget-config/toggleswitch.js
+++ b/server/src/modules/apps/services/widgets/toggleswitch.js
@@ -32,14 +32,14 @@ export const toggleswitchConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
       },
     },
     toggleSwitchColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Toggle switch color',
       validation: {
         schema: { type: 'string' },
@@ -75,7 +75,7 @@ export const toggleswitchConfig = {
     events: [],
     styles: {
       textColor: { value: '' },
-      toggleSwitchColor: { value: '' },
+      toggleSwitchColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },
diff --git a/server/src/modules/apps/services/widget-config/toggleswitchv2.js b/server/src/modules/apps/services/widgets/toggleswitchv2.js
similarity index 95%
rename from server/src/modules/apps/services/widget-config/toggleswitchv2.js
rename to server/src/modules/apps/services/widgets/toggleswitchv2.js
index 6753fbb50d..4bc21f3a86 100644
--- a/server/src/modules/apps/services/widget-config/toggleswitchv2.js
+++ b/server/src/modules/apps/services/widgets/toggleswitchv2.js
@@ -71,7 +71,7 @@ export const toggleSwitchV2Config = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text Color',
       validation: {
         schema: { type: 'string' },
@@ -79,7 +79,7 @@ export const toggleSwitchV2Config = {
       accordian: 'label',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -87,7 +87,7 @@ export const toggleSwitchV2Config = {
       accordian: 'switch',
     },
     toggleSwitchColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Checked color',
       validation: {
         schema: { type: 'string' },
@@ -95,7 +95,7 @@ export const toggleSwitchV2Config = {
       accordian: 'switch',
     },
     uncheckedColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Unchecked color',
       validation: {
         schema: { type: 'string' },
@@ -103,7 +103,7 @@ export const toggleSwitchV2Config = {
       accordian: 'switch',
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -181,7 +181,7 @@ export const toggleSwitchV2Config = {
     events: [],
     styles: {
       textColor: { value: '#1B1F24' },
-      toggleSwitchColor: { value: '#4368E3' }, //keeping same key for backward comopatibility
+      toggleSwitchColor: { value: 'var(--primary-brand)' }, //keeping same key for backward comopatibility
       uncheckedColor: { value: '#E4E7EB' },
       borderColor: { value: '#E4E7EB' },
       handleColor: { value: '#FFFFFF' },
diff --git a/server/src/modules/apps/services/widget-config/treeSelect.js b/server/src/modules/apps/services/widgets/treeSelect.js
similarity index 93%
rename from server/src/modules/apps/services/widget-config/treeSelect.js
rename to server/src/modules/apps/services/widgets/treeSelect.js
index 1d7485b47a..898f0b3ed0 100644
--- a/server/src/modules/apps/services/widget-config/treeSelect.js
+++ b/server/src/modules/apps/services/widgets/treeSelect.js
@@ -23,8 +23,8 @@ export const treeSelectConfig = {
     onUnCheck: { displayName: 'On uncheck' },
   },
   styles: {
-    textColor: { type: 'color', displayName: 'Text Color' },
-    checkboxColor: { type: 'color', displayName: 'Checkbox color' },
+    textColor: { type: 'colorSwatches', displayName: 'Text Color' },
+    checkboxColor: { type: 'colorSwatches', displayName: 'Checkbox color' },
     visibility: { type: 'toggle', displayName: 'Visibility' },
     disabledState: { type: 'toggle', displayName: 'Disable' },
   },
@@ -71,7 +71,7 @@ export const treeSelectConfig = {
     events: [],
     styles: {
       textColor: { value: '' },
-      checkboxColor: { value: '' },
+      checkboxColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },
diff --git a/server/src/modules/apps/services/widget-config/verticalDivider.js b/server/src/modules/apps/services/widgets/verticalDivider.js
similarity index 97%
rename from server/src/modules/apps/services/widget-config/verticalDivider.js
rename to server/src/modules/apps/services/widgets/verticalDivider.js
index 443526c3b8..e43b81adf7 100644
--- a/server/src/modules/apps/services/widget-config/verticalDivider.js
+++ b/server/src/modules/apps/services/widgets/verticalDivider.js
@@ -15,7 +15,7 @@ export const verticalDividerConfig = {
   events: {},
   styles: {
     dividerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Divider color',
       validation: {
         schema: { type: 'string' },