diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
index 1b50a6cc45..9e71a89f90 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
@@ -36,6 +36,15 @@ export const stepsConfig = {
         defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
       },
     },
+    stepsSelectable: {
+      type: 'toggle',
+      displayName: 'Steps selectable',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     disabledState: {
       type: 'toggle',
       displayName: 'Disable',
@@ -65,15 +74,7 @@ export const stepsConfig = {
         defaultValue: 1,
       },
     },
-    stepsSelectable: {
-      type: 'toggle',
-      displayName: 'Steps selectable',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: false,
-      },
-      section: 'additionalActions',
-    },
+
   },
   defaultSize: {
     width: 22,
@@ -216,15 +217,15 @@ export const stepsConfig = {
     properties: {
       steps: {
         value: [
-          { name: 'step 1', tooltip: 'some tooltip', id: 1, visible: { value: true }, disabled: { value: false } },
-          { name: 'step 2', tooltip: 'some tooltip', id: 2, visible: { value: true }, disabled: { value: false } },
-          { name: 'step 3', tooltip: 'some tooltip', id: 3, visible: { value: true }, disabled: { value: false } },
-          { name: 'step 4', tooltip: 'some tooltip', id: 4, visible: { value: true }, disabled: { value: false } },
-          { name: 'step 5', tooltip: 'some tooltip', id: 5, visible: { value: true }, disabled: { value: false } },
+          { 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: 'some tooltip', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: 'some tooltip', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: 'some tooltip', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: 'some tooltip', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: 'some tooltip', id: 5,visible: true, disabled: false}]}}`,
+        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' },
diff --git a/frontend/src/Editor/Components/Steps.jsx b/frontend/src/Editor/Components/Steps.jsx
index 24ee58366b..4662c92bc6 100644
--- a/frontend/src/Editor/Components/Steps.jsx
+++ b/frontend/src/Editor/Components/Steps.jsx
@@ -162,6 +162,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
         height,
         boxShadow,
         padding: theme === 'titles' ? `0 ${containerPadding}px` : 2,
+        paddingTop: theme === 'plain' ? `3px` : theme === 'numbers' ? `2px` : 0,
         ...dynamicStyle
       }}
       data-cy={dataCy}
@@ -178,7 +179,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
           return (
             <React.Fragment key={index}> {/* using index as key to avoid issues due to duplicate step ids */}
               <ToolTip
-                show={!step.disabled && !isDisabled}
+                show={!step.disabled && !isDisabled && step.tooltip}
                 message={step.tooltip || ''}
               >
                 <div
@@ -194,7 +195,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
                         className={`dot ${isCompleted ? 'completed' : isActive ? 'active' : 'incomplete'}`}
                         style={{
                           border: `2px solid ${isCompleted ? completedAccent : isActive ? completedAccent : incompletedAccent}`,
-                          backgroundColor: isActive ? 'white' : (isCompleted ? completedAccent : incompletedAccent)
+                          backgroundColor: isActive ? 'transparent' : (isCompleted ? completedAccent : incompletedAccent)
                         }}
                       />
                       {theme === 'titles' && (
diff --git a/frontend/src/Editor/Components/Steps.scss b/frontend/src/Editor/Components/Steps.scss
index e3237109b3..2dc71ca5b6 100644
--- a/frontend/src/Editor/Components/Steps.scss
+++ b/frontend/src/Editor/Components/Steps.scss
@@ -41,19 +41,19 @@
 
 			&.completed {
 				background-color: var(--completedAccent);
-				color: #fff;
+				color: var(--completedLabel);
 				border: 2px solid var(--completedAccent);
 			}
 
 			&.active {
-				background-color: white;
-				color: var(--completedAccent);
+				background-color: var(--surfaces-surface-01);
+				color: var(--currentStepLabel);
 				border: 2px solid var(--completedAccent);
 			}
 
 			&.incomplete {
 				background-color: var(--incompletedAccent);
-				color: #fff;
+				color: var(--incompletedLabel);
 				border: 2px solid var(--incompletedAccent);
 			}
 		}
@@ -108,7 +108,7 @@
 		}
 
 		&.active {
-			color: var(--currentStepLabel);
+			color: var(--completedLabel);
 		}
 
 		&.incomplete {
diff --git a/server/src/modules/apps/services/widget-config/steps.js b/server/src/modules/apps/services/widget-config/steps.js
index b9c575192a..4400a19137 100644
--- a/server/src/modules/apps/services/widget-config/steps.js
+++ b/server/src/modules/apps/services/widget-config/steps.js
@@ -36,6 +36,15 @@ export const stepsConfig = {
         defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
       },
     },
+    stepsSelectable: {
+      type: 'toggle',
+      displayName: 'Steps selectable',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     disabledState: {
       type: 'toggle',
       displayName: 'Disable',
@@ -65,15 +74,6 @@ export const stepsConfig = {
         defaultValue: 1,
       },
     },
-    stepsSelectable: {
-      type: 'toggle',
-      displayName: 'Steps selectable',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: false,
-      },
-      section: 'additionalActions',
-    },
   },
   defaultSize: {
     width: 22,
@@ -216,15 +216,15 @@ export const stepsConfig = {
     properties: {
       steps: {
         value: [
-          { name: 'step 1', tooltip: 'some tooltip', id: 1, visible: { value: true }, disabled: { value: false } },
-          { name: 'step 2', tooltip: 'some tooltip', id: 2, visible: { value: true }, disabled: { value: false } },
-          { name: 'step 3', tooltip: 'some tooltip', id: 3, visible: { value: true }, disabled: { value: false } },
-          { name: 'step 4', tooltip: 'some tooltip', id: 4, visible: { value: true }, disabled: { value: false } },
-          { name: 'step 5', tooltip: 'some tooltip', id: 5, visible: { value: true }, disabled: { value: false } },
+          { 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: 'some tooltip', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: 'some tooltip', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: 'some tooltip', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: 'some tooltip', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: 'some tooltip', id: 5,visible: true, disabled: false}]}}`,
+        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' },