+ );
+}
diff --git a/apps/cloud/src/web/pages/onboarding.tsx b/apps/cloud/src/web/pages/onboarding.tsx
new file mode 100644
index 000000000..d6c7d7c99
--- /dev/null
+++ b/apps/cloud/src/web/pages/onboarding.tsx
@@ -0,0 +1,77 @@
+import { useAtomRefresh } from "@effect-atom/atom-react";
+import { Button } from "@executor/react/components/button";
+
+import { AUTH_PATHS } from "../../auth/api";
+import { authAtom, useAuth } from "../auth";
+import {
+ CreateOrganizationFields,
+ useCreateOrganizationForm,
+} from "../components/create-organization-form";
+
+export const OnboardingPage = () => {
+ const auth = useAuth();
+ const refreshAuth = useAtomRefresh(authAtom);
+
+ const suggestedName =
+ auth.status === "authenticated" &&
+ auth.user.name != null &&
+ auth.user.name.trim() !== ""
+ ? `${auth.user.name}'s Organization`
+ : "";
+
+ const form = useCreateOrganizationForm({
+ defaultName: suggestedName,
+ // On success: the server set a new cookie with the new org; refetch /me
+ // so AuthGate routes into Shell.
+ // On failure: the server may have cleared the cookie because the current
+ // session was too stale to attach the new org. Refetch /me regardless so
+ // AuthGate can route to LoginPage if that's the case.
+ onSuccess: () => refreshAuth(),
+ onFailure: () => refreshAuth(),
+ });
+
+ return (
+
+
+
+
Create your organization
+
+ Organizations group your sources, secrets, and teammates. You can invite others once
+ it's set up.
+