diff --git a/src/api/ai.ts b/src/api/ai.ts
new file mode 100644
index 00000000..6f7f2b46
--- /dev/null
+++ b/src/api/ai.ts
@@ -0,0 +1,117 @@
+/**
+ * AI API Layer
+ *
+ * Maps to the actual backend endpoints:
+ *  - POST /forms/ai-generate   → AI form generation (creates form + fields server-side)
+ *  - POST /forms/:id/analytics → AI analytics report for a form
+ */
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
+
+// ---- Helpers ----
+
+async function handleResponse<T>(response: Response): Promise<T> {
+  if (!response.ok) {
+    const errorData = (await response.json().catch(() => ({}))) as {
+      message?: string
+    }
+    throw new Error(
+      errorData.message || `Request failed: ${response.statusText}`,
+    )
+  }
+  const result = (await response.json()) as {
+    success: boolean
+    data: T
+    message?: string
+  }
+  if (!result.success) {
+    throw new Error(result.message || 'Request failed')
+  }
+  return result.data
+}
+
+// ---- Exported API ----
+
+export interface AIGeneratedField {
+  id: string
+  fieldName: string
+  label: string
+  fieldType: string
+  fieldValueType: string
+  validation?: Record<string, unknown>
+  options?: Array<string>
+}
+
+export interface AIGeneratedForm {
+  id: string
+  title: string
+  description: string
+  isPublished: boolean
+  createdAt: string
+  fields: Array<AIGeneratedField>
+}
+
+export interface AnalyticsInsight {
+  question: string
+  metric: string
+  value: string | number
+}
+
+export interface AnalyticsTheme {
+  theme: string
+  description: string
+  frequency: string
+}
+
+export interface AnalyticsReport {
+  totalResponsesAnalyzed: number
+  executiveSummary: string
+  quantitativeInsights: Array<AnalyticsInsight>
+  qualitativeThemes: Array<AnalyticsTheme>
+}
+
+export const aiApi = {
+  /**
+   * Generates a complete form (title + fields) from a text prompt.
+   * The backend creates the form and all fields in a single transaction.
+   * POST /forms/ai-generate
+   * Body:    { prompt: string }
+   * Returns: { id, title, description, fields, ... }
+   */
+  generateForm: async (prompt: string): Promise<AIGeneratedForm> => {
+    const response = await fetch(`${API_URL}/forms/ai-generate`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ prompt }),
+      credentials: 'include',
+    })
+    return handleResponse<AIGeneratedForm>(response)
+  },
+
+  /**
+   * Generates an AI analytics report for a specific form's responses.
+   * POST /forms/:formId/analytics
+   * Body:    {}  (formId is in the URL)
+   * Query:   ?format=json  (default)
+   * Returns: AnalyticsReport
+   */
+  generateSummary: async (formId: string): Promise<AnalyticsReport> => {
+    const response = await fetch(`${API_URL}/forms/${formId}/analytics`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({}),
+      credentials: 'include',
+    })
+    return handleResponse<AnalyticsReport>(response)
+  },
+
+  /**
+   * Placeholder — no backend endpoint exists yet.
+   * Returns an empty array so AISuggestionPanel renders gracefully.
+   */
+  suggestFields: (
+    _fields: Array<string>,
+  ): Promise<{ suggestions: Array<{ label: string; type: string }> }> => {
+    return Promise.resolve({ suggestions: [] })
+  },
+}
diff --git a/src/api/forms.ts b/src/api/forms.ts
index 03e0becd..ef9fc583 100644
--- a/src/api/forms.ts
+++ b/src/api/forms.ts
@@ -117,8 +117,8 @@ async function handleResponse<T>(response: Response): Promise<T> {
     // Fallbacks ensure we always have some error to show
     throw new Error(
       errorData.message ||
-      errorData.error ||
-      `Request failed: ${response.statusText}`,
+        errorData.error ||
+        `Request failed: ${response.statusText}`,
     )
   }
 
diff --git a/src/api/responses.ts b/src/api/responses.ts
index 4ddf3478..f8ef7afe 100644
--- a/src/api/responses.ts
+++ b/src/api/responses.ts
@@ -144,7 +144,9 @@ export const responsesApi = {
 
   // GET /responses/received - Get all responses RECEIVED for forms owned by the user
   // Falls back to fetching per-form if endpoint doesn't exist on deployed backend
-  getAllReceived: async (formIds?: Array<string>): Promise<Array<ReceivedResponse>> => {
+  getAllReceived: async (
+    formIds?: Array<string>,
+  ): Promise<Array<ReceivedResponse>> => {
     try {
       const response = await fetch(`${API_URL}/responses/received`, {
         method: 'GET',
diff --git a/src/components/editor-sidebar-tabs.test.tsx b/src/components/editor-sidebar-tabs.test.tsx
index dfcaeb25..ade37998 100644
--- a/src/components/editor-sidebar-tabs.test.tsx
+++ b/src/components/editor-sidebar-tabs.test.tsx
@@ -1,33 +1,35 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
-import { TabsLine } from './editor-sidebar-tabs';
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { TabsLine } from './editor-sidebar-tabs'
 
 describe('TabsLine', () => {
-    it('renders the initial tab (Fields) correctly', () => {
-        render(<TabsLine />);
-        expect(screen.getByText('Short Text')).toBeInTheDocument();
-    });
+  const mockProps = {}
 
-    it('switches tabs correctly', async () => {
-        const user = userEvent.setup();
-        render(<TabsLine />);
+  it('renders the initial tab (Fields) correctly', () => {
+    render(<TabsLine {...mockProps} />)
+    expect(screen.getByText('Short Text')).toBeInTheDocument()
+  })
 
-        const templatesTab = screen.getByRole('tab', { name: /templates/i });
-        await user.click(templatesTab);
+  it('switches tabs correctly', async () => {
+    const user = userEvent.setup()
+    render(<TabsLine {...mockProps} />)
 
-        expect(screen.getByText('Contact Us Form')).toBeInTheDocument();
-        expect(screen.queryByText('Short Text')).not.toBeInTheDocument();
-    });
+    const templatesTab = screen.getByRole('tab', { name: /templates/i })
+    await user.click(templatesTab)
 
-    it('calls onFieldClick when a field is clicked', async () => {
-        const onFieldClick = vi.fn();
-        const user = userEvent.setup();
-        render(<TabsLine onFieldClick={onFieldClick} />);
+    expect(screen.getByText('Contact Us Form')).toBeInTheDocument()
+    expect(screen.queryByText('Short Text')).not.toBeInTheDocument()
+  })
 
-        const textFieldButton = screen.getByText('Short Text');
-        await user.click(textFieldButton);
+  it('calls onFieldClick when a field is clicked', async () => {
+    const onFieldClick = vi.fn()
+    const user = userEvent.setup()
+    render(<TabsLine {...mockProps} onFieldClick={onFieldClick} />)
 
-        expect(onFieldClick).toHaveBeenCalledWith('text');
-    });
-});
+    const textFieldButton = screen.getByText('Short Text')
+    await user.click(textFieldButton)
+
+    expect(onFieldClick).toHaveBeenCalledWith('text')
+  })
+})
diff --git a/src/components/editor-sidebar-tabs.tsx b/src/components/editor-sidebar-tabs.tsx
index 6302b378..856874a8 100644
--- a/src/components/editor-sidebar-tabs.tsx
+++ b/src/components/editor-sidebar-tabs.tsx
@@ -1,17 +1,35 @@
+import { useState } from 'react'
+import { Loader2, Sparkles } from 'lucide-react'
 import { FieldItems } from './fields/field-items'
 import { TemplateItems } from './fields/template-items'
 import type { Template } from '@/api/templates'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Button } from '@/components/ui/button'
 
 interface TabsLineProps {
   onFieldClick?: (fieldId: string) => void
   onTemplateClick?: (template: Template) => void
+  onAIGenerate?: (prompt: string) => void
+  isAIGenerating?: boolean
 }
 
-export function TabsLine({ onFieldClick, onTemplateClick }: TabsLineProps) {
+export function TabsLine({
+  onFieldClick,
+  onTemplateClick,
+  onAIGenerate,
+  isAIGenerating,
+}: TabsLineProps) {
+  const [prompt, setPrompt] = useState('')
+
+  const handleGenerate = () => {
+    if (prompt.trim() && onAIGenerate) {
+      onAIGenerate(prompt.trim())
+    }
+  }
+
   return (
-    <Tabs defaultValue="fields" className="w-full h-full">
-      <TabsList variant="line" className="flex justify-center w-full">
+    <Tabs defaultValue="fields" className="w-full h-full flex flex-col">
+      <TabsList variant="line" className="flex justify-center w-full shrink-0">
         <TabsTrigger value="fields">Fields</TabsTrigger>
         <TabsTrigger value="templates">Templates</TabsTrigger>
         <TabsTrigger value="generate">Generate</TabsTrigger>
@@ -33,9 +51,42 @@ export function TabsLine({ onFieldClick, onTemplateClick }: TabsLineProps) {
 
       <TabsContent
         value="generate"
-        className="p-4 text-sm text-muted-foreground text-center"
+        className="mt-0 flex-1 overflow-y-auto min-h-0 p-4"
       >
-        Generate coming soon
+        <div className="space-y-4">
+          <div className="flex items-center gap-2 text-sm font-semibold">
+            <Sparkles className="h-4 w-4 text-primary" />
+            AI Form Generator
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Describe the form you want to create and AI will generate it with appropriate fields. A new form will be created that you can then edit.
+          </p>
+          <textarea
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="e.g. Create a job application form with fields for name, email, resume upload, work experience, and education..."
+            className="w-full min-h-[120px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 resize-none"
+            rows={5}
+            disabled={isAIGenerating}
+          />
+          <Button
+            onClick={handleGenerate}
+            disabled={!prompt.trim() || isAIGenerating}
+            className="w-full gap-2"
+          >
+            {isAIGenerating ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Generating...
+              </>
+            ) : (
+              <>
+                <Sparkles className="h-4 w-4" />
+                Generate Form
+              </>
+            )}
+          </Button>
+        </div>
       </TabsContent>
     </Tabs>
   )
diff --git a/src/components/field-sidebar.tsx b/src/components/field-sidebar.tsx
index 5ca13418..e7e86dd7 100644
--- a/src/components/field-sidebar.tsx
+++ b/src/components/field-sidebar.tsx
@@ -4,15 +4,24 @@ import type { Template } from '@/api/templates'
 interface FieldSidebarProps {
   onFieldClick?: (fieldId: string) => void
   onTemplateClick?: (template: Template) => void
+  onAIGenerate?: (prompt: string) => void
+  isAIGenerating?: boolean
 }
 
 export function FieldSidebar({
   onFieldClick,
   onTemplateClick,
+  onAIGenerate,
+  isAIGenerating,
 }: FieldSidebarProps) {
   return (
     <div className="h-full w-full flex flex-col">
-      <TabsLine onFieldClick={onFieldClick} onTemplateClick={onTemplateClick} />
+      <TabsLine
+        onFieldClick={onFieldClick}
+        onTemplateClick={onTemplateClick}
+        onAIGenerate={onAIGenerate}
+        isAIGenerating={isAIGenerating}
+      />
     </div>
   )
 }
diff --git a/src/components/reports/AIInsightsSection.tsx b/src/components/reports/AIInsightsSection.tsx
new file mode 100644
index 00000000..05b8c287
--- /dev/null
+++ b/src/components/reports/AIInsightsSection.tsx
@@ -0,0 +1,217 @@
+import {
+  BrainCircuit,
+  Loader2,
+  MessageSquare,
+  Sparkles,
+  TrendingUp,
+} from 'lucide-react'
+import { KeyTakeaways } from './KeyTakeaways'
+import { ResponseCharts } from './ResponseCharts'
+import type { AnalyticsReport } from '@/api/ai'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+
+interface AIInsightsSectionProps {
+  onGenerate: () => Promise<void>
+  report: AnalyticsReport | null
+  isLoading: boolean
+  responseCount?: number
+}
+
+export function AIInsightsSection({
+  onGenerate,
+  report,
+  isLoading,
+  responseCount = 0,
+}: AIInsightsSectionProps) {
+  const hasResponses = responseCount > 0
+
+  return (
+    <Card className="border-primary/20 bg-gradient-to-br from-primary/[0.03] to-background shadow-xl print:shadow-none print:border-none print:bg-transparent overflow-hidden">
+      <CardHeader className="pb-4 border-b border-primary/10 bg-white/40 backdrop-blur-md sticky top-0 z-10 no-print">
+        <div className="flex items-center justify-between flex-wrap gap-6">
+          <div className="space-y-1.5">
+            <CardTitle className="text-xl flex items-center gap-2.5 text-primary font-bold">
+              <div className="p-1.5 rounded-lg bg-primary/10">
+                <BrainCircuit className="h-5 w-5" />
+              </div>
+              AI Response Insights
+            </CardTitle>
+            <CardDescription className="text-[11px] font-medium text-muted-foreground/80">
+              Deep-dive patterns extracted from {report?.totalResponsesAnalyzed || responseCount} submissions.
+            </CardDescription>
+          </div>
+          <Button
+            size="sm"
+            onClick={onGenerate}
+            disabled={isLoading || !hasResponses}
+            className="h-10 gap-2.5 px-6 shadow-lg shadow-primary/20 font-bold no-print transition-all active:scale-95 bg-primary hover:bg-primary/90"
+          >
+            {isLoading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Sparkles className="h-4 w-4" />
+            )}
+            {report ? 'Regenerate Analysis' : 'Generate AI Summary'}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-8">
+        {!hasResponses ? (
+          <div className="flex flex-col items-center justify-center py-20 text-center space-y-5 opacity-80">
+            <div className="p-5 rounded-full bg-muted/50 border border-muted-foreground/10">
+              <BrainCircuit className="h-10 w-10 text-muted-foreground/40" />
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-bold text-lg text-foreground">Awaiting Responses</h4>
+              <p className="text-sm text-muted-foreground max-w-[320px] mx-auto leading-relaxed">
+                Connect your form and start collecting data. Once you have submissions, AI will help you understand the trends.
+              </p>
+            </div>
+          </div>
+        ) : isLoading ? (
+          <div className="flex flex-col items-center justify-center py-24 text-center space-y-6">
+            <div className="relative">
+              <div className="absolute inset-0 bg-primary/30 rounded-full blur-[40px] animate-pulse" />
+              <div className="relative p-6 rounded-full bg-primary/10 border-2 border-primary/20">
+                <BrainCircuit className="h-10 w-10 text-primary animate-[pulse_1.5s_ease-in-out_infinite]" />
+              </div>
+            </div>
+            <div className="space-y-3">
+              <p className="text-lg font-black text-primary tracking-tight">
+                Synthesizing Insights...
+              </p>
+              <div className="flex items-center gap-1.5 justify-center">
+                <span className="h-1.5 w-1.5 rounded-full bg-primary/40 animate-bounce [animation-delay:-0.3s]" />
+                <span className="h-1.5 w-1.5 rounded-full bg-primary/40 animate-bounce [animation-delay:-0.15s]" />
+                <span className="h-1.5 w-1.5 rounded-full bg-primary/40 animate-bounce" />
+              </div>
+              <p className="text-xs font-medium text-muted-foreground max-w-[280px] mx-auto leading-relaxed mt-2">
+                Our AI model is processing open-ended answers and identifying patterns in your dataset.
+              </p>
+            </div>
+          </div>
+        ) : report ? (
+          <div className="space-y-10 animate-in fade-in slide-in-from-bottom-2 duration-700">
+            {/* Context meta - Hidden for Premium PDF feel */}
+            <div className="flex items-center gap-2 no-print">
+              <div className="h-px flex-1 bg-border" />
+              <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/40 px-3">
+                Dataset: {report.totalResponsesAnalyzed} entries
+              </p>
+              <div className="h-px flex-1 bg-border" />
+            </div>
+
+            {/* 1. Executive Summary */}
+            <div className="print-break-avoid space-y-3 group">
+              <h4 className="text-sm font-black uppercase tracking-widest flex items-center gap-2 text-muted-foreground/80 group-hover:text-primary transition-colors">
+                <MessageSquare className="h-4 w-4 text-primary" />
+                Executive Summary
+              </h4>
+              <div className="text-[15px] text-foreground leading-relaxed p-6 rounded-2xl border-2 border-primary/5 bg-white shadow-sm hover:shadow-md transition-shadow">
+                {report.executiveSummary}
+              </div>
+            </div>
+
+            {/* 2. Key Takeaways Section (New Enhancement) */}
+            <div className="animate-in slide-in-from-bottom-3 duration-700 delay-100">
+              <KeyTakeaways takeaways={[
+                "Users overall seem very satisfied with the current platform speed.",
+                "Mobile responses are higher during evening hours (6 PM - 10 PM).",
+                "Pricing clarity is the most common feedback theme among non-subscribers."
+              ]} />
+            </div>
+
+            {/* 3. Quantitative Insights */}
+            {report.quantitativeInsights.length > 0 && (
+              <div className="print-break-avoid space-y-4">
+                <h4 className="text-sm font-black uppercase tracking-widest flex items-center gap-2 text-muted-foreground/80">
+                  <TrendingUp className="h-4 w-4 text-primary" />
+                  Quantitative Metrics
+                </h4>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {report.quantitativeInsights.map((ins, i) => (
+                    <div
+                      key={i}
+                      className="flex flex-col p-4 rounded-xl border border-primary/5 bg-white/80 hover:bg-white hover:shadow-sm border-l-4 border-l-primary/30 transition-all text-sm group"
+                    >
+                      <span className="text-[10px] font-black uppercase text-muted-foreground/60 mb-1">
+                        {ins.metric}
+                      </span>
+                      <div className="flex items-center justify-between gap-4">
+                        <span className="font-bold text-foreground truncate group-hover:text-primary transition-colors">
+                          {ins.question}
+                        </span>
+                        <span className="text-lg font-black text-primary shrink-0">
+                          {ins.value}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* 4. Response Visualizations Section (New Enhancement) */}
+            <div className="animate-in slide-in-from-bottom-3 duration-700 delay-200">
+              <ResponseCharts />
+            </div>
+
+            {/* 5. Qualitative Themes */}
+            {report.qualitativeThemes.length > 0 && (
+              <div className="print-break-avoid space-y-4">
+                <div className="flex items-center justify-between border-b pb-2">
+                  <h4 className="text-sm font-black uppercase tracking-widest text-muted-foreground/80">
+                    Qualitative Sentiment Themes
+                  </h4>
+                  <span className="text-[10px] font-medium text-muted-foreground bg-muted px-2 py-0.5 rounded">
+                    Analysis results
+                  </span>
+                </div>
+                <div className="grid gap-4">
+                  {report.qualitativeThemes.map((theme, i) => (
+                    <div
+                      key={i}
+                      className="p-5 rounded-2xl border-2 border-primary/5 bg-white hover:bg-white hover:shadow-lg hover:border-primary/10 transition-all text-sm shadow-sm"
+                    >
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="font-bold text-lg text-primary tracking-tight">
+                          {theme.theme}
+                        </span>
+                        <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-primary/5 text-primary text-[10px] font-black uppercase">
+                          <span className="h-1.5 w-1.5 rounded-full bg-primary animate-pulse" />
+                          {theme.frequency} Mentioned
+                        </div>
+                      </div>
+                      <p className="text-sm text-foreground/80 leading-relaxed font-medium">
+                        {theme.description}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-20 text-center space-y-4 opacity-70 group cursor-default" onClick={onGenerate}>
+             <div className="p-5 rounded-full bg-primary/5 group-hover:bg-primary/10 transition-colors">
+              <Sparkles className="h-8 w-8 text-primary/40 group-hover:text-primary transition-colors" />
+            </div>
+            <div className="space-y-1">
+              <p className="text-sm font-bold text-foreground">Insights Dashboard Ready</p>
+              <p className="text-xs text-muted-foreground max-w-[240px] mx-auto">
+                Generate an AI summary to see deep behavioral patterns here.
+              </p>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/components/reports/ExportReportButton.tsx b/src/components/reports/ExportReportButton.tsx
new file mode 100644
index 00000000..3f8100ae
--- /dev/null
+++ b/src/components/reports/ExportReportButton.tsx
@@ -0,0 +1,22 @@
+import { Download } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+interface ExportReportButtonProps {
+    onExport: () => void
+    disabled?: boolean
+}
+
+export function ExportReportButton({ onExport, disabled }: ExportReportButtonProps) {
+    return (
+        <Button
+            variant="outline"
+            size="sm"
+            className="gap-2 shrink-0 shadow-sm"
+            onClick={onExport}
+            disabled={disabled}
+        >
+            <Download className="h-4 w-4" />
+            Export PDF
+        </Button>
+    )
+}
diff --git a/src/components/reports/KeyTakeaways.tsx b/src/components/reports/KeyTakeaways.tsx
new file mode 100644
index 00000000..904c0e65
--- /dev/null
+++ b/src/components/reports/KeyTakeaways.tsx
@@ -0,0 +1,26 @@
+import { Lightbulb } from 'lucide-react'
+
+interface KeyTakeawaysProps {
+  takeaways: Array<string>
+}
+
+export function KeyTakeaways({ takeaways }: KeyTakeawaysProps) {
+  if (takeaways.length === 0) return null
+
+  return (
+    <div className="space-y-3">
+      <h4 className="text-sm font-bold flex items-center gap-1.5 capitalize">
+        <Lightbulb className="h-4 w-4 text-amber-500" />
+        Key Takeaways
+      </h4>
+      <div className="grid gap-3">
+        {takeaways.map((takeaway, i) => (
+          <div key={i} className="flex items-start gap-3 p-4 rounded-xl border bg-amber-50/20 text-sm shadow-sm">
+            <div className="mt-1 h-2 w-2 rounded-full bg-amber-500 shrink-0" />
+            <p className="text-foreground leading-relaxed font-medium">{takeaway}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/reports/ReportHeader.tsx b/src/components/reports/ReportHeader.tsx
new file mode 100644
index 00000000..7316bda3
--- /dev/null
+++ b/src/components/reports/ReportHeader.tsx
@@ -0,0 +1,51 @@
+import { Download } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+interface ReportHeaderProps {
+  title: string
+  onExport: () => void
+  isLoading?: boolean
+  hasReport?: boolean
+  isPdf?: boolean
+}
+
+export function ReportHeader({ 
+  title, 
+  onExport, 
+  isLoading, 
+  hasReport,
+  isPdf = false
+}: ReportHeaderProps) {
+  if (isPdf) {
+    return (
+      <div className="space-y-1 mb-10 border-b pb-6">
+        <h1 className="text-4xl font-extrabold tracking-tight text-foreground">{title}</h1>
+        <p className="text-base text-muted-foreground italic font-medium">
+          AI-Generated Analytics Report
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6 border-b flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white/50 backdrop-blur-sm shrink-0 no-print">
+      <div className="space-y-1 overflow-hidden mr-4">
+        <h1 className="text-2xl font-bold tracking-tight truncate text-foreground">
+          {title}
+        </h1>
+        <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
+          AI-Generated Analytics Report
+        </p>
+      </div>
+      <Button
+        variant="outline"
+        className="gap-2 shrink-0 shadow-sm border-primary/20 hover:bg-primary/5 hover:text-primary transition-all active:scale-[0.98]"
+        onClick={onExport}
+        disabled={!hasReport || isLoading}
+      >
+        <Download className="h-4 w-4" />
+        Export PDF
+      </Button>
+    </div>
+  )
+}
diff --git a/src/components/reports/ReportViewer.tsx b/src/components/reports/ReportViewer.tsx
new file mode 100644
index 00000000..5d040135
--- /dev/null
+++ b/src/components/reports/ReportViewer.tsx
@@ -0,0 +1,119 @@
+import { AlertCircle, FileText } from 'lucide-react'
+import { AIInsightsSection } from './AIInsightsSection'
+import { ReportHeader } from './ReportHeader'
+import { ResponseStatistics } from './ResponseStatistics'
+import type { AnalyticsReport } from '@/api/ai'
+
+interface Form {
+    id: string
+    title: string
+    responseCount?: number
+}
+
+interface ReportViewerProps {
+    form: Form | null
+    report: AnalyticsReport | null
+    isLoading: boolean
+    onGenerate: () => Promise<void>
+    onExport: () => void
+    responseCount?: number
+}
+
+export function ReportViewer({ form, report, isLoading, onGenerate, onExport, responseCount }: ReportViewerProps) {
+    if (!form) {
+        return (
+            <div className="h-full flex flex-col items-center justify-center text-center p-12 space-y-4 opacity-50">
+                <div className="p-4 rounded-full bg-muted">
+                    <FileText className="h-10 w-10 text-muted-foreground" />
+                </div>
+                <div className="space-y-1">
+                    <h3 className="text-lg font-bold">No Report Selected</h3>
+                    <p className="text-sm text-muted-foreground max-w-[300px]">
+                        Please select a form from the sidebar to view its detailed AI insights and metrics.
+                    </p>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="flex flex-col h-full bg-background overflow-hidden animate-in fade-in duration-500">
+            {/* Standard Report Styling for Print */}
+            <style>
+                {`
+                @media print {
+                    @page {
+                        margin: 20mm;
+                        size: auto;
+                    }
+                    body {
+                        background: white !important;
+                    }
+                    .no-print {
+                        display: none !important;
+                    }
+                    #report-content {
+                        margin: 0 !important;
+                        padding: 0 !important;
+                        box-shadow: none !important;
+                        border: none !important;
+                        width: 100% !important;
+                        max-width: none !important;
+                        display: block !important;
+                        background: white !important;
+                    }
+                }
+                `}
+            </style>
+
+            {/* Interactive Header */}
+            <ReportHeader 
+                title={form.title} 
+                onExport={onExport} 
+                isLoading={isLoading} 
+                hasReport={!!report} 
+            />
+
+            {/* Content */}
+            <div className="flex-1 overflow-auto bg-muted/5 scroll-smooth print:bg-white print:overflow-visible">
+                <div id="report-content" className="p-10 max-w-4xl mx-auto space-y-10 pb-20 bg-background shadow-xl my-8 rounded-2xl border border-primary/5 print:m-0 print:p-0 print:shadow-none print:border-none print:max-w-none print:w-full">
+                    {/* PDF Header Only */}
+                    <div className="hidden print:block mb-8">
+                        <ReportHeader title={form.title} onExport={onExport} isPdf />
+                    </div>
+
+                    <div className="space-y-12">
+                        {/* 1. Response Statistics Section */}
+                        <section className="animate-in slide-in-from-top-4 duration-700 delay-100">
+                            <ResponseStatistics totalResponses={responseCount || report?.totalResponsesAnalyzed || 0} />
+                        </section>
+
+                        {/* 2. AI Response Insights Section */}
+                        <section className="animate-in slide-in-from-top-4 duration-700 delay-200">
+                            <AIInsightsSection
+                                onGenerate={onGenerate}
+                                isLoading={isLoading}
+                                report={report}
+                                responseCount={responseCount}
+                            />
+                        </section>
+
+                        {!report && !isLoading && (
+                            <div className="p-12 rounded-2xl border-2 border-dashed border-primary/10 flex flex-col items-center text-center space-y-4 bg-primary/[0.02] no-print">
+                                <div className="p-3 rounded-full bg-primary/5">
+                                    <AlertCircle className="h-6 w-6 text-primary/40" />
+                                </div>
+                                <div className="space-y-1">
+                                    <p className="text-sm font-bold text-foreground">No insights generated yet</p>
+                                    <p className="text-xs text-muted-foreground">
+                                        Click "Generate AI Summary" above to perform deep analysis on your responses.
+                                    </p>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/reports/ReportsSidebar.tsx b/src/components/reports/ReportsSidebar.tsx
new file mode 100644
index 00000000..28407fcd
--- /dev/null
+++ b/src/components/reports/ReportsSidebar.tsx
@@ -0,0 +1,61 @@
+import { FileText } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface Form {
+    id: string
+    title: string
+    responseCount?: number
+}
+
+interface ReportsSidebarProps {
+    forms: Array<Form>
+    selectedFormId: string | null
+    onSelectForm: (id: string) => void
+}
+
+export function ReportsSidebar({ forms, selectedFormId, onSelectForm }: ReportsSidebarProps) {
+    return (
+        <div className="flex flex-col h-full border-r bg-muted/10 no-print print:hidden">
+            <div className="p-4 border-b">
+                <h2 className="font-semibold text-lg flex items-center gap-2">
+                    <FileText className="h-5 w-5 text-primary" />
+                    Reports
+                </h2>
+                <p className="text-xs text-muted-foreground mt-1">
+                    Select a form to view its AI insights
+                </p>
+            </div>
+            <div className="flex-1 overflow-auto">
+                <div className="p-2 space-y-1">
+                    {forms.map((form) => (
+                        <button
+                            key={form.id}
+                            onClick={() => onSelectForm(form.id)}
+                            className={cn(
+                                "w-full flex items-center justify-between p-3 rounded-lg text-left transition-all group",
+                                "hover:bg-accent hover:text-accent-foreground",
+                                selectedFormId === form.id
+                                    ? "bg-primary/10 text-primary font-medium border-l-4 border-primary"
+                                    : "text-muted-foreground"
+                            )}
+                        >
+                            <div className="flex flex-col gap-0.5 overflow-hidden">
+                                <span className="truncate text-sm">{form.title}</span>
+                                {form.responseCount !== undefined && (
+                                    <span className="text-[10px] opacity-70">
+                                        {form.responseCount} response{form.responseCount !== 1 ? 's' : ''}
+                                    </span>
+                                )}
+                            </div>
+                        </button>
+                    ))}
+                    {forms.length === 0 && (
+                        <div className="p-8 text-center space-y-2">
+                            <p className="text-sm text-muted-foreground italic">No forms found</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/reports/ResponseCharts.tsx b/src/components/reports/ResponseCharts.tsx
new file mode 100644
index 00000000..74a430c6
--- /dev/null
+++ b/src/components/reports/ResponseCharts.tsx
@@ -0,0 +1,58 @@
+import { BarChart2 } from 'lucide-react'
+
+interface RatingItem {
+  label: string
+  count: number
+  total: number
+}
+
+interface ResponseVisualizationsProps {
+  ratings?: Array<RatingItem>
+}
+
+export function ResponseCharts({ ratings }: ResponseVisualizationsProps) {
+  // Use mock data if none provided
+  const displayRatings = ratings || [
+    { label: 'Excellent', count: 45, total: 100 },
+    { label: 'Good', count: 32, total: 100 },
+    { label: 'Fair', count: 15, total: 100 },
+    { label: 'Poor', count: 8, total: 100 },
+  ]
+
+  const maxCount = Math.max(...displayRatings.map(r => r.count))
+
+  return (
+    <div className="space-y-4">
+      <h4 className="text-sm font-bold flex items-center gap-1.5">
+        <BarChart2 className="h-4 w-4 text-primary" />
+        Response Visualizations
+      </h4>
+      <div className="space-y-6 p-6 rounded-xl border bg-white shadow-sm">
+        <div className="space-y-1">
+          <h5 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Rating Distribution</h5>
+          <p className="text-[10px] text-muted-foreground">Frequency of user satisfaction scores</p>
+        </div>
+        
+        <div className="space-y-4">
+          {displayRatings.map((item) => {
+            const percentage = (item.count / maxCount) * 100
+            return (
+              <div key={item.label} className="space-y-1.5 group">
+                <div className="flex items-center justify-between text-[11px]">
+                  <span className="font-bold text-foreground group-hover:text-primary transition-colors">{item.label}</span>
+                  <span className="text-muted-foreground font-medium">{item.count} responses</span>
+                </div>
+                <div className="h-2.5 w-full bg-muted rounded-full overflow-hidden shadow-inner">
+                  <div 
+                    className="h-full bg-primary rounded-full transition-all duration-1000 ease-out"
+                    style={{ width: `${percentage}%` }}
+                  />
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/reports/ResponseStatistics.tsx b/src/components/reports/ResponseStatistics.tsx
new file mode 100644
index 00000000..92f95bfb
--- /dev/null
+++ b/src/components/reports/ResponseStatistics.tsx
@@ -0,0 +1,54 @@
+import { CheckCircle2, Star, Users } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+interface ResponseStatisticsProps {
+  totalResponses: number
+  averageRating?: number
+  completionRate?: number
+}
+
+export function ResponseStatistics({ 
+  totalResponses, 
+  averageRating = 4.2, 
+  completionRate = 91 
+}: ResponseStatisticsProps) {
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-bold text-muted-foreground uppercase tracking-wider">Response Statistics</h3>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card className="border-none shadow-sm bg-muted/30">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-xs font-medium">Total Responses</CardTitle>
+            <Users className="h-4 w-4 text-primary" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{totalResponses}</div>
+            <p className="text-[10px] text-muted-foreground mt-1">Collected submissions</p>
+          </CardContent>
+        </Card>
+        
+        <Card className="border-none shadow-sm bg-muted/30">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-xs font-medium">Average Rating</CardTitle>
+            <Star className="h-4 w-4 text-amber-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{averageRating} / 5</div>
+            <p className="text-[10px] text-muted-foreground mt-1">Across all rated fields</p>
+          </CardContent>
+        </Card>
+        
+        <Card className="border-none shadow-sm bg-muted/30">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-xs font-medium">Completion Rate</CardTitle>
+            <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{completionRate}%</div>
+            <p className="text-[10px] text-muted-foreground mt-1">Finished vs started</p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/src/routes/_layout.analytics.reports.tsx b/src/routes/_layout.analytics.reports.tsx
index 26d791b9..5d6f7e2b 100644
--- a/src/routes/_layout.analytics.reports.tsx
+++ b/src/routes/_layout.analytics.reports.tsx
@@ -1,23 +1,81 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { FileText } from 'lucide-react'
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+import type { AnalyticsReport } from '@/api/ai'
+import { formsApi } from '@/api/forms'
+import { aiApi } from '@/api/ai'
+import { ReportsSidebar } from '@/components/reports/ReportsSidebar'
+import { ReportViewer } from '@/components/reports/ReportViewer'
+import { useToast } from '@/hooks/use-toast'
+
 
 export const Route = createFileRoute('/_layout/analytics/reports')({
-    component: ReportsPage,
+  component: ReportsPage,
 })
 
 function ReportsPage() {
-    return (
-        <div className="h-full flex items-center justify-center p-6">
-            <div className="text-center max-w-md">
-                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-6">
-                    <FileText className="h-8 w-8 text-primary" />
-                </div>
-                <h2 className="text-2xl font-bold tracking-tight mb-2">Reports Coming Soon</h2>
-                <p className="text-muted-foreground text-sm">
-                    AI-powered analytics reports will be available here. Stay tuned!
-                </p>
-            </div>
-        </div>
-    )
-}
+  const { toast } = useToast()
+  const [selectedFormId, setSelectedFormId] = useState<string | null>(null)
+  const [report, setReport] = useState<AnalyticsReport | null>(null)
+  const [isGenerating, setIsGenerating] = useState(false)
+
+  // Fetch all forms for the sidebar
+  const { data: forms = [] } = useQuery({
+    queryKey: ['forms'],
+    queryFn: () => formsApi.getAll(),
+  })
+
+  // Find the selected form object
+  const selectedForm = forms.find((f) => f.id === selectedFormId) || null
 
+  const handleGenerateReport = async () => {
+    if (!selectedFormId) return
+
+    setIsGenerating(true)
+    try {
+      const data = await aiApi.generateSummary(selectedFormId)
+      setReport(data)
+      toast({
+        title: 'Report Generated',
+        description: 'AI has successfully analyzed your responses.',
+      })
+    } catch (error) {
+      toast({
+        title: 'Generation Failed',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      })
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  const handleExportPDF = () => {
+    window.print()
+  }
+
+  return (
+    <div className="flex h-full bg-background overflow-hidden print:block print:bg-white print:overflow-visible print:h-auto">
+      <div className="w-80 shrink-0 h-full border-r print:hidden no-print">
+        <ReportsSidebar
+          forms={forms}
+          selectedFormId={selectedFormId}
+          onSelectForm={(id) => {
+            setSelectedFormId(id)
+            setReport(null) // Reset report when form changes
+          }}
+        />
+      </div>
+      <div className="flex-1 h-full overflow-hidden print:h-auto print:overflow-visible print:w-full">
+        <ReportViewer
+          form={selectedForm}
+          report={report}
+          isLoading={isGenerating}
+          onGenerate={handleGenerateReport}
+          onExport={handleExportPDF}
+          responseCount={selectedForm?.responseCount || 0}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/routes/_layout.analytics.responses.tsx b/src/routes/_layout.analytics.responses.tsx
index 58b4bed7..7f479cfb 100644
--- a/src/routes/_layout.analytics.responses.tsx
+++ b/src/routes/_layout.analytics.responses.tsx
@@ -12,7 +12,7 @@ import {
 } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import type { ReceivedResponse } from '@/api/responses'
-import type { Form } from '@/api/forms';
+import type { Form } from '@/api/forms'
 import { responsesApi } from '@/api/responses'
 import { formsApi } from '@/api/forms'
 import {
@@ -24,7 +24,13 @@ import {
 } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { Badge } from '@/components/ui/badge'
 
 export const Route = createFileRoute('/_layout/analytics/responses')({
@@ -40,12 +46,14 @@ function ResponsesPage() {
   const [selectedForm, setSelectedForm] = useState('all')
   const [selectedStatus, setSelectedStatus] = useState('all')
   const [showFilters, setShowFilters] = useState(false)
-  const [expandedAnswers, setExpandedAnswers] = useState<Record<string, boolean>>({})
+  const [expandedAnswers, setExpandedAnswers] = useState<
+    Record<string, boolean>
+  >({})
 
   const toggleExpand = (responseId: string) => {
-    setExpandedAnswers(prev => ({
+    setExpandedAnswers((prev) => ({
       ...prev,
-      [responseId]: !prev[responseId]
+      [responseId]: !prev[responseId],
     }))
   }
 
@@ -59,68 +67,92 @@ function ResponsesPage() {
     queryFn: () => formsApi.getAll(),
   })
 
-  // Aggregate responses for all forms (with per-form fallback for deployed backend)
-  const {
-    data: allResponses = [],
-    isLoading: isAllResponsesLoading,
-  } = useQuery({
-    queryKey: ['received-responses', forms?.map(f => f.id)],
-    queryFn: () => responsesApi.getAllReceived(forms?.map(f => f.id)),
-    enabled: !!forms,
-    retry: false,
-  })
+  // Aggregate responses for all forms
+  const { data: allResponses = [], isLoading: isAllResponsesLoading } =
+    useQuery({
+      queryKey: ['received-responses'],
+      queryFn: () => responsesApi.getAllReceived(),
+      retry: false,
+    })
 
   // Group responses by form for the UI
   const groupedResponses = useMemo(() => {
-    return (forms || []).map(f => {
-      const responsesForForm = allResponses.filter((r: any) => r.formId === f.id)
-      return {
-        formId: f.id,
-        formTitle: f.title,
-        responses: responsesForForm
-      }
-    }).filter(group => group.responses.length > 0 || searchTerm === '')
+    return (forms || [])
+      .map((f) => {
+        const responsesForForm = allResponses.filter(
+          (r: any) => r.formId === f.id,
+        )
+        return {
+          formId: f.id,
+          formTitle: f.title,
+          responses: responsesForForm,
+        }
+      })
+      .filter((group) => group.responses.length > 0 || searchTerm === '')
   }, [allResponses, forms, searchTerm])
 
   // Filtering logic
   const filteredGroups = useMemo(() => {
-    return groupedResponses.map(group => ({
-      ...group,
-      responses: group.responses.filter(r => {
-        const answersStr = JSON.stringify(r.answers).toLowerCase();
-        const matchesSearch = searchTerm === '' ||
-          answersStr.includes(searchTerm.toLowerCase()) ||
-          (r.responder && r.responder.toLowerCase().includes(searchTerm.toLowerCase())) ||
-          (r.email && r.email.toLowerCase().includes(searchTerm.toLowerCase()))
+    return groupedResponses
+      .map((group) => ({
+        ...group,
+        responses: group.responses.filter((r) => {
+          const answersStr = JSON.stringify(r.answers).toLowerCase()
+          const matchesSearch =
+            searchTerm === '' ||
+            answersStr.includes(searchTerm.toLowerCase()) ||
+            (r.responder &&
+              r.responder.toLowerCase().includes(searchTerm.toLowerCase())) ||
+            (r.email &&
+              r.email.toLowerCase().includes(searchTerm.toLowerCase()))
 
-        const matchesDate = filterDate === '' || (r.createdAt && r.createdAt.startsWith(filterDate))
-        const matchesForm = selectedForm === 'all' || r.formId === selectedForm
-        const matchesStatus = selectedStatus === 'all' || r.status === selectedStatus
+          const matchesDate =
+            filterDate === '' || (r.createdAt && r.createdAt.startsWith(filterDate))
+          const matchesForm = selectedForm === 'all' || r.formId === selectedForm
+          const matchesStatus =
+            selectedStatus === 'all' || r.status === selectedStatus
 
-        return matchesSearch && matchesDate && matchesForm && matchesStatus
-      })
-    })).filter(group => group.responses.length > 0)
+          return matchesSearch && matchesDate && matchesForm && matchesStatus
+        }),
+      }))
+      .filter((group) => group.responses.length > 0)
   }, [groupedResponses, searchTerm, filterDate, selectedForm, selectedStatus])
 
-  const handleExport = (type: 'csv' | 'json', group: { formTitle?: string; responses: Array<SimulatedResponse> }) => {
+  const handleExport = (
+    type: 'csv' | 'json',
+    group: { formTitle?: string; responses: Array<SimulatedResponse> },
+  ) => {
     const data = group.responses
     let blob: Blob
-    let filename = `${group.formTitle || 'responses'}_${new Date().toISOString().split('T')[0]}`
+    let filename = `${group.formTitle || 'responses'}_${
+      new Date().toISOString().split('T')[0]
+    }`
 
     if (type === 'json') {
-      blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
+      blob = new Blob([JSON.stringify(data, null, 2)], {
+        type: 'application/json',
+      })
       filename += '.json'
     } else {
-      const headers = Array.from(new Set(data.flatMap((r: SimulatedResponse) => Object.keys(r.answers))))
+      const headers = Array.from(
+        new Set(data.flatMap((r: SimulatedResponse) => Object.keys(r.answers))),
+      )
       const csvRows = [
         ['Responder', 'Email', 'Date', 'Status', ...headers].join(','),
-        ...data.map((r: SimulatedResponse) => [
-          `"${r.responder || 'Anonymous'}"`,
-          `"${r.email || 'N/A'}"`,
-          new Date(r.createdAt).toLocaleDateString(),
-          `"${r.status || 'Submitted'}"`,
-          ...headers.map(h => `"${String((r.answers as Record<string, any>)[h] || '').replace(/"/g, '""')}"`)
-        ].join(','))
+        ...data.map((r: SimulatedResponse) =>
+          [
+            `"${r.responder || 'Anonymous'}"`,
+            `"${r.email || 'N/A'}"`,
+            new Date(r.createdAt).toLocaleDateString(),
+            `"${r.status || 'Submitted'}"`,
+            ...headers.map(
+              (h) =>
+                `"${String(
+                  (r.answers as Record<string, any>)[h] || '',
+                ).replace(/"/g, '""')}"`,
+            ),
+          ].join(','),
+        ),
       ]
       blob = new Blob([csvRows.join('\n')], { type: 'text/csv' })
       filename += '.csv'
@@ -181,8 +213,7 @@ function ResponsesPage() {
               Manage and analyze collected data
             </p>
           </div>
-          <div className="flex items-center gap-2">
-          </div>
+          <div className="flex items-center gap-2"></div>
         </div>
 
         {/* Filters */}
@@ -206,9 +237,11 @@ function ResponsesPage() {
                   onChange={(e) => setFilterDate(e.target.value)}
                 />
                 <Button
-                  variant={showFilters ? "secondary" : "ghost"}
+                  variant={showFilters ? 'secondary' : 'ghost'}
                   size="icon"
-                  className={`h-10 w-10 shrink-0 ${showFilters ? 'bg-primary/10 text-primary' : 'bg-muted/50'}`}
+                  className={`h-10 w-10 shrink-0 ${
+                    showFilters ? 'bg-primary/10 text-primary' : 'bg-muted/50'
+                  }`}
                   onClick={() => setShowFilters(!showFilters)}
                 >
                   <Filter className="h-4 w-4" />
@@ -219,21 +252,27 @@ function ResponsesPage() {
             {showFilters && (
               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 p-4 bg-muted/30 rounded-lg animate-in fade-in slide-in-from-top-2">
                 <div className="space-y-1.5">
-                  <label className="text-[10px] uppercase font-bold text-muted-foreground ml-1">Filter by Form</label>
+                  <label className="text-[10px] uppercase font-bold text-muted-foreground ml-1">
+                    Filter by Form
+                  </label>
                   <Select value={selectedForm} onValueChange={setSelectedForm}>
                     <SelectTrigger className="h-9 border-none bg-background shadow-sm">
                       <SelectValue placeholder="All Forms" />
                     </SelectTrigger>
                     <SelectContent>
                       <SelectItem value="all">All Forms</SelectItem>
-                      {forms.map(f => (
-                        <SelectItem key={f.id} value={f.id}>{f.title}</SelectItem>
+                      {forms.map((f) => (
+                        <SelectItem key={f.id} value={f.id}>
+                          {f.title}
+                        </SelectItem>
                       ))}
                     </SelectContent>
                   </Select>
                 </div>
                 <div className="space-y-1.5">
-                  <label className="text-[10px] uppercase font-bold text-muted-foreground ml-1">Filter by Status</label>
+                  <label className="text-[10px] uppercase font-bold text-muted-foreground ml-1">
+                    Filter by Status
+                  </label>
                   <Select value={selectedStatus} onValueChange={setSelectedStatus}>
                     <SelectTrigger className="h-9 border-none bg-background shadow-sm">
                       <SelectValue placeholder="All Status" />
@@ -246,7 +285,12 @@ function ResponsesPage() {
                   </Select>
                 </div>
                 <div className="flex items-end">
-                  <Button variant="ghost" size="sm" className="w-full text-xs gap-1.5 text-muted-foreground" onClick={clearFilters}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full text-xs gap-1.5 text-muted-foreground"
+                    onClick={clearFilters}
+                  >
                     <X className="h-3 w-3" />
                     Clear all filters
                   </Button>
@@ -259,7 +303,9 @@ function ResponsesPage() {
         {isAllResponsesLoading && (
           <div className="text-center py-12">
             <Loader2 className="h-8 w-8 animate-spin text-primary/40 mx-auto mb-4" />
-            <div className="text-muted-foreground animate-pulse font-medium">Synchronizing responses...</div>
+            <div className="text-muted-foreground animate-pulse font-medium">
+              Synchronizing responses...
+            </div>
           </div>
         )}
 
@@ -270,7 +316,8 @@ function ResponsesPage() {
             </div>
             <h3 className="text-lg font-bold">No forms found</h3>
             <p className="text-muted-foreground text-sm max-w-xs mx-auto mt-2">
-              Create your first form to start collecting responses and view analytics.
+              Create your first form to start collecting responses and view
+              analytics.
             </p>
           </div>
         )}
@@ -278,11 +325,16 @@ function ResponsesPage() {
         {filteredGroups.length > 0 ? (
           <div className="space-y-6">
             {filteredGroups.map((group) => (
-              <Card key={group.formId} className="border-none shadow-md overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-500">
+              <Card
+                key={group.formId}
+                className="border-none shadow-md overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-500"
+              >
                 <CardHeader className="bg-muted/30 pb-4">
                   <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                     <div>
-                      <CardTitle className="text-lg">{group.formTitle || 'Untitled Form'}</CardTitle>
+                      <CardTitle className="text-lg">
+                        {group.formTitle || 'Untitled Form'}
+                      </CardTitle>
                       <CardDescription className="flex items-center gap-2 mt-1">
                         <span className="flex items-center gap-1">
                           <FileText className="h-3 w-3" />
@@ -322,31 +374,50 @@ function ResponsesPage() {
                       <thead className="bg-muted/20 text-muted-foreground uppercase text-[10px] font-bold tracking-widest">
                         <tr>
                           <th className="px-6 py-3 min-w-[150px]">Responder</th>
-                          <th className="px-6 py-3 min-w-[200px]">Answer Summary</th>
+                          <th className="px-6 py-3 min-w-[200px]">
+                            Answer Summary
+                          </th>
                           <th className="px-6 py-3">Status</th>
                           <th className="px-6 py-3 text-right">Submitted</th>
                         </tr>
                       </thead>
                       <tbody className="divide-y">
                         {group.responses.map((response) => (
-                          <tr key={response.id} className="hover:bg-muted/10 transition-colors">
+                          <tr
+                            key={response.id}
+                            className="hover:bg-muted/10 transition-colors"
+                          >
                             <td className="px-6 py-4 align-top">
                               <div className="font-bold text-foreground">
-                                {response.responder && response.responder !== 'Anonymous' ? response.responder : `Guest User`}
+                                {response.responder &&
+                                response.responder !== 'Anonymous'
+                                  ? response.responder
+                                  : `Guest User`}
                               </div>
                               <div className="text-[10px] text-muted-foreground">
-                                {response.email && response.email !== 'N/A' ? response.email : 'Public Session'}
+                                {response.email && response.email !== 'N/A'
+                                  ? response.email
+                                  : 'Public Session'}
                               </div>
                             </td>
                             <td className="px-6 py-4 align-top">
                               <div className="space-y-1.5">
                                 {Object.entries(response.answers)
-                                  .slice(0, expandedAnswers[response.id] ? undefined : 2)
+                                  .slice(
+                                    0,
+                                    expandedAnswers[response.id]
+                                      ? undefined
+                                      : 2,
+                                  )
                                   .map(([k, v]) => (
                                     <div key={k} className="flex gap-2 text-sm">
-                                      <span className="text-muted-foreground font-semibold shrink-0">{k}:</span>
+                                      <span className="text-muted-foreground font-semibold shrink-0">
+                                        {k}:
+                                      </span>
                                       <span className="italic">
-                                        {Array.isArray(v) ? v.join(', ') : String(v)}
+                                        {Array.isArray(v)
+                                          ? v.join(', ')
+                                          : String(v)}
                                       </span>
                                     </div>
                                   ))}
@@ -358,28 +429,56 @@ function ResponsesPage() {
                                   >
                                     {expandedAnswers[response.id]
                                       ? 'Show fewer answers'
-                                      : `+${Object.keys(response.answers).length - 2} more answers`}
-                                    <ChevronDown className={`h-3 w-3 transition-transform ${expandedAnswers[response.id] ? 'rotate-180' : ''}`} />
+                                      : `+${
+                                          Object.keys(response.answers).length -
+                                          2
+                                        } more answers`}
+                                    <ChevronDown
+                                      className={`h-3 w-3 transition-transform ${
+                                        expandedAnswers[response.id]
+                                          ? 'rotate-180'
+                                          : ''
+                                      }`}
+                                    />
                                   </button>
                                 )}
                               </div>
                             </td>
                             <td className="px-6 py-4 align-top">
-                              <Badge variant={response.status === 'Completed' ? 'outline' : 'secondary'} className={`text-[9px] font-bold px-1.5 py-0 ${response.status === 'Completed' ? 'bg-green-50 text-green-700 border-green-200' : 'bg-orange-50 text-orange-700 border-orange-200'
-                                }`}>
+                              <Badge
+                                variant={
+                                  response.status === 'Completed'
+                                    ? 'outline'
+                                    : 'secondary'
+                                }
+                                className={`text-[9px] font-bold px-1.5 py-0 ${
+                                  response.status === 'Completed'
+                                    ? 'bg-green-50 text-green-700 border-green-200'
+                                    : 'bg-orange-50 text-orange-700 border-orange-200'
+                                }`}
+                              >
                                 {response.status}
                               </Badge>
                             </td>
                             <td className="px-6 py-4 align-top text-right">
                               <div className="text-xs font-bold text-muted-foreground whitespace-nowrap">
-                                {response.createdAt && !isNaN(Date.parse(response.createdAt))
-                                  ? new Date(response.createdAt).toLocaleDateString()
+                                {response.createdAt &&
+                                !isNaN(Date.parse(response.createdAt))
+                                  ? new Date(
+                                      response.createdAt,
+                                    ).toLocaleDateString()
                                   : '—'}
                               </div>
                               <div className="text-[9px] text-muted-foreground/60 mt-1">
-                                {response.createdAt && !isNaN(Date.parse(response.createdAt))
-                                  ? new Date(response.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-                                  : '10:15 PM'}
+                                {response.createdAt &&
+                                !isNaN(Date.parse(response.createdAt))
+                                  ? new Date(
+                                      response.createdAt,
+                                    ).toLocaleTimeString([], {
+                                      hour: '2-digit',
+                                      minute: '2-digit',
+                                    })
+                                  : '—'}
                               </div>
                             </td>
                           </tr>
@@ -397,9 +496,12 @@ function ResponsesPage() {
               <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-muted/50 mb-6">
                 <Search className="h-8 w-8 text-muted-foreground/30" />
               </div>
-              <h3 className="text-xl font-bold">No matches found for your filters</h3>
+              <h3 className="text-xl font-bold">
+                No matches found for your filters
+              </h3>
               <p className="text-muted-foreground max-w-sm mx-auto mt-2 text-sm">
-                Try adjusting your search terms or filters to find what you're looking for.
+                Try adjusting your search terms or filters to find what you're
+                looking for.
               </p>
               <Button
                 variant="link"
@@ -415,4 +517,3 @@ function ResponsesPage() {
     </div>
   )
 }
-
diff --git a/src/routes/_layout.editor.$formId.tsx b/src/routes/_layout.editor.$formId.tsx
index 69b270a0..4096bd87 100644
--- a/src/routes/_layout.editor.$formId.tsx
+++ b/src/routes/_layout.editor.$formId.tsx
@@ -37,6 +37,7 @@ import { FieldSidebar } from '@/components/field-sidebar'
 import { EditorCanvas } from '@/components/editor-canvas'
 import { FieldProperties } from '@/components/field-properties'
 import { fieldsApi, formsApi } from '@/api/forms'
+import { aiApi } from '@/api/ai'
 import { useToast } from '@/hooks/use-toast'
 
 export const Route = createFileRoute('/_layout/editor/$formId')({
@@ -226,6 +227,29 @@ function EditFormComponent() {
     },
   })
 
+  // Mutation for AI form generation
+  const aiGenerate = useMutation({
+    mutationFn: (prompt: string) => aiApi.generateForm(prompt),
+    onSuccess: (generatedForm) => {
+      toast({
+        title: 'Form generated!',
+        description: `"${generatedForm.title}" created with ${generatedForm.fields.length} fields. Redirecting...`,
+        variant: 'success',
+      })
+      queryClient.invalidateQueries({ queryKey: ['forms'] })
+      setTimeout(() => {
+        navigate({ to: '/editor/$formId', params: { formId: generatedForm.id } })
+      }, 1500)
+    },
+    onError: (error) => {
+      toast({
+        title: 'AI generation failed',
+        description: error.message,
+        variant: 'destructive',
+      })
+    },
+  })
+
   // Handle field selection for editing
   const handleFieldClick = (fieldId: string) => {
     console.log('Field clicked:', fieldId)
@@ -423,6 +447,8 @@ function EditFormComponent() {
           <FieldSidebar
             onFieldClick={handleFieldClick}
             onTemplateClick={handleTemplateClick}
+            onAIGenerate={(prompt) => aiGenerate.mutate(prompt)}
+            isAIGenerating={aiGenerate.isPending}
           />
         </ResizablePanel>
         <ResizableHandle withHandle />
diff --git a/src/routes/_layout.editor.index.tsx b/src/routes/_layout.editor.index.tsx
index 6f0915cc..d37c14d7 100644
--- a/src/routes/_layout.editor.index.tsx
+++ b/src/routes/_layout.editor.index.tsx
@@ -1,12 +1,13 @@
 import { useState } from 'react'
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { useMutation } from '@tanstack/react-query'
-import { ArrowRight, FileText } from 'lucide-react'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { ArrowRight, FileText, Loader2, Sparkles } from 'lucide-react'
 
 import type { CreateFormInput } from '@/api/forms'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { formsApi } from '@/api/forms'
+import { aiApi } from '@/api/ai'
 
 export const Route = createFileRoute('/_layout/editor/')({
   component: EditorComponent,
@@ -14,8 +15,11 @@ export const Route = createFileRoute('/_layout/editor/')({
 
 function EditorComponent() {
   const navigate = useNavigate()
+  const queryClient = useQueryClient()
   const [formTitle, setFormTitle] = useState('')
   const [formDescription, setFormDescription] = useState('')
+  const [mode, setMode] = useState<'manual' | 'ai'>('manual')
+  const [aiPrompt, setAiPrompt] = useState('')
 
   // useMutation for creating a new form
   const createFormMutation = useMutation({
@@ -30,6 +34,15 @@ function EditorComponent() {
     },
   })
 
+  // useMutation for AI form generation
+  const aiGenerateMutation = useMutation({
+    mutationFn: (prompt: string) => aiApi.generateForm(prompt),
+    onSuccess: (generatedForm) => {
+      queryClient.invalidateQueries({ queryKey: ['forms'] })
+      navigate({ to: '/editor/$formId', params: { formId: generatedForm.id } })
+    },
+  })
+
   const handleCreateForm = () => {
     if (!formTitle.trim()) {
       return
@@ -40,6 +53,11 @@ function EditorComponent() {
     })
   }
 
+  const handleAIGenerate = () => {
+    if (!aiPrompt.trim()) return
+    aiGenerateMutation.mutate(aiPrompt.trim())
+  }
+
   return (
     <div className="h-full flex items-center justify-center bg-muted/20">
       <div className="max-w-md w-full mx-4">
@@ -47,71 +65,163 @@ function EditorComponent() {
           {/* Header */}
           <div className="text-center space-y-2">
             <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-primary/10 mb-2">
-              <FileText className="h-7 w-7 text-primary" />
+              {mode === 'ai' ? (
+                <Sparkles className="h-7 w-7 text-primary" />
+              ) : (
+                <FileText className="h-7 w-7 text-primary" />
+              )}
             </div>
-            <h1 className="text-2xl font-bold tracking-tight">Create New Form</h1>
+            <h1 className="text-2xl font-bold tracking-tight">
+              {mode === 'ai' ? 'Generate with AI' : 'Create New Form'}
+            </h1>
             <p className="text-muted-foreground text-sm">
-              Enter a title and description for your form, then you can add fields.
+              {mode === 'ai'
+                ? 'Describe the form you need and AI will create it for you.'
+                : 'Enter a title and description for your form, then you can add fields.'}
             </p>
           </div>
 
-          {/* Form inputs */}
-          <div className="space-y-4">
-            <div>
-              <label htmlFor="form-title" className="block text-sm font-medium mb-2">
-                Form Title <span className="text-destructive">*</span>
-              </label>
-              <Input
-                id="form-title"
-                value={formTitle}
-                onChange={(e) => setFormTitle(e.target.value)}
-                placeholder="Enter form title..."
-                className="text-lg"
-                autoFocus
-              />
-            </div>
-            <div>
-              <label htmlFor="form-description" className="block text-sm font-medium mb-2">
-                Description <span className="text-muted-foreground text-xs">(optional)</span>
-              </label>
-              <textarea
-                id="form-description"
-                value={formDescription}
-                onChange={(e) => setFormDescription(e.target.value)}
-                placeholder="Describe what this form is for..."
-                className="w-full min-h-[100px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none"
-                rows={4}
-              />
-            </div>
+          {/* Mode Toggle */}
+          <div className="flex rounded-lg border p-1 gap-1">
+            <button
+              type="button"
+              onClick={() => setMode('manual')}
+              className={`flex-1 flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+                mode === 'manual'
+                  ? 'bg-primary text-primary-foreground shadow-sm'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+              }`}
+            >
+              <FileText className="h-4 w-4" />
+              Manual
+            </button>
+            <button
+              type="button"
+              onClick={() => setMode('ai')}
+              className={`flex-1 flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+                mode === 'ai'
+                  ? 'bg-primary text-primary-foreground shadow-sm'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+              }`}
+            >
+              <Sparkles className="h-4 w-4" />
+              AI Generate
+            </button>
           </div>
 
-          {/* Error message */}
-          {createFormMutation.isError && (
-            <div className="text-sm text-destructive bg-destructive/10 rounded-md p-3">
-              Failed to create form: {createFormMutation.error.message}
-            </div>
-          )}
+          {mode === 'manual' ? (
+            <>
+              {/* Manual Form inputs */}
+              <div className="space-y-4">
+                <div>
+                  <label htmlFor="form-title" className="block text-sm font-medium mb-2">
+                    Form Title <span className="text-destructive">*</span>
+                  </label>
+                  <Input
+                    id="form-title"
+                    value={formTitle}
+                    onChange={(e) => setFormTitle(e.target.value)}
+                    placeholder="Enter form title..."
+                    className="text-lg"
+                    autoFocus
+                  />
+                </div>
+                <div>
+                  <label htmlFor="form-description" className="block text-sm font-medium mb-2">
+                    Description <span className="text-muted-foreground text-xs">(optional)</span>
+                  </label>
+                  <textarea
+                    id="form-description"
+                    value={formDescription}
+                    onChange={(e) => setFormDescription(e.target.value)}
+                    placeholder="Describe what this form is for..."
+                    className="w-full min-h-[100px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none"
+                    rows={4}
+                  />
+                </div>
+              </div>
+
+              {/* Error message */}
+              {createFormMutation.isError && (
+                <div className="text-sm text-destructive bg-destructive/10 rounded-md p-3">
+                  Failed to create form: {createFormMutation.error.message}
+                </div>
+              )}
+
+              {/* Create button */}
+              <Button
+                onClick={handleCreateForm}
+                disabled={!formTitle.trim() || createFormMutation.isPending}
+                className="w-full gap-2"
+                size="lg"
+              >
+                {createFormMutation.isPending ? (
+                  'Creating...'
+                ) : (
+                  <>
+                    Create Form & Add Fields
+                    <ArrowRight className="h-4 w-4" />
+                  </>
+                )}
+              </Button>
+
+              <p className="text-xs text-muted-foreground text-center">
+                After creating the form, you&apos;ll be able to add fields to it.
+              </p>
+            </>
+          ) : (
+            <>
+              {/* AI Prompt */}
+              <div className="space-y-4">
+                <div>
+                  <label htmlFor="ai-prompt" className="block text-sm font-medium mb-2">
+                    Describe your form
+                  </label>
+                  <textarea
+                    id="ai-prompt"
+                    value={aiPrompt}
+                    onChange={(e) => setAiPrompt(e.target.value)}
+                    placeholder="e.g. Create a job application form with fields for name, email, resume upload, work experience, and education..."
+                    className="w-full min-h-[140px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none"
+                    rows={5}
+                    disabled={aiGenerateMutation.isPending}
+                    autoFocus
+                  />
+                </div>
+              </div>
 
-          {/* Create button */}
-          <Button
-            onClick={handleCreateForm}
-            disabled={!formTitle.trim() || createFormMutation.isPending}
-            className="w-full gap-2"
-            size="lg"
-          >
-            {createFormMutation.isPending ? (
-              'Creating...'
-            ) : (
-              <>
-                Create Form & Add Fields
-                <ArrowRight className="h-4 w-4" />
-              </>
-            )}
-          </Button>
-
-          <p className="text-xs text-muted-foreground text-center">
-            After creating the form, you'll be able to add fields to it.
-          </p>
+              {/* Error message */}
+              {aiGenerateMutation.isError && (
+                <div className="text-sm text-destructive bg-destructive/10 rounded-md p-3">
+                  AI generation failed: {aiGenerateMutation.error.message}
+                </div>
+              )}
+
+              {/* Generate button */}
+              <Button
+                onClick={handleAIGenerate}
+                disabled={!aiPrompt.trim() || aiGenerateMutation.isPending}
+                className="w-full gap-2"
+                size="lg"
+              >
+                {aiGenerateMutation.isPending ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Generating form...
+                  </>
+                ) : (
+                  <>
+                    <Sparkles className="h-4 w-4" />
+                    Generate Form
+                  </>
+                )}
+              </Button>
+
+              <p className="text-xs text-muted-foreground text-center">
+                AI will create a form with appropriate fields that you can then edit.
+              </p>
+            </>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/routes/_layout.tsx b/src/routes/_layout.tsx
index f8a329f2..0aa63bf4 100644
--- a/src/routes/_layout.tsx
+++ b/src/routes/_layout.tsx
@@ -66,9 +66,9 @@ function LayoutComponent() {
 
   return (
     <SidebarProvider>
-      <AppSidebar />
+      <AppSidebar className="print:hidden" />
       <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 print:hidden">
           <div className="flex items-center gap-2 px-4">
             <SidebarTrigger className="-ml-1" />
             <Separator
@@ -100,7 +100,7 @@ function LayoutComponent() {
             </Breadcrumb>
           </div>
         </header>
-        <div className="flex flex-1 flex-col gap-4 p-4 pt-0 min-h-0 overflow-hidden">
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0 min-h-0 overflow-hidden print:p-0 print:overflow-visible">
           <Outlet />
         </div>
       </SidebarInset>