diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43360ca2..908494a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # IGNY8 Change Log
 
-**Current Version:** 1.6.0  
+**Current Version:** 1.6.1
 **Last Updated:** January 8, 2026
 
 ---
@@ -9,6 +9,7 @@
 
 | Version | Date | Summary |
 |---------|------|---------|
+| 1.6.1 | Jan 8, 2026 | **Email System** - SMTP configuration, email templates, password reset flow, email verification, unsubscribe functionality |
 | 1.6.0 | Jan 8, 2026 | **Major** - Payment System Refactor Complete: Stripe, PayPal, Bank Transfer flows finalized; Simplified signup (no payment redirect); Country-based payment rules; Webhook security; PDF invoices |
 | 1.5.0 | *Planned* | Image Generation System Overhaul, Quality Tier Refinements, Credit Service Enhancements |
 | 1.4.0 | Jan 5, 2026 | **Major** - AI Model Architecture Overhaul, IntegrationProvider Model, AIModelConfig with Credit System, SystemAISettings, Django Admin Reorganization |
@@ -37,6 +38,162 @@
 
 ---
 
+## v1.6.1 - January 8, 2026
+
+### Email System Implementation
+
+This release implements a comprehensive email system with SMTP configuration, customizable email templates, and user authentication flows including password reset, email verification, and unsubscribe functionality.
+
+---
+
+### 📧 SMTP Configuration & Admin
+
+**New Models:**
+- `EmailSettings` - SMTP configuration model with server settings
+  - Fields: `smtp_host`, `smtp_port`, `smtp_username`, `smtp_password`
+  - TLS/SSL configuration options
+  - Default sender email and name
+  - Test email functionality from admin
+
+**Django Admin Integration:**
+- Custom admin panel for email settings (`email_admin.py`)
+- Test email sending directly from admin interface
+- Custom admin templates:
+  - `admin/system/emailsettings/change_form.html` - Settings form with test button
+  - `admin/system/emailsettings/test_email.html` - Test email confirmation page
+
+**Migration:**
+- `0021_add_smtp_email_settings.py` - Creates EmailSettings table
+
+---
+
+### 🔐 Authentication Flows
+
+**Password Reset Flow:**
+- `ForgotPassword.tsx` - Email submission form for password reset requests
+- `ResetPassword.tsx` - Token-based password reset form
+- Backend endpoints integrated with email service
+- Secure token generation and validation
+
+**Email Verification:**
+- `VerifyEmail.tsx` - Email verification page for new users
+- Token-based verification flow
+- Success/error state handling
+- Auto-redirect after verification
+
+**Unsubscribe:**
+- `Unsubscribe.tsx` - One-click email unsubscribe page
+- Token-based unsubscribe for security
+- Confirmation messaging
+
+---
+
+### 📨 Email Service Enhancements
+
+**Email Service Updates** (`email_service.py`):
+- SMTP-based email sending with configurable settings
+- Support for HTML email templates
+- Template rendering with dynamic context
+- Error handling and logging
+- Integration with authentication views
+
+**Email Templates Updated:**
+- `emails/base.html` - Enhanced base template (126+ lines updated)
+- `emails/email_verification.html` - Verification email template
+- `emails/password_reset.html` - Password reset email template
+- `emails/welcome.html` - Welcome email for new users
+- `emails/low_credits.html` - Low credit warning email
+- `emails/payment_approved.html` - Payment approval notification
+- `emails/payment_confirmation.html` - Payment confirmation
+- `emails/payment_failed.html` - Payment failure notification
+- `emails/payment_rejected.html` - Payment rejection notification
+- `emails/refund_notification.html` - Refund notification
+- `emails/subscription_activated.html` - Subscription activation
+- `emails/subscription_renewal.html` - Subscription renewal reminder
+
+---
+
+### 🎨 Frontend Pages
+
+**New Pages:**
+| Route | Component | Description |
+|-------|-----------|-------------|
+| `/forgot-password` | `ForgotPassword.tsx` | Password reset request form |
+| `/reset-password` | `ResetPassword.tsx` | Password reset with token |
+| `/verify-email` | `VerifyEmail.tsx` | Email verification handler |
+| `/unsubscribe` | `Unsubscribe.tsx` | Email unsubscribe page |
+
+**Route Updates:**
+- Added new routes to `App.tsx` (12+ lines)
+- Authentication URL patterns in `auth/urls.py` (209+ lines)
+
+---
+
+### 📚 Documentation Updates
+
+**Django Admin Access Guide:**
+- Updated `docs/90-REFERENCE/DJANGO-ADMIN-ACCESS-GUIDE.md` (104+ lines added)
+- Added email settings administration documentation
+- Test email procedures documented
+
+**Legal Pages:**
+- Minor updates to `Privacy.tsx` and `Terms.tsx`
+
+---
+
+### 🗄️ Database Changes
+
+**New Migration:**
+- `0020_add_email_models.py` - Email models and templates (93 lines)
+- `0021_add_smtp_email_settings.py` - SMTP settings model (53 lines)
+
+**New Models:**
+- `EmailSettings` - SMTP configuration
+- `EmailTemplate` - Customizable email templates (292 lines in `email_models.py`)
+
+---
+
+### 📦 Files Changed Summary
+
+**Backend Files (7):**
+| File | Changes |
+|------|---------|
+| `billing/services/email_service.py` | +427 lines - Complete email service implementation |
+| `modules/system/email_admin.py` | +448 lines - Django admin for email management |
+| `modules/system/email_models.py` | +338 lines - Email settings and template models |
+| `auth/views.py` | +17 lines - Password reset and verification views |
+| `auth/urls.py` | +209 lines - Authentication URL patterns |
+| `billing/views/paypal_views.py` | +26 lines - Email notification integration |
+| `billing/views/stripe_views.py` | +21 lines - Email notification integration |
+
+**Frontend Files (5):**
+| File | Changes |
+|------|---------|
+| `pages/AuthPages/ForgotPassword.tsx` | NEW - 177 lines |
+| `pages/AuthPages/ResetPassword.tsx` | NEW/Updated - 350 lines |
+| `pages/AuthPages/VerifyEmail.tsx` | NEW - 220 lines |
+| `pages/AuthPages/Unsubscribe.tsx` | NEW - 83 lines |
+| `App.tsx` | +12 lines - New route definitions |
+
+**Template Files (13):**
+- All email templates in `templates/emails/` updated for consistency
+
+**Admin Templates (2):**
+- `admin/system/emailsettings/change_form.html` - 15 lines
+- `admin/system/emailsettings/test_email.html` - 97 lines
+- `admin/system/emailtemplate/test_email.html` - 78 lines
+
+---
+
+### Git Reference
+```bash
+# Commits in this release:
+d4ecddba - SMTP and other email related settings
+3651ee9e - Email Configs & setup
+```
+
+---
+
 ## v1.6.0 - January 8, 2026
 
 ### Major Release: Payment System Refactor Complete
diff --git a/docs/INDEX.md b/docs/INDEX.md
index d5f18fc0..fa9b6723 100644
--- a/docs/INDEX.md
+++ b/docs/INDEX.md
@@ -1,6 +1,6 @@
 # IGNY8 Technical Documentation
 
-**Version:** 1.6.0  
+**Version:** 1.6.1
 **Last Updated:** January 8, 2026  
 **Purpose:** Complete technical reference for the IGNY8 AI content platform
 
diff --git a/frontend/src/marketing/pages/Home.tsx b/frontend/src/marketing/pages/Home.tsx
index 673e6659..6e968205 100644
--- a/frontend/src/marketing/pages/Home.tsx
+++ b/frontend/src/marketing/pages/Home.tsx
@@ -12,6 +12,10 @@ import {
   ArrowRightIcon,
   RocketLaunchIcon,
   ChatBubbleLeftRightIcon,
+  ClipboardDocumentCheckIcon,
+  CheckBadgeIcon,
+  GlobeAltIcon,
+  CalendarDaysIcon,
 } from "@heroicons/react/24/outline";
 import { testimonials } from "../data/testimonials";
 import SEO from "../components/SEO";
@@ -41,25 +45,27 @@ const Home: React.FC = () => {
     );
   };
 
+  // 8-Stage Content Pipeline - matches current implementation
   const workflowSteps = [
-    { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
-    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]" },
-    { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]" },
-    { name: "Tasks", icon: DocumentTextIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" },
-    { name: "Content", icon: SparklesIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
-    { name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]" },
-    { name: "Publish", icon: BoltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" },
+    { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "Import & organize" },
+    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Group related terms" },
+    { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" },
+    { name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" },
+    { name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" },
+    { name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Visual generation" },
+    { name: "Review", icon: CheckBadgeIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Quality check" },
+    { name: "Published", icon: GlobeAltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Go live" },
   ];
 
   const productModules = [
     {
       title: "Planner",
-      subtitle: "Market intelligence and keyword → cluster engine",
-      description: "Tap into a living keyword database, cluster at scale, and prioritize opportunities with AI scoring. Build topical maps in minutes, not days.",
+      subtitle: "Keyword → Cluster → Ideas Engine (Stages 1-3)",
+      description: "Import keywords via CSV or manual entry, organize them into topical clusters using AI-powered grouping, and generate content ideas with AI scoring and prioritization.",
       bullets: [
-        "Living keyword database with real-time search volumes",
-        "AI-powered clustering for topical authority mapping",
-        "Priority scoring based on opportunity and competition",
+        "CSV import or manual keyword entry with bulk operations",
+        "AI-powered semantic clustering for topical authority",
+        "Idea generation with scoring and brief creation",
       ],
       icon: ChartBarIcon,
       color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
@@ -69,12 +75,12 @@ const Home: React.FC = () => {
     },
     {
       title: "Writer",
-      subtitle: "AI writing system with brand rules and editorial logic",
-      description: "Generate briefs, long-form articles, and on-brand messaging with contextual SERP data, tone controls, and collaboration tools.",
+      subtitle: "Tasks → Content → Images → Review (Stages 4-7)",
+      description: "Transform ideas into detailed content briefs, generate AI-powered articles with multiple provider options, create images with DALL-E 3, Runware, or Bria, and review content before publishing.",
       bullets: [
-        "Context-aware content generation with SERP analysis",
-        "Brand voice and tone controls for consistency",
-        "Collaborative editing and approval workflows",
+        "Multi-provider AI writing: OpenAI GPT-4o & Anthropic Claude",
+        "Image generation: DALL-E 3, Runware, Bria with style presets",
+        "Rich text editor with SEO optimization and review workflow",
       ],
       icon: SparklesIcon,
       color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
@@ -83,30 +89,30 @@ const Home: React.FC = () => {
       align: "right",
     },
     {
-      title: "Thinker",
-      subtitle: "Strategic OS and thinking engine",
-      description: "Centralize prompts, author voices, and brand playbooks. Sync guidelines directly into every piece of content Igny8 creates.",
+      title: "Publisher",
+      subtitle: "Calendar & WordPress Integration (Stage 8)",
+      description: "Schedule content on a visual calendar, connect to WordPress via the IGNY8 WP Bridge plugin, and publish directly with SEO metadata, categories, and featured images.",
       bullets: [
-        "Centralized prompt library and brand playbooks",
-        "Author voice templates and style guides",
-        "Automated guideline enforcement across all content",
+        "Visual calendar with drag-and-drop scheduling",
+        "One-click WordPress publishing via WP Bridge plugin",
+        "Automatic SEO metadata, categories, and featured images",
       ],
-      icon: BoltIcon,
+      icon: CalendarDaysIcon,
       color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
-      image: "thinker-dashboard.png",
-      link: "/product#thinker",
+      image: "publisher-dashboard.png",
+      link: "/product#publisher",
       align: "left",
     },
     {
       title: "Automation",
-      subtitle: "Always-on execution engine",
-      description: "Orchestrate keywords to ideas, tasks to content, and assets to WordPress in automated cycles—customized to your cadence.",
+      subtitle: "7-Stage Handoff Engine",
+      description: "Orchestrate the entire 8-stage pipeline with automated handoffs. Configure triggers, batch sizes, and scheduling to run your content factory on autopilot.",
       bullets: [
-        "End-to-end workflow automation with custom triggers",
-        "Multi-step handoffs between modules",
-        "Real-time monitoring and error handling",
+        "7 configurable automation stages between pipeline steps",
+        "Customizable batch sizes, limits, and scheduling",
+        "Real-time progress monitoring and error handling",
       ],
-      icon: PhotoIcon,
+      icon: BoltIcon,
       color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
       image: "automation-dashboard.png",
       link: "/product#automation",
@@ -211,26 +217,31 @@ const Home: React.FC = () => {
               How Igny8 Works
             </h2>
             <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-              A seamless pipeline from keyword discovery to published content
+              An 8-stage pipeline from keyword discovery to WordPress publishing
             </p>
           </div>
           
-          {/* Horizontal Timeline */}
+          {/* 8-Stage Horizontal Timeline */}
           <div className="relative">
             {/* Enhanced connecting line with shadow */}
-            <div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
-            
-            <div className="grid grid-cols-2 md:grid-cols-7 gap-6 md:gap-4">
+            <div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
+
+            <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3">
               {workflowSteps.map((step, index) => {
                 const Icon = step.icon;
                 return (
-                  <div key={step.name} className="flex flex-col items-center gap-3">
-                    <div className={`relative size-28 rounded-full bg-gradient-to-br ${step.color} flex items-center justify-center text-white shadow-xl z-10 group hover:scale-110 transition-transform`}>
-                      <Icon className="h-12 w-12" />
+                  <div key={step.name} className="flex flex-col items-center gap-2">
+                    <div className={`relative size-20 md:size-24 rounded-full bg-gradient-to-br ${step.color} flex items-center justify-center text-white shadow-xl z-10 group hover:scale-110 transition-transform`}>
+                      <Icon className="h-8 w-8 md:h-10 md:w-10" />
+                      {/* Stage number badge */}
+                      <div className="absolute -top-1 -right-1 size-6 rounded-full bg-white text-gray-900 text-xs font-bold flex items-center justify-center shadow-md">
+                        {index + 1}
+                      </div>
                       {/* Glow effect */}
                       <div className={`absolute -inset-2 bg-gradient-to-br ${step.color} rounded-full opacity-0 group-hover:opacity-30 blur-xl transition-opacity -z-10`} />
                     </div>
                     <span className="text-sm font-semibold text-gray-900 text-center">{step.name}</span>
+                    <span className="text-xs text-gray-500 text-center hidden md:block">{step.description}</span>
                   </div>
                 );
               })}
@@ -334,42 +345,46 @@ const Home: React.FC = () => {
                 </h2>
               </div>
               <p className="text-xl text-gray-200 mb-8 leading-relaxed font-medium">
-                Orchestrate your entire content pipeline with intelligent handoffs between modules. Set it once, and watch it execute.
+                7 automated handoffs orchestrate your entire 8-stage content pipeline. Configure batch sizes, scheduling, and triggers to run your content factory on autopilot.
               </p>
-              
-              {/* Automation Timeline with neon glows */}
-              <div className="space-y-6 mb-8">
+
+              {/* 7 Automation Handoffs with neon glows */}
+              <div className="space-y-4 mb-8">
                 {[
-                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
-                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
-                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
-                  { from: "Tasks", to: "Content", icon: "→", color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" },
-                  { from: "Content", to: "Images", icon: "→", color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
-                  { from: "Images", to: "Publish", icon: "→", color: "from-[var(--color-purple)] to-[var(--color-success)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Keywords", to: "Clusters", stage: 1, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
+                  { from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Ideas", to: "Tasks", stage: 3, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
+                  { from: "Tasks", to: "Content", stage: 4, color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" },
+                  { from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
+                  { from: "Images", to: "Review", stage: 6, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Review", to: "Published", stage: 7, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
                 ].map((handoff, i) => (
-                  <div key={i} className="flex items-center gap-4">
-                    <div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg ${handoff.glow} group`}>
-                      {handoff.icon}
+                  <div key={i} className="flex items-center gap-3">
+                    <div className={`relative w-10 h-10 rounded-lg bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white text-sm font-bold shadow-lg ${handoff.glow} group`}>
+                      {handoff.stage}
                       {/* Neon glow effect */}
-                      <div className={`absolute -inset-1 bg-gradient-to-br ${handoff.color} rounded-xl opacity-0 group-hover:opacity-60 blur-md transition-opacity -z-10`} />
+                      <div className={`absolute -inset-1 bg-gradient-to-br ${handoff.color} rounded-lg opacity-0 group-hover:opacity-60 blur-md transition-opacity -z-10`} />
                     </div>
                     <div className="flex-1">
-                      <div className="text-white font-semibold text-lg">{handoff.from} → {handoff.to}</div>
-                      <div className="text-sm text-gray-300">Automated handoff with quality checks</div>
+                      <div className="text-white font-semibold">{handoff.from} → {handoff.to}</div>
                     </div>
                   </div>
                 ))}
               </div>
 
               {/* Metrics */}
-              <div className="grid grid-cols-2 gap-4">
-                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
-                  <div className="text-3xl font-bold text-white mb-1">87%</div>
-                  <div className="text-sm text-gray-400">Completion Rate</div>
+              <div className="grid grid-cols-3 gap-3">
+                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3">
+                  <div className="text-2xl font-bold text-white mb-1">8</div>
+                  <div className="text-xs text-gray-400">Pipeline Stages</div>
                 </div>
-                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
-                  <div className="text-3xl font-bold text-white mb-1">6×</div>
-                  <div className="text-sm text-gray-400">Faster Velocity</div>
+                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3">
+                  <div className="text-2xl font-bold text-white mb-1">7</div>
+                  <div className="text-xs text-gray-400">Auto Handoffs</div>
+                </div>
+                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3">
+                  <div className="text-2xl font-bold text-white mb-1">5</div>
+                  <div className="text-xs text-gray-400">AI Providers</div>
                 </div>
               </div>
             </div>
diff --git a/frontend/src/marketing/pages/Pricing.tsx b/frontend/src/marketing/pages/Pricing.tsx
index 6409f26c..d36545d2 100644
--- a/frontend/src/marketing/pages/Pricing.tsx
+++ b/frontend/src/marketing/pages/Pricing.tsx
@@ -78,11 +78,12 @@ const Pricing: React.FC = () => {
     { feature: "AI Image Generation", starter: "300 basic / 60 premium", growth: "900 basic / 180 premium", scale: "1,500 basic / 300 premium" },
     { feature: "Featured Images", starter: true, growth: true, scale: true },
     { feature: "In-Article Images", starter: true, growth: true, scale: true },
-    { feature: "Dual AI Providers", starter: "Basic + Premium", growth: "Basic + Premium", scale: "Basic + Premium" },
+    { feature: "AI Providers", starter: "DALL-E 3, Runware, Bria", growth: "DALL-E 3, Runware, Bria", scale: "DALL-E 3, Runware, Bria" },
+    { feature: "Credits: Basic Images", starter: "5 per image", growth: "5 per image", scale: "5 per image" },
+    { feature: "Credits: Premium Images", starter: "25 per image", growth: "25 per image", scale: "25 per image" },
     { feature: "Multiple Image Sizes", starter: true, growth: true, scale: true },
     { feature: "Automatic Alt Text", starter: true, growth: true, scale: true },
-    { feature: "Smart Image Prompts", starter: "300", growth: "900", scale: "1,500" },
-    { feature: "Advanced Image Controls", starter: true, growth: true, scale: true },
+    { feature: "Style Presets", starter: true, growth: true, scale: true },
     
     { feature: "AUTOMATION PIPELINE", starter: null, growth: null, scale: null, isCategory: true },
     { feature: "7-Stage Automation Pipeline", starter: true, growth: true, scale: true },
diff --git a/frontend/src/marketing/pages/Product.tsx b/frontend/src/marketing/pages/Product.tsx
index 1bd5f6cf..b2b0ecf1 100644
--- a/frontend/src/marketing/pages/Product.tsx
+++ b/frontend/src/marketing/pages/Product.tsx
@@ -12,6 +12,10 @@ import {
   ArrowRightIcon,
   RocketLaunchIcon,
   ChatBubbleLeftRightIcon,
+  ClipboardDocumentCheckIcon,
+  CheckBadgeIcon,
+  GlobeAltIcon,
+  CalendarDaysIcon,
 } from "@heroicons/react/24/outline";
 import { testimonials } from "../data/testimonials";
 import SEO from "../components/SEO";
@@ -41,26 +45,29 @@ const Product: React.FC = () => {
     );
   };
 
+  // 8-Stage Content Pipeline - matches current implementation
   const workflowSteps = [
-    { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
-    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]" },
-    { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]" },
-    { name: "Tasks", icon: DocumentTextIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" },
-    { name: "Content", icon: SparklesIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
-    { name: "Publish", icon: BoltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" },
+    { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "Import & organize" },
+    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Group related terms" },
+    { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" },
+    { name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" },
+    { name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" },
+    { name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Visual generation" },
+    { name: "Review", icon: CheckBadgeIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Quality check" },
+    { name: "Published", icon: GlobeAltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Go live" },
   ];
 
   const productModules = [
     {
       title: "Planner",
-      subtitle: "Market intelligence and keyword → cluster engine",
-      description: "Tap into a living keyword database with real-time search volumes, difficulty scores, and intent classification. Use AI-powered clustering to automatically group related keywords into strategic clusters. Build topical authority maps in minutes, not days.",
+      subtitle: "Keyword → Cluster → Ideas Engine (Stages 1-3)",
+      description: "Import keywords via CSV or manual entry, organize them into topical clusters using AI-powered semantic grouping, and generate content ideas with AI scoring and prioritization. Build your content foundation systematically.",
       features: [
-        "Global keyword database with opportunity scoring, SERP overlays, and traffic estimates",
+        "CSV import or manual keyword entry with bulk operations and tagging",
         "AI-powered semantic clustering that groups related keywords automatically",
-        "Drag-and-drop topical mapping with visual cluster organization",
-        "Priority scoring based on opportunity, competition, and search intent",
-        "Alerts for emerging opportunities, competitive gaps, and seasonality shifts",
+        "Idea generation with AI scoring based on search intent and opportunity",
+        "Brief creation workflow to transform ideas into actionable content plans",
+        "Pipeline view showing content flow from keywords through to publication",
       ],
       icon: ChartBarIcon,
       color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
@@ -69,14 +76,14 @@ const Product: React.FC = () => {
     },
     {
       title: "Writer",
-      subtitle: "AI writing system with brand rules and editorial logic",
-      description: "Generate briefs, long-form articles, and on-brand messaging with contextual SERP data, tone controls, and collaboration tools. Create content that aligns with your brand voice, compliance rules, and target search results.",
+      subtitle: "Tasks → Content → Images → Review (Stages 4-7)",
+      description: "Transform ideas into detailed content briefs, generate AI-powered articles with multiple provider options, create images with DALL-E 3, Runware, or Bria, and review content before publishing.",
       features: [
-        "AI briefs with outlines, talking points, and internal link suggestions",
-        "Context-aware content generation with SERP analysis and competitor insights",
-        "Long-form drafts aligned to your brand voice, compliance rules, and target SERP",
-        "Brand voice and tone controls for consistency across all content",
-        "Editorial workspace with comments, approvals, and WordPress publishing",
+        "Multi-provider AI writing: OpenAI GPT-4o and Anthropic Claude support",
+        "Image generation with DALL-E 3, Runware, and Bria AI providers",
+        "Rich text editor with formatting, SEO metadata, and preview modes",
+        "Token-based credit system for text, fixed credits for images (5 basic, 25 premium)",
+        "Review workflow with quality checks before moving to publication",
       ],
       icon: SparklesIcon,
       color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
@@ -84,33 +91,33 @@ const Product: React.FC = () => {
       link: "#writer",
     },
     {
-      title: "Thinker",
-      subtitle: "Strategic OS and thinking engine",
-      description: "Centralize prompts, author voices, and brand playbooks. Sync guidelines directly into every piece of content Igny8 creates. Manage AI instructions, writing styles, and content strategies in one place.",
+      title: "Publisher",
+      subtitle: "Calendar & WordPress Integration (Stage 8)",
+      description: "Schedule content on a visual calendar, connect to WordPress via the IGNY8 WP Bridge plugin, and publish directly with SEO metadata, categories, tags, and featured images automatically configured.",
       features: [
-        "Centralized prompt library and brand playbooks with version control",
-        "Author voice templates and style guides for consistent content",
-        "Automated guideline enforcement across all content generation",
-        "Governance dashboards showing who generated what, when, and with which inputs",
-        "Version control for AI instructions and playbooks across teams",
+        "Visual calendar with drag-and-drop scheduling for content planning",
+        "One-click WordPress publishing via the IGNY8 WP Bridge plugin",
+        "Automatic SEO metadata, categories, tags, and featured image assignment",
+        "Multi-site WordPress management for agencies and publishers",
+        "Publication status tracking with draft, scheduled, and published states",
       ],
-      icon: BoltIcon,
+      icon: CalendarDaysIcon,
       color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
-      image: "thinker-dashboard.png",
-      link: "#thinker",
+      image: "publisher-dashboard.png",
+      link: "#publisher",
     },
     {
       title: "Automation",
-      subtitle: "Always-on execution engine",
-      description: "Orchestrate keywords to ideas, tasks to content, and assets to WordPress in automated cycles—customized to your cadence. Set it once, and watch it execute with intelligent handoffs between modules.",
+      subtitle: "7-Stage Handoff Engine",
+      description: "Orchestrate the entire 8-stage pipeline with 7 automated handoffs. Configure triggers, batch sizes, and scheduling to run your content factory on autopilot with real-time progress monitoring.",
       features: [
-        "Schedule keywords → ideas → tasks → content → images in fully automated cycles",
-        "End-to-end workflow automation with custom triggers and conditions",
-        "Trigger workflows based on SERP movements, pipeline bottlenecks, or credit availability",
-        "Multi-step handoffs between modules with quality checks at each stage",
-        "Monitor every automation with audit logs and manual override controls",
+        "7 configurable automation stages: Keywords→Clusters→Ideas→Tasks→Content→Images→Review→Published",
+        "Customizable batch sizes, limits, and scheduling for each handoff",
+        "Real-time progress monitoring with success/error tracking",
+        "Enable/disable individual stages for hybrid manual-auto workflows",
+        "Automation dashboard with pipeline visualization and controls",
       ],
-      icon: PhotoIcon,
+      icon: BoltIcon,
       color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
       image: "automation-dashboard.png",
       link: "#automation",
@@ -153,29 +160,34 @@ const Product: React.FC = () => {
         <div className="max-w-7xl mx-auto px-6">
           <div className="text-center mb-16">
             <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-              How the IGNY8 Engine Works
+              The 8-Stage Content Pipeline
             </h2>
             <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-              A seamless pipeline from keyword discovery to published content
+              From keyword discovery to WordPress publishing in one unified workflow
             </p>
           </div>
-          
-          {/* Horizontal Timeline */}
+
+          {/* 8-Stage Horizontal Timeline */}
           <div className="relative">
             {/* Enhanced connecting line with shadow */}
-            <div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
-            
-            <div className="grid grid-cols-2 md:grid-cols-6 gap-6 md:gap-4">
+            <div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
+
+            <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3">
               {workflowSteps.map((step, index) => {
                 const Icon = step.icon;
                 return (
-                  <div key={step.name} className="flex flex-col items-center gap-3">
-                    <div className={`relative size-28 rounded-full bg-gradient-to-br ${step.color} flex items-center justify-center text-white shadow-xl z-10 group hover:scale-110 transition-transform`}>
-                      <Icon className="h-12 w-12" />
+                  <div key={step.name} className="flex flex-col items-center gap-2">
+                    <div className={`relative size-20 md:size-24 rounded-full bg-gradient-to-br ${step.color} flex items-center justify-center text-white shadow-xl z-10 group hover:scale-110 transition-transform`}>
+                      <Icon className="h-8 w-8 md:h-10 md:w-10" />
+                      {/* Stage number badge */}
+                      <div className="absolute -top-1 -right-1 size-6 rounded-full bg-white text-gray-900 text-xs font-bold flex items-center justify-center shadow-md">
+                        {index + 1}
+                      </div>
                       {/* Glow effect */}
                       <div className={`absolute -inset-2 bg-gradient-to-br ${step.color} rounded-full opacity-0 group-hover:opacity-30 blur-xl transition-opacity -z-10`} />
                     </div>
                     <span className="text-sm font-semibold text-gray-900 text-center">{step.name}</span>
+                    <span className="text-xs text-gray-500 text-center hidden md:block">{step.description}</span>
                   </div>
                 );
               })}
@@ -279,28 +291,28 @@ const Product: React.FC = () => {
                 </h2>
               </div>
               <p className="text-xl text-gray-200 mb-8 leading-relaxed font-medium">
-                Orchestrate your entire content pipeline with intelligent handoffs between modules. Set it once, and watch it execute with compounding value at each stage.
+                7 automated handoffs orchestrate your entire 8-stage content pipeline. Configure batch sizes, scheduling, and triggers to run your content factory on autopilot.
               </p>
-              
-              {/* Automation Timeline with neon glows */}
-              <div className="space-y-6">
+
+              {/* 7 Automation Handoffs with neon glows */}
+              <div className="space-y-4">
                 {[
-                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
-                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
-                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
-                  { from: "Tasks", to: "Content", icon: "→", color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" },
-                  { from: "Content", to: "Images", icon: "→", color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
-                  { from: "Images", to: "Publish", icon: "→", color: "from-[var(--color-purple)] to-[var(--color-success)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Keywords", to: "Clusters", stage: 1, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
+                  { from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Ideas", to: "Tasks", stage: 3, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
+                  { from: "Tasks", to: "Content", stage: 4, color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" },
+                  { from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
+                  { from: "Images", to: "Review", stage: 6, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Review", to: "Published", stage: 7, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
                 ].map((handoff, i) => (
-                  <div key={i} className="flex items-center gap-4">
-                    <div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg ${handoff.glow} group`}>
-                      {handoff.icon}
+                  <div key={i} className="flex items-center gap-3">
+                    <div className={`relative w-10 h-10 rounded-lg bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white text-sm font-bold shadow-lg ${handoff.glow} group`}>
+                      {handoff.stage}
                       {/* Neon glow effect */}
-                      <div className={`absolute -inset-1 bg-gradient-to-br ${handoff.color} rounded-xl opacity-0 group-hover:opacity-60 blur-md transition-opacity -z-10`} />
+                      <div className={`absolute -inset-1 bg-gradient-to-br ${handoff.color} rounded-lg opacity-0 group-hover:opacity-60 blur-md transition-opacity -z-10`} />
                     </div>
                     <div className="flex-1">
-                      <div className="text-white font-semibold text-lg">{handoff.from} → {handoff.to}</div>
-                      <div className="text-sm text-gray-300">Automated handoff with quality checks</div>
+                      <div className="text-white font-semibold">{handoff.from} → {handoff.to}</div>
                     </div>
                   </div>
                 ))}
@@ -328,17 +340,23 @@ const Product: React.FC = () => {
             </div>
           </div>
 
-          {/* Performance KPIs */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
-            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
-              <div className="text-4xl font-bold text-white mb-2">87%</div>
-              <div className="text-sm text-gray-400">Completion Rate</div>
-              <div className="text-xs text-gray-500 mt-2">Average automation success across all workflows</div>
+          {/* Platform Stats */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
+            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 text-center">
+              <div className="text-3xl font-bold text-white mb-1">8</div>
+              <div className="text-xs text-gray-400">Pipeline Stages</div>
             </div>
-            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
-              <div className="text-4xl font-bold text-white mb-2">6×</div>
-              <div className="text-sm text-gray-400">Faster Velocity</div>
-              <div className="text-xs text-gray-500 mt-2">Content creation speed compared to manual processes</div>
+            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 text-center">
+              <div className="text-3xl font-bold text-white mb-1">7</div>
+              <div className="text-xs text-gray-400">Auto Handoffs</div>
+            </div>
+            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 text-center">
+              <div className="text-3xl font-bold text-white mb-1">5</div>
+              <div className="text-xs text-gray-400">AI Providers</div>
+            </div>
+            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 text-center">
+              <div className="text-3xl font-bold text-white mb-1">3</div>
+              <div className="text-xs text-gray-400">Payment Methods</div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/pages/Help/Help.tsx b/frontend/src/pages/Help/Help.tsx
index 269bd05f..1fc8581f 100644
--- a/frontend/src/pages/Help/Help.tsx
+++ b/frontend/src/pages/Help/Help.tsx
@@ -1,12 +1,12 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef } from "react";
 import PageMeta from "../../components/common/PageMeta";
 import PageHeader from "../../components/common/PageHeader";
 import { Accordion, AccordionItem } from "../../components/ui/accordion";
 import { Card } from "../../components/ui/card";
 import Badge from "../../components/ui/badge/Badge";
-import { 
-  ListIcon, 
-  BoltIcon, 
+import {
+  ListIcon,
+  BoltIcon,
   CheckCircleIcon,
   ArrowRightIcon,
   FileIcon,
@@ -20,6 +20,127 @@ interface TableOfContentsItem {
   level: number;
 }
 
+// Visual Pipeline Component with Cards and Arrows
+function WorkflowPipeline() {
+  const stages = [
+    { name: "Keywords", color: "bg-brand-500", description: "Import & organize search terms" },
+    { name: "Clusters", color: "bg-purple-500", description: "Group related keywords" },
+    { name: "Ideas", color: "bg-warning-500", description: "Generate content concepts" },
+    { name: "Tasks", color: "bg-success-500", description: "Create writing assignments" },
+    { name: "Content", color: "bg-brand-500", description: "AI-generate articles" },
+    { name: "Images", color: "bg-purple-500", description: "Create visuals" },
+    { name: "Review", color: "bg-warning-500", description: "Edit & approve" },
+    { name: "Published", color: "bg-success-500", description: "Live on WordPress" },
+  ];
+
+  return (
+    <div className="my-8">
+      {/* Desktop View - Horizontal */}
+      <div className="hidden lg:block">
+        <div className="flex items-center justify-between gap-2">
+          {stages.map((stage, index) => (
+            <div key={stage.name} className="flex items-center">
+              <div className="flex flex-col items-center">
+                <div className={`${stage.color} text-white rounded-xl p-3 shadow-lg min-w-[100px] text-center`}>
+                  <div className="font-bold text-sm">{stage.name}</div>
+                </div>
+                <div className="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center max-w-[100px]">
+                  {stage.description}
+                </div>
+              </div>
+              {index < stages.length - 1 && (
+                <ArrowRightIcon className="size-5 text-gray-400 mx-1 flex-shrink-0" />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Mobile View - Vertical */}
+      <div className="lg:hidden space-y-3">
+        {stages.map((stage, index) => (
+          <div key={stage.name} className="flex items-center gap-3">
+            <div className={`${stage.color} text-white rounded-lg p-3 shadow-md min-w-[100px] text-center`}>
+              <div className="font-bold text-sm">{stage.name}</div>
+            </div>
+            <div className="text-sm text-gray-600 dark:text-gray-400 flex-1">
+              {stage.description}
+            </div>
+            {index < stages.length - 1 && (
+              <div className="text-gray-400 text-xl">↓</div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Automation Pipeline Visual
+function AutomationPipelineVisual() {
+  const automationStages = [
+    { from: "Keywords", to: "Clusters", color: "border-brand-500", bg: "bg-brand-50 dark:bg-brand-900/20" },
+    { from: "Clusters", to: "Ideas", color: "border-purple-500", bg: "bg-purple-50 dark:bg-purple-900/20" },
+    { from: "Ideas", to: "Tasks", color: "border-warning-500", bg: "bg-warning-50 dark:bg-warning-900/20" },
+    { from: "Tasks", to: "Content", color: "border-success-500", bg: "bg-success-50 dark:bg-success-900/20" },
+    { from: "Content", to: "Images", color: "border-brand-500", bg: "bg-brand-50 dark:bg-brand-900/20" },
+    { from: "Images", to: "Review", color: "border-purple-500", bg: "bg-purple-50 dark:bg-purple-900/20" },
+    { from: "Review", to: "Published", color: "border-success-500", bg: "bg-success-50 dark:bg-success-900/20" },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 my-6">
+      {automationStages.map((stage, index) => (
+        <div key={index} className={`${stage.bg} border-l-4 ${stage.color} rounded-lg p-3`}>
+          <div className="flex items-center gap-2">
+            <span className="font-semibold text-gray-900 dark:text-white text-sm">{stage.from}</span>
+            <ArrowRightIcon className="size-4 text-gray-500" />
+            <span className="font-semibold text-gray-900 dark:text-white text-sm">{stage.to}</span>
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Automated handoff</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Credit System Visual
+function CreditSystemVisual() {
+  const operations = [
+    { name: "Content Generation", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
+    { name: "Image Generation (Basic)", credits: "5 credits", color: "bg-purple-100 dark:bg-purple-900/30 border-purple-300" },
+    { name: "Image Generation (Premium)", credits: "25 credits", color: "bg-warning-100 dark:bg-warning-900/30 border-warning-300" },
+    { name: "Keyword Clustering", credits: "Token-based", color: "bg-success-100 dark:bg-success-900/30 border-success-300" },
+    { name: "Idea Generation", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 my-4">
+      {operations.map((op) => (
+        <div key={op.name} className={`${op.color} border rounded-lg p-3`}>
+          <div className="font-medium text-gray-900 dark:text-white text-sm">{op.name}</div>
+          <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">{op.credits}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Module Card Component
+function ModuleCard({ title, icon, color, children }: { title: string; icon: React.ReactNode; color: string; children: React.ReactNode }) {
+  return (
+    <Card className={`p-5 border-l-4 ${color}`}>
+      <h4 className="font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
+        {icon}
+        {title}
+      </h4>
+      <div className="text-sm text-gray-600 dark:text-gray-400">
+        {children}
+      </div>
+    </Card>
+  );
+}
+
 export default function Help() {
   const [activeSection, setActiveSection] = useState<string | null>(null);
   const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({});
@@ -27,9 +148,10 @@ export default function Help() {
   const tableOfContents: TableOfContentsItem[] = [
     { id: "getting-started", title: "Getting Started", level: 1 },
     { id: "quick-start", title: "Quick Start Guide", level: 2 },
-    { id: "workflow-overview", title: "Workflow Overview", level: 2 },
+    { id: "workflow-pipeline", title: "8-Stage Workflow Pipeline", level: 2 },
     { id: "dashboard", title: "Dashboard", level: 1 },
-    { id: "setup", title: "Setup Module", level: 1 },
+    { id: "setup", title: "Setup & Onboarding", level: 1 },
+    { id: "onboarding-wizard", title: "Onboarding Wizard", level: 2 },
     { id: "add-keywords", title: "Add Keywords", level: 2 },
     { id: "content-settings", title: "Content Settings", level: 2 },
     { id: "sites", title: "Sites Management", level: 2 },
@@ -42,21 +164,26 @@ export default function Help() {
     { id: "content", title: "Content Generation", level: 2 },
     { id: "images", title: "Image Generation", level: 2 },
     { id: "review-publish", title: "Review & Publish", level: 2 },
-    { id: "automation", title: "Automation Setup", level: 1 },
+    { id: "automation", title: "Automation Pipeline", level: 1 },
+    { id: "publisher", title: "Publisher & Calendar", level: 1 },
+    { id: "integrations", title: "Integrations", level: 1 },
+    { id: "wordpress", title: "WordPress Integration", level: 2 },
+    { id: "ai-providers", title: "AI Providers", level: 2 },
     { id: "account", title: "Account & Billing", level: 1 },
-    { id: "account-settings", title: "Account Settings", level: 2 },
+    { id: "credits", title: "Credits System", level: 2 },
     { id: "plans-billing", title: "Plans & Billing", level: 2 },
     { id: "usage", title: "Usage & Limits", level: 2 },
+    { id: "team", title: "Team Management", level: 2 },
     { id: "faq", title: "Frequently Asked Questions", level: 1 },
   ];
 
   const scrollToSection = (id: string) => {
     const element = sectionRefs.current[id];
     if (element) {
-      const offset = 100; // Account for fixed header
+      const offset = 100;
       const elementPosition = element.getBoundingClientRect().top;
       const offsetPosition = elementPosition + window.pageYOffset - offset;
-      
+
       window.scrollTo({
         top: offsetPosition,
         behavior: "smooth"
@@ -68,134 +195,99 @@ export default function Help() {
   const faqItems = [
     {
       question: "How do I add keywords to my workflow?",
-      answer: "Navigate to Planner &gt; Keyword Opportunities. Browse available keywords, use filters to find relevant ones, and click 'Add to Workflow' on individual keywords or use bulk selection to add multiple keywords at once."
+      answer: "Navigate to Setup → Add Keywords or Planner → Keyword Opportunities. Browse available keywords, use filters to find relevant ones, and click 'Add to Workflow' on individual keywords or use bulk selection to add multiple keywords at once. You can also import keywords via CSV upload."
     },
     {
       question: "What is the difference between Keywords and Clusters?",
-      answer: "Keywords are individual search terms. Clusters are groups of related keywords that are organized together for content planning. Clusters help you create comprehensive content that covers multiple related search queries."
+      answer: "Keywords are individual search terms. Clusters are groups of related keywords organized together for content planning. Clusters help you create comprehensive content that covers multiple related search queries for better topical authority."
     },
     {
       question: "How does auto-clustering work?",
-      answer: "Auto-clustering uses AI to analyze your keywords and group them based on semantic similarity and search intent. Select keywords in the Keywords page and click 'Auto Cluster' to automatically organize them into clusters."
+      answer: "Auto-clustering uses AI to analyze your keywords and group them based on semantic similarity and search intent. Select keywords in the Keywords page and click 'Auto Cluster' to automatically organize them into topic clusters."
     },
     {
       question: "How do I generate content ideas from clusters?",
-      answer: "Go to Planner &gt; Clusters, select one or more clusters, and click 'Generate Ideas'. The AI will analyze the keywords in each cluster and create content ideas that cover the topics comprehensively."
+      answer: "Go to Planner → Clusters, select one or more clusters, and click 'Generate Ideas'. The AI will analyze the keywords in each cluster and create content ideas that cover the topics comprehensively."
     },
     {
-      question: "What is the workflow from keywords to published content?",
-      answer: "1) Add keywords from Opportunities, 2) Cluster related keywords, 3) Generate content ideas from clusters, 4) Create tasks from ideas, 5) Generate content from tasks, 6) Generate images, 7) Review and publish. You can automate most of these steps in the Automation Setup."
+      question: "What is the complete workflow from keywords to published content?",
+      answer: "IGNY8 follows an 8-stage pipeline: 1) Add keywords from Opportunities or CSV, 2) Cluster related keywords, 3) Generate content ideas from clusters, 4) Create tasks from ideas, 5) Generate AI content from tasks, 6) Generate featured and in-article images, 7) Review and approve content, 8) Publish to WordPress. You can automate most of these steps in the Automation page."
     },
     {
       question: "How do I set up automation?",
-      answer: "Go to Dashboard &gt; Automation Setup section. Enable automation for each step (Keywords, Ideas, Content, Images) and configure settings like how many keywords to process per cycle. Advanced scheduling settings are available in the Automation menu."
+      answer: "Go to the Automation page from the main menu. Enable automation for each stage (Clustering, Ideas, Tasks, Content, Images, Publishing) and configure settings like batch sizes and schedules. You can run automation Daily, Weekly, or Monthly, or trigger it manually."
     },
     {
       question: "Can I edit AI-generated content?",
-      answer: "Yes! All AI-generated content can be edited. Go to Writer &gt; Content, click on any content piece to open the editor, and make your changes. You can also regenerate content if needed."
+      answer: "Yes! All AI-generated content can be edited. Go to Writer → Content, click on any content piece to open the HTML editor, and make your changes. You can also regenerate content if needed."
     },
     {
       question: "How are images generated?",
-      answer: "Images are generated using AI based on your content. Go to Writer &gt; Images to see all generated images. You can regenerate images, view them in a modal, and manage them per content piece."
+      answer: "Images are generated using AI (DALL-E 3 for premium, Runware for basic) based on your content. Go to Writer → Images to see all generated images. You can generate featured images and in-article images, regenerate them if needed, and they automatically sync to WordPress when publishing."
     },
     {
       question: "What is the difference between Tasks and Content?",
-      answer: "Tasks are content ideas that have been converted into actionable writing assignments. Content is the actual generated articles/posts created from tasks. Tasks show what needs to be written, Content shows what has been written."
+      answer: "Tasks are content ideas converted into actionable writing assignments with status tracking. Content is the actual generated articles created from tasks. Tasks track what needs to be written and its progress, Content shows what has been written."
     },
     {
       question: "How do I filter data by site or sector?",
       answer: "Use the Site and Sector selectors in the page header. Select a site to filter all data to that site. Select a sector for further filtering. The 'All Sectors' option shows all sectors for the selected site."
     },
     {
-      question: "What are column visibility settings?",
-      answer: "Each table page has a column selector (icon in the header). Click it to show/hide columns. Your preferences are saved and persist across page reloads. Use 'Show All' to quickly make all columns visible."
+      question: "How do credits work?",
+      answer: "Credits are your currency for AI operations. Text operations (content, clustering, ideas) are token-based - actual tokens used are converted to credits. Image generation uses fixed credits: 5 credits for basic images, 25 credits for premium images. Your plan includes monthly credits that reset each billing period."
     },
     {
-      question: "How do I sort table data?",
-      answer: "Click on any column header that has a sort icon. Click once for ascending order, click again for descending order. The current sort is indicated by an arrow icon in the column header."
+      question: "What are the 4 usage limits?",
+      answer: "IGNY8 has 4 simplified limits: 1) Content Generation - monthly words/tokens for AI content, 2) Image Generation - monthly images (basic + premium), 3) Storage - total content and media storage, 4) API Calls - monthly API request limit. View these in Account → Usage."
     },
     {
-      question: "What is the Thinker module?",
-      answer: "The Thinker module manages AI prompts, author profiles, and content strategies. Use it to customize how AI generates content, define writing styles, and create reusable prompt templates."
+      question: "How do I purchase more credits?",
+      answer: "Go to Account → Purchase Credits. Select a credit package and complete the purchase via Stripe, PayPal, or Bank Transfer. Credits are added to your balance immediately and never expire."
     },
     {
-      question: "How does content usage work?",
-      answer: "Each plan includes a monthly content allowance. Creating articles, generating ideas, and producing images all count toward your monthly limit. View your usage in Settings > Plans & Billing. Your allowance resets at the start of each billing period."
+      question: "How do I connect WordPress?",
+      answer: "Go to Sites, select your site, and click 'Connect WordPress'. Install the IGNY8 WP Bridge plugin on your WordPress site, then enter your WordPress URL and API key. The plugin provides secure REST API access for publishing content and syncing media."
+    },
+    {
+      question: "Why isn't my content syncing to WordPress?",
+      answer: "Check: 1) WordPress credentials are correct in Site Settings, 2) IGNY8 WP Bridge plugin is installed and activated, 3) REST API is enabled on your WordPress site, 4) The content status is 'Approved' or 'Published'. You can manually sync individual posts from the Content page."
+    },
+    {
+      question: "Can I schedule content publishing?",
+      answer: "Yes! Use the Publisher → Calendar to schedule content for specific dates and times. You can set up scheduled publishing to automatically publish approved content at your preferred times."
+    },
+    {
+      question: "What payment methods are supported?",
+      answer: "IGNY8 supports Stripe (credit/debit cards), PayPal, and Bank Transfer (for annual plans). Payment method availability varies by country - the system automatically shows available options based on your location."
+    },
+    {
+      question: "How do team roles work?",
+      answer: "IGNY8 has 5 roles: Developer (all accounts), Admin (full account access), Manager (content + billing), Editor (AI content only), Viewer (read-only). Admins can invite team members and assign roles in Account → Settings → Team."
     },
     {
       question: "Can I export my data?",
       answer: "Yes! Most table pages have export functionality. Look for the export button in the action bar. You can export data as CSV for keywords, clusters, content, and other entities."
     },
-    {
-      question: "How do I bulk delete items?",
-      answer: "Select multiple items using checkboxes, then use the bulk actions dropdown to delete selected items. Bulk actions are available on most table pages for efficient management."
-    },
     {
       question: "What happens if I delete a cluster?",
-      answer: "Deleting a cluster does not delete the keywords in it. Keywords will become unclustered and can be re-clustered later. Content ideas associated with the cluster will also be affected."
+      answer: "Deleting a cluster does not delete the keywords in it. Keywords will become unclustered and can be re-clustered later. Content ideas associated with the cluster will also be unlinked but not deleted."
     },
     {
-      question: "How do I search for specific content?",
-      answer: "Use the search bar at the top of each table page. Search works across multiple fields depending on the page. For example, on Keywords page you can search by keyword text, on Content page you can search by title."
-    },
-    {
-      question: "What filters are available?",
-      answer: "Filters vary by page. Common filters include: Status, Intent (for keywords), Difficulty, Volume range, Content Type, and Date ranges. Use the filter dropdowns to narrow down results."
-    },
-    {
-      question: "How do I view content details?",
-      answer: "Click on any content item in the Content table to open the detailed view. Here you can see the full content, edit it, view associated images, see metadata, and manage publication status."
-    },
-    // Credits & Billing FAQs
-    {
-      question: "How do credits work?",
-      answer: "Credits are used for AI operations like content generation, image creation, and idea generation. Each operation has a credit cost. Your plan includes a monthly credit allocation that resets each billing period. You can purchase additional credits anytime."
-    },
-    {
-      question: "What uses credits?",
-      answer: "Content generation, image generation, keyword clustering, and idea generation all use credits. The exact cost varies by operation type. Check your Usage page to see credit costs and your current balance."
-    },
-    {
-      question: "How do I purchase more credits?",
-      answer: "Go to Account → Purchase Credits. Select a credit package and complete the purchase. Credits are added to your balance immediately and never expire."
-    },
-    {
-      question: "How do I change my payment method?",
-      answer: "Go to Account → Plans & Billing → History tab. You can add new payment methods, remove old ones, and set a default payment method for renewals."
-    },
-    {
-      question: "Can I cancel my subscription?",
-      answer: "Yes. Go to Account → Plans & Billing, and click 'Cancel Plan' on the Current Plan tab. You'll be asked to confirm. Your subscription remains active until the end of the billing period, and remaining credits are preserved for 30 days."
-    },
-    // WordPress FAQs
-    {
-      question: "How do I connect WordPress?",
-      answer: "Go to Sites, select your site, and configure WordPress integration in Site Settings. You'll need your WordPress URL and either REST API credentials or an application password. Test the connection before saving."
-    },
-    {
-      question: "Why isn't my content syncing to WordPress?",
-      answer: "Check: 1) WordPress credentials are correct, 2) REST API is enabled on your WordPress site, 3) Auto-sync is enabled in Content Settings, 4) The content status is 'Published'. You can manually sync individual posts from the Published tab."
-    },
-    // Automation FAQs
-    {
-      question: "Can I schedule automation to run at specific times?",
-      answer: "Yes! Go to the Automation page for advanced scheduling. You can set specific days, times, and frequencies for your automation runs. The Dashboard shows quick toggle controls for each automation stage."
-    },
-    {
-      question: "What happens if automation fails?",
-      answer: "Failed items are logged in the automation activity feed. You can retry failed items individually or in bulk. Check the error message for details and ensure you have sufficient credits."
+      question: "How do I cancel my subscription?",
+      answer: "Go to Account → Plans & Billing, and click 'Cancel Plan' on the Current Plan tab. You'll be asked to confirm. Your subscription remains active until the end of the billing period, and remaining credits are preserved for 30 days."
     }
   ];
 
   return (
     <>
-      <PageMeta title="Help Center - IGNY8" description="Guides and tutorials to help you create great content" />
+      <PageMeta title="Help Center - IGNY8" description="Comprehensive guides and tutorials to help you create amazing content at scale" />
       <PageHeader
         title="Help Center"
-        description="Learn how to use IGNY8 to create and publish amazing content"
+        description="Learn how to use IGNY8 to create and publish amazing SEO content at scale"
         badge={{ icon: <HelpCircleIcon className="w-4 h-4" />, color: 'blue' }}
       />
-      
+
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {/* Table of Contents */}
         <Card className="p-6 mb-8 bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/10 dark:to-purple-900/10 border-brand-200 dark:border-brand-800">
@@ -231,18 +323,18 @@ export default function Help() {
             <AccordionItem title="Quick Start Guide" defaultOpen>
               <div className="space-y-4">
                 <p className="text-gray-700 dark:text-gray-300">
-                  Let's Get You Creating Content! Follow these simple steps:
+                  Welcome to IGNY8! Follow these steps to create your first AI-powered content:
                 </p>
-                
+
                 <div className="space-y-3">
                   <div className="flex gap-4">
                     <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold">
                       1
                     </div>
                     <div className="flex-1">
-                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Step 1: Connect Your Website</h4>
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Complete the Setup Wizard</h4>
                       <p className="text-gray-600 dark:text-gray-400 text-sm">
-                        Tell IGNY8 which website you want to create content for. Go to Settings &gt; Sites and add your WordPress site.
+                        If you haven't already, complete the onboarding wizard to set up your first site, configure content settings, and add initial keywords.
                       </p>
                     </div>
                   </div>
@@ -252,69 +344,81 @@ export default function Help() {
                       2
                     </div>
                     <div className="flex-1">
-                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Step 2: Find Search Terms to Target</h4>
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Add Keywords to Your Workflow</h4>
                       <p className="text-gray-600 dark:text-gray-400 text-sm">
-                        Search for keywords people are looking for in your topic area. Navigate to Planner &gt; Keyword Opportunities and add relevant keywords.
+                        Go to Setup → Add Keywords to browse our curated keyword database. Select keywords relevant to your industry and add them to your workflow.
                       </p>
                     </div>
                   </div>
 
                   <div className="flex gap-4">
-                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center font-bold">
                       3
                     </div>
                     <div className="flex-1">
-                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Step 3: Organize Keywords by Topic</h4>
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Cluster Related Keywords</h4>
                       <p className="text-gray-600 dark:text-gray-400 text-sm">
-                        Group related keywords together. Go to Planner &gt; Keywords and use Auto Cluster to organize them by theme.
+                        Go to Planner → Keywords, select your keywords, and click "Auto Cluster" to group them by topic using AI.
                       </p>
                     </div>
                   </div>
 
                   <div className="flex gap-4">
-                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-warning-500 text-white flex items-center justify-center font-bold">
                       4
                     </div>
                     <div className="flex-1">
-                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Step 4: Create Article Outlines</h4>
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Generate Content Ideas</h4>
                       <p className="text-gray-600 dark:text-gray-400 text-sm">
-                        Let AI generate article ideas for each topic. Select clusters in Planner &gt; Clusters and click Generate Ideas.
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="flex gap-4">
-                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold">
-                      5
-                    </div>
-                    <div className="flex-1">
-                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Step 5: Write Your Articles</h4>
-                      <p className="text-gray-600 dark:text-gray-400 text-sm">
-                        Turn ideas into full articles. Go to Writer &gt; Tasks, select tasks, and generate content. Review and publish when ready.
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="flex gap-4">
-                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold">
-                      6
-                    </div>
-                    <div className="flex-1">
-                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Generate Images</h4>
-                      <p className="text-gray-600 dark:text-gray-400 text-sm">
-                        Go to Writer &gt; Images and generate featured and in-article images for your content. Images are AI-generated based on your content.
+                        Go to Planner → Clusters, select your clusters, and click "Generate Ideas". AI will create content concepts for each cluster.
                       </p>
                     </div>
                   </div>
 
                   <div className="flex gap-4">
                     <div className="flex-shrink-0 w-8 h-8 rounded-full bg-success-500 text-white flex items-center justify-center font-bold">
+                      5
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Create Tasks & Generate Content</h4>
+                      <p className="text-gray-600 dark:text-gray-400 text-sm">
+                        Convert ideas to tasks in Planner → Ideas, then go to Writer → Tasks to generate full AI articles.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center font-bold">
+                      6
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Generate Images</h4>
+                      <p className="text-gray-600 dark:text-gray-400 text-sm">
+                        Go to Writer → Images to generate featured and in-article images for your content using AI.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-warning-500 text-white flex items-center justify-center font-bold">
                       7
                     </div>
                     <div className="flex-1">
-                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Publish</h4>
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Review & Approve</h4>
                       <p className="text-gray-600 dark:text-gray-400 text-sm">
-                        Review your content in Writer &gt; Content, make final edits, and publish to your WordPress site.
+                        Review your content in Writer → Content, make edits as needed, and approve content ready for publishing.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-success-500 text-white flex items-center justify-center font-bold">
+                      8
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Publish to WordPress</h4>
+                      <p className="text-gray-600 dark:text-gray-400 text-sm">
+                        Click "Publish" to send your content to WordPress, or use Publisher → Calendar to schedule publications.
                       </p>
                     </div>
                   </div>
@@ -322,39 +426,29 @@ export default function Help() {
               </div>
             </AccordionItem>
 
-            <AccordionItem title="Workflow Overview">
+            <AccordionItem title="8-Stage Workflow Pipeline">
               <div className="space-y-4">
                 <p className="text-gray-700 dark:text-gray-300">
-                  IGNY8 follows a streamlined workflow from keyword discovery to published content:
+                  IGNY8 transforms keywords into published content through an 8-stage automated pipeline:
                 </p>
-                
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <Card className="p-4 border-l-4 border-brand-500">
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
-                      <ListIcon className="size-5 text-brand-500" />
-                      Planner Module
-                    </h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                      Discover keywords, organize them into clusters, and generate content ideas. This is where your content strategy begins.
-                    </p>
-                  </Card>
 
-                  <Card className="p-4 border-l-4 border-success-500">
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
-                      <FileIcon className="size-5 text-success-500" />
-                      Writer Module
-                    </h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                      Convert ideas into tasks, generate content, create images, and publish to your WordPress site.
-                    </p>
-                  </Card>
-                </div>
+                <WorkflowPipeline />
 
                 <div className="bg-brand-50 dark:bg-brand-900/10 p-4 rounded-lg border border-brand-200 dark:border-brand-800">
                   <p className="text-sm text-brand-800 dark:text-brand-300">
-                      <strong>Tip:</strong> You can automate most of this workflow! Go to Dashboard &gt; Automation Setup to configure automatic processing.
+                    <strong>Pro Tip:</strong> Enable automation to run this pipeline automatically! Go to the Automation page to configure auto-processing for each stage.
                   </p>
                 </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
+                  <ModuleCard title="Planner Module" icon={<ListIcon className="size-5 text-brand-500" />} color="border-brand-500">
+                    <p>Handles the first 3 stages: Keywords, Clusters, and Ideas. This is where your content strategy begins.</p>
+                  </ModuleCard>
+
+                  <ModuleCard title="Writer Module" icon={<FileIcon className="size-5 text-success-500" />} color="border-success-500">
+                    <p>Handles stages 4-7: Tasks, Content, Images, and Review. This is where content gets created and polished.</p>
+                  </ModuleCard>
+                </div>
               </div>
             </AccordionItem>
           </Accordion>
@@ -371,29 +465,36 @@ export default function Help() {
             <p className="text-gray-700 dark:text-gray-300 mb-4">
               Your command center showing workflow progress, key metrics, and quick actions.
             </p>
-            
-            <div className="space-y-4">
-              <div className="border-l-4 border-brand-500 pl-4">
-                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Key Metrics</h4>
-                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                  <li><strong>Keywords:</strong> Total keywords in your workflow</li>
-                  <li><strong>Articles:</strong> Content pieces created</li>
-                  <li><strong>Images:</strong> Images generated</li>
-                  <li><strong>Completion %:</strong> Overall workflow progress</li>
-                </ul>
-              </div>
 
-              <div className="border-l-4 border-purple-500 pl-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="border-l-4 border-brand-500 pl-4">
                 <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Workflow Pipeline</h4>
                 <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Visual pipeline showing your progress: Sites → Keywords → Clusters → Ideas → Content → Published
+                  Visual pipeline showing counts at each stage. Click any stage to navigate directly to that page.
                 </p>
               </div>
 
+              <div className="border-l-4 border-purple-500 pl-4">
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Key Metrics</h4>
+                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                  <li>Total keywords in workflow</li>
+                  <li>Articles created & published</li>
+                  <li>Images generated</li>
+                  <li>Completion percentage</li>
+                </ul>
+              </div>
+
               <div className="border-l-4 border-success-500 pl-4">
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Quick Actions</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Common tasks: Add Keywords, Run Automation, View Content Calendar, Access Settings.
+                </p>
+              </div>
+
+              <div className="border-l-4 border-warning-500 pl-4">
                 <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Setup Checklist</h4>
                 <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Track your setup progress. Complete all items to start creating content efficiently.
+                  Track your setup progress. Complete all items to unlock the full platform experience.
                 </p>
               </div>
             </div>
@@ -404,32 +505,74 @@ export default function Help() {
         <div ref={(el) => (sectionRefs.current["setup"] = el)} className="mb-12 scroll-mt-24">
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
             <CheckCircleIcon className="size-8 text-success-600 dark:text-success-400" />
-            Setup Module
+            Setup & Onboarding
           </h2>
 
           <Accordion>
-            <AccordionItem title="Add Keywords" defaultOpen>
+            <AccordionItem title="Onboarding Wizard" defaultOpen>
               <div className="space-y-4">
                 <p className="text-gray-700 dark:text-gray-300">
-                  Browse and add keywords from our curated database to your content workflow.
+                  The setup wizard guides you through initial configuration in 4 steps:
                 </p>
-                
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
+                    <Badge variant="solid" color="blue" size="sm" className="mb-2">Step 1</Badge>
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Create Your Site</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Set up your first site with name, industry, and sectors.
+                    </p>
+                  </div>
+
+                  <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
+                    <Badge variant="solid" color="green" size="sm" className="mb-2">Step 2</Badge>
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Settings</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Configure AI content generation preferences and brand voice.
+                    </p>
+                  </div>
+
+                  <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
+                    <Badge variant="solid" color="amber" size="sm" className="mb-2">Step 3</Badge>
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Add Keywords</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Import initial keywords from our database or upload via CSV.
+                    </p>
+                  </div>
+
+                  <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
+                    <Badge variant="solid" color="purple" size="sm" className="mb-2">Step 4</Badge>
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Connect WordPress</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Link your WordPress site for one-click publishing.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </AccordionItem>
+
+            <AccordionItem title="Add Keywords">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Browse and add keywords from our curated database organized by 100+ industry sectors.
+                </p>
+
                 <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
-                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Step-by-Step Guide:</h4>
+                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">How to Add Keywords:</h4>
                   <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
-                    <li>Navigate to <strong>SETUP → Add Keywords</strong></li>
-                    <li>Browse keywords filtered by your site's industry/sector</li>
-                    <li>Use filters to narrow results (search, country, difficulty)</li>
+                    <li>Navigate to <strong>Setup → Add Keywords</strong></li>
+                    <li>Keywords are filtered by your site's industry/sector</li>
+                    <li>Use filters: search, country, difficulty, volume range</li>
                     <li>Toggle "Not Yet Added Only" to see available keywords</li>
-                    <li>Select keywords by clicking checkboxes</li>
-                    <li>Click "Add to Workflow" button</li>
-                    <li>Click "Next: Plan Your Content →" to proceed to Planner</li>
+                    <li>Select keywords using checkboxes (individual or bulk)</li>
+                    <li>Click <strong>"Add to Workflow"</strong> button</li>
+                    <li>Proceed to Planner to cluster and generate ideas</li>
                   </ol>
                 </div>
 
                 <div className="bg-brand-50 dark:bg-brand-900/10 p-4 rounded-lg border border-brand-200 dark:border-brand-800">
                   <p className="text-sm text-brand-800 dark:text-brand-300">
-                    <strong>Tip:</strong> Start with 10-20 keywords to test your workflow. Mix high and low difficulty keywords for variety.
+                    <strong>CSV Import:</strong> You can also upload keywords via CSV. Click the "Import CSV" button and upload a file with columns for keyword, volume, and difficulty.
                   </p>
                 </div>
               </div>
@@ -440,14 +583,15 @@ export default function Help() {
                 <p className="text-gray-700 dark:text-gray-300">
                   Configure how AI generates and publishes your content.
                 </p>
-                
+
                 <div className="space-y-3">
                   <div className="border-l-4 border-brand-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Generation Tab</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                      <li><strong>Default Tone:</strong> Professional, Casual, Friendly, etc.</li>
-                      <li><strong>Default Length:</strong> Short, Medium, Long articles</li>
-                      <li><strong>Custom Prompt:</strong> Additional instructions for AI</li>
+                      <li><strong>Default Tone:</strong> Professional, Casual, Friendly, Authoritative</li>
+                      <li><strong>Default Length:</strong> Short (500-1000), Medium (1000-2000), Long (2000-5000+)</li>
+                      <li><strong>Content Type:</strong> Article, Guide, Tutorial, Listicle</li>
+                      <li><strong>Custom Prompts:</strong> Additional AI instructions for your brand voice</li>
                     </ul>
                   </div>
 
@@ -456,14 +600,16 @@ export default function Help() {
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                       <li><strong>Auto-Publish:</strong> Automatically publish approved content</li>
                       <li><strong>Auto-Sync:</strong> Keep WordPress in sync with changes</li>
+                      <li><strong>Default Post Status:</strong> Draft, Pending, or Publish</li>
                     </ul>
                   </div>
 
                   <div className="border-l-4 border-purple-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Settings Tab</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                      <li>Configure default image styles</li>
-                      <li>Set image generation preferences</li>
+                      <li><strong>Image Provider:</strong> Basic (Runware) or Premium (DALL-E 3)</li>
+                      <li><strong>Image Style:</strong> Photorealistic, Illustrated, Abstract</li>
+                      <li><strong>Default Size:</strong> 1024x1024, 1792x1024, 1024x1792</li>
                     </ul>
                   </div>
                 </div>
@@ -473,18 +619,19 @@ export default function Help() {
             <AccordionItem title="Sites Management">
               <div className="space-y-4">
                 <p className="text-gray-700 dark:text-gray-300">
-                  Manage your WordPress sites and their integration settings.
+                  Manage your websites and their integration settings. Each site can have multiple sectors for content organization.
                 </p>
-                
+
                 <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
                   <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Setting Up a Site:</h4>
                   <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
                     <li>Go to <strong>Sites</strong> in the main menu</li>
-                    <li>Click "Add Site" button</li>
-                    <li>Enter site name and WordPress URL</li>
-                    <li>Select industry and sectors</li>
-                    <li>Configure WordPress credentials (REST API)</li>
-                    <li>Test connection and save</li>
+                    <li>Click <strong>"Add Site"</strong> button</li>
+                    <li>Enter site name and domain</li>
+                    <li>Select industry from 100+ categories</li>
+                    <li>Add sectors for content organization</li>
+                    <li>Configure WordPress integration (optional)</li>
+                    <li>Save and start adding keywords</li>
                   </ol>
                 </div>
 
@@ -494,7 +641,7 @@ export default function Help() {
                     <div>
                       <h4 className="font-semibold text-gray-900 dark:text-white">Site Dashboard</h4>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
-                        View site setup progress, connected content, and quick actions.
+                        View setup progress, content stats, and quick actions for each site.
                       </p>
                     </div>
                   </div>
@@ -502,9 +649,9 @@ export default function Help() {
                   <div className="flex items-start gap-3">
                     <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                     <div>
-                      <h4 className="font-semibold text-gray-900 dark:text-white">WordPress Integration</h4>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Multi-Site Support</h4>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Connect your WordPress site to automatically publish content, sync posts, and manage images.
+                        Manage multiple sites from one account. Use the site selector to switch between sites.
                       </p>
                     </div>
                   </div>
@@ -522,39 +669,39 @@ export default function Help() {
           </h2>
 
           <Accordion>
-            <AccordionItem title="Keywords Management">
+            <AccordionItem title="Keywords Management" defaultOpen>
               <div className="space-y-4">
                 <p className="text-gray-700 dark:text-gray-300">
-                  Keywords are the foundation of your content strategy. Here's how to manage them:
+                  Keywords are the foundation of your content strategy. Manage, filter, and organize your keywords here.
                 </p>
-                
+
                 <div className="space-y-3">
-                  <div className="flex items-start gap-3">
-                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
-                    <div>
-                      <h4 className="font-semibold text-gray-900 dark:text-white">Adding Keywords</h4>
-                      <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Go to Planner &gt; Keyword Opportunities to browse the global keyword database. Use filters to find relevant keywords, then add them individually or in bulk.
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="flex items-start gap-3">
-                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
-                    <div>
-                      <h4 className="font-semibold text-gray-900 dark:text-white">Organizing Keywords</h4>
-                      <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Use Auto Cluster to automatically group related keywords. You can also manually assign keywords to clusters or create new clusters.
-                      </p>
-                    </div>
-                  </div>
-
                   <div className="flex items-start gap-3">
                     <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                     <div>
                       <h4 className="font-semibold text-gray-900 dark:text-white">Keyword Data</h4>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Each keyword includes volume, difficulty, intent, and status. Use column visibility to show/hide additional fields like updated dates and overrides.
+                        Each keyword shows: Search Volume, Difficulty Score (0-100), Search Intent (Informational, Commercial, Transactional, Navigational), and Cluster status.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3">
+                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
+                    <div>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Filtering & Sorting</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Filter by intent, difficulty range, volume range, cluster status. Sort by any column. Use column visibility to customize your view.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3">
+                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
+                    <div>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Bulk Actions</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Select multiple keywords to: Auto-Cluster, Assign to Cluster, Export to CSV, or Delete.
                       </p>
                     </div>
                   </div>
@@ -565,30 +712,60 @@ export default function Help() {
             <AccordionItem title="Keyword Clusters">
               <div className="space-y-4">
                 <p className="text-gray-700 dark:text-gray-300">
-                  Clusters group related keywords together for comprehensive content planning:
+                  Clusters group related keywords for comprehensive content planning and topical authority building.
                 </p>
-                
-                <ul className="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
-                  <li>Clusters help you create content that covers multiple related search queries</li>
-                  <li>Auto-clustering uses AI to group keywords by semantic similarity</li>
-                  <li>Each cluster shows total volume, keyword count, and associated ideas</li>
-                  <li>Generate content ideas directly from clusters</li>
-                </ul>
+
+                <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
+                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">How Clustering Works:</h4>
+                  <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
+                    <li>Select keywords in the Keywords page</li>
+                    <li>Click <strong>"Auto Cluster"</strong></li>
+                    <li>AI analyzes semantic similarity and search intent</li>
+                    <li>Keywords are grouped into topic clusters</li>
+                    <li>Each cluster gets a name and description</li>
+                    <li>Generate content ideas from clusters</li>
+                  </ol>
+                </div>
+
+                <div className="space-y-3 mt-4">
+                  <div className="border-l-4 border-brand-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Cluster Metrics</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li>Total search volume (sum of all keywords)</li>
+                      <li>Keyword count per cluster</li>
+                      <li>Ideas generated from cluster</li>
+                      <li>Content pieces created</li>
+                    </ul>
+                  </div>
+                </div>
               </div>
             </AccordionItem>
 
             <AccordionItem title="Content Ideas">
               <div className="space-y-4">
                 <p className="text-gray-700 dark:text-gray-300">
-                  Content ideas are AI-generated suggestions based on your keyword clusters:
+                  Content ideas are AI-generated article concepts based on your keyword clusters.
                 </p>
-                
-                <ul className="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
-                  <li>Ideas include title, structure, content type, and target keyword</li>
-                  <li>Ideas automatically convert to tasks in the Writer module</li>
-                  <li>Filter ideas by status, cluster, content type, and structure</li>
-                  <li>Edit ideas before they become tasks</li>
-                </ul>
+
+                <div className="space-y-3">
+                  <div className="border-l-4 border-brand-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Idea Components</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li><strong>Title:</strong> Suggested article headline</li>
+                      <li><strong>Structure:</strong> How-To, List, Guide, Comparison, etc.</li>
+                      <li><strong>Content Type:</strong> Blog Post, Article, Tutorial</li>
+                      <li><strong>Target Keyword:</strong> Primary keyword to target</li>
+                      <li><strong>Estimated Word Count:</strong> Suggested article length</li>
+                    </ul>
+                  </div>
+
+                  <div className="border-l-4 border-success-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Idea to Task</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Select ideas and click "Convert to Tasks" to create writing assignments. Tasks appear in Writer → Tasks for content generation.
+                    </p>
+                  </div>
+                </div>
               </div>
             </AccordionItem>
           </Accordion>
@@ -602,20 +779,31 @@ export default function Help() {
           </h2>
 
           <Accordion>
-            <AccordionItem title="Tasks Management">
+            <AccordionItem title="Tasks Management" defaultOpen>
               <div className="space-y-4">
                 <p className="text-gray-700 dark:text-gray-300">
-                  Tasks are content ideas converted into actionable writing assignments:
+                  Tasks are content ideas converted into actionable writing assignments with status tracking.
                 </p>
-                
-                <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
-                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Task Workflow:</h4>
-                  <ol className="list-decimal list-inside space-y-1 text-sm text-gray-600 dark:text-gray-400">
-                    <li>Ideas from Planner automatically create tasks</li>
-                    <li>Tasks show status: Pending, In Progress, Completed</li>
-                    <li>Select tasks and generate content using AI</li>
-                    <li>Content is created and linked to the task</li>
-                  </ol>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                  <div className="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg text-center">
+                    <div className="font-bold text-gray-900 dark:text-white">Pending</div>
+                    <div className="text-sm text-gray-500">Awaiting content generation</div>
+                  </div>
+                  <div className="bg-brand-100 dark:bg-brand-900/30 p-3 rounded-lg text-center">
+                    <div className="font-bold text-brand-700 dark:text-brand-300">In Progress</div>
+                    <div className="text-sm text-brand-600 dark:text-brand-400">Content being generated</div>
+                  </div>
+                  <div className="bg-success-100 dark:bg-success-900/30 p-3 rounded-lg text-center">
+                    <div className="font-bold text-success-700 dark:text-success-300">Completed</div>
+                    <div className="text-sm text-success-600 dark:text-success-400">Content created</div>
+                  </div>
+                </div>
+
+                <div className="bg-brand-50 dark:bg-brand-900/10 p-4 rounded-lg border border-brand-200 dark:border-brand-800">
+                  <p className="text-sm text-brand-800 dark:text-brand-300">
+                    <strong>Generate Content:</strong> Select pending tasks and click "Generate Content". AI will create full articles based on each task's requirements.
+                  </p>
                 </div>
               </div>
             </AccordionItem>
@@ -623,16 +811,16 @@ export default function Help() {
             <AccordionItem title="Content Generation">
               <div className="space-y-4">
                 <p className="text-gray-700 dark:text-gray-300">
-                  Generate, edit, and manage your content:
+                  Generate, edit, and manage your AI-created content.
                 </p>
-                
+
                 <div className="space-y-3">
                   <div className="flex items-start gap-3">
                     <Badge variant="solid" color="blue" size="sm">Step 1</Badge>
                     <div>
                       <h4 className="font-semibold text-gray-900 dark:text-white">Generate Content</h4>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Select tasks and click "Generate Content". AI creates full articles based on the task requirements.
+                        Select tasks and click "Generate Content". AI creates full articles with headings, paragraphs, and SEO metadata.
                       </p>
                     </div>
                   </div>
@@ -642,7 +830,7 @@ export default function Help() {
                     <div>
                       <h4 className="font-semibold text-gray-900 dark:text-white">Review & Edit</h4>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Click on any content to open the editor. Make changes, adjust formatting, and refine the content.
+                        Click any content to open the HTML editor. Edit text, formatting, add links, and adjust SEO metadata (title, description, slug).
                       </p>
                     </div>
                   </div>
@@ -650,29 +838,93 @@ export default function Help() {
                   <div className="flex items-start gap-3">
                     <Badge variant="solid" color="blue" size="sm">Step 3</Badge>
                     <div>
-                      <h4 className="font-semibold text-gray-900 dark:text-white">Generate Images</h4>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Approve</h4>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Go to Images page and generate featured and in-article images for your content.
+                        Change status to "Approved" when content is ready for publishing. Approved content can be published to WordPress.
                       </p>
                     </div>
                   </div>
                 </div>
+
+                <div className="border-l-4 border-purple-500 pl-4 mt-4">
+                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Statuses</h4>
+                  <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                    <li><strong>Draft:</strong> Initial AI-generated content</li>
+                    <li><strong>In Review:</strong> Being edited/reviewed</li>
+                    <li><strong>Approved:</strong> Ready for publishing</li>
+                    <li><strong>Published:</strong> Live on WordPress</li>
+                  </ul>
+                </div>
               </div>
             </AccordionItem>
 
             <AccordionItem title="Image Generation">
               <div className="space-y-4">
                 <p className="text-gray-700 dark:text-gray-300">
-                  AI-generated images for your content:
+                  Generate AI images for your content using DALL-E 3 (premium) or Runware (basic).
                 </p>
-                
-                <ul className="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
-                  <li>Featured images: Main image for your content</li>
-                  <li>In-article images: Multiple images throughout the content</li>
-                  <li>Click any image to view in full size</li>
-                  <li>Regenerate images if needed</li>
-                  <li>Images are automatically linked to content</li>
-                </ul>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="border-l-4 border-brand-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Featured Images</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Main image for each article. Automatically used as the WordPress featured image when publishing.
+                    </p>
+                  </div>
+
+                  <div className="border-l-4 border-purple-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">In-Article Images</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Additional images placed throughout the content. Enhances reader engagement and SEO.
+                    </p>
+                  </div>
+                </div>
+
+                <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
+                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Generation Options:</h4>
+                  <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                    <li><strong>Basic (5 credits):</strong> Runware - fast, good quality</li>
+                    <li><strong>Premium (25 credits):</strong> DALL-E 3 - highest quality</li>
+                    <li><strong>Sizes:</strong> 1024x1024, 1792x1024, 1024x1792</li>
+                    <li><strong>Styles:</strong> Photorealistic, Illustrated, Abstract</li>
+                  </ul>
+                </div>
+              </div>
+            </AccordionItem>
+
+            <AccordionItem title="Review & Publish">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Final review stage before publishing to WordPress.
+                </p>
+
+                <div className="space-y-3">
+                  <div className="flex items-start gap-3">
+                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
+                    <div>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Review Checklist</h4>
+                      <ul className="text-sm text-gray-600 dark:text-gray-400 list-disc list-inside">
+                        <li>Content is accurate and well-written</li>
+                        <li>SEO metadata is complete (title, description)</li>
+                        <li>Featured image is set</li>
+                        <li>Categories and tags are assigned</li>
+                        <li>Internal links are added</li>
+                      </ul>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3">
+                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
+                    <div>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Publishing Options</h4>
+                      <ul className="text-sm text-gray-600 dark:text-gray-400 list-disc list-inside">
+                        <li><strong>Publish Now:</strong> Immediately send to WordPress</li>
+                        <li><strong>Schedule:</strong> Set future publish date/time</li>
+                        <li><strong>Draft:</strong> Send as draft to WordPress</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
               </div>
             </AccordionItem>
           </Accordion>
@@ -682,69 +934,164 @@ export default function Help() {
         <div ref={(el) => (sectionRefs.current["automation"] = el)} className="mb-12 scroll-mt-24">
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
             <BoltIcon className="size-8 text-warning-600 dark:text-warning-400" />
-            Automation Setup
+            Automation Pipeline
           </h2>
 
           <Card className="p-6">
             <p className="text-gray-700 dark:text-gray-300 mb-4">
-              Automate your content creation workflow to save time and maintain consistency:
+              Automate your entire content workflow with the 7-stage automation pipeline. Each stage can be configured independently.
             </p>
-            
-            <div className="space-y-4">
+
+            <AutomationPipelineVisual />
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
               <div className="border-l-4 border-brand-500 pl-4">
-                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Keywords Automation</h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
-                  Automatically add keywords from opportunities and cluster them:
-                </p>
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Schedule Options</h4>
                 <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                  <li>Set how many keywords to process per cycle</li>
-                  <li>Enable auto-clustering for new keywords</li>
-                  <li>Configure cluster size limits</li>
-                </ul>
-              </div>
-
-              <div className="border-l-4 border-warning-500 pl-4">
-                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Ideas Automation</h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
-                  Automatically generate content ideas from clusters:
-                </p>
-                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                  <li>Auto-generate ideas when clusters are created</li>
-                  <li>Set number of ideas per cluster</li>
-                </ul>
-              </div>
-
-              <div className="border-l-4 border-success-500 pl-4">
-                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Automation</h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
-                  Automatically create tasks and generate content:
-                </p>
-                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                  <li>Auto-create tasks from ideas</li>
-                  <li>Auto-generate content from tasks</li>
+                  <li><strong>Daily:</strong> Run every day at set time</li>
+                  <li><strong>Weekly:</strong> Run on specific days</li>
+                  <li><strong>Monthly:</strong> Run on specific dates</li>
+                  <li><strong>Manual:</strong> Trigger on demand</li>
                 </ul>
               </div>
 
               <div className="border-l-4 border-purple-500 pl-4">
-                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Images Automation</h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
-                  Automatically generate images for content:
-                </p>
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Batch Configuration</h4>
                 <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                  <li>Auto-generate featured images</li>
-                  <li>Auto-generate in-article images</li>
+                  <li>Set items per batch (5, 10, 25, 50)</li>
+                  <li>Configure credit limits per run</li>
+                  <li>Enable/disable individual stages</li>
+                  <li>Set quality thresholds</li>
                 </ul>
               </div>
             </div>
 
             <div className="mt-6 p-4 bg-brand-50 dark:bg-brand-900/10 rounded-lg border border-brand-200 dark:border-brand-800">
               <p className="text-sm text-brand-800 dark:text-brand-300">
-                  <strong>Note:</strong> Configure automation in Dashboard &gt; Automation Setup. For advanced scheduling, go to the Automation menu.
+                <strong>Credit Estimation:</strong> Before running automation, the system shows estimated credit usage. You can review and adjust before confirming.
               </p>
             </div>
           </Card>
         </div>
 
+        {/* Publisher Section */}
+        <div ref={(el) => (sectionRefs.current["publisher"] = el)} className="mb-12 scroll-mt-24">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
+            <FileIcon className="size-8 text-purple-600 dark:text-purple-400" />
+            Publisher & Calendar
+          </h2>
+
+          <Card className="p-6">
+            <p className="text-gray-700 dark:text-gray-300 mb-4">
+              Schedule and manage content publication with the visual content calendar.
+            </p>
+
+            <div className="space-y-4">
+              <div className="border-l-4 border-brand-500 pl-4">
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Calendar</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Visual calendar showing scheduled and published content. Drag and drop to reschedule. Click to view content details.
+                </p>
+              </div>
+
+              <div className="border-l-4 border-success-500 pl-4">
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Scheduling</h4>
+                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                  <li>Set specific publish date and time</li>
+                  <li>Configure auto-publish for approved content</li>
+                  <li>Bulk schedule multiple pieces</li>
+                  <li>View upcoming publications</li>
+                </ul>
+              </div>
+
+              <div className="border-l-4 border-purple-500 pl-4">
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Publishing History</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Track all published content with timestamps, WordPress post IDs, and sync status.
+                </p>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        {/* Integrations Section */}
+        <div ref={(el) => (sectionRefs.current["integrations"] = el)} className="mb-12 scroll-mt-24">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
+            <GroupIcon className="size-8 text-brand-600 dark:text-brand-400" />
+            Integrations
+          </h2>
+
+          <Accordion>
+            <AccordionItem title="WordPress Integration" defaultOpen>
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Connect your WordPress site for seamless content publishing.
+                </p>
+
+                <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
+                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Setup Steps:</h4>
+                  <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
+                    <li>Install the <strong>IGNY8 WP Bridge</strong> plugin on your WordPress site</li>
+                    <li>Activate the plugin and generate an API key</li>
+                    <li>In IGNY8, go to Sites → Your Site → WordPress Settings</li>
+                    <li>Enter your WordPress URL and API key</li>
+                    <li>Click "Test Connection" to verify</li>
+                    <li>Save settings</li>
+                  </ol>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                  <div className="border-l-4 border-success-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">What Syncs</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li>Content body (HTML)</li>
+                      <li>Featured images</li>
+                      <li>In-article images</li>
+                      <li>SEO metadata</li>
+                      <li>Categories & tags</li>
+                      <li>Publication status</li>
+                    </ul>
+                  </div>
+
+                  <div className="border-l-4 border-brand-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Bidirectional Sync</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Changes in WordPress (post edits, status changes) sync back to IGNY8. Keep content in sync across platforms.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </AccordionItem>
+
+            <AccordionItem title="AI Providers">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  IGNY8 integrates with multiple AI providers for content and image generation.
+                </p>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="border-l-4 border-brand-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Generation</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li><strong>OpenAI (GPT-4o):</strong> Primary content generation</li>
+                      <li><strong>Anthropic (Claude):</strong> Alternative provider</li>
+                    </ul>
+                  </div>
+
+                  <div className="border-l-4 border-purple-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Generation</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li><strong>DALL-E 3:</strong> Premium quality images</li>
+                      <li><strong>Runware:</strong> Fast, cost-effective basic images</li>
+                      <li><strong>Bria:</strong> Background removal & editing</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </AccordionItem>
+          </Accordion>
+        </div>
+
         {/* Account & Billing Section */}
         <div ref={(el) => (sectionRefs.current["account"] = el)} className="mb-12 scroll-mt-24">
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
@@ -753,51 +1100,34 @@ export default function Help() {
           </h2>
 
           <Accordion>
-            <AccordionItem title="Account Settings" defaultOpen>
+            <AccordionItem title="Credits System" defaultOpen>
               <div className="space-y-4">
                 <p className="text-gray-700 dark:text-gray-300">
-                  Manage your account, profile, and team from one place.
+                  Credits are your currency for AI operations. Understand how credits work:
                 </p>
-                
-                <div className="space-y-3">
-                  <div className="border-l-4 border-brand-500 pl-4">
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Account Tab</h4>
-                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                      <li>Organization name and billing email</li>
-                      <li>Billing address for invoices</li>
-                      <li>Tax ID / VAT number</li>
-                    </ul>
-                  </div>
 
-                  <div className="border-l-4 border-success-500 pl-4">
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Profile Tab</h4>
-                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                      <li>Personal information (name, email, phone)</li>
-                      <li>Timezone and language preferences</li>
-                      <li>Notification settings</li>
-                      <li>Password change (under Security)</li>
-                    </ul>
+                <CreditSystemVisual />
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                  <div className="border-l-4 border-brand-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Token-Based Operations</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Content generation, clustering, and idea generation use tokens. Actual tokens consumed are converted to credits at your plan's rate.
+                    </p>
                   </div>
 
                   <div className="border-l-4 border-purple-500 pl-4">
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Team Tab</h4>
-                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                      <li>View all team members</li>
-                      <li>Invite new members (Admin or Member roles)</li>
-                      <li>Remove team members</li>
-                    </ul>
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Fixed-Cost Operations</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Image generation uses fixed credits: 5 for basic (Runware), 25 for premium (DALL-E 3).
+                    </p>
                   </div>
                 </div>
 
-                <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg mt-4">
-                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Changing Your Password:</h4>
-                  <ol className="list-decimal list-inside space-y-1 text-sm text-gray-600 dark:text-gray-400">
-                    <li>Go to Account Settings → Profile tab</li>
-                    <li>Click "Change Password" in the Security section</li>
-                    <li>Enter your current password</li>
-                    <li>Enter and confirm your new password (min 8 characters)</li>
-                    <li>Click "Change Password" to save</li>
-                  </ol>
+                <div className="bg-success-50 dark:bg-success-900/10 p-4 rounded-lg border border-success-200 dark:border-success-800">
+                  <p className="text-sm text-success-800 dark:text-success-300">
+                    <strong>Credit Tracking:</strong> View real-time credit usage in Account → Usage. Credits reset monthly on your billing date.
+                  </p>
                 </div>
               </div>
             </AccordionItem>
@@ -807,34 +1137,32 @@ export default function Help() {
                 <p className="text-gray-700 dark:text-gray-300">
                   Manage your subscription, view invoices, and track payments.
                 </p>
-                
+
                 <div className="space-y-3">
                   <div className="border-l-4 border-brand-500 pl-4">
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Current Plan Tab</h4>
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Current Plan</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                      <li>View your plan name and features</li>
-                      <li>Check credit balance</li>
+                      <li>View plan name and features</li>
+                      <li>Check credit balance and usage</li>
                       <li>See renewal date</li>
-                      <li>Cancel subscription (with confirmation)</li>
+                      <li>Upgrade or cancel subscription</li>
                     </ul>
                   </div>
 
                   <div className="border-l-4 border-success-500 pl-4">
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Upgrade Plan Tab</h4>
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Payment Methods</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                      <li>Compare available plans</li>
-                      <li>See feature differences</li>
-                      <li>Upgrade with prorated billing</li>
+                      <li><strong>Stripe:</strong> Credit/debit cards (Visa, MasterCard, Amex)</li>
+                      <li><strong>PayPal:</strong> PayPal account or cards</li>
+                      <li><strong>Bank Transfer:</strong> Annual plans only</li>
                     </ul>
                   </div>
 
                   <div className="border-l-4 border-warning-500 pl-4">
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">History Tab</h4>
-                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                      <li>Invoice history with PDF downloads</li>
-                      <li>Payment records</li>
-                      <li>Payment method management</li>
-                    </ul>
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Invoices</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Download PDF invoices from Account → Plans & Billing → History. Invoices include company details and tax information.
+                    </p>
                   </div>
                 </div>
               </div>
@@ -843,52 +1171,72 @@ export default function Help() {
             <AccordionItem title="Usage & Limits">
               <div className="space-y-4">
                 <p className="text-gray-700 dark:text-gray-300">
-                  Track your credit usage, limits, and activity.
+                  IGNY8 has 4 simplified usage limits. Track your usage in Account → Usage.
                 </p>
-                
-                <div className="space-y-3">
-                  <div className="border-l-4 border-brand-500 pl-4">
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Your Limits & Usage</h4>
-                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                      <li><strong>Hard Limits:</strong> Maximum allowed (sites, users, keywords)</li>
-                      <li><strong>Monthly Limits:</strong> Reset each billing cycle</li>
-                      <li>Visual progress bars show current usage</li>
-                    </ul>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="bg-brand-50 dark:bg-brand-900/30 p-4 rounded-lg">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Generation</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Monthly words/tokens for AI content. Resets each billing cycle.
+                    </p>
                   </div>
 
-                  <div className="border-l-4 border-purple-500 pl-4">
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Credit History</h4>
-                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                      <li>View all credit transactions</li>
-                      <li>See credits added and used</li>
-                      <li>Filter by date range</li>
-                    </ul>
+                  <div className="bg-purple-50 dark:bg-purple-900/30 p-4 rounded-lg">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Generation</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Monthly images (basic + premium). Resets each billing cycle.
+                    </p>
                   </div>
 
-                  <div className="border-l-4 border-success-500 pl-4">
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Activity</h4>
-                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                      <li>Track operations by type</li>
-                      <li>Monitor daily averages</li>
-                      <li>See credits used per operation</li>
-                    </ul>
+                  <div className="bg-success-50 dark:bg-success-900/30 p-4 rounded-lg">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Storage</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Total content and media storage. Does not reset.
+                    </p>
+                  </div>
+
+                  <div className="bg-warning-50 dark:bg-warning-900/30 p-4 rounded-lg">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">API Calls</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Monthly API requests. Resets each billing cycle.
+                    </p>
                   </div>
                 </div>
 
                 <div className="bg-warning-50 dark:bg-warning-900/10 p-4 rounded-lg border border-warning-200 dark:border-warning-800 mt-4">
                   <p className="text-sm text-warning-800 dark:text-warning-300">
-                    <strong>Usage Alerts:</strong> You'll receive automatic alerts at 80%, 90%, and 100% of your limits.
+                    <strong>Usage Alerts:</strong> You'll receive automatic notifications at 80%, 90%, and 100% of your limits.
                   </p>
                 </div>
               </div>
             </AccordionItem>
+
+            <AccordionItem title="Team Management">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Invite team members and manage roles in Account → Settings → Team.
+                </p>
+
+                <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
+                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">User Roles:</h4>
+                  <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+                    <li><strong>Developer:</strong> Full access across all accounts (internal only)</li>
+                    <li><strong>Admin:</strong> Full account access, billing, team management</li>
+                    <li><strong>Manager:</strong> Content + billing, no team management</li>
+                    <li><strong>Editor:</strong> Content creation only, no billing access</li>
+                    <li><strong>Viewer:</strong> Read-only access to content</li>
+                  </ul>
+                </div>
+              </div>
+            </AccordionItem>
           </Accordion>
         </div>
 
         {/* FAQ Section */}
         <div ref={(el) => (sectionRefs.current["faq"] = el)} className="mb-12 scroll-mt-24">
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
-            <GroupIcon className="size-8 text-purple-600 dark:text-purple-400" />
+            <HelpCircleIcon className="size-8 text-purple-600 dark:text-purple-400" />
             Frequently Asked Questions
           </h2>
 
@@ -911,14 +1259,14 @@ export default function Help() {
               Can't find what you're looking for? Our support team is here to help.
             </p>
             <div className="flex flex-wrap justify-center gap-4">
-              <a 
-                href="mailto:support@igny8.com?subject=Support Request" 
+              <a
+                href="mailto:support@igny8.com?subject=Support Request"
                 className="px-6 py-3 bg-white text-brand-600 rounded-lg font-semibold hover:bg-gray-100 transition-colors inline-block"
               >
                 Contact Support
               </a>
-              <a 
-                href="mailto:feedback@igny8.com?subject=Feature Request" 
+              <a
+                href="mailto:feedback@igny8.com?subject=Feature Request"
                 className="px-6 py-3 bg-white/10 text-white rounded-lg font-semibold hover:bg-white/20 transition-colors border border-white/20 inline-block"
               >
                 Feature Request