diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
index 9fcfaa6216..a3aad710ea 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -1,22 +1,40 @@
-import { ConfigProvider, Steps} from "antd";
+import { Steps } from "antd";
+import type { StepProps, StepsProps } from "antd/es/steps";
 import { BoolCodeControl, RadiusControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
-import { stringExposingStateControl, numberExposingStateControl } from "comps/controls/codeStateControl";
+import {
+  stringExposingStateControl,
+  numberExposingStateControl,
+} from "comps/controls/codeStateControl";
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { StepOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
-import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator, AnimationStyle, AnimationStyleType, DisabledStepStyle, DisabledStepStyleType } from "comps/controls/styleControlConstants";
-import styled, { css } from "styled-components";
+import {
+  StepsStyle,
+  StepsStyleType,
+  heightCalculator,
+  widthCalculator,
+  AnimationStyle,
+  AnimationStyleType,
+} from "comps/controls/styleControlConstants";
+import styled from "styled-components";
 import { UICompBuilder, withDefault } from "../../generators";
-import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
-import { selectDivRefMethods, } from "./selectInputConstants";
+import {
+  CommonNameConfig,
+  NameConfig,
+  withExposingConfigs,
+} from "../../generators/withExposing";
+import { selectDivRefMethods } from "./selectInputConstants";
 import { ScrollBar, Section, sectionNames } from "lowcoder-design";
-import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils";
+import {
+  hiddenPropertyView,
+  disabledPropertyView,
+} from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
-import { useContext, useState, useEffect } from "react";
+import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
 import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl";
@@ -29,7 +47,7 @@ const sizeOptions = [
   {
     label: trans("step.sizeDefault"),
     value: "default",
-  }
+  },
 ] as const;
 
 const typeOptions = [
@@ -44,7 +62,7 @@ const typeOptions = [
   {
     label: trans("step.typeInline"),
     value: "inline",
-  }
+  },
 ] as const;
 
 const directionOptions = [
@@ -55,209 +73,375 @@ const directionOptions = [
   {
     label: trans("step.directionVertical"),
     value: "vertical",
-  }
+  },
 ] as const;
 
 const statusOptions = [
   {
     label: trans("step.statusProcess"),
-    value: "process"
+    value: "process",
   },
   {
     label: trans("step.statusWait"),
-    value: "wait"
+    value: "wait",
   },
   {
     label: trans("step.statusFinish"),
-    value: "finish"
+    value: "finish",
   },
   {
     label: trans("step.statusError"),
-    value: "error"
+    value: "error",
   },
-]
+];
+
+type StepStatus = NonNullable<StepProps["status"]>;
+type StepsType = NonNullable<StepsProps["type"]>;
+
+const validStepStatuses: StepStatus[] = ["wait", "process", "finish", "error"];
+
+const getFiniteNumber = (value: unknown, fallback: number) => {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+};
+
+const getStepStatus = (status: unknown): StepStatus | undefined => {
+  return validStepStatuses.includes(status as StepStatus)
+    ? (status as StepStatus)
+    : undefined;
+};
+
+const getCurrentStepIndex = (
+  currentValue: unknown,
+  initialValue: number,
+  options: Array<{ value: number }>,
+) => {
+  const parsedValue = Number(currentValue);
+  if (!Number.isFinite(parsedValue) || options.length === 0) {
+    return 0;
+  }
+
+  const optionIndex = options.findIndex(
+    (option) => Number(option.value) === parsedValue,
+  );
+  if (optionIndex >= 0) {
+    return optionIndex;
+  }
+
+  const offsetIndex = parsedValue - initialValue;
+  return Number.isInteger(offsetIndex) &&
+    offsetIndex >= 0 &&
+    offsetIndex < options.length
+    ? offsetIndex
+    : 0;
+};
+
+const StyledWrapper = styled.div<{
+  $style: StepsStyleType;
+  $animationStyle: AnimationStyleType;
+  $autoHeight: boolean;
+  $disabled: boolean;
+}>`
+  ${(props) => props.$animationStyle}
+  width: 100%;
+  height: ${(props) => (props.$autoHeight ? "auto" : "100%")};
+  min-height: 24px;
+  max-width: ${(props) => widthCalculator(props.$style.margin)};
+  max-height: ${(props) => heightCalculator(props.$style.margin)};
+  overflow: hidden;
+  box-sizing: border-box;
+  margin: ${(props) => props.$style.margin};
+  rotate: ${(props) => props.$style.rotation};
+  padding: ${(props) => props.$style.padding};
+  border: ${(props) => props.$style.borderWidth}
+    ${(props) => props.$style.borderStyle} ${(props) => props.$style.border};
+  border-radius: ${(props) => props.$style.radius};
+  opacity: ${(props) => props.$style.opacity};
+  box-shadow: ${(props) =>
+    `${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
+  cursor: ${(props) => (props.$disabled ? "not-allowed" : "inherit")};
+  ${(props) => getBackgroundStyle(props.$style)}
+
+  .ant-steps-item-title,
+  .ant-steps-item-subtitle,
+  .ant-steps-item-description {
+    font-family: ${(props) => props.$style.fontFamily};
+    font-size: ${(props) => props.$style.textSize};
+    font-weight: ${(props) => props.$style.textWeight};
+    font-style: ${(props) => props.$style.fontStyle};
+    text-transform: ${(props) => props.$style.textTransform};
+    text-decoration: ${(props) => props.$style.textDecoration};
+  }
+
+  .ant-steps-item-title {
+    color: ${(props) => props.$style.stepTitleColor} !important;
+  }
+
+  .ant-steps-item-subtitle,
+  .ant-steps-item-description {
+    color: ${(props) => props.$style.stepDescriptionColor} !important;
+  }
+
+  .ant-steps-item-tail::after,
+  .ant-steps-item-title::after {
+    background-color: ${(props) => props.$style.stepLineColor} !important;
+  }
+
+  /* Icon backgrounds */
+  .ant-steps-item-process .ant-steps-item-icon {
+    background-color: ${(props) => props.$style.stepActiveColor} !important;
+    border-color: ${(props) => props.$style.stepActiveColor} !important;
+  }
+
+  .ant-steps-item-finish .ant-steps-item-icon,
+  .ant-steps-item-wait .ant-steps-item-icon,
+  .ant-steps-item-disabled .ant-steps-item-icon {
+    background-color: ${(props) => props.$style.stepIconBackground} !important;
+  }
+
+  .ant-steps-item-finish .ant-steps-item-icon {
+    border-color: ${(props) => props.$style.stepActiveColor} !important;
+  }
+
+  .ant-steps-item-wait .ant-steps-item-icon,
+  .ant-steps-item-disabled .ant-steps-item-icon {
+    border-color: ${(props) => props.$style.stepLineColor} !important;
+  }
+
+  .ant-steps-item-error .ant-steps-item-icon {
+    background-color: ${(props) => props.$style.stepErrorColor} !important;
+    border-color: ${(props) => props.$style.stepErrorColor} !important;
+  }
+
+  /* Icon text colors */
+  .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon,
+  .ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon {
+    color: ${(props) => props.$style.stepIconTextColor} !important;
+  }
+
+  .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {
+    color: ${(props) => props.$style.stepActiveColor} !important;
+  }
+
+  .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon,
+  .ant-steps-item-disabled .ant-steps-item-icon > .ant-steps-icon {
+    color: ${(props) => props.$style.stepDisabledColor} !important;
+  }
+
+  /* Completed/error line connectors */
+  .ant-steps-item-finish .ant-steps-item-tail::after,
+  .ant-steps-item-finish .ant-steps-item-title::after {
+    background-color: ${(props) => props.$style.stepActiveColor} !important;
+  }
+
+  .ant-steps-item-error .ant-steps-item-tail::after,
+  .ant-steps-item-error .ant-steps-item-title::after,
+  .ant-steps-item.ant-steps-next-error .ant-steps-item-title::after {
+    background-color: ${(props) => props.$style.stepErrorColor} !important;
+  }
+
+  /* Custom icons need explicit circle shape */
+  .ant-steps-item-custom .ant-steps-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 50% !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ant-steps-item-custom .ant-steps-item-icon > .ant-steps-icon {
+    line-height: 1;
+  }
+
+  /* Wait/disabled/error text overrides */
+  .ant-steps-item-wait .ant-steps-item-title,
+  .ant-steps-item-wait .ant-steps-item-subtitle,
+  .ant-steps-item-wait .ant-steps-item-description,
+  .ant-steps-item-disabled .ant-steps-item-title,
+  .ant-steps-item-disabled .ant-steps-item-subtitle,
+  .ant-steps-item-disabled .ant-steps-item-description {
+    color: ${(props) => props.$style.stepDisabledColor} !important;
+  }
+
+  .ant-steps-item-error .ant-steps-item-title,
+  .ant-steps-item-error .ant-steps-item-subtitle,
+  .ant-steps-item-error .ant-steps-item-description {
+    color: ${(props) => props.$style.stepErrorColor} !important;
+  }
+
+  /* Progress circle */
+  .ant-steps-progress-icon .ant-progress-circle-trail {
+    stroke: ${(props) => props.$style.stepIconBackground} !important;
+  }
+
+  .ant-steps-progress-icon .ant-progress-circle-path {
+    stroke: ${(props) => props.$style.stepActiveColor} !important;
+  }
+
+  /* Navigation variant */
+  .ant-steps-navigation .ant-steps-item::before {
+    background-color: ${(props) => props.$style.stepActiveColor} !important;
+  }
+
+  .ant-steps-navigation .ant-steps-item::after {
+    border-color: ${(props) => props.$style.stepLineColor} !important;
+  }
+`;
 
 const StepsChildrenMap = {
   autoHeight: AutoHeightControl,
   initialValue: numberExposingStateControl("1"),
   value: stringExposingStateControl("value"),
-  stepStatus : stringExposingStateControl("process"),
+  stepStatus: stringExposingStateControl("process"),
   stepPercent: numberExposingStateControl("60"),
   size: dropdownControl(sizeOptions, "default"),
-  displayType : dropdownControl(typeOptions, "default"),
+  displayType: dropdownControl(typeOptions, "default"),
   direction: dropdownControl(directionOptions, "horizontal"),
-  showDots : BoolControl,
-  showIcons : BoolControl,
-  selectable : BoolControl,
+  showDots: BoolControl,
+  showIcons: BoolControl,
+  selectable: BoolControl,
+  responsive: withDefault(BoolControl, true),
   labelPlacement: dropdownControl(directionOptions, "horizontal"),
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
   options: StepOptionControl,
-  style: styleControl(StepsStyle , 'style'),
+  style: styleControl(StepsStyle, "style"),
   viewRef: RefControl<HTMLDivElement>,
-  animationStyle: styleControl(AnimationStyle ,'animationStyle' ),
+  animationStyle: styleControl(AnimationStyle, "animationStyle"),
   showScrollBars: withDefault(BoolControl, false),
-  minHorizontalWidth: withDefault(RadiusControl, ''),
-  disabledStyle: styleControl(DisabledStepStyle, 'disabledStyle'),
+  minHorizontalWidth: withDefault(RadiusControl, "180px"),
 };
 
 let StepControlBasicComp = (function () {
   return new UICompBuilder(StepsChildrenMap, (props) => {
-    const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType, $disabledStyle: DisabledStepStyleType }>`
-    ${props=>props.$animationStyle}
-      height: 100%;
-      overflow-y: scroll;
-      min-height: 24px;
-      max-width: ${widthCalculator(props.style.margin)};
-      max-height: ${heightCalculator(props.style.margin)};
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      text-decoration: ${props.style.textDecoration};
-      font-style: ${props.style.fontStyle};
-      font-weight: ${props.style.textWeight};
-      font-size: ${props.style.textSize};
-      text-transform: ${props.style.textTransform};
-      margin: ${props.style.margin};
-      rotate: ${props.style.rotation};
-      padding: ${props.style.padding};
-      border: ${props.style.borderWidth} solid ${props.style.border};
-      border-radius: ${props.style.radius};
-      ${getBackgroundStyle(props.style)}
-      /* Disabled step styles */
-      .ant-steps-item-disabled {
-        .ant-steps-item-icon {
-          background: ${(props) => props.$disabledStyle?.disabledBackground};
-          border-color: ${(props) => props.$disabledStyle?.disabledBorder};
-
-          /* When using icon as dot */
-          .ant-steps-icon-dot {
-            background: ${(props) => props.$disabledStyle?.disabledBackground};
-          }
-
-          /* Default icon or custom icon */
-          .ant-steps-icon,
-          > * {
-            color: ${(props) => props.$disabledStyle?.disabledText};
-          }
-        }
-
-        .ant-steps-item-title,
-        .ant-steps-item-subtitle,
-        .ant-steps-item-description {
-          color: ${(props) => props.$disabledStyle?.disabledText};
-        }
-      }
-      .ant-steps-item { padding-top: 5px !important; }
-      .ant-steps.ant-steps-label-vertical.ant-steps-small .ant-steps-item-icon { margin-top: 17px !important; }
-      .ant-steps.ant-steps-label-vertical.ant-steps-default .ant-steps-item-icon { margin-top: 12px !important; }
-      .ant-steps.ant-steps-dot .ant-steps-item-process .ant-steps-icon .ant-steps-icon-dot { margin-top: 4px !important; }
-      .ant-steps.ant-steps-default .ant-steps-item-icon .ant-steps-icon-dot { margin-top: 9px !important; }
-      .ant-steps.ant-steps-small .ant-steps-item-icon .ant-steps-icon-dot { margin-top: 4px !important; }
-      .ant-steps.ant-steps-dot .ant-steps-item-title { margin-top: 10px !important; }
-      .ant-steps.ant-steps-default.ant-steps-with-progress.ant-steps-label-horizontal .ant-steps-item.ant-steps-item-custom div.ant-steps-item-icon { margin-top:4px !important; }
-      .ant-steps.ant-steps-default.ant-steps-with-progress.ant-steps-label-vertical .ant-steps-item.ant-steps-item-custom div.ant-steps-item-icon { margin-top:17px !important; }
-      .ant-steps.ant-steps-dot.ant-steps-small.ant-steps-with-progress .ant-steps-item-icon .ant-progress { inset-block-start: -8px !important; inset-inline-start: -11px !important; }
-      .ant-steps.ant-steps-dot.ant-steps-default.ant-steps-with-progress .ant-steps-item-icon .ant-progress { inset-block-start: -7px !important; inset-inline-start: -13px !important; }
-      .ant-steps.ant-steps-small.ant-steps-with-progress .ant-steps-item:not(.ant-steps-item-custom) .ant-progress { inset-block-start: -5px !important; inset-inline-start: -5px !important; }
-      .ant-steps.ant-steps-default.ant-steps-with-progress .ant-steps-item:not(.ant-steps-item-custom) .ant-progress { inset-block-start: -5px !important; inset-inline-start: -5px !important; }
-      .ant-steps.ant-steps-small.ant-steps-with-progress .ant-steps-item.ant-steps-item-custom .ant-progress { inset-block-start: -5px !important; inset-inline-start: -10px !important; }
-      .ant-steps.ant-steps-default.ant-steps-with-progress .ant-steps-item.ant-steps-item-custom .ant-progress { inset-block-start: -4px !important; inset-inline-start: -13px !important; }
-    `;
-
-    const [current, setCurrent] = useState(props.initialValue.value - 1); // Convert 1-based index to 0-based.
-
-    useEffect(() => {
-      const newValue = Number(props.value.value);
-      setCurrent(newValue - 1); // Adjust for 0-based index.
-    }, [props.value.value]);
+    const initialValue = Math.max(
+      1,
+      Math.floor(getFiniteNumber(props.initialValue.value, 1)),
+    );
+    const visibleOptions = props.options.filter((option) => !option.hidden);
+    const current = getCurrentStepIndex(
+      props.value.value,
+      initialValue,
+      visibleOptions,
+    );
+    const percent = Math.min(
+      100,
+      Math.max(0, getFiniteNumber(props.stepPercent.value, 0)),
+    );
+    const displayType = props.displayType as StepsType;
+    const currentStatus = getStepStatus(props.stepStatus.value) ?? "process";
+    const progressDot = displayType !== "inline" && props.showDots;
+    const showPercent =
+      displayType === "default" &&
+      currentStatus === "process" &&
+      !progressDot &&
+      !props.showIcons;
 
     const onChange = (index: number) => {
-      if (props.selectable == false) return;
-      const newIndex = Math.max(0, index);
-      if (props.options[newIndex]?.disabled) {
-           return;
-      }
-      setCurrent(newIndex);
-      if (props.options[newIndex]?.value !== undefined) {
-        props.value.onChange(newIndex + 1 + ""); // Convert back to 1-based index for display.
-        props.onEvent("change");
+      const selectedOption = visibleOptions[index];
+      if (!selectedOption || selectedOption.disabled) {
+        return;
       }
+      const selectedValue = Number.isFinite(Number(selectedOption.value))
+        ? selectedOption.value
+        : index + initialValue;
+
+      props.value.onChange(String(selectedValue));
+      props.onEvent("change");
     };
 
+    const items: StepProps[] = visibleOptions.map((option) => ({
+      title: option.label,
+      subTitle:
+        displayType === "inline" ? undefined : option.subTitle || undefined,
+      description: option.description || undefined,
+      disabled: props.disabled || option.disabled,
+      status: getStepStatus(option.status),
+      icon:
+        displayType !== "inline" && props.showIcons && hasIcon(option.icon)
+          ? option.icon
+          : undefined,
+      style: props.minHorizontalWidth
+        ? { minWidth: props.minHorizontalWidth }
+        : undefined,
+    }));
     return (
-        <ConfigProvider
-            theme={{
-              token: { 
-                colorPrimary: props.style.activeBackground,
-                colorText: props.style.titleText,
-                colorTextDescription: props.style.text,
-                fontFamily: props.style.fontFamily,
-              }
-            }}
-          >
-          <StyledWrapper style={props.style} $animationStyle={props.animationStyle} $disabledStyle={props.disabledStyle}>
-          <ScrollBar
-            style={{
-              height: props.autoHeight ? "auto" : "100%",
-              minWidth: props.minHorizontalWidth,
-              margin: "0px",
-              padding: "0px",
-            }}
-            overflow="scroll"
-            hideScrollbar={!props.showScrollBars}>
-            <Steps 
-              initial={props.initialValue.value -1}
-              current={current}
-              onChange={onChange}
-              percent={props.stepPercent.value}
-              status={props.stepStatus.value as "error" | "finish" | "process" | "wait"}
-              type={props.displayType}
-              size={props.size}
-              labelPlacement={props.labelPlacement}
-              progressDot={props.showDots}
-              direction={props.direction}
-            >
-              {props.options.map((option, index) => (
-                <Steps.Step 
-                  style={{minWidth:props.minHorizontalWidth || 'auto'}}
-                  key={index}
-                  title={option.label}
-                  subTitle={option.subTitle}
-                  description={option.description}
-                  disabled={option.disabled}
-                  status={option.status as "error" | "finish" | "wait" | "process" | undefined}
-                  icon={props.showIcons && hasIcon(option.icon) && option.icon || undefined}
-                />
-              ))}
-            </Steps>
-            </ScrollBar>
-          </StyledWrapper>
-        </ConfigProvider>
+      <StyledWrapper
+        ref={props.viewRef}
+        $style={props.style}
+        $animationStyle={props.animationStyle}
+        $autoHeight={props.autoHeight}
+        $disabled={props.disabled}
+        aria-disabled={props.disabled}
+      >
+        <ScrollBar
+          style={{
+            height: props.autoHeight ? "auto" : "100%",
+            width: "100%",
+            minWidth: props.minHorizontalWidth,
+            margin: "0px",
+            padding: "0px",
+          }}
+          overflow="scroll"
+          hideScrollbar={!props.showScrollBars}
+        >
+          <Steps
+            initial={initialValue - 1}
+            current={current}
+            onChange={props.selectable && !props.disabled ? onChange : undefined}
+            percent={showPercent ? percent : undefined}
+            status={currentStatus}
+            type={displayType}
+            size={props.size}
+            labelPlacement={props.labelPlacement}
+            progressDot={progressDot}
+            direction={props.direction}
+            responsive={props.responsive}
+            items={items}
+          />
+        </ScrollBar>
+      </StyledWrapper>
     );
-
   })
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
           {children.options.propertyView({})}
-          {children.initialValue.propertyView({ label: trans("step.initialValue"), tooltip : trans("step.initialValueTooltip")})}
+          {children.initialValue.propertyView({
+            label: trans("step.initialValue"),
+            tooltip: trans("step.initialValueTooltip"),
+          })}
         </Section>
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(
+          useContext(EditorContext).editorModeStatus,
+        ) && (
           <>
-          <Section name={sectionNames.interaction}>
-            {children.onEvent.getPropertyView()}
-            {disabledPropertyView(children)}
-            {hiddenPropertyView(children)}
-            {children.stepStatus.propertyView({label: trans("step.status")})}
-            {children.stepPercent.propertyView({label: trans("step.percent")})}
-            {children.selectable.propertyView({label: trans("step.selectable")})}
-          </Section></>
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {disabledPropertyView(children)}
+              {hiddenPropertyView(children)}
+              {children.stepStatus.propertyView({
+                label: trans("step.status"),
+              })}
+              {children.displayType.getView() == "default" &&
+                children.stepStatus.getView().value == "process" &&
+                !children.showDots.getView() &&
+                !children.showIcons.getView() &&
+                children.stepPercent.propertyView({
+                  label: trans("step.percent"),
+                })}
+              {children.selectable.propertyView({
+                label: trans("step.selectable"),
+              })}
+            </Section>
+          </>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(
+          useContext(EditorContext).editorModeStatus,
+        ) && (
           <Section name={sectionNames.layout}>
             {children.autoHeight.getPropertyView()}
             {children.size.propertyView({
@@ -272,43 +456,44 @@ let StepControlBasicComp = (function () {
               label: trans("step.direction"),
               radioButton: true,
             })}
-            { children.direction.getView() == "horizontal" && 
+            {children.responsive.propertyView({
+              label: trans("step.responsive"),
+            })}
+            {children.direction.getView() == "horizontal" &&
               children.labelPlacement.propertyView({
                 label: trans("step.labelPlacement"),
                 radioButton: true,
-              })
-            }
-            {children.direction.getView() == "horizontal" && (
+              })}
+            {children.direction.getView() == "horizontal" &&
               children.minHorizontalWidth.propertyView({
                 label: trans("prop.minHorizontalWidth"),
-                  placeholder: '100px',
-              })
-            )}
-            {!children.autoHeight.getView() && (
+                placeholder: "100px",
+              })}
+            {!children.autoHeight.getView() &&
               children.showScrollBars.propertyView({
-              label: trans("prop.scrollbar"),
-            })
-            )}
-            { children.displayType.getView() != "inline" && !children.showIcons.getView() && (
-              children.showDots.propertyView({label: trans("step.showDots")}
-            ))}
-            { children.displayType.getView() != "inline" && !children.showDots.getView() && (
-              children.showIcons.propertyView({label: trans("step.showIcons")}
-            ))}
+                label: trans("prop.scrollbar"),
+              })}
+            {children.displayType.getView() != "inline" &&
+              !children.showIcons.getView() &&
+              children.showDots.propertyView({ label: trans("step.showDots") })}
+            {children.displayType.getView() != "inline" &&
+              !children.showDots.getView() &&
+              children.showIcons.propertyView({
+                label: trans("step.showIcons"),
+              })}
           </Section>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(
+          useContext(EditorContext).editorModeStatus,
+        ) && (
           <>
-          <Section name={sectionNames.style}>
-            {children.style.getPropertyView()}
-          </Section>
-          <Section name={sectionNames.animationStyle} hasTooltip={true}>
-            {children.animationStyle.getPropertyView()}
-          </Section>
-          <Section name={trans("prop.disabledStyle")}>
-            {children.disabledStyle.getPropertyView()}
-          </Section>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.animationStyle} hasTooltip={true}>
+              {children.animationStyle.getPropertyView()}
+            </Section>
           </>
         )}
       </>
@@ -325,7 +510,7 @@ StepControlBasicComp = class extends StepControlBasicComp {
 
 export const StepComp = withExposingConfigs(StepControlBasicComp, [
   new NameConfig("value", trans("step.valueDesc")),
-  new NameConfig("stepStatus", trans("step.status") ),
+  new NameConfig("stepStatus", trans("step.status")),
   new NameConfig("stepPercent", trans("step.percent")),
   ...CommonNameConfig,
 ]);
diff --git a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
index 496c7beada..8f44aea750 100644
--- a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
@@ -743,6 +743,7 @@ let StepOption = new MultiCompBuilder(
     icon: IconControl,
     status: StringControl,
     disabled: BoolCodeControl,
+    hidden: BoolCodeControl,
   },
   (props) => props
 ).build();
@@ -758,6 +759,7 @@ StepOption = class extends StepOption implements OptionCompProperty {
         {this.children.icon.propertyView({ label: trans("stepOptionsControl.icon") })}
         {this.children.status.propertyView({ label: trans("stepOptionsControl.status") })}
         {disabledPropertyView(this.children)}
+        {hiddenPropertyView(this.children)}
       </>
     );
   }
@@ -934,4 +936,4 @@ export const ColoredTagOptionControl = optionsControl(ColoredTagOption, {
     { label: "Tag2", icon: "/icon:solid/tag", colorType: "preset", presetColor: "green" }
   ],
   uniqField: "label",
-});
\ No newline at end of file
+});
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 815184ea7f..f7ae5df1b9 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1775,22 +1775,57 @@ export const SegmentStyle = [
 
 export const StepsStyle = [
   {
-    name: "activeBackground",
+    name: "stepActiveColor",
     label: trans("style.accent"),
-    depName: "activeBackground",
-    transformer: handleToSegmentBackground,
+    depTheme: "primary",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
   },
   {
-    name: "titleText",
+    name: "stepErrorColor",
+    label: trans("style.validate"),
+    color: ERROR_COLOR,
+  },
+  {
+    name: "stepTitleColor",
     label: trans("title"),
-    depName: "text",
-    depType: DEP_TYPE.SELF,
+    color: "rgba(0,0,0,0.88)",
+  },
+  {
+    name: "stepDescriptionColor",
+    label: trans("stepOptionsControl.description"),
+    color: "rgba(0,0,0,0.45)",
+  },
+  {
+    name: "stepDisabledColor",
+    label: trans("disabled"),
+    color: "rgba(0,0,0,0.25)",
+  },
+  {
+    name: "stepIconTextColor",
+    label: trans("text"),
+    depName: "stepActiveColor",
+    depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
-  ...STYLING_FIELDS_SEQUENCE.filter(
-    (style) =>
-      ["background", "textSize", "textDecoration"].includes(style.name) ===
-      false
+  {
+    name: "stepLineColor",
+    label: trans("style.border"),
+    color: "rgba(5,5,5,0.06)",
+  },
+  {
+    name: "stepIconBackground",
+    label: trans("style.background"),
+    color: "rgba(0,0,0,0.04)",
+  },
+  TEXT_SIZE,
+  TEXT_WEIGHT,
+  FONT_FAMILY,
+  FONT_STYLE,
+  TEXT_TRANSFORM,
+  TEXT_DECORATION,
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter(
+    (style) => style.name !== "lineHeight",
   ),
   getBackground(),
   {
@@ -2680,4 +2715,3 @@ export function marginCalculator(margin: string) {
 }
 
 export type {ThemeDetail};
-