From 99e6d792ee1f486e259764e79b32ae408e55a0b6 Mon Sep 17 00:00:00 2001
From: harry-eastham <harry@estm.xyz>
Date: Thu, 30 Oct 2025 13:06:43 +0000
Subject: [PATCH 1/3] Add session templates and improve creation flow UI

Fixed templates page which was removed in previous release, updating navigation and metadata accordingly.

Enhances the multi-step session creation form with improved step logic, editable summary fields, and UI refinements.

Refactors participant info and review steps for clarity, updates button padding logic, and streamlines progress and navigation components.

Also adds logic to skip steps when using templates and improves overall user experience in the session creation flow.
---
 src/app/(dashboard)/page.tsx               |   2 +-
 src/app/api/metadata.ts                    |   4 +
 src/app/create/MultiStepForm.tsx           | 248 ++++++++++++++++-----
 src/app/create/QuestionContainerHeader.tsx |  15 +-
 src/app/create/ShareParticipants.tsx       |  15 +-
 src/app/create/StepNavigation.tsx          |   7 +-
 src/app/create/StepProgress.tsx            |  25 ++-
 src/app/create/creationFlow.tsx            |  20 ++
 src/app/create/review.tsx                  |  97 +++++---
 src/app/templates/TemplatesClient.tsx      |  94 ++++++++
 src/app/templates/page.tsx                 |   8 +
 src/components/ui/button.tsx               |  13 +-
 12 files changed, 414 insertions(+), 134 deletions(-)
 create mode 100644 src/app/templates/TemplatesClient.tsx
 create mode 100644 src/app/templates/page.tsx

diff --git a/src/app/(dashboard)/page.tsx b/src/app/(dashboard)/page.tsx
index 7400c078..31817bc2 100644
--- a/src/app/(dashboard)/page.tsx
+++ b/src/app/(dashboard)/page.tsx
@@ -218,7 +218,7 @@ export default async function Dashboard({
         <div className="flex-1 flex flex-col justify-center">
           <div className="flex items-center justify-between mb-2">
             <label htmlFor="dashboard-objective" className="block text-base font-medium">What do you want to find out?</label>
-            <Link href="/create">
+            <Link href="/templates">
               <Button variant="ghost" size="sm">
                 <FileText className="w-4 h-4" />
                 Templates
diff --git a/src/app/api/metadata.ts b/src/app/api/metadata.ts
index ab2f89be..d66c8997 100644
--- a/src/app/api/metadata.ts
+++ b/src/app/api/metadata.ts
@@ -37,6 +37,10 @@ const routeMetadata: MetadataConfig = {
     'Create',
     'Manage your Harmonica conversations and settings'
   ),
+  '/templates': getWithTitleAndDescription(
+    'Templates',
+    'Choose from ready-made session templates to get started quickly'
+  ),
   '/login': getWithTitleAndDescription('Sign in to Harmonica'),
 };
 
diff --git a/src/app/create/MultiStepForm.tsx b/src/app/create/MultiStepForm.tsx
index 9f92464d..caa1e2b5 100644
--- a/src/app/create/MultiStepForm.tsx
+++ b/src/app/create/MultiStepForm.tsx
@@ -4,10 +4,12 @@ import { useState, useEffect } from 'react';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
 import { SessionBuilderData } from '@/lib/types';
 import { StepProgress } from './StepProgress';
 import { StepNavigation } from './StepNavigation';
 import { FormStep, StepValidation } from './types';
+import { Edit2, Check, X } from 'lucide-react';
 
 interface MultiStepFormProps {
   onSubmit: (e: React.FormEvent) => Promise<void>;
@@ -16,6 +18,91 @@ interface MultiStepFormProps {
   onValidationError: (hasErrors: boolean) => void;
   isLoading?: boolean;
   onBackToDashboard?: () => void;
+  initialStep?: number;
+}
+
+interface EditableFieldProps {
+  label: string;
+  value: string;
+  onSave: (value: string) => void;
+  placeholder?: string;
+}
+
+function EditableField({
+  label,
+  value,
+  onSave,
+  placeholder,
+}: EditableFieldProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+  const [showEditButton, setShowEditButton] = useState(false);
+
+  useEffect(() => {
+    setEditValue(value);
+  }, [value]);
+
+  const handleSave = () => {
+    onSave(editValue);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditValue(value);
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <Label className="text-sm font-medium text-muted-foreground">{label}</Label>
+      </div>
+      
+      <div 
+        className="relative group"
+        onMouseEnter={() => setShowEditButton(true)}
+        onMouseLeave={() => setShowEditButton(false)}
+      >
+        {!isEditing && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setIsEditing(true)}
+            className={`absolute top-1 right-2 z-10 transition-opacity px-3 ${
+              showEditButton ? 'opacity-100' : 'opacity-0'
+            }`}
+          >
+            <Edit2 className="h-4 w-4" />
+          </Button>
+        )}
+      
+        {isEditing ? (
+          <div className="space-y-2">
+            <Textarea
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              placeholder={placeholder}
+              className="min-h-[100px] resize-none text-base"
+            />
+            <div className="flex space-x-2">
+              <Button size="sm" onClick={handleSave}>
+                <Check className="h-3 w-3" />
+                Save
+              </Button>
+              <Button size="sm" variant="outline" onClick={handleCancel}>
+                <X className="h-3 w-3" />
+                Cancel
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="text-sm text-gray-700 whitespace-pre-wrap bg-white p-3 rounded-md border min-h-[80px]">
+            {value || <span className="text-muted-foreground italic">Not specified</span>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }
 
 export default function MultiStepForm({
@@ -24,19 +111,29 @@ export default function MultiStepForm({
   onFormDataChange,
   onValidationError,
   isLoading = false,
-  onBackToDashboard
+  onBackToDashboard,
+  initialStep
 }: MultiStepFormProps) {
-  const [currentStep, setCurrentStep] = useState<number>(0); // Start at step 0 (intro)
+  const [currentStep, setCurrentStep] = useState<number>(initialStep ?? 0); // Start at provided step or 0
   const [stepValidations, setStepValidations] = useState<Record<number, StepValidation>>({});
-  const [isObjectivePrefilled, setIsObjectivePrefilled] = useState(false);
+  const [isObjectivePrefilled, setIsObjectivePrefilled] = useState(initialStep ? initialStep > 1 : false);
 
-  // Check if objective is pre-filled on mount only
+  // Check if objective is pre-filled and handle template navigation
   useEffect(() => {
-    if (formData.goal?.trim()) {
+    if (initialStep !== undefined && formData.goal?.trim() && formData.critical?.trim()) {
+      // If we have an initial step and the data is loaded, go to that step
+      setIsObjectivePrefilled(true);
+      setCurrentStep(initialStep);
+      return;
+    }
+    
+    // Legacy behavior for when goal is pre-filled but no initial step
+    if (formData.goal?.trim() && initialStep === undefined) {
       setIsObjectivePrefilled(true);
-      setCurrentStep(2); // Skip to step 2 (critical) - intro is step 0, objective is step 1
+      // Only update if we're at step 0, to avoid overriding user navigation
+      setCurrentStep(prev => prev === 0 ? 2 : prev);
     }
-  }, []); // Empty dependency array - only run on mount
+  }, [formData.goal, formData.critical, initialStep]);
 
   // Validate current step
   const validateStep = (step: number): StepValidation => {
@@ -63,9 +160,7 @@ export default function MultiStepForm({
         return { isValid: true };
 
       case 3: // Context
-        if (!formData.context?.trim()) {
-          return { isValid: false, error: 'Adding context helps our AI better understand your session' };
-        }
+        // Context is optional, no validation needed
         return { isValid: true };
 
       case 4: // Session name
@@ -106,6 +201,8 @@ export default function MultiStepForm({
     if (validation.isValid) {
       if (currentStep < 4) {
         setCurrentStep(prev => prev + 1);
+        // Clear any validation error for the new step
+        setStepValidations(prev => ({ ...prev, [currentStep + 1]: { isValid: true } }));
       } else {
         // Submit form on last step
         onSubmit(new Event('submit') as any);
@@ -138,37 +235,45 @@ export default function MultiStepForm({
     switch (stepToRender) {
       case 0: // Intro
         return (
-          <div className="space-y-6 bg-white rounded-lg p-6 border -m-4">
-            <div className="text-center">
-              <h2 className="text-2xl font-semibold mb-4">Let's build your session in just a few steps</h2>
-            </div>
-            
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
-              <div className="p-4">
-                <div className="flex mx-auto mb-1">
-                  <span className="text-muted-foreground">1</span>
-                </div>
-                <h3 className="font-semibold text-lg mb-2">Create</h3>
-                <p className="text-sm text-muted-foreground">Tell us what you want to discover and we'll craft the perfect questions.</p>
+          <div className="bg-white rounded-lg md:p-4 border -m-4">
+            <div className="grid grid-cols-1 md:grid-cols-5 gap-6 items-center">
+              {/* Image left */}
+              <div className="w-full hidden md:block md:col-span-2">
+                <img 
+                  src="/chat-example.png" 
+                  alt="Chat example showing conversation flow" 
+                  className="w-full h-auto"
+                />
               </div>
-              
-              <div className="p-4">
-                <div className="flex mx-auto mb-1">
-                  <span className="text-muted-foreground">2</span>
+              {/* Content right */}
+              <div className="space-y-4 p-6 md:col-span-3">
+                <div>
+                  <h2 className="text-2xl mb-2">Let's design your session</h2>
+                  <p className="text-muted-foreground">You’ll:</p>
                 </div>
-                <h3 className="font-semibold text-lg mb-2">Share</h3>
-                <p className="text-sm text-muted-foreground">Share the link with your group and watch responses flow in naturally.</p>
-              </div>
-              
-              <div className="p-4">
-                <div className="flex mx-auto mb-1">
-                  <span className="text-muted-foreground">3</span>
-                </div>
-                <h3 className="font-semibold text-lg mb-2">Analyze</h3>
-                <p className="text-sm text-muted-foreground">Get AI-powered insights and actionable recommendations.</p>
+                <ul className="space-y-3">
+                  <li className="flex items-start gap-2">
+                    <span className="mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-md bg-yellow-100 text-yellow-700 border border-yellow-200">
+                      <Check className="h-3.5 w-3.5" />
+                    </span>
+                    <span>Share your project goals and context</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-md bg-yellow-100 text-yellow-700 border border-yellow-200">
+                      <Check className="h-3.5 w-3.5" />
+                    </span>
+                    <span>Co-design your conversational guide with AI</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-md bg-yellow-100 text-yellow-700 border border-yellow-200">
+                      <Check className="h-3.5 w-3.5" />
+                    </span>
+                    <span>Review and edit your pre-session form</span>
+                  </li>
+                </ul>
+                <p className="text-muted-foreground">Ready to get started?</p>
               </div>
             </div>
-
           </div>
         );
 
@@ -186,11 +291,11 @@ export default function MultiStepForm({
                 onChange={handleInputChange}
                 placeholder="I want to understand user preferences on our new product features."
                 className={`min-h-[120px] resize-none text-base ${
-                  stepValidations[currentStep]?.error ? 'border-red-500 focus-visible:ring-red-500' : ''
+                  stepValidations[currentStep]?.error ? 'border-yellow-700 focus-visible:ring-yellow-700' : ''
                 }`}
               />
               {stepValidations[currentStep]?.error && (
-                <p className="text-sm text-red-500">{stepValidations[currentStep].error}</p>
+                <p className="text-sm text-yellow-700">{stepValidations[currentStep].error}</p>
               )}
             </div>
           </div>
@@ -210,11 +315,11 @@ export default function MultiStepForm({
                 onChange={handleInputChange}
                 placeholder="Participants should provide examples of their workflows or describe challenges they face."
                 className={`min-h-[120px] resize-none text-base ${
-                  stepValidations[currentStep]?.error ? 'border-red-500 focus-visible:ring-red-500' : ''
+                  stepValidations[currentStep]?.error ? 'border-yellow-700 focus-visible:ring-yellow-700' : ''
                 }`}
               />
               {stepValidations[currentStep]?.error && (
-                <p className="text-sm text-red-500">{stepValidations[currentStep].error}</p>
+                <p className="text-sm text-yellow-700">{stepValidations[currentStep].error}</p>
               )}
             </div>
           </div>
@@ -234,35 +339,40 @@ export default function MultiStepForm({
                 onChange={handleInputChange}
                 placeholder="Our company is developing a new app, and this session is part of our usability testing to gather user feedback on key features."
                 className={`min-h-[120px] resize-none text-base ${
-                  stepValidations[currentStep]?.error ? 'border-red-500 focus-visible:ring-red-500' : ''
+                  stepValidations[currentStep]?.error ? 'border-yellow-700 focus-visible:ring-yellow-700' : ''
                 }`}
               />
               {stepValidations[currentStep]?.error && (
-                <p className="text-sm text-red-500">{stepValidations[currentStep].error}</p>
+                <p className="text-sm text-yellow-700">{stepValidations[currentStep].error}</p>
               )}
             </div>
           </div>
         );
 
-      case 4: // Session name
+      case 4: // Session name with recap
         return (
-          <div className="space-y-6">
+          <div className="space-y-2">
             <div className="text-center">
               <h2 className="text-2xl font-semibold mb-2">Name your session</h2>
               <p className="text-muted-foreground">Enter a clear session name that will be shared with participants</p>
             </div>
+            
             <div className="space-y-2">
+              <Label htmlFor="sessionName" className="text-base font-medium">
+                Session Name
+              </Label>
               <Input
+                id="sessionName"
                 name="sessionName"
                 value={formData.sessionName}
                 onChange={handleInputChange}
                 placeholder="Your session name"
                 className={`text-base ${
-                  stepValidations[currentStep]?.error ? 'border-red-500 focus-visible:ring-red-500' : ''
+                  stepValidations[currentStep]?.error ? 'border-yellow-700 focus-visible:ring-yellow-700' : ''
                 }`}
               />
               {stepValidations[currentStep]?.error && (
-                <p className="text-sm text-red-500">{stepValidations[currentStep].error}</p>
+                <p className="text-sm text-yellow-700">{stepValidations[currentStep].error}</p>
               )}
             </div>
           </div>
@@ -278,20 +388,45 @@ export default function MultiStepForm({
       <div className="flex gap-6 justify-center">
 
         {/* Left side - Form content (2/3) */}
-        <div className="flex-1 max-w-2xl">
+        <div className="flex-1 max-w-3xl space-y-6">
           <StepProgress 
             currentStep={currentStep} 
-            totalSteps={5} 
+            totalSteps={4} 
             isObjectivePrefilled={isObjectivePrefilled}
           />
           
-          <div className="bg-yellow-50 p-8 rounded-xl shadow-md border">
+          <div className="bg-yellow-50 p-8 rounded-xl shadow-md border md:min-w-[720px]">
             {renderStepContent()}
           </div>
+
+          {/* Review section for step 4 */}
+          {currentStep === 4 && (
+            <div className="space-y-4 mb-8">
+              <h3 className="text-lg font-semibold">Session Summary</h3>
+              <EditableField
+                label="Objective"
+                value={formData.goal || ''}
+                onSave={(value) => onFormDataChange({ goal: value })}
+                placeholder="I want to understand user preferences on our new product features."
+              />
+              <EditableField
+                label="Critical to gather"
+                value={formData.critical || ''}
+                onSave={(value) => onFormDataChange({ critical: value })}
+                placeholder="Participants should provide examples of their workflows or describe challenges they face."
+              />
+              <EditableField
+                label="Context"
+                value={formData.context || ''}
+                onSave={(value) => onFormDataChange({ context: value })}
+                placeholder="Our company is developing a new app, and this session is part of our usability testing to gather user feedback on key features."
+              />
+            </div>
+          )}
           
           <StepNavigation
             currentStep={currentStep}
-            totalSteps={5}
+            totalSteps={4}
             isObjectivePrefilled={isObjectivePrefilled}
             onPrevious={handlePrevious}
             onNext={handleNext}
@@ -300,16 +435,7 @@ export default function MultiStepForm({
           />
         </div>
 
-        {/* Right side - Image (1/3) */}
-        <div className="flex-1 max-w-sm flex items-center justify-center">
-          <div className="w-full max-w-sm">
-            <img 
-              src="/chat-example.png" 
-              alt="Chat example showing conversation flow" 
-              className="w-full h-auto"
-            />
-          </div>
-        </div>
+        {/* Right side removed; intro image moved inside card to avoid layout shift */}
 
         
       </div>
diff --git a/src/app/create/QuestionContainerHeader.tsx b/src/app/create/QuestionContainerHeader.tsx
index 60e31ff6..cd6e1f84 100644
--- a/src/app/create/QuestionContainerHeader.tsx
+++ b/src/app/create/QuestionContainerHeader.tsx
@@ -1,19 +1,10 @@
 export function QuestionContainerHeader() {
   return (
     <div className="space-y-4 mb-8">
-      <div className="text-center space-y-2">
-        <h2 className="text-2xl font-semibold">Before we launch your session...</h2>
-        <p className="text-gray-600">
-          We need to know what basic information to collect from participants (like name, email, role). 
-          Your actual session questions are already created!
-        </p>
-      </div>
-      
-      
       <div className="space-y-2">
-        <h3 className="text-lg font-semibold">What information do you want participants to share?</h3>
-        <p className="text-sm text-gray-600">
-          This information can be used to identify responses in your results.
+        <h2 className="text-2xl font-semibold">Before participants start</h2>
+        <p className="text-gray-600">
+         Collect a few basic details like name, email, or role before your conversational survey begins. This helps link each response to the right participant.
         </p>
       </div>
     </div>
diff --git a/src/app/create/ShareParticipants.tsx b/src/app/create/ShareParticipants.tsx
index 59090f23..015f3a65 100644
--- a/src/app/create/ShareParticipants.tsx
+++ b/src/app/create/ShareParticipants.tsx
@@ -4,6 +4,7 @@ import QuestionModal from './QuestionModal';
 import { QuestionContainerHeader } from './QuestionContainerHeader';
 import { QuestionContainer } from './QuestionContainer';
 import { HRMarkdown } from '@/components/HRMarkdown';
+import { Check } from 'lucide-react';
 
 interface ShareParticipantsProps {
   onQuestionsUpdate: (questions: QuestionInfo[]) => void;
@@ -109,15 +110,15 @@ export default function ShareParticipants({
     <div className="max-w-6xl mx-auto">
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
         {/* Session Preview - Left Column */}
-        <div className="bg-purple-50 border border-purple-200 rounded-xl p-6 h-fit">
+        <div className="rounded-xl p-6 h-fit">
           <div className="space-y-4">
             <div className="flex items-center space-x-2">
-              <div className="w-3 h-3 bg-purple-400 rounded-full"></div>
-              <h3 className="text-lg font-semibold text-purple-800">Your Generated Session</h3>
+              <Check className="w-4 h-4 text-yellow-500" />
+              <h3 className="text-lg font-medium">Your Generated Session</h3>
             </div>
             
             {sessionPreview ? (
-              <div className="bg-white rounded-lg p-4 border border-purple-100">
+              <div className="bg-white rounded-lg p-6 border [&_h2]:!text-base [&_h2]:!font-medium">
                 <HRMarkdown content={sessionPreview} />
               </div>
             ) : (
@@ -127,15 +128,11 @@ export default function ShareParticipants({
                 </div>
               </div>
             )}
-            
-            <div className="text-xs text-purple-600 bg-purple-100 rounded-lg p-3">
-              <strong>What you'll get:</strong> Personalized questions, discussion prompts, and activities tailored to your objectives. Participants will engage with this content during the session.
-            </div>
           </div>
         </div>
 
         {/* Participant Info Form - Right Column */}
-        <div className="bg-white rounded-xl shadow p-6">
+        <div className="bg-yellow-50 rounded-2xl border shadow-sm p-8">
           <QuestionContainerHeader />
           <QuestionContainer
             questions={questions}
diff --git a/src/app/create/StepNavigation.tsx b/src/app/create/StepNavigation.tsx
index 55078c35..8067e168 100644
--- a/src/app/create/StepNavigation.tsx
+++ b/src/app/create/StepNavigation.tsx
@@ -38,7 +38,6 @@ export function StepNavigation({
         variant="outline"
         onClick={onPrevious}
         disabled={isFirstStep}
-        className="flex items-center gap-2"
       >
         <ChevronLeft className="w-4 h-4" />
         Back
@@ -46,19 +45,19 @@ export function StepNavigation({
       
       <Button
         type="button"
+        variant="default"
         onClick={onNext}
         disabled={isNextDisabled || isLoading}
-        className="flex items-center gap-2 bg-black hover:bg-gray-800 text-white"
       >
         {isLoading ? (
           <>
-            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+            <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
             Loading...
           </>
         ) : (
           <>
             {nextLabel === 'Generate Session' && <Sparkles className="w-4 h-4" />}
-            {nextLabel}
+            <span className="px-1">{nextLabel}</span>
             <ChevronRight className="w-4 h-4" />
           </>
         )}
diff --git a/src/app/create/StepProgress.tsx b/src/app/create/StepProgress.tsx
index f2c20e84..3f496cab 100644
--- a/src/app/create/StepProgress.tsx
+++ b/src/app/create/StepProgress.tsx
@@ -11,22 +11,29 @@ export function StepProgress({
   totalSteps, 
   isObjectivePrefilled = false 
 }: StepProgressProps) {
-  // Always show the actual step numbers (0-4, but display as 1-5)
-  const displayStep = currentStep + 1;
+  // Hide entire component on intro step
+  if (currentStep === 0) {
+    return null;
+  }
+
+  // Display numbered steps starting at Objective as 1..totalSteps
+  const displayStep = Math.max(currentStep, 0);
   const displayTotal = totalSteps;
   
   // Calculate progress percentage
-  // Step 0: 5%, Step 1: 25%, Step 2: 45%, Step 3: 65%, Step 4: 85%
-  const progressPercentage = (currentStep * 20 + 5);
+  // Intro: minimal progress, then proportional across numbered steps
+  const progressPercentage = Math.min(100, Math.max(0, (currentStep / totalSteps) * 100));
 
   return (
     <div className="w-full max-w-md mx-auto mb-8">
       {/* Step indicator */}
-      <div className="text-center mb-4">
-        <span className="text-sm font-medium text-muted-foreground">
-          Step {displayStep} of {displayTotal}
-        </span>
-      </div>
+      {currentStep !== 0 && (
+        <div className="text-center mb-4">
+          <span className="text-sm font-medium text-muted-foreground">
+            Step {displayStep} of {displayTotal}
+          </span>
+        </div>
+      )}
       
       {/* Progress bar */}
       <div className="w-full bg-gray-200 rounded-full h-2">
diff --git a/src/app/create/creationFlow.tsx b/src/app/create/creationFlow.tsx
index 14987192..f6d281d3 100644
--- a/src/app/create/creationFlow.tsx
+++ b/src/app/create/creationFlow.tsx
@@ -94,6 +94,7 @@ export default function CreationFlow() {
   });
 
   const [templateId, setTemplateId] = useState<string | undefined>();
+  const [targetStep, setTargetStep] = useState<number | undefined>(undefined);
 
   const onFormDataChange = (form: Partial<SessionBuilderData>) => {
     setFormData((prevData) => ({ ...prevData, ...form }));
@@ -105,6 +106,8 @@ export default function CreationFlow() {
   // Handle session storage pre-fill data
   useEffect(() => {
     const prefillData = sessionStorage.getItem('createSessionPrefill');
+    const skipToReview = sessionStorage.getItem('templateSkipToReview');
+    
     if (prefillData) {
       try {
         const data = JSON.parse(prefillData);
@@ -113,6 +116,11 @@ export default function CreationFlow() {
           onFormDataChange(data);
           enabledSteps[1] = true;
           setActiveStep('Create');
+          
+          // If coming from templates, set target step to 3 (Context step)
+          if (skipToReview === 'true') {
+            setTargetStep(3);
+          }
         }
         // Always clear the data
         sessionStorage.removeItem('createSessionPrefill');
@@ -121,6 +129,11 @@ export default function CreationFlow() {
         sessionStorage.removeItem('createSessionPrefill');
       }
     }
+    
+    // Clear the template flag
+    if (skipToReview === 'true') {
+      sessionStorage.removeItem('templateSkipToReview');
+    }
   }, []);
 
   const handleCreateComplete = async (e: React.FormEvent) => {
@@ -297,6 +310,7 @@ IMPORTANT:
         onValidationError={setHasValidationErrors}
         isLoading={isLoading}
         onBackToDashboard={() => route.push('/')}
+        initialStep={targetStep && formData.goal?.trim() && formData.critical?.trim() ? targetStep : undefined}
       />
     ),
     Refine: isLoading ? (
@@ -310,6 +324,7 @@ IMPORTANT:
         setCurrentVersion={setCurrentVersion}
         isEditing={isEditingPrompt}
         handleEdit={handleEditPrompt}
+        handleReplaceFullPrompt={handleReplaceFullPrompt}
       />
     ),
     Share: !isLoading && activeStep === 'Share' && (
@@ -456,4 +471,9 @@ IMPORTANT:
     }
     completeStreaming();
   }
+
+  function handleReplaceFullPrompt(fullPrompt: string) {
+    latestFullPromptRef.current = fullPrompt;
+    getStreamOfSummary({ fullPrompt });
+  }
 }
diff --git a/src/app/create/review.tsx b/src/app/create/review.tsx
index 0a0ea92e..2fb9873d 100644
--- a/src/app/create/review.tsx
+++ b/src/app/create/review.tsx
@@ -8,7 +8,7 @@ import { VersionedPrompt } from './creationFlow';
 import { Spinner } from '@/components/icons';
 import { Badge } from '@/components/ui/badge';
 import { HRMarkdown } from '@/components/HRMarkdown';
-import { Eye } from 'lucide-react';
+import { Eye, Info } from 'lucide-react';
 import { useUser } from '@auth0/nextjs-auth0/client';
 import { isAdmin } from '@/lib/serverUtils';
 
@@ -20,6 +20,7 @@ export default function ReviewPrompt({
   setCurrentVersion,
   isEditing,
   handleEdit,
+  handleReplaceFullPrompt,
 }: {
   prompts: VersionedPrompt[];
   setPrompts: (value: SetStateAction<VersionedPrompt[]>) => void;
@@ -28,12 +29,14 @@ export default function ReviewPrompt({
   setCurrentVersion: (version: number) => void;
   isEditing: boolean;
   handleEdit: (instructions: string) => void;
+  handleReplaceFullPrompt: (fullPrompt: string) => void;
 }) {
   const [editValue, setEditValue] = useState('');
   const [generating, setGenerating] = useState(false);
   const [showModalState, setShowModalState] = useState(false);
   const [fullPrompt, setFullPrompt] = useState('');
   const [advancedMode, setAdvancedMode] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
 
   const user = useUser().user;
 
@@ -64,32 +67,48 @@ export default function ReviewPrompt({
     setFullPrompt(prompts[promptId - 1].fullPrompt);
   };
 
-  const closeAndUpdateFullPrompt = (promptId: number) => {
-    const updatedPrompt = prompts[promptId - 1];
-    updatedPrompt.fullPrompt = fullPrompt;
-    updatedPrompt.summary = fullPrompt;
-    setPrompts((prev) => {
-      prev[promptId - 1] = updatedPrompt;
-      console.log('Updated prompts: ', prev);
-      return [...prev];
-    });
-    setShowModalState(false);
+  const onSaveFullPrompt = () => {
+    setIsSaving(true);
+    handleReplaceFullPrompt(fullPrompt);
   };
 
+  // Close modal when a new summary stream begins (first chunk arrives)
+  useEffect(() => {
+    if (isSaving && summarizedPrompt && summarizedPrompt.length > 0) {
+      setIsSaving(false);
+      setShowModalState(false);
+    }
+  }, [summarizedPrompt, isSaving]);
+
   return (
     <>
       {showModalState && (
-        <div className="fixed inset-0 bg-black bg-opacity-75 items-center justify-center z-50">
-          <div className="bg-white p-8 rounded-lg w-full h-svh overflow-auto flex flex-col">
-            <div className="flex justify-between">
-              <h2 className="text-2xl font-bold mb-4">Full Prompt</h2>
-              <Button onClick={() => closeAndUpdateFullPrompt(1)}>Close</Button>
+        <div className="fixed inset-0 bg-white backdrop-blur-sm bg-opacity-75 z-50 flex items-center justify-center py-8">
+          <div className="bg-white border p-8 rounded-lg w-full max-w-3xl mx-4 md:mx-auto my-6 h-full overflow-y-auto flex flex-col">
+            <div className="flex justify-between mb-8">
+              <div className="flex flex-col">
+                <h2 className="text-2xl font-bold">Interview Guide Prompt</h2>
+                <p>This is the guide we share with the AI to conduct the session.</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button onClick={onSaveFullPrompt} disabled={isSaving} className="border-[1px] flex items-center">
+                  {isSaving ? (
+                    <>
+                      <Spinner />
+                      Saving...
+                    </>
+                  ) : (
+                    'Save'
+                  )}
+                </Button>
+                <Button variant="secondary" onClick={() => setShowModalState(false)} className="border-[1px]">Close</Button>
+              </div>
             </div>
 
             <Textarea
               name="Full Prompt"
               value={fullPrompt}
-              className="w-full flex-1"
+              className="w-full flex-1 h-full"
               onChange={(e) => setFullPrompt(e.target.value)}
             />
           </div>
@@ -97,25 +116,28 @@ export default function ReviewPrompt({
       )}
       <div
         id="card-container"
-        className="bg-white m-4 overflow-hidden mx-auto p-4 rounded-xl shadow space-y-12 max-w-4xl"
+        className="bg-white m-4 overflow-hidden mx-auto p-4 rounded-xl space-y-12 max-w-4xl"
       >
         <div className="lg:flex h-full">
           <div className={`${isEditing ? 'lg:w-2/3' : ''} overflow-auto`}>
             {/* Main title for all generated sessions */}
-            <div className="flex items-center space-x-2 mb-6">
+            <div className="mb-4">
+            <div className="flex items-center space-x-2">
               <div className="w-3 h-3 bg-yellow-400 rounded-full"></div>
               <h2 className="text-lg font-semibold text-yellow-800">
-                Your Generated Session
+                Recommended Structure
               </h2>
             </div>
+            <p className="text-muted-foreground">Based on what you shared, we've generated a recommended structure for the session.</p>
+            </div>
             {summarizedPrompt ||
               (generating ? (
-                <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6 my-4">
+                <div className="bg-yellow-50 border rounded-xl p-6 my-4">
                   {summarizedPrompt ? (
                     <>
                       <div className="mb-4">
-                        <span className="text-sm text-yellow-600 font-medium">
-                          v{prompts.length + 1}
+                        <span className="text-sm font-medium">
+                          Version {prompts.length + 1}
                         </span>
                       </div>
                       <div className="p-4">
@@ -150,7 +172,7 @@ export default function ReviewPrompt({
                 key={prompt.id}
                 className={`my-4 ${
                   prompt.id === currentVersion && !generating
-                    ? 'bg-yellow-50 border border-yellow-200'
+                    ? 'bg-yellow-50 border'
                     : 'bg-white border border-gray-200'
                 } rounded-xl p-6`}
               >
@@ -158,15 +180,21 @@ export default function ReviewPrompt({
                   <div className="flex items-center space-x-2">
                     <span className={`text-sm font-medium ${
                       prompt.id === currentVersion && !generating ? 'text-yellow-600' : 'text-gray-600'
-                    }`}>v{prompts.length - index}</span>
+                    }`}>Version {prompts.length - index}</span>
                   </div>
                   <div className='flex flex-row items-center'>
-                    {advancedMode && (
-                      <Eye
-                        className="mr-2"
-                        onClick={() => showFullPrompt(prompt.id)}
-                      />
-                    )}
+                  {advancedMode && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="mr-2"
+                      onClick={() => showFullPrompt(prompt.id)}
+                      aria-label="View full prompt"
+                      title="View full prompt"
+                    >
+                      <Eye className="w-4 h-4" />
+                    </Button>
+                  )}
                     {/* Disabling the 'Test' chat, it doesn't work because we don't have the session ID yet, but it's needed for the AI to use the actual prompt...
                     <ChatPopupButton
                       prompt={prompt}
@@ -190,6 +218,13 @@ export default function ReviewPrompt({
                 </div>
               </div>
             ))}
+            {/* Disclaimer moved below cards and above navigation buttons */}
+            <div className="inline-flex items-center space-x-2 p-2 bg-yellow-100 border rounded-md w-fit mt-4">
+              <Info className="w-4 h-4 text-yellow-600" />
+              <p className="text-sm font-medium">
+                Collect basic participant info like name and email in the next step
+              </p>
+            </div>
           </div>
           <div className={`${isEditing ? 'lg:w-1/3 m-4' : ''}`}>
             {isEditing && (
diff --git a/src/app/templates/TemplatesClient.tsx b/src/app/templates/TemplatesClient.tsx
new file mode 100644
index 00000000..e4e8ee31
--- /dev/null
+++ b/src/app/templates/TemplatesClient.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import templates from '@/lib/templates.json';
+import { SessionBuilderData } from '@/lib/types';
+import {
+  Lightbulb,
+  History,
+  Grid2X2,
+  Target,
+  ListOrdered,
+  ActivitySquare,
+  ListChecks,
+  ShieldAlert,
+  Sparkles,
+  Leaf,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const iconMap = {
+  history: History,
+  'grid-2x2': Grid2X2,
+  target: Target,
+  'list-ordered': ListOrdered,
+  lightbulb: Lightbulb,
+  'activity-square': ActivitySquare,
+  'list-checks': ListChecks,
+  'shield-alert': ShieldAlert,
+  sparkles: Sparkles,
+  leaf: Leaf,
+} as const;
+
+export default function TemplatesClient() {
+  const router = useRouter();
+
+  const handleTemplateSelect = (templateDefaults: Partial<SessionBuilderData>) => {
+    // Store template data in sessionStorage with timestamp
+    const prefillData = {
+      ...templateDefaults,
+      timestamp: Date.now(),
+    };
+    sessionStorage.setItem('createSessionPrefill', JSON.stringify(prefillData));
+    // Store flag to indicate we should skip to step 4 (review step)
+    sessionStorage.setItem('templateSkipToReview', 'true');
+    // Navigate to create flow
+    router.push('/create');
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto p-6 space-y-8">
+      <div className="text-center space-y-2">
+        <h1 className="text-3xl font-semibold tracking-tight">Session Templates</h1>
+        <p className="text-muted-foreground">
+          Choose a template to get started quickly, or create your own from scratch
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {templates.templates.map((template) => {
+          const Icon =
+            iconMap[template.icon as keyof typeof iconMap] ?? Lightbulb;
+          return (
+            <Card key={template.id} className="flex flex-col">
+              <CardHeader>
+                <Icon className="w-6 h-6 mb-2" strokeWidth={1.5} />
+                <CardTitle className="text-xl">{template.title}</CardTitle>
+                <CardDescription className="text-sm text-muted-foreground">
+                  {template.description}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="flex justify-end mt-auto">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => handleTemplateSelect(template.defaults)}
+                  className="flex"
+                >
+                  Use Template
+                </Button>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/templates/page.tsx b/src/app/templates/page.tsx
new file mode 100644
index 00000000..cd8f0280
--- /dev/null
+++ b/src/app/templates/page.tsx
@@ -0,0 +1,8 @@
+import { getGeneratedMetadata } from 'app/api/metadata';
+import TemplatesClient from './TemplatesClient';
+
+export const metadata = getGeneratedMetadata('/templates');
+
+export default function TemplatesPage() {
+  return <TemplatesClient />;
+}
\ No newline at end of file
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 660e593b..fae8145c 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -47,16 +47,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const wrapLabel = (child: React.ReactNode, key?: React.Key) => {
       if (typeof child !== "string" && typeof child !== "number") return child;
       
-      const paddingClass = size === "sm" ? "px-1" : "px-2";
+      // Apply smaller padding for `sm`, and default/larger use px-1
+      const paddingClass = size === "sm" ? "px-0.5" : "px-1";
       return <span key={key} className={paddingClass}>{child}</span>;
     };
 
-    let content;
-    if (Array.isArray(children)) {
-      content = children.map((child, i) => wrapLabel(child, i));
-    } else {
-      content = wrapLabel(children);
-    }
+    // Ensure fragments and nested structures are flattened so string labels
+    // are consistently wrapped with padding spans regardless of structure
+    const flatChildren = React.Children.toArray(children);
+    const content = flatChildren.map((child, i) => wrapLabel(child as React.ReactNode, i));
 
     return (
       <Comp

From c9421839dee778d40a00850aa4573fff893efac0 Mon Sep 17 00:00:00 2001
From: harry-eastham <harry@estm.xyz>
Date: Thu, 30 Oct 2025 21:11:15 +0000
Subject: [PATCH 2/3] Add Quick Start option to MultiStepForm intro

Introduces a Quick Start flow on the intro step, allowing users to paste their own questions and session name for instant conversational guide generation. Includes validation, error handling, and UI updates to support both Quick Start and guided setup options.
---
 src/app/create/MultiStepForm.tsx | 105 +++++++++++++++++++++++++------
 1 file changed, 87 insertions(+), 18 deletions(-)

diff --git a/src/app/create/MultiStepForm.tsx b/src/app/create/MultiStepForm.tsx
index caa1e2b5..2bcb50c5 100644
--- a/src/app/create/MultiStepForm.tsx
+++ b/src/app/create/MultiStepForm.tsx
@@ -117,6 +117,9 @@ export default function MultiStepForm({
   const [currentStep, setCurrentStep] = useState<number>(initialStep ?? 0); // Start at provided step or 0
   const [stepValidations, setStepValidations] = useState<Record<number, StepValidation>>({});
   const [isObjectivePrefilled, setIsObjectivePrefilled] = useState(initialStep ? initialStep > 1 : false);
+  const [quickQuestions, setQuickQuestions] = useState('');
+  const [quickSessionName, setQuickSessionName] = useState('');
+  const [quickErrors, setQuickErrors] = useState<{ questions?: string; name?: string }>({});
 
   // Check if objective is pre-filled and handle template navigation
   useEffect(() => {
@@ -220,6 +223,36 @@ export default function MultiStepForm({
     }
   };
 
+  // Handle Quick Start submit from Intro
+  const handleQuickStart = () => {
+    const trimmedQuestions = quickQuestions.trim();
+    const trimmedName = quickSessionName.trim();
+    const errors: { questions?: string; name?: string } = {};
+
+    if (!trimmedQuestions || trimmedQuestions.length < 10) {
+      errors.questions = 'Please paste at least a few questions (min 10 characters)';
+    }
+    if (!trimmedName || trimmedName.length < 3) {
+      errors.name = 'Session name must be at least 3 characters';
+    }
+
+    if (errors.questions || errors.name) {
+      setQuickErrors(errors);
+      return;
+    }
+
+    // Prefill core fields and submit through existing flow
+    onFormDataChange({
+      critical: trimmedQuestions,
+      goal: 'Ask these questions to the participant.',
+      sessionName: trimmedName,
+    });
+
+    // Clear any step errors and trigger submission
+    setStepValidations({});
+    onSubmit(new Event('submit') as any);
+  };
+
   // Update validation errors for parent component
   useEffect(() => {
     const hasErrors = Object.values(stepValidations).some(validation => !validation.isValid);
@@ -235,43 +268,80 @@ export default function MultiStepForm({
     switch (stepToRender) {
       case 0: // Intro
         return (
-          <div className="bg-white rounded-lg md:p-4 border -m-4">
-            <div className="grid grid-cols-1 md:grid-cols-5 gap-6 items-center">
-              {/* Image left */}
-              <div className="w-full hidden md:block md:col-span-2">
-                <img 
-                  src="/chat-example.png" 
-                  alt="Chat example showing conversation flow" 
-                  className="w-full h-auto"
+          <div className="bg-white rounded-lg md:p-10 border -m-4">
+            <h2 className="text-center text-2xl mb-8">Choose how to get started</h2>
+            <div className="flex flex-col md:flex-row gap-8 md:items-stretch items-start">
+              {/* Quick Start - Left (no card styling) */}
+              <div className="w-full md:w-auto flex-1 min-w-0">
+                <h3 className="text-lg mb-2">Quick start</h3>
+                <p className="text-sm text-muted-foreground mb-4">Paste your own questions and let Harmonica turn them into a conversational flow instantly.</p>
+                <Label htmlFor="quickSessionName" className="text-sm font-medium">Session name</Label>
+                <Input
+                  id="quickSessionName"
+                  value={quickSessionName}
+                  onChange={(e) => {
+                    setQuickSessionName(e.target.value);
+                    if (quickErrors.name) setQuickErrors((prev) => ({ ...prev, name: undefined }));
+                  }}
+                  placeholder="e.g. Onboarding research questions"
+                  className={`mb-2 ${quickErrors.name ? 'border-yellow-700 focus-visible:ring-yellow-700' : ''}`}
+                />
+                {quickErrors.name && (
+                  <p className="text-xs text-yellow-700 mb-2">{quickErrors.name}</p>
+                )}
+
+                <Label htmlFor="quickQuestions" className="text-sm font-medium">Questions</Label>
+                <Textarea
+                  id="quickQuestions"
+                  value={quickQuestions}
+                  onChange={(e) => {
+                    setQuickQuestions(e.target.value);
+                    if (quickErrors.questions) setQuickErrors((prev) => ({ ...prev, questions: undefined }));
+                  }}
+                  placeholder={`Example:\n- What problem were you trying to solve?\n- What worked well?\n- What was frustrating?`}
+                  className={`min-h-[140px] md:min-h-[160px] resize-none text-base ${quickErrors.questions ? 'border-yellow-700 focus-visible:ring-yellow-700' : ''}`}
                 />
+                {quickErrors.questions && (
+                  <p className="text-xs text-yellow-700 mt-1">{quickErrors.questions}</p>
+                )}
+
+                <div className="mt-4">
+                  <Button type="button" onClick={handleQuickStart} disabled={isLoading}>
+                    {isLoading ? 'Generating...' : 'Generate with Quick Start'}
+                  </Button>
+                </div>
               </div>
-              {/* Content right */}
-              <div className="space-y-4 p-6 md:col-span-3">
+
+              {/* Divider */}
+              <div className="hidden md:block w-px bg-gray-200 self-stretch" />
+
+              {/* Guided setup - Right (matched heading) */}
+              <div className="space-y-4 md:w-auto flex-1 min-w-0">
                 <div>
-                  <h2 className="text-2xl mb-2">Let's design your session</h2>
-                  <p className="text-muted-foreground">You’ll:</p>
+                  <h3 className="text-lg mb-2">Guided setup</h3>
+                  <p className="text-sm text-muted-foreground">Co-design your conversational survey with AI — define goals, generate questions, and customize before launch.</p>
                 </div>
                 <ul className="space-y-3">
                   <li className="flex items-start gap-2">
                     <span className="mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-md bg-yellow-100 text-yellow-700 border border-yellow-200">
                       <Check className="h-3.5 w-3.5" />
                     </span>
-                    <span>Share your project goals and context</span>
+                    <span className="text-sm text-muted-foreground">Share your project goals and context</span>
                   </li>
                   <li className="flex items-start gap-2">
                     <span className="mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-md bg-yellow-100 text-yellow-700 border border-yellow-200">
                       <Check className="h-3.5 w-3.5" />
                     </span>
-                    <span>Co-design your conversational guide with AI</span>
+                    <span className="text-sm text-muted-foreground">Co-design your conversational guide with AI</span>
                   </li>
                   <li className="flex items-start gap-2">
                     <span className="mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-md bg-yellow-100 text-yellow-700 border border-yellow-200">
                       <Check className="h-3.5 w-3.5" />
                     </span>
-                    <span>Review and edit your pre-session form</span>
+                    <span className="text-sm text-muted-foreground">Review and edit your pre-session form</span>
                   </li>
                 </ul>
-                <p className="text-muted-foreground">Ready to get started?</p>
+                <p className="text-muted-foreground">Use Next to continue with the guided setup.</p>
               </div>
             </div>
           </div>
@@ -387,8 +457,7 @@ export default function MultiStepForm({
     <div className="max-w-6xl mx-auto">
       <div className="flex gap-6 justify-center">
 
-        {/* Left side - Form content (2/3) */}
-        <div className="flex-1 max-w-3xl space-y-6">
+        <div className="flex-1 max-w-4xl space-y-6">
           <StepProgress 
             currentStep={currentStep} 
             totalSteps={4} 

From b6d9a3c769577cbd15c8e068dc11f5f9f49f8b1d Mon Sep 17 00:00:00 2001
From: harry-eastham <harry@estm.xyz>
Date: Fri, 31 Oct 2025 11:25:42 +0000
Subject: [PATCH 3/3] Enhance Quick Start flow in session creation

Adds an onQuickStartComplete callback to MultiStepForm for improved handling of Quick Start submissions, allowing bypass of validation and direct flow to session generation. Updates UI copy and layout for Quick Start and Guided setup, refines StepNavigation layout, and removes the StepHeader component content for a cleaner interface.
---
 src/app/create/MultiStepForm.tsx  | 54 ++++++++++++++++++-------------
 src/app/create/StepHeader.tsx     |  8 +----
 src/app/create/StepNavigation.tsx |  2 +-
 src/app/create/creationFlow.tsx   | 30 +++++++++++++++++
 4 files changed, 64 insertions(+), 30 deletions(-)

diff --git a/src/app/create/MultiStepForm.tsx b/src/app/create/MultiStepForm.tsx
index 2bcb50c5..5345afd7 100644
--- a/src/app/create/MultiStepForm.tsx
+++ b/src/app/create/MultiStepForm.tsx
@@ -19,6 +19,7 @@ interface MultiStepFormProps {
   isLoading?: boolean;
   onBackToDashboard?: () => void;
   initialStep?: number;
+  onQuickStartComplete?: (quickFormData: Partial<SessionBuilderData>) => Promise<void>;
 }
 
 interface EditableFieldProps {
@@ -112,7 +113,8 @@ export default function MultiStepForm({
   onValidationError,
   isLoading = false,
   onBackToDashboard,
-  initialStep
+  initialStep,
+  onQuickStartComplete
 }: MultiStepFormProps) {
   const [currentStep, setCurrentStep] = useState<number>(initialStep ?? 0); // Start at provided step or 0
   const [stepValidations, setStepValidations] = useState<Record<number, StepValidation>>({});
@@ -241,16 +243,26 @@ export default function MultiStepForm({
       return;
     }
 
-    // Prefill core fields and submit through existing flow
-    onFormDataChange({
+    // Prepare Quick Start form data
+    const quickFormData = {
       critical: trimmedQuestions,
-      goal: 'Ask these questions to the participant.',
+      goal: 'I want to gather participant responses to these questions.',
+      context: '',
       sessionName: trimmedName,
-    });
+    };
 
-    // Clear any step errors and trigger submission
+    // Update form data
+    onFormDataChange(quickFormData);
+
+    // Clear any step errors and trigger Quick Start flow (bypasses validation)
     setStepValidations({});
-    onSubmit(new Event('submit') as any);
+    if (onQuickStartComplete) {
+      // Pass form data directly to avoid timing issues with async state updates
+      onQuickStartComplete(quickFormData);
+    } else {
+      // Fallback to regular submit if callback not provided
+      onSubmit(new Event('submit') as any);
+    }
   };
 
   // Update validation errors for parent component
@@ -269,13 +281,12 @@ export default function MultiStepForm({
       case 0: // Intro
         return (
           <div className="bg-white rounded-lg md:p-10 border -m-4">
-            <h2 className="text-center text-2xl mb-8">Choose how to get started</h2>
-            <div className="flex flex-col md:flex-row gap-8 md:items-stretch items-start">
+            <h2 className="text-center mb-8">Choose how to get started</h2>
+            <div className="flex flex-col md:flex-row gap-10 md:items-stretch items-start">
               {/* Quick Start - Left (no card styling) */}
               <div className="w-full md:w-auto flex-1 min-w-0">
-                <h3 className="text-lg mb-2">Quick start</h3>
-                <p className="text-sm text-muted-foreground mb-4">Paste your own questions and let Harmonica turn them into a conversational flow instantly.</p>
-                <Label htmlFor="quickSessionName" className="text-sm font-medium">Session name</Label>
+                <h3 className="text-2xl mb-2">Quick start</h3>
+                <p className="text-sm text-muted-foreground mb-4">Paste your own questions and let Harmonica turn them into a conversational flow instantly</p>
                 <Input
                   id="quickSessionName"
                   value={quickSessionName}
@@ -283,14 +294,13 @@ export default function MultiStepForm({
                     setQuickSessionName(e.target.value);
                     if (quickErrors.name) setQuickErrors((prev) => ({ ...prev, name: undefined }));
                   }}
-                  placeholder="e.g. Onboarding research questions"
+                  placeholder="Session name"
                   className={`mb-2 ${quickErrors.name ? 'border-yellow-700 focus-visible:ring-yellow-700' : ''}`}
                 />
                 {quickErrors.name && (
                   <p className="text-xs text-yellow-700 mb-2">{quickErrors.name}</p>
                 )}
 
-                <Label htmlFor="quickQuestions" className="text-sm font-medium">Questions</Label>
                 <Textarea
                   id="quickQuestions"
                   value={quickQuestions}
@@ -298,7 +308,7 @@ export default function MultiStepForm({
                     setQuickQuestions(e.target.value);
                     if (quickErrors.questions) setQuickErrors((prev) => ({ ...prev, questions: undefined }));
                   }}
-                  placeholder={`Example:\n- What problem were you trying to solve?\n- What worked well?\n- What was frustrating?`}
+                  placeholder={`Your questions. e.g.: \n- What problem are you trying to solve?\n- What worked well?\n- What was frustrating?`}
                   className={`min-h-[140px] md:min-h-[160px] resize-none text-base ${quickErrors.questions ? 'border-yellow-700 focus-visible:ring-yellow-700' : ''}`}
                 />
                 {quickErrors.questions && (
@@ -306,20 +316,20 @@ export default function MultiStepForm({
                 )}
 
                 <div className="mt-4">
-                  <Button type="button" onClick={handleQuickStart} disabled={isLoading}>
-                    {isLoading ? 'Generating...' : 'Generate with Quick Start'}
+                  <Button type="button" variant="secondary" onClick={handleQuickStart} disabled={isLoading}>
+                    {isLoading ? 'Generating...' : 'Generate'}
                   </Button>
                 </div>
               </div>
 
               {/* Divider */}
-              <div className="hidden md:block w-px bg-gray-200 self-stretch" />
+              <div className="hidden md:block w-px bg-muted self-stretch" />
 
               {/* Guided setup - Right (matched heading) */}
               <div className="space-y-4 md:w-auto flex-1 min-w-0">
                 <div>
-                  <h3 className="text-lg mb-2">Guided setup</h3>
-                  <p className="text-sm text-muted-foreground">Co-design your conversational survey with AI — define goals, generate questions, and customize before launch.</p>
+                  <h3 className="text-2xl mb-2">Guided setup</h3>
+                  <p className="text-sm text-muted-foreground">Share your goal for the project and we'll recommended a conversational flow</p>
                 </div>
                 <ul className="space-y-3">
                   <li className="flex items-start gap-2">
@@ -341,7 +351,7 @@ export default function MultiStepForm({
                     <span className="text-sm text-muted-foreground">Review and edit your pre-session form</span>
                   </li>
                 </ul>
-                <p className="text-muted-foreground">Use Next to continue with the guided setup.</p>
+                <p className="text-muted-foreground">Use Next to continue with the guided setup</p>
               </div>
             </div>
           </div>
@@ -429,7 +439,7 @@ export default function MultiStepForm({
             
             <div className="space-y-2">
               <Label htmlFor="sessionName" className="text-base font-medium">
-                Session Name
+                Session name
               </Label>
               <Input
                 id="sessionName"
diff --git a/src/app/create/StepHeader.tsx b/src/app/create/StepHeader.tsx
index bd417461..0b35b877 100644
--- a/src/app/create/StepHeader.tsx
+++ b/src/app/create/StepHeader.tsx
@@ -1,9 +1,3 @@
 export function StepHeader() {
-  return (
-    <div className="flex items-center justify-center mb-6">
-      
-      <h1 className="font-medium text-sm text-gray-400 px-4 py-2 border rounded-lg shadow-sm">New Session</h1>
-      
-    </div>
-  );
+  return null;
 } 
\ No newline at end of file
diff --git a/src/app/create/StepNavigation.tsx b/src/app/create/StepNavigation.tsx
index 8067e168..cad5a94a 100644
--- a/src/app/create/StepNavigation.tsx
+++ b/src/app/create/StepNavigation.tsx
@@ -32,7 +32,7 @@ export function StepNavigation({
   const isLastStep = currentStep === totalSteps;
 
   return (
-    <div className="flex justify-center gap-8 mt-8 max-w-md mx-auto">
+    <div className="flex justify-between mt-8 md:min-w-[720px]">
       <Button
         type="button"
         variant="outline"
diff --git a/src/app/create/creationFlow.tsx b/src/app/create/creationFlow.tsx
index f6d281d3..4bf73684 100644
--- a/src/app/create/creationFlow.tsx
+++ b/src/app/create/creationFlow.tsx
@@ -166,6 +166,35 @@ export default function CreationFlow() {
     }
   };
 
+  const handleQuickStartComplete = async (quickFormData: Partial<SessionBuilderData>) => {
+    // Quick Start bypasses validation and goes straight to generation
+    // Ensure formData is updated with Quick Start values
+    onFormDataChange(quickFormData);
+    
+    setIsLoading(true);
+    enabledSteps[1] = true;
+    setActiveStep('Refine');
+    
+    try {
+      // Use the updated formData (which will include quickFormData after state update)
+      // We need to merge quickFormData with existing formData for getInitialPrompt
+      const mergedFormData = { ...formData, ...quickFormData };
+      const responseFullPrompt = await sendApiCall({
+        target: ApiTarget.Builder,
+        action: ApiAction.CreatePrompt,
+        data: mergedFormData,
+      });
+      latestFullPromptRef.current = responseFullPrompt.fullPrompt;
+      getStreamOfSummary({
+        fullPrompt: responseFullPrompt.fullPrompt,
+      });
+    } catch (error) {
+      setThrowError(() => {
+        throw error;
+      });
+    }
+  };
+
   const handleEditPrompt = async (editValue: string) => {
     console.log('[i] Edit instructions: ', editValue);
 
@@ -311,6 +340,7 @@ IMPORTANT:
         isLoading={isLoading}
         onBackToDashboard={() => route.push('/')}
         initialStep={targetStep && formData.goal?.trim() && formData.critical?.trim() ? targetStep : undefined}
+        onQuickStartComplete={handleQuickStartComplete}
       />
     ),
     Refine: isLoading ? (