diff --git a/frontend/src/proprietary/App.tsx b/frontend/src/proprietary/App.tsx
index 817d64f36..ee3f2e1a0 100644
--- a/frontend/src/proprietary/App.tsx
+++ b/frontend/src/proprietary/App.tsx
@@ -3,7 +3,6 @@ import { Routes, Route } from "react-router-dom";
 import { AppProviders } from "@app/components/AppProviders";
 import { AppLayout } from "@app/components/AppLayout";
 import { LoadingFallback } from "@app/components/shared/LoadingFallback";
-import Onboarding from "@app/components/onboarding/Onboarding";
 
 // Lazy-load auth routes - only loaded when user navigates to them
 const Landing = lazy(() => import("@app/routes/Landing"));
@@ -12,6 +11,9 @@ const Signup = lazy(() => import("@app/routes/Signup"));
 const AuthCallback = lazy(() => import("@app/routes/AuthCallback"));
 const InviteAccept = lazy(() => import("@app/routes/InviteAccept"));
 
+// Lazy-load Onboarding - only shown once for first-time users
+const Onboarding = lazy(() => import("@app/components/onboarding/Onboarding"));
+
 // Import global styles
 import "@app/styles/tailwind.css";
 import "@app/styles/cookieconsent.css";
@@ -36,7 +38,9 @@ export default function App() {
             {/* Main app routes - Landing handles auth logic */}
             <Route path="/*" element={<Landing />} />
           </Routes>
-          <Onboarding />
+          <Suspense fallback={null}>
+            <Onboarding />
+          </Suspense>
         </AppLayout>
       </AppProviders>
     </Suspense>