diff --git a/packages/manager-react-components/src/components/container/step/Step.component.tsx b/packages/manager-react-components/src/components/container/step/Step.component.tsx
index 8c179472842f..00d32b72b0ec 100644
--- a/packages/manager-react-components/src/components/container/step/Step.component.tsx
+++ b/packages/manager-react-components/src/components/container/step/Step.component.tsx
@@ -39,10 +39,11 @@ export type TStepProps = {
     label: string | JSX.Element;
     isDisabled?: boolean;
   };
-  cancel?: {
+  skip?: {
     action: (id: string) => void;
     label: string | JSX.Element;
     isDisabled?: boolean;
+    hint?: string;
   };
   children?: JSX.Element | JSX.Element[];
 };
@@ -58,88 +59,94 @@ export const StepComponent = ({
   children,
   next,
   edit,
-  cancel,
-}: TStepProps): JSX.Element => {
-  return (
-    <section className="flex flex-row border-0 border-t-[1px] border-solid border-t-[#b3b3b3] pt-5 mb-5">
-      <div className="basis-[40px]">
-        {isChecked ? (
-          <OsdsIcon
-            size={ODS_ICON_SIZE.sm}
-            name={ODS_ICON_NAME.CHECK}
-            className={'mr-2'}
-            color={ODS_THEME_COLOR_INTENT.primary}
-          />
-        ) : (
+  skip,
+}: TStepProps): JSX.Element => (
+  <section className="flex flex-row border-0 border-t-[1px] border-solid border-t-[#b3b3b3] pt-5 mb-5">
+    <div className="basis-[40px]">
+      {isChecked ? (
+        <OsdsIcon
+          size={ODS_ICON_SIZE.sm}
+          name={ODS_ICON_NAME.CHECK}
+          className="mr-2"
+          color={ODS_THEME_COLOR_INTENT.primary}
+        />
+      ) : (
+        <div
+          className={clsx(
+            'flex justify-center items-center font-bold border-2 border-solid rounded-full h-10 w-10',
+            isOpen ? 'border-[#0050d7]' : 'border-[grey]',
+          )}
+        >
+          <OsdsText
+            level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+            size={ODS_THEME_TYPOGRAPHY_SIZE._500}
+            color={
+              isOpen
+                ? ODS_THEME_COLOR_INTENT.text
+                : ODS_THEME_COLOR_INTENT.default
+            }
+          >
+            {order}
+          </OsdsText>
+        </div>
+      )}
+    </div>
+    <div className="basis-full px-5">
+      <div className="flex flex-col md:flex-row">
+        <div
+          className={clsx(
+            'font-sans font-normal p-0 m-0 w-full md:w-5/6 flex',
+            isOpen ? 'text-[#00185e]' : 'text-[grey]',
+          )}
+        >
           <div
             className={clsx(
-              'flex justify-center items-center font-bold border-2 border-solid rounded-full h-10 w-10',
-              isOpen ? 'border-[#0050d7]' : 'border-[grey]',
+              'leading-10',
+              isOpen ? 'text-[1.625rem]' : 'text-[1.25rem]',
             )}
           >
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._500}
-              color={
-                isOpen
-                  ? ODS_THEME_COLOR_INTENT.text
-                  : ODS_THEME_COLOR_INTENT.default
-              }
+            {title}
+          </div>
+          {skip?.hint && <div className="leading-10 ml-2">{skip.hint}</div>}
+        </div>
+        {edit?.action && isLocked && (
+          <div className="text-2xl w-full md:w-1/6" data-testid="edit">
+            <OsdsLink
+              data-testid="edit-cta"
+              className="float-left md:float-right"
+              color={ODS_THEME_COLOR_INTENT.primary}
+              {...(edit.isDisabled ? { disabled: true } : {})}
+              onClick={() => {
+                if (!edit.isDisabled) {
+                  edit.action(id);
+                }
+              }}
             >
-              {order}
-            </OsdsText>
+              {edit.label}
+            </OsdsLink>
           </div>
         )}
       </div>
-      <div className="basis-full px-5">
-        <div className="flex flex-col md:flex-row">
+      {isOpen && (
+        <>
+          {subtitle && <div>{subtitle}</div>}
           <div
+            data-testid="content"
             className={clsx(
-              'font-sans font-normal p-0 m-0 w-full md:w-5/6 leading-10',
-              isOpen
-                ? 'text-[1.625rem] text-[#00185e]'
-                : 'text-[1.25rem] text-[grey]',
+              'mt-5',
+              isLocked && 'cursor-not-allowed pointer-events-none opacity-50',
             )}
           >
-            {title}
-          </div>
-          {edit?.action && isLocked && (
-            <div className="text-2xl w-full md:w-1/6" data-testid="edit">
-              <OsdsLink
-                data-testid="edit-cta"
-                className="float-left md:float-right"
-                color={ODS_THEME_COLOR_INTENT.primary}
-                {...(edit.isDisabled ? { disabled: true } : {})}
-                onClick={() => {
-                  if (!edit.isDisabled) {
-                    edit.action(id);
-                  }
-                }}
-              >
-                {edit.label}
-              </OsdsLink>
-            </div>
-          )}
-        </div>
-        {isOpen && (
-          <>
-            {subtitle && <div>{subtitle}</div>}
-            <div
-              data-testid="content"
-              className={clsx(
-                'mt-5',
-                isLocked && 'cursor-not-allowed pointer-events-none opacity-50',
-              )}
+            <Suspense
+              fallback={<OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />}
             >
-              <Suspense
-                fallback={<OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />}
-              >
-                {children}
-              </Suspense>
-            </div>
-            {!isLocked && (next || cancel) && (
-              <div className="flex mt-6">
-                {next && (
+              {children}
+            </Suspense>
+          </div>
+          {!isLocked && (
+            <div className="flex mt-6">
+              {next?.action && (
+                <div data-testid="next">
                   <OsdsButton
                     data-testid="next-cta"
                     size={ODS_BUTTON_SIZE.md}
@@ -152,29 +159,30 @@ export const StepComponent = ({
                   >
                     {next.label}
                   </OsdsButton>
-                )}
-                {cancel && (
+                </div>
+              )}
+              {skip?.action && (
+                <div>
                   <OsdsButton
-                    data-testid="cancel-cta"
                     size={ODS_BUTTON_SIZE.md}
                     color={ODS_THEME_COLOR_INTENT.primary}
                     variant={ODS_BUTTON_VARIANT.ghost}
                     onClick={() => {
-                      cancel.action(id);
+                      skip.action(id);
                     }}
                     className="w-fit"
-                    {...(cancel.isDisabled ? { disabled: true } : {})}
+                    {...(skip.isDisabled ? { disabled: true } : {})}
                   >
-                    {cancel.label}
+                    {skip.label}
                   </OsdsButton>
-                )}
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </section>
-  );
-};
+                </div>
+              )}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  </section>
+);
 
 export default StepComponent;