diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx
index 23636aec50..6956236919 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx
@@ -139,6 +139,20 @@ export function Steps({ componentMeta, darkMode, ...restProps }) {
     return (
       <Popover className={`${darkMode && 'dark-theme theme-dark'}`} style={{ minWidth: '248px' }}>
         <Popover.Body>
+          <div className="field mb-3" data-cy={`input-and-label-column-name`}>
+            <label data-cy={`label-column-name`} className="font-weight-500 mb-1 font-size-12">
+              {'Id'}
+            </label>
+            <CodeHinter
+              type={'basic'}
+              initialValue={item?.id + ''}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              placeholder={'Option label'}
+              onChange={(value) => handleLabelChange('id', value, index)}
+            />
+          </div>
           <div className="field mb-3" data-cy={`input-and-label-column-name`}>
             <label data-cy={`label-column-name`} className="font-weight-500 mb-1 font-size-12">
               {'Label'}
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
index bb75948fc9..11652f2f65 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
@@ -31,7 +31,7 @@ export const stepsConfig = {
       validation: {
         schema: {
           type: 'array',
-          element: { type: 'object', object: { id: { type: 'number' } } },
+          element: { type: 'object' },
         },
         defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
       },
@@ -97,12 +97,12 @@ export const stepsConfig = {
     {
       handle: 'setVisibility',
       displayName: 'Set visibility',
-      params: [
-        {
-          handle: 'option',
-          displayName: 'Option',
-        },
-      ],
+      params: [{ handle: 'visible', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisabled',
+      displayName: 'Set disabled',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{true}}', type: 'toggle' }],
     },
     {
       handle: 'resetSteps',
diff --git a/frontend/src/Editor/Components/Steps.jsx b/frontend/src/Editor/Components/Steps.jsx
index e161e12440..16214f2251 100644
--- a/frontend/src/Editor/Components/Steps.jsx
+++ b/frontend/src/Editor/Components/Steps.jsx
@@ -46,6 +46,22 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
     }
   };
 
+  useEffect(() => {
+    setExposedVariable('isVisible', isVisible);
+  }, [isVisible]);
+
+  useEffect(() => {
+    setIsVisible(visibility);
+  }, [visibility]);
+
+  useEffect(() => {
+    setExposedVariable('isDisabled', isDisabled);
+  }, [isDisabled]);
+
+  useEffect(() => {
+    setIsDisabled(!disabledState);
+  }, [disabledState]);
+
   useEffect(() => {
     setExposedVariable('setStep', (stepId) => setActiveStepId(stepId));
     setExposedVariable('setVisibility', (visibility) => setIsVisible(visibility));
@@ -56,6 +72,10 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
     setExposedVariable('currentStepId', activeStepId);
   }, [activeStepId]);
 
+  useEffect(() => {
+    setActiveStepId(currentStepId);
+  }, [currentStepId]);
+
   useEffect(() => {
     setExposedVariable('steps', steps);
     setExposedVariable('setStepVisible', (stepId, visibility) => {
@@ -87,27 +107,19 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
     });
   }, [JSON.stringify(steps), JSON.stringify(stepsArr)]);
 
-  useEffect(() => {
-    setExposedVariable('isVisible', isVisible);
-  }, [isVisible]);
-
-  useEffect(() => {
-    setIsVisible(visibility);
-  }, [visibility]);
-
-  useEffect(() => {
-    setExposedVariable('isDisabled', isDisabled);
-  }, [isDisabled]);
-
-  useEffect(() => {
-    setIsDisabled(!disabledState);
-  }, [disabledState]);
-
   return (
     isVisible && (
       <div
         className={`steps ${theme == 'numbers' && 'steps-counter '}`}
-        style={{ color: textColor, height, boxShadow, opacity: isDisabled ? 0.5 : 1 }}
+        style={{
+          color: textColor,
+          height,
+          boxShadow,
+          opacity: isDisabled ? 0.5 : 1,
+          ...(theme === 'plain' && {
+            alignItems: 'center',
+          }),
+        }}
         data-cy={dataCy}
       >
         {filteredSteps?.map((item, index) => {
diff --git a/frontend/src/Editor/WidgetManager/configs/steps.js b/frontend/src/Editor/WidgetManager/configs/steps.js
index a39c634919..6d2d6c92ec 100644
--- a/frontend/src/Editor/WidgetManager/configs/steps.js
+++ b/frontend/src/Editor/WidgetManager/configs/steps.js
@@ -4,9 +4,30 @@ export const stepsConfig = {
   description: 'Step-by-step navigation aid',
   component: 'Steps',
   properties: {
+    variant: {
+      type: 'switch',
+      displayName: 'Variant',
+      validation: { schema: { type: 'string' }, defaultValue: 'titles' },
+      options: [
+        { displayName: 'Label', value: 'titles' },
+        { displayName: 'Numbers', value: 'numbers' },
+        { displayName: 'Plain', value: 'plain' },
+      ],
+      accordian: 'label',
+    },
+    schema: {
+      type: 'code',
+      displayName: 'Schema',
+      conditionallyRender: {
+        key: 'advanced',
+        value: true,
+      },
+      accordian: 'Options',
+    },
     steps: {
       type: 'code',
-      displayName: 'Steps',
+      displayName: '',
+      showLabel: false,
       validation: {
         schema: {
           type: 'array',
@@ -15,6 +36,27 @@ export const stepsConfig = {
         defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
       },
     },
+    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',
+    // },
+    advanced: {
+      type: 'toggle',
+      displayName: 'Dynamic options',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+      accordian: 'Options',
+    },
     currentStep: {
       type: 'code',
       displayName: 'Current step',
@@ -30,6 +72,7 @@ export const stepsConfig = {
         schema: { type: 'boolean' },
         defaultValue: false,
       },
+      section: 'additionalActions',
     },
   },
   defaultSize: {
@@ -40,46 +83,132 @@ export const stepsConfig = {
     showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
     showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
   },
+  actions: [
+    {
+      handle: 'setStep',
+      displayName: 'Set step',
+      params: [
+        {
+          handle: 'option',
+          displayName: 'Option',
+        },
+      ],
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [
+        {
+          handle: 'option',
+          displayName: 'Option',
+        },
+      ],
+    },
+    {
+      handle: 'setDisabled',
+      displayName: 'Set disabled',
+      params: [
+        {
+          handle: 'option',
+          displayName: 'Option',
+        },
+      ],
+    },
+    {
+      handle: 'resetSteps',
+      displayName: 'Reset steps',
+      params: [],
+    },
+    {
+      handle: 'setStepVisible',
+      displayName: 'Set step visible',
+      params: [
+        {
+          handle: 'id',
+          displayName: 'Step id',
+        },
+        {
+          handle: 'visibility',
+          displayName: 'visibility',
+        },
+      ],
+    },
+    {
+      handle: 'setStepDisable',
+      displayName: 'Set step disable',
+      params: [
+        {
+          handle: 'id',
+          displayName: 'Step id',
+        },
+        {
+          handle: 'disabled',
+          displayName: 'disabled',
+        },
+      ],
+    },
+  ],
   events: {
     onSelect: { displayName: 'On select' },
   },
   styles: {
-    color: {
+    incompletedAccent: {
       type: 'color',
-      displayName: 'Color',
+      displayName: 'Incompleted accent',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: '#E4E7EB',
       },
+      accordian: 'steps',
     },
-    textColor: {
+    incompletedLabel: {
       type: 'color',
-      displayName: 'Text color',
+      displayName: 'Incompleted label',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: '#1B1F24',
       },
+      accordian: 'steps',
     },
-    theme: {
-      type: 'select',
-      displayName: 'Theme',
+    completedAccent: {
+      type: 'color',
+      displayName: 'Completed accent',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#4368E3',
+      },
+      accordian: 'steps',
+    },
+    completedLabel: {
+      type: 'color',
+      displayName: 'Completed label',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#FBFCFD',
+      },
+      accordian: 'steps',
+    },
+    currentStepLabel: {
+      type: 'color',
+      displayName: 'Current step label',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#1B1F24',
+      },
+      accordian: 'steps',
+    },
+    padding: {
+      type: 'switch',
+      displayName: 'Padding',
+      validation: {
+        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+        defaultValue: 'default',
+      },
       options: [
-        { name: 'titles', value: 'titles' },
-        { name: 'numbers', value: 'numbers' },
-        { name: 'plain', value: 'plain' },
+        { displayName: 'Default', value: 'default' },
+        { displayName: 'None', value: 'none' },
       ],
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: 'titles',
-      },
-    },
-    visibility: {
-      type: 'toggle',
-      displayName: 'Visibility',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
+      accordian: 'container',
     },
   },
   exposedVariables: {
@@ -92,17 +221,35 @@ export const stepsConfig = {
     },
     properties: {
       steps: {
-        value: `{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1},{ name: 'step 2', tooltip: 'some tooltip', id: 2},{ name: 'step 3', tooltip: 'some tooltip', id: 3},{ name: 'step 4', tooltip: 'some tooltip', id: 4},{ name: 'step 5', tooltip: 'some tooltip', id: 5}]}}`,
+        value: [
+          { name: 'step 1', tooltip: 'some tooltip', id: 1, visible: { value: true }, disabled: { value: false } },
+          { name: 'step 2', tooltip: 'some tooltip', id: 2, visible: { value: true }, disabled: { value: false } },
+          { name: 'step 3', tooltip: 'some tooltip', id: 3, visible: { value: true }, disabled: { value: false } },
+          { name: 'step 4', tooltip: 'some tooltip', id: 4, visible: { value: true }, disabled: { value: false } },
+          { name: 'step 5', tooltip: 'some tooltip', id: 5, visible: { value: true }, disabled: { value: false } },
+        ],
       },
+      schema: {
+        value: `{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: 'some tooltip', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: 'some tooltip', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: 'some tooltip', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: 'some tooltip', id: 5,visible: true, disabled: false}]}}`,
+      },
+      variant: { value: 'titles' },
       currentStep: { value: '{{3}}' },
       stepsSelectable: { value: true },
+      advanced: { value: `{{false}}` },
+      // disabledState: { value: '{{false}}' },
+      visibility: { value: '{{true}}' },
     },
     events: [],
     styles: {
       visibility: { value: '{{true}}' },
-      theme: { value: 'titles' },
       color: { value: '' },
       textColor: { value: '' },
+      padding: { value: 'default' },
+      incompletedAccent: { value: '#E4E7EB' },
+      incompletedLabel: { value: '#1B1F24' },
+      completedAccent: { value: '#4368E3' },
+      completedLabel: { value: '#1B1F24' },
+      currentStepLabel: { value: '#1B1F24' },
     },
   },
 };
diff --git a/server/ee b/server/ee
index 1da04eef69..26447ec13d 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit 1da04eef696345ce9f35d42af92e5d6de992cd85
+Subproject commit 26447ec13d91119d001319ac940264bbc39a3b54
diff --git a/server/src/modules/apps/services/widget-config/steps.js b/server/src/modules/apps/services/widget-config/steps.js
index bb75948fc9..11652f2f65 100644
--- a/server/src/modules/apps/services/widget-config/steps.js
+++ b/server/src/modules/apps/services/widget-config/steps.js
@@ -31,7 +31,7 @@ export const stepsConfig = {
       validation: {
         schema: {
           type: 'array',
-          element: { type: 'object', object: { id: { type: 'number' } } },
+          element: { type: 'object' },
         },
         defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
       },
@@ -97,12 +97,12 @@ export const stepsConfig = {
     {
       handle: 'setVisibility',
       displayName: 'Set visibility',
-      params: [
-        {
-          handle: 'option',
-          displayName: 'Option',
-        },
-      ],
+      params: [{ handle: 'visible', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisabled',
+      displayName: 'Set disabled',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{true}}', type: 'toggle' }],
     },
     {
       handle: 'resetSteps',