diff --git a/frontend/src/Editor/Components/Steps.jsx b/frontend/src/Editor/Components/Steps.jsx
index ef245f9d74..c22760d23a 100644
--- a/frontend/src/Editor/Components/Steps.jsx
+++ b/frontend/src/Editor/Components/Steps.jsx
@@ -38,6 +38,11 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
     '--currentStepLabel': currentStepLabel === '#1B1F24' ? 'var(--text-primary)' : currentStepLabel,
   };
   const theme = properties.variant;
+  console.log(theme);
+  console.log(properties);
+  console.log(styles);
+  console.log(completedLabel, 'completed');
+
   const activeStepHandler = (id) => {
     const step = filteredSteps.find((item) => item.id == id);
     if (step) {
@@ -112,70 +117,83 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
 
   return (
     isVisible && (
-      <div
-        className={`steps ${theme == 'numbers' && 'steps-counter '}`}
-        style={{
-          color: textColor,
-          height,
-          boxShadow,
-          opacity: isDisabled ? 0.5 : 1,
-          ...(theme === 'numbers'
-            ? {
-                paddingTop: 4,
-              }
-            : theme === 'plain'
-            ? {
-                paddingTop: 10,
-              }
-            : {}),
-        }}
-        data-cy={dataCy}
-      >
-        {filteredSteps?.map((item, index) => {
-          const isStepDisabled = item.disabled;
-          return (
-            <ToolTip
-              key={item.id + index + item.name}
-              show={!item.disabled && !isDisabled}
-              message={item.tooltip || ''}
-            >
-              <a
-                className={`step-item ${item.id == activeStepId && 'active'} ${
-                  !(!isDisabled && !isStepDisabled) && 'step-item-disabled'
-                }  ${color && `step-${color}`} ${
+      <>
+        <style>
+          {`
+      .steps-counter .step-item:before {
+        color:${completedLabel} !important;
+      }
+        .steps .step-item.active:before{
+          color : ${currentStepLabel} !important;
+        }
+        `}
+        </style>
+        <div
+          className={`steps ${theme == 'numbers' && 'steps-counter '}`}
+          style={{
+            color: textColor,
+            height,
+            boxShadow,
+            opacity: isDisabled ? 0.5 : 1,
+            ...(theme === 'numbers'
+              ? {
+                  paddingTop: 4,
+                }
+              : theme === 'plain'
+              ? {
+                  paddingTop: 10,
+                }
+              : {}),
+          }}
+          data-cy={dataCy}
+        >
+          {filteredSteps?.map((item, index) => {
+            const isStepDisabled = item.disabled;
+            return (
+              <ToolTip
+                key={item.id + index + item.name}
+                show={!item.disabled && !isDisabled}
+                message={item.tooltip || ''}
+              >
+                <a
+                  className={`step-item ${item.id == activeStepId && 'active'} ${
+                    !(!isDisabled && !isStepDisabled) && 'step-item-disabled'
+                  }  ${color && `step-${color}`} 
+                ${
                   index < currentStepIndex
                     ? 'completed-label'
                     : index == currentStepIndex
                     ? 'active-label'
                     : 'incompleted-label'
                 }`}
-                data-bs-toggle="tooltip"
-                title={item?.tooltip}
-                onClick={() => stepsSelectable && !isDisabled && !isStepDisabled && activeStepHandler(item.id)}
-                style={{
-                  ...dynamicStyle,
-                  overflow: 'visible',
-                  minWidth: 0,
-                  flex: 1,
-                }}
-              >
-                <div
+                  data-bs-toggle="tooltip"
+                  title={item?.tooltip}
+                  onClick={() => stepsSelectable && !isDisabled && !isStepDisabled && activeStepHandler(item.id)}
                   style={{
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    maxWidth: '100%',
-                    paddingLeft: index >= 0 ? 5 : 0,
-                    paddingRight: index < filteredSteps.length - 1 ? 5 : 0,
+                    ...dynamicStyle,
+                    overflow: 'visible',
+                    minWidth: 0,
+                    flex: 1,
                   }}
                 >
-                  {theme == 'titles' && item.name}
-                </div>
-              </a>
-            </ToolTip>
-          );
-        })}
-      </div>
+                  <div
+                    style={{
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      maxWidth: '100%',
+                      paddingLeft: index >= 0 ? 5 : 0,
+                      paddingRight: index < filteredSteps.length - 1 ? 5 : 0,
+                    }}
+                  >
+                    {theme == 'titles' && item.name}
+                  </div>
+                </a>
+              </ToolTip>
+            );
+          })}
+        </div>
+      </>
     )
   );
 };