diff --git a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
index faa1563ce8..29d41e709e 100644
--- a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
+++ b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
@@ -125,6 +125,13 @@ const OnboardingPage = (props: PageProps) => {
   };
   const currentStepIndex = steps.indexOf(currentStep);
 
+  const goToStep = (step: number) => {
+    const newStep = steps[step];
+    startTransition(() => {
+      router.push(`/getting-started/${stepTransform(newStep)}`);
+    });
+  };
+
   const goToNextStep = () => {
     const nextIndex = currentStepIndex + 1;
     const newStep = steps[nextIndex];
@@ -159,7 +166,7 @@ const OnboardingPage = (props: PageProps) => {
                   </p>
                 ))}
               </header>
-              <Steps maxSteps={steps.length} currentStep={currentStepIndex + 1} nextStep={goToNextStep} />
+              <Steps maxSteps={steps.length} currentStep={currentStepIndex + 1} navigateToStep={goToStep} />
             </div>
             <StepCard>
               <Suspense fallback={<Icon name="loader" />}>
diff --git a/packages/ui/components/form/step/Steps.tsx b/packages/ui/components/form/step/Steps.tsx
index 329842693e..29a331cc2c 100644
--- a/packages/ui/components/form/step/Steps.tsx
+++ b/packages/ui/components/form/step/Steps.tsx
@@ -3,7 +3,7 @@ import classNames from "@calcom/ui/classNames";
 type StepWithNav = {
   maxSteps: number;
   currentStep: number;
-  nextStep: () => void;
+  navigateToStep: (step: number) => void;
   disableNavigation?: false;
   stepLabel?: (currentStep: number, maxSteps: number) => string;
 };
@@ -11,7 +11,7 @@ type StepWithNav = {
 type StepWithoutNav = {
   maxSteps: number;
   currentStep: number;
-  nextStep?: undefined;
+  navigateToStep?: undefined;
   disableNavigation: true;
   stepLabel?: (currentStep: number, maxSteps: number) => string;
 };
@@ -23,7 +23,7 @@ const Steps = (props: StepsProps) => {
   const {
     maxSteps,
     currentStep,
-    nextStep,
+    navigateToStep,
     disableNavigation = false,
     stepLabel = (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}`,
   } = props;
@@ -35,7 +35,7 @@ const Steps = (props: StepsProps) => {
           return index <= currentStep - 1 ? (
             <div
               key={`step-${index}`}
-              onClick={() => nextStep?.()}
+              onClick={() => navigateToStep?.(index)}
               className={classNames(
                 "bg-inverted h-1 w-full rounded-[1px]",
                 index < currentStep - 1 && !disableNavigation ? "cursor-pointer" : ""
diff --git a/packages/ui/components/form/step/steps.test.tsx b/packages/ui/components/form/step/steps.test.tsx
index 122596f177..7edf91bdf0 100644
--- a/packages/ui/components/form/step/steps.test.tsx
+++ b/packages/ui/components/form/step/steps.test.tsx
@@ -13,7 +13,7 @@ const mockNavigateToStep = vi.fn();
 const Props = {
   maxSteps: MAX_STEPS,
   currentStep: CURRENT_STEP,
-  nextStep: mockNavigateToStep,
+  navigateToStep: mockNavigateToStep,
   stepLabel: (currentStep: number, totalSteps: number) => `Test Step ${currentStep} of ${totalSteps}`,
   disableNavigation: undefined,
 };
diff --git a/packages/ui/components/form/wizard/WizardForm.tsx b/packages/ui/components/form/wizard/WizardForm.tsx
index 10d836823c..2ca737ad90 100644
--- a/packages/ui/components/form/wizard/WizardForm.tsx
+++ b/packages/ui/components/form/wizard/WizardForm.tsx
@@ -46,7 +46,7 @@ export function WizardForm({
   defaultStep = 1,
   disableNavigation = false,
 }: WizardFormProps) {
-  const { currentStep, maxSteps, nextStep, prevStep, isFirstStep, isLastStep } = useWizardState(
+  const { currentStep, maxSteps, nextStep, goToStep, prevStep, isFirstStep, isLastStep } = useWizardState(
     defaultStep,
     steps.length
   );
@@ -71,10 +71,9 @@ export function WizardForm({
             <Steps
               maxSteps={maxSteps}
               currentStep={currentStep}
-              nextStep={nextStep}
+              navigateToStep={goToStep}
               stepLabel={stepLabel}
               data-testid="wizard-step-component"
-              disableNavigation={disableNavigation}
             />
           )}
         </div>
diff --git a/packages/ui/components/form/wizard/useWizardState.ts b/packages/ui/components/form/wizard/useWizardState.ts
index f52aeb4afb..496ed3975a 100644
--- a/packages/ui/components/form/wizard/useWizardState.ts
+++ b/packages/ui/components/form/wizard/useWizardState.ts
@@ -25,7 +25,8 @@ export function useWizardState(defaultStep = 1, maxSteps: number) {
 
   const goToStep = useCallback(
     (newStep: number) => {
-      setStep(Math.min(Math.max(newStep, 1), maxSteps));
+      // Convert 0-based newStep to 1-based for URL (?step=1), So actual step = newStep+1
+      setStep(Math.min(Math.max(newStep + 1, 1), maxSteps));
     },
     [setStep, maxSteps]
   );
diff --git a/packages/ui/components/layout/WizardLayout.tsx b/packages/ui/components/layout/WizardLayout.tsx
index e9dfb30688..fddd717828 100644
--- a/packages/ui/components/layout/WizardLayout.tsx
+++ b/packages/ui/components/layout/WizardLayout.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 // eslint-disable-next-line no-restricted-imports
-import { noop } from "lodash";
 import { usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Toaster } from "sonner";
@@ -58,7 +57,7 @@ export function WizardLayout({
                   </>
                 )}
               </header>
-              <Steps maxSteps={maxSteps} currentStep={currentStep} nextStep={noop} />
+              <Steps maxSteps={maxSteps} currentStep={currentStep} disableNavigation />
             </div>
             <StepCard>{children}</StepCard>
           </div>