diff --git a/src/features/onboarding/onboarding-stepper.tsx b/src/features/onboarding/onboarding-stepper.tsx
index 4a097dcc..e1672fd7 100644
--- a/src/features/onboarding/onboarding-stepper.tsx
+++ b/src/features/onboarding/onboarding-stepper.tsx
@@ -2,19 +2,28 @@
 
 import { useOnboarding } from "@onboardjs/react";
 import { Progress } from "@/components/ui/progress";
+import { STEP_ORDER } from "@/features/onboarding/constants/steps";
 
 export const OnboardingStepper = () => {
-    const { state } = useOnboarding();
+  const { state } = useOnboarding();
 
-    if (!state) return null;
+  if (!state) return null;
 
-    return (
-        <div className="flex flex-col gap-2 w-full">
-            <div className="flex justify-between text-xs text-muted-foreground">
-                <span>Step {state.currentStepNumber} of {state.totalSteps}</span>
-                <span>{Math.round(state.progressPercentage)}%</span>
-            </div>
-            <Progress value={state.progressPercentage} />
-        </div>
-    );
+  const currentId = String(state.currentStep?.id ?? "");
+  const currentIndex = Math.max(0, STEP_ORDER.indexOf(currentId));
+  const totalSteps = STEP_ORDER.length;
+  const stepNumber = currentIndex + 1;
+  const progress = Math.round((currentIndex / (totalSteps - 1)) * 100);
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <div className="flex justify-between text-xs text-muted-foreground">
+        <span>
+          Step {stepNumber} of {totalSteps}
+        </span>
+        <span>{progress}%</span>
+      </div>
+      <Progress value={progress} />
+    </div>
+  );
 };