diff --git a/frontend/package.json b/frontend/package.json
index 45d94532f5..3821a370f5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -58,6 +58,7 @@
     "dotenv": "^16.0.3",
     "draft-js": "^0.11.7",
     "draft-js-export-html": "^1.4.1",
+    "draft-js-import-html": "^1.4.1",
     "driver.js": "^0.9.8",
     "emoji-mart": "^5.5.2",
     "file-loader": "^6.2.0",
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
index 913d3a22df..5f362ba0b3 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
@@ -232,6 +232,7 @@ export const getAllChildComponents = (allComponents, parentId) => {
       const childTabId = componentParentId.split('-').at(-1);
       if (componentParentId === `${parentId}-${childTabId}`) {
         childComponent.isParentTabORCalendar = true;
+        childComponent.events = useStore.getState().eventsSlice.getEventsByComponentsId(componentId);
         childComponents.push(childComponent);
         // Recursively find children of the current child component
         const childrenOfChild = getAllChildComponents(allComponents, componentId);
@@ -242,6 +243,7 @@ export const getAllChildComponents = (allComponents, parentId) => {
     if (componentParentId === parentId) {
       let childComponent = deepClone(allComponents[componentId]);
       childComponent.id = componentId;
+      childComponent.events = useStore.getState().eventsSlice.getEventsByComponentsId(componentId);
       childComponents.push(childComponent);
 
       // Recursively find children of the current child component
diff --git a/frontend/src/AppBuilder/QueryManager/Components/ChangeDataSource.jsx b/frontend/src/AppBuilder/QueryManager/Components/ChangeDataSource.jsx
index 244668cf8a..85958cd97b 100644
--- a/frontend/src/AppBuilder/QueryManager/Components/ChangeDataSource.jsx
+++ b/frontend/src/AppBuilder/QueryManager/Components/ChangeDataSource.jsx
@@ -1,8 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Select from '@/_ui/Select';
 import { decodeEntities } from '@/_helpers/utils';
+import usePopoverObserver from '@/AppBuilder/_hooks/usePopoverObserver';
 
 export const ChangeDataSource = ({ dataSources, onChange, value, isVersionReleased }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  usePopoverObserver(
+    document.getElementsByClassName('query-details')[0],
+    document.querySelector('.change-data-source-select.react-select__control'),
+    document.querySelector('.change-data-source-select.react-select__menu'),
+    isMenuOpen,
+    () => (document.querySelector('.change-data-source-select.react-select__menu').style.display = 'block'),
+    () => (document.querySelector('.change-data-source-select.react-select__menu').style.display = 'none')
+  );
+
   return (
     <Select
       className="w-100"
@@ -14,6 +26,13 @@ export const ChangeDataSource = ({ dataSources, onChange, value, isVersionReleas
       }}
       useMenuPortal={true}
       isDisabled={isVersionReleased}
+      customClassPrefix="change-data-source-select"
+      onMenuOpen={() => {
+        setIsMenuOpen(true);
+      }}
+      onMenuClose={() => {
+        setIsMenuOpen(false);
+      }}
     />
   );
 };
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/index.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/index.jsx
index 4c89ad849e..547aa5452c 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/index.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/index.jsx
@@ -31,6 +31,9 @@ class Restapi extends React.Component {
       codeHinterHeight: 32, // Default height
     };
     this.codeHinterRef = React.createRef();
+    this.isMenuOpenRef = React.createRef();
+    this.prevIsMenuOpenRef = React.createRef(false);
+    this.intersectionObserver = null;
     this.resizeObserver = null;
   }
 
@@ -47,6 +50,9 @@ class Restapi extends React.Component {
     if (this.codeHinterRef.current && !this.resizeObserver) {
       this.setupResizeObserver();
     }
+    if (!this.intersectionObserver) {
+      this.setupIntersectionObserver();
+    }
   }
 
   componentDidMount() {
@@ -75,6 +81,7 @@ class Restapi extends React.Component {
       }, 1000);
 
       this.setupResizeObserver();
+      this.setupIntersectionObserver();
     } catch (error) {
       console.log(error);
     }
@@ -84,6 +91,9 @@ class Restapi extends React.Component {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+    }
   }
 
   setupResizeObserver() {
@@ -132,6 +142,33 @@ class Restapi extends React.Component {
     this.resizeObserver.observe(element);
   }
 
+  setupIntersectionObserver() {
+    const container = document.getElementsByClassName('query-details')[0];
+    const trigger = document.querySelector('.restapi-method-select.react-select__control');
+
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+    }
+
+    this.intersectionObserver = new IntersectionObserver(
+      ([entry]) => {
+        const popover = document.querySelector('.restapi-method-select.react-select__menu');
+        if (entry.isIntersecting) {
+          if (this.prevIsMenuOpenRef.current) {
+            popover.style.display = 'block';
+            this.prevIsMenuOpenRef.current = false;
+          }
+        } else if (this.isMenuOpenRef.current) {
+          popover.style.display = 'none';
+          this.prevIsMenuOpenRef.current = true;
+        }
+      },
+      { root: container, threshold: [0.5] }
+    );
+
+    this.intersectionObserver.observe(trigger);
+  }
+
   initizalizeRetryNetworkErrorsToggle = () => {
     const isRetryNetworkErrorToggleUnused = this.props.options.retry_network_errors === null;
     if (isRetryNetworkErrorToggleUnused) {
@@ -287,6 +324,13 @@ class Restapi extends React.Component {
                     height={32}
                     styles={this.customSelectStyles(this.props.darkMode, 91)}
                     useCustomStyles={true}
+                    customClassPrefix="restapi-method-select"
+                    onMenuOpen={() => {
+                      this.isMenuOpenRef.current = true;
+                    }}
+                    onMenuClose={() => {
+                      this.isMenuOpenRef.current = false;
+                    }}
                   />
                 </div>
                 <div
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/Workflows.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/Workflows.jsx
index 9aa77601e5..dcbf7b46ce 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/Workflows.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/Workflows.jsx
@@ -5,14 +5,25 @@ import CodeHinter from '@/AppBuilder/CodeEditor';
 import './workflows-query.scss';
 import { v4 as uuidv4 } from 'uuid';
 import useStore from '@/AppBuilder/_stores/store';
+import usePopoverObserver from '@/AppBuilder/_hooks/usePopoverObserver';
 
 export function Workflows({ options, optionsChanged, currentState }) {
   const [workflowOptions, setWorkflowOptions] = useState([]);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [_selectedWorkflowId, setSelectedWorkflowId] = useState(undefined);
   const [params, setParams] = useState([...(options.params ?? [{ key: '', value: '' }])]);
 
   const appId = useStore((state) => state.app.appId);
 
+  usePopoverObserver(
+    document.getElementsByClassName('query-details')[0],
+    document.querySelector('.workflow-select.react-select__control'),
+    document.querySelector('.workflow-select.react-select__menu'),
+    isMenuOpen,
+    () => (document.querySelector('.workflow-select.react-select__menu').style.display = 'block'),
+    () => (document.querySelector('.workflow-select.react-select__menu').style.display = 'none')
+  );
+
   useEffect(() => {
     appsService.getWorkflows(appId).then(({ workflows }) => {
       setWorkflowOptions(
@@ -50,6 +61,13 @@ export function Workflows({ options, optionsChanged, currentState }) {
         customWrap={true}
         width="300px"
         menuPlacement="bottom"
+        customClassPrefix="workflow-select"
+        onMenuOpen={() => {
+          setIsMenuOpen(true);
+        }}
+        onMenuClose={() => {
+          setIsMenuOpen(false);
+        }}
       />
       <label className="my-2">Params</label>
       <div className="grid"></div>
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx
new file mode 100644
index 0000000000..314fe8ba89
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx
@@ -0,0 +1,538 @@
+import React, { useState, useEffect } from 'react';
+import Accordion from '@/_ui/Accordion';
+import { EventManager } from '../EventManager';
+import { renderElement } from '../Utils';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+import List from '@/ToolJetUI/List/List';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import useStore from '@/AppBuilder/_stores/store';
+import CodeHinter from '@/AppBuilder/CodeEditor';
+import AddNewButton from '@/ToolJetUI/Buttons/AddNewButton/AddNewButton';
+import ListGroup from 'react-bootstrap/ListGroup';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+import SortableList from '@/_components/SortableList';
+import Trash from '@/_ui/Icon/solidIcons/Trash';
+import { shallow } from 'zustand/shallow';
+import Switch from '@/Editor/CodeBuilder/Elements/Switch';
+import { usePrevious } from '@dnd-kit/utilities';
+
+export function Steps({ componentMeta, darkMode, ...restProps }) {
+  const {
+    layoutPropertyChanged,
+    component,
+    dataQueries,
+    paramUpdated,
+    currentState,
+    eventsChanged,
+    apps,
+    allComponents,
+    pages,
+  } = restProps;
+  const getResolvedValue = useStore((state) => state.getResolvedValue, shallow);
+
+  const isDynamicOptionsEnabled = getResolvedValue(component?.component?.definition?.properties?.advanced?.value);
+  const variant = component?.component?.definition?.properties?.variant?.value;
+  const prevVariant = usePrevious(variant)
+  console.log("variant", component?.component?.definition);
+
+
+  const [options, setOptions] = useState([]);
+  const [hoveredOptionIndex, setHoveredOptionIndex] = useState(null);
+  let properties = [];
+  let additionalActions = [];
+  let optionsProperties = [];
+
+  for (const [key] of Object.entries(componentMeta?.properties)) {
+    if (componentMeta?.properties[key]?.section === 'additionalActions') {
+      additionalActions.push(key);
+    } else if (componentMeta?.properties[key]?.accordian === 'Options') {
+      optionsProperties.push(key);
+    } else {
+      properties.push(key);
+    }
+  }
+
+  // the default style of "number" & "titles" type are different for completed label
+  // TODO: Need to revisit this logic when text custom themes are implemented
+  useEffect(() => {
+    const completedLabelColor = component?.component?.definition?.styles?.completedLabel?.value;
+    if (variant !== prevVariant) {
+      if (variant === "numbers" && completedLabelColor === "#1B1F24") {
+        paramUpdated({ name: 'completedLabel' }, 'value', "#FFFFFF", 'styles', false, {});
+      } else if (variant === "titles" && completedLabelColor === "#FFFFFF") {
+        paramUpdated({ name: 'completedLabel' }, 'value', "#1B1F24", 'styles', false, {});
+      }
+    }
+
+  }, [variant])
+
+  const getItemStyle = (isDragging, draggableStyle) => ({
+    userSelect: 'none',
+    ...draggableStyle,
+  });
+
+  const updateAllOptionsParams = (options, props) => {
+    paramUpdated({ name: 'steps' }, 'value', options, 'properties', false, props);
+  };
+
+  const generateNewOptions = () => {
+    let found = false;
+    let label = '';
+    let currentNumber = options.length + 1;
+    while (!found) {
+      label = `step ${currentNumber}`;
+      if (options.find((option) => option.name === label) === undefined) {
+        found = true;
+      }
+      currentNumber += 1;
+    }
+    return {
+      name: label,
+      id: currentNumber - 1,
+      tooltip: label,
+      visible: { value: '{{true}}' },
+      disabled: { value: '{{false}}' },
+    };
+  };
+
+  const handleAddOption = () => {
+    let _option = generateNewOptions();
+    const _items = [...options, _option];
+    setOptions(_items);
+    updateAllOptionsParams(_items);
+  };
+  const handleDeleteOption = (index) => {
+    const _items = options.filter((option, i) => i !== index);
+    setOptions(_items);
+    updateAllOptionsParams(_items, { isParamFromDropdownOptions: true });
+  };
+
+  const handleLabelChange = (propertyName, value, index) => {
+    const _options = options.map((option, i) => {
+      if (i === index) {
+        return {
+          ...option,
+          [propertyName]: value,
+        };
+      }
+      return option;
+    });
+    setOptions(_options);
+    updateAllOptionsParams(_options);
+  };
+
+  const reorderOptions = async (startIndex, endIndex) => {
+    const result = [...options];
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    setOptions(result);
+    updateAllOptionsParams(result);
+  };
+
+  const onDragEnd = ({ source, destination }) => {
+    if (!destination || source?.index === destination?.index) {
+      return;
+    }
+    reorderOptions(source.index, destination.index);
+  };
+
+  const handleOnFxPress = (active, index, key) => {
+    const _options = options.map((option, i) => {
+      if (i === index) {
+        return {
+          ...option,
+          [key]: {
+            ...option[key],
+            fxActive: active,
+          },
+        };
+      }
+      return option;
+    });
+    setOptions(_options);
+    updateAllOptionsParams(_options);
+  };
+
+  const _renderOverlay = (item, index) => {
+    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'}
+            </label>
+            <CodeHinter
+              type={'basic'}
+              initialValue={item?.name}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              placeholder={'Option label'}
+              onChange={(value) => handleLabelChange('name', 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">
+              {'Tooltip'}
+            </label>
+            <CodeHinter
+              type={'basic'}
+              initialValue={item?.tooltip + ''}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              placeholder={'Tooltip'}
+              onChange={(value) => handleLabelChange('tooltip', value, index)}
+            />
+          </div>
+          <div className="field mb-2" data-cy={`input-and-label-column-name`}>
+            <CodeHinter
+              initialValue={item?.visible?.value}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              component={component}
+              type={'fxEditor'}
+              paramLabel={'Visibility'}
+              onChange={(value) =>
+                handleLabelChange(
+                  'visible',
+                  {
+                    value,
+                  },
+                  index
+                )
+              }
+              paramName={'visible'}
+              onFxPress={(active) => handleOnFxPress(active, index, 'visible')}
+              fxActive={item?.visible?.fxActive}
+              fieldMeta={{
+                type: 'toggle',
+                displayName: 'Make editable',
+              }}
+              paramType={'toggle'}
+            />
+          </div>
+          <div className="field" data-cy={`input-and-label-column-name`}>
+            <CodeHinter
+              initialValue={item?.disabled?.value}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              component={component}
+              type={'fxEditor'}
+              paramLabel={'Disable'}
+              paramName={'disable'}
+              onChange={(value) => handleLabelChange('disabled', { value }, index)}
+              onFxPress={(active) => handleOnFxPress(active, index, 'disabled')}
+              fxActive={item?.disabled?.fxActive}
+              fieldMeta={{
+                type: 'toggle',
+                displayName: 'Make editable',
+              }}
+              paramType={'toggle'}
+            />
+          </div>
+        </Popover.Body>
+      </Popover>
+    );
+  };
+  const _renderOptions = () => {
+    return (
+      <List style={{ marginBottom: '20px' }}>
+        <DragDropContext
+          onDragEnd={(result) => {
+            onDragEnd(result);
+          }}
+        >
+          <Droppable droppableId="droppable">
+            {({ innerRef, droppableProps, placeholder }) => (
+              <div className="w-100" {...droppableProps} ref={innerRef}>
+                {options?.map((item, index) => {
+                  return (
+                    <Draggable key={item.name} draggableId={item.name} index={index}>
+                      {(provided, snapshot) => (
+                        <div
+                          key={index}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
+                        >
+                          <OverlayTrigger
+                            trigger="click"
+                            placement="left"
+                            rootClose
+                            overlay={_renderOverlay(item, index)}
+                          >
+                            <div key={item.name + item.id}>
+                              <ListGroup.Item
+                                style={{ marginBottom: '8px', backgroundColor: 'var(--slate3)' }}
+                                onMouseEnter={() => setHoveredOptionIndex(index)}
+                                onMouseLeave={() => setHoveredOptionIndex(null)}
+                                {...restProps}
+                              >
+                                <div className="row">
+                                  <div className="col-auto d-flex align-items-center">
+                                    <SortableList.DragHandle show />
+                                  </div>
+                                  <div className="col text-truncate cursor-pointer" style={{ padding: '0px' }}>
+                                    {getResolvedValue(item.name)}
+                                  </div>
+                                  <div className="col-auto">
+                                    {index === hoveredOptionIndex && (
+                                      <ButtonSolid
+                                        variant="danger"
+                                        size="xs"
+                                        className={'delete-icon-btn'}
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          handleDeleteOption(index);
+                                        }}
+                                      >
+                                        <span className="d-flex">
+                                          <Trash fill={'var(--tomato9)'} width={12} />
+                                        </span>
+                                      </ButtonSolid>
+                                    )}
+                                  </div>
+                                </div>
+                              </ListGroup.Item>
+                            </div>
+                          </OverlayTrigger>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })}
+                {placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+        <AddNewButton onClick={handleAddOption} dataCy="add-new-dropdown-option" className="mt-0">
+          Add new option
+        </AddNewButton>
+      </List>
+    );
+  };
+
+  const isDynamicStepsEnabled = getResolvedValue(component?.component?.definition?.properties?.advanced?.value);
+  useEffect(() => {
+    setOptions(constructSteps());
+  }, [component?.id, isDynamicStepsEnabled]);
+
+  const constructSteps = () => {
+    try {
+      let optionsValue = isDynamicOptionsEnabled
+        ? component?.component?.definition?.properties?.schema?.value
+        : component?.component?.definition?.properties?.steps?.value;
+      let options = [];
+
+      if (isDynamicOptionsEnabled || typeof optionsValue === 'string') {
+        options = getResolvedValue(optionsValue);
+      } else {
+        options = optionsValue?.map((option) => option);
+      }
+      return options.map((option) => {
+        const newOption = { ...option };
+
+        Object.keys(option).forEach((key) => {
+          if (typeof option[key]?.value === 'boolean') {
+            newOption[key]['value'] = `{{${option[key]?.value}}}`;
+          }
+        });
+
+        if (!('visible' in newOption)) {
+          newOption['visible'] = { value: '{{true}}' };
+        }
+        return newOption;
+      });
+    } catch (error) {
+      return [];
+    }
+  };
+
+  let items = [];
+
+  items.push({
+    title: 'Steps',
+    isOpen: true,
+    children: (
+      <>
+        {properties
+          .filter((property) => !optionsProperties.includes(property))
+          ?.map((property) => {
+            if (property === 'steps') {
+              return (
+                <>
+                  {renderElement(
+                    component,
+                    componentMeta,
+                    paramUpdated,
+                    dataQueries,
+                    'advanced',
+                    'properties',
+                    currentState,
+                    allComponents
+                  )}
+                  {isDynamicStepsEnabled
+                    ? renderElement(
+                      component,
+                      componentMeta,
+                      paramUpdated,
+                      dataQueries,
+                      'schema',
+                      'properties',
+                      currentState,
+                      allComponents
+                    )
+                    : _renderOptions()}
+                </>
+              );
+            }
+            //  else if (property === 'variant') {
+            //   return renderTest(
+            //     component,
+            //     componentMeta,
+            //     paramUpdated,
+            //     dataQueries,
+            //     'variant',
+            //     'properties',
+            //     currentState,
+            //     allComponents,
+            //     handleLabelChange
+            //   );
+            // }
+            return renderElement(
+              component,
+              componentMeta,
+              paramUpdated,
+              dataQueries,
+              property,
+              'properties',
+              currentState,
+              allComponents,
+              darkMode
+            );
+          })}
+      </>
+    ),
+  });
+
+  items.push({
+    title: 'Events',
+    isOpen: true,
+    children: (
+      <EventManager
+        sourceId={component?.id}
+        eventSourceType="component"
+        eventMetaDefinition={componentMeta}
+        dataQueries={dataQueries}
+        components={allComponents}
+        eventsChanged={eventsChanged}
+        apps={apps}
+        darkMode={darkMode}
+        pages={pages}
+      />
+    ),
+  });
+  items.push({
+    title: `Additional Actions`,
+    isOpen: true,
+    children: additionalActions.map((property) => {
+      return renderElement(
+        component,
+        componentMeta,
+        paramUpdated,
+        dataQueries,
+        property,
+        'properties',
+        currentState,
+        allComponents,
+        darkMode,
+        componentMeta.properties?.[property]?.placeholder
+      );
+    }),
+  });
+
+  items.push({
+    title: 'Devices',
+    isOpen: true,
+    children: (
+      <>
+        {renderElement(
+          component,
+          componentMeta,
+          layoutPropertyChanged,
+          dataQueries,
+          'showOnDesktop',
+          'others',
+          currentState,
+          allComponents
+        )}
+        {renderElement(
+          component,
+          componentMeta,
+          layoutPropertyChanged,
+          dataQueries,
+          'showOnMobile',
+          'others',
+          currentState,
+          allComponents
+        )}
+      </>
+    ),
+  });
+
+  return <Accordion items={items} />;
+}
+
+function renderTest(...props) {
+  const [
+    component,
+    componentMeta,
+    paramUpdated,
+    dataQueries,
+    param,
+    paramType,
+    currentState,
+    components = {},
+    darkMode = false,
+    placeholder = '',
+    validationFn,
+  ] = props;
+  const value = componentMeta?.definition?.properties?.variant?.value;
+  return (
+    <div style={{ marginBottom: 8 }}>
+      <Switch
+        value={value}
+        onChange={(e) => {
+          paramUpdated({ name: 'variant' }, 'value', e, 'properties', false, props);
+        }}
+        meta={{
+          ...componentMeta.properties[param],
+          fullWidth: true,
+        }}
+        paramName={param}
+        isIcon={false}
+        component={component.component.definition.name}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
index 0568b85ccd..135f2b450b 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
@@ -255,7 +255,7 @@ export const PropertiesTabElements = ({
               paramType="properties"
             />
           </div>
-          {resolveReferences(column?.isEditable) && (
+          {(column?.fxActiveFields?.includes('isEditable') || resolveReferences(column?.isEditable)) && (
             <ValidationProperties
               column={column}
               index={index}
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
index 6c8398724d..e1c6bcf5c8 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useRef } from 'react';
 
 import { ActionTypes } from '@/Editor/ActionTypes';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
@@ -32,6 +32,9 @@ import useStore from '@/AppBuilder/_stores/store';
 import { useEventActions, useEvents } from '@/AppBuilder/_stores/slices/eventsSlice';
 import ToggleGroup from '@/ToolJetUI/SwitchGroup/ToggleGroup';
 import ToggleGroupItem from '@/ToolJetUI/SwitchGroup/ToggleGroupItem';
+import usePopoverObserver from '@/AppBuilder/_hooks/usePopoverObserver';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { components as selectComponents } from 'react-select';
 
 export const EventManager = ({
   sourceId,
@@ -82,6 +85,8 @@ export const EventManager = ({
 
   const [events, setEvents] = useState([]);
   const [focusedEventIndex, setFocusedEventIndex] = useState(null);
+  const lastFocusedEventIndex = useRef(null);
+  const shouldSkipOnToggle = useRef(null);
 
   const { t } = useTranslation();
 
@@ -101,8 +106,23 @@ export const EventManager = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(currentEvents)]);
 
-  let actionOptions = ActionTypes.map((action) => {
-    return { name: action.name, value: action.id };
+  let groupedOptions = ActionTypes.reduce((acc, action) => {
+    const groupName = action.group;
+
+    if (!acc[groupName]) {
+      acc[groupName] = [];
+    }
+
+    acc[groupName].push({
+      label: action.name,
+      value: action.id,
+    });
+
+    return acc;
+  }, {});
+
+  let actionOptions = Object.keys(groupedOptions).map((groupName) => {
+    return { label: groupName, options: groupedOptions[groupName] };
   });
 
   let checkIfClicksAreInsideOf = document.querySelector('.cm-completionListIncompleteBottom');
@@ -124,6 +144,46 @@ export const EventManager = ({
     }),
   };
 
+  const actionStyles = {
+    ...styles,
+    menuList: (base) => ({
+      ...base,
+      padding: '8px 0 8px 8px',
+      '&::-webkit-scrollbar': {
+        width: '10px',
+      },
+      '&::-webkit-scrollbar-track': {
+        background: 'transparent',
+      },
+      '&::-webkit-scrollbar-thumb': {
+        background: '#E4E7EB',
+        border: '1px solid transparent',
+        backgroundClip: 'content-box',
+      },
+      '&::-webkit-scrollbar-thumb:hover': {
+        background: '#E4E7EB !important',
+        border: '1px solid transparent !important',
+        backgroundClip: 'content-box !important',
+      },
+      '&:hover': {
+        '&::-webkit-scrollbar-thumb': {
+          background: '#E4E7EB !important',
+          border: '1px solid transparent !important',
+          backgroundClip: 'content-box !important',
+        },
+      },
+    }),
+    group: (base) => ({
+      ...base,
+      padding: 0,
+    }),
+    groupHeading: (base) => ({
+      ...base,
+      margin: 0,
+      padding: '0',
+    }),
+  };
+
   const actionLookup = Object.fromEntries(ActionTypes.map((actionType) => [actionType.id, actionType]));
 
   let alertTypes = [
@@ -394,6 +454,29 @@ export const EventManager = ({
     return defaultValue;
   };
 
+  const formatGroupLabel = (data) => {
+    if (data.label === 'run-action') return;
+    return (
+      <div
+        className="tw-border-x-0 tw-border-t-0 tw-border-b-[0.5px] tw-border-solid tw-my-[4px]"
+        style={{ borderColor: 'var(--border-weak)' }}
+      ></div>
+    );
+  };
+
+  const CustomOption = (props) => {
+    return (
+      <selectComponents.Option {...props}>
+        <div className="d-flex align-items-center">
+          <div style={{ width: '16px', marginRight: '6px' }}>
+            {props.isSelected && <SolidIcon name="tickv3" width="16px" height="16px" />}
+          </div>
+          <span>{props.label}</span>
+        </div>
+      </selectComponents.Option>
+    );
+  };
+
   function eventPopover(event, index) {
     return (
       <Popover
@@ -433,13 +516,17 @@ export const EventManager = ({
               <Select
                 className={`${darkMode ? 'select-search-dark' : 'select-search'} w-100`}
                 options={actionOptions}
-                value={event.actionId}
+                value={actionOptions
+                  .flatMap((group) => group.options)
+                  .find((option) => option.value === event.actionId)}
+                components={{ Option: CustomOption }}
                 search={false}
                 onChange={(value) => handlerChanged(index, 'actionId', value)}
                 placeholder={t('globals.select', 'Select') + '...'}
-                styles={styles}
+                styles={actionStyles}
                 useMenuPortal={false}
                 useCustomStyles={true}
+                formatGroupLabel={formatGroupLabel}
               />
             </div>
           </div>
@@ -1006,10 +1093,21 @@ export const EventManager = ({
                           placement={popoverPlacement || 'left'}
                           rootClose={true}
                           overlay={eventPopover(event.event, index)}
-                          onHide={() => setFocusedEventIndex(null)}
                           onToggle={(showing) => {
+                            // If the toggle action should be skipped (e.g., due to a previous state change), reset the flag and exit early.
+                            if (shouldSkipOnToggle.current) {
+                              shouldSkipOnToggle.current = false;
+                              return;
+                            }
+
+                            // If there is already a focused event, set the skip flag to prevent unnecessary state updates.
+                            if (focusedEventIndex !== null && showing) {
+                              shouldSkipOnToggle.current = true;
+                            }
+
                             if (showing) {
                               setFocusedEventIndex(index);
+                              lastFocusedEventIndex.current = index;
                             } else {
                               setFocusedEventIndex(null);
                             }
@@ -1018,6 +1116,7 @@ export const EventManager = ({
                         >
                           <div
                             key={index}
+                            id={`${sourceId}-${index}`}
                             ref={provided.innerRef}
                             {...provided.draggableProps}
                             {...provided.dragHandleProps}
@@ -1061,6 +1160,17 @@ export const EventManager = ({
     );
   };
 
+  const shouldUsePopoverObserver = events.length !== 0 && eventSourceType === 'data_query';
+
+  usePopoverObserver(
+    shouldUsePopoverObserver ? document.getElementsByClassName('query-details')[0] : null,
+    document.getElementById(`${sourceId}-${lastFocusedEventIndex.current}`),
+    document.getElementById('popover-basic'),
+    focusedEventIndex !== null,
+    () => (document.getElementById('popover-basic').style.display = 'block'),
+    () => (document.getElementById('popover-basic').style.display = 'none')
+  );
+
   if (events.length === 0) {
     return (
       <>
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
index e101069fdb..07b53c4454 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
@@ -36,6 +36,7 @@ import Inspect from '@/_ui/Icon/solidIcons/Inspect';
 import classNames from 'classnames';
 import { EMPTY_ARRAY } from '@/_stores/editorStore';
 import { Select } from './Components/Select';
+import { Steps } from './Components/Steps.jsx';
 import { deepClone } from '@/_helpers/utilities/utils.helpers';
 import useStore from '@/AppBuilder/_stores/store';
 // import { componentTypes } from '@/Editor/WidgetManager/components';
@@ -90,6 +91,7 @@ const NEW_REVAMPED_COMPONENTS = [
   'VerticalDivider',
   'ModalV2',
   'Link',
+  'Steps',
 ];
 
 export const Inspector = ({ componentDefinitionChanged, darkMode, pages, selectedComponentId }) => {
@@ -539,8 +541,8 @@ export const Inspector = ({ componentDefinitionChanged, darkMode, pages, selecte
                   componentMeta.displayName === 'Toggle Switch (Legacy)'
                     ? 'Toggle (Legacy)'
                     : componentMeta.displayName === 'Toggle Switch'
-                    ? 'Toggle Switch'
-                    : componentMeta.component,
+                      ? 'Toggle Switch'
+                      : componentMeta.component,
               })}
             </small>
           </span>
@@ -740,6 +742,8 @@ const GetAccordion = React.memo(
       case 'DatePickerV2':
       case 'TimePicker':
         return <DatetimePickerV2 {...restProps} componentName={componentName} />;
+      case 'Steps':
+        return <Steps {...restProps} />;
       case 'PhoneInput':
         return <PhoneInput {...restProps} />;
       case 'CurrencyInput':
diff --git a/frontend/src/AppBuilder/RightSideBar/WidgetBox/WidgetBox.jsx b/frontend/src/AppBuilder/RightSideBar/WidgetBox/WidgetBox.jsx
index 9ce3bbd4ce..5b0868c128 100644
--- a/frontend/src/AppBuilder/RightSideBar/WidgetBox/WidgetBox.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/WidgetBox/WidgetBox.jsx
@@ -14,6 +14,9 @@ const NEW_WIDGETS = [
   'TimePicker',
   'ModalV2',
   'TextArea',
+  'EmailInput',
+  'PhoneInput',
+  'CurrencyInput',
 ];
 
 export const WidgetBox = ({ component, darkMode }) => {
diff --git a/frontend/src/AppBuilder/Viewer/Viewer.jsx b/frontend/src/AppBuilder/Viewer/Viewer.jsx
index af820fca13..b546bc7205 100644
--- a/frontend/src/AppBuilder/Viewer/Viewer.jsx
+++ b/frontend/src/AppBuilder/Viewer/Viewer.jsx
@@ -168,6 +168,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
                       showViewerNavigation={!isPagesSidebarHidden}
                       handleAppEnvironmentChanged={handleAppEnvironmentChanged}
                       changeToDarkMode={changeToDarkMode}
+                      switchPage={switchPage}
                     />
                   )}
                   <div className="sub-section">
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
index 0a6a2cd575..9e71a89f90 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
@@ -4,25 +4,38 @@ 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: 'Number', 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',
-          element: { type: 'object', object: { id: { type: 'number' } } },
+          element: { type: 'object' },
         },
         defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
       },
     },
-    currentStep: {
-      type: 'code',
-      displayName: 'Current step',
-      validation: {
-        schema: { type: 'number' },
-        defaultValue: 1,
-      },
-    },
     stepsSelectable: {
       type: 'toggle',
       displayName: 'Steps selectable',
@@ -30,7 +43,38 @@ export const stepsConfig = {
         schema: { type: 'boolean' },
         defaultValue: false,
       },
+      section: 'additionalActions',
     },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      validation: { schema: { type: 'boolean' } },
+      section: 'additionalActions',
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      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',
+      validation: {
+        schema: { type: 'number' },
+        defaultValue: 1,
+      },
+    },
+
   },
   defaultSize: {
     width: 22,
@@ -40,46 +84,126 @@ 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: 'visible', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisabled',
+      displayName: 'Set disabled',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{true}}', type: 'toggle' }],
+    },
+    {
+      handle: 'resetSteps',
+      displayName: 'Reset steps',
+      params: [],
+    },
+    {
+      handle: 'setStepVisible',
+      displayName: 'Set step visible',
+      params: [
+        {
+          handle: 'id',
+          displayName: 'Step id',
+        },
+        {
+          handle: 'visibility',
+          displayName: 'visibility',
+          defaultValue: '{{false}}',
+          type: 'toggle',
+        },
+      ],
+    },
+    {
+      handle: 'setStepDisable',
+      displayName: 'Set step disable',
+      params: [
+        {
+          handle: 'id',
+          displayName: 'Step id',
+        },
+        {
+          handle: 'disabled',
+          displayName: 'disabled',
+          defaultValue: '{{true}}',
+          type: 'toggle',
+        },
+      ],
+    },
+  ],
   events: {
     onSelect: { displayName: 'On select' },
   },
   styles: {
-    color: {
+    incompletedAccent: {
       type: 'colorSwatches',
-      displayName: 'colorSwatches',
+      displayName: 'Incompleted accent',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#CCD1D5',
+      },
+      accordian: 'steps',
+    },
+    incompletedLabel: {
+      type: 'colorSwatches',
+      displayName: 'Incompleted label',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#1B1F24',
+      },
+      accordian: 'steps',
+    },
+    completedAccent: {
+      type: 'colorSwatches',
+      displayName: 'Completed accent',
       validation: {
         schema: { type: 'string' },
         defaultValue: 'var(--primary-brand)',
       },
+      accordian: 'steps',
     },
-    textColor: {
+    completedLabel: {
       type: 'colorSwatches',
-      displayName: 'Text color',
+      displayName: 'Completed label',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: '#1B1F24',
       },
+      accordian: 'steps',
     },
-    theme: {
-      type: 'select',
-      displayName: 'Theme',
+    currentStepLabel: {
+      type: 'colorSwatches',
+      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 +216,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: '', id: 1, visible: { value: true }, disabled: { value: false } },
+          { name: 'step 2', tooltip: '', id: 2, visible: { value: true }, disabled: { value: false } },
+          { name: 'step 3', tooltip: '', id: 3, visible: { value: true }, disabled: { value: false } },
+          { name: 'step 4', tooltip: '', id: 4, visible: { value: true }, disabled: { value: false } },
+          { name: 'step 5', tooltip: '', id: 5, visible: { value: true }, disabled: { value: false } },
+        ],
       },
+      schema: {
+        value: `{{ [{ name: 'step 1', tooltip: '', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: '', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: '', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: '', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: '', id: 5,visible: true, disabled: false}]}}`,
+      },
+      disabledState: { value: '{{false}}' },
+      variant: { value: 'titles' },
       currentStep: { value: '{{3}}' },
       stepsSelectable: { value: true },
+      advanced: { value: `{{false}}` },
+      visibility: { value: '{{true}}' },
     },
     events: [],
     styles: {
       visibility: { value: '{{true}}' },
-      theme: { value: 'titles' },
-      color: { value: 'var(--primary-brand)' },
-      textColor: { value: '' },
+      // color: { value: '' },
+      // textColor: { value: '' },
+      padding: { value: 'default' },
+      incompletedAccent: { value: '#E4E7EB' },
+      incompletedLabel: { value: '#1B1F24' },
+      completedAccent: { value: 'var(--primary-brand)' },
+      completedLabel: { value: '#1B1F24' },
+      currentStepLabel: { value: '#1B1F24' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/_hooks/usePopoverObserver.js b/frontend/src/AppBuilder/_hooks/usePopoverObserver.js
index a5c0cda1c4..f047475db9 100644
--- a/frontend/src/AppBuilder/_hooks/usePopoverObserver.js
+++ b/frontend/src/AppBuilder/_hooks/usePopoverObserver.js
@@ -4,9 +4,9 @@ function usePopoverObserver(containerRef, triggerRef, popoverRef, show, onShow,
   const prevShow = useRef(false);
 
   // Check if it is a ref or a DOM element
-  const container = containerRef?.current ? containerRef.current : containerRef;
-  const trigger = triggerRef?.current ? triggerRef.current : triggerRef;
-  const popover = popoverRef?.current ? popoverRef.current : popoverRef;
+  const container = containerRef?.current !== undefined ? containerRef.current : containerRef;
+  const trigger = triggerRef?.current !== undefined ? triggerRef.current : triggerRef;
+  const popover = popoverRef?.current !== undefined ? popoverRef.current : popoverRef;
 
   useEffect(() => {
     if (!container || !trigger) return;
diff --git a/frontend/src/AppBuilder/_stores/slices/dataQuerySlice.js b/frontend/src/AppBuilder/_stores/slices/dataQuerySlice.js
index 252e387d70..79acc2c461 100644
--- a/frontend/src/AppBuilder/_stores/slices/dataQuerySlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/dataQuerySlice.js
@@ -258,7 +258,11 @@ export const createDataQuerySlice = (set, get) => ({
           set((state) => {
             state.dataQuery.creatingQueryInProcessId = null;
             state.dataQuery.queries.modules[moduleId] = [
-              { ...data, data_source_id: queryToClone.data_source_id },
+              {
+                ...data,
+                data_source_id: queryToClone.data_source_id,
+                plugin: { iconFile: queryToClone.plugin?.iconFile, icon_file: queryToClone.plugin?.icon_file },
+              },
               ...state.dataQuery.queries.modules[moduleId],
             ];
           });
diff --git a/frontend/src/Editor/ActionTypes.js b/frontend/src/Editor/ActionTypes.js
index 0bad71b3ac..e3fb69f95d 100644
--- a/frontend/src/Editor/ActionTypes.js
+++ b/frontend/src/Editor/ActionTypes.js
@@ -1,62 +1,36 @@
 export const ActionTypes = [
+  {
+    name: 'Run query',
+    id: 'run-query',
+    options: [{ queryId: '' }],
+    group: 'run-action',
+  },
   {
     name: 'Show Alert',
     id: 'show-alert',
     options: [{ name: 'message', type: 'text', default: 'Message !' }],
+    group: 'run-action',
   },
   {
-    name: 'Logout',
-    id: 'logout',
-  },
-  {
-    name: 'Run Query',
-    id: 'run-query',
-    options: [{ queryId: '' }],
-  },
-  {
-    name: 'Open Webpage',
-    id: 'open-webpage',
-    options: [{ name: 'url', type: 'text', default: 'https://example.com' }],
-  },
-  {
-    name: 'Go to app',
-    id: 'go-to-app',
+    name: 'Control component',
+    id: 'control-component',
     options: [
-      { name: 'app', type: 'text', default: '' },
-      { name: 'queryParams', type: 'code', default: '[]' },
+      { name: 'component', type: 'text', default: '' },
+      { name: 'action', type: 'text', default: '' },
     ],
+    group: 'control-component',
   },
   {
-    name: 'Show Modal',
+    name: 'Show modal',
     id: 'show-modal',
     options: [{ name: 'modal', type: 'text', default: '' }],
+    group: 'control-component',
   },
   {
-    name: 'Close Modal',
+    name: 'Close modal',
     id: 'close-modal',
     options: [{ name: 'modal', type: 'text', default: '' }],
-  },
-  {
-    name: 'Copy to clipboard',
-    id: 'copy-to-clipboard',
-    options: [{ name: 'copy-to-clipboard', type: 'text', default: '' }],
-  },
-  {
-    name: 'Set local storage',
-    id: 'set-localstorage-value',
-    options: [
-      { name: 'key', type: 'code', default: '' },
-      { name: 'value', type: 'code', default: '' },
-    ],
-  },
-  {
-    name: 'Generate file',
-    id: 'generate-file',
-    options: [
-      { name: 'fileType', type: 'text', default: '' },
-      { name: 'fileName', type: 'text', default: '' },
-      { name: 'data', type: 'code', default: '{{[]}}' },
-    ],
+    group: 'control-component',
   },
   {
     name: 'Set table page',
@@ -69,28 +43,28 @@ export const ActionTypes = [
       },
       { name: 'pageIndex', type: 'text', default: '{{1}}' },
     ],
-  },
-  {
-    name: 'Set variable',
-    id: 'set-custom-variable',
-    options: [
-      { name: 'key', type: 'code', default: '' },
-      { name: 'value', type: 'code', default: '' },
-    ],
-  },
-  {
-    name: 'Unset all variables',
-    id: 'unset-all-custom-variables',
-  },
-  {
-    name: 'Unset variable',
-    id: 'unset-custom-variable',
-    options: [{ name: 'key', type: 'code', default: '' }],
+    group: 'control-component',
   },
   {
     name: 'Switch page',
     id: 'switch-page',
     options: [{ name: 'page', type: 'text', default: '' }],
+    group: 'navigation',
+  },
+  {
+    name: 'Go to app',
+    id: 'go-to-app',
+    options: [
+      { name: 'app', type: 'text', default: '' },
+      { name: 'queryParams', type: 'code', default: '[]' },
+    ],
+    group: 'navigation',
+  },
+  {
+    name: 'Open webpage',
+    id: 'open-webpage',
+    options: [{ name: 'url', type: 'text', default: 'https://example.com' }],
+    group: 'navigation',
   },
   {
     name: 'Set page variable',
@@ -99,10 +73,7 @@ export const ActionTypes = [
       { name: 'key', type: 'code', default: '' },
       { name: 'value', type: 'code', default: '' },
     ],
-  },
-  {
-    name: 'Unset all page variables',
-    id: 'unset-all-page-variables',
+    group: 'variable',
   },
   {
     name: 'Unset page variable',
@@ -111,14 +82,61 @@ export const ActionTypes = [
       { name: 'key', type: 'code', default: '' },
       { name: 'value', type: 'code', default: '' },
     ],
+    group: 'variable',
   },
-
   {
-    name: 'Control component',
-    id: 'control-component',
+    name: 'Unset all page variables',
+    id: 'unset-all-page-variables',
+    group: 'variable',
+  },
+  {
+    name: 'Set variable',
+    id: 'set-custom-variable',
     options: [
-      { name: 'component', type: 'text', default: '' },
-      { name: 'action', type: 'text', default: '' },
+      { name: 'key', type: 'code', default: '' },
+      { name: 'value', type: 'code', default: '' },
     ],
+    group: 'variable',
+  },
+  {
+    name: 'Unset variable',
+    id: 'unset-custom-variable',
+    options: [{ name: 'key', type: 'code', default: '' }],
+    group: 'variable',
+  },
+  {
+    name: 'Unset all variables',
+    id: 'unset-all-custom-variables',
+    group: 'variable',
+  },
+  {
+    name: 'Logout',
+    id: 'logout',
+    group: 'other',
+  },
+  {
+    name: 'Generate file',
+    id: 'generate-file',
+    options: [
+      { name: 'fileType', type: 'text', default: '' },
+      { name: 'fileName', type: 'text', default: '' },
+      { name: 'data', type: 'code', default: '{{[]}}' },
+    ],
+    group: 'other',
+  },
+  {
+    name: 'Set local storage',
+    id: 'set-localstorage-value',
+    options: [
+      { name: 'key', type: 'code', default: '' },
+      { name: 'value', type: 'code', default: '' },
+    ],
+    group: 'other',
+  },
+  {
+    name: 'Copy to clipboard',
+    id: 'copy-to-clipboard',
+    options: [{ name: 'copy-to-clipboard', type: 'text', default: '' }],
+    group: 'other',
   },
 ];
diff --git a/frontend/src/Editor/Components/DraftEditor.jsx b/frontend/src/Editor/Components/DraftEditor.jsx
index b2c8b61994..6734f3c865 100644
--- a/frontend/src/Editor/Components/DraftEditor.jsx
+++ b/frontend/src/Editor/Components/DraftEditor.jsx
@@ -1,7 +1,8 @@
 /* eslint-disable react/no-string-refs */
 import React from 'react';
-import { Editor, EditorState, RichUtils, getDefaultKeyBinding, ContentState, convertFromHTML } from 'draft-js';
+import { Editor, EditorState, RichUtils, getDefaultKeyBinding } from 'draft-js';
 import 'draft-js/dist/Draft.css';
+import { stateFromHTML } from 'draft-js-import-html';
 import { stateToHTML } from 'draft-js-export-html';
 import Loader from '@/ToolJetUI/Loader/Loader';
 import DOMPurify from 'dompurify';
@@ -150,11 +151,8 @@ const InlineStyleControls = (props) => {
 class DraftEditor extends React.Component {
   constructor(props) {
     super(props);
-    const blocksFromHTML = convertFromHTML(DOMPurify.sanitize(this.props.defaultValue));
     this.state = {
-      editorState: EditorState.createWithContent(
-        ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap)
-      ),
+      editorState: EditorState.createWithContent(stateFromHTML(DOMPurify.sanitize(this.props.defaultValue))),
     };
 
     this.editorContainerRef = React.createRef();
@@ -173,6 +171,18 @@ class DraftEditor extends React.Component {
     this.toggleInlineStyle = this._toggleInlineStyle.bind(this);
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.defaultValue !== this.props.defaultValue) {
+      const newContentState = stateFromHTML(DOMPurify.sanitize(this.props.defaultValue));
+      const newEditorState = EditorState.createWithContent(newContentState);
+      const html = stateToHTML(newContentState);
+
+      this.props.handleChange(html);
+
+      this.setState({ editorState: newEditorState });
+    }
+  }
+
   componentDidMount() {
     //For resizing the editor container based on the height of rich text editor controls
     this.resizeObserver = new ResizeObserver(() => {
@@ -193,11 +203,7 @@ class DraftEditor extends React.Component {
       isVisible: this.props.isVisible,
       isLoading: this.props.isLoading,
       setValue: async (text) => {
-        const blocksFromHTML = convertFromHTML(DOMPurify.sanitize(text));
-        const newContentState = ContentState.createFromBlockArray(
-          blocksFromHTML.contentBlocks,
-          blocksFromHTML.entityMap
-        );
+        const newContentState = stateFromHTML(DOMPurify.sanitize(text));
         const newEditorState = EditorState.createWithContent(newContentState);
         const html = stateToHTML(newContentState);
         this.props.handleChange(html);
@@ -226,19 +232,6 @@ class DraftEditor extends React.Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.defaultValue !== this.props.defaultValue) {
-      const blocksFromHTML = convertFromHTML(DOMPurify.sanitize(this.props.defaultValue));
-      const newContentState = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap);
-      const newEditorState = EditorState.createWithContent(newContentState);
-      const html = stateToHTML(newContentState);
-
-      this.props.handleChange(html);
-
-      this.setState({ editorState: newEditorState });
-    }
-  }
-
   _handleKeyCommand(command, editorState) {
     const newState = RichUtils.handleKeyCommand(editorState, command);
     if (newState) {
diff --git a/frontend/src/Editor/Components/Steps.jsx b/frontend/src/Editor/Components/Steps.jsx
index 4a42e9362e..4662c92bc6 100644
--- a/frontend/src/Editor/Components/Steps.jsx
+++ b/frontend/src/Editor/Components/Steps.jsx
@@ -1,53 +1,226 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { isExpectedDataType } from '@/_helpers/utils';
+import { ToolTip } from '@/_components/ToolTip';
+import './Steps.scss';
 
-export const Steps = function Button({ properties, styles, fireEvent, setExposedVariable, height, darkMode, dataCy }) {
-  const { stepsSelectable } = properties;
-  const currentStep = isExpectedDataType(properties.currentStep, 'number');
-  const steps = isExpectedDataType(properties.steps, 'array');
-  const { color, theme, visibility, boxShadow } = styles;
+export const Steps = function Steps({ properties, styles, fireEvent, setExposedVariable, height, darkMode, dataCy }) {
+  const { stepsSelectable, disabledState } = properties;
+  const visibility = isExpectedDataType(properties.visibility, 'boolean');
+  const currentStepId = isExpectedDataType(properties.currentStep, 'number');
+  const isDynamicStepsEnabled = isExpectedDataType(properties.advanced, 'boolean');
+  const steps = isDynamicStepsEnabled ? properties.schema : properties.steps;
+  const { color, boxShadow } = styles;
   const textColor = darkMode && styles.textColor === '#000' ? '#fff' : styles.textColor;
-  const [activeStep, setActiveStep] = useState(null);
+  const { completedAccent, incompletedAccent, incompletedLabel, completedLabel, currentStepLabel } = styles;
+  const [stepsArr, setStepsArr] = useState(steps);
+  const [isVisible, setIsVisible] = useState(visibility);
+  const [isDisabled, setIsDisabled] = useState(disabledState);
+  const [activeStepId, setActiveStepId] = useState(currentStepId);
+  const theme = properties.variant;
+  const [progressBarWidth, setProgressBarWidth] = useState(0);
+  const [containerPadding, setContainerPadding] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [filteredSteps, setFilteredSteps] = useState([]);
+  const firstLabelRef = useRef(null);
+  const lastLabelRef = useRef(null);
+  const containerRef = useRef(null);
 
+  const currentStepIndex = filteredSteps.findIndex((step) => step.id == activeStepId);
+
+  useEffect(() => {
+    const sanitizedSteps = JSON.parse(JSON.stringify(steps || [])).map((step) => ({
+      ...step,
+      visible: 'visible' in step ? step.visible : true,
+      disabled: 'disabled' in step ? step.disabled : false,
+    }));
+    const newFilteredSteps = (sanitizedSteps || []).filter((step) => step.visible);
+    setFilteredSteps(newFilteredSteps);
+    setStepsArr(sanitizedSteps);
+  }, [JSON.stringify(steps)]);
+
+  // Common function to calculate progress bar width and label padding
+  const calculateProgressBarWidth = () => {
+    if (!containerRef.current || theme !== 'titles') return;
+
+    const containerWidth = containerRef.current.offsetWidth;
+    setContainerWidth(containerWidth);
+
+    const stepWidth = 20; // width of dot + padding
+    const totalStepsWidth = filteredSteps.length * stepWidth;
+    const totalProgressBars = filteredSteps.length - 1;
+
+    if (filteredSteps.length === 1) {
+      setProgressBarWidth(containerWidth);
+      setContainerPadding(0); // No padding needed for single step
+      return;
+    }
+
+    // Calculate progress bar width
+    const progressBarWidth = (containerWidth - totalStepsWidth) / totalProgressBars;
+    setProgressBarWidth(Math.min(progressBarWidth, (containerWidth - totalStepsWidth) / filteredSteps.length));
+
+    // Calculate container padding
+    if (firstLabelRef.current && lastLabelRef.current) {
+      const labelWidth = (containerWidth - (filteredSteps.length - 1) - 4) / filteredSteps.length;
+
+      const firstLabelWidth = firstLabelRef.current.offsetWidth;
+      const lastLabelWidth = lastLabelRef.current.offsetWidth;
+      const maxLabelWidth = Math.max(firstLabelWidth, lastLabelWidth);
+
+      const calculatedPadding = (maxLabelWidth / 2) - 1;
+      setContainerPadding(Math.max(2, calculatedPadding)); // Ensure minimum padding of 2px
+    }
+  };
+
+  // Add resize observer to track container width and calculate progress bar width
+  useEffect(() => {
+    calculateProgressBarWidth();
+    if (theme !== 'titles') return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        calculateProgressBarWidth();
+      }
+    });
+
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, [theme, JSON.stringify(steps), filteredSteps]);
+  // Dynamic styles for theming
   const dynamicStyle = {
     '--bgColor': styles.color,
     '--textColor': textColor,
-  };
-  const activeStepHandler = (id) => {
-    const active = steps.filter((item) => item.id == id);
-    setExposedVariable('currentStepId', active[0].id);
-    fireEvent('onSelect');
-    setActiveStep(active[0].id);
+    '--completedAccent': completedAccent === '#4368E3' ? 'var(--primary-brand)' : completedAccent,
+    '--incompletedAccent': incompletedAccent === '#E4E7EB' ? 'var(--surfaces-surface-03)' : incompletedAccent,
+    '--incompletedLabel': incompletedLabel === '#1B1F24' ? 'var(--text-primary)' : incompletedLabel,
+    '--completedLabel': completedLabel === '#1B1F24' ? 'var(--text-primary)' : completedLabel,
+    '--currentStepLabel': currentStepLabel === '#1B1F24' ? 'var(--text-primary)' : currentStepLabel,
   };
 
+  // Step click handler
+  const handleStepClick = (id) => {
+    const step = filteredSteps.find((item) => item.id == id);
+    if (step && !step.disabled && !isDisabled) {
+      setActiveStepId(step.id);
+      fireEvent('onSelect');
+    }
+  };
+
+  // Expose variables and methods
   useEffect(() => {
-    setActiveStep(currentStep);
-    setExposedVariable('currentStepId', currentStep);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentStep]);
+    setExposedVariable('isVisible', isVisible);
+    setExposedVariable('isDisabled', isDisabled);
+    setExposedVariable('currentStepId', activeStepId);
+    setExposedVariable('steps', stepsArr);
+
+    setExposedVariable('setStepVisible', (stepId, visibility) => {
+      setStepsArr((prev) => {
+        const updatedSteps = prev.map((item) =>
+          item.id == stepId ? { ...item, visible: visibility } : item
+        );
+        setExposedVariable('steps', updatedSteps);
+        return updatedSteps;
+      });
+    });
+
+    setExposedVariable('setStepDisable', (stepId, disabled) => {
+      setStepsArr((prev) => {
+        const updatedSteps = prev.map((item) =>
+          item.id == stepId ? { ...item, disabled: disabled } : item
+        );
+        setExposedVariable('steps', updatedSteps);
+        return updatedSteps;
+      });
+    });
+
+    setExposedVariable('resetSteps', () => {
+      setActiveStepId(stepsArr.filter((step) => step.visible)?.[0]?.id);
+    });
+
+    setExposedVariable('setStep', (stepId) => {
+      if (!disabledState) setActiveStepId(stepId);
+    });
+    setExposedVariable('setVisibility', (visibility) => setIsVisible(visibility));
+    setExposedVariable('setDisable', (disabled) => setIsDisabled(disabled));
+  }, [isVisible, isDisabled, activeStepId, stepsArr, disabledState]);
+
+  // Update state from props
+  useEffect(() => setIsVisible(visibility), [visibility]);
+  useEffect(() => setIsDisabled(disabledState), [disabledState]);
+  useEffect(() => setActiveStepId(currentStepId), [currentStepId]);
+
+  if (!isVisible) return null;
 
   return (
-    visibility && (
-      <div
-        className={`steps ${theme == 'numbers' && 'steps-counter '}`}
-        style={{ color: textColor, height, boxShadow }}
-        data-cy={dataCy}
-      >
-        {steps?.map((item) => (
-          <a
-            key={item.id}
-            className={`step-item ${item.id == activeStep && 'active'} ${!stepsSelectable && 'step-item-disabled'}  ${
-              color && `step-${color}`
-            }`}
-            data-bs-toggle="tooltip"
-            title={item?.tooltip}
-            onClick={() => stepsSelectable && activeStepHandler(item.id)}
-            style={dynamicStyle}
-          >
-            {theme == 'titles' && item.name}
-          </a>
-        ))}
+    <div
+      ref={containerRef}
+      className={`steps-container ${isDisabled ? 'disabled' : ''} ${filteredSteps.length === 1 ? 'single-step' : ''}`}
+      style={{
+        height,
+        boxShadow,
+        padding: theme === 'titles' ? `0 ${containerPadding}px` : 2,
+        paddingTop: theme === 'plain' ? `3px` : theme === 'numbers' ? `2px` : 0,
+        ...dynamicStyle
+      }}
+      data-cy={dataCy}
+    >
+      <div className={`progress-line-container ${filteredSteps.length === 1 ? 'single-step' : ''}`}>
+        {filteredSteps.map((step, index) => {
+          const isStepDisabled = step.disabled;
+          const isCompleted = index < currentStepIndex;
+          const isActive = index === currentStepIndex;
+          const isUpcoming = index > currentStepIndex;
+          const isFirstStep = index === 0;
+          const isLastStep = index === filteredSteps.length - 1;
+
+          return (
+            <React.Fragment key={index}> {/* using index as key to avoid issues due to duplicate step ids */}
+              <ToolTip
+                show={!step.disabled && !isDisabled && step.tooltip}
+                message={step.tooltip || ''}
+              >
+                <div
+                  onClick={() => stepsSelectable && handleStepClick(step.id)}
+                  className={`milestone ${theme === 'numbers' ? 'numbers' : ''} ${isDisabled || isStepDisabled ? 'disabled' : ''
+                    } ${isCompleted ? 'completed' : isActive ? 'active' : 'incomplete'}`}
+                >
+                  {theme === 'numbers' ? (
+                    index + 1
+                  ) : (
+                    <>
+                      <div
+                        className={`dot ${isCompleted ? 'completed' : isActive ? 'active' : 'incomplete'}`}
+                        style={{
+                          border: `2px solid ${isCompleted ? completedAccent : isActive ? completedAccent : incompletedAccent}`,
+                          backgroundColor: isActive ? 'transparent' : (isCompleted ? completedAccent : incompletedAccent)
+                        }}
+                      />
+                      {theme === 'titles' && (
+                        <div
+                          ref={isFirstStep ? firstLabelRef : isLastStep ? lastLabelRef : null}
+                          className={`label ${isCompleted ? 'completed' : isActive ? 'active' : 'incomplete'}`}
+                          style={{ maxWidth: `${progressBarWidth}px` }}
+                        >
+                          {step.name}
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+              </ToolTip>
+
+              {index < filteredSteps.length - 1 && (
+                <div
+                  className={`step-connector ${isCompleted ? 'completed' : 'incomplete'}`}
+                />
+              )}
+            </React.Fragment>
+          );
+        })}
       </div>
-    )
+    </div>
   );
 };
diff --git a/frontend/src/Editor/Components/Steps.scss b/frontend/src/Editor/Components/Steps.scss
new file mode 100644
index 0000000000..c61f185a73
--- /dev/null
+++ b/frontend/src/Editor/Components/Steps.scss
@@ -0,0 +1,132 @@
+.steps-container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	opacity: 1;
+
+	&.disabled {
+		opacity: 0.5;
+	}
+
+	&.single-step {
+		align-items: center;
+	}
+
+	.progress-line-container {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+
+		&.single-step {
+			width: auto;
+		}
+	}
+
+	.milestone {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		overflow: visible;
+		transition: all 0.3s ease;
+		cursor: pointer;
+
+		&.numbers {
+			width: 24px;
+			height: 24px;
+			border-radius: 50%;
+			font-size: 14px;
+			font-weight: 500;
+			box-sizing: content-box;
+
+			&.completed {
+				background-color: var(--completedAccent);
+				color: var(--completedLabel);
+				border: 2px solid var(--completedAccent);
+			}
+
+			&.active {
+				color: var(--currentStepLabel);
+				border: 2px solid var(--completedAccent);
+			}
+
+			&.incomplete {
+				background-color: var(--incompletedAccent);
+				color: var(--incompletedLabel);
+				border: 2px solid var(--incompletedAccent);
+			}
+		}
+
+		&.disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
+
+	.dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 50%;
+		transition: all 0.3s ease;
+		box-sizing: content-box;
+
+		&.completed {
+			background-color: var(--completedAccent);
+			border: 2px solid var(--completedAccent);
+		}
+
+		&.active {
+			background-color: white;
+			border: 2px solid var(--primary-brand);
+		}
+
+		&.incomplete {
+			background-color: var(--incompletedAccent);
+			border: 2px solid var(--incompletedAccent);
+		}
+	}
+
+	.label {
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 18px;
+		text-align: center;
+		margin-top: 2px;
+		position: absolute;
+		top: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		width: max-content;
+
+		&.completed {
+			color: var(--completedLabel);
+		}
+
+		&.active {
+			color: var(--completedLabel);
+		}
+
+		&.incomplete {
+			color: var(--incompletedLabel);
+		}
+	}
+
+	.step-connector {
+		flex-grow: 1;
+		height: 2px;
+		align-self: center;
+		transition: all 0.3s ease;
+
+		&.completed {
+			background-color: var(--completedAccent);
+		}
+
+		&.incomplete {
+			background-color: var(--incompletedAccent);
+		}
+	}
+}
\ No newline at end of file
diff --git a/frontend/src/Editor/WidgetManager/configs/index.js b/frontend/src/Editor/WidgetManager/configs/index.js
index 93e45fd06c..b26b6c84a2 100644
--- a/frontend/src/Editor/WidgetManager/configs/index.js
+++ b/frontend/src/Editor/WidgetManager/configs/index.js
@@ -47,7 +47,7 @@ import { verticalDividerConfig } from './verticalDivider';
 import { customComponentConfig } from './customComponent';
 import { buttonGroupConfig } from './buttonGroup';
 import { pdfConfig } from './pdf';
-import { stepsConfig } from './steps';
+// import { stepsConfig } from './steps';
 import { kanbanConfig } from './kanban';
 import { colorPickerConfig } from './colorPicker';
 import { treeSelectConfig } from './treeSelect';
@@ -106,7 +106,7 @@ export {
   customComponentConfig,
   buttonGroupConfig,
   pdfConfig,
-  stepsConfig,
+  // stepsConfig,
   kanbanConfig,
   kanbanBoardConfig, //!Depreciated
   colorPickerConfig,
diff --git a/frontend/src/Editor/WidgetManager/configs/steps.js b/frontend/src/Editor/WidgetManager/configs/steps.js
deleted file mode 100644
index a39c634919..0000000000
--- a/frontend/src/Editor/WidgetManager/configs/steps.js
+++ /dev/null
@@ -1,108 +0,0 @@
-export const stepsConfig = {
-  name: 'Steps',
-  displayName: 'Steps',
-  description: 'Step-by-step navigation aid',
-  component: 'Steps',
-  properties: {
-    steps: {
-      type: 'code',
-      displayName: 'Steps',
-      validation: {
-        schema: {
-          type: 'array',
-          element: { type: 'object', object: { id: { type: 'number' } } },
-        },
-        defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
-      },
-    },
-    currentStep: {
-      type: 'code',
-      displayName: 'Current step',
-      validation: {
-        schema: { type: 'number' },
-        defaultValue: 1,
-      },
-    },
-    stepsSelectable: {
-      type: 'toggle',
-      displayName: 'Steps selectable',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: false,
-      },
-    },
-  },
-  defaultSize: {
-    width: 22,
-    height: 38,
-  },
-  others: {
-    showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
-    showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
-  },
-  events: {
-    onSelect: { displayName: 'On select' },
-  },
-  styles: {
-    color: {
-      type: 'color',
-      displayName: 'Color',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#000000',
-      },
-    },
-    textColor: {
-      type: 'color',
-      displayName: 'Text color',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#000000',
-      },
-    },
-    theme: {
-      type: 'select',
-      displayName: 'Theme',
-      options: [
-        { name: 'titles', value: 'titles' },
-        { name: 'numbers', value: 'numbers' },
-        { name: 'plain', value: 'plain' },
-      ],
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: 'titles',
-      },
-    },
-    visibility: {
-      type: 'toggle',
-      displayName: 'Visibility',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
-    },
-  },
-  exposedVariables: {
-    currentStepId: '3',
-  },
-  definition: {
-    others: {
-      showOnDesktop: { value: '{{true}}' },
-      showOnMobile: { value: '{{false}}' },
-    },
-    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}]}}`,
-      },
-      currentStep: { value: '{{3}}' },
-      stepsSelectable: { value: true },
-    },
-    events: [],
-    styles: {
-      visibility: { value: '{{true}}' },
-      theme: { value: 'titles' },
-      color: { value: '' },
-      textColor: { value: '' },
-    },
-  },
-};
diff --git a/frontend/src/_styles/tabler.scss b/frontend/src/_styles/tabler.scss
index 086712dfa5..6b021cce0d 100644
--- a/frontend/src/_styles/tabler.scss
+++ b/frontend/src/_styles/tabler.scss
@@ -7675,29 +7675,33 @@ fieldset:disabled .btn {
 }
 
 .rounded {
-    border-radius: 4px ;
+    border-radius: 4px;
 }
 
 .rounded-0 {
     border-radius: 0 !important
 }
 
-.rounded-top-left{
+.rounded-top-left {
     border-top-left-radius: 4px;
 }
 
-.rounded-top-left-0{
+.rounded-top-left-0 {
     border-top-left-radius: 0 !important;
 }
-.rounded-top-right-0{
+
+.rounded-top-right-0 {
     border-top-right-radius: 0 !important;
 }
-.rounded-bottom-left-0{
+
+.rounded-bottom-left-0 {
     border-bottom-left-radius: 0 !important;
 }
-.rounded-bottom-right-0{
+
+.rounded-bottom-right-0 {
     border-bottom-right-radius: 0 !important;
 }
+
 .rounded-1 {
     border-radius: 2px !important
 }
@@ -17484,8 +17488,8 @@ a.step-item:hover {
 
 .step-item:not(:first-child):after {
     position: absolute;
-    left: -50%;
-    width: 100%;
+    left: calc(-50% + 8px);
+    width: calc(100% - 16px);
     content: "";
     transform: translateY(-50%)
 }
@@ -17498,13 +17502,25 @@ a.step-item:hover {
     box-sizing: content-box;
     display: block;
     content: "";
-    border: 2px solid #fff;
+    border: 2px solid transparent;
     border-radius: 50%;
     transform: translateX(-50%)
 }
 
-.step-item.active {
-    font-weight: 600
+.steps.steps-counter {
+    .step-item:not(:first-child):after {
+        left: calc(-50% + 16px) !important;
+        width: calc(100% - 32px) !important;
+    }
+}
+.steps-counter .step-item:before {
+    color:var(--completedLabel) !important;
+  }
+  .steps .step-item.active:before{
+          color : var(--currentStepLabel) !important;
+        }
+.step-item {
+    font-weight: 500;
 }
 
 .step-item.active:before {
@@ -17521,7 +17537,7 @@ a.step-item:hover {
 }
 
 .step-item.active~.step-item:before {
-    color: #656d77 !important
+    color: var(--incompletedLabel) !important
 }
 
 .steps-counter {
@@ -17549,7 +17565,8 @@ a.step-item:hover {
 .steps-counter .step-item:before {
     font-size: .75rem;
     line-height: 1.5rem;
-    content: counter(steps)
+    content: counter(steps);
+    font-weight: 500 !important;
 }
 
 .steps-counter .step-item.active~.step-item:before {
@@ -19156,4 +19173,4 @@ img {
         background: #1f2936;
         border-color: #dadcde
     }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index b77c83ba30..86019a158a 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -4760,15 +4760,18 @@ input[type="text"] {
 .folder-list {
   overflow-y: scroll;
   scrollbar-width: thin;
-  scrollbar-color: #888 transparent;  
+  scrollbar-color: #888 transparent;
+
   &:hover {
     &::-webkit-scrollbar {
       display: block;
       width: 5px;
     }
+
     &::-webkit-scrollbar-thumb {
       background-color: #888;
     }
+
     &::-webkit-scrollbar-track {
       background-color: transparent;
     }
@@ -6518,6 +6521,7 @@ div#driver-page-overlay {
 // steps-widget
 a.step-item-disabled {
   text-decoration: none;
+  opacity: 0.5;
 }
 
 .steps {
@@ -6527,34 +6531,45 @@ a.step-item-disabled {
 
 .step-item.active~.step-item:after,
 .step-item.active~.step-item:before {
-  background: #f3f5f5 !important;
+  background: var(--incompletedAccent) !important;
 }
 
 .step-item.active:before {
-  background: #ffffff !important;
+  background: transparent !important;
 }
 
 .steps .step-item.active:before {
-  border-color: #b4b2b2 !important;
+  border-color: var(--completedAccent) !important;
 }
 
 .steps-item {
   color: var(--textColor) !important;
 }
 
+
+.step-item {
+  &.completed-label {
+    color: var(--completedLabel) !important;
+  }
+
+  &.incompleted-label {
+    color: var(--incompletedLabel) !important;
+  }
+
+  &.active-label {
+    color: var(--currentStepLabel) !important;
+  }
+}
+
 .step-item:before {
-  background: var(--bgColor) !important;
+  background-color: var(--completedAccent) !important;
   // remaining code
 }
 
 .step-item:after {
-  background: var(--bgColor) !important;
+  background: var(--completedAccent) !important;
 }
 
-.step-item.active~.step-item {
-  color: var(--textColor) !important;
-  ;
-}
 
 .notification-center-badge {
 
@@ -9872,25 +9887,30 @@ tbody {
 .workspace-settings-table-wrap {
   max-width: 880px;
   margin: 0 auto;
-  .tj-user-table-wrapper{
+
+  .tj-user-table-wrapper {
     padding-right: 4px;
-   }
-   &:hover{
-     .tj-user-table-wrapper{
-       padding-right: 0px;
-     }
-     ::-webkit-scrollbar{
-       display: block;
-       width: 4px;
-     }
-     ::-webkit-scrollbar-track{
-       background: var(--base);
-     }
-     ::-webkit-scrollbar-thumb{
-       background: var(--slate7);
-       border-radius: 6px;
-     }
-   }
+  }
+
+  &:hover {
+    .tj-user-table-wrapper {
+      padding-right: 0px;
+    }
+
+    ::-webkit-scrollbar {
+      display: block;
+      width: 4px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: var(--base);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: var(--slate7);
+      border-radius: 6px;
+    }
+  }
 }
 
 
@@ -12056,8 +12076,10 @@ tbody {
     letter-spacing: -0.02em;
   }
 }
+
 .sidebar-list-wrap.sidebar-list-wrap-with-banner.isAdmin {
   height: calc(100vh - 371px);
+
   &.resource-limit-reached {
     height: calc(100vh - 371px);
   }
@@ -15801,6 +15823,7 @@ textarea.tj-text-input-widget{
 
 .rest-api-options-codehinter {
   height: 100%;
+
   .cm-content>.cm-line {
     // max-width: 357px !important;
   }
@@ -16232,19 +16255,20 @@ fieldset:disabled {
 }
 
 .datepicker-validation-half {
-  flex:1 1 calc(50% - 8px);
+  flex: 1 1 calc(50% - 8px);
 }
 
 
 .date-validation-wrapper {
 
   .field {
-    height:24px;
+    height: 24px;
   }
 
   .code-flex-wrapper {
-    flex-wrap:wrap;
+    flex-wrap: wrap;
   }
+
   margin-bottom: 3px;
 }
 
@@ -16253,57 +16277,60 @@ fieldset:disabled {
 }
 
 
-  .react-datepicker__day--disabled {
+.react-datepicker__day--disabled {
+  color: #ccc !important;
+}
+
+.react-datepicker__time-list {
+  li.react-datepicker__time-list-item--disabled.react-datepicker__time-list-item {
     color: #ccc !important;
   }
-  
-  .react-datepicker__time-list{
-      li.react-datepicker__time-list-item--disabled.react-datepicker__time-list-item {
-        color: #ccc !important;
-      }
-  }
-
-  .inspector-validation-date-picker {
-    .react-datepicker-wrapper{
-      input {
-        background-color: #fff;
-      }
-      input.dark-theme {
-        background-color: var(--slate3);
-        color: var(--slate12);
-      }
+}
 
+.inspector-validation-date-picker {
+  .react-datepicker-wrapper {
+    input {
+      background-color: #fff;
     }
-    
+
+    input.dark-theme {
+      background-color: var(--slate3);
+      color: var(--slate12);
+    }
+
   }
 
+}
 
 
-.datetimepicker-component, #component-portal, .custom-inspector-validation-time-picker {
+
+.datetimepicker-component,
+#component-portal,
+.custom-inspector-validation-time-picker {
 
   .datepicker-component {
     .react-datepicker {
       border-radius: 10px;
       box-shadow: 8px 8px 16px 0px #3032331A;
-      height:auto;
+      height: auto;
     }
   }
-  
+
 
   .react-datepicker-time-component {
     border-radius: 10px;
-    width:auto;
+    width: auto;
 
-    .custom-time-input{
-      border-left:none;
-      border-radius:10px;
+    .custom-time-input {
+      border-left: none;
+      border-radius: 10px;
       box-shadow: 8px 8px 16px 0px #3032331A;
     }
 
     .time-input-body {
-      padding-bottom:0px;
+      padding-bottom: 0px;
     }
-    
+
     .time-col {
       height: 200px;
     }
@@ -16312,28 +16339,32 @@ fieldset:disabled {
       border-radius: 10px;
       box-shadow: 8px 8px 16px 0px #3032331A;
     }
-    
-    .react-datepicker-time__input-container{
-      border-radius:10px;
+
+    .react-datepicker-time__input-container {
+      border-radius: 10px;
     }
   }
 
-  
+
   .dark-theme {
-    .react-datepicker__year-text, .react-datepicker__month-text {
+
+    .react-datepicker__year-text,
+    .react-datepicker__month-text {
       color: #fff;
     }
 
-    .react-datepicker__year-text:hover, .react-datepicker__month-text:hover {
-      background-color: #9ba1a6 ;
+    .react-datepicker__year-text:hover,
+    .react-datepicker__month-text:hover {
+      background-color: #9ba1a6;
     }
   }
 
-  .tj-datepicker-widget-year-selector:hover, .tj-datepicker-widget-month-selector:hover {
-    padding:1px 6px;
+  .tj-datepicker-widget-year-selector:hover,
+  .tj-datepicker-widget-month-selector:hover {
+    padding: 1px 6px;
   }
 
-  .react-datepicker{
+  .react-datepicker {
     display: grid;
     grid-auto-flow: column;
     border-top-right-radius: 0rem;
@@ -16346,48 +16377,49 @@ fieldset:disabled {
       justify-content: center;
       align-items: center;
     }
+
     .react-datepicker__year-wrapper {
-      display:grid;
-      grid-template-columns:repeat(3, 1fr);
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
       max-width: unset;
-      gap:10px;
+      gap: 10px;
     }
 
     .react-datepicker {
       border-radius: 10px;
     }
 
-    .react-datepicker__header--custom{
+    .react-datepicker__header--custom {
       height: 34px;
       margin-bottom: 14px;
     }
 
-    .react-datepicker__year--container{
-      height:208px;
+    .react-datepicker__year--container {
+      height: 208px;
       width: 250px;
       box-shadow: 8px 8px 16px 0px #3032331A;
       border-radius: 10px;
     }
 
     .react-datepicker__year-text--selected {
-        background-color: #4368E3 !important;
-        height:24px;
-        width:61.33px;
-        border-radius: 8px;
-        color: #fff ;
+      background-color: #4368E3 !important;
+      height: 24px;
+      width: 61.33px;
+      border-radius: 8px;
+      color: #fff;
     }
 
-    .react-datepicker__year-text{
-      font-family:'IBM Plex Sans' ;
+    .react-datepicker__year-text {
+      font-family: 'IBM Plex Sans';
       font-size: 12px;
       line-height: 16px;
       text-align: center;
       font-weight: 400;
-      height:24px;
-      width:61.33px;
+      height: 24px;
+      width: 61.33px;
       justify-content: center;
       align-items: center;
-      display:flex;
+      display: flex;
     }
   }
 
@@ -16402,42 +16434,42 @@ fieldset:disabled {
     }
 
     .react-datepicker__month-container {
-      height:208px;
+      height: 208px;
       width: 250px;
       box-shadow: 8px 8px 16px 0px #3032331A;
       border-radius: 10px;
     }
 
     .react-datepicker__monthPicker {
-      display:flex;
+      display: flex;
       flex-direction: column;
-      gap:10px;
+      gap: 10px;
     }
 
     .react-datepicker__month-text--selected {
       background-color: #4368E3 !important;
-      height:24px;
-      width:61.33px;
+      height: 24px;
+      width: 61.33px;
       border-radius: 8px;
-      color: #fff ;
+      color: #fff;
     }
 
     .react-datepicker__month-wrapper {
-      display:flex;
-      gap:24px;
+      display: flex;
+      gap: 24px;
     }
 
     .react-datepicker__month-text {
-      font-family:'IBM Plex Sans' ;
+      font-family: 'IBM Plex Sans';
       font-size: 12px;
       line-height: 16px;
       text-align: center;
       font-weight: 400;
-      height:24px;
-      width:61.33px;
+      height: 24px;
+      width: 61.33px;
       justify-content: center;
       align-items: center;
-      display:flex;
+      display: flex;
     }
   }
 
@@ -16447,7 +16479,7 @@ fieldset:disabled {
 
   .react-datepicker__month-container {
     width: 100%;
-    width:250px;
+    width: 250px;
   }
 
   .react-datepicker__input-time-container {
@@ -16462,12 +16494,12 @@ fieldset:disabled {
     color: #ccc !important;
     pointer-events: none;
   }
-  
+
   .react-datepicker-time__input {
     margin-left: 0px !important;
 
     .dark-time-input {
-      color:#f4f6fa !important;
+      color: #f4f6fa !important;
       background-color: var(--surfaces-surface-01) !important;
     }
   }
@@ -16475,15 +16507,15 @@ fieldset:disabled {
   .react-datepicker-wrapper {
     width: 100%;
   }
-  
+
   .react-datepicker-time__caption {
-    display:none;
+    display: none;
   }
 
   .custom-time-input {
     background-color: #fff;
     border-left: 1px solid #CCD1D5;
-    border-top-right-radius: 10px; 
+    border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
   }
 
@@ -16497,18 +16529,18 @@ fieldset:disabled {
     border-bottom: 1px solid #CCD1D5;
     font-weight: 500;
     font-family: 'IBM Plex Sans';
-    color:#ACB2B9;
+    color: #ACB2B9;
   }
-  
+
   .time-input-body {
     padding-bottom: 12px;
   }
 
   .time-col {
     margin-top: 5px;
-    overflow-y: auto; 
+    overflow-y: auto;
     overflow-x: hidden;
-    scrollbar-width: none; 
+    scrollbar-width: none;
     height: 265px;
     width: 62px;
   }
@@ -16516,12 +16548,12 @@ fieldset:disabled {
   .selected-time {
     background-color: #4368E3 !important;
     border-radius: 6px;
-    color:#fff;
+    color: #fff;
   }
 
   .time-item {
-    width: 50px; 
-    height:22px;
+    width: 50px;
+    height: 22px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -16861,16 +16893,17 @@ section.ai-message-prompt-input-wrapper {
 
 
 .tj-inspector-timepicker.dark-theme {
-  .react-datepicker  {
-    color:#f4f6fa !important;
+  .react-datepicker {
+    color: #f4f6fa !important;
     background-color: var(--surfaces-surface-01) !important;
   }
 
-  .react-datepicker, .react-datepicker__header {
+  .react-datepicker,
+  .react-datepicker__header {
     border: 1px solid var(--borders-default);
     background-color: #1f2936;
 
-    .react-datepicker-time__header{
+    .react-datepicker-time__header {
       color: #fff !important;
     }
 
@@ -16878,25 +16911,27 @@ section.ai-message-prompt-input-wrapper {
 }
 
 .tj-inspector-timepicker {
-  padding:0px !important;
+  padding: 0px !important;
 
   .react-datepicker__time-list {
-      scrollbar-width: none;
+    scrollbar-width: none;
   }
 
   .react-datepicker__triangle {
-    display:none;
+    display: none;
   }
 }
 
-.custom-inspector-validation-date-picker, .custom-inspector-validation-time-picker {
+.custom-inspector-validation-date-picker,
+.custom-inspector-validation-time-picker {
   flex-basis: 100% !important;
   font-family: monospace;
   font-size: 12px;
-  height:32px;
- 
+  height: 32px;
+
   .react-datepicker-wrapper {
     width: 100%;
+
     input {
       width: 100%;
       border: 1px solid var(--slate7);
@@ -16904,23 +16939,23 @@ section.ai-message-prompt-input-wrapper {
       background-color: var(--base);
       background-color: #fff;
       color: rgb(0, 92, 197);
-      height:32px;
+      height: 32px;
     }
 
     input.dark-theme {
       background-color: #272822;
       color: rgb(174, 129, 255);
-      
+
     }
   }
-  
+
 
 }
 
 .custom-inspector-validation-time-picker {
   .custom-time-input {
-    border-left:none;
-    border-radius:10px;
+    border-left: none;
+    border-radius: 10px;
   }
 
   .time-col {
@@ -16928,19 +16963,21 @@ section.ai-message-prompt-input-wrapper {
   }
 
   .react-datepicker__input-time-container {
-    border-radius:10px;
+    border-radius: 10px;
   }
-  
 
-  
+
+
 }
 
 .custom-inspector-validation-time-picker-popper {
-  border-radius:10px;
+  border-radius: 10px;
 }
 
-.input-date-display-format, .input-date-time-format {
+.input-date-display-format,
+.input-date-time-format {
   height: 60px;
+
   .hide-fx {
     opacity: 0;
     transition: opacity 0.3s ease;
@@ -16959,8 +16996,9 @@ section.ai-message-prompt-input-wrapper {
     color: white;
   }
 
-  .react-datepicker__day:hover, .react-datepicker__day--selecting-range-end {
-    background-color: var(--interactive-overlays-fill-hover) !important ;
+  .react-datepicker__day:hover,
+  .react-datepicker__day--selecting-range-end {
+    background-color: var(--interactive-overlays-fill-hover) !important;
   }
 
   .react-datepicker__day--keyboard-selected {
@@ -16983,15 +17021,17 @@ section.ai-message-prompt-input-wrapper {
 
 .tj-daterange-widget {
 
-  border-radius:10px;
+  border-radius: 10px;
   box-shadow: 0px 8px 16px 0px #3032331A !important;
   font-family: 'IBM Plex Sans';
 
-  .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range {
-    border-radius:0px;
+  .react-datepicker__day--in-selecting-range,
+  .react-datepicker__day--in-range {
+    border-radius: 0px;
     background-color: #4368E31A !important;
   }
-  .react-datepicker__header{
+
+  .react-datepicker__header {
     background-color: var(--surfaces-surface-01);
     padding: 6px 0px;
     border: none;
@@ -17002,44 +17042,48 @@ section.ai-message-prompt-input-wrapper {
     background-color: #ededee !important;
   }
 
-  .react-datepicker__day--selecting-range-start, .react-datepicker__day--selected, .react-datepicker__day--range-end {
-    border-radius:8px !important;
+  .react-datepicker__day--selecting-range-start,
+  .react-datepicker__day--selected,
+  .react-datepicker__day--range-end {
+    border-radius: 8px !important;
     background-color: #4368E3 !important;
     color: #fff !important;
   }
 
-  .react-datepicker__day--in-range:has(+ .react-datepicker__day--range-end),  .react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--selecting-range-end) {
+  .react-datepicker__day--in-range:has(+ .react-datepicker__day--range-end),
+  .react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--selecting-range-end) {
     border-top-right-radius: 8px;
     border-bottom-right-radius: 8px;
   }
-  
+
   .react-datepicker__day--in-range:has(+ .react-datepicker__day--range-end) {
     box-shadow: 10px 0 0 0px #4368E31A;
   }
 
-  .react-datepicker__day--range-start + .react-datepicker__day--in-range,  .react-datepicker__day--selecting-range-start + .react-datepicker__day--in-selecting-range{
+  .react-datepicker__day--range-start+.react-datepicker__day--in-range,
+  .react-datepicker__day--selecting-range-start+.react-datepicker__day--in-selecting-range {
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
   }
 
-  .react-datepicker__day--range-start + .react-datepicker__day--in-range {
+  .react-datepicker__day--range-start+.react-datepicker__day--in-range {
     box-shadow: -10px 0 0 0px #4368E31A;
   }
-  
+
   .react-datepicker__week {
 
-    .react-datepicker__day--in-range:first-of-type, 
-    .react-datepicker__day--in-selecting-range:first-of-type, 
-    .react-datepicker__day--outside-month + .react-datepicker__day--in-range,  
-    .react-datepicker__day--outside-month + .react-datepicker__day--in-selecting-range{
+    .react-datepicker__day--in-range:first-of-type,
+    .react-datepicker__day--in-selecting-range:first-of-type,
+    .react-datepicker__day--outside-month+.react-datepicker__day--in-range,
+    .react-datepicker__day--outside-month+.react-datepicker__day--in-selecting-range {
       border-top-left-radius: 8px;
       border-bottom-left-radius: 8px;
     }
 
-    .react-datepicker__day--in-range:last-of-type, 
-    .react-datepicker__day--in-selecting-range:last-of-type, 
-    .react-datepicker__day--in-range:has(+ .react-datepicker__day--outside-month), 
-    .react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--outside-month){
+    .react-datepicker__day--in-range:last-of-type,
+    .react-datepicker__day--in-selecting-range:last-of-type,
+    .react-datepicker__day--in-range:has(+ .react-datepicker__day--outside-month),
+    .react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--outside-month) {
       border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
     }
@@ -17057,8 +17101,8 @@ section.ai-message-prompt-input-wrapper {
   }
 
   .tj-datepicker-widget-right {
-      position: absolute;
-      right: 10px;
+    position: absolute;
+    right: 10px;
   }
 
   .tj-datepicker-widget-left {
@@ -17081,41 +17125,42 @@ section.ai-message-prompt-input-wrapper {
   }
 
   .react-datepicker {
-    border-radius:10px !important;
-    border:none;
+    border-radius: 10px !important;
+    border: none;
   }
-  
+
 }
 
-.tj-daterangepicker-widget-month-selector, .tj-daterangepicker-widget-year-selector {
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    padding-right: 4px;
-    /* Add some padding on the right to create space for custom arrow */
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23424242" width="18px" height="18px"><path d="M7 10l5 5 5-5z" /></svg>');
-    /* Add a custom arrow (you can use your own SVG) */
-    background-repeat: no-repeat;
-    background-position: right center;
-    border: none;
-    /* Remove the default border */
-    padding: 8px;
-    /* Adjust padding as needed */
-    cursor: pointer;
-    /* Add pointer cursor for better usability */
-    background: none;
-    padding: 0px;
-    height: 24px;
-    text-align: center;
-    color: var(--text-primary);
-    font-weight: 500; 
-    width:auto;
+.tj-daterangepicker-widget-month-selector,
+.tj-daterangepicker-widget-year-selector {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  padding-right: 4px;
+  /* Add some padding on the right to create space for custom arrow */
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23424242" width="18px" height="18px"><path d="M7 10l5 5 5-5z" /></svg>');
+  /* Add a custom arrow (you can use your own SVG) */
+  background-repeat: no-repeat;
+  background-position: right center;
+  border: none;
+  /* Remove the default border */
+  padding: 8px;
+  /* Adjust padding as needed */
+  cursor: pointer;
+  /* Add pointer cursor for better usability */
+  background: none;
+  padding: 0px;
+  height: 24px;
+  text-align: center;
+  color: var(--text-primary);
+  font-weight: 500;
+  width: auto;
 }
 
 
 .datepicker-widget {
-  .react-datepicker-wrapper{
-    width:100% !important;
+  .react-datepicker-wrapper {
+    width: 100% !important;
   }
 }
 
@@ -17129,26 +17174,29 @@ section.ai-message-prompt-input-wrapper {
 }
 
 .tj-daterange-widget.react-datepicker-month-component {
-  border-radius:10px;
+  border-radius: 10px;
   box-shadow: 0px 8px 16px 0px #3032331A !important;
   font-family: 'IBM Plex Sans';
+
   .react-datepicker__month-container {
     box-shadow: none !important;
   }
-  
+
 
   .react-datepicker__month-text {
-    height:26px !important;
+    height: 26px !important;
     margin: 0px;
-    width:100% !important;
+    width: 100% !important;
   }
 
-  .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range {
-    border-radius:0px;
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__month-text--in-range {
+    border-radius: 0px;
     background-color: #4368E31A !important;
-    color:#000;
+    color: #000;
   }
-  .react-datepicker__header{
+
+  .react-datepicker__header {
     background-color: var(--surfaces-surface-01);
     padding: 6px 0px;
     border: none;
@@ -17161,45 +17209,49 @@ section.ai-message-prompt-input-wrapper {
 
   }
 
-  .react-datepicker__month-text--selecting-range-start, .react-datepicker__month-text--selected, .react-datepicker__month-text--range-end {
-    border-radius:8px !important;
+  .react-datepicker__month-text--selecting-range-start,
+  .react-datepicker__month-text--selected,
+  .react-datepicker__month-text--range-end {
+    border-radius: 8px !important;
     background-color: #4368E3 !important;
     color: #fff !important;
   }
 
-  .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--range-end),  .react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--selecting-range-end) {
+  .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--range-end),
+  .react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--selecting-range-end) {
     border-top-right-radius: 8px;
     border-bottom-right-radius: 8px;
   }
-  
+
   .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--range-end) {
     box-shadow: 10px 0 0 0px #4368E31A;
   }
 
-  .react-datepicker__month-text--range-start + .react-datepicker__month-text--in-range,  .react-datepicker__month-text--selecting-range-start + .react-datepicker__month-text--in-selecting-range{
+  .react-datepicker__month-text--range-start+.react-datepicker__month-text--in-range,
+  .react-datepicker__month-text--selecting-range-start+.react-datepicker__month-text--in-selecting-range {
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
   }
 
-  .react-datepicker__month-text--range-start + .react-datepicker__month-text--in-range {
+  .react-datepicker__month-text--range-start+.react-datepicker__month-text--in-range {
     box-shadow: -10px 0 0 0px #4368E31A;
   }
-  
-  .react-datepicker__month-wrapper{
-    gap:0px !important;
 
-    .react-datepicker__month-text--in-range:first-of-type, 
-    .react-datepicker__month-text--in-selecting-range:first-of-type, 
-    .react-datepicker__month-text--outside-month-text + .react-datepicker__month-text--in-range,  
-    .react-datepicker__month-text--outside-month-text + .react-datepicker__month-text--in-selecting-range{
+  .react-datepicker__month-wrapper {
+    gap: 0px !important;
+
+    .react-datepicker__month-text--in-range:first-of-type,
+    .react-datepicker__month-text--in-selecting-range:first-of-type,
+    .react-datepicker__month-text--outside-month-text+.react-datepicker__month-text--in-range,
+    .react-datepicker__month-text--outside-month-text+.react-datepicker__month-text--in-selecting-range {
       border-top-left-radius: 8px;
       border-bottom-left-radius: 8px;
     }
 
-    .react-datepicker__month-text--in-range:last-of-type, 
-    .react-datepicker__month-text--in-selecting-range:last-of-type, 
-    .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--outside-month-text), 
-    .react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--outside-month-text){
+    .react-datepicker__month-text--in-range:last-of-type,
+    .react-datepicker__month-text--in-selecting-range:last-of-type,
+    .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--outside-month-text),
+    .react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--outside-month-text) {
       border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
     }
@@ -17219,44 +17271,47 @@ section.ai-message-prompt-input-wrapper {
 }
 
 .tj-daterange-widget.react-datepicker-year-component {
-  border-radius:10px;
+  border-radius: 10px;
   box-shadow: 0px 8px 16px 0px #3032331A !important;
   font-family: 'IBM Plex Sans';
+
   .react-datepicker__year-container {
     box-shadow: none !important;
   }
 
-  .react-datepicker__year-wrapper{
-    gap:0px !important;
+  .react-datepicker__year-wrapper {
+    gap: 0px !important;
 
-    .react-datepicker__year-text--in-range:first-of-type, 
-    .react-datepicker__year-text--in-selecting-range:first-of-type{
+    .react-datepicker__year-text--in-range:first-of-type,
+    .react-datepicker__year-text--in-selecting-range:first-of-type {
       border-top-left-radius: 8px;
       border-bottom-left-radius: 8px;
     }
 
-    .react-datepicker__year-text--in-range:last-of-type, 
-    .react-datepicker__year-text--in-selecting-range:last-of-type{
+    .react-datepicker__year-text--in-range:last-of-type,
+    .react-datepicker__year-text--in-selecting-range:last-of-type {
       border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
     }
   }
-  
+
 
   .react-datepicker__year-text {
-    height:26px !important;
+    height: 26px !important;
     margin-top: 5px !important;
-    margin-bottom:5px !important;
+    margin-bottom: 5px !important;
     margin: 0px;
-    width:62px !important;
+    width: 62px !important;
   }
 
-  .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range {
-    border-radius:0px;
+  .react-datepicker__year-text--in-selecting-range,
+  .react-datepicker__year-text--in-range {
+    border-radius: 0px;
     background-color: #4368E31A !important;
-    color:#000;
+    color: #000;
   }
-  .react-datepicker__header{
+
+  .react-datepicker__header {
     background-color: var(--surfaces-surface-01);
     padding: 6px 0px;
     border: none;
@@ -17269,31 +17324,35 @@ section.ai-message-prompt-input-wrapper {
 
   }
 
-  .react-datepicker__year-text--selecting-range-start, .react-datepicker__year-text--selected, .react-datepicker__year-text--range-end {
-    border-radius:8px !important;
+  .react-datepicker__year-text--selecting-range-start,
+  .react-datepicker__year-text--selected,
+  .react-datepicker__year-text--range-end {
+    border-radius: 8px !important;
     background-color: #4368E3 !important;
     color: #fff !important;
   }
 
-  .react-datepicker__year-text--in-range:has(+ .react-datepicker__year-text--range-end),  .react-datepicker__year-text--in-selecting-range:has(+ .react-datepicker__year-text--selecting-range-end) {
+  .react-datepicker__year-text--in-range:has(+ .react-datepicker__year-text--range-end),
+  .react-datepicker__year-text--in-selecting-range:has(+ .react-datepicker__year-text--selecting-range-end) {
     border-top-right-radius: 8px;
     border-bottom-right-radius: 8px;
   }
-  
+
   .react-datepicker__year-text--in-range:has(+ .react-datepicker__year-text--range-end) {
     box-shadow: 10px 0 0 0px #4368E31A;
   }
 
-  .react-datepicker__year-text--range-start + .react-datepicker__year-text--in-range,  .react-datepicker__year-text--selecting-range-start + .react-datepicker__year-text--in-selecting-range{
+  .react-datepicker__year-text--range-start+.react-datepicker__year-text--in-range,
+  .react-datepicker__year-text--selecting-range-start+.react-datepicker__year-text--in-selecting-range {
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
   }
 
-  .react-datepicker__year-text--range-start + .react-datepicker__year-text--in-range {
+  .react-datepicker__year-text--range-start+.react-datepicker__year-text--in-range {
     box-shadow: -10px 0 0 0px #4368E31A;
   }
-  
- 
+
+
 }
 
 .dark-theme {
@@ -18783,6 +18842,7 @@ section.ai-message-prompt-input-wrapper {
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
+
     &.dark {
       background: #FFFAEB !important;
     }
diff --git a/frontend/src/_ui/Select/SelectComponent.jsx b/frontend/src/_ui/Select/SelectComponent.jsx
index 2d62352000..5c86b0b405 100644
--- a/frontend/src/_ui/Select/SelectComponent.jsx
+++ b/frontend/src/_ui/Select/SelectComponent.jsx
@@ -24,6 +24,7 @@ export const SelectComponent = ({ options = [], value, onChange, closeMenuOnSele
     isDisabled = false,
     borderRadius,
     openMenuOnFocus = false,
+    customClassPrefix = '',
   } = restProps;
 
   const customStyles = useCustomStyles ? styles : defaultStyles(isDarkMode, width, height, styles, borderRadius);
@@ -74,7 +75,7 @@ export const SelectComponent = ({ options = [], value, onChange, closeMenuOnSele
       maxMenuHeight={maxMenuHeight}
       menuPortalTarget={useMenuPortal ? document.body : menuPortalTarget}
       closeMenuOnSelect={closeMenuOnSelect ?? true}
-      classNamePrefix={`${isDarkMode && 'dark-theme'} ${'react-select'}`}
+      classNamePrefix={`${customClassPrefix} ${isDarkMode && 'dark-theme'} ${'react-select'}`}
     />
   );
 };
diff --git a/server/data-migrations/1742369436314-StepsV2Migration.ts b/server/data-migrations/1742369436314-StepsV2Migration.ts
new file mode 100644
index 0000000000..dcb041db1f
--- /dev/null
+++ b/server/data-migrations/1742369436314-StepsV2Migration.ts
@@ -0,0 +1,81 @@
+import { Component } from '@entities/component.entity';
+import { EntityManager, MigrationInterface, QueryRunner } from 'typeorm';
+import { processDataInBatches } from '@helpers/migration.helper';
+
+export class StepsV2Migration1742369436314 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    const componentTypes = ['Steps'];
+    const batchSize = 100;
+    const entityManager = queryRunner.manager;
+
+    for (const componentType of componentTypes) {
+      await processDataInBatches(
+        entityManager,
+        async (entityManager: EntityManager) => {
+          return await entityManager.find(Component, {
+            where: { type: componentType },
+            order: { createdAt: 'ASC' },
+          });
+        },
+        async (entityManager: EntityManager, components: Component[]) => {
+          await this.processUpdates(entityManager, components);
+        },
+        batchSize
+      );
+    }
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+
+  private async processUpdates(entityManager, components) {
+    for (const component of components) {
+      const properties = component.properties;
+      const styles = component.styles;
+      const general = component.general;
+      const generalStyles = component.generalStyles;
+      const validation = component.validation;
+
+      if (styles.visibility) {
+        properties.visibility = styles.visibility;
+        delete styles.visibility;
+      }
+      if (styles.theme) {
+        properties['variant'] = styles.theme;
+        delete styles.theme;
+      }
+      if (styles.color) {
+        styles['completedAccent'] = styles.color;
+      }
+      delete styles.color;
+      if (styles.textColor) {
+        styles['completedLabel'] = styles.textColor;
+        styles['incompletedLabel'] = styles.textColor;
+        styles['currentStepLabel'] = styles.textColor;
+      }
+      delete styles.textColor;
+      if (properties.steps) {
+        properties['schema'] = properties.steps;
+        delete properties.steps;
+        properties['advanced'] = { value: '{{true}}' };
+      }
+
+      // if (properties.stepsSelectable) {
+      //   properties.disabledState = styles.disabledState;
+      //   delete styles.disabledState;
+      // }
+
+      // if (generalStyles?.boxShadow) {
+      //   styles.boxShadow = generalStyles?.boxShadow;
+      //   delete generalStyles?.boxShadow;
+      // }
+
+      await entityManager.update(Component, component.id, {
+        properties,
+        styles,
+        general,
+        generalStyles,
+        validation,
+      });
+    }
+  }
+}
diff --git a/server/src/modules/apps/services/component.service.ts b/server/src/modules/apps/services/component.service.ts
index a7538f5f40..fcc01e52f0 100644
--- a/server/src/modules/apps/services/component.service.ts
+++ b/server/src/modules/apps/services/component.service.ts
@@ -95,7 +95,9 @@ export class ComponentsService implements IComponentsService {
                 if (componentData.type === 'Table' && _.isArray(objValue)) {
                   return srcValue;
                 } else if (
-                  (componentData.type === 'DropdownV2' || componentData.type === 'MultiselectV2') &&
+                  (componentData.type === 'DropdownV2' ||
+                    componentData.type === 'MultiselectV2' ||
+                    componentData.type === 'Steps') &&
                   _.isArray(objValue)
                 ) {
                   return _.isArray(srcValue) ? srcValue : Object.values(srcValue);
diff --git a/server/src/modules/apps/services/widget-config/steps.js b/server/src/modules/apps/services/widget-config/steps.js
index c8b9753d9a..4400a19137 100644
--- a/server/src/modules/apps/services/widget-config/steps.js
+++ b/server/src/modules/apps/services/widget-config/steps.js
@@ -4,25 +4,38 @@ 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: 'Number', 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',
-          element: { type: 'object', object: { id: { type: 'number' } } },
+          element: { type: 'object' },
         },
         defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
       },
     },
-    currentStep: {
-      type: 'code',
-      displayName: 'Current step',
-      validation: {
-        schema: { type: 'number' },
-        defaultValue: 1,
-      },
-    },
     stepsSelectable: {
       type: 'toggle',
       displayName: 'Steps selectable',
@@ -30,6 +43,36 @@ export const stepsConfig = {
         schema: { type: 'boolean' },
         defaultValue: false,
       },
+      section: 'additionalActions',
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      validation: { schema: { type: 'boolean' } },
+      section: 'additionalActions',
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      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',
+      validation: {
+        schema: { type: 'number' },
+        defaultValue: 1,
+      },
     },
   },
   defaultSize: {
@@ -40,46 +83,126 @@ 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: 'visible', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisabled',
+      displayName: 'Set disabled',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{true}}', type: 'toggle' }],
+    },
+    {
+      handle: 'resetSteps',
+      displayName: 'Reset steps',
+      params: [],
+    },
+    {
+      handle: 'setStepVisible',
+      displayName: 'Set step visible',
+      params: [
+        {
+          handle: 'id',
+          displayName: 'Step id',
+        },
+        {
+          handle: 'visibility',
+          displayName: 'visibility',
+          defaultValue: '{{false}}',
+          type: 'toggle',
+        },
+      ],
+    },
+    {
+      handle: 'setStepDisable',
+      displayName: 'Set step disable',
+      params: [
+        {
+          handle: 'id',
+          displayName: 'Step id',
+        },
+        {
+          handle: 'disabled',
+          displayName: 'disabled',
+          defaultValue: '{{true}}',
+          type: 'toggle',
+        },
+      ],
+    },
+  ],
   events: {
     onSelect: { displayName: 'On select' },
   },
   styles: {
-    color: {
+    incompletedAccent: {
       type: 'colorSwatches',
-      displayName: 'Color',
+      displayName: 'Incompleted accent',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#CCD1D5',
+      },
+      accordian: 'steps',
+    },
+    incompletedLabel: {
+      type: 'colorSwatches',
+      displayName: 'Incompleted label',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#1B1F24',
+      },
+      accordian: 'steps',
+    },
+    completedAccent: {
+      type: 'colorSwatches',
+      displayName: 'Completed accent',
       validation: {
         schema: { type: 'string' },
         defaultValue: 'var(--primary-brand)',
       },
+      accordian: 'steps',
     },
-    textColor: {
+    completedLabel: {
       type: 'colorSwatches',
-      displayName: 'Text color',
+      displayName: 'Completed label',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: '#1B1F24',
       },
+      accordian: 'steps',
     },
-    theme: {
-      type: 'select',
-      displayName: 'Theme',
+    currentStepLabel: {
+      type: 'colorSwatches',
+      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 +215,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: '', id: 1, visible: { value: true }, disabled: { value: false } },
+          { name: 'step 2', tooltip: '', id: 2, visible: { value: true }, disabled: { value: false } },
+          { name: 'step 3', tooltip: '', id: 3, visible: { value: true }, disabled: { value: false } },
+          { name: 'step 4', tooltip: '', id: 4, visible: { value: true }, disabled: { value: false } },
+          { name: 'step 5', tooltip: '', id: 5, visible: { value: true }, disabled: { value: false } },
+        ],
       },
+      schema: {
+        value: `{{ [{ name: 'step 1', tooltip: '', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: '', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: '', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: '', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: '', id: 5,visible: true, disabled: false}]}}`,
+      },
+      disabledState: { value: '{{false}}' },
+      variant: { value: 'titles' },
       currentStep: { value: '{{3}}' },
       stepsSelectable: { value: true },
+      advanced: { value: `{{false}}` },
+      visibility: { value: '{{true}}' },
     },
     events: [],
     styles: {
       visibility: { value: '{{true}}' },
-      theme: { value: 'titles' },
-      color: { value: 'var(--primary-brand)' },
-      textColor: { value: '' },
+      // 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/src/modules/apps/util.service.ts b/server/src/modules/apps/util.service.ts
index f17fa876a7..3db7df4a99 100644
--- a/server/src/modules/apps/util.service.ts
+++ b/server/src/modules/apps/util.service.ts
@@ -490,7 +490,7 @@ export class AppsUtilService implements IAppsUtilService {
             if (['Table'].includes(currentComponentData?.component?.component) && isArray(objValue)) {
               return srcValue;
             } else if (
-              ['DropdownV2', 'MultiselectV2'].includes(currentComponentData?.component?.component) &&
+              ['DropdownV2', 'MultiselectV2', 'Steps'].includes(currentComponentData?.component?.component) &&
               isArray(objValue)
             ) {
               return isArray(srcValue) ? srcValue : Object.values(srcValue);
diff --git a/server/src/modules/data-queries/service.ts b/server/src/modules/data-queries/service.ts
index 48aa236cee..5337c6739a 100644
--- a/server/src/modules/data-queries/service.ts
+++ b/server/src/modules/data-queries/service.ts
@@ -22,7 +22,7 @@ export class DataQueriesService implements IDataQueriesService {
     protected readonly dataQueryRepository: DataQueryRepository,
     protected readonly dataQueryUtilService: DataQueriesUtilService,
     protected readonly dataSourceRepository: DataSourcesRepository
-  ) {}
+  ) { }
 
   async getAll(versionId: string) {
     const queries = await this.dataQueryRepository.getAll(versionId);
@@ -30,9 +30,6 @@ export class DataQueriesService implements IDataQueriesService {
 
     // serialize
     for (const query of queries) {
-      if (query.dataSource.type === DataSourceTypes.STATIC) {
-        delete query['dataSourceId'];
-      }
       delete query['dataSource'];
 
       const decamelizeQuery = decamelizeKeys(query);