diff --git a/packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.css b/packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.css
index 1e11feb3..122f1f11 100644
--- a/packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.css
+++ b/packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.css
@@ -79,32 +79,33 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: var(--app-neutral-color);
-  color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
 }
 
-.psdk-vertical-step-icon-content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.success .psdk-vertical-step-icon {
+  background-color: var(--stepper-completed-bg-color);
   color: var(--app-text-color);
 }
 
-.psdk-vertical-step-icon-selected {
-  margin-right: 12px;
+.future .psdk-vertical-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-vertical-step-icon {
   background-color: var(--app-primary-color);
   color: var(--app-text-color);
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
   flex-shrink: 0;
-  position: relative;
+}
+
+.psdk-vertical-step-icon-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .psdk-vertical-step-label {
@@ -119,16 +120,8 @@ mat-horizontal-stepper {
   font-weight: 500;
 }
 
-.psdk-vertical-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
+.current .psdk-vertical-step-label {
+  color: var(--text-primary-color);
 }
 
 .psdk-vertical-step-body {
@@ -150,7 +143,7 @@ mat-horizontal-stepper {
   border-left-style: solid;
   top: -16px;
   bottom: -16px;
-  border-left-color: rgba(0, 0, 0, 0.12);
+  border-left-color: var(--app-neutral-color);
 }
 
 .psdk-horizontal-stepper {
@@ -162,7 +155,6 @@ mat-horizontal-stepper {
   white-space: nowrap;
   display: flex;
   align-items: center;
-  text-align: left;
 }
 
 .psdk-horizontal-step-header {
@@ -175,20 +167,29 @@ mat-horizontal-stepper {
   height: 72px;
   overflow: hidden;
   align-items: center;
-  padding: 0 24px;
 }
 
 .psdk-horizontal-step-icon {
-  background-color: var(--app-neutral-color);
-  color: var(--app-text-color);
+  color: white;
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
+}
+
+.future .psdk-horizontal-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--app-primary-color);
+}
+
+.success .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--stepper-completed-bg-color);
 }
 
 .psdk-horizontal-step-icon-content {
@@ -199,45 +200,24 @@ mat-horizontal-stepper {
   transform: translate(-50%, -50%);
 }
 
-.psdk-horizontal-step-icon-selected {
-  background-color: var(--app-primary-color);
-  color: var(--app-text-color);
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
-}
-
 .psdk-horizontal-step-label {
   color: var(--text-secondary-color);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
   font-size: 14px;
   font-weight: 500;
   white-space: initial;
 }
 
-.psdk-horizontal-step-label-selected {
+.current .psdk-horizontal-step-label {
   color: var(--text-primary-color);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: initial;
+  margin-left: 8px;
 }
 
-.psdk-horizontal-step-line {
-  border-top-color: rgba(0, 0, 0, 0.12);
-  border-top-width: 1px;
-  border-top-style: solid;
+.flex-auto {
   flex: auto;
-  height: 0;
-  margin: 0 -16px;
+}
+
+.psdk-horizontal-step-line {
+  border-top: 1px solid var(--app-neutral-color);
   min-width: 32px;
+  margin: 0px 8px;
 }
diff --git a/packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.tsx b/packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.tsx
index 80c87d2a..19ca0a1a 100644
--- a/packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.tsx
+++ b/packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.tsx
@@ -27,51 +27,27 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
     currentStep = arNavigationSteps[lastActiveStepIndex >= 0 ? lastActiveStepIndex : 0];
   }
 
-  // const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
-  // const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
-
-  function _getVIconClass(status): string {
-    if (status === 'current') {
-      return 'psdk-vertical-step-icon-selected';
-    }
-
-    return 'psdk-vertical-step-icon';
-  }
-
-  function _getVLabelClass(status): string {
-    if (status === 'current') {
-      return 'psdk-vertical-step-label-selected';
-    }
-
-    return 'psdk-vertical-step-label';
-  }
-
   function _getVBodyClass(index: number): string {
-    if (index < arNavigationSteps.length - 1) {
-      return 'psdk-vertical-step-body psdk-vertical-step-line';
-    }
+    const baseClass = 'psdk-vertical-step-body';
+    const isNotLastStep = index < arNavigationSteps.length - 1;
 
-    return 'psdk-vertical-step-body';
+    return isNotLastStep ? `${baseClass} psdk-vertical-step-line` : baseClass;
   }
 
-  function _getHIconClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-icon-selected';
-    }
-
-    return 'psdk-horizontal-step-icon';
-  }
+  function _getAutoFlexClass(currentStep): string {
+    const currentStepIndex = arNavigationSteps.findIndex(step => step.ID === currentStep?.ID);
+    const totalSteps = arNavigationSteps.length;
+    const lastStep = arNavigationSteps[totalSteps - 1];
 
-  function _getHLabelClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-label-selected';
-    }
+    // Apply flex-auto class if current step is active OR if current step is second-to-last and the last step is active
+    const isCurrentStepActive = currentStep.visited_status === 'current';
+    const isSecondToLastWithActiveLastStep = currentStepIndex === totalSteps - 2 && lastStep?.visited_status === 'current';
 
-    return 'psdk-horizontal-step-label';
+    return isCurrentStepActive || isSecondToLastWithActiveLastStep ? 'flex-auto' : '';
   }
 
-  function _showHLine(index: number): boolean {
-    return index < arNavigationSteps.length - 1;
+  function isLastStep(index: number): boolean {
+    return index === arNavigationSteps.length - 1;
   }
 
   function buttonPress(sAction: string, sButtonType: string) {
@@ -86,13 +62,13 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             return (
               <React.Fragment key={mainStep.actionID}>
                 <div className='psdk-vertical-step'>
-                  <div className='psdk-vertical-step-header'>
-                    <div className={_getVIconClass(mainStep.visited_status)}>
+                  <div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
+                    <div className={`psdk-vertical-step-icon`}>
                       <div className='psdk-vertical-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getVLabelClass(mainStep.visited_status)}>{mainStep.name}</div>
+                    <div className='psdk-vertical-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
                   <div className={_getVBodyClass(index)}>
                     {mainStep?.steps && (
@@ -122,9 +98,11 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                       </ul>
                     )}
                     {!mainStep?.steps && mainStep.visited_status === 'current' && (
-                      <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                        {children}
-                      </AssignmentCard>
+                      <div style={{ paddingLeft: 20 }}>
+                        <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                          {children}
+                        </AssignmentCard>
+                      </div>
                     )}
                   </div>
                 </div>
@@ -138,19 +116,15 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             {arNavigationSteps.map((mainStep, index) => {
               return (
                 <React.Fragment key={mainStep.actionID}>
-                  <div className='psdk-horizontal-step-header'>
-                    <div className={_getHIconClass(mainStep)}>
+                  <div className={`psdk-horizontal-step-header ${mainStep.visited_status}`}>
+                    <div className='psdk-horizontal-step-icon'>
                       <div className='psdk-horizontal-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getHLabelClass(mainStep)}>
-                      <div className='psdk-horizontal-step-text-label' id='selected-label'>
-                        {mainStep.name}
-                      </div>
-                    </div>
+                    <div className='psdk-horizontal-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
-                  {_showHLine(index) && <div className='psdk-horizontal-step-line' />}
+                  {!isLastStep(index) && <div className={`psdk-horizontal-step-line ${_getAutoFlexClass(mainStep)}`} />}
                 </React.Fragment>
               );
             })}
diff --git a/packages/react-sdk-components/src/theme.ts b/packages/react-sdk-components/src/theme.ts
index 68fc12cc..07d4d33a 100644
--- a/packages/react-sdk-components/src/theme.ts
+++ b/packages/react-sdk-components/src/theme.ts
@@ -84,7 +84,8 @@ const lightThemeColours = {
     '--secondary-button-text-color': '#ffffff',
 
     '--text-primary-color': '#000',
-    '--text-secondary-color': '#c0c0c0'
+    '--text-secondary-color': '#c0c0c0',
+    '--stepper-completed-bg-color': '#218721'
   }
 };
 const darkThemeColours = {
@@ -129,7 +130,8 @@ const darkThemeColours = {
     '--secondary-button-text-color': '#1a103c',
 
     '--text-primary-color': '#e0e0e0',
-    '--text-secondary-color': '#c0c0c0'
+    '--text-secondary-color': '#c0c0c0',
+    '--stepper-completed-bg-color': '#158715'
   }
 };