From 2086bb89e550f28c758b3367c8752cfe7f627611 Mon Sep 17 00:00:00 2001
From: Marcus Farrell <marcusljf@gmail.com>
Date: Wed, 15 Apr 2026 14:07:32 -0700
Subject: [PATCH 1/2] Onboarding changes

---
 .../partners.dub.co/(onboarding)/layout.tsx   | 39 +++++++---
 .../onboarding/onboarding-form.tsx            | 14 ++--
 .../(onboarding)/onboarding/page.tsx          |  4 +-
 .../(onboarding)/onboarding/payouts/page.tsx  |  8 +-
 .../onboarding/platforms/page.tsx             | 12 +--
 .../(onboarding)/signed-in-hint.tsx           | 55 +++++++++-----
 apps/web/ui/layout/toolbar/toolbar.tsx        |  2 +-
 .../ui/partners/partner-platforms-form.tsx    | 76 ++++++++++---------
 .../partners/payouts/payout-method-cards.tsx  | 12 +--
 apps/web/ui/shared/password-requirements.tsx  | 14 +++-
 10 files changed, 142 insertions(+), 94 deletions(-)

diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/layout.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/layout.tsx
index ec0d571b1c0..0c0bcf18d7d 100644
--- a/apps/web/app/(ee)/partners.dub.co/(onboarding)/layout.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(onboarding)/layout.tsx
@@ -1,5 +1,4 @@
-import Toolbar from "@/ui/layout/toolbar/toolbar";
-import { Grid, Wordmark } from "@dub/ui";
+import { CircleQuestion, Grid, Wordmark } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { SignedInHint } from "app/app.dub.co/(onboarding)/signed-in-hint";
 import Link from "next/link";
@@ -48,10 +47,14 @@ export default function PartnerOnboardingLayout({
         ))}
       </div>
 
-      <div className="relative flex min-h-[100dvh] min-h-screen w-full flex-col items-center justify-between">
-        <div className="grow basis-0">
-          <div className="pt-4">
-            <Link href="https://dub.co/home" target="_blank" className="block">
+      <div className="relative flex min-h-[100dvh] min-h-screen w-full flex-col items-center overflow-hidden md:justify-between">
+        <div className="w-full px-4 md:grow md:basis-0 md:px-0">
+          <div className="flex justify-center pt-4">
+            <Link
+              href="https://dub.co/home"
+              target="_blank"
+              className="block w-fit"
+            >
               <Wordmark className="h-8" />
               <div className="text-center text-sm font-semibold text-black/80">
                 Partners
@@ -60,14 +63,30 @@ export default function PartnerOnboardingLayout({
           </div>
         </div>
 
-        <div className="w-full py-16">{children}</div>
+        <div className="w-full flex-1 overflow-y-auto md:flex-none md:overflow-visible">
+          <div className="w-full pt-8 pb-8 sm:pb-4 md:py-16 px-5 md:px-0">{children}</div>
+        </div>
+
+        <div className="w-full md:hidden">
+          <SignedInHint />
+        </div>
 
         {/* Empty div to center main content */}
-        <div className="grow basis-0" />
+        <div className="hidden md:block md:grow md:basis-0" />
+      </div>
+
+      <div className="hidden md:block">
+        <SignedInHint />
       </div>
 
-      <Toolbar show={["help"]} />
-      <SignedInHint />
+      <a
+        href="https://dub.co/contact/support"
+        target="_blank"
+        className="fixed bottom-0 right-0 z-40 m-5 hidden h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 md:flex"
+        aria-label="Help"
+      >
+        <CircleQuestion className="size-5" strokeWidth={2} />
+      </a>
     </>
   );
 }
diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx
index 26228afd882..254b59547d9 100644
--- a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx
@@ -148,7 +148,7 @@ export function OnboardingForm({
             render={({ field }) => (
               <FileUpload
                 accept="images"
-                className="mt-1.5 size-20 rounded-full border border-neutral-300"
+                className="mt-1.5 size-20 shrink-0 rounded-full border border-neutral-300 transition-[border-color,box-shadow] focus-within:border-neutral-500 focus-within:ring-1 focus-within:ring-neutral-500"
                 iconClassName="size-5"
                 previewClassName="size-20 rounded-full"
                 variant="plain"
@@ -162,11 +162,11 @@ export function OnboardingForm({
             )}
           />
           <div>
-            <p className="text-xs text-neutral-500">
-              Square image recommended, up to 2 MB.
+            <p className="text-xs font-medium text-neutral-600">
+              Visible to programs and helps with approvals
             </p>
-            <p className="mt-0.5 text-xs font-medium text-neutral-500">
-              Adding an image can improve your approval rates.
+            <p className="mt-0.5 text-xs text-neutral-500">
+              Max 2 MB
             </p>
           </div>
         </div>
@@ -218,7 +218,7 @@ export function OnboardingForm({
 
       <label>
         <span className="text-sm font-medium text-neutral-800">
-          Description
+          About you
           <span className="font-normal text-neutral-500"> (optional)</span>
         </span>
         <div>
@@ -229,7 +229,7 @@ export function OnboardingForm({
                 ? "border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
                 : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-neutral-500",
             )}
-            placeholder="Tell us about the kind of content you create – e.g. tech, travel, fashion, etc."
+            placeholder="Share who you are, what you do, and who your audience is."
             maxLength={MAX_PARTNER_DESCRIPTION_LENGTH}
             minRows={3}
             onKeyDown={handleKeyDown}
diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/page.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/page.tsx
index 77ee733f41a..d4328a71b3b 100644
--- a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/page.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/page.tsx
@@ -5,11 +5,11 @@ import { OnboardingForm } from "./onboarding-form";
 
 export default function PartnerOnboarding() {
   return (
-    <div className="mx-auto flex w-full max-w-[480px] flex-col items-center md:mt-4">
+    <div className="mx-auto flex w-full max-w-[430px] flex-col items-center md:mt-4">
       <h1 className="animate-slide-up-fade text-lg font-medium [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
         Create your partner profile
       </h1>
-      <div className="animate-slide-up-fade w-full rounded-xl p-8 [--offset:10px] [animation-delay:500ms] [animation-duration:1s] [animation-fill-mode:both]">
+      <div className="animate-slide-up-fade w-full  [--offset:10px] [animation-delay:500ms] [animation-duration:1s] [animation-fill-mode:both]">
         <Suspense fallback={<OnboardingForm />}>
           <OnboardingFormRSC />
         </Suspense>
diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/payouts/page.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/payouts/page.tsx
index a952c01ca50..6eb39307c97 100644
--- a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/payouts/page.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/payouts/page.tsx
@@ -8,14 +8,14 @@ import { Suspense } from "react";
 
 export default function OnboardingVerificationPage() {
   return (
-    <div className="relative mx-auto my-10 flex w-full max-w-[640px] flex-col items-center px-4 text-center sm:px-6 md:mt-6">
-      <h1 className="animate-slide-up-fade text-content-emphasis text-xl font-semibold [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
+    <div className="relative mx-auto flex w-full max-w-[600px] flex-col items-center text-center md:mt-6">
+      <h1 className="animate-slide-up-fade text-content-emphasis text-lg font-semibold [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
         Connect payouts
       </h1>
-      <p className="animate-slide-up-fade mt-1 text-base font-medium text-neutral-500 [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
+      <p className="animate-slide-up-fade mt-1 text-sm font-medium text-neutral-500 [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
         Connect your preferred payout method to receive payments.
       </p>
-      <div className="animate-slide-up-fade relative mt-12 w-full [--offset:10px] [animation-delay:500ms] [animation-duration:1s] [animation-fill-mode:both]">
+      <div className="animate-slide-up-fade relative mt-10 w-full [--offset:10px] [animation-delay:500ms] [animation-duration:1s] [animation-fill-mode:both]">
         <Suspense fallback={<PayoutSkeleton />}>
           <PayoutRSC />
         </Suspense>
diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/platforms/page.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/platforms/page.tsx
index 7c0619045b9..b61c576f5da 100644
--- a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/platforms/page.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/platforms/page.tsx
@@ -11,7 +11,7 @@ import { OnboardingPlatformsPageClient } from "./page-client";
 
 export default function OnboardingPlatformsPage() {
   return (
-    <div className="relative mx-auto w-full max-w-[416px] text-center md:mt-4">
+    <div className="mx-auto flex w-full max-w-[430px] flex-col text-center md:mt-4">
       <h1 className="animate-slide-up-fade text-lg font-medium [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
         Your social and web platforms
       </h1>
@@ -21,10 +21,12 @@ export default function OnboardingPlatformsPage() {
         score and rank you higher in our partner network.
       </p>
 
-      <div className="animate-slide-up-fade mt-8 grid gap-4 [animation-delay:750ms] [animation-duration:1s] [animation-fill-mode:both]">
-        <Suspense fallback={<PartnerPlatformsForm partner={null} />}>
-          <OnboardingPlatformsFormRSC />
-        </Suspense>
+      <div className="animate-slide-up-fade w-full rounded-xl py-8 [animation-delay:750ms] [animation-duration:1s] [animation-fill-mode:both]">
+        <div className="grid gap-4">
+          <Suspense fallback={<PartnerPlatformsForm partner={null} />}>
+            <OnboardingPlatformsFormRSC />
+          </Suspense>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/app/app.dub.co/(onboarding)/signed-in-hint.tsx b/apps/web/app/app.dub.co/(onboarding)/signed-in-hint.tsx
index cf27f0d00b4..99525253e52 100644
--- a/apps/web/app/app.dub.co/(onboarding)/signed-in-hint.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/signed-in-hint.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@dub/ui";
+import { Button, CircleQuestion } from "@dub/ui";
 import { signOut, useSession } from "next-auth/react";
 import { useState } from "react";
 
@@ -9,27 +9,40 @@ export function SignedInHint() {
   const [isLoading, setIsLoading] = useState(false);
 
   return (
-    <div className="fixed bottom-0 left-0 z-40 m-5 flex flex-col gap-2">
-      <div className="flex items-center gap-1 text-xs text-neutral-600">
-        You're signed in as{" "}
-        {session ? (
-          <b className="text-neutral-800">{session.user?.email}</b>
-        ) : (
-          <span className="h-3 w-32 animate-pulse rounded-md border border-neutral-300 bg-neutral-200" />
-        )}
+    <div className="w-full border-t border-neutral-200 bg-white p-4 md:fixed md:bottom-0 md:left-0 md:z-40 md:m-5 md:w-auto md:border-0 md:bg-transparent md:p-0">
+      <div className="mx-auto flex w-full max-w-[680px] flex-col gap-2 md:mx-0 md:w-auto md:max-w-none">
+        <p className="text-xs text-neutral-600">
+          You're signed in as{" "}
+          {session ? (
+            <b className="break-all text-neutral-800">{session.user?.email}</b>
+          ) : (
+            <span className="h-3 w-32 animate-pulse rounded-md border border-neutral-300 bg-neutral-200" />
+          )}
+        </p>
+
+        <div className="flex items-center justify-between gap-2 md:block">
+          <Button
+            variant="secondary"
+            text="Sign in as a different user"
+            onClick={() => {
+              setIsLoading(true);
+              signOut({
+                callbackUrl: "/login",
+              });
+            }}
+            loading={isLoading}
+            className="h-8 w-fit rounded-lg px-3 text-xs shadow-sm"
+          />
+          <a
+            href="https://dub.co/contact/support"
+            target="_blank"
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 md:hidden"
+            aria-label="Help"
+          >
+            <CircleQuestion className="size-5" strokeWidth={2} />
+          </a>
+        </div>
       </div>
-      <Button
-        variant="secondary"
-        text="Sign in as a different user"
-        onClick={() => {
-          setIsLoading(true);
-          signOut({
-            callbackUrl: "/login",
-          });
-        }}
-        loading={isLoading}
-        className="h-8 w-fit rounded-lg px-3 text-xs shadow-sm"
-      />
     </div>
   );
 }
diff --git a/apps/web/ui/layout/toolbar/toolbar.tsx b/apps/web/ui/layout/toolbar/toolbar.tsx
index 162e8f14512..d40000f39ff 100644
--- a/apps/web/ui/layout/toolbar/toolbar.tsx
+++ b/apps/web/ui/layout/toolbar/toolbar.tsx
@@ -17,7 +17,7 @@ export default function Toolbar(props: ToolbarProps) {
           </div>
         )}
         {props.show?.includes("help") && (
-          <div className="shrink-0">
+          <div className="hidden shrink-0 md:block">
             <HelpButton />
           </div>
         )}
diff --git a/apps/web/ui/partners/partner-platforms-form.tsx b/apps/web/ui/partners/partner-platforms-form.tsx
index 0621f531838..ef7c42f288b 100644
--- a/apps/web/ui/partners/partner-platforms-form.tsx
+++ b/apps/web/ui/partners/partner-platforms-form.tsx
@@ -326,24 +326,26 @@ export const PartnerPlatformsForm = forwardRef<
                     <span className="inline-flex items-center rounded-l-md border border-r-0 border-neutral-300 bg-neutral-50 px-3 text-neutral-500 sm:text-sm">
                       youtube.com
                     </span>
-                    <span className="absolute inset-y-0 left-[6.7rem] flex items-center pl-3 text-sm text-neutral-400">
-                      @
-                    </span>
-                    <input
-                      type="text"
-                      disabled={disabled}
-                      className={cn(
-                        "block w-full rounded-none rounded-r-md pl-7 focus:outline-none sm:text-sm",
-                        disabled &&
-                          "cursor-not-allowed bg-neutral-50 text-neutral-400",
-                        errors.youtube
-                          ? "border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
-                          : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-neutral-500",
-                      )}
-                      placeholder="handle"
-                      onPaste={(e) => onPasteSocial(e, "youtube")}
-                      {...register("youtube")}
-                    />
+                    <div className="relative w-full">
+                      <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-neutral-400">
+                        @
+                      </span>
+                      <input
+                        type="text"
+                        disabled={disabled}
+                        className={cn(
+                          "block w-full rounded-none rounded-r-md pl-7 focus:outline-none sm:text-sm",
+                          disabled &&
+                            "cursor-not-allowed bg-neutral-50 text-neutral-400",
+                          errors.youtube
+                            ? "border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
+                            : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-neutral-500",
+                        )}
+                        placeholder="handle"
+                        onPaste={(e) => onPasteSocial(e, "youtube")}
+                        {...register("youtube")}
+                      />
+                    </div>
                   </div>
                 }
                 variant={variant}
@@ -461,24 +463,26 @@ export const PartnerPlatformsForm = forwardRef<
                     <span className="inline-flex items-center rounded-l-md border border-r-0 border-neutral-300 bg-neutral-50 px-3 text-neutral-500 sm:text-sm">
                       tiktok.com
                     </span>
-                    <span className="absolute inset-y-0 left-[5.7rem] flex items-center pl-3 text-sm text-neutral-400">
-                      @
-                    </span>
-                    <input
-                      type="text"
-                      disabled={disabled}
-                      className={cn(
-                        "block w-full rounded-none rounded-r-md pl-7 focus:outline-none sm:text-sm",
-                        disabled &&
-                          "cursor-not-allowed bg-neutral-50 text-neutral-400",
-                        errors.tiktok
-                          ? "border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
-                          : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-neutral-500",
-                      )}
-                      placeholder="handle"
-                      onPaste={(e) => onPasteSocial(e, "tiktok")}
-                      {...register("tiktok")}
-                    />
+                    <div className="relative w-full">
+                      <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-neutral-400">
+                        @
+                      </span>
+                      <input
+                        type="text"
+                        disabled={disabled}
+                        className={cn(
+                          "block w-full rounded-none rounded-r-md pl-7 focus:outline-none sm:text-sm",
+                          disabled &&
+                            "cursor-not-allowed bg-neutral-50 text-neutral-400",
+                          errors.tiktok
+                            ? "border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
+                            : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-neutral-500",
+                        )}
+                        placeholder="handle"
+                        onPaste={(e) => onPasteSocial(e, "tiktok")}
+                        {...register("tiktok")}
+                      />
+                    </div>
                   </div>
                 }
                 variant={variant}
diff --git a/apps/web/ui/partners/payouts/payout-method-cards.tsx b/apps/web/ui/partners/payouts/payout-method-cards.tsx
index 041c10d84ad..22c7cb8bffa 100644
--- a/apps/web/ui/partners/payouts/payout-method-cards.tsx
+++ b/apps/web/ui/partners/payouts/payout-method-cards.tsx
@@ -31,12 +31,12 @@ const CARD_VARIANTS = {
     action: "mt-3",
   },
   spotlight: {
-    card: "p-8",
-    content: "gap-4",
-    title: "text-xl font-semibold text-neutral-900",
-    list: "space-y-3.5 text-sm",
+    card: "p-5",
+    content: "gap-3",
+    title: "text-base font-semibold text-neutral-900",
+    list: "space-y-3 text-sm",
     featureIcon: "[&>svg]:size-5",
-    action: "mt-6",
+    action: "mt-3",
   },
 } as const;
 
@@ -94,7 +94,7 @@ export function PayoutMethodSelector({
                 connected={setting.connected}
                 className={cn(
                   "w-full rounded-lg",
-                  isSingleOption ? "h-10" : "h-9",
+                  "h-9",
                 )}
               />
             }
diff --git a/apps/web/ui/shared/password-requirements.tsx b/apps/web/ui/shared/password-requirements.tsx
index 6907859af67..b54e70e18d0 100644
--- a/apps/web/ui/shared/password-requirements.tsx
+++ b/apps/web/ui/shared/password-requirements.tsx
@@ -5,6 +5,7 @@ import { useFormContext, useWatch } from "react-hook-form";
 
 const REQUIREMENTS: {
   name: string;
+  mobileName?: string;
   check: (password: string) => boolean;
 }[] = [
   {
@@ -13,10 +14,12 @@ const REQUIREMENTS: {
   },
   {
     name: "Uppercase letter",
+    mobileName: "Uppercase",
     check: (p) => /[A-Z]/.test(p),
   },
   {
     name: "Lowercase letter",
+    mobileName: "Lowercase",
     check: (p) => /[a-z]/.test(p),
   },
   {
@@ -44,7 +47,7 @@ export const PasswordRequirements = memo(function PasswordRequirements({
 
   return (
     <ul className={cn("mt-2 flex flex-wrap items-center gap-3", className)}>
-      {REQUIREMENTS.map(({ name, check }) => {
+      {REQUIREMENTS.map(({ name, mobileName, check }) => {
         const checked = password?.length && check(password);
 
         return (
@@ -65,7 +68,14 @@ export const PasswordRequirements = memo(function PasswordRequirements({
                     : "text-neutral-200",
               )}
             />
-            <span>{name}</span>
+            {mobileName ? (
+              <>
+                <span className="max-[420px]:hidden">{name}</span>
+                <span className="hidden max-[420px]:inline">{mobileName}</span>
+              </>
+            ) : (
+              <span>{name}</span>
+            )}
           </li>
         );
       })}

From 7ca2dc9ae25c86b686ff99d66c01c1064fecb4dc Mon Sep 17 00:00:00 2001
From: Marcus Farrell <marcusljf@gmail.com>
Date: Thu, 16 Apr 2026 23:02:00 -0700
Subject: [PATCH 2/2] Workspace onboarding

---
 .../(onboarding)/onboarding/page.tsx          |  2 +-
 .../(onboarding)/onboarding/payouts/page.tsx  |  4 +-
 .../onboarding/platforms/page.tsx             |  4 +-
 .../app/app.dub.co/(onboarding)/layout.tsx    | 15 +++-
 .../domain/default-domain-selector.tsx        |  2 +-
 .../onboarding/(steps)/layout.tsx             | 21 +++--
 .../onboarding/(steps)/plan/plan-selector.tsx | 79 +++++++++++--------
 .../(steps)/products/product-selector.tsx     | 18 ++---
 .../(steps)/program/reward/form.tsx           |  6 +-
 .../onboarding/(steps)/step-page.tsx          |  2 +-
 .../ui/workspaces/create-workspace-form.tsx   |  4 +-
 11 files changed, 92 insertions(+), 65 deletions(-)

diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/page.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/page.tsx
index d4328a71b3b..e663f0472e9 100644
--- a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/page.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/page.tsx
@@ -6,7 +6,7 @@ import { OnboardingForm } from "./onboarding-form";
 export default function PartnerOnboarding() {
   return (
     <div className="mx-auto flex w-full max-w-[430px] flex-col items-center md:mt-4">
-      <h1 className="animate-slide-up-fade text-lg font-medium [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
+      <h1 className="animate-slide-up-fade text-center text-xl font-semibold [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
         Create your partner profile
       </h1>
       <div className="animate-slide-up-fade w-full  [--offset:10px] [animation-delay:500ms] [animation-duration:1s] [animation-fill-mode:both]">
diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/payouts/page.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/payouts/page.tsx
index 6eb39307c97..5bc75fcc985 100644
--- a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/payouts/page.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/payouts/page.tsx
@@ -9,10 +9,10 @@ import { Suspense } from "react";
 export default function OnboardingVerificationPage() {
   return (
     <div className="relative mx-auto flex w-full max-w-[600px] flex-col items-center text-center md:mt-6">
-      <h1 className="animate-slide-up-fade text-content-emphasis text-lg font-semibold [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
+      <h1 className="animate-slide-up-fade text-content-emphasis text-xl text-center font-semibold [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
         Connect payouts
       </h1>
-      <p className="animate-slide-up-fade mt-1 text-sm font-medium text-neutral-500 [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
+      <p className="animate-slide-up-fade mt-1 text-center text-base text-neutral-500 [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
         Connect your preferred payout method to receive payments.
       </p>
       <div className="animate-slide-up-fade relative mt-10 w-full [--offset:10px] [animation-delay:500ms] [animation-duration:1s] [animation-fill-mode:both]">
diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/platforms/page.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/platforms/page.tsx
index b61c576f5da..014ef757ec2 100644
--- a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/platforms/page.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/platforms/page.tsx
@@ -12,11 +12,11 @@ import { OnboardingPlatformsPageClient } from "./page-client";
 export default function OnboardingPlatformsPage() {
   return (
     <div className="mx-auto flex w-full max-w-[430px] flex-col text-center md:mt-4">
-      <h1 className="animate-slide-up-fade text-lg font-medium [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
+      <h1 className="animate-slide-up-fade text-center text-xl font-semibold [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
         Your social and web platforms
       </h1>
 
-      <p className="animate-slide-up-fade text-content-subtle mt-1 text-sm [animation-delay:500ms] [animation-duration:1s] [animation-fill-mode:both]">
+      <p className="animate-slide-up-fade text-content-subtle mt-1 text-base [animation-delay:500ms] [animation-duration:1s] [animation-fill-mode:both]">
         Verifying your social and web platforms will improve your reputation
         score and rank you higher in our partner network.
       </p>
diff --git a/apps/web/app/app.dub.co/(onboarding)/layout.tsx b/apps/web/app/app.dub.co/(onboarding)/layout.tsx
index acd1f82aad1..55503b523d4 100644
--- a/apps/web/app/app.dub.co/(onboarding)/layout.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/layout.tsx
@@ -1,4 +1,4 @@
-import Toolbar from "@/ui/layout/toolbar/toolbar";
+import { CircleQuestion } from "@dub/ui";
 import { PropsWithChildren } from "react";
 import { SignedInHint } from "./signed-in-hint";
 
@@ -6,8 +6,17 @@ export default function Layout({ children }: PropsWithChildren) {
   return (
     <>
       {children}
-      <Toolbar show={["help"]} />
-      <SignedInHint />
+      <div className="hidden md:block">
+        <SignedInHint />
+      </div>
+      <a
+        href="https://dub.co/contact/support"
+        target="_blank"
+        className="fixed bottom-0 right-0 z-40 m-5 hidden h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 md:flex"
+        aria-label="Help"
+      >
+        <CircleQuestion className="size-5" strokeWidth={2} />
+      </a>
     </>
   );
 }
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/default-domain-selector.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/default-domain-selector.tsx
index c51d5cc1ac7..2104e3da54a 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/default-domain-selector.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/default-domain-selector.tsx
@@ -16,7 +16,7 @@ export function DefaultDomainSelector() {
 
   return (
     <>
-      <div className="animate-fade-in mx-auto grid w-full max-w-[312px] gap-4 sm:max-w-[600px] sm:grid-cols-2">
+      <div className="animate-fade-in mx-auto grid w-full gap-4 sm:max-w-[600px] sm:grid-cols-2">
         <DomainOption
           step="domain/custom"
           icon="https://assets.dub.co/icons/domain-sign.webp"
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/layout.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/layout.tsx
index f59e3cb16d5..4f1bf1258ae 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/layout.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/layout.tsx
@@ -1,5 +1,6 @@
 import { Grid, Wordmark } from "@dub/ui";
 import { cn } from "@dub/utils";
+import { SignedInHint } from "app/app.dub.co/(onboarding)/signed-in-hint";
 import Link from "next/link";
 import { PropsWithChildren } from "react";
 
@@ -43,19 +44,27 @@ export default function Layout({ children }: PropsWithChildren) {
         ))}
       </div>
 
-      <div className="relative flex min-h-[100dvh] min-h-screen w-full flex-col items-center justify-between">
-        <div className="grow basis-0">
-          <div className="pt-4">
+      <div className="relative flex min-h-[100dvh] min-h-screen w-full flex-col items-center overflow-hidden md:justify-between">
+        <div className="w-full px-4 pt-4 md:grow md:basis-0 md:px-0">
+          <div className="flex justify-center pt-4">
             <Link href="https://dub.co/home" target="_blank" className="block">
               <Wordmark className="h-8" />
             </Link>
           </div>
         </div>
 
-        <div className="w-full py-16">{children}</div>
+        <div className="w-full flex-1 overflow-y-auto md:flex-none md:overflow-visible">
+          <div className="w-full px-5 pb-8 pt-8 sm:pb-4 md:px-0 md:py-16">
+            {children}
+          </div>
+        </div>
+
+        <div className="w-full md:hidden">
+          <SignedInHint />
+        </div>
 
-        {/* Empty div to center main content */}
-        <div className="grow basis-0" />
+        {/* Empty div to center main content on desktop */}
+        <div className="hidden md:block md:grow md:basis-0" />
       </div>
     </>
   );
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/plan/plan-selector.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/plan/plan-selector.tsx
index a4c75a9bab0..105cb0e91ef 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/plan/plan-selector.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/plan/plan-selector.tsx
@@ -33,40 +33,48 @@ export function PlanSelector({ product }: { product: OnboardingProduct }) {
       : [PRO_PLAN, BUSINESS_PLAN, ADVANCED_PLAN];
 
   const [period, setPeriod] = useState<"monthly" | "yearly">("monthly");
-  const [mobilePlanIndex, setMobilePlanIndex] = useState(0);
+  const [mobilePlanIndex, setMobilePlanIndex] = useState(() => {
+    const defaultPlanName = product === "partners" ? "Advanced" : "Business";
+    return Math.max(
+      0,
+      plans.findIndex((plan) => plan.name === defaultPlanName),
+    );
+  });
 
   return (
-    <div className="overflow-hidden [container-type:inline-size]">
-      <div
-        className={cn(
-          "mx-auto grid max-w-[calc(var(--cols)*342px)] grid-cols-[repeat(var(--cols),1fr)]",
+    <div className="[container-type:inline-size]">
+      <div className="overflow-hidden max-md:rounded-lg">
+        <div
+          className={cn(
+            "mx-auto grid max-w-[calc(var(--cols)*342px)] grid-cols-[repeat(var(--cols),1fr)]",
 
-          // Mobile
-          "max-lg:w-[calc(var(--cols)*100cqw+(var(--cols)-1)*32px)] max-lg:max-w-none max-lg:translate-x-[calc(-1*var(--index)*(100cqw+32px))] max-lg:gap-x-8 max-lg:transition-transform",
-        )}
-        style={
-          {
-            "--cols": plans.length,
-            "--index": mobilePlanIndex,
-          } as CSSProperties
-        }
-      >
-        {plans.map((plan) => {
-          const features = PRICING_PLAN_MAIN_FEATURES[product][plan.name] || [];
+            // Mobile
+            "max-md:w-[calc(var(--cols)*100cqw+(var(--cols)-1)*32px)] max-md:max-w-none max-md:translate-x-[calc(-1*var(--index)*(100cqw+32px))] max-md:gap-x-8 max-md:transition-transform",
+          )}
+          style={
+            {
+              "--cols": plans.length,
+              "--index": mobilePlanIndex,
+            } as CSSProperties
+          }
+        >
+          {plans.map((plan) => {
+            const features = PRICING_PLAN_MAIN_FEATURES[product][plan.name] || [];
 
-          return (
-            <div
-              key={plan.name}
-              className={cn(
-                "flex flex-col border-y border-l border-neutral-200 bg-white first:rounded-l-lg last:rounded-r-lg last:border-r",
-                product === "links" &&
-                  plan.name === "Business" &&
-                  "bg-gradient-to-b from-orange-50 to-40%",
-                product === "partners" &&
-                  plan.name === "Advanced" &&
-                  "bg-gradient-to-b from-violet-50 to-40%",
-              )}
-            >
+            return (
+              <div
+                key={plan.name}
+                className={cn(
+                  "flex flex-col border-y border-l border-neutral-200 bg-white first:rounded-l-lg last:rounded-r-lg last:border-r",
+                  "max-md:overflow-hidden max-md:rounded-lg max-md:border-0 max-md:ring-1 max-md:ring-inset max-md:ring-neutral-200",
+                  product === "links" &&
+                    plan.name === "Business" &&
+                    "bg-gradient-to-b from-orange-50 to-40%",
+                  product === "partners" &&
+                    plan.name === "Advanced" &&
+                    "bg-gradient-to-b from-violet-50 to-40%",
+                )}
+              >
               <div className="flex grow flex-col gap-6 p-5 pb-3">
                 <div>
                   <div className="flex items-center gap-2">
@@ -151,7 +159,7 @@ export function PlanSelector({ product }: { product: OnboardingProduct }) {
                 <div className="flex gap-2">
                   <button
                     type="button"
-                    className="h-full w-fit rounded-lg bg-neutral-100 px-2.5 transition-colors duration-75 hover:bg-neutral-200/80 enabled:active:bg-neutral-200 disabled:opacity-30 lg:hidden"
+                    className="h-full w-fit rounded-lg bg-neutral-100 px-2.5 transition-colors duration-75 hover:bg-neutral-200/80 enabled:active:bg-neutral-200 disabled:opacity-30 md:hidden"
                     disabled={mobilePlanIndex === 0}
                     onClick={() => setMobilePlanIndex(mobilePlanIndex - 1)}
                   >
@@ -178,7 +186,7 @@ export function PlanSelector({ product }: { product: OnboardingProduct }) {
                   )}
                   <button
                     type="button"
-                    className="h-full w-fit rounded-lg bg-neutral-100 px-2.5 transition-colors duration-75 hover:bg-neutral-200/80 active:bg-neutral-200 disabled:opacity-30 lg:hidden"
+                    className="h-full w-fit rounded-lg bg-neutral-100 px-2.5 transition-colors duration-75 hover:bg-neutral-200/80 active:bg-neutral-200 disabled:opacity-30 md:hidden"
                     disabled={mobilePlanIndex >= plans.length - 1}
                     onClick={() => setMobilePlanIndex(mobilePlanIndex + 1)}
                   >
@@ -286,9 +294,10 @@ export function PlanSelector({ product }: { product: OnboardingProduct }) {
                   </div>
                 </div>
               )}
-            </div>
-          );
-        })}
+              </div>
+            );
+          })}
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/products/product-selector.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/products/product-selector.tsx
index 3262536a30d..d15312b94f0 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/products/product-selector.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/products/product-selector.tsx
@@ -7,14 +7,6 @@ import { ReactNode } from "react";
 import { useOnboardingProgress } from "../../use-onboarding-progress";
 
 const products = {
-  links: {
-    image: "https://assets.dub.co/icons/link.webp",
-    title: "Dub Links",
-    href: "https://dub.co/links",
-    description:
-      "[Short links](https://dub.co/help/category/link-management), [QR codes](https://dub.co/help/article/custom-qr-codes), [real-time analytics](https://dub.co/help/article/dub-analytics), and [conversion tracking](https://dub.co/docs/conversions/quickstart).",
-    paidPlanRequired: false,
-  },
   partners: {
     image: "https://assets.dub.co/icons/trophy.webp",
     title: "Dub Partners",
@@ -23,11 +15,19 @@ const products = {
       "Modern [affiliate programs](https://dub.co/partners) with [global payouts](https://dub.co/help/article/partner-payouts) and [accurate attribution](https://dub.co/help/article/program-analytics).",
     paidPlanRequired: true,
   },
+  links: {
+    image: "https://assets.dub.co/icons/link.webp",
+    title: "Dub Links",
+    href: "https://dub.co/links",
+    description:
+      "[Short links](https://dub.co/help/category/link-management), [QR codes](https://dub.co/help/article/custom-qr-codes), [real-time analytics](https://dub.co/help/article/dub-analytics), and [conversion tracking](https://dub.co/docs/conversions/quickstart).",
+    paidPlanRequired: false,
+  },
 };
 
 export function ProductSelector() {
   return (
-    <div className="animate-fade-in mx-auto grid w-full max-w-[312px] gap-4 sm:max-w-[600px] sm:grid-cols-2">
+    <div className="animate-fade-in mx-auto grid w-full  gap-4 sm:max-w-[600px] sm:grid-cols-2">
       {Object.entries(products).map(([key, product]) => (
         <ProductOption
           key={key}
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/program/reward/form.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/program/reward/form.tsx
index 9191ca3e30c..3fc0296aa12 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/program/reward/form.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/program/reward/form.tsx
@@ -115,7 +115,7 @@ export function Form() {
           Reward type
         </h2>
 
-        <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
           {DEFAULT_REWARD_TYPES.map(
             ({ key, label, description, mostCommon }) => {
               const isSelected = key === defaultRewardType;
@@ -199,7 +199,7 @@ export function Form() {
                   Commission structure
                 </h2>
 
-                <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                   {COMMISSION_TYPES.map(
                     ({ value, label, shortDescription }) => {
                       const isSelected = value === commissionStructure;
@@ -307,7 +307,7 @@ export function Form() {
                 <h2 className="text-content-emphasis text-sm font-semibold">
                   Payout model
                 </h2>
-                <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                   {PAYOUT_MODELS.map(
                     ({ key, label, description, mostCommon }) => {
                       const isSelected = key === type;
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/step-page.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/step-page.tsx
index bf930c78972..5d6d50af38a 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/step-page.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/step-page.tsx
@@ -25,7 +25,7 @@ export function StepPage({
   return (
     <div
       className={cn(
-        "mx-auto flex w-full max-w-sm flex-col items-center",
+        "mx-auto flex w-full max-w-[430px] flex-col items-center",
         "animate-slide-up-fade [--offset:10px] [animation-duration:1s] [animation-fill-mode:both]",
         className,
       )}
diff --git a/apps/web/ui/workspaces/create-workspace-form.tsx b/apps/web/ui/workspaces/create-workspace-form.tsx
index 9ae86d7d722..009cb80ffec 100644
--- a/apps/web/ui/workspaces/create-workspace-form.tsx
+++ b/apps/web/ui/workspaces/create-workspace-form.tsx
@@ -139,7 +139,7 @@ export function CreateWorkspaceForm({
           </p>
         </label>
         <div className="relative mt-2 flex rounded-md shadow-sm">
-          <span className="inline-flex items-center rounded-l-md border border-r-0 border-neutral-300 bg-neutral-50 px-5 text-neutral-500 sm:text-sm">
+          <span className="inline-flex items-center rounded-l-md border border-r-0 border-neutral-300 bg-neutral-50 px-3 text-neutral-500 sm:text-sm">
             app.{process.env.NEXT_PUBLIC_APP_DOMAIN}
           </span>
           <input
@@ -215,7 +215,7 @@ export function CreateWorkspaceForm({
                     errors.logo && "border-0 ring-2 ring-red-500",
                   )}
                   iconClassName="size-5"
-                  previewClassName="size-10 rounded-full"
+                  previewClassName="size-12 rounded-full"
                   variant="plain"
                   imageSrc={field.value}
                   readFile