diff --git a/src/app/(dashboard)/page.tsx b/src/app/(dashboard)/page.tsx
index 7400c07..31817bc 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 ab2f89b..d66c899 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 9f92464..5345afd 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,92 @@ interface MultiStepFormProps {
   onValidationError: (hasErrors: boolean) => void;
   isLoading?: boolean;
   onBackToDashboard?: () => void;
+  initialStep?: number;
+  onQuickStartComplete?: (quickFormData: Partial<SessionBuilderData>) => Promise<void>;
+}
+
+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 +112,33 @@ export default function MultiStepForm({
   onFormDataChange,
   onValidationError,
   isLoading = false,
-  onBackToDashboard
+  onBackToDashboard,
+  initialStep,
+  onQuickStartComplete
 }: 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);
+  const [quickQuestions, setQuickQuestions] = useState('');
+  const [quickSessionName, setQuickSessionName] = useState('');
+  const [quickErrors, setQuickErrors] = useState<{ questions?: string; name?: string }>({});
 
-  // 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 +165,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 +206,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);
@@ -123,6 +225,46 @@ 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;
+    }
+
+    // Prepare Quick Start form data
+    const quickFormData = {
+      critical: trimmedQuestions,
+      goal: 'I want to gather participant responses to these questions.',
+      context: '',
+      sessionName: trimmedName,
+    };
+
+    // Update form data
+    onFormDataChange(quickFormData);
+
+    // Clear any step errors and trigger Quick Start flow (bypasses validation)
+    setStepValidations({});
+    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
   useEffect(() => {
     const hasErrors = Object.values(stepValidations).some(validation => !validation.isValid);
@@ -138,37 +280,80 @@ 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>
-              
-              <div className="p-4">
-                <div className="flex mx-auto mb-1">
-                  <span className="text-muted-foreground">2</span>
+          <div className="bg-white rounded-lg md:p-10 border -m-4">
+            <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-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}
+                  onChange={(e) => {
+                    setQuickSessionName(e.target.value);
+                    if (quickErrors.name) setQuickErrors((prev) => ({ ...prev, name: undefined }));
+                  }}
+                  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>
+                )}
+
+                <Textarea
+                  id="quickQuestions"
+                  value={quickQuestions}
+                  onChange={(e) => {
+                    setQuickQuestions(e.target.value);
+                    if (quickErrors.questions) setQuickErrors((prev) => ({ ...prev, questions: undefined }));
+                  }}
+                  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 && (
+                  <p className="text-xs text-yellow-700 mt-1">{quickErrors.questions}</p>
+                )}
+
+                <div className="mt-4">
+                  <Button type="button" variant="secondary" onClick={handleQuickStart} disabled={isLoading}>
+                    {isLoading ? 'Generating...' : 'Generate'}
+                  </Button>
                 </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>
+
+              {/* Divider */}
+              <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-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>
-                <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 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 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 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>
               </div>
             </div>
-
           </div>
         );
 
@@ -186,11 +371,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 +395,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 +419,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>
@@ -277,21 +467,45 @@ 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-2xl">
+        <div className="flex-1 max-w-4xl 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 +514,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 60e31ff..cd6e1f8 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 59090f2..015f3a6 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/StepHeader.tsx b/src/app/create/StepHeader.tsx
index bd41746..0b35b87 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 55078c3..cad5a94 100644
--- a/src/app/create/StepNavigation.tsx
+++ b/src/app/create/StepNavigation.tsx
@@ -32,13 +32,12 @@ 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"
         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 f2c20e8..3f496ca 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 1498719..4bf7368 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) => {
@@ -153,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);
 
@@ -297,6 +339,8 @@ IMPORTANT:
         onValidationError={setHasValidationErrors}
         isLoading={isLoading}
         onBackToDashboard={() => route.push('/')}
+        initialStep={targetStep && formData.goal?.trim() && formData.critical?.trim() ? targetStep : undefined}
+        onQuickStartComplete={handleQuickStartComplete}
       />
     ),
     Refine: isLoading ? (
@@ -310,6 +354,7 @@ IMPORTANT:
         setCurrentVersion={setCurrentVersion}
         isEditing={isEditingPrompt}
         handleEdit={handleEditPrompt}
+        handleReplaceFullPrompt={handleReplaceFullPrompt}
       />
     ),
     Share: !isLoading && activeStep === 'Share' && (
@@ -456,4 +501,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 0a0ea92..2fb9873 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 0000000..e4e8ee3
--- /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 0000000..cd8f028
--- /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 660e593..fae8145 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