From 49a2d30d7c69f1bec1f1ebeb10644dc29cc89b21 Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Fri, 21 Nov 2025 16:05:49 -0500
Subject: [PATCH 1/3] Program onboarding domains updates

---
 apps/web/ui/domains/add-edit-domain-form.tsx  |  12 +-
 apps/web/ui/modals/register-domain-modal.tsx  |  21 +-
 .../partners/program-link-configuration.tsx   | 261 ++++++++++++++----
 3 files changed, 241 insertions(+), 53 deletions(-)

diff --git a/apps/web/ui/domains/add-edit-domain-form.tsx b/apps/web/ui/domains/add-edit-domain-form.tsx
index 3f8da5e9687..50de3351dcf 100644
--- a/apps/web/ui/domains/add-edit-domain-form.tsx
+++ b/apps/web/ui/domains/add-edit-domain-form.tsx
@@ -31,7 +31,7 @@ import {
 } from "lucide-react";
 import { motion } from "motion/react";
 import posthog from "posthog-js";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { FormEvent, useEffect, useMemo, useRef, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { useDebouncedCallback } from "use-debounce";
@@ -276,7 +276,15 @@ export function AddEditDomainForm({
   const currentStatusProps = STATUS_CONFIG[domainStatus];
 
   return (
-    <form ref={formRef} onSubmit={handleSubmit(onSubmit)}>
+    <form
+      ref={formRef}
+      onSubmit={async (e: FormEvent<HTMLFormElement>) => {
+        // prevent the submission event from propagating to the parent form (in the link builder)
+        e.preventDefault();
+        e.stopPropagation();
+        handleSubmit(onSubmit)(e);
+      }}
+    >
       <div
         className={cn(
           "flex flex-col gap-y-6 text-left",
diff --git a/apps/web/ui/modals/register-domain-modal.tsx b/apps/web/ui/modals/register-domain-modal.tsx
index 23a676573d3..d3bb13d675a 100644
--- a/apps/web/ui/modals/register-domain-modal.tsx
+++ b/apps/web/ui/modals/register-domain-modal.tsx
@@ -5,9 +5,16 @@ import { RegisterDomainForm } from "../domains/register-domain-form";
 interface RegisterDomainProps {
   showModal: boolean;
   setShowModal: (showModal: boolean) => void;
+  onSuccess?: (domain: string) => void;
+  setRegisteredParam?: boolean;
 }
 
-const RegisterDomain = ({ showModal, setShowModal }: RegisterDomainProps) => {
+const RegisterDomain = ({
+  showModal,
+  setShowModal,
+  onSuccess,
+  setRegisteredParam,
+}: RegisterDomainProps) => {
   const { queryParams } = useRouterStuff();
 
   return (
@@ -23,8 +30,11 @@ const RegisterDomain = ({ showModal, setShowModal }: RegisterDomainProps) => {
         <RegisterDomainForm
           variant="modal"
           onSuccess={(domain) => {
+            onSuccess?.(domain);
             setShowModal(false);
-            queryParams({ set: { registered: domain.toLowerCase() } });
+
+            if (setRegisteredParam !== false)
+              queryParams({ set: { registered: domain.toLowerCase() } });
           }}
           onCancel={() => setShowModal(false)}
         />
@@ -33,7 +43,9 @@ const RegisterDomain = ({ showModal, setShowModal }: RegisterDomainProps) => {
   );
 };
 
-export function useRegisterDomainModal() {
+export function useRegisterDomainModal(
+  props: Omit<RegisterDomainProps, "showModal" | "setShowModal"> = {},
+) {
   const [showRegisterDomainModal, setShowRegisterDomainModal] = useState(false);
 
   const RegisterDomainModal = useCallback(() => {
@@ -41,9 +53,10 @@ export function useRegisterDomainModal() {
       <RegisterDomain
         showModal={showRegisterDomainModal}
         setShowModal={setShowRegisterDomainModal}
+        {...props}
       />
     );
-  }, [showRegisterDomainModal, setShowRegisterDomainModal]);
+  }, [showRegisterDomainModal, setShowRegisterDomainModal, props]);
 
   return useMemo(
     () => ({ setShowRegisterDomainModal, RegisterDomainModal }),
diff --git a/apps/web/ui/partners/program-link-configuration.tsx b/apps/web/ui/partners/program-link-configuration.tsx
index e231175da20..dad6859c67c 100644
--- a/apps/web/ui/partners/program-link-configuration.tsx
+++ b/apps/web/ui/partners/program-link-configuration.tsx
@@ -1,21 +1,28 @@
 import { getLinkStructureOptions } from "@/lib/partners/get-link-structure-options";
+import useDomains from "@/lib/swr/use-domains";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { DomainVerificationStatusProps } from "@/lib/types";
 import DomainConfiguration from "@/ui/domains/domain-configuration";
 import { DomainSelector } from "@/ui/domains/domain-selector";
-import { InfoTooltip, Input, LinkLogo } from "@dub/ui";
-import { ArrowTurnRight2 } from "@dub/ui/icons";
-import { fetcher, getApexDomain, getPrettyUrl } from "@dub/utils";
+import { AnimatedSizeContainer, InfoTooltip, Input, LinkLogo } from "@dub/ui";
+import { ArrowTurnRight2, ChevronRight, LoadingSpinner } from "@dub/ui/icons";
+import { cn, fetcher, getApexDomain, getPrettyUrl } from "@dub/utils";
 import { AnimatePresence, motion } from "motion/react";
+import { useMemo, useState } from "react";
 import useSWRImmutable from "swr/immutable";
+import { useAddEditDomainModal } from "../modals/add-edit-domain-modal";
+import { useRegisterDomainModal } from "../modals/register-domain-modal";
 
-interface ProgramLinkConfigurationProps {
+type DomainProps = {
   domain: string | null;
-  url: string | null;
   onDomainChange: (domain: string) => void;
+};
+
+type ProgramLinkConfigurationProps = {
+  url: string | null;
   onUrlChange: (url: string) => void;
   hideLinkPreview?: boolean;
-}
+} & DomainProps;
 
 export function ProgramLinkConfiguration({
   domain,
@@ -24,18 +31,6 @@ export function ProgramLinkConfiguration({
   onUrlChange,
   hideLinkPreview,
 }: ProgramLinkConfigurationProps) {
-  const { id: workspaceId } = useWorkspace();
-
-  const { data: verificationData } = useSWRImmutable<{
-    status: DomainVerificationStatusProps;
-    response: any;
-  }>(
-    workspaceId && domain
-      ? `/api/domains/${domain}/verify?workspaceId=${workspaceId}`
-      : null,
-    fetcher,
-  );
-
   const linkStructureOptions = getLinkStructureOptions({
     domain,
     url,
@@ -43,42 +38,17 @@ export function ProgramLinkConfiguration({
 
   return (
     <div className="space-y-6">
-      <div className="space-y-2">
-        <div className="flex items-center gap-x-2">
+      <div>
+        <div className="mb-2 flex items-center gap-x-2">
           <label className="block text-sm font-medium text-neutral-800">
-            Custom domain
+            Program domain
           </label>
 
           <InfoTooltip content="A connected domain or sub-domain is required to create a program. [Learn more](https://dub.co/help/article/choosing-a-custom-domain)" />
         </div>
-
-        <DomainSelector
-          selectedDomain={domain || ""}
-          setSelectedDomain={onDomainChange}
-        />
-
-        <p className="text-xs font-normal text-neutral-500">
-          Custom domain that will be used for your program's referral links
-        </p>
+        <DomainOnboarding domain={domain} onDomainChange={onDomainChange} />
       </div>
 
-      <AnimatePresence>
-        {domain &&
-          verificationData &&
-          verificationData.status !== "Valid Configuration" && (
-            <motion.div
-              key="domain-verification"
-              initial={{ height: 0, opacity: 0 }}
-              animate={{ height: "auto", opacity: 1 }}
-              exit={{ height: 0, opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="mt-6 overflow-hidden rounded-md border border-neutral-200 bg-neutral-50 px-5 pb-5"
-            >
-              <DomainConfiguration data={verificationData} />
-            </motion.div>
-          )}
-      </AnimatePresence>
-
       <div className="space-y-2">
         <label className="block text-sm font-medium text-neutral-800">
           Website URL
@@ -155,3 +125,200 @@ export function ProgramLinkConfiguration({
     </div>
   );
 }
+
+function DomainOnboarding({ domain, onDomainChange }: DomainProps) {
+  const { allWorkspaceDomains: domains, loading: isLoadingDomains } =
+    useDomains();
+
+  const [state, setState] = useState<"idle" | "select">(
+    domain ? "select" : "idle",
+  );
+
+  const { RegisterDomainModal, setShowRegisterDomainModal } =
+    useRegisterDomainModal({
+      onSuccess: (domain) => {
+        onDomainChange(domain);
+        setState("select");
+      },
+      setRegisteredParam: false,
+    });
+
+  const { AddEditDomainModal, setShowAddEditDomainModal } =
+    useAddEditDomainModal({
+      onSuccess: (domain) => {
+        onDomainChange(domain.slug);
+        setState("select");
+      },
+    });
+
+  const idleOptions = useMemo(
+    () => [
+      {
+        icon: "https://assets.dub.co/icons/crown.webp",
+        title: "Claim a free .link domain",
+        badge: "No setup",
+        badgeClassName: "bg-green-100 text-green-800",
+        description: "Free for one year with your paid account.",
+        onSelect: () => setShowRegisterDomainModal(true),
+      },
+      {
+        icon: "https://assets.dub.co/icons/link.webp",
+        title: "Connect a domain you own",
+        badge: "DNS setup required",
+        badgeClassName: "bg-bg-inverted/10 text-neutral-800",
+        description:
+          "Dedicate a domain exclusively for your short links and program.",
+        onSelect: () => {
+          if (!domains?.length) setShowAddEditDomainModal(true);
+          else setState("select");
+        },
+        loading: isLoadingDomains,
+      },
+    ],
+    [
+      domains,
+      isLoadingDomains,
+      setShowAddEditDomainModal,
+      setShowRegisterDomainModal,
+    ],
+  );
+
+  return (
+    <>
+      <RegisterDomainModal />
+      <AddEditDomainModal />
+      <AnimatedSizeContainer
+        height
+        transition={{ ease: "easeOut", duration: 0.1 }}
+        className="-m-1"
+      >
+        <div className="p-1">
+          <AnimatePresence initial={false} mode="popLayout">
+            {state === "idle" && (
+              <motion.div
+                key="idle"
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -10 }}
+                transition={{ duration: 0.2 }}
+              >
+                <div className="flex flex-col gap-2">
+                  {idleOptions.map((option) => (
+                    <button
+                      key={option.title}
+                      type="button"
+                      className={cn(
+                        "bg-bg-default border-border-subtle group flex items-center justify-between gap-3 rounded-xl border p-1.5 pr-4",
+                        "hover:bg-bg-inverted/[0.03] active:bg-bg-inverted/5",
+                        "transition-opacity disabled:cursor-not-allowed disabled:opacity-60",
+                      )}
+                      onClick={() => option.onSelect()}
+                      disabled={option.loading}
+                    >
+                      <div className="flex items-center gap-3">
+                        <div className="bg-bg-inverted/5 flex size-10 items-center justify-center rounded-lg">
+                          <img
+                            src={option.icon}
+                            alt=""
+                            className="size-7 object-contain transition-transform ease-out group-hover:scale-105"
+                          />
+                        </div>
+                        <div className="flex flex-col">
+                          <div className="flex items-center gap-1">
+                            <span className="text-content-emphasis text-xs font-semibold">
+                              {option.title}
+                            </span>
+                            <div
+                              className={cn(
+                                "rounded-md px-1 text-xs font-semibold",
+                                option.badgeClassName,
+                              )}
+                            >
+                              {option.badge}
+                            </div>
+                          </div>
+                          <p className="text-content-subtle text-xs">
+                            {option.description}
+                          </p>
+                        </div>
+                      </div>
+
+                      {option.loading ? (
+                        <LoadingSpinner className="size-3 shrink-0" />
+                      ) : (
+                        <ChevronRight className="text-content-muted size-3 shrink-0 transition-transform ease-out group-hover:translate-x-0.5" />
+                      )}
+                    </button>
+                  ))}
+                </div>
+
+                <p className="mt-2 text-xs font-normal text-neutral-500">
+                  This domain will be used for your program’s referral links
+                </p>
+              </motion.div>
+            )}
+
+            {state === "select" && (
+              <motion.div
+                key="select"
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10 }}
+                transition={{ duration: 0.2 }}
+              >
+                <DomainOnboardingSelection
+                  domain={domain}
+                  onDomainChange={onDomainChange}
+                />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </AnimatedSizeContainer>
+    </>
+  );
+}
+
+function DomainOnboardingSelection({ domain, onDomainChange }: DomainProps) {
+  const { id: workspaceId } = useWorkspace();
+
+  const { data: verificationData } = useSWRImmutable<{
+    status: DomainVerificationStatusProps;
+    response: any;
+  }>(
+    workspaceId && domain
+      ? `/api/domains/${domain}/verify?workspaceId=${workspaceId}`
+      : null,
+    fetcher,
+  );
+
+  return (
+    <div>
+      <DomainSelector
+        selectedDomain={domain || ""}
+        setSelectedDomain={onDomainChange}
+      />
+
+      <p className="mt-2 text-xs font-normal text-neutral-500">
+        This domain will be used for your program’s referral links
+      </p>
+
+      <AnimatePresence>
+        {domain &&
+          verificationData &&
+          verificationData.status !== "Valid Configuration" && (
+            <motion.div
+              key="domain-verification"
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: "auto", opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="mt-6 overflow-hidden rounded-md border border-neutral-200 bg-neutral-50 px-5 pb-5"
+            >
+              <DomainConfiguration data={verificationData} />
+            </motion.div>
+          )}
+      </AnimatePresence>
+    </div>
+  );
+}

From 12b62431ec181f53835e1122ea737d370a1bf031 Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Fri, 21 Nov 2025 16:54:12 -0800
Subject: [PATCH 2/3] Select a different option

---
 .../partners/program-link-configuration.tsx   | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/apps/web/ui/partners/program-link-configuration.tsx b/apps/web/ui/partners/program-link-configuration.tsx
index dad6859c67c..c1a099732e3 100644
--- a/apps/web/ui/partners/program-link-configuration.tsx
+++ b/apps/web/ui/partners/program-link-configuration.tsx
@@ -4,8 +4,19 @@ import useWorkspace from "@/lib/swr/use-workspace";
 import { DomainVerificationStatusProps } from "@/lib/types";
 import DomainConfiguration from "@/ui/domains/domain-configuration";
 import { DomainSelector } from "@/ui/domains/domain-selector";
-import { AnimatedSizeContainer, InfoTooltip, Input, LinkLogo } from "@dub/ui";
-import { ArrowTurnRight2, ChevronRight, LoadingSpinner } from "@dub/ui/icons";
+import {
+  AnimatedSizeContainer,
+  Button,
+  InfoTooltip,
+  Input,
+  LinkLogo,
+} from "@dub/ui";
+import {
+  ArrowTurnRight2,
+  ChevronLeft,
+  ChevronRight,
+  LoadingSpinner,
+} from "@dub/ui/icons";
 import { cn, fetcher, getApexDomain, getPrettyUrl } from "@dub/utils";
 import { AnimatePresence, motion } from "motion/react";
 import { useMemo, useState } from "react";
@@ -269,6 +280,7 @@ function DomainOnboarding({ domain, onDomainChange }: DomainProps) {
                 <DomainOnboardingSelection
                   domain={domain}
                   onDomainChange={onDomainChange}
+                  onBack={() => setState("idle")}
                 />
               </motion.div>
             )}
@@ -279,7 +291,11 @@ function DomainOnboarding({ domain, onDomainChange }: DomainProps) {
   );
 }
 
-function DomainOnboardingSelection({ domain, onDomainChange }: DomainProps) {
+function DomainOnboardingSelection({
+  domain,
+  onDomainChange,
+  onBack,
+}: DomainProps & { onBack: () => void }) {
   const { id: workspaceId } = useWorkspace();
 
   const { data: verificationData } = useSWRImmutable<{
@@ -294,6 +310,15 @@ function DomainOnboardingSelection({ domain, onDomainChange }: DomainProps) {
 
   return (
     <div>
+      <Button
+        type="button"
+        onClick={onBack}
+        variant="secondary"
+        className="my-2 h-7 w-full text-xs"
+        icon={<ChevronLeft className="size-3" />}
+        text="Select a different option"
+      />
+
       <DomainSelector
         selectedDomain={domain || ""}
         setSelectedDomain={onDomainChange}

From 8d2797d5d231967878150bf8a7231b595b7a21c2 Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Fri, 21 Nov 2025 17:01:06 -0800
Subject: [PATCH 3/3] improve select a different option

---
 .../partners/program-link-configuration.tsx   | 220 +++++++++---------
 1 file changed, 105 insertions(+), 115 deletions(-)

diff --git a/apps/web/ui/partners/program-link-configuration.tsx b/apps/web/ui/partners/program-link-configuration.tsx
index c1a099732e3..74654319ac0 100644
--- a/apps/web/ui/partners/program-link-configuration.tsx
+++ b/apps/web/ui/partners/program-link-configuration.tsx
@@ -4,19 +4,8 @@ import useWorkspace from "@/lib/swr/use-workspace";
 import { DomainVerificationStatusProps } from "@/lib/types";
 import DomainConfiguration from "@/ui/domains/domain-configuration";
 import { DomainSelector } from "@/ui/domains/domain-selector";
-import {
-  AnimatedSizeContainer,
-  Button,
-  InfoTooltip,
-  Input,
-  LinkLogo,
-} from "@dub/ui";
-import {
-  ArrowTurnRight2,
-  ChevronLeft,
-  ChevronRight,
-  LoadingSpinner,
-} from "@dub/ui/icons";
+import { AnimatedSizeContainer, InfoTooltip, Input, LinkLogo } from "@dub/ui";
+import { ArrowTurnRight2, ChevronRight, LoadingSpinner } from "@dub/ui/icons";
 import { cn, fetcher, getApexDomain, getPrettyUrl } from "@dub/utils";
 import { AnimatePresence, motion } from "motion/react";
 import { useMemo, useState } from "react";
@@ -49,16 +38,7 @@ export function ProgramLinkConfiguration({
 
   return (
     <div className="space-y-6">
-      <div>
-        <div className="mb-2 flex items-center gap-x-2">
-          <label className="block text-sm font-medium text-neutral-800">
-            Program domain
-          </label>
-
-          <InfoTooltip content="A connected domain or sub-domain is required to create a program. [Learn more](https://dub.co/help/article/choosing-a-custom-domain)" />
-        </div>
-        <DomainOnboarding domain={domain} onDomainChange={onDomainChange} />
-      </div>
+      <DomainOnboarding domain={domain} onDomainChange={onDomainChange} />
 
       <div className="space-y-2">
         <label className="block text-sm font-medium text-neutral-800">
@@ -198,95 +178,114 @@ function DomainOnboarding({ domain, onDomainChange }: DomainProps) {
     <>
       <RegisterDomainModal />
       <AddEditDomainModal />
-      <AnimatedSizeContainer
-        height
-        transition={{ ease: "easeOut", duration: 0.1 }}
-        className="-m-1"
-      >
-        <div className="p-1">
-          <AnimatePresence initial={false} mode="popLayout">
-            {state === "idle" && (
-              <motion.div
-                key="idle"
-                initial={{ opacity: 0, y: -10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -10 }}
-                transition={{ duration: 0.2 }}
-              >
-                <div className="flex flex-col gap-2">
-                  {idleOptions.map((option) => (
-                    <button
-                      key={option.title}
-                      type="button"
-                      className={cn(
-                        "bg-bg-default border-border-subtle group flex items-center justify-between gap-3 rounded-xl border p-1.5 pr-4",
-                        "hover:bg-bg-inverted/[0.03] active:bg-bg-inverted/5",
-                        "transition-opacity disabled:cursor-not-allowed disabled:opacity-60",
-                      )}
-                      onClick={() => option.onSelect()}
-                      disabled={option.loading}
-                    >
-                      <div className="flex items-center gap-3">
-                        <div className="bg-bg-inverted/5 flex size-10 items-center justify-center rounded-lg">
-                          <img
-                            src={option.icon}
-                            alt=""
-                            className="size-7 object-contain transition-transform ease-out group-hover:scale-105"
-                          />
-                        </div>
-                        <div className="flex flex-col">
-                          <div className="flex items-center gap-1">
-                            <span className="text-content-emphasis text-xs font-semibold">
-                              {option.title}
-                            </span>
-                            <div
-                              className={cn(
-                                "rounded-md px-1 text-xs font-semibold",
-                                option.badgeClassName,
-                              )}
-                            >
-                              {option.badge}
+      <div>
+        <div className="mb-2 flex items-center justify-between">
+          <div className="flex items-center gap-x-2">
+            <label className="block text-sm font-medium text-neutral-800">
+              Program domain
+            </label>
+            <InfoTooltip content="A connected domain or sub-domain is required to create a program. [Learn more](https://dub.co/help/article/choosing-a-custom-domain)" />
+          </div>
+          {state === "select" && (
+            <button
+              type="button"
+              onClick={() => setState("idle")}
+              className="text-xs font-normal text-neutral-500 underline underline-offset-2 transition-colors hover:text-neutral-700"
+            >
+              Select a different option
+            </button>
+          )}
+        </div>
+        <AnimatedSizeContainer
+          height
+          transition={{ ease: "easeOut", duration: 0.1 }}
+          className="-m-1"
+        >
+          <div className="p-1">
+            <AnimatePresence initial={false} mode="popLayout">
+              {state === "idle" && (
+                <motion.div
+                  key="idle"
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <div className="flex flex-col gap-2">
+                    {idleOptions.map((option) => (
+                      <button
+                        key={option.title}
+                        type="button"
+                        className={cn(
+                          "bg-bg-default border-border-subtle group flex items-center justify-between gap-3 rounded-xl border p-1.5 pr-4",
+                          "hover:bg-bg-inverted/[0.03] active:bg-bg-inverted/5",
+                          "transition-opacity disabled:cursor-not-allowed disabled:opacity-60",
+                        )}
+                        onClick={() => option.onSelect()}
+                        disabled={option.loading}
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="bg-bg-inverted/5 flex size-10 items-center justify-center rounded-lg">
+                            <img
+                              src={option.icon}
+                              alt=""
+                              className="size-7 object-contain transition-transform ease-out group-hover:scale-105"
+                            />
+                          </div>
+                          <div className="flex flex-col">
+                            <div className="flex items-center gap-1">
+                              <span className="text-content-emphasis text-xs font-semibold">
+                                {option.title}
+                              </span>
+                              <div
+                                className={cn(
+                                  "rounded-md px-1 text-xs font-semibold",
+                                  option.badgeClassName,
+                                )}
+                              >
+                                {option.badge}
+                              </div>
                             </div>
+                            <p className="text-content-subtle text-xs">
+                              {option.description}
+                            </p>
                           </div>
-                          <p className="text-content-subtle text-xs">
-                            {option.description}
-                          </p>
                         </div>
-                      </div>
 
-                      {option.loading ? (
-                        <LoadingSpinner className="size-3 shrink-0" />
-                      ) : (
-                        <ChevronRight className="text-content-muted size-3 shrink-0 transition-transform ease-out group-hover:translate-x-0.5" />
-                      )}
-                    </button>
-                  ))}
-                </div>
+                        {option.loading ? (
+                          <LoadingSpinner className="size-3 shrink-0" />
+                        ) : (
+                          <ChevronRight className="text-content-muted size-3 shrink-0 transition-transform ease-out group-hover:translate-x-0.5" />
+                        )}
+                      </button>
+                    ))}
+                  </div>
 
-                <p className="mt-2 text-xs font-normal text-neutral-500">
-                  This domain will be used for your program’s referral links
-                </p>
-              </motion.div>
-            )}
+                  <p className="mt-2 text-xs font-normal text-neutral-500">
+                    This domain will be used for your program’s referral links
+                  </p>
+                </motion.div>
+              )}
 
-            {state === "select" && (
-              <motion.div
-                key="select"
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                transition={{ duration: 0.2 }}
-              >
-                <DomainOnboardingSelection
-                  domain={domain}
-                  onDomainChange={onDomainChange}
-                  onBack={() => setState("idle")}
-                />
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </AnimatedSizeContainer>
+              {state === "select" && (
+                <motion.div
+                  key="select"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: 10 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <DomainOnboardingSelection
+                    domain={domain}
+                    onDomainChange={onDomainChange}
+                    onBack={() => setState("idle")}
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </AnimatedSizeContainer>
+      </div>
     </>
   );
 }
@@ -310,15 +309,6 @@ function DomainOnboardingSelection({
 
   return (
     <div>
-      <Button
-        type="button"
-        onClick={onBack}
-        variant="secondary"
-        className="my-2 h-7 w-full text-xs"
-        icon={<ChevronLeft className="size-3" />}
-        text="Select a different option"
-      />
-
       <DomainSelector
         selectedDomain={domain || ""}
         setSelectedDomain={onDomainChange}