diff --git a/docs/screenshots/onboarding-improve/09-new-project-agent-step.png b/docs/screenshots/onboarding-improve/09-new-project-agent-step.png
index b328bb61b0..8c86cd9995 100644
Binary files a/docs/screenshots/onboarding-improve/09-new-project-agent-step.png and b/docs/screenshots/onboarding-improve/09-new-project-agent-step.png differ
diff --git a/packages/dashboard/app/components/SetupWizardModal.css b/packages/dashboard/app/components/SetupWizardModal.css
index fc5ada18f5..eed3935cc4 100644
--- a/packages/dashboard/app/components/SetupWizardModal.css
+++ b/packages/dashboard/app/components/SetupWizardModal.css
@@ -31,7 +31,7 @@
   overscroll-behavior: contain;
 }
 
-.setup-wizard-modal {
+.modal.setup-wizard-modal {
   display: flex;
   flex-direction: column;
   max-width: 880px;
@@ -45,6 +45,11 @@
   flex-shrink: 0;
 }
 
+.modal.setup-wizard-modal--agent {
+  max-width: 1120px;
+  width: min(96vw, 1120px);
+}
+
 @keyframes slideUp {
   from {
     opacity: 0;
@@ -329,7 +334,7 @@
 
 .setup-wizard-agent-layout {
   display: grid;
-  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
+  grid-template-columns: minmax(360px, 1.08fr) minmax(320px, 0.92fr);
   gap: var(--space-lg);
   align-items: start;
 }
diff --git a/packages/dashboard/app/components/SetupWizardModal.tsx b/packages/dashboard/app/components/SetupWizardModal.tsx
index cbbcc266ff..f4849abe17 100644
--- a/packages/dashboard/app/components/SetupWizardModal.tsx
+++ b/packages/dashboard/app/components/SetupWizardModal.tsx
@@ -267,10 +267,16 @@ export function SetupWizardModal({
     ? getPresetById(state.selectedPresetId)
     : undefined;
   const isAgentActionDisabled = state.isCreatingAgent;
+  /*
+   FNXC:Onboarding 2026-06-22-05:37:
+   The optional project-agent step needs more horizontal room than project details so templates and preview can be compared side by side.
+   Keep the wider modal scoped to the agent step so the initial project form stays compact.
+   */
+  const modalClassName = `modal setup-wizard-modal${state.step === "agent" ? " setup-wizard-modal--agent" : ""}`;
 
   return (
     <div className="modal-overlay open setup-wizard-overlay" role="dialog" aria-modal="true" aria-labelledby="wizard-title">
-      <div className="modal setup-wizard-modal">
+      <div className={modalClassName}>
         {/* Header */}
         <div className="setup-wizard-header">
           <div className="setup-wizard-heading">