diff --git a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss
index e80a75ddc..8b51c6f85 100644
--- a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss
+++ b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss
@@ -4,6 +4,10 @@
   display: flex;
   align-items: baseline;
   justify-content: flex-start;
+  border-bottom: 1px solid $color-brand-secondary-lightest;
+  gap: 8px;
+
+
 }
 
 .migration-vertical-stepper .stepper-title {
@@ -14,6 +18,9 @@
   line-height: 135%;
   color: $color-stepper-title;
   margin-bottom: $space-10;
+  margin: 10px 20px;
+
+
 }
 
 .migration-vertical-stepper .stepper-discription {
@@ -24,6 +31,7 @@
   line-height: 185%;
   color: $color-base-gray-20;
   margin-bottom: $space-10;
+  margin: 10px 20px;
 }
 
 .migration-vertical-stepper .summery-edit,
@@ -42,6 +50,7 @@
   width: 2rem;
   height: 2rem;
   left: -17px;
+  overflow-y: auto;
 }
 
 .stepper-titleNote {
@@ -98,3 +107,11 @@
   height: $space-24;
   margin-right: $space-10;
 }
+.step_block{
+  border-radius: 4px;
+  border: 1px solid $color-brand-secondary-lightest;
+  background-color: $color-brand-white-base;
+  padding:  24px 30px, 24px, 30px;
+  gap: 24px;
+  margin-bottom: 40px;
+}
\ No newline at end of file
diff --git a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx
index 8a16d5f89..d0f3c59cf 100644
--- a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx
+++ b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx
@@ -1,11 +1,7 @@
 import React, { useEffect, useImperativeHandle, useMemo, useState } from 'react';
-import { Icon, Tooltip } from '@contentstack/venus-components';
-
-// Utilities
-import { addDomainInPath } from '../../../utilities/functions';
-
-// Styles
 import './AutoVerticalStepper.scss';
+import { Tooltip, Heading } from '@contentstack/venus-components';
+import { addDomainInPath } from '../../../utilities/functions';
 
 export enum StepStatus {
   ACTIVE = 'ACTIVE',
@@ -17,7 +13,6 @@ type AutoVerticalStepperProps = {
   steps: any[];
   className?: string;
   stepComponentProps?: any;
-  stepTitleClassName?: string;
   isEdit: boolean;
   handleOnAllStepsComplete: (flag: boolean) => void;
 };
@@ -26,7 +21,6 @@ export type AutoVerticalStepperComponentHandles = {
   handleDynamicStepChange: (stepIndex: number, closeStep?: boolean) => void;
 };
 
-// eslint-disable-next-line react/display-name
 const AutoVerticalStepper = React.forwardRef<
   AutoVerticalStepperComponentHandles,
   React.PropsWithChildren<AutoVerticalStepperProps>
@@ -39,7 +33,6 @@ const AutoVerticalStepper = React.forwardRef<
       steps,
       className = '',
       stepComponentProps,
-      stepTitleClassName = '',
       isEdit = false,
       handleOnAllStepsComplete = () => {
         return;
@@ -54,27 +47,6 @@ const AutoVerticalStepper = React.forwardRef<
       }
     }, [stepComponentProps?.step?.step_id, stepComponentProps?.connector?.group_name]);
 
-    const StepperStepTitleCreator: (data: any) => JSX.Element = (data: any) => {
-      return (
-        <>
-          <div className="migration-vertical-stepper-container">
-            <div>
-              <span className="stepper-title">{data.title}</span>
-              <span className="stepper-titleNote">{data.titleNote ? data.titleNote : ''}</span>
-            </div>
-            {data.lock ? (
-              <Tooltip content={data.step_lock_text} position="right" type="primary" maxWidth={500}>
-                <div className="" style={{ cursor: 'not-allowed', marginLeft: '10px' }}>
-                  <img src={addDomainInPath('images/lock.png')} alt="lock-icon" />
-                </div>
-              </Tooltip>
-            ) : null}
-          </div>
-          <div className="stepper-discription"> {data.description}</div>
-        </>
-      );
-    };
-
     const handleStepChange = (stepIndex: number, closeStep = false) => {
       if (closeStep) {
         const data = stepStatus.map((s: any, i: number) => {
@@ -84,8 +56,6 @@ const AutoVerticalStepper = React.forwardRef<
           return s;
         });
         setStepStatus(data);
-
-        //Call when all steps are completed;
         handleOnAllStepsComplete(true);
       } else {
         const data: string[] = stepStatus.map((s: any, i: number) => {
@@ -98,16 +68,30 @@ const AutoVerticalStepper = React.forwardRef<
           }
         });
         setStepStatus(data);
-        // setTimeout(() => {
-        //   document.getElementById(steps?.[stepIndex + 1]?.step_id)?.scrollIntoView({
-        //     behavior: 'smooth',
-        //     block: 'center',
-        //     inline: 'nearest'
-        //   });
-        // }, 100);
       }
     };
 
+    const StepperStepTitleCreator: (data: any) => JSX.Element = (data: any) => {
+      return (
+        <>
+          <div className="migration-vertical-stepper-container">
+            <div>
+              <Heading className='stepper-title'tagName='h3' text={data.title}/>
+              <span className="stepper-titleNote">{data.titleNote ? data.titleNote : ''}</span>
+            </div>
+            {data.lock ? (
+              <Tooltip content={data.step_lock_text} position="right" type="primary" maxWidth={500}>
+                <div className="" style={{ cursor: 'not-allowed', marginLeft: '10px' }}>
+                  <img src={addDomainInPath('images/lock.png')} alt="lock-icon" />
+                </div>
+              </Tooltip>
+            ) : null}
+          </div>
+          <div className="stepper-discription"> {data.description}</div>
+        </>
+      );
+    };
+    
     const goToStep = (stepIndex: number) => {
       const data: string[] = stepStatus.map((s: any, i: number) => {
         if (s === StepStatus.ACTIVE && i !== stepIndex) {
@@ -124,12 +108,23 @@ const AutoVerticalStepper = React.forwardRef<
       setStepStatus(data);
     };
 
+    const summaryActivateStep = (e: any) => {
+      const index = e.currentTarget.getAttribute('data-step-index');
+      handleOnAllStepsComplete(false);
+
+      if (isEdit) {
+        goToStep(+index);
+      } else {
+        handleStepChange(index - 1);
+      }
+    };
+
     // Export Methods to Parent Component
     useImperativeHandle(ref, () => ({
       handleDynamicStepChange: (stepIndex, closeStep = false) =>
         handleStepChange(stepIndex, closeStep)
     }));
-
+    
     return useMemo(() => {
       const stepClassNameObject: any = {
         [StepStatus.ACTIVE]: 'active',
@@ -150,133 +145,68 @@ const AutoVerticalStepper = React.forwardRef<
         return stepStatus[idx];
       };
 
-      const summaryActivateStep = (e: any) => {
-        const index = e.currentTarget.getAttribute('data-step-index');
-        handleOnAllStepsComplete(false);
-
-        if (isEdit) {
-          goToStep(+index);
-        } else {
-          handleStepChange(index - 1);
-        }
-      };
-
       return (
-        <div className={`migration-vertical-stepper StepperWrapper ${className}`}>
+        <div className={`migration-vertical-stepper  ${className}`}>
           <ol className="Vertical">
             {steps?.map((step: any, index: number) => {
-              const shouldShowIcon =
-                step?.title !== 'Select Stack' && step?.title !== 'Upload File'
-                  ? !step?.lock
-                  : false;
-
-              const DataComponent = step?.data as React.ElementType;
-              const SummeryComponent = step?.summery as React.ElementType;
-
+              
               let stepClassName = stepClassNameObject[getStepStatus(index)];
               if (step?.lock) stepClassName = 'completed';
               const getGridientClass =
                 stepClassNameObject[`${getStepStatus(index)}__${getStepStatus(index + 1)}`];
+              
               return (
                 <li
                   id={step?.step_id}
-                  className={`${stepClassName} ${getGridientClass}`}
+                  className="step_block"
                   key={step?.step_id}
                   style={{ paddingBottom: '40px' }}
                 >
-                  <div className={`step__title ${stepTitleClassName}`}>
+                  <div className={`step__title `}>
                     {StepperStepTitleCreator(step)}
                   </div>
-                  {stepClassName === 'disabled' ? (
-                    <></>
-                  ) : (
-                    <>
-                      {stepClassName === 'active' ? (
-                        <div className="step-content-wrapper">
-                          <div className="action-content step-content">
-                            <div
-                              className={
-                                step?.step_id === 'Step1' ||
-                                step?.step_id === 'Step2' ||
-                                step?.step_id === 'Step3'
-                                  ? ''
-                                  : 'StepperWrapper__step'
+                  <div className="step-content-wrapper">
+                    <div className="action-content step-content">
+                      <div
+                        className={
+                          step?.step_id === 'Step1' ||
+                          step?.step_id === 'Step2' ||
+                          step?.step_id === 'Step3'
+                            ? ''
+                            : 'StepperWrapper__step'
+                        }
+                        onClick={
+                          !step?.lock
+                            ? summaryActivateStep
+                            : () => {
+                                return;
                               }
-                            >
-                              <DataComponent
-                                handleStepChange={handleStepChange}
-                                currentStep={index}
-                                {...(stepComponentProps && {
-                                  stepComponentProps: stepComponentProps
-                                })}
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      ) : (
-                        <></>
-                      )}
-                      {stepClassName === 'completed' ? (
-                        <div
-                          className={`action-summary-wrapper ${
-                            shouldShowIcon ? '' : 'step-content-wrapper step-summary-wrapper'
-                          }`}
-                          data-step-index={index}
-                          onClick={
-                            !step?.lock
-                              ? summaryActivateStep
-                              : () => {
-                                  return;
-                                }
-                          }
-                        >
-                          <div className="action-content step-content">
-                            <div className={'StepperWrapper__step'}>
-                              <SummeryComponent
-                                onClick={
-                                  !step?.lock
-                                    ? summaryActivateStep
-                                    : () => {
-                                        return;
-                                      }
-                                }
-                                currentStep={index}
-                                stepData={step}
-                                {...(stepComponentProps && {
-                                  stepComponentProps: {
-                                    ...stepComponentProps,
-
-                                    //pass onStepLockHandler
-                                    ...(step?.lock && {
-                                      handleOnStepLock: handleStepChange
-                                    })
-                                  }
-                                })}
-                              />
-
-                              {shouldShowIcon ? (
-                                <span className="summery-edit">
-                                  <Icon icon="Edit" size="small" version="v2" />
-                                </span>
-                              ) : (
-                                <></>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      ) : (
-                        <></>
-                      )}
-                    </>
-                  )}
+                        }
+                      >
+                        {step.data && (
+                          <step.data
+                            handleStepChange={handleStepChange}
+                            currentStep={index}
+                            {...(stepComponentProps && {
+                              stepComponentProps: stepComponentProps
+                            })}
+                          />
+                        )}
+                      </div>
+                    </div>
+                  </div>
                 </li>
               );
             })}
           </ol>
-        </div>
+
+          </div>
+        
       );
+      
     }, [steps, stepStatus]);
   }
 );
 
+AutoVerticalStepper.displayName= 'AutoverticalStepper';
 export default AutoVerticalStepper;