diff --git a/backend/app/api/routes/profiles.py b/backend/app/api/routes/profiles.py
new file mode 100644
index 0000000..3aa4142
--- /dev/null
+++ b/backend/app/api/routes/profiles.py
@@ -0,0 +1,633 @@
+"""
+Profile management routes for brands and creators
+"""
+
+import httpx
+import json
+from fastapi import APIRouter, HTTPException, Depends
+from pydantic import BaseModel
+from typing import Optional, Dict, Any
+from app.core.supabase_clients import supabase_anon
+from app.core.dependencies import get_current_user, get_current_brand, get_current_creator
+from app.core.config import settings
+
+router = APIRouter()
+GEMINI_API_KEY = settings.gemini_api_key
+GEMINI_API_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent"
+
+
+class ProfileUpdateRequest(BaseModel):
+    """Generic profile update request - accepts any fields"""
+    data: Dict[str, Any]
+
+
+def calculate_brand_completion_percentage(brand: dict) -> int:
+    """Calculate profile completion percentage for a brand"""
+    required_fields = [
+        'company_name', 'industry', 'website_url', 'company_description',
+        'company_logo_url', 'contact_email', 'contact_phone'
+    ]
+
+    important_fields = [
+        'company_tagline', 'headquarters_location', 'company_size',
+        'target_audience_description', 'brand_values', 'brand_personality',
+        'marketing_goals', 'preferred_platforms', 'monthly_marketing_budget'
+    ]
+
+    nice_to_have_fields = [
+        'company_cover_image_url', 'social_media_links', 'founded_year',
+        'brand_voice', 'campaign_types_interested', 'preferred_content_types'
+    ]
+
+    completed = 0
+    total = len(required_fields) + len(important_fields) + len(nice_to_have_fields)
+
+    # Required fields (weight: 3x)
+    for field in required_fields:
+        if brand.get(field):
+            completed += 3
+
+    # Important fields (weight: 2x)
+    for field in important_fields:
+        if brand.get(field):
+            completed += 2
+
+    # Nice to have fields (weight: 1x)
+    for field in nice_to_have_fields:
+        if brand.get(field):
+            completed += 1
+
+    # Calculate percentage
+    max_score = len(required_fields) * 3 + len(important_fields) * 2 + len(nice_to_have_fields)
+    percentage = int((completed / max_score) * 100) if max_score > 0 else 0
+    return min(100, max(0, percentage))
+
+
+def calculate_creator_completion_percentage(creator: dict) -> int:
+    """Calculate profile completion percentage for a creator"""
+    required_fields = [
+        'display_name', 'primary_niche', 'profile_picture_url', 'bio'
+    ]
+
+    important_fields = [
+        'tagline', 'website_url', 'instagram_handle', 'youtube_handle',
+        'content_types', 'collaboration_types', 'rate_per_post',
+        'years_of_experience', 'posting_frequency'
+    ]
+
+    nice_to_have_fields = [
+        'cover_image_url', 'secondary_niches', 'content_language',
+        'portfolio_links', 'media_kit_url', 'equipment_quality',
+        'editing_software', 'preferred_payment_terms'
+    ]
+
+    completed = 0
+    total = len(required_fields) + len(important_fields) + len(nice_to_have_fields)
+
+    # Required fields (weight: 3x)
+    for field in required_fields:
+        if creator.get(field):
+            completed += 3
+
+    # Important fields (weight: 2x)
+    for field in important_fields:
+        if creator.get(field):
+            completed += 2
+
+    # Nice to have fields (weight: 1x)
+    for field in nice_to_have_fields:
+        if creator.get(field):
+            completed += 1
+
+    # Calculate percentage
+    max_score = len(required_fields) * 3 + len(important_fields) * 2 + len(nice_to_have_fields)
+    percentage = int((completed / max_score) * 100) if max_score > 0 else 0
+    return min(100, max(0, percentage))
+
+
+@router.get("/brand/profile")
+async def get_brand_profile(
+    brand: dict = Depends(get_current_brand)
+):
+    """Get the current brand's profile"""
+    try:
+        # Calculate completion percentage
+        completion = calculate_brand_completion_percentage(brand)
+
+        # Update completion percentage in database if different
+        if brand.get('profile_completion_percentage') != completion:
+            supabase_anon.table('brands') \
+                .update({'profile_completion_percentage': completion}) \
+                .eq('id', brand['id']) \
+                .execute()
+            brand['profile_completion_percentage'] = completion
+
+        return brand
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Error fetching brand profile: {str(e)}"
+        ) from e
+
+
+@router.put("/brand/profile")
+async def update_brand_profile(
+    update_request: ProfileUpdateRequest,
+    brand: dict = Depends(get_current_brand)
+):
+    """Update the current brand's profile"""
+    try:
+        update_data = update_request.data
+
+        # Remove fields that shouldn't be updated directly
+        restricted_fields = ['id', 'user_id', 'created_at', 'is_active']
+        for field in restricted_fields:
+            update_data.pop(field, None)
+
+        # Add updated_at timestamp
+        from datetime import datetime
+        update_data['updated_at'] = datetime.utcnow().isoformat()
+
+        # Update in database
+        response = supabase_anon.table('brands') \
+            .update(update_data) \
+            .eq('id', brand['id']) \
+            .execute()
+
+        if not response.data:
+            raise HTTPException(
+                status_code=404,
+                detail="Brand profile not found"
+            )
+
+        updated_brand = response.data[0] if response.data else brand
+
+        # Recalculate completion percentage
+        completion = calculate_brand_completion_percentage(updated_brand)
+
+        # Update completion percentage
+        if updated_brand.get('profile_completion_percentage') != completion:
+            supabase_anon.table('brands') \
+                .update({'profile_completion_percentage': completion}) \
+                .eq('id', brand['id']) \
+                .execute()
+            updated_brand['profile_completion_percentage'] = completion
+
+        return updated_brand
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Error updating brand profile: {str(e)}"
+        ) from e
+
+
+@router.get("/creator/profile")
+async def get_creator_profile(
+    creator: dict = Depends(get_current_creator)
+):
+    """Get the current creator's profile"""
+    try:
+        # Calculate completion percentage
+        completion = calculate_creator_completion_percentage(creator)
+
+        # Update completion percentage in database if different
+        if creator.get('profile_completion_percentage') != completion:
+            supabase_anon.table('creators') \
+                .update({'profile_completion_percentage': completion}) \
+                .eq('id', creator['id']) \
+                .execute()
+            creator['profile_completion_percentage'] = completion
+
+        return creator
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Error fetching creator profile: {str(e)}"
+        ) from e
+
+
+@router.put("/creator/profile")
+async def update_creator_profile(
+    update_request: ProfileUpdateRequest,
+    creator: dict = Depends(get_current_creator)
+):
+    """Update the current creator's profile"""
+    try:
+        update_data = update_request.data
+
+        # Remove fields that shouldn't be updated directly
+        restricted_fields = ['id', 'user_id', 'created_at', 'is_active']
+        for field in restricted_fields:
+            update_data.pop(field, None)
+
+        # Add updated_at timestamp
+        from datetime import datetime
+        update_data['updated_at'] = datetime.utcnow().isoformat()
+
+        # Update in database
+        response = supabase_anon.table('creators') \
+            .update(update_data) \
+            .eq('id', creator['id']) \
+            .execute()
+
+        if not response.data:
+            raise HTTPException(
+                status_code=404,
+                detail="Creator profile not found"
+            )
+
+        updated_creator = response.data[0] if response.data else creator
+
+        # Recalculate completion percentage
+        completion = calculate_creator_completion_percentage(updated_creator)
+
+        # Update completion percentage
+        if updated_creator.get('profile_completion_percentage') != completion:
+            supabase_anon.table('creators') \
+                .update({'profile_completion_percentage': completion}) \
+                .eq('id', creator['id']) \
+                .execute()
+            updated_creator['profile_completion_percentage'] = completion
+
+        return updated_creator
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Error updating creator profile: {str(e)}"
+        ) from e
+
+
+class AIFillRequest(BaseModel):
+    """Request for AI profile filling"""
+    user_input: str
+    context: Optional[Dict[str, Any]] = None
+
+
+@router.post("/brand/profile/ai-fill")
+async def ai_fill_brand_profile(
+    request: AIFillRequest,
+    brand: dict = Depends(get_current_brand)
+):
+    """Use AI to fill brand profile based on user input"""
+    if not GEMINI_API_KEY:
+        raise HTTPException(
+            status_code=500,
+            detail="Gemini API is not configured"
+        )
+
+    try:
+        # Build prompt for Gemini
+        prompt = f"""You are an expert at extracting structured data from natural language. Your task is to analyze user input and extract ALL relevant brand profile information.
+
+Current brand profile (for context - only fill fields that are empty or null):
+{json.dumps(brand, indent=2, default=str)}
+
+User provided information:
+{request.user_input}
+
+Extract and return a JSON object with ALL fields that can be confidently determined from the user input. Use these exact field names and data types:
+
+STRING fields:
+- company_name, company_tagline, company_description, company_logo_url, company_cover_image_url
+- industry, company_size, headquarters_location, company_type, website_url
+- contact_email, contact_phone, campaign_frequency, payment_terms
+- target_audience_description, brand_voice, product_price_range, product_catalog_url
+
+NUMBER fields (use numbers, not strings):
+- founded_year (integer), monthly_marketing_budget (numeric), influencer_budget_percentage (float 0-100)
+- budget_per_campaign_min (numeric), budget_per_campaign_max (numeric), typical_deal_size (numeric)
+- affiliate_commission_rate (float 0-100), minimum_followers_required (integer)
+- minimum_engagement_rate (float 0-100), exclusivity_duration_months (integer)
+- past_campaigns_count (integer), average_campaign_roi (float)
+- total_deals_posted (integer), total_deals_completed (integer), total_spent (numeric)
+- average_deal_rating (float), matching_score_base (float)
+
+BOOLEAN fields (use true/false):
+- offers_product_only_deals, offers_affiliate_programs, exclusivity_required
+- seasonal_products, business_verified, payment_verified, tax_id_verified
+- is_active, is_featured, is_verified_brand
+
+ARRAY fields (use JSON arrays of strings):
+- sub_industry, target_audience_age_groups, target_audience_gender, target_audience_locations
+- target_audience_interests, target_audience_income_level, brand_values, brand_personality
+- marketing_goals, campaign_types_interested, preferred_content_types, preferred_platforms
+- preferred_creator_niches, preferred_creator_size, preferred_creator_locations
+- content_dos, content_donts, brand_safety_requirements, competitor_brands
+- successful_partnerships, products_services, product_categories, search_keywords
+
+JSON OBJECT fields (use proper JSON objects):
+- social_media_links: {{"platform": "url", ...}}
+- brand_colors: {{"primary": "#hex", "secondary": "#hex", ...}}
+
+IMPORTANT RULES:
+1. Extract ALL fields that can be inferred from the input, not just obvious ones
+2. For arrays, extract multiple values if mentioned (e.g., "tech and finance" → ["tech", "finance"])
+3. For numbers, extract numeric values (e.g., "$50,000" → 50000, "5%" → 5.0)
+4. For booleans, infer from context (e.g., "we offer affiliate programs" → true)
+5. Only include fields that have clear values - omit uncertain fields
+6. Return ONLY valid JSON, no markdown, no explanations
+
+Return the JSON object now:"""
+
+        payload = {
+            "contents": [
+                {
+                    "role": "user",
+                    "parts": [{"text": prompt}]
+                }
+            ],
+            "generationConfig": {
+                "temperature": 0.1,
+                "topK": 40,
+                "topP": 0.95,
+                "maxOutputTokens": 8192,
+                "responseMimeType": "application/json"
+            }
+        }
+        headers = {"Content-Type": "application/json"}
+        params = {"key": GEMINI_API_KEY}
+
+        async with httpx.AsyncClient(timeout=60.0) as client:
+            response = await client.post(
+                GEMINI_API_URL,
+                json=payload,
+                headers=headers,
+                params=params
+            )
+            response.raise_for_status()
+            result = response.json()
+
+        # Extract text from Gemini response
+        text_content = ""
+        if result.get("candidates") and len(result["candidates"]) > 0:
+            parts = result["candidates"][0].get("content", {}).get("parts", [])
+            if parts:
+                # Check if response is already JSON (when responseMimeType is set)
+                if "text" in parts[0]:
+                    text_content = parts[0].get("text", "")
+                else:
+                    # Fallback for other response formats
+                    text_content = json.dumps(parts[0])
+
+        # Parse JSON from response
+        try:
+            # Remove markdown code blocks if present
+            if text_content.startswith("```"):
+                # Find the closing ```
+                parts = text_content.split("```")
+                if len(parts) >= 3:
+                    text_content = parts[1]
+                    if text_content.startswith("json"):
+                        text_content = text_content[4:]
+                else:
+                    text_content = text_content[3:]
+            text_content = text_content.strip()
+
+            # Try to find JSON object in the response
+            if not text_content.startswith("{"):
+                # Try to extract JSON from the text
+                start_idx = text_content.find("{")
+                end_idx = text_content.rfind("}")
+                if start_idx != -1 and end_idx != -1 and end_idx > start_idx:
+                    text_content = text_content[start_idx:end_idx+1]
+
+            extracted_data = json.loads(text_content)
+
+            # Merge with existing profile (don't overwrite existing non-null values)
+            update_data = {}
+            for key, value in extracted_data.items():
+                # Skip null, empty strings, and empty arrays/objects
+                if value is None:
+                    continue
+                if isinstance(value, str) and value.strip() == "":
+                    continue
+                if isinstance(value, list) and len(value) == 0:
+                    continue
+                if isinstance(value, dict) and len(value) == 0:
+                    continue
+
+                # Check if field exists and has a value in current profile
+                current_value = brand.get(key)
+                should_update = False
+
+                if current_value is None or current_value == "":
+                    should_update = True
+                elif isinstance(current_value, list) and len(current_value) == 0:
+                    should_update = True
+                elif isinstance(current_value, dict) and len(current_value) == 0:
+                    should_update = True
+                elif isinstance(current_value, bool) and not current_value and isinstance(value, bool) and value:
+                    # Allow updating false booleans to true
+                    should_update = True
+
+                if should_update:
+                    update_data[key] = value
+
+            if not update_data:
+                return {"message": "No new data could be extracted", "data": {}}
+
+            return {"message": f"Profile data extracted successfully. {len(update_data)} fields updated.", "data": update_data}
+        except json.JSONDecodeError as e:
+            raise HTTPException(
+                status_code=500,
+                detail=f"Failed to parse AI response as JSON: {str(e)}. Response: {text_content[:200]}"
+            )
+    except httpx.RequestError as e:
+        raise HTTPException(
+            status_code=502,
+            detail=f"Gemini API error: {str(e)}"
+        )
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Error generating profile data: {str(e)}"
+        ) from e
+
+
+@router.post("/creator/profile/ai-fill")
+async def ai_fill_creator_profile(
+    request: AIFillRequest,
+    creator: dict = Depends(get_current_creator)
+):
+    """Use AI to fill creator profile based on user input"""
+    if not GEMINI_API_KEY:
+        raise HTTPException(
+            status_code=500,
+            detail="Gemini API is not configured"
+        )
+
+    try:
+        # Build prompt for Gemini
+        prompt = f"""You are an expert at extracting structured data from natural language. Your task is to analyze user input and extract ALL relevant creator profile information.
+
+Current creator profile (for context - only fill fields that are empty or null):
+{json.dumps(creator, indent=2, default=str)}
+
+User provided information:
+{request.user_input}
+
+Extract and return a JSON object with ALL fields that can be confidently determined from the user input. Use these exact field names and data types:
+
+STRING fields:
+- display_name, tagline, bio, profile_picture_url, cover_image_url, website_url
+- youtube_url, youtube_handle, instagram_url, instagram_handle, tiktok_url, tiktok_handle
+- twitter_url, twitter_handle, twitch_url, twitch_handle, linkedin_url, facebook_url
+- audience_age_primary, posting_frequency, best_performing_content_type, equipment_quality
+- preferred_payment_terms, media_kit_url
+
+NUMBER fields (use numbers, not strings):
+- youtube_subscribers (integer), instagram_followers (integer), tiktok_followers (integer)
+- twitter_followers (integer), twitch_followers (integer)
+- total_followers (integer), total_reach (integer), average_views (integer)
+- engagement_rate (float 0-100), average_engagement_per_post (integer)
+- years_of_experience (integer), team_size (integer)
+- rate_per_post (numeric), rate_per_video (numeric), rate_per_story (numeric), rate_per_reel (numeric)
+- minimum_deal_value (numeric), matching_score_base (float)
+
+BOOLEAN fields (use true/false):
+- content_creation_full_time, rate_negotiable, accepts_product_only_deals
+- email_verified, phone_verified, identity_verified
+- is_active, is_featured, is_verified_creator
+
+ARRAY fields (use JSON arrays of strings):
+- secondary_niches, content_types, content_language, audience_age_secondary
+- audience_interests, editing_software, collaboration_types
+- preferred_brands_style, not_interested_in, portfolio_links
+- past_brand_collaborations, case_study_links, search_keywords
+
+JSON OBJECT fields (use proper JSON objects):
+- audience_gender_split: {{"male": 45, "female": 50, "other": 5}} (percentages)
+- audience_locations: {{"country": "percentage", ...}} or {{"city": "percentage", ...}}
+- peak_posting_times: {{"monday": ["09:00", "18:00"], ...}} or {{"day": "time", ...}}
+- social_platforms: {{"platform": {{"handle": "...", "followers": 12345}}, ...}}
+
+IMPORTANT RULES:
+1. Extract ALL fields that can be inferred from the input, not just obvious ones
+2. For arrays, extract multiple values if mentioned (e.g., "lifestyle and tech" → ["lifestyle", "tech"])
+3. For numbers, extract numeric values (e.g., "$500 per post" → 500, "5 years" → 5)
+4. For booleans, infer from context (e.g., "I do this full-time" → true)
+5. For social media, extract handles, URLs, and follower counts if mentioned
+6. For audience data, structure as JSON objects with appropriate keys
+7. Only include fields that have clear values - omit uncertain fields
+8. Return ONLY valid JSON, no markdown, no explanations
+
+Return the JSON object now:"""
+
+        payload = {
+            "contents": [
+                {
+                    "role": "user",
+                    "parts": [{"text": prompt}]
+                }
+            ],
+            "generationConfig": {
+                "temperature": 0.1,
+                "topK": 40,
+                "topP": 0.95,
+                "maxOutputTokens": 8192,
+                "responseMimeType": "application/json"
+            }
+        }
+        headers = {"Content-Type": "application/json"}
+        params = {"key": GEMINI_API_KEY}
+
+        async with httpx.AsyncClient(timeout=60.0) as client:
+            response = await client.post(
+                GEMINI_API_URL,
+                json=payload,
+                headers=headers,
+                params=params
+            )
+            response.raise_for_status()
+            result = response.json()
+
+        # Extract text from Gemini response
+        text_content = ""
+        if result.get("candidates") and len(result["candidates"]) > 0:
+            parts = result["candidates"][0].get("content", {}).get("parts", [])
+            if parts:
+                # Check if response is already JSON (when responseMimeType is set)
+                if "text" in parts[0]:
+                    text_content = parts[0].get("text", "")
+                else:
+                    # Fallback for other response formats
+                    text_content = json.dumps(parts[0])
+
+        # Parse JSON from response
+        try:
+            # Remove markdown code blocks if present
+            if text_content.startswith("```"):
+                # Find the closing ```
+                parts = text_content.split("```")
+                if len(parts) >= 3:
+                    text_content = parts[1]
+                    if text_content.startswith("json"):
+                        text_content = text_content[4:]
+                else:
+                    text_content = text_content[3:]
+            text_content = text_content.strip()
+
+            # Try to find JSON object in the response
+            if not text_content.startswith("{"):
+                # Try to extract JSON from the text
+                start_idx = text_content.find("{")
+                end_idx = text_content.rfind("}")
+                if start_idx != -1 and end_idx != -1 and end_idx > start_idx:
+                    text_content = text_content[start_idx:end_idx+1]
+
+            extracted_data = json.loads(text_content)
+
+            # Merge with existing profile (don't overwrite existing non-null values)
+            update_data = {}
+            for key, value in extracted_data.items():
+                # Skip null, empty strings, and empty arrays/objects
+                if value is None:
+                    continue
+                if isinstance(value, str) and value.strip() == "":
+                    continue
+                if isinstance(value, list) and len(value) == 0:
+                    continue
+                if isinstance(value, dict) and len(value) == 0:
+                    continue
+
+                # Check if field exists and has a value in current profile
+                current_value = creator.get(key)
+                should_update = False
+
+                if current_value is None or current_value == "":
+                    should_update = True
+                elif isinstance(current_value, list) and len(current_value) == 0:
+                    should_update = True
+                elif isinstance(current_value, dict) and len(current_value) == 0:
+                    should_update = True
+                elif isinstance(current_value, bool) and not current_value and isinstance(value, bool) and value:
+                    # Allow updating false booleans to true
+                    should_update = True
+
+                if should_update:
+                    update_data[key] = value
+
+            if not update_data:
+                return {"message": "No new data could be extracted", "data": {}}
+
+            return {"message": f"Profile data extracted successfully. {len(update_data)} fields updated.", "data": update_data}
+        except json.JSONDecodeError as e:
+            raise HTTPException(
+                status_code=500,
+                detail=f"Failed to parse AI response as JSON: {str(e)}. Response: {text_content[:200]}"
+            )
+    except httpx.RequestError as e:
+        raise HTTPException(
+            status_code=502,
+            detail=f"Gemini API error: {str(e)}"
+        )
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Error generating profile data: {str(e)}"
+        ) from e
+
diff --git a/backend/app/main.py b/backend/app/main.py
index 5e2f73f..64dd92d 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -11,6 +11,7 @@
 from app.api.routes import creators
 from app.api.routes import proposals
 from app.api.routes import analytics
+from app.api.routes import profiles
 app = FastAPI(title="Inpact Backend", version="0.1.0")
 
 # Verify Supabase client initialization on startup
@@ -42,6 +43,7 @@
 app.include_router(creators.router)
 app.include_router(proposals.router)
 app.include_router(analytics.router)
+app.include_router(profiles.router)
 
 @app.get("/")
 def root():
diff --git a/frontend/app/brand/home/page.tsx b/frontend/app/brand/home/page.tsx
index a6d4440..9085543 100644
--- a/frontend/app/brand/home/page.tsx
+++ b/frontend/app/brand/home/page.tsx
@@ -3,6 +3,7 @@
 import AuthGuard from "@/components/auth/AuthGuard";
 import SlidingMenu from "@/components/SlidingMenu";
 import BrandDashboard from "@/components/dashboard/BrandDashboard";
+import ProfileButton from "@/components/profile/ProfileButton";
 import { getUserProfile, signOut } from "@/lib/auth-helpers";
 import { Briefcase, Loader2, LogOut } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -47,18 +48,21 @@ export default function BrandHomePage() {
                 InPactAI
               </h1>
             </div>
-            <button
-              onClick={handleLogout}
-              disabled={isLoggingOut}
-              className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm text-gray-700 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-50"
-            >
-              {isLoggingOut ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <LogOut className="h-4 w-4" />
-              )}
-              {isLoggingOut ? "Logging out..." : "Logout"}
-            </button>
+            <div className="flex items-center gap-2">
+              <ProfileButton role="Brand" />
+              <button
+                onClick={handleLogout}
+                disabled={isLoggingOut}
+                className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm text-gray-700 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-50"
+              >
+                {isLoggingOut ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <LogOut className="h-4 w-4" />
+                )}
+                {isLoggingOut ? "Logging out..." : "Logout"}
+              </button>
+            </div>
           </div>
         </header>
 
diff --git a/frontend/app/brand/profile/page.tsx b/frontend/app/brand/profile/page.tsx
new file mode 100644
index 0000000..3e103e5
--- /dev/null
+++ b/frontend/app/brand/profile/page.tsx
@@ -0,0 +1,1314 @@
+"use client";
+
+import AuthGuard from "@/components/auth/AuthGuard";
+import ArrayInput from "@/components/profile/ArrayInput";
+import CollapsibleSection from "@/components/profile/CollapsibleSection";
+import JsonInput from "@/components/profile/JsonInput";
+import ProfileButton from "@/components/profile/ProfileButton";
+import SlidingMenu from "@/components/SlidingMenu";
+import {
+  aiFillBrandProfile,
+  BrandProfile,
+  getBrandProfile,
+  updateBrandProfile,
+} from "@/lib/api/profile";
+import { signOut } from "@/lib/auth-helpers";
+import {
+  ArrowLeft,
+  Briefcase,
+  Edit2,
+  Loader2,
+  LogOut,
+  Save,
+  Sparkles,
+  X,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export default function BrandProfilePage() {
+  const router = useRouter();
+  const [profile, setProfile] = useState<BrandProfile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [formData, setFormData] = useState<Partial<BrandProfile>>({});
+  const [aiLoading, setAiLoading] = useState(false);
+  const [aiInput, setAiInput] = useState("");
+  const [showAiModal, setShowAiModal] = useState(false);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  useEffect(() => {
+    loadProfile();
+  }, []);
+
+  const loadProfile = async () => {
+    try {
+      setLoading(true);
+      const data = await getBrandProfile();
+      setProfile(data);
+      setFormData(data);
+    } catch (error) {
+      console.error("Error loading profile:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      setSaving(true);
+      const updated = await updateBrandProfile(formData);
+      setProfile(updated);
+      setFormData(updated);
+      setIsEditing(false);
+    } catch (error) {
+      console.error("Error saving profile:", error);
+      alert("Failed to save profile. Please try again.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (profile) {
+      setFormData(profile);
+      setIsEditing(false);
+    }
+  };
+
+  const handleAiFill = async () => {
+    if (!aiInput.trim()) {
+      alert("Please provide some information about your brand");
+      return;
+    }
+
+    try {
+      setAiLoading(true);
+      const result = await aiFillBrandProfile(aiInput);
+
+      if (!result.data || Object.keys(result.data).length === 0) {
+        alert(
+          result.message ||
+            "No new data could be extracted from your input. Please provide more specific information."
+        );
+        return;
+      }
+
+      // Merge AI-generated data into form, handling all data types properly
+      setFormData((prev) => {
+        const updated = { ...prev };
+        for (const [key, value] of Object.entries(result.data)) {
+          // Properly handle arrays, objects, and primitives
+          if (Array.isArray(value)) {
+            updated[key] = value;
+          } else if (typeof value === "object" && value !== null) {
+            updated[key] = value;
+          } else {
+            updated[key] = value;
+          }
+        }
+        return updated;
+      });
+
+      setAiInput("");
+      setShowAiModal(false);
+
+      // Auto-enable edit mode if not already
+      if (!isEditing) {
+        setIsEditing(true);
+      }
+
+      // Show success message
+      const fieldCount = Object.keys(result.data).length;
+      alert(
+        `Success! ${fieldCount} field${fieldCount !== 1 ? "s" : ""} ${fieldCount !== 1 ? "were" : "was"} filled. Please review and save your changes.`
+      );
+    } catch (error: any) {
+      console.error("Error with AI fill:", error);
+      const errorMessage =
+        error?.message || "Failed to generate profile data. Please try again.";
+      alert(errorMessage);
+    } finally {
+      setAiLoading(false);
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      setIsLoggingOut(true);
+      await signOut();
+      router.push("/login");
+    } catch (error) {
+      console.error("Logout error:", error);
+      setIsLoggingOut(false);
+    }
+  };
+
+  const updateField = (field: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const updateArrayField = (field: string, values: string[]) => {
+    setFormData((prev) => ({ ...prev, [field]: values }));
+  };
+
+  if (loading) {
+    return (
+      <AuthGuard requiredRole="Brand">
+        <div className="flex min-h-screen items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-blue-600" />
+        </div>
+      </AuthGuard>
+    );
+  }
+
+  if (!profile) {
+    return (
+      <AuthGuard requiredRole="Brand">
+        <div className="flex min-h-screen items-center justify-center">
+          <p className="text-gray-600">Failed to load profile</p>
+        </div>
+      </AuthGuard>
+    );
+  }
+
+  const completionPercentage = profile.profile_completion_percentage || 0;
+
+  return (
+    <AuthGuard requiredRole="Brand">
+      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+        <SlidingMenu role="brand" />
+        {/* Header */}
+        <header className="border-b border-gray-200 bg-white">
+          <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+            <div className="flex items-center gap-2">
+              <Briefcase className="h-6 w-6 text-blue-600" />
+              <h1 className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-2xl font-bold text-transparent">
+                InPactAI
+              </h1>
+            </div>
+            <div className="flex items-center gap-2">
+              <ProfileButton role="Brand" />
+              <button
+                onClick={handleLogout}
+                disabled={isLoggingOut}
+                className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm text-gray-700 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-50"
+              >
+                {isLoggingOut ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <LogOut className="h-4 w-4" />
+                )}
+                {isLoggingOut ? "Logging out..." : "Logout"}
+              </button>
+            </div>
+          </div>
+        </header>
+
+        {/* Main Content */}
+        <main className="mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+          {/* Back Button */}
+          <button
+            onClick={() => router.push("/brand/home")}
+            className="mb-6 flex items-center gap-2 text-gray-600 hover:text-gray-900"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Home
+          </button>
+
+          {/* Profile Header */}
+          <div className="mb-8 rounded-lg bg-white p-6 shadow-sm">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-3xl font-bold text-gray-900">
+                Brand Profile
+              </h2>
+              <div className="flex items-center gap-2">
+                {!isEditing ? (
+                  <>
+                    <button
+                      onClick={() => setShowAiModal(true)}
+                      className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:shadow-lg"
+                    >
+                      <Sparkles className="h-4 w-4" />
+                      AI Fill
+                    </button>
+                    <button
+                      onClick={() => setIsEditing(true)}
+                      className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700"
+                    >
+                      <Edit2 className="h-4 w-4" />
+                      Edit
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <button
+                      onClick={handleCancel}
+                      className="flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
+                    >
+                      <X className="h-4 w-4" />
+                      Cancel
+                    </button>
+                    <button
+                      onClick={handleSave}
+                      disabled={saving}
+                      className="flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-green-700 disabled:opacity-50"
+                    >
+                      {saving ? (
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                      ) : (
+                        <Save className="h-4 w-4" />
+                      )}
+                      {saving ? "Saving..." : "Save"}
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {/* Completion Bar */}
+            <div className="mb-6">
+              <div className="mb-2 flex items-center justify-between">
+                <span className="text-sm font-medium text-gray-700">
+                  Profile Completion
+                </span>
+                <span className="text-sm font-semibold text-gray-900">
+                  {completionPercentage}%
+                </span>
+              </div>
+              <div className="h-3 w-full overflow-hidden rounded-full bg-gray-200">
+                <div
+                  className="h-full bg-gradient-to-r from-blue-600 to-purple-600 transition-all duration-500"
+                  style={{ width: `${completionPercentage}%` }}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Profile Form */}
+          <div className="space-y-4">
+            {/* Basic Information */}
+            <CollapsibleSection title="Basic Information" defaultOpen={true}>
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Company Name *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.company_name || ""}
+                    onChange={(e) =>
+                      updateField("company_name", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Industry *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.industry || ""}
+                    onChange={(e) => updateField("industry", e.target.value)}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Sub Industries
+                  </label>
+                  <ArrayInput
+                    label=""
+                    values={formData.sub_industry || []}
+                    onChange={(values) =>
+                      updateArrayField("sub_industry", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Company Tagline
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.company_tagline || ""}
+                    onChange={(e) =>
+                      updateField("company_tagline", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Company Type
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.company_type || ""}
+                    onChange={(e) =>
+                      updateField("company_type", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    placeholder="e.g., B2B, B2C, SaaS"
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Website URL *
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.website_url || ""}
+                    onChange={(e) => updateField("website_url", e.target.value)}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Company Size
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.company_size || ""}
+                    onChange={(e) =>
+                      updateField("company_size", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    placeholder="e.g., 1-10, 11-50, 51-200, 201-500, 500+"
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Founded Year
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.founded_year || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "founded_year",
+                        raw === "" ? undefined : parseInt(raw, 10)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Headquarters Location
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.headquarters_location || ""}
+                    onChange={(e) =>
+                      updateField("headquarters_location", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Contact Email
+                  </label>
+                  <input
+                    type="email"
+                    value={formData.contact_email || ""}
+                    onChange={(e) =>
+                      updateField("contact_email", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Contact Phone
+                  </label>
+                  <input
+                    type="tel"
+                    value={formData.contact_phone || ""}
+                    onChange={(e) =>
+                      updateField("contact_phone", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Company Description
+                  </label>
+                  <textarea
+                    value={formData.company_description || ""}
+                    onChange={(e) =>
+                      updateField("company_description", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    rows={4}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Company Logo URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.company_logo_url || ""}
+                    onChange={(e) =>
+                      updateField("company_logo_url", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Company Cover Image URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.company_cover_image_url || ""}
+                    onChange={(e) =>
+                      updateField("company_cover_image_url", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <JsonInput
+                    label="Social Media Links"
+                    value={formData.social_media_links || null}
+                    onChange={(value) =>
+                      updateField("social_media_links", value)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Brand Identity */}
+            <CollapsibleSection title="Brand Identity">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Brand Values"
+                    values={formData.brand_values || []}
+                    onChange={(values) =>
+                      updateArrayField("brand_values", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Brand Personality"
+                    values={formData.brand_personality || []}
+                    onChange={(values) =>
+                      updateArrayField("brand_personality", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Brand Voice
+                  </label>
+                  <textarea
+                    value={formData.brand_voice || ""}
+                    onChange={(e) => updateField("brand_voice", e.target.value)}
+                    disabled={!isEditing}
+                    rows={3}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <JsonInput
+                    label="Brand Colors"
+                    value={formData.brand_colors || null}
+                    onChange={(value) => updateField("brand_colors", value)}
+                    disabled={!isEditing}
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Target Audience */}
+            <CollapsibleSection title="Target Audience">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Target Audience Description
+                  </label>
+                  <textarea
+                    value={formData.target_audience_description || ""}
+                    onChange={(e) =>
+                      updateField("target_audience_description", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    rows={3}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Age Groups"
+                    values={formData.target_audience_age_groups || []}
+                    onChange={(values) =>
+                      updateArrayField("target_audience_age_groups", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Gender"
+                    values={formData.target_audience_gender || []}
+                    onChange={(values) =>
+                      updateArrayField("target_audience_gender", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Locations"
+                    values={formData.target_audience_locations || []}
+                    onChange={(values) =>
+                      updateArrayField("target_audience_locations", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Interests"
+                    values={formData.target_audience_interests || []}
+                    onChange={(values) =>
+                      updateArrayField("target_audience_interests", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Income Level"
+                    values={formData.target_audience_income_level || []}
+                    onChange={(values) =>
+                      updateArrayField("target_audience_income_level", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Marketing & Campaigns */}
+            <CollapsibleSection title="Marketing & Campaigns">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Marketing Goals"
+                    values={formData.marketing_goals || []}
+                    onChange={(values) =>
+                      updateArrayField("marketing_goals", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Campaign Types Interested"
+                    values={formData.campaign_types_interested || []}
+                    onChange={(values) =>
+                      updateArrayField("campaign_types_interested", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Preferred Content Types"
+                    values={formData.preferred_content_types || []}
+                    onChange={(values) =>
+                      updateArrayField("preferred_content_types", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Preferred Platforms"
+                    values={formData.preferred_platforms || []}
+                    onChange={(values) =>
+                      updateArrayField("preferred_platforms", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Campaign Frequency
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.campaign_frequency || ""}
+                    onChange={(e) =>
+                      updateField("campaign_frequency", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    placeholder="e.g., Monthly, Quarterly"
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Monthly Marketing Budget
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.monthly_marketing_budget || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "monthly_marketing_budget",
+                        raw === "" ? undefined : parseFloat(raw)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Influencer Budget Percentage
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.influencer_budget_percentage || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "influencer_budget_percentage",
+                        raw === "" ? undefined : parseFloat(raw)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Budget per Campaign (Min)
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.budget_per_campaign_min || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "budget_per_campaign_min",
+                        raw === "" ? undefined : parseFloat(raw)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Budget per Campaign (Max)
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.budget_per_campaign_max || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "budget_per_campaign_max",
+                        raw === "" ? undefined : parseFloat(raw)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Typical Deal Size
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.typical_deal_size || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "typical_deal_size",
+                        raw === "" ? undefined : parseFloat(raw)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Payment Terms
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.payment_terms || ""}
+                    onChange={(e) =>
+                      updateField("payment_terms", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Creator Preferences */}
+            <CollapsibleSection title="Creator Preferences">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Preferred Creator Niches"
+                    values={formData.preferred_creator_niches || []}
+                    onChange={(values) =>
+                      updateArrayField("preferred_creator_niches", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Preferred Creator Size"
+                    values={formData.preferred_creator_size || []}
+                    onChange={(values) =>
+                      updateArrayField("preferred_creator_size", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Preferred Creator Locations"
+                    values={formData.preferred_creator_locations || []}
+                    onChange={(values) =>
+                      updateArrayField("preferred_creator_locations", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Minimum Followers Required
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.minimum_followers_required || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "minimum_followers_required",
+                        raw === "" ? undefined : parseInt(raw, 10)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Minimum Engagement Rate (%)
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.minimum_engagement_rate || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "minimum_engagement_rate",
+                        raw === "" ? undefined : parseFloat(raw)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      checked={formData.offers_product_only_deals || false}
+                      onChange={(e) =>
+                        updateField(
+                          "offers_product_only_deals",
+                          e.target.checked
+                        )
+                      }
+                      disabled={!isEditing}
+                      className="h-4 w-4 rounded border-gray-300"
+                    />
+                    <label className="text-sm font-medium text-gray-700">
+                      Offers Product-Only Deals
+                    </label>
+                  </div>
+                </div>
+                <div className="md:col-span-2">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      checked={formData.offers_affiliate_programs || false}
+                      onChange={(e) =>
+                        updateField(
+                          "offers_affiliate_programs",
+                          e.target.checked
+                        )
+                      }
+                      disabled={!isEditing}
+                      className="h-4 w-4 rounded border-gray-300"
+                    />
+                    <label className="text-sm font-medium text-gray-700">
+                      Offers Affiliate Programs
+                    </label>
+                  </div>
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Affiliate Commission Rate (%)
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.affiliate_commission_rate || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "affiliate_commission_rate",
+                        raw === "" ? undefined : parseFloat(raw)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Content Guidelines */}
+            <CollapsibleSection title="Content Guidelines">
+              <div className="grid grid-cols-1 gap-4">
+                <div>
+                  <ArrayInput
+                    label="Content Do's"
+                    values={formData.content_dos || []}
+                    onChange={(values) =>
+                      updateArrayField("content_dos", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Content Don'ts"
+                    values={formData.content_donts || []}
+                    onChange={(values) =>
+                      updateArrayField("content_donts", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Brand Safety Requirements"
+                    values={formData.brand_safety_requirements || []}
+                    onChange={(values) =>
+                      updateArrayField("brand_safety_requirements", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Competitor Brands"
+                    values={formData.competitor_brands || []}
+                    onChange={(values) =>
+                      updateArrayField("competitor_brands", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      checked={formData.exclusivity_required || false}
+                      onChange={(e) =>
+                        updateField("exclusivity_required", e.target.checked)
+                      }
+                      disabled={!isEditing}
+                      className="h-4 w-4 rounded border-gray-300"
+                    />
+                    <label className="text-sm font-medium text-gray-700">
+                      Exclusivity Required
+                    </label>
+                  </div>
+                  {formData.exclusivity_required && (
+                    <div>
+                      <label className="mb-1 block text-sm font-medium text-gray-700">
+                        Exclusivity Duration (Months)
+                      </label>
+                      <input
+                        type="number"
+                        value={formData.exclusivity_duration_months || ""}
+                        onChange={(e) => {
+                          const raw = e.target.value;
+                          updateField(
+                            "exclusivity_duration_months",
+                            raw === "" ? undefined : parseInt(raw, 10)
+                          );
+                        }}
+                        disabled={!isEditing}
+                        className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Products & Services */}
+            <CollapsibleSection title="Products & Services">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Products/Services"
+                    values={formData.products_services || []}
+                    onChange={(values) =>
+                      updateArrayField("products_services", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Product Price Range
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.product_price_range || ""}
+                    onChange={(e) =>
+                      updateField("product_price_range", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    placeholder="e.g., $10-$50, $50-$100"
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Product Categories"
+                    values={formData.product_categories || []}
+                    onChange={(values) =>
+                      updateArrayField("product_categories", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      checked={formData.seasonal_products || false}
+                      onChange={(e) =>
+                        updateField("seasonal_products", e.target.checked)
+                      }
+                      disabled={!isEditing}
+                      className="h-4 w-4 rounded border-gray-300"
+                    />
+                    <label className="text-sm font-medium text-gray-700">
+                      Seasonal Products
+                    </label>
+                  </div>
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Product Catalog URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.product_catalog_url || ""}
+                    onChange={(e) =>
+                      updateField("product_catalog_url", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* History & Performance */}
+            <CollapsibleSection title="History & Performance">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Past Campaigns Count
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.past_campaigns_count || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "past_campaigns_count",
+                        parseInt(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Average Campaign ROI (%)
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.average_campaign_roi || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "average_campaign_roi",
+                        parseFloat(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Successful Partnerships"
+                    values={formData.successful_partnerships || []}
+                    onChange={(values) =>
+                      updateArrayField("successful_partnerships", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Total Deals Posted
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.total_deals_posted || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "total_deals_posted",
+                        parseInt(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Total Deals Completed
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.total_deals_completed || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "total_deals_completed",
+                        parseInt(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Total Spent
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.total_spent || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "total_spent",
+                        parseFloat(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Average Deal Rating
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.average_deal_rating || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "average_deal_rating",
+                        parseFloat(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Additional Settings */}
+            <CollapsibleSection title="Additional Settings">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Search Keywords"
+                    values={formData.search_keywords || []}
+                    onChange={(values) =>
+                      updateArrayField("search_keywords", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Subscription Tier
+                  </label>
+                  <select
+                    value={formData.subscription_tier || "free"}
+                    onChange={(e) =>
+                      updateField("subscription_tier", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  >
+                    <option value="free">Free</option>
+                    <option value="basic">Basic</option>
+                    <option value="premium">Premium</option>
+                    <option value="enterprise">Enterprise</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Matching Score Base
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.matching_score_base || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "matching_score_base",
+                        parseFloat(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    AI Profile Summary
+                  </label>
+                  <textarea
+                    value={formData.ai_profile_summary || ""}
+                    onChange={(e) =>
+                      updateField("ai_profile_summary", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    rows={4}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+          </div>
+        </main>
+
+        {/* AI Fill Modal */}
+        {showAiModal && (
+          <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
+            <div className="w-full max-w-2xl rounded-lg bg-white p-6 shadow-xl">
+              <h3 className="mb-4 text-xl font-semibold text-gray-900">
+                AI Profile Filling
+              </h3>
+              <p className="mb-4 text-sm text-gray-600">
+                Provide information about your brand, and AI will help fill in
+                your profile fields automatically.
+              </p>
+              <textarea
+                value={aiInput}
+                onChange={(e) => setAiInput(e.target.value)}
+                placeholder="e.g., We are a tech startup founded in 2020, based in San Francisco. We focus on sustainable products and target millennials..."
+                rows={6}
+                className="mb-4 w-full rounded-lg border border-gray-300 px-3 py-2"
+              />
+              <div className="flex items-center justify-end gap-2">
+                <button
+                  onClick={() => {
+                    setShowAiModal(false);
+                    setAiInput("");
+                  }}
+                  className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleAiFill}
+                  disabled={aiLoading || !aiInput.trim()}
+                  className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:shadow-lg disabled:opacity-50"
+                >
+                  {aiLoading ? (
+                    <>
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Generating...
+                    </>
+                  ) : (
+                    <>
+                      <Sparkles className="h-4 w-4" />
+                      Generate
+                    </>
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </AuthGuard>
+  );
+}
diff --git a/frontend/app/creator/home/page.tsx b/frontend/app/creator/home/page.tsx
index 4ffcdf5..4bb61ea 100644
--- a/frontend/app/creator/home/page.tsx
+++ b/frontend/app/creator/home/page.tsx
@@ -3,6 +3,7 @@
 import AuthGuard from "@/components/auth/AuthGuard";
 import SlidingMenu from "@/components/SlidingMenu";
 import CreatorDashboard from "@/components/dashboard/CreatorDashboard";
+import ProfileButton from "@/components/profile/ProfileButton";
 import { getUserProfile, signOut } from "@/lib/auth-helpers";
 import { Loader2, LogOut, Sparkles } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -47,18 +48,21 @@ export default function CreatorHomePage() {
                 InPactAI
               </h1>
             </div>
-            <button
-              onClick={handleLogout}
-              disabled={isLoggingOut}
-              className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm text-gray-700 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-50"
-            >
-              {isLoggingOut ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <LogOut className="h-4 w-4" />
-              )}
-              {isLoggingOut ? "Logging out..." : "Logout"}
-            </button>
+            <div className="flex items-center gap-2">
+              <ProfileButton role="Creator" />
+              <button
+                onClick={handleLogout}
+                disabled={isLoggingOut}
+                className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm text-gray-700 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-50"
+              >
+                {isLoggingOut ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <LogOut className="h-4 w-4" />
+                )}
+                {isLoggingOut ? "Logging out..." : "Logout"}
+              </button>
+            </div>
           </div>
         </header>
 
diff --git a/frontend/app/creator/profile/page.tsx b/frontend/app/creator/profile/page.tsx
new file mode 100644
index 0000000..adab22f
--- /dev/null
+++ b/frontend/app/creator/profile/page.tsx
@@ -0,0 +1,1284 @@
+"use client";
+
+import AuthGuard from "@/components/auth/AuthGuard";
+import ArrayInput from "@/components/profile/ArrayInput";
+import CollapsibleSection from "@/components/profile/CollapsibleSection";
+import JsonInput from "@/components/profile/JsonInput";
+import ProfileButton from "@/components/profile/ProfileButton";
+import SlidingMenu from "@/components/SlidingMenu";
+import {
+  aiFillCreatorProfile,
+  CreatorProfile,
+  getCreatorProfile,
+  updateCreatorProfile,
+} from "@/lib/api/profile";
+import { signOut } from "@/lib/auth-helpers";
+import {
+  ArrowLeft,
+  Edit2,
+  Loader2,
+  LogOut,
+  Save,
+  Sparkles,
+  X,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export default function CreatorProfilePage() {
+  const router = useRouter();
+  const [profile, setProfile] = useState<CreatorProfile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [formData, setFormData] = useState<Partial<CreatorProfile>>({});
+  const [aiLoading, setAiLoading] = useState(false);
+  const [aiInput, setAiInput] = useState("");
+  const [showAiModal, setShowAiModal] = useState(false);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  useEffect(() => {
+    loadProfile();
+  }, []);
+
+  const loadProfile = async () => {
+    try {
+      setLoading(true);
+      const data = await getCreatorProfile();
+      setProfile(data);
+      setFormData(data);
+    } catch (error) {
+      console.error("Error loading profile:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      setSaving(true);
+      const updated = await updateCreatorProfile(formData);
+      setProfile(updated);
+      setFormData(updated);
+      setIsEditing(false);
+    } catch (error) {
+      console.error("Error saving profile:", error);
+      alert("Failed to save profile. Please try again.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (profile) {
+      setFormData(profile);
+      setIsEditing(false);
+    }
+  };
+
+  const handleAiFill = async () => {
+    if (!aiInput.trim()) {
+      alert("Please provide some information about yourself");
+      return;
+    }
+
+    try {
+      setAiLoading(true);
+      const result = await aiFillCreatorProfile(aiInput);
+
+      if (!result.data || Object.keys(result.data).length === 0) {
+        alert(
+          result.message ||
+            "No new data could be extracted from your input. Please provide more specific information."
+        );
+        return;
+      }
+
+      // Merge AI-generated data into form, handling all data types properly
+      setFormData((prev) => {
+        const updated = { ...prev };
+        for (const [key, value] of Object.entries(result.data)) {
+          // Properly handle arrays, objects, and primitives
+          if (Array.isArray(value)) {
+            updated[key] = value;
+          } else if (typeof value === "object" && value !== null) {
+            updated[key] = value;
+          } else {
+            updated[key] = value;
+          }
+        }
+        return updated;
+      });
+
+      setAiInput("");
+      setShowAiModal(false);
+
+      // Auto-enable edit mode if not already
+      if (!isEditing) {
+        setIsEditing(true);
+      }
+
+      // Show success message
+      const fieldCount = Object.keys(result.data).length;
+      alert(
+        `Success! ${fieldCount} field${fieldCount !== 1 ? "s" : ""} ${fieldCount !== 1 ? "were" : "was"} filled. Please review and save your changes.`
+      );
+    } catch (error: any) {
+      console.error("Error with AI fill:", error);
+      const errorMessage =
+        error?.message || "Failed to generate profile data. Please try again.";
+      alert(errorMessage);
+    } finally {
+      setAiLoading(false);
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      setIsLoggingOut(true);
+      await signOut();
+      router.push("/login");
+    } catch (error) {
+      console.error("Logout error:", error);
+      setIsLoggingOut(false);
+    }
+  };
+
+  const updateField = (field: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const updateArrayField = (field: string, values: string[]) => {
+    setFormData((prev) => ({ ...prev, [field]: values }));
+  };
+
+  if (loading) {
+    return (
+      <AuthGuard requiredRole="Creator">
+        <div className="flex min-h-screen items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-purple-600" />
+        </div>
+      </AuthGuard>
+    );
+  }
+
+  if (!profile) {
+    return (
+      <AuthGuard requiredRole="Creator">
+        <div className="flex min-h-screen items-center justify-center">
+          <p className="text-gray-600">Failed to load profile</p>
+        </div>
+      </AuthGuard>
+    );
+  }
+
+  const completionPercentage = profile.profile_completion_percentage || 0;
+
+  return (
+    <AuthGuard requiredRole="Creator">
+      <div className="min-h-screen bg-gradient-to-br from-purple-50 via-white to-blue-50">
+        <SlidingMenu role="creator" />
+        {/* Header */}
+        <header className="border-b border-gray-200 bg-white">
+          <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+            <div className="flex items-center gap-2">
+              <Sparkles className="h-6 w-6 text-purple-600" />
+              <h1 className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-2xl font-bold text-transparent">
+                InPactAI
+              </h1>
+            </div>
+            <div className="flex items-center gap-2">
+              <ProfileButton role="Creator" />
+              <button
+                onClick={handleLogout}
+                disabled={isLoggingOut}
+                className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm text-gray-700 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-50"
+              >
+                {isLoggingOut ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <LogOut className="h-4 w-4" />
+                )}
+                {isLoggingOut ? "Logging out..." : "Logout"}
+              </button>
+            </div>
+          </div>
+        </header>
+
+        {/* Main Content */}
+        <main className="mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+          {/* Back Button */}
+          <button
+            onClick={() => router.push("/creator/home")}
+            className="mb-6 flex items-center gap-2 text-gray-600 hover:text-gray-900"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Home
+          </button>
+
+          {/* Profile Header */}
+          <div className="mb-8 rounded-lg bg-white p-6 shadow-sm">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-3xl font-bold text-gray-900">
+                Creator Profile
+              </h2>
+              <div className="flex items-center gap-2">
+                {!isEditing ? (
+                  <>
+                    <button
+                      onClick={() => setShowAiModal(true)}
+                      className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:shadow-lg"
+                    >
+                      <Sparkles className="h-4 w-4" />
+                      AI Fill
+                    </button>
+                    <button
+                      onClick={() => setIsEditing(true)}
+                      className="flex items-center gap-2 rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-purple-700"
+                    >
+                      <Edit2 className="h-4 w-4" />
+                      Edit
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <button
+                      onClick={handleCancel}
+                      className="flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
+                    >
+                      <X className="h-4 w-4" />
+                      Cancel
+                    </button>
+                    <button
+                      onClick={handleSave}
+                      disabled={saving}
+                      className="flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-green-700 disabled:opacity-50"
+                    >
+                      {saving ? (
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                      ) : (
+                        <Save className="h-4 w-4" />
+                      )}
+                      {saving ? "Saving..." : "Save"}
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {/* Completion Bar */}
+            <div className="mb-6">
+              <div className="mb-2 flex items-center justify-between">
+                <span className="text-sm font-medium text-gray-700">
+                  Profile Completion
+                </span>
+                <span className="text-sm font-semibold text-gray-900">
+                  {completionPercentage}%
+                </span>
+              </div>
+              <div className="h-3 w-full overflow-hidden rounded-full bg-gray-200">
+                <div
+                  className="h-full bg-gradient-to-r from-purple-600 to-blue-600 transition-all duration-500"
+                  style={{ width: `${completionPercentage}%` }}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Profile Form */}
+          <div className="space-y-4">
+            {/* Basic Information */}
+            <CollapsibleSection title="Basic Information" defaultOpen={true}>
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Display Name *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.display_name || ""}
+                    onChange={(e) =>
+                      updateField("display_name", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Primary Niche *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.primary_niche || ""}
+                    onChange={(e) =>
+                      updateField("primary_niche", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Tagline
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.tagline || ""}
+                    onChange={(e) => updateField("tagline", e.target.value)}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Website URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.website_url || ""}
+                    onChange={(e) => updateField("website_url", e.target.value)}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Bio
+                  </label>
+                  <textarea
+                    value={formData.bio || ""}
+                    onChange={(e) => updateField("bio", e.target.value)}
+                    disabled={!isEditing}
+                    rows={4}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Profile Picture URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.profile_picture_url || ""}
+                    onChange={(e) =>
+                      updateField("profile_picture_url", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Cover Image URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.cover_image_url || ""}
+                    onChange={(e) =>
+                      updateField("cover_image_url", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Secondary Niches"
+                    values={formData.secondary_niches || []}
+                    onChange={(values) =>
+                      updateArrayField("secondary_niches", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Content Types"
+                    values={formData.content_types || []}
+                    onChange={(values) =>
+                      updateArrayField("content_types", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Content Language"
+                    values={formData.content_language || []}
+                    onChange={(values) =>
+                      updateArrayField("content_language", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Social Media */}
+            <CollapsibleSection title="Social Media">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Instagram Handle
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.instagram_handle || ""}
+                    onChange={(e) =>
+                      updateField("instagram_handle", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    placeholder="@username"
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Instagram URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.instagram_url || ""}
+                    onChange={(e) =>
+                      updateField("instagram_url", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Instagram Followers
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.instagram_followers || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "instagram_followers",
+                        raw === "" ? undefined : parseInt(raw, 10)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    YouTube Handle
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.youtube_handle || ""}
+                    onChange={(e) =>
+                      updateField("youtube_handle", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    YouTube URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.youtube_url || ""}
+                    onChange={(e) => updateField("youtube_url", e.target.value)}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    YouTube Subscribers
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.youtube_subscribers || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "youtube_subscribers",
+                        raw === "" ? undefined : parseInt(raw, 10)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    TikTok Handle
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.tiktok_handle || ""}
+                    onChange={(e) =>
+                      updateField("tiktok_handle", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    TikTok URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.tiktok_url || ""}
+                    onChange={(e) => updateField("tiktok_url", e.target.value)}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    TikTok Followers
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.tiktok_followers || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "tiktok_followers",
+                        raw === "" ? undefined : parseInt(raw, 10)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Twitter Handle
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.twitter_handle || ""}
+                    onChange={(e) =>
+                      updateField("twitter_handle", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Twitter URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.twitter_url || ""}
+                    onChange={(e) => updateField("twitter_url", e.target.value)}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Twitter Followers
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.twitter_followers || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "twitter_followers",
+                        raw === "" ? undefined : parseInt(raw, 10)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Twitch Handle
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.twitch_handle || ""}
+                    onChange={(e) =>
+                      updateField("twitch_handle", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Twitch URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.twitch_url || ""}
+                    onChange={(e) => updateField("twitch_url", e.target.value)}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Twitch Followers
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.twitch_followers || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "twitch_followers",
+                        raw === "" ? undefined : parseInt(raw, 10)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    LinkedIn URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.linkedin_url || ""}
+                    onChange={(e) =>
+                      updateField("linkedin_url", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Facebook URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.facebook_url || ""}
+                    onChange={(e) =>
+                      updateField("facebook_url", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Total Followers
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.total_followers || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "total_followers",
+                        raw === "" ? undefined : parseInt(raw, 10)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <JsonInput
+                    label="Social Platforms (JSON)"
+                    value={formData.social_platforms || null}
+                    onChange={(value) => updateField("social_platforms", value)}
+                    disabled={!isEditing}
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Audience & Analytics */}
+            <CollapsibleSection title="Audience & Analytics">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Total Reach
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.total_reach || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "total_reach",
+                        raw === "" ? undefined : parseInt(raw, 10)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Average Views
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.average_views || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "average_views",
+                        raw === "" ? undefined : parseInt(raw, 10)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Engagement Rate (%)
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.engagement_rate || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "engagement_rate",
+                        raw === "" ? undefined : parseFloat(raw)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Average Engagement per Post
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.average_engagement_per_post || ""}
+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      updateField(
+                        "average_engagement_per_post",
+                        raw === "" ? undefined : parseInt(raw, 10)
+                      );
+                    }}
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Primary Audience Age
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.audience_age_primary || ""}
+                    onChange={(e) =>
+                      updateField("audience_age_primary", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Secondary Audience Age"
+                    values={formData.audience_age_secondary || []}
+                    onChange={(values) =>
+                      updateArrayField("audience_age_secondary", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <JsonInput
+                    label="Audience Gender Split (JSON)"
+                    value={formData.audience_gender_split || null}
+                    onChange={(value) =>
+                      updateField("audience_gender_split", value)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <JsonInput
+                    label="Audience Locations (JSON)"
+                    value={formData.audience_locations || null}
+                    onChange={(value) =>
+                      updateField("audience_locations", value)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Audience Interests"
+                    values={formData.audience_interests || []}
+                    onChange={(values) =>
+                      updateArrayField("audience_interests", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Best Performing Content Type
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.best_performing_content_type || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "best_performing_content_type",
+                        e.target.value
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <JsonInput
+                    label="Peak Posting Times (JSON)"
+                    value={formData.peak_posting_times || null}
+                    onChange={(value) =>
+                      updateField("peak_posting_times", value)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Content & Rates */}
+            <CollapsibleSection title="Content & Rates">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Years of Experience
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.years_of_experience || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "years_of_experience",
+                        parseInt(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Posting Frequency
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.posting_frequency || ""}
+                    onChange={(e) =>
+                      updateField("posting_frequency", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    placeholder="e.g., Daily, 3x/week"
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Rate per Post
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.rate_per_post || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "rate_per_post",
+                        parseFloat(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Rate per Video
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.rate_per_video || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "rate_per_video",
+                        parseFloat(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Rate per Story
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.rate_per_story || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "rate_per_story",
+                        parseFloat(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Rate per Reel
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.rate_per_reel || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "rate_per_reel",
+                        parseFloat(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      checked={formData.rate_negotiable || false}
+                      onChange={(e) =>
+                        updateField("rate_negotiable", e.target.checked)
+                      }
+                      disabled={!isEditing}
+                      className="h-4 w-4 rounded border-gray-300"
+                    />
+                    <label className="text-sm font-medium text-gray-700">
+                      Rate Negotiable
+                    </label>
+                  </div>
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Minimum Deal Value
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.minimum_deal_value || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "minimum_deal_value",
+                        parseFloat(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Preferred Payment Terms
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.preferred_payment_terms || ""}
+                    onChange={(e) =>
+                      updateField("preferred_payment_terms", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      checked={formData.accepts_product_only_deals || false}
+                      onChange={(e) =>
+                        updateField(
+                          "accepts_product_only_deals",
+                          e.target.checked
+                        )
+                      }
+                      disabled={!isEditing}
+                      className="h-4 w-4 rounded border-gray-300"
+                    />
+                    <label className="text-sm font-medium text-gray-700">
+                      Accepts Product-Only Deals
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Professional Details */}
+            <CollapsibleSection title="Professional Details">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="md:col-span-2">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      checked={formData.content_creation_full_time || false}
+                      onChange={(e) =>
+                        updateField(
+                          "content_creation_full_time",
+                          e.target.checked
+                        )
+                      }
+                      disabled={!isEditing}
+                      className="h-4 w-4 rounded border-gray-300"
+                    />
+                    <label className="text-sm font-medium text-gray-700">
+                      Content Creation Full-Time
+                    </label>
+                  </div>
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Team Size
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.team_size || ""}
+                    onChange={(e) =>
+                      updateField("team_size", parseInt(e.target.value) || 1)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Equipment Quality
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.equipment_quality || ""}
+                    onChange={(e) =>
+                      updateField("equipment_quality", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    placeholder="e.g., Professional, Semi-Professional"
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Editing Software"
+                    values={formData.editing_software || []}
+                    onChange={(values) =>
+                      updateArrayField("editing_software", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Collaboration Types"
+                    values={formData.collaboration_types || []}
+                    onChange={(values) =>
+                      updateArrayField("collaboration_types", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Preferred Brands Style"
+                    values={formData.preferred_brands_style || []}
+                    onChange={(values) =>
+                      updateArrayField("preferred_brands_style", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Not Interested In"
+                    values={formData.not_interested_in || []}
+                    onChange={(values) =>
+                      updateArrayField("not_interested_in", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Portfolio & Links */}
+            <CollapsibleSection title="Portfolio & Links">
+              <div className="grid grid-cols-1 gap-4">
+                <div>
+                  <ArrayInput
+                    label="Portfolio Links"
+                    values={formData.portfolio_links || []}
+                    onChange={(values) =>
+                      updateArrayField("portfolio_links", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Past Brand Collaborations"
+                    values={formData.past_brand_collaborations || []}
+                    onChange={(values) =>
+                      updateArrayField("past_brand_collaborations", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <ArrayInput
+                    label="Case Study Links"
+                    values={formData.case_study_links || []}
+                    onChange={(values) =>
+                      updateArrayField("case_study_links", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Media Kit URL
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.media_kit_url || ""}
+                    onChange={(e) =>
+                      updateField("media_kit_url", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+
+            {/* Additional Settings */}
+            <CollapsibleSection title="Additional Settings">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="md:col-span-2">
+                  <ArrayInput
+                    label="Search Keywords"
+                    values={formData.search_keywords || []}
+                    onChange={(values) =>
+                      updateArrayField("search_keywords", values)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    Matching Score Base
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.matching_score_base || ""}
+                    onChange={(e) =>
+                      updateField(
+                        "matching_score_base",
+                        parseFloat(e.target.value) || undefined
+                      )
+                    }
+                    disabled={!isEditing}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
+                    AI Profile Summary
+                  </label>
+                  <textarea
+                    value={formData.ai_profile_summary || ""}
+                    onChange={(e) =>
+                      updateField("ai_profile_summary", e.target.value)
+                    }
+                    disabled={!isEditing}
+                    rows={4}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-50"
+                  />
+                </div>
+              </div>
+            </CollapsibleSection>
+          </div>
+        </main>
+
+        {/* AI Fill Modal */}
+        {showAiModal && (
+          <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
+            <div className="w-full max-w-2xl rounded-lg bg-white p-6 shadow-xl">
+              <h3 className="mb-4 text-xl font-semibold text-gray-900">
+                AI Profile Filling
+              </h3>
+              <p className="mb-4 text-sm text-gray-600">
+                Provide information about yourself, and AI will help fill in
+                your profile fields automatically.
+              </p>
+              <textarea
+                value={aiInput}
+                onChange={(e) => setAiInput(e.target.value)}
+                placeholder="e.g., I'm a lifestyle content creator with 5 years of experience. I focus on sustainable living and wellness. I post 3 times a week on Instagram and have 50k followers..."
+                rows={6}
+                className="mb-4 w-full rounded-lg border border-gray-300 px-3 py-2"
+              />
+              <div className="flex items-center justify-end gap-2">
+                <button
+                  onClick={() => {
+                    setShowAiModal(false);
+                    setAiInput("");
+                  }}
+                  className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleAiFill}
+                  disabled={aiLoading || !aiInput.trim()}
+                  className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:shadow-lg disabled:opacity-50"
+                >
+                  {aiLoading ? (
+                    <>
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Generating...
+                    </>
+                  ) : (
+                    <>
+                      <Sparkles className="h-4 w-4" />
+                      Generate
+                    </>
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </AuthGuard>
+  );
+}
diff --git a/frontend/components/profile/ArrayInput.tsx b/frontend/components/profile/ArrayInput.tsx
new file mode 100644
index 0000000..98cee2a
--- /dev/null
+++ b/frontend/components/profile/ArrayInput.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { X, Plus } from "lucide-react";
+import { useState } from "react";
+
+interface ArrayInputProps {
+  label: string;
+  values: string[];
+  onChange: (values: string[]) => void;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export default function ArrayInput({
+  label,
+  values,
+  onChange,
+  disabled = false,
+  placeholder = "Enter value and press Enter",
+}: ArrayInputProps) {
+  const [inputValue, setInputValue] = useState("");
+
+  const handleAdd = () => {
+    if (inputValue.trim() && !values.includes(inputValue.trim())) {
+      onChange([...values, inputValue.trim()]);
+      setInputValue("");
+    }
+  };
+
+  const handleRemove = (index: number) => {
+    onChange(values.filter((_, i) => i !== index));
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleAdd();
+    }
+  };
+
+  return (
+    <div>
+      <label className="mb-1 block text-sm font-medium text-gray-700">{label}</label>
+      <div className="flex flex-wrap gap-2">
+        {values.map((value, index) => (
+          <span
+            key={index}
+            className="flex items-center gap-1 rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-800"
+          >
+            {value}
+            {!disabled && (
+              <button
+                type="button"
+                onClick={() => handleRemove(index)}
+                className="ml-1 text-blue-600 hover:text-blue-800"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </span>
+        ))}
+      </div>
+      {!disabled && (
+        <div className="mt-2 flex gap-2">
+          <input
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyPress={handleKeyPress}
+            placeholder={placeholder}
+            className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm"
+          />
+          <button
+            type="button"
+            onClick={handleAdd}
+            className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+          >
+            <Plus className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
diff --git a/frontend/components/profile/CollapsibleSection.tsx b/frontend/components/profile/CollapsibleSection.tsx
new file mode 100644
index 0000000..554789f
--- /dev/null
+++ b/frontend/components/profile/CollapsibleSection.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useState } from "react";
+
+interface CollapsibleSectionProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+export default function CollapsibleSection({
+  title,
+  children,
+  defaultOpen = false,
+}: CollapsibleSectionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white">
+      <button
+        type="button"
+        aria-expanded={isOpen}
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full items-center justify-between px-6 py-4 text-left transition hover:bg-gray-50"
+      >
+        <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
+        {isOpen ? (
+          <ChevronUp className="h-5 w-5 text-gray-500" />
+        ) : (
+          <ChevronDown className="h-5 w-5 text-gray-500" />
+        )}
+      </button>
+      {isOpen && (
+        <div className="border-t border-gray-200 px-6 py-4">{children}</div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/components/profile/JsonInput.tsx b/frontend/components/profile/JsonInput.tsx
new file mode 100644
index 0000000..c4111b0
--- /dev/null
+++ b/frontend/components/profile/JsonInput.tsx
@@ -0,0 +1,64 @@
+"use client";
+import { useEffect } from "react";
+
+import { useState } from "react";
+
+interface JsonInputProps {
+  label: string;
+  value: Record<string, any> | null;
+  onChange: (value: Record<string, any> | null) => void;
+  disabled?: boolean;
+}
+
+export default function JsonInput({
+  label,
+  value,
+  onChange,
+  disabled = false,
+}: JsonInputProps) {
+  const [textValue, setTextValue] = useState(
+    value ? JSON.stringify(value, null, 2) : ""
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setTextValue(value ? JSON.stringify(value, null, 2) : "");
+    setError(null);
+  }, [value]);
+
+  const handleBlur = () => {
+    if (!textValue.trim()) {
+      onChange(null);
+      setError(null);
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(textValue);
+      onChange(parsed);
+      setError(null);
+    } catch (e) {
+      setError("Invalid JSON format");
+    }
+  };
+
+  return (
+    <div>
+      <label className="mb-1 block text-sm font-medium text-gray-700">
+        {label}
+      </label>
+      <textarea
+        value={textValue}
+        onChange={(e) => setTextValue(e.target.value)}
+        onBlur={handleBlur}
+        disabled={disabled}
+        rows={4}
+        className={`w-full rounded-lg border px-3 py-2 font-mono text-sm ${
+          error ? "border-red-300 bg-red-50" : "border-gray-300"
+        } disabled:bg-gray-50`}
+        placeholder='{"key": "value"}'
+      />
+      {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+    </div>
+  );
+}
diff --git a/frontend/components/profile/ProfileButton.tsx b/frontend/components/profile/ProfileButton.tsx
new file mode 100644
index 0000000..d312ec8
--- /dev/null
+++ b/frontend/components/profile/ProfileButton.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { getUserProfile } from "@/lib/auth-helpers";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+interface ProfileButtonProps {
+  role: "Brand" | "Creator";
+}
+
+export default function ProfileButton({ role }: ProfileButtonProps) {
+  const router = useRouter();
+  const [userName, setUserName] = useState<string>("");
+  const [profileImageUrl, setProfileImageUrl] = useState<string | null>(null);
+  const [imageError, setImageError] = useState(false);
+  const [imageLoading, setImageLoading] = useState(false);
+
+  useEffect(() => {
+    async function loadProfile() {
+      const profile = await getUserProfile();
+      if (profile) {
+        setUserName(profile.name);
+      }
+
+      // Fetch profile image based on role
+      try {
+        const apiUrl =
+          process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+        const { supabase } = await import("@/lib/supabaseClient");
+        const {
+          data: { session },
+        } = await supabase.auth.getSession();
+        const accessToken = session?.access_token;
+
+        const endpoint =
+          role === "Brand" ? "/brand/profile" : "/creator/profile";
+        const response = await fetch(`${apiUrl}${endpoint}`, {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (response.ok) {
+          const data = await response.json();
+          const imageUrl =
+            role === "Brand" ? data.company_logo_url : data.profile_picture_url;
+          if (imageUrl) {
+            setProfileImageUrl(imageUrl);
+            setImageLoading(true);
+            setImageError(false);
+          } else {
+            setImageError(true);
+            setImageLoading(false);
+          }
+        } else {
+          setImageError(true);
+          setImageLoading(false);
+        }
+      } catch (error) {
+        console.error("Error loading profile image:", error);
+        setImageError(true);
+        setImageLoading(false);
+      }
+    }
+    loadProfile();
+  }, [role]);
+
+  // Set timeout for image loading (3 seconds)
+  useEffect(() => {
+    if (profileImageUrl && imageLoading) {
+      const timer = setTimeout(() => {
+        setImageError(true);
+        setImageLoading(false);
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    } else if (!profileImageUrl) {
+      setImageError(true);
+      setImageLoading(false);
+    }
+  }, [profileImageUrl, imageLoading]);
+
+  const handleClick = () => {
+    const path = role === "Brand" ? "/brand/profile" : "/creator/profile";
+    router.push(path);
+  };
+
+  const getInitial = () => {
+    if (userName) {
+      return userName.charAt(0).toUpperCase();
+    }
+    return role === "Brand" ? "B" : "C";
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-gray-700 transition hover:bg-gray-100 hover:text-gray-900"
+    >
+      {/* Profile Image/Avatar */}
+      <div className="relative h-10 w-10 flex-shrink-0">
+        {profileImageUrl && !imageError ? (
+          <div className="relative h-full w-full overflow-hidden rounded-full bg-gray-200">
+            <Image
+              src={profileImageUrl}
+              alt={userName || "Profile"}
+              fill
+              className="object-cover"
+              onError={() => {
+                setImageError(true);
+                setImageLoading(false);
+              }}
+              onLoad={() => {
+                setImageLoading(false);
+                setImageError(false);
+              }}
+            />
+          </div>
+        ) : (
+          <div className="flex h-full w-full items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-500 text-lg font-semibold text-white">
+            {getInitial()}
+          </div>
+        )}
+      </div>
+
+      {/* User Name */}
+      <span className="font-medium">{userName || role}</span>
+    </button>
+  );
+}
diff --git a/frontend/lib/api/profile.ts b/frontend/lib/api/profile.ts
new file mode 100644
index 0000000..d08fb71
--- /dev/null
+++ b/frontend/lib/api/profile.ts
@@ -0,0 +1,283 @@
+type Nullable<T> = T | null;
+import { authenticatedFetch } from "../auth-helpers";
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+
+export interface BrandProfile {
+  id: string;
+  user_id: string;
+  company_name: string;
+  company_tagline?: Nullable<string>;
+  company_description?: Nullable<string>;
+  company_logo_url?: Nullable<string>;
+  company_cover_image_url?: Nullable<string>;
+  industry: string;
+  sub_industry?: Nullable<string[]>;
+  company_size?: Nullable<string>;
+  founded_year?: Nullable<number>;
+  headquarters_location?: Nullable<string>;
+  company_type?: Nullable<string>;
+  website_url: string;
+  contact_email?: Nullable<string>;
+  contact_phone?: Nullable<string>;
+  social_media_links?: Nullable<Record<string, any>>;
+  target_audience_age_groups?: Nullable<string[]>;
+  target_audience_gender?: Nullable<string[]>;
+  target_audience_locations?: Nullable<string[]>;
+  target_audience_interests?: Nullable<string[]>;
+  target_audience_income_level?: Nullable<string[]>;
+  target_audience_description?: Nullable<string>;
+  brand_values?: Nullable<string[]>;
+  brand_personality?: Nullable<string[]>;
+  brand_voice?: Nullable<string>;
+  brand_colors?: Nullable<Record<string, any>>;
+  marketing_goals?: Nullable<string[]>;
+  campaign_types_interested?: Nullable<string[]>;
+  preferred_content_types?: Nullable<string[]>;
+  preferred_platforms?: Nullable<string[]>;
+  campaign_frequency?: Nullable<string>;
+  monthly_marketing_budget?: Nullable<number>;
+  influencer_budget_percentage?: Nullable<number>;
+  budget_per_campaign_min?: Nullable<number>;
+  budget_per_campaign_max?: Nullable<number>;
+  typical_deal_size?: Nullable<number>;
+  payment_terms?: Nullable<string>;
+  offers_product_only_deals?: Nullable<boolean>;
+  offers_affiliate_programs?: Nullable<boolean>;
+  affiliate_commission_rate?: Nullable<number>;
+  preferred_creator_niches?: Nullable<string[]>;
+  preferred_creator_size?: Nullable<string[]>;
+  preferred_creator_locations?: Nullable<string[]>;
+  minimum_followers_required?: Nullable<number>;
+  minimum_engagement_rate?: Nullable<number>;
+  content_dos?: Nullable<string[]>;
+  content_donts?: Nullable<string[]>;
+  brand_safety_requirements?: Nullable<string[]>;
+  competitor_brands?: Nullable<string[]>;
+  exclusivity_required?: Nullable<boolean>;
+  exclusivity_duration_months?: Nullable<number>;
+  past_campaigns_count?: Nullable<number>;
+  successful_partnerships?: Nullable<string[]>;
+  case_studies?: Nullable<any[]>;
+  average_campaign_roi?: Nullable<number>;
+  products_services?: Nullable<string[]>;
+  product_price_range?: Nullable<string>;
+  product_categories?: Nullable<string[]>;
+  seasonal_products?: Nullable<boolean>;
+  product_catalog_url?: Nullable<string>;
+  business_verified?: Nullable<boolean>;
+  payment_verified?: Nullable<boolean>;
+  tax_id_verified?: Nullable<boolean>;
+  profile_completion_percentage: number;
+  is_active?: Nullable<boolean>;
+  is_featured?: Nullable<boolean>;
+  is_verified_brand?: Nullable<boolean>;
+  subscription_tier?: Nullable<string>;
+  featured_until?: Nullable<string>;
+  ai_profile_summary?: Nullable<string>;
+  search_keywords?: Nullable<string[]>;
+  matching_score_base?: Nullable<number>;
+  total_deals_posted?: Nullable<number>;
+  total_deals_completed?: Nullable<number>;
+  total_spent?: Nullable<number>;
+  average_deal_rating?: Nullable<number>;
+  created_at?: Nullable<string>;
+  updated_at?: Nullable<string>;
+  last_active_at?: Nullable<string>;
+  [key: string]: any;
+}
+
+export interface CreatorProfile {
+  id: string;
+  user_id: string;
+  display_name: string;
+  bio?: Nullable<string>;
+  tagline?: Nullable<string>;
+  profile_picture_url?: Nullable<string>;
+  cover_image_url?: Nullable<string>;
+  website_url?: Nullable<string>;
+  youtube_url?: Nullable<string>;
+  youtube_handle?: Nullable<string>;
+  youtube_subscribers?: Nullable<number>;
+  instagram_url?: Nullable<string>;
+  instagram_handle?: Nullable<string>;
+  instagram_followers?: Nullable<number>;
+  tiktok_url?: Nullable<string>;
+  tiktok_handle?: Nullable<string>;
+  tiktok_followers?: Nullable<number>;
+  twitter_url?: Nullable<string>;
+  twitter_handle?: Nullable<string>;
+  twitter_followers?: Nullable<number>;
+  twitch_url?: Nullable<string>;
+  twitch_handle?: Nullable<string>;
+  twitch_followers?: Nullable<number>;
+  linkedin_url?: Nullable<string>;
+  facebook_url?: Nullable<string>;
+  primary_niche: string;
+  secondary_niches?: Nullable<string[]>;
+  content_types?: Nullable<string[]>;
+  content_language?: Nullable<string[]>;
+  total_followers: number;
+  total_reach?: Nullable<number>;
+  average_views?: Nullable<number>;
+  engagement_rate?: Nullable<number>;
+  audience_age_primary?: Nullable<string>;
+  audience_age_secondary?: Nullable<string[]>;
+  audience_gender_split?: Nullable<Record<string, any>>;
+  audience_locations?: Nullable<Record<string, any>>;
+  audience_interests?: Nullable<string[]>;
+  average_engagement_per_post?: Nullable<number>;
+  posting_frequency?: Nullable<string>;
+  best_performing_content_type?: Nullable<string>;
+  peak_posting_times?: Nullable<Record<string, any>>;
+  years_of_experience?: Nullable<number>;
+  content_creation_full_time: boolean;
+  team_size: number;
+  equipment_quality?: Nullable<string>;
+  editing_software?: Nullable<string[]>;
+  collaboration_types?: Nullable<string[]>;
+  preferred_brands_style?: Nullable<string[]>;
+  not_interested_in?: Nullable<string[]>;
+  rate_per_post?: Nullable<number>;
+  rate_per_video?: Nullable<number>;
+  rate_per_story?: Nullable<number>;
+  rate_per_reel?: Nullable<number>;
+  rate_negotiable: boolean;
+  accepts_product_only_deals: boolean;
+  minimum_deal_value?: Nullable<number>;
+  preferred_payment_terms?: Nullable<string>;
+  portfolio_links?: Nullable<string[]>;
+  past_brand_collaborations?: Nullable<string[]>;
+  case_study_links?: Nullable<string[]>;
+  media_kit_url?: Nullable<string>;
+  email_verified?: Nullable<boolean>;
+  phone_verified?: Nullable<boolean>;
+  identity_verified?: Nullable<boolean>;
+  profile_completion_percentage: number;
+  is_active?: Nullable<boolean>;
+  is_featured?: Nullable<boolean>;
+  is_verified_creator?: Nullable<boolean>;
+  featured_until?: Nullable<string>;
+  ai_profile_summary?: Nullable<string>;
+  search_keywords?: Nullable<string[]>;
+  matching_score_base?: Nullable<number>;
+  social_platforms?: Nullable<Record<string, any>>;
+  created_at?: Nullable<string>;
+  updated_at?: Nullable<string>;
+  last_active_at?: Nullable<string>;
+  [key: string]: any;
+}
+
+/**
+ * Get brand profile
+ */
+export async function getBrandProfile(): Promise<BrandProfile> {
+  const response = await authenticatedFetch(`${API_BASE_URL}/brand/profile`, {
+    method: "GET",
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.detail || "Failed to fetch brand profile");
+  }
+
+  return response.json();
+}
+
+/**
+ * Update brand profile
+ */
+export async function updateBrandProfile(
+  data: Partial<BrandProfile>
+): Promise<BrandProfile> {
+  const response = await authenticatedFetch(`${API_BASE_URL}/brand/profile`, {
+    method: "PUT",
+    body: JSON.stringify({ data }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.detail || "Failed to update brand profile");
+  }
+
+  return response.json();
+}
+
+/**
+ * Get creator profile
+ */
+export async function getCreatorProfile(): Promise<CreatorProfile> {
+  const response = await authenticatedFetch(`${API_BASE_URL}/creator/profile`, {
+    method: "GET",
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.detail || "Failed to fetch creator profile");
+  }
+
+  return response.json();
+}
+
+/**
+ * Update creator profile
+ */
+export async function updateCreatorProfile(
+  data: Partial<CreatorProfile>
+): Promise<CreatorProfile> {
+  const response = await authenticatedFetch(`${API_BASE_URL}/creator/profile`, {
+    method: "PUT",
+    body: JSON.stringify({ data }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.detail || "Failed to update creator profile");
+  }
+
+  return response.json();
+}
+
+/**
+ * Use AI to fill brand profile
+ */
+export async function aiFillBrandProfile(
+  userInput: string
+): Promise<{ message: string; data: Partial<BrandProfile> }> {
+  const response = await authenticatedFetch(
+    `${API_BASE_URL}/brand/profile/ai-fill`,
+    {
+      method: "POST",
+      body: JSON.stringify({ user_input: userInput }),
+    }
+  );
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.detail || "Failed to generate profile data");
+  }
+
+  return response.json();
+}
+
+/**
+ * Use AI to fill creator profile
+ */
+export async function aiFillCreatorProfile(
+  userInput: string
+): Promise<{ message: string; data: Partial<CreatorProfile> }> {
+  const response = await authenticatedFetch(
+    `${API_BASE_URL}/creator/profile/ai-fill`,
+    {
+      method: "POST",
+      body: JSON.stringify({ user_input: userInput }),
+    }
+  );
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.detail || "Failed to generate profile data");
+  }
+
+  return response.json();
+}