diff --git a/lang/es.json b/lang/es.json
index cc2d168d..84cbb937 100644
--- a/lang/es.json
+++ b/lang/es.json
@@ -52,6 +52,8 @@
     "Not doable": "No viable",
     "In progress": "En proceso",
     "Done": "Hecho",
+    "Done! You can continue now, or keep categorizing if you want.": "¡Listo! Ya puedes continuar, o seguir categorizando si quieres.",
+    "You do not need to categorize all of them.": "No necesitas categorizarlas todas.",
     "Something went wrong.": "Algo salió mal.",
     "Integration requests": "Solicitudes de integración",
     "Request integration": "Solicitar integración",
diff --git a/resources/js/app.tsx b/resources/js/app.tsx
index 46c2daa1..adb1fe31 100644
--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@@ -11,7 +11,7 @@ import {
     OctagonXIcon,
     TriangleAlertIcon,
 } from 'lucide-react';
-import { StrictMode, useEffect } from 'react';
+import { StrictMode, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { toast, Toaster } from 'sonner';
 import { EncryptionKeyProvider } from './contexts/encryption-key-context';
@@ -134,6 +134,35 @@ const getProgressBarColor = () => {
     return isDark ? '#EEE' : '#4B5563'; // gray-400 for dark mode, gray-600 for light mode
 };
 
+const isOnboardingPath = () =>
+    typeof window !== 'undefined' &&
+    window.location.pathname.startsWith('/onboarding');
+
+// Onboarding has no bottom navigation bar, so toasts sit flush at the bottom
+// center instead of being lifted to clear the (absent) mobile tab bar.
+function AppToaster() {
+    const [isOnboarding, setIsOnboarding] = useState(isOnboardingPath);
+
+    useEffect(() => {
+        return router.on('navigate', () => setIsOnboarding(isOnboardingPath()));
+    }, []);
+
+    return (
+        <Toaster
+            richColors
+            position={isOnboarding ? 'bottom-center' : undefined}
+            mobileOffset={{ bottom: isOnboarding ? '16px' : '110px' }}
+            icons={{
+                success: <CircleCheckIcon className="size-4" />,
+                info: <InfoIcon className="size-4" />,
+                warning: <TriangleAlertIcon className="size-4" />,
+                error: <OctagonXIcon className="size-4" />,
+                loading: <Loader2Icon className="size-4 animate-spin" />,
+            }}
+        />
+    );
+}
+
 createInertiaApp({
     title: (title) => (title ? `${title} - ${appName}` : appName),
     resolve: (name) =>
@@ -228,23 +257,7 @@ createInertiaApp({
                                     initialExpiredConnections
                                 }
                             />
-                            <Toaster
-                                richColors
-                                mobileOffset={{ bottom: '110px' }}
-                                icons={{
-                                    success: (
-                                        <CircleCheckIcon className="size-4" />
-                                    ),
-                                    info: <InfoIcon className="size-4" />,
-                                    warning: (
-                                        <TriangleAlertIcon className="size-4" />
-                                    ),
-                                    error: <OctagonXIcon className="size-4" />,
-                                    loading: (
-                                        <Loader2Icon className="size-4 animate-spin" />
-                                    ),
-                                }}
-                            />
+                            <AppToaster />
                         </SyncProvider>
                     </PrivacyModeProvider>
                 </EncryptionKeyProvider>
diff --git a/resources/js/components/onboarding/step-categorize-transactions.tsx b/resources/js/components/onboarding/step-categorize-transactions.tsx
index 631616d1..8d492712 100644
--- a/resources/js/components/onboarding/step-categorize-transactions.tsx
+++ b/resources/js/components/onboarding/step-categorize-transactions.tsx
@@ -52,7 +52,6 @@ export function StepCategorizeTransactions({
         isComplete,
         uncategorizedTransactions,
         currentTransaction,
-        remainingCount,
         animationState,
         lastSelectedCategory,
         sortedCategories,
@@ -79,8 +78,6 @@ export function StepCategorizeTransactions({
         categorizedCount >= minimumRequired ||
         totalAvailable === 0;
 
-    const hasReachedMinimum = categorizedCount >= minimumRequired;
-
     // Show rules hint after first categorization, only once
     useEffect(() => {
         if (categorizedCount === 1 && !hasSeenHint) {
@@ -262,6 +259,51 @@ export function StepCategorizeTransactions({
 
     return (
         <div className="flex w-full flex-col gap-4">
+            {/* Progress banner: makes the "categorize at least N" goal obvious */}
+            <div className="rounded-xl border bg-card p-4">
+                {canContinue ? (
+                    <div className="flex items-center gap-3">
+                        <CheckCircle2 className="size-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
+                        <p className="text-sm font-medium">
+                            {__(
+                                'Done! You can continue now, or keep categorizing if you want.',
+                            )}
+                        </p>
+                    </div>
+                ) : (
+                    <div className="flex flex-col gap-2">
+                        <div className="flex items-baseline justify-between gap-3">
+                            <p className="text-sm font-medium">
+                                {__(
+                                    'To continue, you need to categorize at least :count transactions.',
+                                    { count: minimumRequired },
+                                )}
+                            </p>
+                            <span className="shrink-0 text-sm font-semibold tabular-nums">
+                                {categorizedCount}/{minimumRequired}
+                            </span>
+                        </div>
+                        <div className="flex gap-1.5">
+                            {Array.from({ length: minimumRequired }).map(
+                                (_, i) => (
+                                    <div
+                                        key={i}
+                                        className={`h-2 flex-1 rounded-full transition-colors ${
+                                            i < categorizedCount
+                                                ? 'bg-violet-600 dark:bg-violet-400'
+                                                : 'bg-muted'
+                                        }`}
+                                    />
+                                ),
+                            )}
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                            {__('You do not need to categorize all of them.')}
+                        </p>
+                    </div>
+                )}
+            </div>
+
             {/* Header row */}
             <div className="flex items-center justify-between">
                 <Popover open={showRulesHint} onOpenChange={() => {}}>
@@ -322,27 +364,14 @@ export function StepCategorizeTransactions({
                         size="sm"
                         onClick={onComplete}
                         disabled={!canContinue}
+                        className={
+                            canContinue
+                                ? 'ring-2 ring-primary ring-offset-2 ring-offset-background'
+                                : undefined
+                        }
                     >
                         {__('Continue')}
                     </Button>
-
-                    <span className="text-sm text-muted-foreground">
-                        {hasReachedMinimum ? (
-                            <>
-                                <span className="font-medium text-foreground">
-                                    {remainingCount}
-                                </span>{' '}
-                                {__('remaining')}
-                            </>
-                        ) : (
-                            <>
-                                <span className="font-medium text-foreground">
-                                    {categorizedCount}
-                                </span>
-                                /{minimumRequired}
-                            </>
-                        )}
-                    </span>
                 </div>
             </div>
 
diff --git a/resources/js/layouts/onboarding-layout.tsx b/resources/js/layouts/onboarding-layout.tsx
index 999abe94..a60c82bd 100644
--- a/resources/js/layouts/onboarding-layout.tsx
+++ b/resources/js/layouts/onboarding-layout.tsx
@@ -55,7 +55,7 @@ export default function OnboardingLayout({
 
             <main
                 className={cn(
-                    'flex flex-1 flex-col items-center justify-start px-4 pt-12 pb-12 md:px-6',
+                    'flex flex-1 flex-col items-center justify-start px-4 pt-4 pb-12 md:px-6 md:pt-12',
                     align === 'center' && 'sm:justify-center',
                 )}
             >