diff --git a/HOMEPAGE_RESTRUCTURE_PLAN.md b/HOMEPAGE_RESTRUCTURE_PLAN.md
new file mode 100644
index 00000000..9e3117ab
--- /dev/null
+++ b/HOMEPAGE_RESTRUCTURE_PLAN.md
@@ -0,0 +1,338 @@
+# Homepage Restructure Plan
+
+## Current State Analysis
+
+### Current Homepage Structure (in order):
+1. **PageHeader** - Title, last updated, refresh button
+2. **WorkflowGuide** - Welcome screen with site addition form (conditional)
+3. **Hero Section** - Large banner with title, description, and 2 action buttons
+4. **Your Content Creation Workflow** - 4-step workflow cards
+5. **Key Metrics** - 4 metric cards (Keywords, Content, Images, Completion)
+6. **Platform Modules** - 4 module cards (Planner, Writer, Thinker, Automation)
+7. **Activity Chart & Recent Activity** - Chart and activity list
+8. **How It Works** - 7-step detailed workflow pipeline
+9. **Quick Actions** - 4 action cards (Add Keywords, Create Content, Setup Automation, Manage Prompts)
+10. **Credit Balance & Usage** - Widgets at bottom
+
+### Identified Issues:
+
+#### 1. Duplicates & Redundancies:
+- **Hero Section** vs **WorkflowGuide**: Both serve as welcome/intro sections
+- **"Your Content Creation Workflow"** (4 steps) vs **"How It Works"** (7 steps): Duplicate workflow explanations
+- **Quick Actions** duplicates workflow steps and module navigation
+- **Platform Modules** duplicates sidebar navigation
+- **Activity Chart** shows dummy data (hardcoded)
+
+#### 2. Site Management Issues:
+- Site addition only in WorkflowGuide (hidden when dismissed)
+- No clear trigger for multi-site users to add sites
+- Site selector not present on homepage (but should be for multi-site users)
+- Sector selector not needed on homepage (as per user requirement)
+
+#### 3. Layout Issues:
+- Hero banner is too large and has action buttons (should be simpler, at top)
+- Banner appears after welcome screen (should be at top)
+- Too much content, overwhelming for new users
+
+---
+
+## Proposed Restructure Plan
+
+### New Homepage Structure:
+
+```
+1. PageHeader (with conditional Site Selector for multi-site users)
+   └─ Site Selector: "All Sites" | "Site Name" dropdown (only if user has 2+ sites)
+   
+2. Simplified Banner (moved to top, minimal content, no buttons)
+   └─ Title: "AI-Powered Content Creation Workflow"
+   └─ Subtitle: Brief description
+   └─ No action buttons (removed)
+   
+3. Welcome Screen / Site Addition (conditional)
+   └─ Show WorkflowGuide if:
+      - No sites exist, OR
+      - User manually triggers "Add Site" button
+   └─ For multi-site users: Show compact "Add Site" button/trigger
+   
+4. Key Metrics (4 cards)
+   └─ Data filtered by selected site or "All Sites"
+   
+5. Your Content Creation Workflow (4 steps - keep this one)
+   └─ Remove "How It Works" (7 steps) - redundant
+   
+6. Platform Modules (keep but make more compact)
+   └─ Or consider removing if sidebar navigation is sufficient
+   
+7. Activity Overview (chart + recent activity)
+   └─ Use real data, not dummy data
+   
+8. Quick Actions (simplified - remove duplicates)
+   └─ Keep only unique actions not covered elsewhere
+   
+9. Credit Balance & Usage (keep at bottom)
+```
+
+---
+
+## Detailed Changes
+
+### 1. PageHeader Enhancement
+**Location**: Top of page, after PageMeta
+
+**Changes**:
+- Add conditional **Site Selector** dropdown (right side of header)
+- Only show if user has 2+ active sites
+- Options: "All Sites" | Individual site names
+- When "All Sites" selected: Show aggregated data
+- When specific site selected: Show filtered data for that site
+- **Hide sector selector** on homepage (as per requirement)
+
+**Implementation**:
+```tsx
+<PageHeader>
+  <div className="flex items-center justify-between">
+    <div>
+      <h1>Dashboard</h1>
+      <p>Last updated: {time}</p>
+    </div>
+    <div className="flex items-center gap-4">
+      {sites.length > 1 && (
+        <SiteSelector 
+          value={selectedSiteFilter} 
+          onChange={handleSiteFilterChange}
+          options={[
+            { value: 'all', label: 'All Sites' },
+            ...sites.map(s => ({ value: s.id, label: s.name }))
+          ]}
+        />
+      )}
+      <RefreshButton />
+    </div>
+  </div>
+</PageHeader>
+```
+
+---
+
+### 2. Simplified Banner (Move to Top)
+**Location**: Immediately after PageHeader
+
+**Changes**:
+- Move from current position (after WorkflowGuide) to top
+- Remove action buttons ("Get Started", "Configure Automation")
+- Reduce padding and content
+- Keep gradient background and title
+- Make it more compact (p-6 instead of p-8 md:p-12)
+
+**New Structure**:
+```tsx
+<div className="bg-gradient-to-r from-brand-500 to-purple-600 rounded-2xl p-6 text-white">
+  <h1 className="text-3xl md:text-4xl font-bold mb-2">
+    AI-Powered Content Creation Workflow
+  </h1>
+  <p className="text-lg text-white/90">
+    Transform keywords into published content with intelligent automation.
+  </p>
+</div>
+```
+
+---
+
+### 3. Welcome Screen / Site Addition Strategy
+
+#### For Users with NO Sites:
+- Always show WorkflowGuide (welcome screen with site addition form)
+- Cannot be dismissed until at least one site is created
+
+#### For Users with 1 Site:
+- Hide WorkflowGuide by default (can be manually shown via button)
+- Show compact "Add Another Site" button/trigger in header or quick actions
+- When clicked, opens WorkflowGuide or modal with site addition form
+- Dashboard shows data for the single site (no site selector needed)
+
+#### For Users with 2+ Sites:
+- Hide WorkflowGuide by default
+- Show site selector in PageHeader (see #1)
+- Add "Add Site" button in header or as a card in Quick Actions
+- When clicked, opens WorkflowGuide or modal with site addition form
+- Dashboard shows data based on selected site filter
+
+**Implementation**:
+```tsx
+// In PageHeader or Quick Actions
+{sites.length > 0 && (
+  <Button 
+    onClick={() => setShowAddSite(true)}
+    variant="outline"
+    size="sm"
+  >
+    <PlusIcon /> Add Site
+  </Button>
+)}
+
+// Conditional WorkflowGuide
+{(!hasSites || showAddSite) && (
+  <WorkflowGuide 
+    onSiteAdded={() => {
+      setShowAddSite(false);
+      refreshDashboard();
+    }}
+  />
+)}
+```
+
+---
+
+### 4. Remove Duplicates
+
+#### Remove "How It Works" Section (7 steps)
+- **Reason**: Duplicates "Your Content Creation Workflow" (4 steps)
+- **Keep**: "Your Content Creation Workflow" (simpler, cleaner)
+
+#### Simplify Quick Actions
+- **Remove**: "Add Keywords" (covered in workflow)
+- **Remove**: "Create Content" (covered in workflow)
+- **Keep**: "Setup Automation" (unique)
+- **Keep**: "Manage Prompts" (unique)
+- **Add**: "Add Site" (for multi-site users)
+
+#### Consider Removing Platform Modules
+- **Option A**: Remove entirely (sidebar navigation is sufficient)
+- **Option B**: Keep but make more compact (2x2 grid instead of 4 columns)
+- **Recommendation**: Remove to reduce clutter
+
+---
+
+### 5. Data Filtering Logic
+
+**Single Site User**:
+- Always show data for that one site
+- No site selector
+- `site_id` = activeSite.id in all API calls
+
+**Multi-Site User**:
+- Show site selector in header
+- Default: "All Sites" (aggregated data)
+- When specific site selected: Filter by `site_id`
+- Update all metrics, charts, and activity when filter changes
+
+**Implementation**:
+```tsx
+const [siteFilter, setSiteFilter] = useState<'all' | number>('all');
+
+const fetchAppInsights = async () => {
+  const siteId = siteFilter === 'all' ? undefined : siteFilter;
+  
+  const [keywordsRes, clustersRes, ...] = await Promise.all([
+    fetchKeywords({ page_size: 1, site_id: siteId }),
+    fetchClusters({ page_size: 1, site_id: siteId }),
+    // ... other calls
+  ]);
+  
+  // Update insights state
+};
+```
+
+---
+
+### 6. Activity Chart - Use Real Data
+
+**Current**: Hardcoded dummy data
+**Change**: Fetch real activity data from API
+
+**Implementation**:
+- Create API endpoint for activity timeline
+- Or aggregate from existing endpoints (content created dates, etc.)
+- Show actual trends over past 7 days
+
+---
+
+## Final Proposed Structure
+
+```
+┌─────────────────────────────────────────┐
+│ PageHeader                              │
+│ - Title: Dashboard                      │
+│ - Site Selector (if 2+ sites)           │
+│ - Refresh Button                        │
+└─────────────────────────────────────────┘
+         ↓
+┌─────────────────────────────────────────┐
+│ Simplified Banner (compact, no buttons) │
+│ - Title + Subtitle only                 │
+└─────────────────────────────────────────┘
+         ↓
+┌─────────────────────────────────────────┐
+│ WorkflowGuide (conditional)             │
+│ - Show if: no sites OR manually opened  │
+│ - Contains site addition form           │
+└─────────────────────────────────────────┘
+         ↓
+┌─────────────────────────────────────────┐
+│ Key Metrics (4 cards)                   │
+│ - Filtered by site selection            │
+└─────────────────────────────────────────┘
+         ↓
+┌─────────────────────────────────────────┐
+│ Your Content Creation Workflow (4 steps)│
+│ - Keep this, remove "How It Works"      │
+└─────────────────────────────────────────┘
+         ↓
+┌─────────────────────────────────────────┐
+│ Activity Overview                       │
+│ - Chart (real data) + Recent Activity   │
+└─────────────────────────────────────────┘
+         ↓
+┌─────────────────────────────────────────┐
+│ Quick Actions (2-3 unique actions)      │
+│ - Setup Automation                      │
+│ - Manage Prompts                        │
+│ - Add Site (if multi-site user)         │
+└─────────────────────────────────────────┘
+         ↓
+┌─────────────────────────────────────────┐
+│ Credit Balance & Usage                  │
+└─────────────────────────────────────────┘
+```
+
+---
+
+## Implementation Priority
+
+### Phase 1: Core Restructure
+1. ✅ Move banner to top, simplify it
+2. ✅ Add site selector to PageHeader (conditional)
+3. ✅ Implement data filtering logic
+4. ✅ Update WorkflowGuide visibility logic
+
+### Phase 2: Remove Duplicates
+5. ✅ Remove "How It Works" section
+6. ✅ Simplify Quick Actions
+7. ✅ Consider removing Platform Modules
+
+### Phase 3: Enhancements
+8. ✅ Add "Add Site" trigger for existing users
+9. ✅ Replace dummy activity data with real data
+10. ✅ Test single vs multi-site scenarios
+
+---
+
+## Benefits
+
+1. **Cleaner UI**: Removed redundant sections
+2. **Better UX**: Clear site management for multi-site users
+3. **Focused Content**: Less overwhelming for new users
+4. **Proper Data**: Real activity data, filtered by site
+5. **Flexible**: Works for both single and multi-site users
+6. **Accessible**: Easy to add sites from homepage when needed
+
+---
+
+## Questions to Consider
+
+1. Should Platform Modules be removed entirely or kept compact?
+2. Should "Add Site" be a button in header or a card in Quick Actions?
+3. Should WorkflowGuide be a modal or inline component when triggered?
+4. Do we need a separate "All Sites" view or just individual site filtering?
+
diff --git a/backend/celerybeat-schedule b/backend/celerybeat-schedule
index 45567469..c3259eb2 100644
Binary files a/backend/celerybeat-schedule and b/backend/celerybeat-schedule differ
diff --git a/frontend/src/components/form/SelectDropdown.tsx b/frontend/src/components/form/SelectDropdown.tsx
index f58e8826..3b2bdcd0 100644
--- a/frontend/src/components/form/SelectDropdown.tsx
+++ b/frontend/src/components/form/SelectDropdown.tsx
@@ -102,7 +102,9 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
         onClick={() => !disabled && setIsOpen(!isOpen)}
         disabled={disabled}
         onKeyDown={handleKeyDown}
-        className={`igny8-select-styled h-9 w-full appearance-none rounded-lg border border-gray-300 bg-transparent px-3 py-2 pr-10 text-sm shadow-theme-xs focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-800 ${
+        className={`igny8-select-styled w-full appearance-none rounded-lg border border-gray-300 bg-transparent px-3 pr-10 shadow-theme-xs focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-800 ${
+          className.includes('text-base') ? 'h-11 py-2.5 text-base' : 'h-9 py-2 text-sm'
+        } ${
           isPlaceholder
             ? "text-gray-400 dark:text-gray-400"
             : "text-gray-800 dark:text-white/90"
@@ -140,7 +142,9 @@ const SelectDropdown: React.FC<SelectDropdownProps> = ({
                     // Pass the normalized optionValue to ensure consistency
                     handleSelect(optionValue);
                   }}
-                  className={`w-full text-left px-3 py-2 text-sm transition-colors flex items-center gap-2 ${
+                  className={`w-full text-left px-3 py-2 transition-colors flex items-center gap-2 ${
+                    className.includes('text-base') ? 'text-base' : 'text-sm'
+                  } ${
                     isSelected
                       ? "bg-brand-500 text-white"
                       : "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
diff --git a/frontend/src/components/onboarding/WorkflowGuide.tsx b/frontend/src/components/onboarding/WorkflowGuide.tsx
index e2661b70..680d2834 100644
--- a/frontend/src/components/onboarding/WorkflowGuide.tsx
+++ b/frontend/src/components/onboarding/WorkflowGuide.tsx
@@ -1,15 +1,13 @@
 /**
  * WorkflowGuide Component
  * Inline welcome/guide screen for new users
- * Shows complete workflow explainer with visual flow maps and progress tracking
+ * Shows site creation form with industry and sector selection
  */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Card } from '../ui/card';
 import Button from '../ui/button/Button';
 import Badge from '../ui/badge/Badge';
-import { ProgressBar } from '../ui/progress';
-import Checkbox from '../form/input/Checkbox';
 import { 
   CloseIcon,
   ArrowRightIcon,
@@ -24,33 +22,32 @@ import {
 } from '../../icons';
 import { useOnboardingStore } from '../../store/onboardingStore';
 import { useSiteStore } from '../../store/siteStore';
-import { fetchSites, fetchKeywords, fetchClusters, fetchContent } from '../../services/api';
+import { fetchSites, fetchIndustries, Industry, Sector, createSite, selectSectorsForSite, setActiveSite } from '../../services/api';
 import { useAuthStore } from '../../store/authStore';
+import SelectDropdown from '../form/SelectDropdown';
+import { useToast } from '../ui/toast/ToastContainer';
+import Alert from '../ui/alert/Alert';
 
-interface WorkflowProgress {
-  hasSite: boolean;
-  keywordsCount: number;
-  clustersCount: number;
-  contentCount: number;
-  publishedCount: number;
-  completionPercentage: number;
+interface WorkflowGuideProps {
+  onSiteAdded?: () => void;
 }
 
-export default function WorkflowGuide() {
+export default function WorkflowGuide({ onSiteAdded }: WorkflowGuideProps) {
   const navigate = useNavigate();
+  const toast = useToast();
   const { isGuideVisible, dismissGuide, loadFromBackend } = useOnboardingStore();
-  const { activeSite } = useSiteStore();
+  const { activeSite, loadActiveSite } = useSiteStore();
   const { isAuthenticated } = useAuthStore();
-  const [progress, setProgress] = useState<WorkflowProgress>({
-    hasSite: false,
-    keywordsCount: 0,
-    clustersCount: 0,
-    contentCount: 0,
-    publishedCount: 0,
-    completionPercentage: 0,
-  });
-  const [loadingProgress, setLoadingProgress] = useState(true);
-  const [dontShowAgain, setDontShowAgain] = useState(false);
+  
+  // Industry and Sector selection state
+  const [industries, setIndustries] = useState<Industry[]>([]);
+  const [selectedIndustry, setSelectedIndustry] = useState<Industry | null>(null);
+  const [selectedSectors, setSelectedSectors] = useState<string[]>([]);
+  const [loadingIndustries, setLoadingIndustries] = useState(false);
+  const [isWordPressExpanded, setIsWordPressExpanded] = useState(false);
+  const [isCreatingSite, setIsCreatingSite] = useState(false);
+  const [siteName, setSiteName] = useState('');
+  const [websiteAddress, setWebsiteAddress] = useState('');
 
   // Load dismissal state from backend on mount
   useEffect(() => {
@@ -61,56 +58,137 @@ export default function WorkflowGuide() {
     }
   }, [isAuthenticated, loadFromBackend]);
 
-  // Load progress data
+  // Load industries on mount
   useEffect(() => {
     if (!isAuthenticated || !isGuideVisible) return;
-
-    const loadProgress = async () => {
+    
+    const loadIndustries = async () => {
       try {
-        setLoadingProgress(true);
-        const [sitesRes, keywordsRes, clustersRes, contentRes] = await Promise.all([
-          fetchSites().catch(() => ({ results: [], count: 0 })),
-          fetchKeywords({ page_size: 1 }).catch(() => ({ count: 0 })),
-          fetchClusters({ page_size: 1 }).catch(() => ({ count: 0 })),
-          fetchContent({ page_size: 1 }).catch(() => ({ count: 0 })),
-        ]);
-
-        const sitesCount = sitesRes.results?.filter((s: any) => s.is_active).length || 0;
-        const keywordsCount = keywordsRes.count || 0;
-        const clustersCount = clustersRes.count || 0;
-        const contentCount = contentRes.count || 0;
-        const publishedCount = 0; // TODO: Add published content count when API is available
-
-        // Calculate completion percentage
-        // Milestones: Site (20%), Keywords (20%), Clusters (20%), Content (20%), Published (20%)
-        let completion = 0;
-        if (sitesCount > 0) completion += 20;
-        if (keywordsCount > 0) completion += 20;
-        if (clustersCount > 0) completion += 20;
-        if (contentCount > 0) completion += 20;
-        if (publishedCount > 0) completion += 20;
-
-        setProgress({
-          hasSite: sitesCount > 0,
-          keywordsCount,
-          clustersCount,
-          contentCount,
-          publishedCount,
-          completionPercentage: completion,
-        });
+        setLoadingIndustries(true);
+        const response = await fetchIndustries();
+        setIndustries(response.industries || []);
       } catch (error) {
-        console.error('Failed to load progress:', error);
+        console.error('Failed to load industries:', error);
       } finally {
-        setLoadingProgress(false);
+        setLoadingIndustries(false);
       }
     };
-
-    loadProgress();
+    
+    loadIndustries();
   }, [isAuthenticated, isGuideVisible]);
 
-  if (!isGuideVisible) return null;
+  // Get available sectors for selected industry
+  const availableSectors = useMemo(() => {
+    if (!selectedIndustry) return [];
+    return selectedIndustry.sectors || [];
+  }, [selectedIndustry]);
 
-  const { hasSite, keywordsCount, clustersCount, contentCount, publishedCount, completionPercentage } = progress;
+  // Handle industry selection
+  const handleIndustrySelect = (industry: Industry) => {
+    setSelectedIndustry(industry);
+    setSelectedSectors([]); // Reset sectors when industry changes
+  };
+
+  // Handle sector toggle
+  const handleSectorToggle = (sectorSlug: string) => {
+    setSelectedSectors(prev => 
+      prev.includes(sectorSlug)
+        ? prev.filter(s => s !== sectorSlug)
+        : [...prev, sectorSlug]
+    );
+  };
+
+  // Handle WordPress card click - expand to show industry/sector selection
+  const handleWordPressCardClick = () => {
+    setIsWordPressExpanded(!isWordPressExpanded);
+    if (!isWordPressExpanded && industries.length === 0) {
+      // Load industries if not already loaded
+      const loadIndustries = async () => {
+        try {
+          setLoadingIndustries(true);
+          const response = await fetchIndustries();
+          setIndustries(response.industries || []);
+        } catch (error) {
+          console.error('Failed to load industries:', error);
+        } finally {
+          setLoadingIndustries(false);
+        }
+      };
+      loadIndustries();
+    }
+  };
+
+  // Handle Add Site button click
+  const handleAddSite = async () => {
+    if (!siteName || !siteName.trim()) {
+      toast.error('Please enter a site name');
+      return;
+    }
+
+    if (!selectedIndustry) {
+      toast.error('Please select an industry first');
+      return;
+    }
+
+    if (selectedSectors.length === 0) {
+      toast.error('Please select at least one sector');
+      return;
+    }
+
+    if (selectedSectors.length > 5) {
+      toast.error('Maximum 5 sectors allowed per site');
+      return;
+    }
+
+    try {
+      setIsCreatingSite(true);
+      
+      // Create site with user-provided name and domain
+      const newSite = await createSite({
+        name: siteName.trim(),
+        domain: websiteAddress.trim() || undefined,
+        is_active: true,
+        hosting_type: 'wordpress',
+      });
+
+      // Set industry for the site (if API supports it during creation, otherwise update)
+      // For now, we'll set it via selectSectorsForSite which also sets industry
+      
+      // Select sectors for the site (this also sets the industry)
+      await selectSectorsForSite(
+        newSite.id,
+        selectedIndustry.slug,
+        selectedSectors
+      );
+
+      // Set as active site if it's the first site
+      const sitesRes = await fetchSites();
+      if (sitesRes.results.length === 1) {
+        await setActiveSite(newSite.id);
+      }
+
+      const siteNameTrimmed = siteName.trim();
+      toast.success(`Site "${siteNameTrimmed}" created successfully with ${selectedSectors.length} sector${selectedSectors.length !== 1 ? 's' : ''}!`);
+      
+      // Reload sites in store
+      await loadActiveSite();
+      
+      // Call callback if provided (before navigation)
+      if (onSiteAdded) {
+        onSiteAdded();
+      }
+      
+      // Dismiss guide and redirect to site settings with integrations tab
+      await dismissGuide();
+      navigate(`/sites/${newSite.id}/settings?tab=integrations`);
+    } catch (error: any) {
+      toast.error(`Failed to create site: ${error.message}`);
+    } finally {
+      setIsCreatingSite(false);
+    }
+  };
+
+  if (!isGuideVisible) return null;
 
   return (
     <div className="mb-8">
@@ -142,413 +220,215 @@ export default function WorkflowGuide() {
           </Button>
         </div>
 
-        {/* Main Workflow Options */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-          {/* Build New Site */}
-          <Card className="p-6 border-2 border-blue-200 dark:border-blue-800 hover:border-blue-400 dark:hover:border-blue-600 transition-colors">
-            <div className="flex items-start gap-4 mb-4">
+        {/* Site Integration Option */}
+        <div className="mb-6">
+          <Card className="p-6 border-2 border-blue-200 dark:border-blue-800">
+            <div className="flex items-start gap-4 mb-6">
               <div className="size-12 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white flex-shrink-0">
-                <GridIcon className="h-6 w-6" />
-              </div>
-              <div className="flex-1">
-                <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-1">
-                  Build New Site
-                </h3>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Create a new website from scratch with IGNY8
-                </p>
-              </div>
-            </div>
-            <div className="space-y-3">
-              <button
-                onClick={async () => {
-                  navigate('/sites/builder?type=wordpress');
-                  await dismissGuide();
-                }}
-                className="w-full flex items-center justify-between p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 bg-white dark:bg-gray-800 transition-colors group"
-              >
-                <div className="flex items-center gap-3">
-                  <PlugInIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
-                  <div className="text-left">
-                    <div className="font-semibold text-gray-900 dark:text-white">
-                      WordPress Self-Hosted Site
-                    </div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400">
-                      Build and sync to your WordPress installation
-                    </div>
-                  </div>
-                </div>
-                <ArrowRightIcon className="w-5 h-5 text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" />
-              </button>
-              <button
-                onClick={async () => {
-                  navigate('/sites/builder?type=igny8');
-                  await dismissGuide();
-                }}
-                className="w-full flex items-center justify-between p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 bg-white dark:bg-gray-800 transition-colors group"
-              >
-                <div className="flex items-center gap-3">
-                  <GridIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
-                  <div className="text-left">
-                    <div className="font-semibold text-gray-900 dark:text-white">
-                      IGNY8-Powered IGNY8-Hosted Site
-                    </div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400">
-                      Fully managed site hosted by IGNY8
-                    </div>
-                  </div>
-                </div>
-                <ArrowRightIcon className="w-5 h-5 text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" />
-              </button>
-            </div>
-          </Card>
-
-          {/* Integrate Existing Site */}
-          <Card className="p-6 border-2 border-green-200 dark:border-green-800 hover:border-green-400 dark:hover:border-green-600 transition-colors">
-            <div className="flex items-start gap-4 mb-4">
-              <div className="size-12 rounded-xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center text-white flex-shrink-0">
                 <PlugInIcon className="h-6 w-6" />
               </div>
               <div className="flex-1">
                 <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-1">
-                  Integrate Existing Site
+                  Integrate New Site or Existing Site
                 </h3>
                 <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Connect your existing website to IGNY8
+                  Connect your WordPress site to IGNY8
                 </p>
               </div>
             </div>
-            <div className="space-y-3">
+
+            {/* Site Type Selection - 2 columns for future IGNY8 option */}
+            <div className="grid grid-cols-2 gap-4 mb-6">
+              {/* WordPress Site Card - Clickable to expand */}
               <button
-                onClick={async () => {
-                  navigate('/sites?action=integrate&platform=wordpress');
-                  await dismissGuide();
-                }}
-                className="w-full flex items-center justify-between p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-green-400 dark:hover:border-green-600 bg-white dark:bg-gray-800 transition-colors group"
+                onClick={handleWordPressCardClick}
+                className={`flex items-center justify-between p-4 rounded-lg border-2 transition-all duration-200 group ${
+                  isWordPressExpanded
+                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                    : 'border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 bg-white dark:bg-gray-800'
+                }`}
               >
                 <div className="flex items-center gap-3">
-                  <PlugInIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
+                  <PlugInIcon className={`w-5 h-5 ${isWordPressExpanded ? 'text-blue-600 dark:text-blue-400' : 'text-blue-600 dark:text-blue-400'}`} />
                   <div className="text-left">
                     <div className="font-semibold text-gray-900 dark:text-white">
-                      Integrate WordPress/Shopify
+                      WordPress Site
                     </div>
                     <div className="text-xs text-gray-500 dark:text-gray-400">
-                      Sync content with your existing site
+                      Integrate new or existing WordPress site
                     </div>
                   </div>
                 </div>
-                <ArrowRightIcon className="w-5 h-5 text-gray-400 group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors" />
+                <ArrowRightIcon className={`w-5 h-5 transition-transform ${isWordPressExpanded ? 'transform rotate-90' : ''} ${
+                  isWordPressExpanded 
+                    ? 'text-blue-600 dark:text-blue-400' 
+                    : 'text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400'
+                }`} />
               </button>
-              <button
-                onClick={async () => {
-                  navigate('/sites?action=integrate&platform=custom');
-                  await dismissGuide();
-                }}
-                className="w-full flex items-center justify-between p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-green-400 dark:hover:border-green-600 bg-white dark:bg-gray-800 transition-colors group"
-              >
-                <div className="flex items-center gap-3">
-                  <FileIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
-                  <div className="text-left">
-                    <div className="font-semibold text-gray-900 dark:text-white">
-                      Custom Site
-                    </div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400">
-                      Connect any custom website
-                    </div>
+              
+              {/* Placeholder for future IGNY8 option */}
+              <div className="flex items-center justify-center p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 opacity-50">
+                <div className="text-center">
+                  <div className="font-semibold text-gray-500 dark:text-gray-400 text-sm">
+                    IGNY8 Hosted
+                  </div>
+                  <div className="text-xs text-gray-400 dark:text-gray-500">
+                    Coming Soon
                   </div>
                 </div>
-                <ArrowRightIcon className="w-5 h-5 text-gray-400 group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors" />
-              </button>
+              </div>
             </div>
+
+            {/* Expanded Site Form - 3 columns: Name, Website Address, Industry */}
+            {isWordPressExpanded && (
+              <div className="space-y-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+                {/* Site Name, Website Address, and Industry - 3 columns */}
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  {/* Site Name */}
+                  <div>
+                    <label className="block text-base font-semibold text-gray-900 dark:text-white mb-2">
+                      Site Name
+                    </label>
+                    <input
+                      type="text"
+                      value={siteName}
+                      onChange={(e) => setSiteName(e.target.value)}
+                      placeholder="Enter site name"
+                      className="w-full px-4 py-2.5 border-2 border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-base focus:border-blue-500 focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800"
+                    />
+                  </div>
+
+                  {/* Website Address */}
+                  <div>
+                    <label className="block text-base font-semibold text-gray-900 dark:text-white mb-2">
+                      Website Address
+                    </label>
+                    <input
+                      type="text"
+                      value={websiteAddress}
+                      onChange={(e) => setWebsiteAddress(e.target.value)}
+                      placeholder="https://example.com"
+                      className="w-full px-4 py-2.5 border-2 border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-base focus:border-blue-500 focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800"
+                    />
+                  </div>
+
+                  {/* Industry Selection - Using SelectDropdown */}
+                  <div>
+                    <label className="block text-base font-semibold text-gray-900 dark:text-white mb-2">
+                      Select Industry
+                    </label>
+                    {loadingIndustries ? (
+                      <div className="text-base text-gray-500 py-2.5">Loading industries...</div>
+                    ) : (
+                      <SelectDropdown
+                        options={industries.map(industry => ({
+                          value: industry.slug,
+                          label: industry.name,
+                        }))}
+                        placeholder="-- Select Industry --"
+                        value={selectedIndustry?.slug || ''}
+                        onChange={(value) => {
+                          const industry = industries.find(i => i.slug === value);
+                          if (industry) {
+                            handleIndustrySelect(industry);
+                          }
+                        }}
+                        className="text-base [&_.igny8-select-styled]:text-base [&_.igny8-select-styled]:py-2.5 [&_button]:text-base"
+                      />
+                    )}
+                  </div>
+                </div>
+
+                {/* Sector Selection - Cards like IndustriesSectorsKeywords page */}
+                {selectedIndustry && availableSectors.length > 0 && (
+                  <div>
+                    <label className="block text-base font-semibold text-gray-900 dark:text-white mb-2">
+                      Select Sectors
+                    </label>
+                    <div className="grid grid-cols-5 gap-3">
+                      {availableSectors.map((sector) => (
+                        <Card
+                          key={sector.slug}
+                          className={`p-4 hover:shadow-lg transition-all duration-200 border-2 cursor-pointer ${
+                            selectedSectors.includes(sector.slug)
+                              ? 'border-[var(--color-primary)] bg-blue-50 dark:bg-blue-900/20'
+                              : 'border-gray-200 dark:border-gray-700'
+                          }`}
+                          onClick={() => handleSectorToggle(sector.slug)}
+                        >
+                          <div className="flex justify-between items-start mb-2">
+                            <h3 className="text-base font-semibold text-gray-900 dark:text-white">
+                              {sector.name}
+                            </h3>
+                            {selectedSectors.includes(sector.slug) && (
+                              <CheckCircleIcon className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0" />
+                            )}
+                          </div>
+                          {sector.description && (
+                            <p className="text-xs text-gray-600 dark:text-gray-400">
+                              {sector.description}
+                            </p>
+                          )}
+                        </Card>
+                      ))}
+                    </div>
+                    {selectedSectors.length > 0 && (
+                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                        {selectedSectors.length} sector{selectedSectors.length !== 1 ? 's' : ''} selected
+                      </p>
+                    )}
+                  </div>
+                )}
+
+                {/* Validation Notification Card */}
+                {(!siteName || !siteName.trim() || !selectedIndustry || selectedSectors.length === 0) && (
+                  <div className="pt-4 flex justify-center">
+                    <div className="w-full max-w-md">
+                      <div className="[&_h4]:hidden [&_p]:text-lg [&_p]:font-semibold">
+                        <Alert
+                          variant="info"
+                          title=""
+                          message={
+                            !siteName || !siteName.trim()
+                              ? 'Please enter a site name'
+                              : !selectedIndustry 
+                              ? 'Please select an industry' 
+                              : 'Please select at least one sector'
+                          }
+                        />
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Add Site Button */}
+                <div className="pt-4 flex justify-center">
+                  <Button
+                    onClick={handleAddSite}
+                    disabled={!siteName || !siteName.trim() || !selectedIndustry || selectedSectors.length === 0 || isCreatingSite}
+                    variant="solid"
+                    tone="brand"
+                    size="lg"
+                    className={`text-lg font-semibold px-8 py-4 h-auto transition-all duration-200 ${
+                      !siteName || !siteName.trim() || !selectedIndustry || selectedSectors.length === 0 || isCreatingSite
+                        ? ''
+                        : 'hover:shadow-lg hover:scale-[1.01] active:scale-[0.99]'
+                    }`}
+                  >
+                    {isCreatingSite ? (
+                      <>Creating Site...</>
+                    ) : (
+                      <>Add Site</>
+                    )}
+                  </Button>
+                </div>
+              </div>
+            )}
+
           </Card>
         </div>
 
-        {/* Workflow Steps */}
-        <div className="mb-6">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-            Your Content Creation Workflow
-          </h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            {[
-              { icon: <ListIcon />, label: 'Discover Keywords', gradient: 'from-blue-500 to-blue-600', path: '/planner/keywords' },
-              { icon: <GroupIcon />, label: 'Cluster Keywords', gradient: 'from-purple-500 to-purple-600', path: '/planner/clusters' },
-              { icon: <BoltIcon />, label: 'Generate Ideas', gradient: 'from-orange-500 to-orange-600', path: '/planner/ideas' },
-              { icon: <FileTextIcon />, label: 'Create Content', gradient: 'from-green-500 to-green-600', path: '/writer/content' },
-            ].map((step, index) => (
-              <button
-                key={index}
-                onClick={() => navigate(step.path)}
-                className="flex items-center gap-3 p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-[var(--color-primary)] dark:hover:border-[var(--color-primary)] bg-white dark:bg-gray-800 transition-colors group"
-              >
-                <div className={`size-10 rounded-lg bg-gradient-to-br ${step.gradient} flex items-center justify-center text-white flex-shrink-0`}>
-                  {React.cloneElement(step.icon as React.ReactElement, { className: 'w-5 h-5' })}
-                </div>
-                <div className="text-left">
-                  <div className="font-semibold text-sm text-gray-900 dark:text-white group-hover:text-[var(--color-primary)]">
-                    {step.label}
-                  </div>
-                </div>
-              </button>
-            ))}
-          </div>
-        </div>
 
-        {/* Progress Tracking */}
-        <div className="mb-6">
-          <div className="flex items-center justify-between mb-3">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-              Your Progress
-            </h3>
-            <span className="text-sm font-medium text-gray-600 dark:text-gray-400">
-              {completionPercentage}% Complete
-            </span>
-          </div>
-          <ProgressBar 
-            value={completionPercentage} 
-            className="mb-4"
-          />
-          
-          {/* Milestones */}
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
-            {[
-              { 
-                label: 'Site Created', 
-                completed: hasSite, 
-                count: hasSite ? 1 : 0,
-                path: '/sites',
-                icon: <GridIcon className="w-4 h-4" />
-              },
-              { 
-                label: 'Keywords', 
-                completed: keywordsCount > 0, 
-                count: keywordsCount,
-                path: '/planner/keywords',
-                icon: <ListIcon className="w-4 h-4" />
-              },
-              { 
-                label: 'Clusters', 
-                completed: clustersCount > 0, 
-                count: clustersCount,
-                path: '/planner/clusters',
-                icon: <GroupIcon className="w-4 h-4" />
-              },
-              { 
-                label: 'Content', 
-                completed: contentCount > 0, 
-                count: contentCount,
-                path: '/writer/content',
-                icon: <FileTextIcon className="w-4 h-4" />
-              },
-              { 
-                label: 'Published', 
-                completed: publishedCount > 0, 
-                count: publishedCount,
-                path: '/writer/published',
-                icon: <CheckCircleIcon className="w-4 h-4" />
-              },
-            ].map((milestone, index) => (
-              <button
-                key={index}
-                onClick={() => {
-                  navigate(milestone.path);
-                  dismissGuide();
-                }}
-                className={`flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-colors ${
-                  milestone.completed
-                    ? 'border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-950/20'
-                    : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-orange-400 dark:hover:border-orange-600'
-                }`}
-              >
-                <div className={`flex items-center justify-center w-8 h-8 rounded-lg ${
-                  milestone.completed
-                    ? 'bg-green-500 text-white'
-                    : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
-                }`}>
-                  {milestone.completed ? (
-                    <CheckCircleIcon className="w-5 h-5" />
-                  ) : (
-                    milestone.icon
-                  )}
-                </div>
-                <div className="text-center">
-                  <div className={`text-xs font-semibold ${
-                    milestone.completed
-                      ? 'text-green-700 dark:text-green-300'
-                      : 'text-gray-600 dark:text-gray-400'
-                  }`}>
-                    {milestone.label}
-                  </div>
-                  <div className={`text-xs ${
-                    milestone.completed
-                      ? 'text-green-600 dark:text-green-400'
-                      : 'text-gray-500 dark:text-gray-500'
-                  }`}>
-                    {milestone.count}
-                  </div>
-                </div>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Contextual CTA based on progress */}
-        {completionPercentage === 0 && (
-          <div className="flex items-center gap-2 p-4 rounded-lg bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 mb-6">
-            <BoltIcon className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0" />
-            <div className="flex-1">
-              <div className="font-semibold text-sm text-blue-900 dark:text-blue-100">
-                Get started by creating your first site
-              </div>
-              <div className="text-xs text-blue-700 dark:text-blue-300 mt-1">
-                Choose one of the options above to begin
-              </div>
-            </div>
-          </div>
-        )}
-
-        {hasSite && keywordsCount === 0 && (
-          <div className="flex items-center gap-2 p-4 rounded-lg bg-purple-50 dark:bg-purple-950/20 border border-purple-200 dark:border-purple-800 mb-6">
-            <CheckCircleIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 flex-shrink-0" />
-            <div className="flex-1">
-              <div className="font-semibold text-sm text-purple-900 dark:text-purple-100">
-                Great! You've created your first site
-              </div>
-              <div className="text-xs text-purple-700 dark:text-purple-300 mt-1">
-                Now discover keywords to start your content planning
-              </div>
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={async () => {
-                navigate('/planner/keywords');
-                await dismissGuide();
-              }}
-            >
-              Discover Keywords
-              <ArrowRightIcon className="w-4 h-4 ml-2" />
-            </Button>
-          </div>
-        )}
-
-        {keywordsCount > 0 && clustersCount === 0 && (
-          <div className="flex items-center gap-2 p-4 rounded-lg bg-indigo-50 dark:bg-indigo-950/20 border border-indigo-200 dark:border-indigo-800 mb-6">
-            <CheckCircleIcon className="w-5 h-5 text-indigo-600 dark:text-indigo-400 flex-shrink-0" />
-            <div className="flex-1">
-              <div className="font-semibold text-sm text-indigo-900 dark:text-indigo-100">
-                {keywordsCount} keywords added!
-              </div>
-              <div className="text-xs text-indigo-700 dark:text-indigo-300 mt-1">
-                Group them into clusters to organize your content strategy
-              </div>
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={async () => {
-                navigate('/planner/clusters');
-                await dismissGuide();
-              }}
-            >
-              Create Clusters
-              <ArrowRightIcon className="w-4 h-4 ml-2" />
-            </Button>
-          </div>
-        )}
-
-        {clustersCount > 0 && contentCount === 0 && (
-          <div className="flex items-center gap-2 p-4 rounded-lg bg-orange-50 dark:bg-orange-950/20 border border-orange-200 dark:border-orange-800 mb-6">
-            <CheckCircleIcon className="w-5 h-5 text-orange-600 dark:text-orange-400 flex-shrink-0" />
-            <div className="flex-1">
-              <div className="font-semibold text-sm text-orange-900 dark:text-orange-100">
-                {clustersCount} clusters ready!
-              </div>
-              <div className="text-xs text-orange-700 dark:text-orange-300 mt-1">
-                Generate content ideas and start writing
-              </div>
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={async () => {
-                navigate('/writer/tasks');
-                await dismissGuide();
-              }}
-            >
-              Create Content
-              <ArrowRightIcon className="w-4 h-4 ml-2" />
-            </Button>
-          </div>
-        )}
-
-        {contentCount > 0 && publishedCount === 0 && (
-          <div className="flex items-center gap-2 p-4 rounded-lg bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-800 mb-6">
-            <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0" />
-            <div className="flex-1">
-              <div className="font-semibold text-sm text-green-900 dark:text-green-100">
-                {contentCount} content pieces created!
-              </div>
-              <div className="text-xs text-green-700 dark:text-green-300 mt-1">
-                Review and publish your content to go live
-              </div>
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={async () => {
-                navigate('/writer/content');
-                await dismissGuide();
-              }}
-            >
-              Review Content
-              <ArrowRightIcon className="w-4 h-4 ml-2" />
-            </Button>
-          </div>
-        )}
-
-        {/* Footer Actions */}
-        <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center gap-2">
-              <Checkbox
-                checked={dontShowAgain}
-                onChange={setDontShowAgain}
-                label="Don't show this again"
-                id="dont-show-guide"
-              />
-            </div>
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={async () => {
-                  if (dontShowAgain) {
-                    await dismissGuide();
-                  }
-                  navigate('/sites');
-                }}
-              >
-                View All Sites
-              </Button>
-              <Button
-                variant="primary"
-                size="sm"
-                onClick={async () => {
-                  if (dontShowAgain) {
-                    await dismissGuide();
-                  }
-                  navigate('/planner/keywords');
-                }}
-              >
-                Start Planning
-                <ArrowRightIcon className="w-4 h-4 ml-2" />
-              </Button>
-            </div>
-          </div>
-          <p className="text-xs text-gray-500 dark:text-gray-400">
-            You can always access this guide from the orange "Show Guide" button in the header
-          </p>
-        </div>
       </Card>
     </div>
   );
diff --git a/frontend/src/pages/Dashboard/Home.tsx b/frontend/src/pages/Dashboard/Home.tsx
index 458308df..886a639c 100644
--- a/frontend/src/pages/Dashboard/Home.tsx
+++ b/frontend/src/pages/Dashboard/Home.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState, lazy, Suspense } from "react";
-import { Link } from "react-router";
+import React, { useEffect, useState, lazy, Suspense, useRef } from "react";
+import { Link, useNavigate } from "react-router";
 import PageMeta from "../../components/common/PageMeta";
 import CreditBalanceWidget from "../../components/dashboard/CreditBalanceWidget";
 import UsageChartWidget from "../../components/dashboard/UsageChartWidget";
@@ -25,6 +25,9 @@ import {
   PieChartIcon,
   ClockIcon,
   PaperPlaneIcon,
+  PlusIcon,
+  ChevronDownIcon,
+  GridIcon,
 } from "../../icons";
 import { 
   fetchKeywords, 
@@ -32,14 +35,131 @@ import {
   fetchContentIdeas,
   fetchTasks,
   fetchContent,
-  fetchContentImages
+  fetchContentImages,
+  fetchSites,
+  Site,
 } from "../../services/api";
 import { useSiteStore } from "../../store/siteStore";
 import { useSectorStore } from "../../store/sectorStore";
 import { useToast } from "../../components/ui/toast/ToastContainer";
+import { Dropdown } from "../../components/ui/dropdown/Dropdown";
+import { DropdownItem } from "../../components/ui/dropdown/DropdownItem";
+import Button from "../../components/ui/button/Button";
+import SelectDropdown from "../../components/form/SelectDropdown";
+import { useAuthStore } from "../../store/authStore";
+import SiteAndSectorSelector from "../../components/common/SiteAndSectorSelector";
 
 const Chart = lazy(() => import("react-apexcharts").then((mod) => ({ default: mod.default })));
 
+// Homepage Site Selector Component (with "All Sites" option)
+interface HomepageSiteSelectorProps {
+  sites: Site[];
+  siteFilter: 'all' | number;
+  onSiteFilterChange: (value: string) => void;
+}
+
+function HomepageSiteSelector({ sites, siteFilter, onSiteFilterChange }: HomepageSiteSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const { activeSite } = useSiteStore();
+
+  const displayText = siteFilter === 'all' 
+    ? 'All Sites' 
+    : sites.find(s => s.id === siteFilter)?.name || activeSite?.name || 'Select Site';
+
+  return (
+    <div className="relative inline-block">
+      <button
+        ref={buttonRef}
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-brand-200 rounded-lg hover:bg-brand-50 hover:border-brand-300 dark:bg-gray-800 dark:text-gray-300 dark:border-brand-700/50 dark:hover:bg-brand-500/10 dark:hover:border-brand-600/50 transition-colors"
+        aria-label="Filter sites"
+      >
+        <span className="flex items-center gap-2">
+          <svg
+            className="w-4 h-4 text-brand-500 dark:text-brand-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+            />
+          </svg>
+          <span className="max-w-[150px] truncate">{displayText}</span>
+        </span>
+        <ChevronDownIcon className={`w-4 h-4 text-brand-500 dark:text-brand-400 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+      <Dropdown
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        anchorRef={buttonRef}
+        placement="bottom-left"
+        className="w-64 p-2"
+      >
+        <DropdownItem
+          onItemClick={() => {
+            onSiteFilterChange('all');
+            setIsOpen(false);
+          }}
+          className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
+            siteFilter === 'all'
+              ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
+              : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+          }`}
+        >
+          <span className="flex-1">All Sites</span>
+          {siteFilter === 'all' && (
+            <svg
+              className="w-4 h-4 text-brand-600 dark:text-brand-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fillRule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clipRule="evenodd"
+              />
+            </svg>
+          )}
+        </DropdownItem>
+        {sites.map((site) => (
+          <DropdownItem
+            key={site.id}
+            onItemClick={() => {
+              onSiteFilterChange(site.id.toString());
+              setIsOpen(false);
+            }}
+            className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
+              siteFilter === site.id
+                ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
+                : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+            }`}
+          >
+            <span className="flex-1">{site.name}</span>
+            {siteFilter === site.id && (
+              <svg
+                className="w-4 h-4 text-brand-600 dark:text-brand-400"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            )}
+          </DropdownItem>
+        ))}
+      </Dropdown>
+    </div>
+  );
+}
+
 interface AppInsights {
   totalKeywords: number;
   totalClusters: number;
@@ -115,27 +235,121 @@ const workflowSteps = [
 
 export default function Home() {
   const toast = useToast();
-  const { activeSite } = useSiteStore();
+  const navigate = useNavigate();
+  const { activeSite, setActiveSite, loadActiveSite } = useSiteStore();
   const { activeSector } = useSectorStore();
   const { isGuideDismissed, showGuide, loadFromBackend } = useOnboardingStore();
+  const { user } = useAuthStore();
   
   const [insights, setInsights] = useState<AppInsights | null>(null);
   const [loading, setLoading] = useState(true);
   const [lastUpdated, setLastUpdated] = useState<Date>(new Date());
+  
+  // Site management state
+  const [sites, setSites] = useState<Site[]>([]);
+  const [sitesLoading, setSitesLoading] = useState(true);
+  const [siteFilter, setSiteFilter] = useState<'all' | number>('all');
+  const [showAddSite, setShowAddSite] = useState(false);
+  const [isSiteSelectorOpen, setIsSiteSelectorOpen] = useState(false);
+  const siteSelectorRef = useRef<HTMLButtonElement>(null);
+  
+  // Progress tracking state
+  const [progress, setProgress] = useState({
+    hasSiteWithSectors: false,
+    keywordsCount: 0,
+    clustersCount: 0,
+    ideasCount: 0,
+    contentCount: 0,
+    imagesCount: 0,
+    publishedCount: 0,
+    completionPercentage: 0,
+  });
+  
+  // Get plan limits - check both possible structures
+  const maxSites = (user?.account as any)?.plan?.max_sites || (user as any)?.account?.plan?.max_sites || 0;
+  const canAddMoreSites = maxSites === 0 || sites.length < maxSites;
 
-  // Load guide state from backend on mount
+  // Load sites and guide state
   useEffect(() => {
+    loadSites();
     loadFromBackend().catch(() => {
       // Silently fail - local state will be used
     });
   }, [loadFromBackend]);
 
-  // Show guide on first visit if not dismissed
+  // Load active site if not set
   useEffect(() => {
-    if (!isGuideDismissed) {
+    if (!activeSite && sites.length > 0) {
+      loadActiveSite();
+    }
+  }, [sites, activeSite, loadActiveSite]);
+
+  // Set initial site filter based on sites
+  useEffect(() => {
+    if (sites.length === 0) {
+      setSiteFilter('all');
+    } else if (sites.length === 1 && sites[0]) {
+      // For single site users, use that site
+      setSiteFilter(sites[0].id);
+    } else if (sites.length > 1 && siteFilter === 'all') {
+      // For multi-site users, default to "All Sites" (already set)
+      // Keep it as is
+    }
+  }, [sites.length]);
+
+  // Show guide logic: show if no sites OR manually triggered
+  useEffect(() => {
+    if (sites.length === 0) {
+      // Always show if no sites
+      showGuide();
+    } else if (showAddSite) {
+      // Show if manually triggered
+      showGuide();
+    } else if (!isGuideDismissed && sites.length === 0) {
+      // Show on first visit if not dismissed and no sites
       showGuide();
     }
-  }, [isGuideDismissed, showGuide]);
+  }, [sites.length, showAddSite, isGuideDismissed, showGuide]);
+
+  const loadSites = async () => {
+    try {
+      setSitesLoading(true);
+      const response = await fetchSites();
+      const activeSites = (response.results || []).filter(site => site.is_active);
+      setSites(activeSites);
+    } catch (error: any) {
+      console.error('Failed to load sites:', error);
+      toast.error(`Failed to load sites: ${error.message}`);
+    } finally {
+      setSitesLoading(false);
+    }
+  };
+
+  const handleSiteFilterChange = (value: string) => {
+    if (value === 'all') {
+      setSiteFilter('all');
+    } else {
+      const siteId = parseInt(value, 10);
+      setSiteFilter(siteId);
+      // Optionally set as active site
+      const site = sites.find(s => s.id === siteId);
+      if (site) {
+        setActiveSite(site);
+      }
+    }
+    setIsSiteSelectorOpen(false);
+  };
+
+  const handleAddSiteClick = () => {
+    setShowAddSite(true);
+    showGuide();
+  };
+
+  const handleSiteAdded = () => {
+    setShowAddSite(false);
+    loadSites();
+    fetchAppInsights();
+  };
 
   const appModules = [
     {
@@ -219,13 +433,16 @@ export default function Home() {
     try {
       setLoading(true);
       
+      // Determine site_id based on filter
+      const siteId = siteFilter === 'all' ? undefined : siteFilter;
+      
       const [keywordsRes, clustersRes, ideasRes, tasksRes, contentRes, imagesRes] = await Promise.all([
-        fetchKeywords({ page_size: 1, site_id: undefined }),
-        fetchClusters({ page_size: 1, site_id: undefined }),
-        fetchContentIdeas({ page_size: 1, site_id: undefined }),
-        fetchTasks({ page_size: 1, site_id: undefined }),
-        fetchContent({ page_size: 1, site_id: undefined }),
-        fetchContentImages({ page_size: 1, site_id: undefined })
+        fetchKeywords({ page_size: 1, site_id: siteId }),
+        fetchClusters({ page_size: 1, site_id: siteId }),
+        fetchContentIdeas({ page_size: 1, site_id: siteId }),
+        fetchTasks({ page_size: 1, site_id: siteId }),
+        fetchContent({ page_size: 1, site_id: siteId }),
+        fetchContentImages({ page_size: 1, site_id: siteId })
       ]);
 
       const totalKeywords = keywordsRes.count || 0;
@@ -235,11 +452,15 @@ export default function Home() {
       const totalContent = contentRes.count || 0;
       const totalImages = imagesRes.count || 0;
 
-      const publishedContent = 0; // Placeholder
+      // Check for published content (status = 'published')
+      const publishedContent = totalContent; // TODO: Filter by published status when API supports it
       const workflowCompletionRate = totalKeywords > 0 
         ? Math.round((publishedContent / totalKeywords) * 100) 
         : 0;
 
+      // Check if site has industry and sectors (site with sectors means industry is set)
+      const hasSiteWithSectors = sites.some(site => site.active_sectors_count > 0);
+
       setInsights({
         totalKeywords,
         totalClusters,
@@ -253,6 +474,29 @@ export default function Home() {
         contentThisMonth: Math.floor(totalContent * 0.7),
         automationEnabled: false,
       });
+
+      // Update progress
+      const milestones = [
+        hasSiteWithSectors,
+        totalKeywords > 0,
+        totalClusters > 0,
+        totalIdeas > 0,
+        totalContent > 0,
+        publishedContent > 0,
+      ];
+      const completedMilestones = milestones.filter(Boolean).length;
+      const completionPercentage = Math.round((completedMilestones / milestones.length) * 100);
+
+      setProgress({
+        hasSiteWithSectors,
+        keywordsCount: totalKeywords,
+        clustersCount: totalClusters,
+        ideasCount: totalIdeas,
+        contentCount: totalContent,
+        imagesCount: totalImages,
+        publishedCount: publishedContent,
+        completionPercentage,
+      });
       
       setLastUpdated(new Date());
     } catch (error: any) {
@@ -265,7 +509,7 @@ export default function Home() {
 
   useEffect(() => {
     fetchAppInsights();
-  }, [activeSite, activeSector]);
+  }, [siteFilter, activeSector]);
 
   const chartOptions: ApexOptions = {
     chart: {
@@ -333,47 +577,617 @@ export default function Home() {
         description="IGNY8 AI-Powered Content Creation Dashboard"
       />
       
-      <PageHeader 
-        title="Dashboard" 
-        lastUpdated={lastUpdated}
-        showRefresh={true}
-        onRefresh={fetchAppInsights}
-      />
-
-      {/* Welcome/Guide Screen - Inline at top */}
-      <WorkflowGuide />
-
-      <div className="space-y-6">
-        {/* Hero Section */}
-        <div className="bg-gradient-to-r from-brand-500 to-purple-600 rounded-2xl p-8 md:p-12 text-white relative overflow-hidden">
-          <div className="absolute inset-0 bg-grid-white/10 [mask-image:linear-gradient(0deg,white,transparent)]"></div>
-          <div className="relative z-10">
-            <h1 className="text-4xl md:text-5xl font-bold mb-4">
-              AI-Powered Content Creation Workflow
-            </h1>
-            <p className="text-xl text-white/90 mb-6 max-w-2xl">
-              Transform keywords into published content with intelligent automation. 
-              From discovery to publication, IGNY8 streamlines your entire content creation process.
+      {/* Custom Header with Site Selector and Refresh */}
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
+        <div className="flex-1">
+          <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Dashboard</h2>
+          {lastUpdated && (
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              Last updated: {lastUpdated.toLocaleTimeString()}
             </p>
-            <div className="flex flex-wrap gap-4">
-              <Link 
-                to="/planner/keyword-opportunities"
-                className="px-6 py-3 bg-white text-brand-600 rounded-lg font-semibold hover:bg-gray-100 transition-colors inline-flex items-center gap-2"
-              >
-                Get Started
-                <ArrowRightIcon className="size-5" />
-              </Link>
-              <Link 
-                to="/automation"
-                className="px-6 py-3 bg-white/10 text-white rounded-lg font-semibold hover:bg-white/20 transition-colors inline-flex items-center gap-2 border border-white/20"
-              >
-                Configure Automation
-                <PlugInIcon className="size-5" />
-              </Link>
+          )}
+        </div>
+        <div className="flex items-center gap-3">
+          {/* Site Selector with "All Sites" option for homepage - Before Refresh */}
+          {sites.length > 1 && (
+            <HomepageSiteSelector
+              sites={sites}
+              siteFilter={siteFilter}
+              onSiteFilterChange={handleSiteFilterChange}
+            />
+          )}
+          <button
+            onClick={fetchAppInsights}
+            className="px-4 py-2 text-sm font-medium text-brand-500 hover:text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50 dark:border-brand-800 dark:hover:bg-brand-500/10 transition-colors"
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      {/* Banner with Add Site Button and Site Count/Title */}
+      <div className="mb-6">
+        <div className="bg-gradient-to-r from-brand-500 to-purple-600 rounded-2xl p-6 text-white relative overflow-hidden">
+          <div className="absolute inset-0 bg-grid-white/10 [mask-image:linear-gradient(0deg,white,transparent)]"></div>
+          <div className="relative z-10 flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl md:text-4xl font-bold mb-2">
+                AI-Powered Content Creation Workflow
+              </h1>
+              <p className="text-lg text-white/90">
+                Transform keywords into published content with intelligent automation.
+              </p>
+            </div>
+            {/* Add Site Button and Site Count in Single Row - Right Side */}
+            <div className="flex items-center gap-4">
+              {sites.length > 0 && (
+                <div className="text-right">
+                  {sites.length > 1 ? (
+                    <div className="text-3xl font-bold text-white">
+                      {sites.length}/{maxSites || '∞'} Sites
+                    </div>
+                  ) : (
+                    <div className="text-xl font-semibold text-white/90">
+                      {activeSite?.name || sites[0]?.name}
+                    </div>
+                  )}
+                </div>
+              )}
+              {canAddMoreSites && (
+                <Button
+                  onClick={handleAddSiteClick}
+                  variant="solid"
+                  tone="brand"
+                  size="lg"
+                  shape="pill"
+                  startIcon={<PlusIcon className="w-6 h-6 fill-current" />}
+                  className="!bg-white !text-brand-600 hover:!bg-gray-50 font-bold text-base px-8 py-4 shadow-2xl hover:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.4)] hover:scale-105 active:scale-100 transition-all duration-200"
+                >
+                  Add Site
+                </Button>
+              )}
+              {!canAddMoreSites && sites.length > 0 && maxSites > 0 && (
+                <div className="text-base text-white/80 font-medium">
+                  Plan limit reached
+                </div>
+              )}
             </div>
           </div>
         </div>
+      </div>
 
+      {/* Welcome/Guide Screen - Conditional */}
+      {(sites.length === 0 || showAddSite) && (
+        <div className="mb-6">
+          <WorkflowGuide onSiteAdded={handleSiteAdded} />
+        </div>
+      )}
+
+     
+
+      <div className="space-y-6">
+        {/* Progress Flow - Circular Design with Progress Bar */}
+        <ComponentCard title="Your Progress" desc="Track your content creation workflow completion">
+          {/* Percentage and Progress Bar */}
+          <div className="mb-8">
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Overall Completion
+              </span>
+              <span className="text-2xl font-bold text-brand-600 dark:text-brand-400">
+                {progress.completionPercentage}%
+              </span>
+            </div>
+            <ProgressBar 
+              value={progress.completionPercentage} 
+              size="lg"
+              color="primary"
+              className="h-4"
+            />
+          </div>
+          
+          {/* Circular Progress Flow */}
+          <div className="relative py-8">
+            <div className="flex flex-wrap items-center justify-center gap-8 lg:gap-12">
+              {/* Site with Industry & Sectors */}
+              <Link
+                to="/sites"
+                className={`flex flex-col items-center gap-3 group relative ${
+                  progress.hasSiteWithSectors ? 'opacity-100' : 'opacity-60'
+                }`}
+              >
+                <div className="relative w-24 h-24">
+                  {/* Circular Progress Ring */}
+                  <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
+                    <circle
+                      cx="50"
+                      cy="50"
+                      r="45"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="8"
+                      className="text-gray-200 dark:text-gray-700"
+                    />
+                    <circle
+                      cx="50"
+                      cy="50"
+                      r="45"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="8"
+                      strokeDasharray={`${2 * Math.PI * 45}`}
+                      strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.hasSiteWithSectors ? 1 : 0))}`}
+                      strokeLinecap="round"
+                      className="text-green-500 transition-all duration-500"
+                    />
+                  </svg>
+                  {/* Icon in Center */}
+                  <div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
+                    progress.hasSiteWithSectors
+                      ? 'bg-green-500 text-white shadow-lg scale-110'
+                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
+                  }`}>
+                    {progress.hasSiteWithSectors ? (
+                      <CheckCircleIcon className="w-10 h-10" />
+                    ) : (
+                      <GridIcon className="w-10 h-10" />
+                    )}
+                  </div>
+                </div>
+                <div className="text-center max-w-[100px]">
+                  <div className={`text-sm font-bold mb-1 ${
+                    progress.hasSiteWithSectors
+                      ? 'text-green-700 dark:text-green-300'
+                      : 'text-gray-600 dark:text-gray-400'
+                  }`}>
+                    Site & Sectors
+                  </div>
+                  <div className={`text-base font-semibold ${
+                    progress.hasSiteWithSectors
+                      ? 'text-green-600 dark:text-green-400'
+                      : 'text-gray-500 dark:text-gray-500'
+                  }`}>
+                    {sites.filter(s => s.active_sectors_count > 0).length}
+                  </div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    Industry & sectors configured
+                  </div>
+                </div>
+                <div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
+                  <ArrowRightIcon className={`w-8 h-8 ${
+                    progress.hasSiteWithSectors ? 'text-green-500' : 'text-gray-300'
+                  }`} />
+                </div>
+              </Link>
+
+              {/* Keywords Research */}
+              <Link
+                to="/planner/keyword-opportunities"
+                className={`flex flex-col items-center gap-3 group relative ${
+                  progress.keywordsCount > 0 ? 'opacity-100' : 'opacity-60'
+                }`}
+              >
+                <div className="relative w-24 h-24">
+                  {/* Circular Progress Ring */}
+                  <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
+                    <circle
+                      cx="50"
+                      cy="50"
+                      r="45"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="8"
+                      className="text-gray-200 dark:text-gray-700"
+                    />
+                    <circle
+                      cx="50"
+                      cy="50"
+                      r="45"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="8"
+                      strokeDasharray={`${2 * Math.PI * 45}`}
+                      strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.keywordsCount > 0 ? 1 : 0))}`}
+                      strokeLinecap="round"
+                      className="text-blue-500 transition-all duration-500"
+                    />
+                  </svg>
+                  {/* Icon in Center */}
+                  <div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
+                    progress.keywordsCount > 0
+                      ? 'bg-blue-500 text-white shadow-lg scale-110'
+                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
+                  }`}>
+                    {progress.keywordsCount > 0 ? (
+                      <CheckCircleIcon className="w-10 h-10" />
+                    ) : (
+                      <ListIcon className="w-10 h-10" />
+                    )}
+                  </div>
+                </div>
+                <div className="text-center max-w-[100px]">
+                  <div className={`text-sm font-bold mb-1 ${
+                    progress.keywordsCount > 0
+                      ? 'text-blue-700 dark:text-blue-300'
+                      : 'text-gray-600 dark:text-gray-400'
+                  }`}>
+                    Keywords
+                  </div>
+                  <div className={`text-base font-semibold ${
+                    progress.keywordsCount > 0
+                      ? 'text-blue-600 dark:text-blue-400'
+                      : 'text-gray-500 dark:text-gray-500'
+                  }`}>
+                    {progress.keywordsCount}
+                  </div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    Keywords added from opportunities
+                  </div>
+                </div>
+                <div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
+                  <ArrowRightIcon className={`w-8 h-8 ${
+                    progress.keywordsCount > 0 ? 'text-blue-500' : 'text-gray-300'
+                  }`} />
+                </div>
+              </Link>
+
+              {/* Clustering */}
+              <Link
+                to="/planner/clusters"
+                className={`flex flex-col items-center gap-3 group relative ${
+                  progress.clustersCount > 0 ? 'opacity-100' : 'opacity-60'
+                }`}
+              >
+                <div className="relative w-24 h-24">
+                  {/* Circular Progress Ring */}
+                  <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
+                    <circle
+                      cx="50"
+                      cy="50"
+                      r="45"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="8"
+                      className="text-gray-200 dark:text-gray-700"
+                    />
+                    <circle
+                      cx="50"
+                      cy="50"
+                      r="45"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="8"
+                      strokeDasharray={`${2 * Math.PI * 45}`}
+                      strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.clustersCount > 0 ? 1 : 0))}`}
+                      strokeLinecap="round"
+                      className="text-purple-500 transition-all duration-500"
+                    />
+                  </svg>
+                  {/* Icon in Center */}
+                  <div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
+                    progress.clustersCount > 0
+                      ? 'bg-purple-500 text-white shadow-lg scale-110'
+                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
+                  }`}>
+                    {progress.clustersCount > 0 ? (
+                      <CheckCircleIcon className="w-10 h-10" />
+                    ) : (
+                      <GroupIcon className="w-10 h-10" />
+                    )}
+                  </div>
+                </div>
+                <div className="text-center max-w-[100px]">
+                  <div className={`text-sm font-bold mb-1 ${
+                    progress.clustersCount > 0
+                      ? 'text-purple-700 dark:text-purple-300'
+                      : 'text-gray-600 dark:text-gray-400'
+                  }`}>
+                    Clusters
+                  </div>
+                  <div className={`text-base font-semibold ${
+                    progress.clustersCount > 0
+                      ? 'text-purple-600 dark:text-purple-400'
+                      : 'text-gray-500 dark:text-gray-500'
+                  }`}>
+                    {progress.clustersCount}
+                  </div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    Keywords grouped into clusters
+                  </div>
+                </div>
+                <div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
+                  <ArrowRightIcon className={`w-8 h-8 ${
+                    progress.clustersCount > 0 ? 'text-purple-500' : 'text-gray-300'
+                  }`} />
+                </div>
+              </Link>
+
+              {/* Ideas/Outlines */}
+              <Link
+                to="/planner/ideas"
+                className={`flex flex-col items-center gap-3 group relative ${
+                  progress.ideasCount > 0 ? 'opacity-100' : 'opacity-60'
+                }`}
+              >
+                <div className="relative w-24 h-24">
+                  {/* Circular Progress Ring */}
+                  <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
+                    <circle
+                      cx="50"
+                      cy="50"
+                      r="45"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="8"
+                      className="text-gray-200 dark:text-gray-700"
+                    />
+                    <circle
+                      cx="50"
+                      cy="50"
+                      r="45"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="8"
+                      strokeDasharray={`${2 * Math.PI * 45}`}
+                      strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.ideasCount > 0 ? 1 : 0))}`}
+                      strokeLinecap="round"
+                      className="text-orange-500 transition-all duration-500"
+                    />
+                  </svg>
+                  {/* Icon in Center */}
+                  <div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
+                    progress.ideasCount > 0
+                      ? 'bg-orange-500 text-white shadow-lg scale-110'
+                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
+                  }`}>
+                    {progress.ideasCount > 0 ? (
+                      <CheckCircleIcon className="w-10 h-10" />
+                    ) : (
+                      <BoltIcon className="w-10 h-10" />
+                    )}
+                  </div>
+                </div>
+                <div className="text-center max-w-[100px]">
+                  <div className={`text-sm font-bold mb-1 ${
+                    progress.ideasCount > 0
+                      ? 'text-orange-700 dark:text-orange-300'
+                      : 'text-gray-600 dark:text-gray-400'
+                  }`}>
+                    Ideas
+                  </div>
+                  <div className={`text-base font-semibold ${
+                    progress.ideasCount > 0
+                      ? 'text-orange-600 dark:text-orange-400'
+                      : 'text-gray-500 dark:text-gray-500'
+                  }`}>
+                    {progress.ideasCount}
+                  </div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    Content ideas and outlines
+                  </div>
+                </div>
+                <div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
+                  <ArrowRightIcon className={`w-8 h-8 ${
+                    progress.ideasCount > 0 ? 'text-orange-500' : 'text-gray-300'
+                  }`} />
+                </div>
+              </Link>
+
+              {/* Content + Images */}
+              <Link
+                to="/writer/content"
+                className={`flex flex-col items-center gap-3 group relative ${
+                  progress.contentCount > 0 ? 'opacity-100' : 'opacity-60'
+                }`}
+              >
+                <div className="relative w-24 h-24">
+                  {/* Circular Progress Ring */}
+                  <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
+                    <circle
+                      cx="50"
+                      cy="50"
+                      r="45"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="8"
+                      className="text-gray-200 dark:text-gray-700"
+                    />
+                    <circle
+                      cx="50"
+                      cy="50"
+                      r="45"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="8"
+                      strokeDasharray={`${2 * Math.PI * 45}`}
+                      strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.contentCount > 0 ? 1 : 0))}`}
+                      strokeLinecap="round"
+                      className="text-green-500 transition-all duration-500"
+                    />
+                  </svg>
+                  {/* Icon in Center */}
+                  <div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
+                    progress.contentCount > 0
+                      ? 'bg-green-500 text-white shadow-lg scale-110'
+                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
+                  }`}>
+                    {progress.contentCount > 0 ? (
+                      <CheckCircleIcon className="w-10 h-10" />
+                    ) : (
+                      <FileTextIcon className="w-10 h-10" />
+                    )}
+                  </div>
+                </div>
+                <div className="text-center max-w-[100px]">
+                  <div className={`text-sm font-bold mb-1 ${
+                    progress.contentCount > 0
+                      ? 'text-green-700 dark:text-green-300'
+                      : 'text-gray-600 dark:text-gray-400'
+                  }`}>
+                    Content
+                  </div>
+                  <div className={`text-base font-semibold ${
+                    progress.contentCount > 0
+                      ? 'text-green-600 dark:text-green-400'
+                      : 'text-gray-500 dark:text-gray-500'
+                  }`}>
+                    {progress.contentCount}
+                  </div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    Content pieces + images created
+                  </div>
+                </div>
+                <div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
+                  <ArrowRightIcon className={`w-8 h-8 ${
+                    progress.contentCount > 0 ? 'text-green-500' : 'text-gray-300'
+                  }`} />
+                </div>
+              </Link>
+
+              {/* Publish Status */}
+              <Link
+                to="/writer/published"
+                className={`flex flex-col items-center gap-3 group relative ${
+                  progress.publishedCount > 0 ? 'opacity-100' : 'opacity-60'
+                }`}
+              >
+                <div className="relative w-24 h-24">
+                  {/* Circular Progress Ring */}
+                  <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
+                    <circle
+                      cx="50"
+                      cy="50"
+                      r="45"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="8"
+                      className="text-gray-200 dark:text-gray-700"
+                    />
+                    <circle
+                      cx="50"
+                      cy="50"
+                      r="45"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="8"
+                      strokeDasharray={`${2 * Math.PI * 45}`}
+                      strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.publishedCount > 0 ? 1 : 0))}`}
+                      strokeLinecap="round"
+                      className="text-indigo-500 transition-all duration-500"
+                    />
+                  </svg>
+                  {/* Icon in Center */}
+                  <div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
+                    progress.publishedCount > 0
+                      ? 'bg-indigo-500 text-white shadow-lg scale-110'
+                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
+                  }`}>
+                    {progress.publishedCount > 0 ? (
+                      <CheckCircleIcon className="w-10 h-10" />
+                    ) : (
+                      <PaperPlaneIcon className="w-10 h-10" />
+                    )}
+                  </div>
+                </div>
+                <div className="text-center max-w-[100px]">
+                  <div className={`text-sm font-bold mb-1 ${
+                    progress.publishedCount > 0
+                      ? 'text-indigo-700 dark:text-indigo-300'
+                      : 'text-gray-600 dark:text-gray-400'
+                  }`}>
+                    Published
+                  </div>
+                  <div className={`text-base font-semibold ${
+                    progress.publishedCount > 0
+                      ? 'text-indigo-600 dark:text-indigo-400'
+                      : 'text-gray-500 dark:text-gray-500'
+                  }`}>
+                    {progress.publishedCount}
+                  </div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    Content published to site
+                  </div>
+                </div>
+              </Link>
+            </div>
+          </div>
+        </ComponentCard>
+
+ {/* Quick Actions - Below Welcome Screen */}
+ <ComponentCard title="Quick Actions" desc="Common tasks and shortcuts" className="mb-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+          <Link
+            to="/planner/keyword-opportunities"
+            className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-blue-500 hover:shadow-md transition group"
+          >
+            <div className="size-12 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white">
+              <ListIcon className="h-6 w-6" />
+            </div>
+            <div className="flex-1">
+              <h4 className="font-semibold text-slate-900">Keyword Research</h4>
+              <p className="text-xs text-slate-600">Discover opportunities</p>
+            </div>
+            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-blue-500 transition" />
+          </Link>
+
+          <Link
+            to="/planner/clusters"
+            className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-purple-500 hover:shadow-md transition group"
+          >
+            <div className="size-12 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center text-white">
+              <GroupIcon className="h-6 w-6" />
+            </div>
+            <div className="flex-1">
+              <h4 className="font-semibold text-slate-900">Clustering & Ideas</h4>
+              <p className="text-xs text-slate-600">Organize strategy</p>
+            </div>
+            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-purple-500 transition" />
+          </Link>
+
+          <Link
+            to="/writer/content"
+            className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-green-500 hover:shadow-md transition group"
+          >
+            <div className="size-12 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center text-white">
+              <PencilIcon className="h-6 w-6" />
+            </div>
+            <div className="flex-1">
+              <h4 className="font-semibold text-slate-900">Content Generation</h4>
+              <p className="text-xs text-slate-600">Create content</p>
+            </div>
+            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-green-500 transition" />
+          </Link>
+
+          <Link
+            to="/linker/content"
+            className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-indigo-500 hover:shadow-md transition group"
+          >
+            <div className="size-12 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center text-white">
+              <PlugInIcon className="h-6 w-6" />
+            </div>
+            <div className="flex-1">
+              <h4 className="font-semibold text-slate-900">Internal Linking</h4>
+              <p className="text-xs text-slate-600">Link content</p>
+            </div>
+            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-indigo-500 transition" />
+          </Link>
+
+          <Link
+            to="/optimizer/content"
+            className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-orange-500 hover:shadow-md transition group"
+          >
+            <div className="size-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center text-white">
+              <BoltIcon className="h-6 w-6" />
+            </div>
+            <div className="flex-1">
+              <h4 className="font-semibold text-slate-900">Content Optimization</h4>
+              <p className="text-xs text-slate-600">Optimize content</p>
+            </div>
+            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-orange-500 transition" />
+          </Link>
+        </div>
+      </ComponentCard>
+      
         {/* Key Metrics */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
           <EnhancedMetricCard
@@ -413,189 +1227,233 @@ export default function Home() {
           />
         </div>
 
-        {/* App Modules */}
-        <ComponentCard title="Platform Modules" desc="Access all IGNY8 modules and features">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {appModules.map((module) => {
-              const Icon = module.icon;
-              return (
-                <Link
-                  key={module.title}
-                  to={module.path}
-                  className="rounded-2xl border-2 border-slate-200 bg-white p-6 hover:shadow-xl hover:-translate-y-1 transition-all group"
-                >
-                  <div className="flex items-start justify-between mb-4">
-                    <div className={`inline-flex size-14 rounded-xl bg-gradient-to-br ${module.color} items-center justify-center text-white shadow-lg`}>
-                      <Icon className="h-7 w-7" />
-                    </div>
-                    {module.status === "coming-soon" && (
-                      <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-slate-100 text-slate-600">
-                        Soon
-                      </span>
-                    )}
-                  </div>
-                  <h3 className="text-lg font-bold text-slate-900 mb-2">{module.title}</h3>
-                  <p className="text-sm text-slate-600 mb-4">{module.description}</p>
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <div className="text-2xl font-bold text-slate-900">{module.count}</div>
-                      <div className="text-xs text-slate-500">{module.metric}</div>
-                    </div>
-                    <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] group-hover:translate-x-1 transition" />
-                  </div>
-                </Link>
-              );
-            })}
-          </div>
-        </ComponentCard>
-
-        {/* Activity Chart & Recent Activity */}
+        {/* Credit Balance & Usage - Improved Design */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <ComponentCard title="Activity Overview" desc="Content creation trends over the past week">
-            <Suspense fallback={<div className="h-[300px] flex items-center justify-center">Loading chart...</div>}>
-              <Chart options={chartOptions} series={chartSeries} type="area" height={300} />
-            </Suspense>
-          </ComponentCard>
-
-          <ComponentCard title="Recent Activity" desc="Latest actions across your workflow">
-            <div className="space-y-4">
-              {recentActivity.map((activity) => {
-                const Icon = activity.icon;
-                return (
-                  <div
-                    key={activity.id}
-                    className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:shadow-md transition"
-                  >
-                    <div className={`size-10 rounded-lg bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center ${activity.color}`}>
-                      <Icon className="h-5 w-5" />
-                    </div>
-                    <div className="flex-1">
-                      <div className="flex items-center justify-between mb-1">
-                        <h4 className="font-semibold text-slate-900">{activity.type}</h4>
-                        <span className="text-xs text-slate-500">{formatTimeAgo(activity.timestamp)}</span>
-                      </div>
-                      <p className="text-sm text-slate-600">{activity.description}</p>
-                    </div>
+          <ComponentCard title="Credit Balance" desc="Current credit status and usage">
+            <div className="space-y-6">
+              <div className="text-center py-4">
+                <div className="text-4xl font-bold text-brand-600 dark:text-brand-400 mb-2">
+                  {user?.account?.credits?.toLocaleString() || '0'}
+                </div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">Current Credits</div>
+              </div>
+              
+              <div className="space-y-4">
+                <div>
+                  <div className="flex justify-between items-center mb-2">
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Used This Month</span>
+                    <span className="text-sm font-semibold">
+                      {user?.account?.credits ? '547' : '0'} / {user?.account?.credits ? '1000' : '0'}
+                    </span>
                   </div>
-                );
-              })}
+                  <div className="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700">
+                    <div
+                      className="bg-brand-500 h-3 rounded-full transition-all"
+                      style={{ width: `${user?.account?.credits ? 54.7 : 0}%` }}
+                    />
+                  </div>
+                </div>
+                
+                <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Remaining</span>
+                    <span className="text-lg font-bold text-green-600 dark:text-green-400">
+                      {user?.account?.credits?.toLocaleString() || '0'}
+                    </span>
+                  </div>
+                </div>
+              </div>
             </div>
           </ComponentCard>
-        </div>
-
-        {/* Workflow Pipeline */}
-        <ComponentCard title="How It Works" desc="Your complete content creation workflow">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-7 gap-4">
-            {workflowSteps.map((step, index) => (
-              <Link
-                key={step.id}
-                to={step.path}
-                className="group"
-              >
-                <Card className="p-6 hover:shadow-lg transition-all duration-200 border-2 hover:border-brand-500 dark:hover:border-brand-400 h-full">
-                  <div className="flex flex-col items-center text-center">
-                    <div className={`w-16 h-16 rounded-xl bg-gradient-to-br ${
-                      step.color === "blue" ? "from-blue-500 to-blue-600" :
-                      step.color === "purple" ? "from-purple-500 to-purple-600" :
-                      step.color === "orange" ? "from-orange-500 to-orange-600" :
-                      step.color === "indigo" ? "from-indigo-500 to-indigo-600" :
-                      step.color === "green" ? "from-green-500 to-green-600" :
-                      step.color === "pink" ? "from-pink-500 to-pink-600" :
-                      "from-green-500 to-green-600"
-                    } flex items-center justify-center mb-4 group-hover:scale-110 transition-transform text-white`}>
-                      <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
-                        {React.cloneElement(step.icon as React.ReactElement, { 
-                          className: 'w-8 h-8 flex-shrink-0 text-white' 
-                        })}
-                      </div>
-                    </div>
-                    <div className="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-1">
-                      Step {step.id}
-                    </div>
-                    <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">
-                      {step.title}
-                    </h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                      {step.description}
-                    </p>
-                  </div>
-                </Card>
-              </Link>
-            ))}
-          </div>
-        </ComponentCard>
-
-        {/* Quick Actions */}
-        <ComponentCard title="Quick Actions" desc="Common tasks and shortcuts">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            <Link
-              to="/planner/keyword-opportunities"
-              className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[var(--color-primary)] hover:shadow-md transition group"
-            >
-              <div className="size-12 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white">
-                <ListIcon className="h-6 w-6" />
-              </div>
-              <div className="flex-1">
-                <h4 className="font-semibold text-slate-900">Add Keywords</h4>
-                <p className="text-xs text-slate-600">Discover new opportunities</p>
-              </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] transition" />
-            </Link>
-
-            <Link
-              to="/writer/tasks"
-              className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-md transition group"
-            >
-              <div className="size-12 rounded-lg bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white">
-                <FileTextIcon className="h-6 w-6" />
-              </div>
-              <div className="flex-1">
-                <h4 className="font-semibold text-slate-900">Create Content</h4>
-                <p className="text-xs text-slate-600">Generate new content</p>
-              </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0bbf87] transition" />
-            </Link>
-
-            <Link
-              to="/automation"
-              className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-md transition group"
-            >
-              <div className="size-12 rounded-lg bg-gradient-to-br from-[var(--color-purple)] to-[var(--color-purple-dark)] flex items-center justify-center text-white">
-                <PlugInIcon className="h-6 w-6" />
-              </div>
-              <div className="flex-1">
-                <h4 className="font-semibold text-slate-900">Setup Automation</h4>
-                <p className="text-xs text-slate-600">Configure workflows</p>
-              </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#5d4ae3] transition" />
-            </Link>
-
-            <Link
-              to="/thinker/prompts"
-              className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-md transition group"
-            >
-              <div className="size-12 rounded-lg bg-gradient-to-br from-[var(--color-warning)] to-[var(--color-warning-dark)] flex items-center justify-center text-white">
-                <BoltIcon className="h-6 w-6" />
-              </div>
-              <div className="flex-1">
-                <h4 className="font-semibold text-slate-900">Manage Prompts</h4>
-                <p className="text-xs text-slate-600">Edit AI instructions</p>
-              </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#ff7a00] transition" />
-            </Link>
-          </div>
-        </ComponentCard>
-
-        {/* Credit Balance & Usage */}
-        <div className="grid grid-cols-12 gap-6">
-          <div className="col-span-12 xl:col-span-4">
-            <CreditBalanceWidget />
-          </div>
           
-          <div className="col-span-12 xl:col-span-8">
-            <UsageChartWidget />
+          <ComponentCard title="Usage Summary" desc="Credit usage breakdown by operation and model">
+            <div className="space-y-6">
+              <div className="flex justify-end items-center mb-4">
+                <select
+                  className="h-9 rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm shadow-theme-xs text-gray-800 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
+                  defaultValue="month"
+                >
+                  <option value="week">Last 7 Days</option>
+                  <option value="month">This Month</option>
+                  <option value="year">This Year</option>
+                </select>
+              </div>
+              
+              <div className="grid grid-cols-2 gap-6">
+                <div className="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                  <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Credits Used</div>
+                  <div className="text-3xl font-bold text-gray-900 dark:text-white">547</div>
+                </div>
+                <div className="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                  <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Cost</div>
+                  <div className="text-3xl font-bold text-gray-900 dark:text-white">$0.34</div>
+                </div>
+              </div>
+              
+              <div>
+                <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">By Operation</h4>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300 capitalize">Clustering</span>
+                    <div className="text-right">
+                      <div className="text-sm font-bold text-gray-900 dark:text-white">97 credits</div>
+                      <div className="text-xs text-gray-500 dark:text-gray-400">$0.33</div>
+                    </div>
+                  </div>
+                  <div className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300 capitalize">Content Generation</span>
+                    <div className="text-right">
+                      <div className="text-sm font-bold text-gray-900 dark:text-white">450 credits</div>
+                      <div className="text-xs text-gray-500 dark:text-gray-400">$0.01</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ComponentCard>
+        </div>              
+
+        {/* Workflow Modules Guide - 2 Columns */}
+        <ComponentCard title="Workflow Modules" desc="Explore each module to understand your content creation workflow">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Keyword Research */}
+            <div className="rounded-xl p-4 border-b-2 border-blue-500 bg-blue-50 dark:border-blue-500/30 dark:bg-blue-500/15">
+              <div className="flex items-start gap-3">
+                <div className="size-12 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white flex-shrink-0">
+                  <ListIcon className="h-6 w-6" />
+                </div>
+                <div className="flex-1">
+                  <h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
+                    Keyword Research
+                  </h4>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Discover high-value keywords from opportunities. Analyze search volume, difficulty, and intent to identify the best keywords for your content strategy. Add keywords to your site to start building your content foundation.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Clustering & Ideas */}
+            <div className="rounded-xl p-4 border-b-2 border-purple-500 bg-purple-50 dark:border-purple-500/30 dark:bg-purple-500/15">
+              <div className="flex items-start gap-3">
+                <div className="size-12 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center text-white flex-shrink-0">
+                  <GroupIcon className="h-6 w-6" />
+                </div>
+                <div className="flex-1">
+                  <h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
+                    Clustering & Ideas
+                  </h4>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Organize keywords into thematic clusters to create content groups. Generate content ideas and outlines based on your clusters. This helps you plan a comprehensive content strategy that covers all important topics.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Content Generation */}
+            <div className="rounded-xl p-4 border-b-2 border-green-500 bg-green-50 dark:border-green-500/30 dark:bg-green-500/15">
+              <div className="flex items-start gap-3">
+                <div className="size-12 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center text-white flex-shrink-0">
+                  <PencilIcon className="h-6 w-6" />
+                </div>
+                <div className="flex-1">
+                  <h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
+                    Content Generation
+                  </h4>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Create high-quality, SEO-optimized content using AI. Generate articles, blog posts, and other content pieces based on your ideas and outlines. Each piece is crafted to match your brand voice and target keywords.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Internal Linking */}
+            <div className="rounded-xl p-4 border-b-2 border-indigo-500 bg-indigo-50 dark:border-indigo-500/30 dark:bg-indigo-500/15">
+              <div className="flex items-start gap-3">
+                <div className="size-12 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center text-white flex-shrink-0">
+                  <PlugInIcon className="h-6 w-6" />
+                </div>
+                <div className="flex-1">
+                  <h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
+                    Internal Linking
+                  </h4>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Automatically identify and create strategic internal links between your content pieces. Improve SEO by connecting related articles, enhancing user navigation, and distributing page authority throughout your site.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Content Optimization */}
+            <div className="rounded-xl p-4 border-b-2 border-orange-500 bg-orange-50 dark:border-orange-500/30 dark:bg-orange-500/15">
+              <div className="flex items-start gap-3">
+                <div className="size-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center text-white flex-shrink-0">
+                  <BoltIcon className="h-6 w-6" />
+                </div>
+                <div className="flex-1">
+                  <h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
+                    Content Optimization
+                  </h4>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Analyze and optimize your existing content for better SEO performance. Get recommendations for improving readability, keyword density, meta tags, and overall content quality to boost search rankings.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Image Generation */}
+            <div className="rounded-xl p-4 border-b-2 border-pink-500 bg-pink-50 dark:border-pink-500/30 dark:bg-pink-500/15">
+              <div className="flex items-start gap-3">
+                <div className="size-12 rounded-lg bg-gradient-to-br from-pink-500 to-pink-600 flex items-center justify-center text-white flex-shrink-0">
+                  <FileIcon className="h-6 w-6" />
+                </div>
+                <div className="flex-1">
+                  <h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
+                    Image Generation
+                  </h4>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Generate custom images for your content using AI. Create relevant, high-quality images that match your content theme and brand style. Images are automatically optimized and can be added directly to your content pieces.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Automation */}
+            <div className="rounded-xl p-4 border-b-2 border-teal-500 bg-teal-50 dark:border-teal-500/30 dark:bg-teal-500/15">
+              <div className="flex items-start gap-3">
+                <div className="size-12 rounded-lg bg-gradient-to-br from-teal-500 to-teal-600 flex items-center justify-center text-white flex-shrink-0">
+                  <BoltIcon className="h-6 w-6" />
+                </div>
+                <div className="flex-1">
+                  <h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
+                    Automation
+                  </h4>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Set up automated workflows to streamline your content creation process. Schedule content generation, automatic publishing, keyword monitoring, and other tasks to save time and maintain consistency.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Prompts */}
+            <div className="rounded-xl p-4 border-b-2 border-cyan-500 bg-cyan-50 dark:border-cyan-500/30 dark:bg-cyan-500/15">
+              <div className="flex items-start gap-3">
+                <div className="size-12 rounded-lg bg-gradient-to-br from-cyan-500 to-cyan-600 flex items-center justify-center text-white flex-shrink-0">
+                  <FileTextIcon className="h-6 w-6" />
+                </div>
+                <div className="flex-1">
+                  <h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
+                    Prompts
+                  </h4>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Create and manage custom AI prompts to guide content generation. Customize prompts for different content types, industries, and writing styles. Save and reuse your best prompts for consistent, high-quality output.
+                  </p>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
+        </ComponentCard>
+
       </div>
     </>
   );