diff --git a/apps/oneclient/frontend/src/components/Stepper.tsx b/apps/oneclient/frontend/src/components/Stepper.tsx
index 2a2d6850..b941e42f 100644
--- a/apps/oneclient/frontend/src/components/Stepper.tsx
+++ b/apps/oneclient/frontend/src/components/Stepper.tsx
@@ -3,16 +3,17 @@ import { useMatchRoute } from '@tanstack/react-router';
 
 interface VerticalStepperProps {
 	steps: Array<OnboardingStep>;
+	currentLinearIndex: number;
 	linearSteps: Array<Omit<OnboardingStep, 'subSteps'>>;
 };
 
-export function Stepper({ steps, linearSteps }: VerticalStepperProps) {
-	const matchRoute = useMatchRoute();
+export function Stepper({ steps, linearSteps, currentLinearIndex }: VerticalStepperProps) {
+	// const matchRoute = useMatchRoute();
 
-	const currentLinearIndex = linearSteps.findIndex(step =>
-		matchRoute({ to: step.path }));
+	// const currentLinearIndex = linearSteps.findIndex(step =>
+	// 	matchRoute({ to: step.path }));
 
-	const progressHeight = currentLinearIndex >= 0 ? `${(currentLinearIndex / (linearSteps.length - 1)) * 100}%` : '0%';
+	const progressHeight = currentLinearIndex >= 0 ? `${Math.min((currentLinearIndex + 0.5) / (linearSteps.length - 1), 1) * 100}%` : '0%';
 
 	// const nextStep = () => {
 	// 	if (currentStep < steps.length - 1)
@@ -50,15 +51,17 @@ export function Stepper({ steps, linearSteps }: VerticalStepperProps) {
 								// onClick={() => goToStep(index)}
 							>
 								<div className="ml-8">
-									<span className={`
+									<span
+										className="
                     transition-all duration-300 font-medium
-                    ${index === currentLinearIndex
-								? 'text-white text-lg'
-								: index < currentLinearIndex
-									? ' text-base'
-									: 'text-gray-400 text-base'
-							}
-                  `}
+					text-gray-400
+					text-base
+					data-active:text-white
+					data-active:text-lg
+					data-complete:text-base
+                  "
+										data-active={index === currentLinearIndex || null}
+										data-complete={index < currentLinearIndex || null}
 									>
 										{step.title}
 									</span>
diff --git a/apps/oneclient/frontend/src/routes/onboarding/route.tsx b/apps/oneclient/frontend/src/routes/onboarding/route.tsx
index 4c4046cc..64df01c9 100644
--- a/apps/oneclient/frontend/src/routes/onboarding/route.tsx
+++ b/apps/oneclient/frontend/src/routes/onboarding/route.tsx
@@ -84,23 +84,25 @@ const LINEAR_ONBOARDING_STEPS = getLinearSteps(ONBOARDING_STEPS);
 
 function RouteComponent() {
 	return (
-		<LoaderSuspense spinner={{ size: 'large' }}>
-			<AppShell>
-				<div className="h-full w-full">
+		// <LoaderSuspense spinner={{ size: 'large' }}>
+		<AppShell>
+			<div className="h-full w-full">
+				<LoaderSuspense spinner={{ size: 'large' }}>
 					<Navbar />
 					<Outlet />
 
 					<OnboardingNavigation />
-				</div>
-			</AppShell>
-		</LoaderSuspense>
+				</LoaderSuspense>
+			</div>
+		</AppShell>
+		// </LoaderSuspense>
 	);
 }
 
 function AppShell({
 	children,
 }: PropsWithChildren) {
-	const { isFirstStep } = Route.useLoaderData();
+	const { isFirstStep, currentStepIndex } = Route.useLoaderData();
 
 	return (
 		<div className="flex flex-col h-full w-full">
@@ -115,7 +117,7 @@ function AppShell({
 					</div>
 
 					<nav className="flex-1 p-4">
-						<Stepper linearSteps={LINEAR_ONBOARDING_STEPS} steps={ONBOARDING_STEPS} />
+						<Stepper currentLinearIndex={currentStepIndex} linearSteps={LINEAR_ONBOARDING_STEPS} steps={ONBOARDING_STEPS} />
 					</nav>
 
 					<div className="p-4 text-xs text-fg-secondary">