diff --git a/Backend/.env-example b/Backend/.env-example
index f23fbd0..18e42cd 100644
--- a/Backend/.env-example
+++ b/Backend/.env-example
@@ -5,4 +5,6 @@ port=5432
 dbname=postgres
 GROQ_API_KEY=
 SUPABASE_URL=
-SUPABASE_KEY=
\ No newline at end of file
+SUPABASE_KEY=
+GEMINI_API_KEY=
+YOUTUBE_API_KEY=
\ No newline at end of file
diff --git a/Backend/app/db/seed.py b/Backend/app/db/seed.py
index 9b8936a..77a015e 100644
--- a/Backend/app/db/seed.py
+++ b/Backend/app/db/seed.py
@@ -1,6 +1,6 @@
-from datetime import datetime, timezone
-from db.db import AsyncSessionLocal
-from models.models import User
+from datetime import datetime
+from app.db.db import AsyncSessionLocal
+from app.models.models import User
 
 
 async def seed_db():
@@ -12,6 +12,8 @@ async def seed_db():
             "password": "password123",
             "role": "creator",
             "bio": "Lifestyle and travel content creator",
+            "profile_image": None,
+            "created_at": datetime.utcnow()
         },
         {
             "id": "6dbfcdd5-795f-49c1-8f7a-a5538b8c6f6f",
@@ -20,6 +22,8 @@ async def seed_db():
             "password": "password123",
             "role": "brand",
             "bio": "Sustainable fashion brand looking for influencers",
+            "profile_image": None,
+            "created_at": datetime.utcnow()
         },
     ]
 
@@ -40,11 +44,10 @@ async def seed_db():
                     id=user_data["id"],
                     username=user_data["username"],
                     email=user_data["email"],
-                    password_hash=user_data[
-                        "password"
-                    ],  # Using plain password directly
                     role=user_data["role"],
+                    profile_image=user_data["profile_image"],
                     bio=user_data["bio"],
+                    created_at=user_data["created_at"]
                 )
                 session.add(user)
                 print(f"Created user: {user_data['email']}")
diff --git a/Backend/app/main.py b/Backend/app/main.py
index 41ef7b7..86d892a 100644
--- a/Backend/app/main.py
+++ b/Backend/app/main.py
@@ -1,15 +1,17 @@
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
-from db.db import engine
-from db.seed import seed_db
-from models import models, chat
-from routes.post import router as post_router
-from routes.chat import router as chat_router
+from .db.db import engine
+from .db.seed import seed_db
+from .models import models, chat
+from .routes.post import router as post_router
+from .routes.chat import router as chat_router
+from .routes.match import router as match_router
 from sqlalchemy.exc import SQLAlchemyError
 import logging
 import os
 from dotenv import load_dotenv
 from contextlib import asynccontextmanager
+from app.routes import ai
 
 # Load environment variables
 load_dotenv()
@@ -51,6 +53,9 @@ async def lifespan(app: FastAPI):
 # Include the routes
 app.include_router(post_router)
 app.include_router(chat_router)
+app.include_router(match_router)
+app.include_router(ai.router)
+app.include_router(ai.youtube_router)
 
 
 @app.get("/")
diff --git a/Backend/app/models/chat.py b/Backend/app/models/chat.py
index 5727cbf..16c6d93 100644
--- a/Backend/app/models/chat.py
+++ b/Backend/app/models/chat.py
@@ -1,7 +1,7 @@
 from sqlalchemy import Column, String, ForeignKey, DateTime, Enum, UniqueConstraint
 from sqlalchemy.orm import relationship
 from datetime import datetime, timezone
-from db.db import Base
+from app.db.db import Base
 import uuid
 import enum
 
diff --git a/Backend/app/models/models.py b/Backend/app/models/models.py
index fec8452..56681ab 100644
--- a/Backend/app/models/models.py
+++ b/Backend/app/models/models.py
@@ -9,10 +9,11 @@
     DECIMAL,
     DateTime,
     Boolean,
+    TIMESTAMP,
 )
 from sqlalchemy.orm import relationship
-from datetime import datetime, timezone
-from db.db import Base
+from datetime import datetime
+from app.db.db import Base
 import uuid
 
 
@@ -27,18 +28,14 @@ class User(Base):
     id = Column(String, primary_key=True, default=generate_uuid)
     username = Column(String, unique=True, nullable=False)
     email = Column(String, unique=True, nullable=False)
-    password_hash = Column(Text, nullable=False)  # Restored for now
+    # password_hash = Column(Text, nullable=False)  # Removed as Supabase handles auth
     role = Column(String, nullable=False)  # 'creator' or 'brand'
     profile_image = Column(Text, nullable=True)
     bio = Column(Text, nullable=True)
-    created_at = Column(
-        DateTime(timezone=True), default=lambda: datetime.now(timezone.utc)
-    )
+    created_at = Column(TIMESTAMP, default=datetime.utcnow)
 
     is_online = Column(Boolean, default=False)  # ✅ Track if user is online
-    last_seen = Column(
-        DateTime(timezone=True), default=lambda: datetime.now(timezone.utc)
-    )
+    last_seen = Column(TIMESTAMP, default=datetime.utcnow)
 
     audience = relationship("AudienceInsights", back_populates="user", uselist=False)
     sponsorships = relationship("Sponsorship", back_populates="brand")
diff --git a/Backend/app/routes/ai.py b/Backend/app/routes/ai.py
index e69de29..a21a482 100644
--- a/Backend/app/routes/ai.py
+++ b/Backend/app/routes/ai.py
@@ -0,0 +1,101 @@
+# FastAPI router for AI-powered endpoints, including trending niches
+from fastapi import APIRouter, HTTPException, Query
+from datetime import date
+import os
+import requests
+import json
+from supabase import create_client, Client
+from requests.adapters import HTTPAdapter
+from urllib3.util.retry import Retry
+
+# Initialize router
+router = APIRouter()
+
+# Load environment variables for Supabase and Gemini
+SUPABASE_URL = os.environ.get("SUPABASE_URL")
+SUPABASE_KEY = os.environ.get("SUPABASE_KEY")
+GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY")
+
+# Validate required environment variables
+if not all([SUPABASE_URL, SUPABASE_KEY, GEMINI_API_KEY]):
+    raise ValueError("Missing required environment variables: SUPABASE_URL, SUPABASE_KEY, GEMINI_API_KEY")
+
+supabase: Client = create_client(SUPABASE_URL, SUPABASE_KEY)
+
+def fetch_from_gemini():
+    prompt = (
+        "List the top 6 trending content niches for creators and brands this week. For each, provide: name (the niche), insight (a short qualitative reason why it's trending), and global_activity (a number from 1 to 5, where 5 means very high global activity in this category, and 1 means low).Return as a JSON array of objects with keys: name, insight, global_activity."
+    )
+    url = f"https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-lite:generateContent?key={GEMINI_API_KEY}"
+    # Set up retry strategy
+    retry_strategy = Retry(
+        total=3,
+        backoff_factor=1,
+        status_forcelist=[429, 500, 502, 503, 504],
+        allowed_methods=["POST"],
+    )
+    adapter = HTTPAdapter(max_retries=retry_strategy)
+    http = requests.Session()
+    http.mount("https://", adapter)
+    http.mount("http://", adapter)
+    resp = http.post(url, json={"contents": [{"parts": [{"text": prompt}]}]}, timeout=(3.05, 10))
+    resp.raise_for_status()
+    print("Gemini raw response:", resp.text)
+    data = resp.json()
+    print("Gemini parsed JSON:", data)
+    text = data['candidates'][0]['content']['parts'][0]['text']
+    print("Gemini text to parse as JSON:", text)
+    # Remove Markdown code block if present
+    if text.strip().startswith('```'):
+        text = text.strip().split('\n', 1)[1]  # Remove the first line (```json)
+        text = text.rsplit('```', 1)[0]        # Remove the last ```
+        text = text.strip()
+    return json.loads(text)
+
+@router.get("/api/trending-niches")
+def trending_niches():
+    """
+    API endpoint to get trending niches for the current day.
+    - If today's data exists in Supabase, return it.
+    - Otherwise, fetch from Gemini, store in Supabase, and return the new data.
+    - If Gemini fails, fallback to the most recent data available.
+    """
+    today = str(date.today())
+    # Check if today's data exists in Supabase
+    result = supabase.table("trending_niches").select("*").eq("fetched_at", today).execute()
+    if not result.data:
+        # Fetch from Gemini and store
+        try:
+            niches = fetch_from_gemini()
+            for niche in niches:
+                supabase.table("trending_niches").insert({
+                    "name": niche["name"],
+                    "insight": niche["insight"],
+                    "global_activity": int(niche["global_activity"]),
+                    "fetched_at": today
+                }).execute()
+            result = supabase.table("trending_niches").select("*").eq("fetched_at", today).execute()
+        except Exception as e:
+            print("Gemini fetch failed:", e)
+            # fallback: serve most recent data
+            result = supabase.table("trending_niches").select("*").order("fetched_at", desc=True).limit(6).execute()
+    return result.data
+
+youtube_router = APIRouter(prefix="/youtube", tags=["YouTube"])
+
+@youtube_router.get("/channel-info")
+def get_youtube_channel_info(channelId: str = Query(..., description="YouTube Channel ID")):
+    """
+    Proxy endpoint to fetch YouTube channel info securely from the backend.
+    The API key is kept secret and rate limiting can be enforced here.
+    """
+    api_key = os.getenv("YOUTUBE_API_KEY")
+    if not api_key:
+        raise HTTPException(status_code=500, detail="YouTube API key not configured on server.")
+    url = f"https://www.googleapis.com/youtube/v3/channels?part=snippet,statistics&id={channelId}&key={api_key}"
+    try:
+        resp = requests.get(url, timeout=10)
+        resp.raise_for_status()
+        return resp.json()
+    except requests.RequestException as e:
+        raise HTTPException(status_code=502, detail=f"YouTube API error: {str(e)}")
diff --git a/Backend/app/routes/auth.py b/Backend/app/routes/auth.py
index e69de29..19d59a2 100644
--- a/Backend/app/routes/auth.py
+++ b/Backend/app/routes/auth.py
@@ -0,0 +1,7 @@
+from fastapi import APIRouter
+
+router = APIRouter()
+
+@router.get("/auth/ping")
+def ping():
+    return {"message": "Auth route is working!"}
diff --git a/Backend/app/routes/chat.py b/Backend/app/routes/chat.py
index 1188d32..f51d6b7 100644
--- a/Backend/app/routes/chat.py
+++ b/Backend/app/routes/chat.py
@@ -7,12 +7,12 @@
     HTTPException,
 )
 from sqlalchemy.ext.asyncio import AsyncSession
-from db.db import get_db
-from services.chat_services import chat_service
+from ..db.db import get_db
+from ..services.chat_services import chat_service
 from redis.asyncio import Redis
-from services.redis_client import get_redis
+from ..services.redis_client import get_redis
 import asyncio
-from services.chat_pubsub import listen_to_channel
+from ..services.chat_pubsub import listen_to_channel
 
 router = APIRouter(prefix="/chat", tags=["Chat"])
 
diff --git a/Backend/app/routes/match.py b/Backend/app/routes/match.py
new file mode 100644
index 0000000..48ba7f5
--- /dev/null
+++ b/Backend/app/routes/match.py
@@ -0,0 +1,29 @@
+from fastapi import APIRouter, HTTPException
+from supabase import create_client, Client
+import os
+from dotenv import load_dotenv
+from ..services.db_service import match_creators_for_brand, match_brands_for_creator
+
+# Load environment variables
+# load_dotenv()
+# url: str = os.getenv("SUPABASE_URL")
+# key: str = os.getenv("SUPABASE_KEY")
+# supabase: Client = create_client(url, key)
+
+router = APIRouter(prefix="/match", tags=["Matching"])
+
+@router.get("/creators-for-brand/{sponsorship_id}")
+def get_creators_for_brand(sponsorship_id: str):
+    matches = match_creators_for_brand(sponsorship_id)
+    if not matches:
+        raise HTTPException(status_code=404, detail="No matching creators found.")
+    return {"matches": matches}
+
+@router.get("/brands-for-creator/{creator_id}")
+def get_brands_for_creator(creator_id: str):
+    matches = match_brands_for_creator(creator_id)
+    if not matches:
+        raise HTTPException(status_code=404, detail="No matching brand campaigns found.")
+    return {"matches": matches}
+
+# Placeholder for endpoints, logic to be added next 
\ No newline at end of file
diff --git a/Backend/app/routes/post.py b/Backend/app/routes/post.py
index d0f1413..a90e313 100644
--- a/Backend/app/routes/post.py
+++ b/Backend/app/routes/post.py
@@ -1,12 +1,12 @@
 from fastapi import APIRouter, Depends, HTTPException
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy.future import select
-from db.db import AsyncSessionLocal
-from models.models import (
+from ..db.db import AsyncSessionLocal
+from ..models.models import (
     User, AudienceInsights, Sponsorship, UserPost,
     SponsorshipApplication, SponsorshipPayment, Collaboration
 )
-from schemas.schema import (
+from ..schemas.schema import (
     UserCreate, AudienceInsightsCreate, SponsorshipCreate, UserPostCreate,
     SponsorshipApplicationCreate, SponsorshipPaymentCreate, CollaborationCreate
 )
@@ -44,7 +44,6 @@ async def create_user(user: UserCreate):
         "id": user_id,
         "username": user.username,
         "email": user.email,
-        "password_hash": user.password_hash,
         "role": user.role,
         "profile_image": user.profile_image,
         "bio": user.bio,
diff --git a/Backend/app/schemas/schema.py b/Backend/app/schemas/schema.py
index 3bd1e8c..7389488 100644
--- a/Backend/app/schemas/schema.py
+++ b/Backend/app/schemas/schema.py
@@ -5,7 +5,6 @@
 class UserCreate(BaseModel):
     username: str
     email: str
-    password_hash: str
     role: str
     profile_image: Optional[str] = None
     bio: Optional[str] = None
diff --git a/Backend/app/services/chat_services.py b/Backend/app/services/chat_services.py
index 7210990..4b5d1a6 100644
--- a/Backend/app/services/chat_services.py
+++ b/Backend/app/services/chat_services.py
@@ -2,8 +2,8 @@
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy.sql import select
 from datetime import datetime, timezone
-from models.models import User
-from models.chat import ChatList, ChatMessage, MessageStatus
+from app.models.models import User
+from app.models.chat import ChatList, ChatMessage, MessageStatus
 from typing import Dict
 from redis.asyncio import Redis
 import logging
diff --git a/Backend/app/services/db_service.py b/Backend/app/services/db_service.py
index e69de29..ccb4199 100644
--- a/Backend/app/services/db_service.py
+++ b/Backend/app/services/db_service.py
@@ -0,0 +1,85 @@
+from supabase import create_client, Client
+import os
+from dotenv import load_dotenv
+from typing import List, Dict, Any
+
+# Load environment variables
+load_dotenv()
+url: str = os.getenv("SUPABASE_URL")
+key: str = os.getenv("SUPABASE_KEY")
+supabase: Client = create_client(url, key)
+
+
+def match_creators_for_brand(sponsorship_id: str) -> List[Dict[str, Any]]:
+    # Fetch sponsorship details
+    sponsorship_resp = supabase.table("sponsorships").select("*").eq("id", sponsorship_id).execute()
+    if not sponsorship_resp.data:
+        return []
+    sponsorship = sponsorship_resp.data[0]
+
+    # Fetch all audience insights (for creators)
+    audience_resp = supabase.table("audience_insights").select("*").execute()
+    creators = []
+    for audience in audience_resp.data:
+        # Basic matching logic: audience, engagement, price, etc.
+        match_score = 0
+        # Audience age group overlap
+        if 'required_audience' in sponsorship and 'audience_age_group' in audience:
+            required_ages = sponsorship['required_audience'].get('age_group', [])
+            creator_ages = audience.get('audience_age_group', {})
+            overlap = sum([creator_ages.get(age, 0) for age in required_ages])
+            if overlap > 0:
+                match_score += 1
+        # Audience location overlap
+        if 'required_audience' in sponsorship and 'audience_location' in audience:
+            required_locs = sponsorship['required_audience'].get('location', [])
+            creator_locs = audience.get('audience_location', {})
+            overlap = sum([creator_locs.get(loc, 0) for loc in required_locs])
+            if overlap > 0:
+                match_score += 1
+        # Engagement rate
+        if audience.get('engagement_rate', 0) >= sponsorship.get('engagement_minimum', 0):
+            match_score += 1
+        # Price expectation
+        if audience.get('price_expectation', 0) <= sponsorship.get('budget', 0):
+            match_score += 1
+        if match_score >= 2:  # Threshold for a match
+            creators.append({"user_id": audience["user_id"], "match_score": match_score, **audience})
+    return creators
+
+
+def match_brands_for_creator(creator_id: str) -> List[Dict[str, Any]]:
+    # Fetch creator's audience insights
+    audience_resp = supabase.table("audience_insights").select("*").eq("user_id", creator_id).execute()
+    if not audience_resp.data:
+        return []
+    audience = audience_resp.data[0]
+
+    # Fetch all sponsorships
+    sponsorships_resp = supabase.table("sponsorships").select("*").execute()
+    matches = []
+    for sponsorship in sponsorships_resp.data:
+        match_score = 0
+        # Audience age group overlap
+        if 'required_audience' in sponsorship and 'audience_age_group' in audience:
+            required_ages = sponsorship['required_audience'].get('age_group', [])
+            creator_ages = audience.get('audience_age_group', {})
+            overlap = sum([creator_ages.get(age, 0) for age in required_ages])
+            if overlap > 0:
+                match_score += 1
+        # Audience location overlap
+        if 'required_audience' in sponsorship and 'audience_location' in audience:
+            required_locs = sponsorship['required_audience'].get('location', [])
+            creator_locs = audience.get('audience_location', {})
+            overlap = sum([creator_locs.get(loc, 0) for loc in required_locs])
+            if overlap > 0:
+                match_score += 1
+        # Engagement rate
+        if audience.get('engagement_rate', 0) >= sponsorship.get('engagement_minimum', 0):
+            match_score += 1
+        # Price expectation
+        if audience.get('price_expectation', 0) <= sponsorship.get('budget', 0):
+            match_score += 1
+        if match_score >= 2:  # Threshold for a match
+            matches.append({"sponsorship_id": sponsorship["id"], "match_score": match_score, **sponsorship})
+    return matches
diff --git a/Backend/sql.txt b/Backend/sql.txt
index 1f641c9..3ee28b5 100644
--- a/Backend/sql.txt
+++ b/Backend/sql.txt
@@ -1,8 +1,8 @@
 -- Insert into users table
-INSERT INTO users (id, username, email, password_hash, role, profile_image, bio, created_at) VALUES
-  (gen_random_uuid(), 'creator1', 'creator1@example.com', 'hashedpassword1', 'creator', 'image1.jpg', 'Bio of creator1', NOW()),
-  (gen_random_uuid(), 'brand1', 'brand1@example.com', 'hashedpassword2', 'brand', 'image2.jpg', 'Bio of brand1', NOW()),
-  (gen_random_uuid(), 'creator2', 'creator2@example.com', 'hashedpassword3', 'creator', 'image3.jpg', 'Bio of creator2', NOW());
+INSERT INTO users (id, username, email, role, profile_image, bio, created_at) VALUES
+  (gen_random_uuid(), 'creator1', 'creator1@example.com', 'creator', 'image1.jpg', 'Bio of creator1', NOW()),
+  (gen_random_uuid(), 'brand1', 'brand1@example.com', 'brand', 'image2.jpg', 'Bio of brand1', NOW()),
+  (gen_random_uuid(), 'creator2', 'creator2@example.com', 'creator', 'image3.jpg', 'Bio of creator2', NOW());
 
 -- Insert into audience_insights table
 INSERT INTO audience_insights (id, user_id, audience_age_group, audience_location, engagement_rate, average_views, time_of_attention, price_expectation, created_at) VALUES
diff --git a/Frontend/env-example b/Frontend/env-example
index 407c780..4ce57da 100644
--- a/Frontend/env-example
+++ b/Frontend/env-example
@@ -1,2 +1,3 @@
 VITE_SUPABASE_URL=https://your-project.supabase.co
-VITE_SUPABASE_ANON_KEY=your-anon-key-here
\ No newline at end of file
+VITE_SUPABASE_ANON_KEY=your-anon-key-here
+VITE_YOUTUBE_API_KEY=your-youtube-api-key-here
\ No newline at end of file
diff --git a/Frontend/public/brand.png b/Frontend/public/brand.png
new file mode 100644
index 0000000..bc29669
Binary files /dev/null and b/Frontend/public/brand.png differ
diff --git a/Frontend/public/contnetcreator.png b/Frontend/public/contnetcreator.png
new file mode 100644
index 0000000..e527063
Binary files /dev/null and b/Frontend/public/contnetcreator.png differ
diff --git a/Frontend/public/facebook.png b/Frontend/public/facebook.png
new file mode 100644
index 0000000..0c37594
Binary files /dev/null and b/Frontend/public/facebook.png differ
diff --git a/Frontend/public/instagram.png b/Frontend/public/instagram.png
new file mode 100644
index 0000000..82216ba
Binary files /dev/null and b/Frontend/public/instagram.png differ
diff --git a/Frontend/public/tiktok.png b/Frontend/public/tiktok.png
new file mode 100644
index 0000000..4b6a8ae
Binary files /dev/null and b/Frontend/public/tiktok.png differ
diff --git a/Frontend/public/youtube.png b/Frontend/public/youtube.png
new file mode 100644
index 0000000..2db89d2
Binary files /dev/null and b/Frontend/public/youtube.png differ
diff --git a/Frontend/src/App.tsx b/Frontend/src/App.tsx
index 15b8bc6..be41d2e 100644
--- a/Frontend/src/App.tsx
+++ b/Frontend/src/App.tsx
@@ -1,4 +1,5 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { useState, useEffect } from "react";
 import HomePage from "../src/pages/HomePage";
 import DashboardPage from "../src/pages/DashboardPage";
 import SponsorshipsPage from "../src/pages/Sponsorships";
@@ -10,26 +11,69 @@ import ForgotPasswordPage from "./pages/ForgotPassword";
 import ResetPasswordPage from "./pages/ResetPassword";
 import Contracts from "./pages/Contracts";
 import Analytics from "./pages/Analytics";
+import RoleSelection from "./pages/RoleSelection";
 
 import { AuthProvider } from "./context/AuthContext";
 import ProtectedRoute from "./components/ProtectedRoute";
+import PublicRoute from "./components/PublicRoute";
 import Dashboard from "./pages/Brand/Dashboard";
 import BasicDetails from "./pages/BasicDetails";
+import Onboarding from "./components/Onboarding";
 
 function App() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Set a timeout to ensure the app loads
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center flex-col">
+        <div className="text-lg font-semibold text-purple-600">Loading Inpact...</div>
+        <div className="text-xs text-gray-500 mt-2">Connecting to the platform</div>
+      </div>
+    );
+  }
+
   return (
     <Router>
       <AuthProvider>
         <Routes>
           {/* Public Routes */}
           <Route path="/" element={<HomePage />} />
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/signup" element={<SignupPage />} />
+          <Route path="/login" element={
+            <PublicRoute>
+              <LoginPage />
+            </PublicRoute>
+          } />
+          <Route path="/signup" element={
+            <PublicRoute>
+              <SignupPage />
+            </PublicRoute>
+          } />
+          <Route path="/choose-role" element={<RoleSelection />} />
+          <Route path="/onboarding/brand" element={<div>Brand Onboarding (Coming Soon)</div>} />
+          <Route path="/onboarding/creator" element={<div>Creator Onboarding (Coming Soon)</div>} />
           <Route path="/forgot-password" element={<ForgotPasswordPage />} />
           <Route path="/reset-password" element={<ResetPasswordPage />} />
-          <Route path="/brand/dashboard" element={<Dashboard />} />
+          <Route path="/brand/dashboard" element={
+            <ProtectedRoute>
+              <Dashboard />
+            </ProtectedRoute>
+          } />
           <Route path="/basicDetails/:user" element={<BasicDetails />} />
           <Route path="/creator/messages" element={<MessagesPage />} />
+          <Route path="/onboarding" element={
+            <ProtectedRoute>
+              <Onboarding />
+            </ProtectedRoute>
+          } />
 
           {/* Protected Routes*/}
           <Route
diff --git a/Frontend/src/components/Onboarding.tsx b/Frontend/src/components/Onboarding.tsx
index 9a78c9a..950b09e 100644
--- a/Frontend/src/components/Onboarding.tsx
+++ b/Frontend/src/components/Onboarding.tsx
@@ -1,37 +1,1496 @@
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { ChevronRight } from "lucide-react";
+import { useAuth } from "../context/AuthContext";
+import { Info } from "lucide-react";
+import { supabase } from "../utils/supabase";
+
+const platforms = [
+  { name: "YouTube", icon: "/youtube.png" },
+  { name: "Instagram", icon: "/instagram.png" },
+  { name: "Facebook", icon: "/facebook.png" },
+  { name: "TikTok", icon: "/tiktok.png" },
+];
+
+const steps = [
+  "Role Selection",
+  "Personal Details",
+  "Platform Selection",
+  "Platform Details",
+  "Pricing",
+  "Profile Picture",
+  "Review & Submit",
+];
+
+// const YOUTUBE_API_KEY = import.meta.env.VITE_YOUTUBE_API_KEY; // No longer needed in frontend
+
+type BrandData = {
+  brand_name: string;
+  logo: File | null;
+  website_url: string;
+  industry: string;
+  company_size: string;
+  location: string;
+  description: string;
+  contact_person: string;
+  contact_email: string;
+  contact_phone: string;
+  role: string;
+  platforms: string[];
+  social_links: Record<string, string>;
+  collaboration_types: string[];
+  preferred_creator_categories: string[];
+  brand_values: string[];
+  preferred_tone: string[];
+};
+
+const brandInitialState: BrandData = {
+  brand_name: "",
+  logo: null,
+  website_url: "",
+  industry: "",
+  company_size: "",
+  location: "",
+  description: "",
+  contact_person: "",
+  contact_email: "",
+  contact_phone: "",
+  role: "",
+  platforms: [],
+  social_links: {},
+  collaboration_types: [],
+  preferred_creator_categories: [],
+  brand_values: [],
+  preferred_tone: [],
+};
 
 export default function Onboarding() {
   const navigate = useNavigate();
+  const { user } = useAuth();
+  const [step, setStep] = useState(0);
+  const [role, setRole] = useState("");
+  const [personal, setPersonal] = useState({ name: "", email: "", age: "", gender: "", country: "", category: "", otherCategory: "" });
+  const [selectedPlatforms, setSelectedPlatforms] = useState<string[]>([]);
+  const [platformDetails, setPlatformDetails] = useState<any>({});
+  const [pricing, setPricing] = useState<any>({});
+  const [personalError, setPersonalError] = useState("");
+  const [platformDetailsError, setPlatformDetailsError] = useState("");
+  const [pricingError, setPricingError] = useState("");
+  const [profilePic, setProfilePic] = useState<File | null>(null);
+  const [profilePicError, setProfilePicError] = useState("");
+  const [submitError, setSubmitError] = useState("");
+  const [submitSuccess, setSubmitSuccess] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [brandStep, setBrandStep] = useState(0);
+  const [brandData, setBrandData] = useState<BrandData>(brandInitialState);
+  const [brandLogoPreview, setBrandLogoPreview] = useState<string | null>(null);
+  const [brandError, setBrandError] = useState("");
 
-  return (
-    <div className="bg-gray-200 flex flex-col items-center justify-center px-4 py-16">
-      <div className="max-w-md w-full text-center">
-        <h1 className="text-3xl font-bold text-gray-900">Welcome to Inpact</h1>
-        <p className="mt-2 text-gray-600">
-          Let's get you started with your profile setup
-        </p>
+  // Prefill name and email from Google user if available
+  useEffect(() => {
+    if (user) {
+      setPersonal((prev) => ({
+        ...prev,
+        name: user.user_metadata?.name || prev.name,
+        email: user.email || prev.email,
+      }));
+    }
+  }, [user]);
+
+  // Validation for personal details
+  const validatePersonal = () => {
+    if (!personal.name || personal.name.length < 2) return "Please enter a valid name.";
+    if (!personal.email) return "Email is required.";
+    if (!personal.age || isNaN(Number(personal.age)) || Number(personal.age) < 10 || Number(personal.age) > 99) return "Please enter a valid age (10-99).";
+    if (!personal.gender) return "Please select a gender.";
+    if (!personal.category) return "Please select a content category.";
+    if (personal.category === "Other" && !personal.otherCategory) return "Please enter your content category.";
+    if (!personal.country) return "Please enter a valid country.";
+    return "";
+  };
+
+  // Validation for platform details
+  const validatePlatformDetails = () => {
+    for (const platform of selectedPlatforms) {
+      const details = platformDetails[platform];
+      if (!details) return `Please fill in all details for ${platform}.`;
+      if (platform === "YouTube") {
+        if (!details.channelUrl || !details.channelId || !details.channelName) return `Please provide a valid YouTube channel for ${platform}.`;
+      } else {
+        if (!details.profileUrl || !details.followers || !details.posts) return `Please fill in all details for ${platform}.`;
+        if (isNaN(Number(details.followers)) || isNaN(Number(details.posts))) return `Followers and posts must be numbers for ${platform}.`;
+      }
+    }
+    return "";
+  };
+
+  // Validation for pricing
+  const validatePricing = () => {
+    for (const platform of selectedPlatforms) {
+      const p = pricing[platform];
+      if (!p) return `Please fill in pricing for ${platform}.`;
+      if (platform === "YouTube") {
+        if (!p.per_video_cost || !p.per_short_cost || !p.per_community_post_cost || !p.currency) return `Please fill all YouTube pricing fields.`;
+        if ([p.per_video_cost, p.per_short_cost, p.per_community_post_cost].some(v => isNaN(Number(v)))) return `YouTube pricing must be numbers.`;
+      } else if (platform === "Instagram") {
+        if (!p.per_post_cost || !p.per_story_cost || !p.per_reel_cost || !p.currency) return `Please fill all Instagram pricing fields.`;
+        if ([p.per_post_cost, p.per_story_cost, p.per_reel_cost].some(v => isNaN(Number(v)))) return `Instagram pricing must be numbers.`;
+      } else if (platform === "Facebook") {
+        if (!p.per_post_cost || !p.currency) return `Please fill all Facebook pricing fields.`;
+        if (isNaN(Number(p.per_post_cost))) return `Facebook pricing must be a number.`;
+      } else if (platform === "TikTok") {
+        if (!p.per_video_cost || !p.currency) return `Please fill all TikTok pricing fields.`;
+        if (isNaN(Number(p.per_video_cost))) return `TikTok pricing must be a number.`;
+      }
+    }
+    return "";
+  };
+
+  // Step 1: Role Selection
+  const renderRoleStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Are you a Brand or a Creator?</h2>
+      <div className="flex gap-8 justify-center">
+        <button
+          className={`flex flex-col items-center px-8 py-4 rounded-xl border-2 text-lg font-semibold transition-all duration-200 shadow-sm w-48 h-48 ${role === "brand" ? "border-purple-600 bg-purple-50" : "border-gray-300 bg-white"}`}
+          onClick={() => setRole("brand")}
+        >
+          <img src="/brand.png" alt="Brand" className="h-20 w-20 mb-2" />
+          <span className="font-bold text-xl">Brand</span>
+        </button>
+        <button
+          className={`flex flex-col items-center px-8 py-4 rounded-xl border-2 text-lg font-semibold transition-all duration-200 shadow-sm w-48 h-48 ${role === "creator" ? "border-purple-600 bg-purple-50" : "border-gray-300 bg-white"}`}
+          onClick={() => setRole("creator")}
+        >
+          <img src="/contnetcreator.png" alt="Content Creator" className="h-20 w-20 mb-2" />
+          <span className="font-bold text-xl">Content Creator</span>
+        </button>
+      </div>
+    </div>
+  );
+
+  // Step 2: Personal Details
+  const genderOptions = ["Male", "Female", "Non-binary", "Prefer not to say"];
+  const categoryOptions = [
+    "Tech",
+    "Fashion",
+    "Travel",
+    "Food",
+    "Fitness",
+    "Beauty",
+    "Gaming",
+    "Education",
+    "Music",
+    "Finance",
+    "Other",
+  ];
+  const renderPersonalStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Personal Details</h2>
+      <form className="grid grid-cols-1 gap-4 max-w-lg mx-auto">
+        <input
+          type="text"
+          placeholder="Name"
+          value={personal.name}
+          onChange={e => {
+            // Only allow letters, spaces, and basic punctuation
+            const value = e.target.value.replace(/[^a-zA-Z\s.'-]/g, "");
+            setPersonal({ ...personal, name: value });
+          }}
+          className="px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"
+          required
+        />
+        <input
+          type="email"
+          placeholder="Email"
+          value={personal.email}
+          onChange={e => setPersonal({ ...personal, email: e.target.value })}
+          className="px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"
+          disabled
+        />
+        <input
+          type="number"
+          placeholder="Age"
+          value={personal.age}
+          onChange={e => {
+            // Only allow numbers and limit to 2 digits
+            let value = e.target.value.replace(/[^0-9]/g, "");
+            if (value.length > 2) value = value.slice(0, 2);
+            setPersonal({ ...personal, age: value });
+          }}
+          className="px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"
+          min={10}
+          max={99}
+          required
+        />
+        <select
+          value={personal.gender}
+          onChange={e => setPersonal({ ...personal, gender: e.target.value })}
+          className="px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"
+          required
+        >
+          <option value="" disabled>
+            Select Gender
+          </option>
+          {genderOptions.map(opt => (
+            <option key={opt} value={opt}>{opt}</option>
+          ))}
+        </select>
+        <select
+          value={personal.category}
+          onChange={e => setPersonal({ ...personal, category: e.target.value })}
+          className="px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"
+          required
+        >
+          <option value="" disabled>
+            Select Content Category
+          </option>
+          {categoryOptions.map(opt => (
+            <option key={opt} value={opt}>{opt}</option>
+          ))}
+        </select>
+        {personal.category === "Other" && (
+          <input
+            type="text"
+            placeholder="Enter your content category"
+            value={personal.otherCategory || ""}
+            onChange={e => setPersonal({ ...personal, otherCategory: e.target.value })}
+            className="px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"
+            required
+          />
+        )}
+        <input
+          type="text"
+          placeholder="Country"
+          value={personal.country}
+          onChange={e => {
+            // Only allow letters and spaces
+            const value = e.target.value.replace(/[^a-zA-Z\s]/g, "");
+            setPersonal({ ...personal, country: value });
+          }}
+          className="px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"
+          required
+        />
+      </form>
+      {personalError && <div className="text-red-500 text-sm mt-2">{personalError}</div>}
+    </div>
+  );
 
-        <div className="mt-6 space-y-4">
-          {/* Influencer Button */}
+  // Step 3: Platform Selection
+  const renderPlatformStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Which platforms do you use?</h2>
+      <div className="flex flex-wrap gap-6 justify-center">
+        {platforms.map((platform) => (
           <button
-            onClick={() => navigate("/signup")}
-            className="w-full flex items-center justify-between bg-purple-600 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:bg-purple-700 transition"
+            key={platform.name}
+            type="button"
+            onClick={() => {
+              setSelectedPlatforms((prev) =>
+                prev.includes(platform.name)
+                  ? prev.filter((p) => p !== platform.name)
+                  : [...prev, platform.name]
+              );
+            }}
+            className={`flex flex-col items-center px-6 py-4 rounded-xl border-2 transition-all duration-200 shadow-sm w-32 h-36 ${selectedPlatforms.includes(platform.name) ? "border-purple-600 bg-purple-50" : "border-gray-300 bg-white"}`}
           >
-            I'm an Influencer
-            <ChevronRight className="h-5 w-5" />
+            <img src={platform.icon} alt={platform.name} className="h-12 w-12 mb-2" />
+            <span className="font-semibold text-lg">{platform.name}</span>
           </button>
+        ))}
+      </div>
+    </div>
+  );
+
+  // Step 4: Platform Details
+  const renderPlatformDetailsStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Platform Details</h2>
+      <div className="space-y-8">
+        {selectedPlatforms.map((platform) => (
+          <div key={platform} className="bg-gray-50 dark:bg-gray-700 rounded-xl p-6 shadow">
+            <div className="flex items-center gap-4 mb-4">
+              <img src={platforms.find(p => p.name === platform)?.icon} alt={platform} className="h-8 w-8" />
+              <span className="font-semibold text-lg">{platform}</span>
+            </div>
+            {platform === "YouTube" && (
+              <YouTubeDetails
+                details={platformDetails[platform] || {}}
+                setDetails={d => setPlatformDetails((prev: any) => ({ ...prev, [platform]: d }))}
+              />
+            )}
+            {platform === "Instagram" && (
+              <InstagramDetails
+                details={platformDetails[platform] || {}}
+                setDetails={d => setPlatformDetails((prev: any) => ({ ...prev, [platform]: d }))}
+              />
+            )}
+            {platform === "Facebook" && (
+              <FacebookDetails
+                details={platformDetails[platform] || {}}
+                setDetails={d => setPlatformDetails((prev: any) => ({ ...prev, [platform]: d }))}
+              />
+            )}
+            {platform === "TikTok" && (
+              <TikTokDetails
+                details={platformDetails[platform] || {}}
+                setDetails={d => setPlatformDetails((prev: any) => ({ ...prev, [platform]: d }))}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+      {platformDetailsError && <div className="text-red-500 text-sm mt-2">{platformDetailsError}</div>}
+    </div>
+  );
+
+  // Step 5: Pricing
+  const renderPricingStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Set Your Pricing</h2>
+      <div className="space-y-8">
+        {selectedPlatforms.map((platform) => (
+          <div key={platform} className="bg-gray-50 dark:bg-gray-700 rounded-xl p-6 shadow">
+            <div className="flex items-center gap-4 mb-4">
+              <img src={platforms.find(p => p.name === platform)?.icon} alt={platform} className="h-8 w-8" />
+              <span className="font-semibold text-lg">{platform}</span>
+            </div>
+            {platform === "YouTube" && (
+              <YouTubePricing
+                pricing={pricing[platform] || {}}
+                setPricing={d => setPricing((prev: any) => ({ ...prev, [platform]: d }))}
+              />
+            )}
+            {platform === "Instagram" && (
+              <InstagramPricing
+                pricing={pricing[platform] || {}}
+                setPricing={d => setPricing((prev: any) => ({ ...prev, [platform]: d }))}
+              />
+            )}
+            {platform === "Facebook" && (
+              <FacebookPricing
+                pricing={pricing[platform] || {}}
+                setPricing={d => setPricing((prev: any) => ({ ...prev, [platform]: d }))}
+              />
+            )}
+            {platform === "TikTok" && (
+              <TikTokPricing
+                pricing={pricing[platform] || {}}
+                setPricing={d => setPricing((prev: any) => ({ ...prev, [platform]: d }))}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+      {pricingError && <div className="text-red-500 text-sm mt-2">{pricingError}</div>}
+    </div>
+  );
+
+  // Step 5: Profile Picture Upload (new step)
+  const handleProfilePicChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setProfilePicError("");
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      if (file.size > 3 * 1024 * 1024) {
+        setProfilePicError("File size must be less than 3MB.");
+        setProfilePic(null);
+        return;
+      }
+      setProfilePic(file);
+    }
+  };
 
-          {/* Brand Button */}
+  const renderProfilePicStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Upload Profile Picture</h2>
+      <div className="flex flex-col items-start gap-2">
+        <label htmlFor="profile-pic-upload" className="inline-block px-6 py-2 bg-purple-600 text-white rounded-lg font-semibold cursor-pointer hover:bg-purple-700 transition-colors">
+          Choose File
+        </label>
+        <input
+          id="profile-pic-upload"
+          type="file"
+          accept="image/*"
+          onChange={handleProfilePicChange}
+          className="hidden"
+        />
+        <div className="flex items-center gap-4 mt-2">
+          {(profilePic || user?.user_metadata?.avatar_url) ? (
+            <img
+              src={profilePic ? URL.createObjectURL(profilePic) : user?.user_metadata?.avatar_url}
+              alt="Profile Preview"
+              className="h-20 w-20 rounded-full object-cover border-2 border-purple-500"
+            />
+          ) : (
+            <div className="h-20 w-20 rounded-full bg-gray-200 flex items-center justify-center text-gray-400">No Image</div>
+          )}
+          {profilePic && <div className="text-sm">{profilePic.name}</div>}
+        </div>
+        {profilePicError && <div className="text-red-500 text-sm mt-2">{profilePicError}</div>}
+        <div className="text-xs text-gray-500 mt-2">Max file size: 3MB. You can skip this step if you want to use your Google/YouTube profile image.</div>
+      </div>
+    </div>
+  );
+
+  // Step 6: Review & Submit
+  const handleSubmit = async () => {
+    setSubmitting(true);
+    setSubmitError("");
+    setSubmitSuccess("");
+    setProgress(0);
+    let profile_image_url = null;
+    try {
+      // 1. Upload profile picture if provided
+      if (profilePic) {
+        setProgress(20);
+        const fileExt = profilePic.name.split('.').pop();
+        const fileName = `${user?.id}_${Date.now()}.${fileExt}`;
+        const { data, error } = await supabase.storage.from('profile-pictures').upload(fileName, profilePic);
+        if (error) throw error;
+        profile_image_url = `${supabase.storage.from('profile-pictures').getPublicUrl(fileName).data.publicUrl}`;
+      } else if (user?.user_metadata?.avatar_url) {
+        profile_image_url = user.user_metadata.avatar_url;
+      }
+      setProgress(40);
+      // 2. Update users table
+      const categoryToSave = personal.category === 'Other' ? personal.otherCategory : personal.category;
+      const { error: userError } = await supabase.from('users').update({
+        username: personal.name,
+        age: personal.age,
+        gender: personal.gender,
+        country: personal.country,
+        category: categoryToSave,
+        profile_image: profile_image_url,
+        role,
+      }).eq('id', user?.id);
+      if (userError) throw userError;
+      setProgress(60);
+      // 3. Insert social_profiles for each platform
+      for (const platform of selectedPlatforms) {
+        const details = platformDetails[platform];
+        const p = pricing[platform];
+        const profileData: any = {
+          user_id: user?.id,
+          platform,
+          per_post_cost: p?.per_post_cost ? Number(p.per_post_cost) : null,
+          per_story_cost: p?.per_story_cost ? Number(p.per_story_cost) : null,
+          per_reel_cost: p?.per_reel_cost ? Number(p.per_reel_cost) : null,
+          per_video_cost: p?.per_video_cost ? Number(p.per_video_cost) : null,
+          per_short_cost: p?.per_short_cost ? Number(p.per_short_cost) : null,
+          per_community_post_cost: p?.per_community_post_cost ? Number(p.per_community_post_cost) : null,
+          per_post_cost_currency: p?.currency || null,
+          per_story_cost_currency: p?.currency || null,
+          per_reel_cost_currency: p?.currency || null,
+          per_video_cost_currency: p?.currency || null,
+          per_short_cost_currency: p?.currency || null,
+          per_community_post_cost_currency: p?.currency || null,
+        };
+        if (platform === 'YouTube') {
+          Object.assign(profileData, {
+            channel_id: details.channelId,
+            channel_name: details.channelName,
+            profile_image: details.profile_image,
+            subscriber_count: details.subscriber_count ? Number(details.subscriber_count) : null,
+            total_views: details.total_views ? Number(details.total_views) : null,
+            video_count: details.video_count ? Number(details.video_count) : null,
+            channel_url: details.channelUrl,
+          });
+        } else {
+          Object.assign(profileData, {
+            username: details.profileUrl,
+            followers: details.followers ? Number(details.followers) : null,
+            posts: details.posts ? Number(details.posts) : null,
+            profile_image: null,
+            channel_url: details.profileUrl,
+          });
+        }
+        // Upsert to avoid duplicates
+        const { error: spError } = await supabase.from('social_profiles').upsert(profileData, { onConflict: 'user_id,platform' });
+        if (spError) throw spError;
+      }
+      setProgress(90);
+      setSubmitSuccess('Onboarding complete! Your details have been saved.');
+      setProgress(100);
+      // Route based on role
+      if (role === "brand") {
+        setTimeout(() => navigate('/brand/dashboard'), 1200);
+      } else {
+        setTimeout(() => navigate('/dashboard'), 1200);
+      }
+    } catch (err: any) {
+      setSubmitError(err.message || 'Failed to submit onboarding data.');
+      setProgress(0);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const renderReviewStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Review & Submit</h2>
+      {submitting && (
+        <div className="w-full bg-gray-200 rounded-full h-3 mb-4 overflow-hidden">
+          <div
+            className="bg-purple-600 h-3 rounded-full transition-all duration-300"
+            style={{ width: `${progress}%` }}
+          ></div>
+        </div>
+      )}
+      <div className="mb-4">
+        <label className="block font-medium mb-2">Profile Picture</label>
+        <div className="flex items-center gap-4">
+          {(profilePic || user?.user_metadata?.avatar_url) ? (
+            <img
+              src={profilePic ? URL.createObjectURL(profilePic) : user?.user_metadata?.avatar_url}
+              alt="Profile Preview"
+              className="h-20 w-20 rounded-full object-cover border-2 border-purple-500"
+            />
+          ) : (
+            <div className="h-20 w-20 rounded-full bg-gray-200 flex items-center justify-center text-gray-400">No Image</div>
+          )}
+          {profilePic && <div className="text-sm">{profilePic.name}</div>}
+        </div>
+      </div>
+      <div className="mb-4">
+        <h3 className="font-semibold">Personal Details</h3>
+        <ul className="text-sm">
+          <li><b>Name:</b> {personal.name}</li>
+          <li><b>Email:</b> {personal.email}</li>
+          <li><b>Age:</b> {personal.age}</li>
+          <li><b>Gender:</b> {personal.gender}</li>
+          <li><b>Country:</b> {personal.country}</li>
+          <li><b>Category:</b> {personal.category === 'Other' ? personal.otherCategory : personal.category}</li>
+        </ul>
+      </div>
+      <div className="mb-4">
+        <h3 className="font-semibold">Platforms</h3>
+        {selectedPlatforms.map(platform => (
+          <div key={platform} className="mb-2">
+            <b>{platform}</b>
+            <ul className="text-sm ml-4">
+              {platform === 'YouTube' ? (
+                <>
+                  <li><b>Channel Name:</b> {platformDetails[platform]?.channelName}</li>
+                  <li><b>Subscribers:</b> {platformDetails[platform]?.subscriber_count}</li>
+                  <li><b>Videos:</b> {platformDetails[platform]?.video_count}</li>
+                  <li><b>Views:</b> {platformDetails[platform]?.total_views}</li>
+                  <li><b>Channel URL:</b> {platformDetails[platform]?.channelUrl}</li>
+                  <li><b>Pricing:</b> Video: {pricing[platform]?.per_video_cost}, Short: {pricing[platform]?.per_short_cost}, Community Post: {pricing[platform]?.per_community_post_cost} ({pricing[platform]?.currency})</li>
+                </>
+              ) : (
+                <>
+                  <li><b>Profile URL:</b> {platformDetails[platform]?.profileUrl}</li>
+                  <li><b>Followers:</b> {platformDetails[platform]?.followers}</li>
+                  <li><b>Posts:</b> {platformDetails[platform]?.posts}</li>
+                  <li><b>Pricing:</b> {platform === 'Instagram' ? `Post: ${pricing[platform]?.per_post_cost}, Story: ${pricing[platform]?.per_story_cost}, Reel: ${pricing[platform]?.per_reel_cost}` : `Post/Video: ${pricing[platform]?.per_post_cost || pricing[platform]?.per_video_cost}`} ({pricing[platform]?.currency})</li>
+                </>
+              )}
+            </ul>
+          </div>
+        ))}
+      </div>
+      {submitError && <div className="text-red-500 text-sm mb-2">{submitError}</div>}
+      {submitSuccess && <div className="text-green-600 text-sm mb-2">{submitSuccess}</div>}
+    </div>
+  );
+
+  const handleNext = () => {
+    if (step === 1) {
+      const err = validatePersonal();
+      if (err) {
+        setPersonalError(err);
+        return;
+      } else {
+        setPersonalError("");
+      }
+    }
+    if (step === 3) {
+      const err = validatePlatformDetails();
+      if (err) {
+        setPlatformDetailsError(err);
+        return;
+      } else {
+        setPlatformDetailsError("");
+      }
+    }
+    if (step === 4) {
+      const err = validatePricing();
+      if (err) {
+        setPricingError(err);
+        return;
+      } else {
+        setPricingError("");
+      }
+    }
+    if (step < steps.length - 1) setStep(step + 1);
+  };
+  const handleBack = () => {
+    if (step > 0) setStep(step - 1);
+  };
+
+  // Brand onboarding steps
+  const brandSteps = [
+    "Brand Details",
+    "Contact Information",
+    "Platforms",
+    "Social Links",
+    "Collaboration Preferences",
+    "Review & Submit",
+  ];
+
+  // Brand Step 1: Brand Details
+  const companySizes = ["1-10", "11-50", "51-200", "201-1000", "1000+"];
+  const industries = ["Tech", "Fashion", "Travel", "Food", "Fitness", "Beauty", "Gaming", "Education", "Music", "Finance", "Other"];
+  const handleBrandLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setBrandData({ ...brandData, logo: e.target.files[0] });
+      setBrandLogoPreview(URL.createObjectURL(e.target.files[0]));
+    }
+  };
+  const renderBrandDetailsStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Brand Details</h2>
+      <input
+        type="text"
+        placeholder="Brand Name"
+        value={brandData.brand_name}
+        onChange={e => setBrandData({ ...brandData, brand_name: e.target.value })}
+        className="w-full px-4 py-3 rounded-lg border border-gray-300 mb-2"
+      />
+      <label className="block font-medium mb-1">Logo (optional)</label>
+      <label htmlFor="brand-logo-upload" className="inline-block px-4 py-2 bg-purple-600 text-white rounded-lg font-semibold cursor-pointer hover:bg-purple-700 mb-2">Choose Logo</label>
+      <input id="brand-logo-upload" type="file" accept="image/*" onChange={handleBrandLogoChange} className="hidden" />
+      {brandLogoPreview && <img src={brandLogoPreview} alt="Logo Preview" className="h-16 w-16 rounded-full object-cover border mb-2" />}
+      <input
+        type="text"
+        placeholder="Website URL"
+        value={brandData.website_url}
+        onChange={e => setBrandData({ ...brandData, website_url: e.target.value })}
+        className="w-full px-4 py-3 rounded-lg border border-gray-300 mb-2"
+      />
+      <select
+        value={brandData.industry}
+        onChange={e => setBrandData({ ...brandData, industry: e.target.value })}
+        className="w-full px-4 py-3 rounded-lg border border-gray-300 mb-2"
+      >
+        <option value="" disabled>Select Industry</option>
+        {industries.map(ind => <option key={ind} value={ind}>{ind}</option>)}
+      </select>
+      <select
+        value={brandData.company_size}
+        onChange={e => setBrandData({ ...brandData, company_size: e.target.value })}
+        className="w-full px-4 py-3 rounded-lg border border-gray-300 mb-2"
+      >
+        <option value="" disabled>Select Company Size</option>
+        {companySizes.map(size => <option key={size} value={size}>{size}</option>)}
+      </select>
+      <input
+        type="text"
+        placeholder="Location"
+        value={brandData.location}
+        onChange={e => setBrandData({ ...brandData, location: e.target.value })}
+        className="w-full px-4 py-3 rounded-lg border border-gray-300 mb-2"
+      />
+      <textarea
+        placeholder="Description"
+        value={brandData.description}
+        onChange={e => setBrandData({ ...brandData, description: e.target.value })}
+        className="w-full px-4 py-3 rounded-lg border border-gray-300 mb-2"
+        rows={3}
+      />
+    </div>
+  );
+
+  // Brand Step 2: Contact Information
+  const renderBrandContactStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Contact Information</h2>
+      <input
+        type="text"
+        placeholder="Contact Person"
+        value={brandData.contact_person}
+        onChange={e => setBrandData({ ...brandData, contact_person: e.target.value })}
+        className="w-full px-4 py-3 rounded-lg border border-gray-300 mb-2"
+      />
+      <input
+        type="email"
+        placeholder="Contact Email"
+        value={brandData.contact_email}
+        onChange={e => setBrandData({ ...brandData, contact_email: e.target.value })}
+        className="w-full px-4 py-3 rounded-lg border border-gray-300 mb-2"
+      />
+      <input
+        type="text"
+        placeholder="Contact Phone"
+        value={brandData.contact_phone}
+        onChange={e => setBrandData({ ...brandData, contact_phone: e.target.value })}
+        className="w-full px-4 py-3 rounded-lg border border-gray-300 mb-2"
+      />
+      <input
+        type="text"
+        placeholder="Role at Company"
+        value={brandData.role}
+        onChange={e => setBrandData({ ...brandData, role: e.target.value })}
+        className="w-full px-4 py-3 rounded-lg border border-gray-300 mb-2"
+      />
+    </div>
+  );
+
+  // Brand Step 3: Platforms
+  const allBrandPlatforms = [
+    { name: "Instagram", key: "instagram_url" },
+    { name: "YouTube", key: "youtube_url" },
+    { name: "Facebook", key: "facebook_url" },
+    { name: "Twitter", key: "twitter_url" },
+    { name: "LinkedIn", key: "linkedin_url" },
+    // Add TikTok if needed
+  ];
+  const renderBrandPlatformsStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Which platforms is your brand on?</h2>
+      <div className="flex flex-wrap gap-4">
+        {allBrandPlatforms.map(platform => (
           <button
-            onClick={() => navigate("/signup")}
-            className="w-full flex items-center justify-between bg-purple-600 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:bg-purple-700 transition"
+            key={platform.name}
+            type="button"
+            onClick={() => {
+              setBrandData(prev => {
+                const exists = prev.platforms.includes(platform.name);
+                return {
+                  ...prev,
+                  platforms: exists
+                    ? prev.platforms.filter(p => p !== platform.name)
+                    : [...prev.platforms, platform.name],
+                };
+              });
+            }}
+            className={`px-6 py-3 rounded-lg border-2 font-semibold ${brandData.platforms.includes(platform.name) ? "border-purple-600 bg-purple-50" : "border-gray-300 bg-white"}`}
           >
-            I'm a Brand
-            <ChevronRight className="h-5 w-5" />
+            {platform.name}
           </button>
+        ))}
+      </div>
+    </div>
+  );
+
+  // Brand Step 4: Social Links (conditional)
+  const socialLinkExamples: Record<string, string> = {
+    instagram_url: "https://instagram.com/yourbrand",
+    youtube_url: "https://youtube.com/yourbrand",
+    facebook_url: "https://facebook.com/yourbrand",
+    twitter_url: "https://twitter.com/yourbrand",
+    linkedin_url: "https://linkedin.com/company/yourbrand",
+  };
+  const renderBrandSocialLinksStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Social Links</h2>
+      {brandData.platforms.map(platform => {
+        const key = allBrandPlatforms.find(p => p.name === platform)?.key;
+        if (!key) return null;
+        return (
+          <div key={platform} className="mb-2">
+            <label className="block font-medium mb-1">{platform} URL</label>
+            <input
+              type="text"
+              placeholder={socialLinkExamples[key] || `Enter your ${platform} URL`}
+              value={brandData.social_links[key] || ""}
+              onChange={e => setBrandData({
+                ...brandData,
+                social_links: { ...brandData.social_links, [key]: e.target.value },
+              })}
+              className="w-full px-4 py-3 rounded-lg border border-gray-300"
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  // Brand Step 5: Collaboration Preferences
+  const collabTypes = ["Sponsored Posts", "Giveaways", "Product Reviews", "Long-term Partnerships", "Affiliate Marketing", "Events", "Content Creation", "Brand Ambassadorship", "Social Media Takeover", "Other"];
+  const creatorCategories = ["Tech", "Fashion", "Travel", "Food", "Fitness", "Beauty", "Gaming", "Education", "Music", "Finance", "Other"];
+  const brandValues = ["Sustainability", "Innovation", "Diversity", "Quality", "Community", "Transparency", "Customer Focus", "Creativity", "Integrity", "Other"];
+  const tones = ["Professional", "Friendly", "Humorous", "Inspirational", "Bold", "Casual", "Formal", "Playful", "Serious", "Other"];
+  const toggleMultiSelect = (field: keyof BrandData, value: string) => {
+    setBrandData(prev => {
+      const arr = prev[field] as string[];
+      return {
+        ...prev,
+        [field]: arr.includes(value) ? arr.filter(v => v !== value) : [...arr, value],
+      };
+    });
+  };
+  const renderBrandCollabPrefsStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Collaboration Preferences</h2>
+      <div className="mb-4">
+        <label className="block font-medium mb-1">Collaboration Types</label>
+        <div className="flex flex-wrap gap-2">
+          {collabTypes.map(type => (
+            <button
+              key={type}
+              type="button"
+              onClick={() => toggleMultiSelect("collaboration_types", type)}
+              className={`px-4 py-2 rounded-lg border-2 text-sm ${brandData.collaboration_types.includes(type) ? "border-purple-600 bg-purple-50" : "border-gray-300 bg-white"}`}
+            >
+              {type}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="mb-4">
+        <label className="block font-medium mb-1">Preferred Creator Categories</label>
+        <div className="flex flex-wrap gap-2">
+          {creatorCategories.map(cat => (
+            <button
+              key={cat}
+              type="button"
+              onClick={() => toggleMultiSelect("preferred_creator_categories", cat)}
+              className={`px-4 py-2 rounded-lg border-2 text-sm ${brandData.preferred_creator_categories.includes(cat) ? "border-purple-600 bg-purple-50" : "border-gray-300 bg-white"}`}
+            >
+              {cat}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="mb-4">
+        <label className="block font-medium mb-1">Brand Values</label>
+        <div className="flex flex-wrap gap-2">
+          {brandValues.map(val => (
+            <button
+              key={val}
+              type="button"
+              onClick={() => toggleMultiSelect("brand_values", val)}
+              className={`px-4 py-2 rounded-lg border-2 text-sm ${brandData.brand_values.includes(val) ? "border-purple-600 bg-purple-50" : "border-gray-300 bg-white"}`}
+            >
+              {val}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="mb-4">
+        <label className="block font-medium mb-1">Preferred Tone</label>
+        <div className="flex flex-wrap gap-2">
+          {tones.map(tone => (
+            <button
+              key={tone}
+              type="button"
+              onClick={() => toggleMultiSelect("preferred_tone", tone)}
+              className={`px-4 py-2 rounded-lg border-2 text-sm ${brandData.preferred_tone.includes(tone) ? "border-purple-600 bg-purple-50" : "border-gray-300 bg-white"}`}
+            >
+              {tone}
+            </button>
+          ))}
         </div>
       </div>
     </div>
   );
+
+  // Brand step validation
+  const validateBrandStep = () => {
+    if (brandStep === 0) {
+      if (!brandData.brand_name) return "Brand name is required.";
+      if (!brandData.website_url) return "Website URL is required.";
+      if (!brandData.industry) return "Industry is required.";
+      if (!brandData.company_size) return "Company size is required.";
+      if (!brandData.location) return "Location is required.";
+      if (!brandData.description) return "Description is required.";
+    }
+    if (brandStep === 1) {
+      if (!brandData.contact_person) return "Contact person is required.";
+      if (!brandData.contact_email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(brandData.contact_email)) return "Valid contact email is required.";
+    }
+    if (brandStep === 2) {
+      if (!brandData.platforms.length) return "Select at least one platform.";
+    }
+    if (brandStep === 3) {
+      for (const platform of brandData.platforms) {
+        const key = allBrandPlatforms.find(p => p.name === platform)?.key;
+        if (key && !brandData.social_links[key]) return `Enter your ${platform} URL.`;
+        if (key && brandData.social_links[key] && !/^https?:\/\//.test(brandData.social_links[key])) return `${platform} URL must start with http:// or https://`;
+      }
+    }
+    if (brandStep === 4) {
+      if (!brandData.collaboration_types.length) return "Select at least one collaboration type.";
+      if (!brandData.preferred_creator_categories.length) return "Select at least one creator category.";
+      if (!brandData.brand_values.length) return "Select at least one brand value.";
+      if (!brandData.preferred_tone.length) return "Select at least one preferred tone.";
+    }
+    return "";
+  };
+  const handleBrandNext = () => {
+    const err = validateBrandStep();
+    if (err) {
+      setBrandError(err);
+      return;
+    } else {
+      setBrandError("");
+    }
+    if (brandStep < brandSteps.length - 1) setBrandStep(brandStep + 1);
+  };
+  const handleBrandBack = () => {
+    if (brandStep > 0) setBrandStep(brandStep - 1);
+  };
+
+  // Brand Step 6: Review & Submit
+  const [brandSubmitting, setBrandSubmitting] = useState(false);
+  const [brandSubmitError, setBrandSubmitError] = useState("");
+  const [brandSubmitSuccess, setBrandSubmitSuccess] = useState("");
+  const handleBrandSubmit = async () => {
+    setBrandSubmitting(true);
+    setBrandSubmitError("");
+    setBrandSubmitSuccess("");
+    let logo_url = null;
+    try {
+      // 1. Upload logo if provided
+      if (brandData.logo) {
+        const fileExt = brandData.logo.name.split('.').pop();
+        const fileName = `${user?.id}_${Date.now()}.${fileExt}`;
+        const { data, error } = await supabase.storage.from('brand-logos').upload(fileName, brandData.logo);
+        if (error) throw error;
+        logo_url = supabase.storage.from('brand-logos').getPublicUrl(fileName).data.publicUrl;
+      }
+      // 2. Insert into brands table
+      const { error: brandError } = await supabase.from('brands').insert({
+        user_id: user?.id,
+        brand_name: brandData.brand_name,
+        logo_url,
+        website_url: brandData.website_url,
+        industry: brandData.industry,
+        company_size: brandData.company_size,
+        location: brandData.location,
+        description: brandData.description,
+        contact_person: brandData.contact_person,
+        contact_email: brandData.contact_email,
+        contact_phone: brandData.contact_phone,
+        role: brandData.role,
+        instagram_url: brandData.social_links.instagram_url || null,
+        facebook_url: brandData.social_links.facebook_url || null,
+        twitter_url: brandData.social_links.twitter_url || null,
+        linkedin_url: brandData.social_links.linkedin_url || null,
+        youtube_url: brandData.social_links.youtube_url || null,
+        collaboration_types: brandData.collaboration_types,
+        preferred_creator_categories: brandData.preferred_creator_categories,
+        brand_values: brandData.brand_values,
+        preferred_tone: brandData.preferred_tone,
+        platforms: brandData.platforms,
+      });
+      if (brandError) throw brandError;
+      setBrandSubmitSuccess("Brand onboarding complete! Redirecting to dashboard...");
+      // Clear localStorage for brand onboarding
+      localStorage.removeItem("brandStep");
+      localStorage.removeItem("brandData");
+      setTimeout(() => navigate("/brand/dashboard"), 1200);
+    } catch (err: any) {
+      setBrandSubmitError(err.message || "Failed to submit brand onboarding data.");
+    } finally {
+      setBrandSubmitting(false);
+    }
+  };
+  const renderBrandReviewStep = () => (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Review & Submit</h2>
+      <div className="mb-4">
+        <label className="block font-medium mb-2">Logo</label>
+        {(brandLogoPreview || brandData.logo) ? (
+          <img src={brandLogoPreview || (brandData.logo ? URL.createObjectURL(brandData.logo) : undefined)} alt="Logo Preview" className="h-16 w-16 rounded-full object-cover border mb-2" />
+        ) : (
+          <div className="h-16 w-16 rounded-full bg-gray-200 flex items-center justify-center text-gray-400">No Logo</div>
+        )}
+      </div>
+      <div className="mb-4">
+        <h3 className="font-semibold">Brand Details</h3>
+        <ul className="text-sm">
+          <li><b>Name:</b> {brandData.brand_name}</li>
+          <li><b>Website:</b> {brandData.website_url}</li>
+          <li><b>Industry:</b> {brandData.industry}</li>
+          <li><b>Company Size:</b> {brandData.company_size}</li>
+          <li><b>Location:</b> {brandData.location}</li>
+          <li><b>Description:</b> {brandData.description}</li>
+        </ul>
+      </div>
+      <div className="mb-4">
+        <h3 className="font-semibold">Contact Information</h3>
+        <ul className="text-sm">
+          <li><b>Contact Person:</b> {brandData.contact_person}</li>
+          <li><b>Email:</b> {brandData.contact_email}</li>
+          <li><b>Phone:</b> {brandData.contact_phone}</li>
+          <li><b>Role:</b> {brandData.role}</li>
+        </ul>
+      </div>
+      <div className="mb-4">
+        <h3 className="font-semibold">Platforms & Social Links</h3>
+        <ul className="text-sm">
+          {brandData.platforms.map(platform => {
+            const key = allBrandPlatforms.find(p => p.name === platform)?.key;
+            return (
+              <li key={platform}><b>{platform}:</b> {key ? brandData.social_links[key] : ""}</li>
+            );
+          })}
+        </ul>
+      </div>
+      <div className="mb-4">
+        <h3 className="font-semibold">Collaboration Preferences</h3>
+        <ul className="text-sm">
+          <li><b>Collaboration Types:</b> {brandData.collaboration_types.join(", ")}</li>
+          <li><b>Preferred Creator Categories:</b> {brandData.preferred_creator_categories.join(", ")}</li>
+          <li><b>Brand Values:</b> {brandData.brand_values.join(", ")}</li>
+          <li><b>Preferred Tone:</b> {brandData.preferred_tone.join(", ")}</li>
+        </ul>
+      </div>
+      {brandSubmitError && <div className="text-red-500 text-sm mb-2">{brandSubmitError}</div>}
+      {brandSubmitSuccess && <div className="text-green-600 text-sm mb-2">{brandSubmitSuccess}</div>}
+      <button
+        type="button"
+        onClick={handleBrandSubmit}
+        disabled={brandSubmitting}
+        className="px-6 py-2 rounded-lg bg-green-600 text-white font-semibold disabled:opacity-50"
+      >
+        {brandSubmitting ? 'Submitting...' : 'Submit'}
+      </button>
+    </div>
+  );
+
+  // Persist and restore brand onboarding state
+  useEffect(() => {
+    const savedStep = localStorage.getItem("brandStep");
+    const savedData = localStorage.getItem("brandData");
+    if (savedStep) setBrandStep(Number(savedStep));
+    if (savedData) setBrandData(JSON.parse(savedData));
+  }, []);
+  useEffect(() => {
+    localStorage.setItem("brandStep", String(brandStep));
+    localStorage.setItem("brandData", JSON.stringify(brandData));
+  }, [brandStep, brandData]);
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800">
+      <div className="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8">
+        {/* Stepper UI */}
+        <div className="flex justify-between mb-8">
+          {role === "brand"
+            ? brandSteps.map((label, idx) => (
+                <div key={label} className={`flex-1 text-center text-xs font-semibold ${idx === brandStep ? "text-purple-600" : "text-gray-400"}`}>{label}</div>
+              ))
+            : steps.map((label, idx) => (
+                <div key={label} className={`flex-1 text-center text-xs font-semibold ${idx === step ? "text-purple-600" : "text-gray-400"}`}>{label}</div>
+              ))}
+        </div>
+        {/* Step Content */}
+        <div className="mb-8">
+          {role === "brand" ? (
+            <>
+              {brandStep === 0 && renderBrandDetailsStep()}
+              {brandStep === 1 && renderBrandContactStep()}
+              {brandStep === 2 && renderBrandPlatformsStep()}
+              {brandStep === 3 && renderBrandSocialLinksStep()}
+              {brandStep === 4 && renderBrandCollabPrefsStep()}
+              {brandStep === 5 && renderBrandReviewStep()}
+            </>
+          ) : (
+            <>
+              {step === 0 && renderRoleStep()}
+              {step === 1 && renderPersonalStep()}
+              {step === 2 && renderPlatformStep()}
+              {step === 3 && renderPlatformDetailsStep()}
+              {step === 4 && renderPricingStep()}
+              {step === 5 && renderProfilePicStep()}
+              {step === 6 && renderReviewStep()}
+            </>
+          )}
+        </div>
+        {/* Navigation */}
+        <div className="flex justify-between">
+          {role === "brand" ? (
+            <>
+              <button
+                onClick={handleBrandBack}
+                disabled={brandStep === 0}
+                className="px-6 py-2 rounded-lg bg-gray-200 text-gray-700 font-semibold disabled:opacity-50"
+              >
+                Back
+              </button>
+              {brandStep < brandSteps.length - 1 ? (
+                <button
+                  onClick={handleBrandNext}
+                  disabled={!!validateBrandStep()}
+                  className="px-6 py-2 rounded-lg bg-purple-600 text-white font-semibold disabled:opacity-50"
+                >
+                  Next
+                </button>
+              ) : null}
+            </>
+          ) : (
+            <>
+              <button
+                onClick={handleBack}
+                disabled={step === 0}
+                className="px-6 py-2 rounded-lg bg-gray-200 text-gray-700 font-semibold disabled:opacity-50"
+              >
+                Back
+              </button>
+              {step < steps.length - 1 ? (
+                <button
+                  onClick={handleNext}
+                  disabled={
+                    (step === 0 && !role) ||
+                    (step === 1 && !!validatePersonal()) ||
+                    (step === 2 && selectedPlatforms.length === 0) ||
+                    (step === 3 && !!validatePlatformDetails()) ||
+                    (step === 4 && !!validatePricing()) ||
+                    (step === 5 && !!profilePicError)
+                  }
+                  className="px-6 py-2 rounded-lg bg-purple-600 text-white font-semibold disabled:opacity-50"
+                >
+                  Next
+                </button>
+              ) : (
+                <button
+                  onClick={handleSubmit}
+                  disabled={submitting}
+                  className="px-6 py-2 rounded-lg bg-green-600 text-white font-semibold disabled:opacity-50"
+                >
+                  {submitting ? 'Submitting...' : 'Submit'}
+                </button>
+              )}
+            </>
+          )}
+        </div>
+        {brandError && <div className="text-red-500 text-sm mt-2">{brandError}</div>}
+      </div>
+    </div>
+  );
+}
+
+// Platform detail components
+function YouTubeDetails({ details, setDetails }: { details: any, setDetails: (d: any) => void }) {
+  const [input, setInput] = useState(details.channelUrl || "");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [showInfo, setShowInfo] = useState(false);
+
+  const fetchChannel = async () => {
+    setLoading(true);
+    setError("");
+    let channelId = input;
+    // Extract channel ID from URL if needed
+    if (input.includes("youtube.com")) {
+      const match = input.match(/(?:channel\/|user\/|c\/)?([\w-]{21,})/);
+      if (match) channelId = match[1];
+    }
+    try {
+      const res = await fetch(
+        `/youtube/channel-info?channelId=${encodeURIComponent(channelId)}`
+      );
+      if (!res.ok) {
+        let errMsg = `Error: ${res.status}`;
+        try {
+          const errData = await res.json();
+          if (errData && errData.detail) errMsg = errData.detail;
+        } catch {}
+        setError(errMsg);
+        return;
+      }
+      const data = await res.json();
+      if (data.items && data.items.length > 0) {
+        const ch = data.items[0];
+        setDetails({
+          channelUrl: input,
+          channelId: ch.id,
+          channelName: ch.snippet.title,
+          profile_image: ch.snippet.thumbnails.default.url,
+          subscriber_count: ch.statistics.subscriberCount,
+          total_views: ch.statistics.viewCount,
+          video_count: ch.statistics.videoCount,
+        });
+      } else {
+        setError("Channel not found");
+      }
+    } catch (e) {
+      setError("Failed to fetch channel. Please check your network connection or try again later.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <label className="block font-medium flex items-center gap-2">
+        YouTube Channel URL or ID
+        <button
+          type="button"
+          onClick={() => setShowInfo(true)}
+          className="ml-1 text-purple-600 hover:text-purple-800 focus:outline-none"
+          aria-label="How to find your YouTube channel URL or ID"
+        >
+          <Info className="h-4 w-4" />
+        </button>
+      </label>
+      <input
+        type="text"
+        value={input}
+        onChange={e => setInput(e.target.value)}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="e.g. https://www.youtube.com/channel/UCxxxxxxxxxxxxxxxxxxx or channel ID"
+      />
+      {/* Info Dialog */}
+      {showInfo && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md w-full relative">
+            <button
+              className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
+              onClick={() => setShowInfo(false)}
+              aria-label="Close"
+            >
+              ×
+            </button>
+            <h3 className="text-lg font-bold mb-2">How to find your YouTube Channel URL or ID</h3>
+            <ol className="list-decimal list-inside space-y-2 text-sm text-gray-700 dark:text-gray-200">
+              <li>Go to <a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer" className="text-purple-600 underline">youtube.com</a> and sign in.</li>
+              <li>Click your profile picture at the top right and select <b>Your Channel</b>.</li>
+              <li>Click <b>Customize Channel</b> (top right).</li>
+              <li>Go to the <b>Basic info</b> tab.</li>
+              <li>Find the <b>Channel URL</b> section and copy the URL shown there.</li>
+              <li>Paste the full Channel URL above (e.g. <span className="font-mono">https://www.youtube.com/channel/UCxxxxxxxxxxxxxxxxxxx</span>).</li>
+            </ol>
+          </div>
+        </div>
+      )}
+      <button
+        type="button"
+        onClick={fetchChannel}
+        className="px-4 py-2 bg-purple-600 text-white rounded"
+        disabled={loading || !input}
+      >
+        {loading ? "Fetching..." : "Fetch Channel"}
+      </button>
+      {error && <div className="text-red-500 text-sm">{error}</div>}
+      {details.channelName && (
+        <div className="mt-2 p-2 bg-gray-100 rounded">
+          <div><b>Name:</b> {details.channelName}</div>
+          <div><b>Subscribers:</b> {details.subscriber_count}</div>
+          <div><b>Videos:</b> {details.video_count}</div>
+          <div><b>Views:</b> {details.total_views}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InstagramDetails({ details, setDetails }: { details: any, setDetails: (d: any) => void }) {
+  return (
+    <div className="space-y-2">
+      <label className="block font-medium">Instagram Profile URL</label>
+      <input
+        type="text"
+        value={details.profileUrl || ""}
+        onChange={e => setDetails({ ...details, profileUrl: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Paste your Instagram profile URL"
+      />
+      <label className="block font-medium">Followers</label>
+      <input
+        type="number"
+        value={details.followers || ""}
+        onChange={e => setDetails({ ...details, followers: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Followers count"
+      />
+      <label className="block font-medium">Posts</label>
+      <input
+        type="number"
+        value={details.posts || ""}
+        onChange={e => setDetails({ ...details, posts: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Number of posts"
+      />
+    </div>
+  );
+}
+
+function FacebookDetails({ details, setDetails }: { details: any, setDetails: (d: any) => void }) {
+  return (
+    <div className="space-y-2">
+      <label className="block font-medium">Facebook Profile URL</label>
+      <input
+        type="text"
+        value={details.profileUrl || ""}
+        onChange={e => setDetails({ ...details, profileUrl: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Paste your Facebook profile URL"
+      />
+      <label className="block font-medium">Followers</label>
+      <input
+        type="number"
+        value={details.followers || ""}
+        onChange={e => setDetails({ ...details, followers: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Followers count"
+      />
+      <label className="block font-medium">Posts</label>
+      <input
+        type="number"
+        value={details.posts || ""}
+        onChange={e => setDetails({ ...details, posts: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Number of posts"
+      />
+    </div>
+  );
+}
+
+function TikTokDetails({ details, setDetails }: { details: any, setDetails: (d: any) => void }) {
+  return (
+    <div className="space-y-2">
+      <label className="block font-medium">TikTok Profile URL</label>
+      <input
+        type="text"
+        value={details.profileUrl || ""}
+        onChange={e => setDetails({ ...details, profileUrl: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Paste your TikTok profile URL"
+      />
+      <label className="block font-medium">Followers</label>
+      <input
+        type="number"
+        value={details.followers || ""}
+        onChange={e => setDetails({ ...details, followers: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Followers count"
+      />
+      <label className="block font-medium">Posts</label>
+      <input
+        type="number"
+        value={details.posts || ""}
+        onChange={e => setDetails({ ...details, posts: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Number of posts"
+      />
+    </div>
+  );
+}
+
+// Pricing components
+function YouTubePricing({ pricing, setPricing }: { pricing: any, setPricing: (d: any) => void }) {
+  return (
+    <div className="space-y-2">
+      <label className="block font-medium">Per Video</label>
+      <input
+        type="number"
+        value={pricing.per_video_cost || ""}
+        onChange={e => setPricing({ ...pricing, per_video_cost: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Price per video"
+      />
+      <label className="block font-medium">Per Short</label>
+      <input
+        type="number"
+        value={pricing.per_short_cost || ""}
+        onChange={e => setPricing({ ...pricing, per_short_cost: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Price per short"
+      />
+      <label className="block font-medium">Per Community Post</label>
+      <input
+        type="number"
+        value={pricing.per_community_post_cost || ""}
+        onChange={e => setPricing({ ...pricing, per_community_post_cost: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Price per community post"
+      />
+      <label className="block font-medium">Currency</label>
+      <input
+        type="text"
+        value={pricing.currency || ""}
+        onChange={e => setPricing({ ...pricing, currency: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="e.g. USD, INR"
+      />
+    </div>
+  );
+}
+
+function InstagramPricing({ pricing, setPricing }: { pricing: any, setPricing: (d: any) => void }) {
+  return (
+    <div className="space-y-2">
+      <label className="block font-medium">Per Post</label>
+      <input
+        type="number"
+        value={pricing.per_post_cost || ""}
+        onChange={e => setPricing({ ...pricing, per_post_cost: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Price per post"
+      />
+      <label className="block font-medium">Per Story</label>
+      <input
+        type="number"
+        value={pricing.per_story_cost || ""}
+        onChange={e => setPricing({ ...pricing, per_story_cost: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Price per story"
+      />
+      <label className="block font-medium">Per Reel</label>
+      <input
+        type="number"
+        value={pricing.per_reel_cost || ""}
+        onChange={e => setPricing({ ...pricing, per_reel_cost: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Price per reel"
+      />
+      <label className="block font-medium">Currency</label>
+      <input
+        type="text"
+        value={pricing.currency || ""}
+        onChange={e => setPricing({ ...pricing, currency: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="e.g. USD, INR"
+      />
+    </div>
+  );
+}
+
+function FacebookPricing({ pricing, setPricing }: { pricing: any, setPricing: (d: any) => void }) {
+  return (
+    <div className="space-y-2">
+      <label className="block font-medium">Per Post</label>
+      <input
+        type="number"
+        value={pricing.per_post_cost || ""}
+        onChange={e => setPricing({ ...pricing, per_post_cost: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Price per post"
+      />
+      <label className="block font-medium">Currency</label>
+      <input
+        type="text"
+        value={pricing.currency || ""}
+        onChange={e => setPricing({ ...pricing, currency: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="e.g. USD, INR"
+      />
+    </div>
+  );
+}
+
+function TikTokPricing({ pricing, setPricing }: { pricing: any, setPricing: (d: any) => void }) {
+  return (
+    <div className="space-y-2">
+      <label className="block font-medium">Per Video</label>
+      <input
+        type="number"
+        value={pricing.per_video_cost || ""}
+        onChange={e => setPricing({ ...pricing, per_video_cost: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="Price per video"
+      />
+      <label className="block font-medium">Currency</label>
+      <input
+        type="text"
+        value={pricing.currency || ""}
+        onChange={e => setPricing({ ...pricing, currency: e.target.value })}
+        className="w-full px-4 py-2 rounded border border-gray-300"
+        placeholder="e.g. USD, INR"
+      />
+    </div>
+  );
 }
diff --git a/Frontend/src/components/ProtectedRoute.tsx b/Frontend/src/components/ProtectedRoute.tsx
index b627619..5f9564f 100644
--- a/Frontend/src/components/ProtectedRoute.tsx
+++ b/Frontend/src/components/ProtectedRoute.tsx
@@ -2,9 +2,9 @@ import { Navigate } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
 
 const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
-  const { user } = useAuth();
+  const { isAuthenticated } = useAuth();
 
-  return user ? children : <Navigate to="/login" />;
+  return isAuthenticated ? children : <Navigate to="/login" />;
 };
 
 export default ProtectedRoute;
diff --git a/Frontend/src/components/PublicRoute.tsx b/Frontend/src/components/PublicRoute.tsx
new file mode 100644
index 0000000..7bb29a7
--- /dev/null
+++ b/Frontend/src/components/PublicRoute.tsx
@@ -0,0 +1,69 @@
+import { Navigate } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+import { useState, useEffect } from "react";
+
+interface PublicRouteProps {
+  children: React.ReactNode;
+  redirectTo?: string;
+}
+
+const PublicRoute = ({ children, redirectTo = "/dashboard" }: PublicRouteProps) => {
+  const { isAuthenticated, user, checkUserOnboarding } = useAuth();
+  const [redirectPath, setRedirectPath] = useState<string | null>(null);
+  const [isChecking, setIsChecking] = useState(false);
+
+  useEffect(() => {
+    if (isAuthenticated && user && !isChecking) {
+      // Add a simple cache to prevent repeated checks
+      const cacheKey = `onboarding_check_${user.id}`;
+      const cachedResult = sessionStorage.getItem(cacheKey);
+      
+      if (cachedResult) {
+        const { hasOnboarding, role } = JSON.parse(cachedResult);
+        if (hasOnboarding) {
+          if (role === "brand") {
+            setRedirectPath("/brand/dashboard");
+          } else {
+            setRedirectPath("/dashboard");
+          }
+        } else {
+          setRedirectPath("/onboarding");
+        }
+        return;
+      }
+      
+      setIsChecking(true);
+      console.log("PublicRoute: Checking user onboarding status");
+      checkUserOnboarding(user).then(({ hasOnboarding, role }) => {
+        console.log("PublicRoute: Onboarding check result", { hasOnboarding, role });
+        
+        // Cache the result for 2 minutes
+        sessionStorage.setItem(cacheKey, JSON.stringify({ hasOnboarding, role }));
+        setTimeout(() => sessionStorage.removeItem(cacheKey), 2 * 60 * 1000);
+        
+        if (hasOnboarding) {
+          if (role === "brand") {
+            setRedirectPath("/brand/dashboard");
+          } else {
+            setRedirectPath("/dashboard");
+          }
+        } else {
+          setRedirectPath("/onboarding");
+        }
+        setIsChecking(false);
+      }).catch(error => {
+        console.error("PublicRoute: Error checking onboarding", error);
+        setIsChecking(false);
+      });
+    }
+  }, [isAuthenticated, user, checkUserOnboarding, isChecking]);
+
+  if (redirectPath) {
+    console.log("PublicRoute: Redirecting to", redirectPath);
+    return <Navigate to={redirectPath} />;
+  }
+
+  return <>{children}</>;
+};
+
+export default PublicRoute; 
\ No newline at end of file
diff --git a/Frontend/src/components/dashboard/creator-matches.tsx b/Frontend/src/components/dashboard/creator-matches.tsx
new file mode 100644
index 0000000..2252819
--- /dev/null
+++ b/Frontend/src/components/dashboard/creator-matches.tsx
@@ -0,0 +1,85 @@
+import { useEffect, useState } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { Button } from "../ui/button";
+import { Card, CardContent } from "../ui/card";
+import { Badge } from "../ui/badge";
+
+interface CreatorMatch {
+  user_id: string;
+  match_score: number;
+  audience_age_group?: Record<string, number>;
+  audience_location?: Record<string, number>;
+  engagement_rate?: number;
+  average_views?: number;
+  price_expectation?: number;
+  // Add more fields as needed
+}
+
+interface CreatorMatchesProps {
+  sponsorshipId: string;
+}
+
+export function CreatorMatches({ sponsorshipId }: CreatorMatchesProps) {
+  const [matches, setMatches] = useState<CreatorMatch[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!sponsorshipId) return;
+    setLoading(true);
+    setError(null);
+    fetch(`/api/match/creators-for-brand/${sponsorshipId}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch matches");
+        return res.json();
+      })
+      .then((data) => {
+        setMatches(data.matches || []);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [sponsorshipId]);
+
+  if (!sponsorshipId) return <div>Select a campaign to see matches.</div>;
+  if (loading) return <div>Loading matches...</div>;
+  if (error) return <div className="text-red-500">{error}</div>;
+  if (matches.length === 0) return <div>No matching creators found.</div>;
+
+  return (
+    <div className="space-y-4">
+      {matches.map((creator) => (
+        <Card key={creator.user_id}>
+          <CardContent className="p-4">
+            <div className="flex items-start gap-4">
+              <Avatar className="h-12 w-12">
+                <AvatarImage src={"https://via.placeholder.com/48"} alt={creator.user_id} />
+                <AvatarFallback>{creator.user_id.slice(0, 2).toUpperCase()}</AvatarFallback>
+              </Avatar>
+              <div className="flex-1 space-y-1">
+                <div className="flex items-center justify-between">
+                  <h4 className="font-semibold">Creator {creator.user_id.slice(0, 6)}</h4>
+                  <Badge className="ml-2">{Math.round((creator.match_score / 4) * 100)}% Match</Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  Engagement: {creator.engagement_rate ?? "-"}% | Avg Views: {creator.average_views ?? "-"}
+                </p>
+                <div className="flex items-center text-sm text-muted-foreground">
+                  <span className="font-medium">${creator.price_expectation ?? "-"}</span>
+                </div>
+                <div className="flex items-center gap-2 pt-2">
+                  <Button size="sm">View Profile</Button>
+                  <Button size="sm" variant="outline">
+                    Contact
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/Frontend/src/components/dashboard/sponsorship-matches.tsx b/Frontend/src/components/dashboard/sponsorship-matches.tsx
index 94014e6..daf6ee8 100644
--- a/Frontend/src/components/dashboard/sponsorship-matches.tsx
+++ b/Frontend/src/components/dashboard/sponsorship-matches.tsx
@@ -1,99 +1,83 @@
+import { useEffect, useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar"
 import { Button } from "../ui/button"
 import { Card, CardContent } from "../ui/card"
 import { Badge } from "../ui/badge"
 
-export function SponsorshipMatches() {
+interface SponsorshipMatch {
+  sponsorship_id: string;
+  match_score: number;
+  title?: string;
+  description?: string;
+  budget?: number;
+  // Add more fields as needed
+}
+
+interface SponsorshipMatchesProps {
+  creatorId: string;
+}
+
+export function SponsorshipMatches({ creatorId }: SponsorshipMatchesProps) {
+  const [matches, setMatches] = useState<SponsorshipMatch[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!creatorId) return;
+    setLoading(true);
+    setError(null);
+    fetch(`/api/match/brands-for-creator/${creatorId}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch matches");
+        return res.json();
+      })
+      .then((data) => {
+        setMatches(data.matches || []);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [creatorId]);
+
+  if (!creatorId) return <div>Login to see your matches.</div>;
+  if (loading) return <div>Loading matches...</div>;
+  if (error) return <div className="text-red-500">{error}</div>;
+  if (matches.length === 0) return <div>No matching brand campaigns found.</div>;
+
   return (
     <div className="space-y-4">
-      <Card>
-        <CardContent className="p-4">
-          <div className="flex items-start gap-4">
-            <Avatar className="h-12 w-12">
-              <AvatarImage src="https://via.placeholder.com/48" alt="EcoStyle" />
-              <AvatarFallback>ES</AvatarFallback>
-            </Avatar>
-            <div className="flex-1 space-y-1">
-              <div className="flex items-center justify-between">
-                <h4 className="font-semibold">EcoStyle</h4>
-                <Badge className="ml-2">98% Match</Badge>
-              </div>
-              <p className="text-sm text-muted-foreground">Sustainable fashion brand looking for lifestyle creators</p>
-              <div className="flex items-center text-sm text-muted-foreground">
-                <span className="font-medium">$3,000 - $5,000</span>
-                <span className="mx-2">•</span>
-                <span>1 post, 2 stories</span>
-              </div>
-              <div className="flex items-center gap-2 pt-2">
-                <Button size="sm">View Details</Button>
-                <Button size="sm" variant="outline">
-                  Contact
-                </Button>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardContent className="p-4">
-          <div className="flex items-start gap-4">
-            <Avatar className="h-12 w-12">
-              <AvatarImage src="https://via.placeholder.com/48" alt="TechGadgets" />
-              <AvatarFallback>TG</AvatarFallback>
-            </Avatar>
-            <div className="flex-1 space-y-1">
-              <div className="flex items-center justify-between">
-                <h4 className="font-semibold">TechGadgets</h4>
-                <Badge className="ml-2">95% Match</Badge>
-              </div>
-              <p className="text-sm text-muted-foreground">
-                Tech company seeking reviewers for new smart home products
-              </p>
-              <div className="flex items-center text-sm text-muted-foreground">
-                <span className="font-medium">$2,500 - $4,000</span>
-                <span className="mx-2">•</span>
-                <span>Review video + social posts</span>
-              </div>
-              <div className="flex items-center gap-2 pt-2">
-                <Button size="sm">View Details</Button>
-                <Button size="sm" variant="outline">
-                  Contact
-                </Button>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardContent className="p-4">
-          <div className="flex items-start gap-4">
-            <Avatar className="h-12 w-12">
-              <AvatarImage src="https://via.placeholder.com/48" alt="FitLife" />
-              <AvatarFallback>FL</AvatarFallback>
-            </Avatar>
-            <div className="flex-1 space-y-1">
-              <div className="flex items-center justify-between">
-                <h4 className="font-semibold">FitLife Supplements</h4>
-                <Badge className="ml-2">92% Match</Badge>
-              </div>
-              <p className="text-sm text-muted-foreground">
-                Fitness supplement brand looking for health & wellness creators
-              </p>
-              <div className="flex items-center text-sm text-muted-foreground">
-                <span className="font-medium">$1,800 - $3,500</span>
-                <span className="mx-2">•</span>
-                <span>3-month campaign</span>
-              </div>
-              <div className="flex items-center gap-2 pt-2">
-                <Button size="sm">View Details</Button>
-                <Button size="sm" variant="outline">
-                  Contact
-                </Button>
+      {matches.map((sponsorship) => (
+        <Card key={sponsorship.sponsorship_id}>
+          <CardContent className="p-4">
+            <div className="flex items-start gap-4">
+              <Avatar className="h-12 w-12">
+                <AvatarImage src={"https://via.placeholder.com/48"} alt={sponsorship.title || sponsorship.sponsorship_id} />
+                <AvatarFallback>{(sponsorship.title || "BR").slice(0, 2).toUpperCase()}</AvatarFallback>
+              </Avatar>
+              <div className="flex-1 space-y-1">
+                <div className="flex items-center justify-between">
+                  <h4 className="font-semibold">{sponsorship.title || "Brand Campaign"}</h4>
+                  <Badge className="ml-2">{Math.round((sponsorship.match_score / 4) * 100)}% Match</Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {sponsorship.description || "No description provided."}
+                </p>
+                <div className="flex items-center text-sm text-muted-foreground">
+                  <span className="font-medium">${sponsorship.budget ?? "-"}</span>
+                </div>
+                <div className="flex items-center gap-2 pt-2">
+                  <Button size="sm">View Details</Button>
+                  <Button size="sm" variant="outline">
+                    Contact
+                  </Button>
+                </div>
               </div>
             </div>
-          </div>
-        </CardContent>
-      </Card>
+          </CardContent>
+        </Card>
+      ))}
     </div>
   )
 }
diff --git a/Frontend/src/components/main-nav.tsx b/Frontend/src/components/main-nav.tsx
index 2e58eb5..9aa97aa 100644
--- a/Frontend/src/components/main-nav.tsx
+++ b/Frontend/src/components/main-nav.tsx
@@ -3,18 +3,9 @@ import { Link } from "react-router-dom"
 export function MainNav() {
   return (
     <nav className="hidden md:flex gap-6">
-      <Link to="/features" className="text-sm font-medium transition-colors hover:text-primary">
-        Features
-      </Link>
-      <Link to="/pricing" className="text-sm font-medium transition-colors hover:text-primary">
-        Pricing
-      </Link>
-      <Link to="/about" className="text-sm font-medium transition-colors hover:text-primary">
-        About
-      </Link>
-      <Link to="/contact" className="text-sm font-medium transition-colors hover:text-primary">
-        Contact
-      </Link>
+      {/* Navigation items removed - keeping component for future use */}
+      {/* TODO: Under construction - menu items coming soon */}
+      <span className="text-gray-400 italic">Menu coming soon</span>
     </nav>
   )
 }
diff --git a/Frontend/src/components/user-nav.tsx b/Frontend/src/components/user-nav.tsx
index 2d20d51..9c4939f 100644
--- a/Frontend/src/components/user-nav.tsx
+++ b/Frontend/src/components/user-nav.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-
 import { useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Button } from "./ui/button";
@@ -12,47 +11,63 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
+import { useAuth } from "../context/AuthContext";
+import { Link } from "react-router-dom";
 
 export function UserNav() {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const { user, isAuthenticated, logout } = useAuth();
+  const [avatarError, setAvatarError] = useState(false);
 
-  if (!isLoggedIn) {
+  if (!isAuthenticated || !user) {
     return (
-      <Button variant="ghost" size="sm" className="md:hidden">
-        <Avatar className="h-8 w-8">
-          <AvatarFallback>U</AvatarFallback>
-        </Avatar>
-      </Button>
+      <div className="flex gap-2">
+        <Button variant="ghost" size="sm" className="md:hidden">
+          <Link to="/login">Login</Link>
+        </Button>
+        <Button size="sm" className="md:hidden bg-purple-600 text-white hover:bg-purple-700">
+          <Link to="/signup">Sign Up</Link>
+        </Button>
+      </div>
     );
   }
 
+  const handleAvatarError = () => {
+    setAvatarError(true);
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">
           <Avatar className="h-8 w-8">
-            <AvatarImage src="https://via.placeholder.com/32" alt="User" />
-            <AvatarFallback>U</AvatarFallback>
+            <AvatarImage 
+              src={avatarError ? "https://via.placeholder.com/32" : (user.user_metadata?.avatar_url || "https://via.placeholder.com/32")} 
+              alt="User" 
+              onError={handleAvatarError}
+            />
+            <AvatarFallback>{user.user_metadata?.name?.charAt(0) || user.email?.charAt(0) || "U"}</AvatarFallback>
           </Avatar>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align="end">
         <DropdownMenuLabel className="font-normal">
           <div className="flex flex-col space-y-1">
-            <p className="text-sm font-medium leading-none">User Name</p>
+            <p className="text-sm font-medium leading-none">{user.user_metadata?.name || "User"}</p>
             <p className="text-xs leading-none text-muted-foreground">
-              user@example.com
+              {user.email}
             </p>
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
+          <DropdownMenuItem asChild>
+            <Link to="/dashboard">Dashboard</Link>
+          </DropdownMenuItem>
           <DropdownMenuItem>Profile</DropdownMenuItem>
           <DropdownMenuItem>Settings</DropdownMenuItem>
-          <DropdownMenuItem>Billing</DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <DropdownMenuItem>Log out</DropdownMenuItem>
+        <DropdownMenuItem onClick={logout}>Log out</DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/Frontend/src/context/AuthContext.tsx b/Frontend/src/context/AuthContext.tsx
index 53c9507..8588c41 100644
--- a/Frontend/src/context/AuthContext.tsx
+++ b/Frontend/src/context/AuthContext.tsx
@@ -5,7 +5,7 @@ import {
   ReactNode,
   useEffect,
 } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { supabase, User } from "../utils/supabase";
 
 interface AuthContextType {
@@ -13,6 +13,7 @@ interface AuthContextType {
   user: User | null;
   login: () => void;
   logout: () => void;
+  checkUserOnboarding: (userToCheck?: User | null) => Promise<{ hasOnboarding: boolean; role: string | null }>;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -21,34 +22,163 @@ interface AuthProviderProps {
   children: ReactNode;
 }
 
+async function ensureUserInTable(user: any) {
+  if (!user) return;
+  
+  // Add a simple cache to prevent repeated requests for the same user
+  const cacheKey = `user_${user.id}`;
+  if (sessionStorage.getItem(cacheKey)) {
+    console.log("User already checked, skipping...");
+    return;
+  }
+  
+  try {
+    console.log("Testing user table access for user:", user.id);
+    
+    // Just test if we can access the users table
+    const { data, error } = await supabase
+      .from("users")
+      .select("id")
+      .eq("id", user.id)
+      .limit(1);
+      
+    if (error) {
+      console.error("Error accessing users table:", error);
+      return;
+    }
+    
+    console.log("User table access successful, found:", data?.length || 0, "records");
+    
+    // Cache the result for 5 minutes to prevent repeated requests
+    sessionStorage.setItem(cacheKey, "true");
+    setTimeout(() => sessionStorage.removeItem(cacheKey), 5 * 60 * 1000);
+    
+    // For now, skip the insert to avoid 400 errors
+    // We'll handle user creation during onboarding instead
+    
+  } catch (error) {
+    console.error("Error in ensureUserInTable:", error);
+  }
+}
+
 export const AuthProvider = ({ children }: AuthProviderProps) => {
   const [user, setUser] = useState<User | null>(null);
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+  const [loading, setLoading] = useState(true);
+  const [lastRequest, setLastRequest] = useState(0);
   const navigate = useNavigate();
-  const location = useLocation();
+
+  // Function to check if user has completed onboarding
+  const checkUserOnboarding = async (userToCheck?: User | null) => {
+    const userToUse = userToCheck || user;
+    if (!userToUse) return { hasOnboarding: false, role: null };
+    
+    // Add rate limiting - only allow one request per 2 seconds
+    const now = Date.now();
+    if (now - lastRequest < 2000) {
+      console.log("Rate limiting: skipping request");
+      return { hasOnboarding: false, role: null };
+    }
+    setLastRequest(now);
+    
+    // Check if user has completed onboarding by looking for social profiles or brand data
+    const { data: socialProfiles } = await supabase
+      .from("social_profiles")
+      .select("id")
+      .eq("user_id", userToUse.id)
+      .limit(1);
+    
+    const { data: brandData } = await supabase
+      .from("brands")
+      .select("id")
+      .eq("user_id", userToUse.id)
+      .limit(1);
+    
+    const hasOnboarding = (socialProfiles && socialProfiles.length > 0) || (brandData && brandData.length > 0);
+    
+    // Get user role
+    const { data: userData } = await supabase
+      .from("users")
+      .select("role")
+      .eq("id", userToUse.id)
+      .single();
+    
+    return { hasOnboarding, role: userData?.role || null };
+  };
 
   useEffect(() => {
-    supabase.auth.getSession().then(({ data }) => {
+    let mounted = true;
+    console.log("AuthContext: Starting authentication check");
+
+    // Add a timeout to prevent infinite loading
+    const timeoutId = setTimeout(() => {
+      if (mounted && loading) {
+        console.log("AuthContext: Loading timeout reached, forcing completion");
+        setLoading(false);
+      }
+    }, 3000); // 3 second timeout
+
+    supabase.auth.getSession().then(async ({ data, error }) => {
+      if (!mounted) return;
+      
+      if (error) {
+        console.error("AuthContext: Error getting session", error);
+        setLoading(false);
+        return;
+      }
+      
+      console.log("AuthContext: Session check result", { user: data.session?.user?.email, hasSession: !!data.session });
+      
       setUser(data.session?.user || null);
+      setIsAuthenticated(!!data.session?.user);
+      if (data.session?.user) {
+        console.log("AuthContext: Ensuring user in table");
+        try {
+          await ensureUserInTable(data.session.user);
+        } catch (error) {
+          console.error("AuthContext: Error ensuring user in table", error);
+        }
+      }
+      setLoading(false);
+      console.log("AuthContext: Initial loading complete");
+    }).catch(error => {
+      console.error("AuthContext: Error getting session", error);
+      if (mounted) {
+        setLoading(false);
+      }
     });
 
     const { data: listener } = supabase.auth.onAuthStateChange(
-      (event, session) => {
+      async (event, session) => {
+        if (!mounted) return;
+        
+        console.log("AuthContext: Auth state change", { event, user: session?.user?.email });
+        
         setUser(session?.user || null);
-        // Only redirect to dashboard if not on /reset-password and not during password recovery
+        setIsAuthenticated(!!session?.user);
         
-        if (
-          session?.user &&
-          location.pathname !== "/reset-password" &&
-          event !== "PASSWORD_RECOVERY"
-        ) {
-          navigate("/dashboard");
+        if (session?.user) {
+          console.log("AuthContext: User authenticated");
+          try {
+            await ensureUserInTable(session.user);
+          } catch (error) {
+            console.error("AuthContext: Error ensuring user in table", error);
+          }
+          setLoading(false);
+        } else {
+          // User logged out
+          console.log("AuthContext: User logged out");
+          setLoading(false);
         }
       }
     );
 
-    return () => listener.subscription.unsubscribe();
-  }, [location.pathname, navigate]);
+    return () => {
+      mounted = false;
+      clearTimeout(timeoutId);
+      listener.subscription.unsubscribe();
+    };
+  }, []);
 
   const login = () => {
     setIsAuthenticated(true);
@@ -59,11 +189,26 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
     await supabase.auth.signOut();
     setUser(null);
     setIsAuthenticated(false);
-    navigate("/login");
+    navigate("/");
   };
 
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center flex-col">
+        <div className="text-lg font-semibold text-purple-600">Loading...</div>
+        <div className="text-xs text-gray-500 mt-2">(If this is taking too long, try refreshing the page.)</div>
+        <button 
+          onClick={() => setLoading(false)} 
+          className="mt-4 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+        >
+          Continue Anyway
+        </button>
+      </div>
+    );
+  }
+
   return (
-    <AuthContext.Provider value={{ isAuthenticated, user, login, logout }}>
+    <AuthContext.Provider value={{ isAuthenticated, user, login, logout, checkUserOnboarding }}>
       {children}
     </AuthContext.Provider>
   );
@@ -74,4 +219,4 @@ export const useAuth = () => {
     throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
-};
+};
\ No newline at end of file
diff --git a/Frontend/src/index.css b/Frontend/src/index.css
index 56b2e5a..f2a93bb 100644
--- a/Frontend/src/index.css
+++ b/Frontend/src/index.css
@@ -118,3 +118,64 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Custom Animations */
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes glow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(147, 51, 234, 0.6);
+  }
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient 3s ease infinite;
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+.animate-glow {
+  animation: glow 2s ease-in-out infinite;
+}
+
+/* 3D Text Effect */
+.text-3d {
+  text-shadow: 
+    0 1px 0 #ccc,
+    0 2px 0 #c9c9c9,
+    0 3px 0 #bbb,
+    0 4px 0 #b9b9b9,
+    0 5px 0 #aaa,
+    0 6px 1px rgba(0,0,0,.1),
+    0 0 5px rgba(0,0,0,.1),
+    0 1px 3px rgba(0,0,0,.3),
+    0 3px 5px rgba(0,0,0,.2),
+    0 5px 10px rgba(0,0,0,.25),
+    0 10px 10px rgba(0,0,0,.2),
+    0 20px 20px rgba(0,0,0,.15);
+}
diff --git a/Frontend/src/pages/BasicDetails.tsx b/Frontend/src/pages/BasicDetails.tsx
index a1fa5f9..d72e0ef 100644
--- a/Frontend/src/pages/BasicDetails.tsx
+++ b/Frontend/src/pages/BasicDetails.tsx
@@ -30,7 +30,6 @@ import { motion, AnimatePresence } from "framer-motion";
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { UserNav } from "../components/user-nav";
-import { MainNav } from "../components/main-nav";
 import { Link } from "react-router-dom";
 import { ModeToggle } from "../components/mode-toggle";
 
diff --git a/Frontend/src/pages/Brand/Dashboard.tsx b/Frontend/src/pages/Brand/Dashboard.tsx
index d2b4dcd..023c77b 100644
--- a/Frontend/src/pages/Brand/Dashboard.tsx
+++ b/Frontend/src/pages/Brand/Dashboard.tsx
@@ -33,8 +33,18 @@ import {
   Activity,
   Rocket,
 } from "lucide-react";
+import { CreatorMatches } from "../../components/dashboard/creator-matches";
+import { useState } from "react";
 
 const Dashboard = () => {
+  // Mock sponsorships for selection (replace with real API call if needed)
+  const sponsorships = [
+    { id: "1", title: "Summer Collection" },
+    { id: "2", title: "Tech Launch" },
+    { id: "3", title: "Fitness Drive" },
+  ];
+  const [selectedSponsorship, setSelectedSponsorship] = useState<string>("");
+
   return (
     <>
       <div className="min-h-screen bg-gray-50">
@@ -159,46 +169,24 @@ const Dashboard = () => {
               <div className="space-y-4">
                 <div className="flex items-center justify-between">
                   <h2 className="text-xl font-semibold text-gray-900">
-                    Recommended Creators
+                    Matched Creators for Your Campaign
                   </h2>
-                  <Button variant="default">View All</Button>
                 </div>
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                  {[1, 2, 3].map((i) => (
-                    <Card key={i} className="border border-gray-300">
-                      <CardContent className="p-6">
-                        <div className="flex items-center gap-4">
-                          <img
-                            src={`https://images.unsplash.com/photo-1610276198568-eb6d0ff53e48?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cG90cmFpdHxlbnwwfHwwfHx8MA%3D%3D`}
-                            alt="Creator"
-                            className="h-16 w-16 rounded-full object-cover"
-                          />
-                          <div>
-                            <h3 className="font-semibold text-gray-900">
-                              Sarah Parker
-                            </h3>
-                            <p className="text-sm text-gray-500">
-                              Lifestyle & Fashion
-                            </p>
-                          </div>
-                        </div>
-                        <div className="mt-4 grid grid-cols-2 gap-4 text-sm">
-                          <div>
-                            <p className="text-gray-500">Followers</p>
-                            <p className="font-semibold">245K</p>
-                          </div>
-                          <div>
-                            <p className="text-gray-500">Engagement</p>
-                            <p className="font-semibold">4.8%</p>
-                          </div>
-                        </div>
-                        <Button className="mt-4 w-full bg-purple-700 hover:bg-purple-800 text-white">
-                          View Profile
-                        </Button>
-                      </CardContent>
-                    </Card>
-                  ))}
+                <div className="mb-4">
+                  <label htmlFor="sponsorship-select" className="mr-2 font-medium">Select Campaign:</label>
+                  <select
+                    id="sponsorship-select"
+                    value={selectedSponsorship}
+                    onChange={e => setSelectedSponsorship(e.target.value)}
+                    className="border border-gray-300 rounded px-2 py-1"
+                  >
+                    <option value="">-- Select --</option>
+                    {sponsorships.map(s => (
+                      <option key={s.id} value={s.id}>{s.title}</option>
+                    ))}
+                  </select>
                 </div>
+                <CreatorMatches sponsorshipId={selectedSponsorship} />
               </div>
             </TabsContent>
 
diff --git a/Frontend/src/pages/DashboardPage.tsx b/Frontend/src/pages/DashboardPage.tsx
index fa2ea4f..fba9c86 100644
--- a/Frontend/src/pages/DashboardPage.tsx
+++ b/Frontend/src/pages/DashboardPage.tsx
@@ -24,7 +24,7 @@ import { SponsorshipMatches } from "../components/dashboard/sponsorship-matches"
 import { useAuth } from "../context/AuthContext"
 
 export default function DashboardPage() {
-  const {logout} = useAuth();
+  const {logout, user} = useAuth();
 
   return (
     <div className="flex min-h-screen flex-col bg-[hsl(0,0%,100%)] text-[hsl(222.2,84%,4.9%)]">
@@ -180,7 +180,7 @@ export default function DashboardPage() {
                   <CardDescription className="text-[hsl(215.4,16.3%,46.9%)]">Brands that match your audience and content</CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <SponsorshipMatches />
+                  <SponsorshipMatches creatorId={user?.id || ""} />
                 </CardContent>
               </Card>
               <Card className="col-span-3 bg-[hsl(0,0%,100%)] border-[hsl(214.3,31.8%,91.4%)]">
diff --git a/Frontend/src/pages/HomePage.tsx b/Frontend/src/pages/HomePage.tsx
index b8d95a9..011641d 100644
--- a/Frontend/src/pages/HomePage.tsx
+++ b/Frontend/src/pages/HomePage.tsx
@@ -8,107 +8,703 @@ import {
   MessageSquare,
   Rocket,
   Users,
+  Plus,
+  TrendingUp,
+  Calendar,
+  Star,
+  Target,
+  Zap,
+  BookOpen,
+  Award,
+  TrendingDown,
+  Eye,
+  Heart,
+  Share2,
+  Play,
+  UserPlus,
+  Sparkles,
 } from "lucide-react";
 import { Button } from "../components/ui/button";
 import { MainNav } from "../components/main-nav";
 import { ModeToggle } from "../components/mode-toggle";
 import { UserNav } from "../components/user-nav";
-import Onboarding from "../components/Onboarding";
+import { useAuth } from "../context/AuthContext";
+import { supabase } from "../utils/supabase";
 
 const features = [
   {
     icon: Handshake,
-    title: "AI-Driven Sponsorship Matchmaking",
+    title: "AI-Driven Matchmaking",
     desc: "Connect with brands based on audience demographics, engagement rates, and content style.",
+    gradient: "from-blue-500 to-purple-600",
   },
   {
     icon: Users,
     title: "Creator Collaboration Hub",
     desc: "Find and partner with creators who have complementary audiences and content niches.",
+    gradient: "from-green-500 to-blue-600",
   },
   {
     icon: Layers,
-    title: "AI-Based Pricing Optimization",
+    title: "Smart Pricing Optimization",
     desc: "Get fair sponsorship pricing recommendations based on engagement and market trends.",
+    gradient: "from-purple-500 to-pink-600",
   },
   {
     icon: MessageSquare,
-    title: "Negotiation & Contract Assistant",
+    title: "AI Contract Assistant",
     desc: "Structure deals, generate contracts, and optimize terms using AI insights.",
+    gradient: "from-orange-500 to-red-600",
   },
   {
     icon: BarChart3,
     title: "Performance Analytics",
     desc: "Track sponsorship performance, audience engagement, and campaign success.",
+    gradient: "from-indigo-500 to-purple-600",
   },
   {
     icon: Rocket,
     title: "ROI Tracking",
     desc: "Measure and optimize return on investment for both creators and brands.",
+    gradient: "from-teal-500 to-green-600",
   },
 ];
 
+const dashboardFeatures = [
+  {
+    icon: TrendingUp,
+    title: "Analytics Dashboard",
+    desc: "Track your performance metrics, engagement rates, and growth trends.",
+  },
+  {
+    icon: Handshake,
+    title: "Active Collaborations",
+    desc: "Manage your ongoing partnerships and track collaboration progress.",
+  },
+  {
+    icon: Calendar,
+    title: "Campaign Calendar",
+    desc: "Schedule and organize your content campaigns and brand partnerships.",
+  },
+  {
+    icon: MessageSquare,
+    title: "Communication Hub",
+    desc: "Connect with brands and creators through our integrated messaging system.",
+  },
+  {
+    icon: BarChart3,
+    title: "Performance Insights",
+    desc: "Get detailed analytics and insights to optimize your content strategy.",
+  },
+  {
+    icon: Plus,
+    title: "Create New Campaign",
+    desc: "Start new collaborations and campaigns with our AI-powered matching system.",
+  },
+];
+
+const successStories = [
+  {
+    creator: "Sarah Chen",
+    niche: "Tech & Lifestyle",
+    followers: "2.1M",
+    brand: "TechFlow",
+    result: "500% ROI increase",
+    story: "Sarah's authentic tech reviews helped TechFlow launch their new smartphone with record-breaking pre-orders.",
+    avatar: "/avatars/sarah.jpg",
+    platform: "YouTube",
+  },
+  {
+    creator: "Marcus Rodriguez",
+    niche: "Fitness & Wellness",
+    followers: "850K",
+    brand: "FitFuel",
+    result: "300% engagement boost",
+    story: "Marcus's workout challenges with FitFuel products generated over 10M views and 50K+ app downloads.",
+    avatar: "/avatars/marcus.jpg",
+    platform: "Instagram",
+  },
+  {
+    creator: "Emma Thompson",
+    niche: "Sustainable Fashion",
+    followers: "1.2M",
+    brand: "EcoStyle",
+    result: "200% sales increase",
+    story: "Emma's sustainable fashion content helped EcoStyle become the top eco-friendly brand in their category.",
+    avatar: "/avatars/emma.jpg",
+    platform: "TikTok",
+  },
+];
+
+const trendingNiches = [
+  {
+    name: "AI & Tech",
+    growth: "+45%",
+    creators: "12.5K",
+    avgEngagement: "8.2%",
+    icon: Zap,
+    color: "from-blue-500 to-purple-600",
+  },
+  {
+    name: "Sustainable Living",
+    growth: "+38%",
+    creators: "8.9K",
+    avgEngagement: "9.1%",
+    icon: Target,
+    color: "from-green-500 to-teal-600",
+  },
+  {
+    name: "Mental Health",
+    growth: "+52%",
+    creators: "15.2K",
+    avgEngagement: "7.8%",
+    icon: Heart,
+    color: "from-pink-500 to-rose-600",
+  },
+  {
+    name: "Gaming & Esports",
+    growth: "+41%",
+    creators: "22.1K",
+    avgEngagement: "6.9%",
+    icon: Play,
+    color: "from-purple-500 to-indigo-600",
+  },
+  {
+    name: "Personal Finance",
+    growth: "+33%",
+    creators: "6.8K",
+    avgEngagement: "8.5%",
+    icon: TrendingUp,
+    color: "from-emerald-500 to-green-600",
+  },
+  {
+    name: "Remote Work",
+    growth: "+29%",
+    creators: "9.3K",
+    avgEngagement: "7.2%",
+    icon: Users,
+    color: "from-orange-500 to-red-600",
+  },
+];
+
+const creatorResources = [
+  {
+    title: "Creator Economy Report 2024",
+    desc: "Latest trends, platform changes, and monetization strategies",
+    readTime: "8 min read",
+    category: "Research",
+    icon: BookOpen,
+  },
+  {
+    title: "How to Negotiate Brand Deals",
+    desc: "Master the art of pricing and contract negotiation",
+    readTime: "12 min read",
+    category: "Guide",
+    icon: Handshake,
+  },
+  {
+    title: "Content Calendar Templates",
+    desc: "Free templates to organize your content strategy",
+    readTime: "5 min read",
+    category: "Template",
+    icon: Calendar,
+  },
+  {
+    title: "Platform Algorithm Updates",
+    desc: "Stay ahead with latest social media changes",
+    readTime: "6 min read",
+    category: "News",
+    icon: TrendingUp,
+  },
+];
+
+const brandShowcase = [
+  {
+    name: "TechFlow",
+    industry: "Technology",
+    logo: "/brands/techflow.png",
+    description: "Leading smartphone manufacturer seeking tech reviewers and lifestyle creators",
+    followers: "2.5M",
+    budget: "$5K - $50K",
+    lookingFor: ["Tech Reviewers", "Lifestyle Creators", "Gaming Streamers"],
+    activeCampaigns: 3,
+  },
+  {
+    name: "FitFuel",
+    industry: "Health & Fitness",
+    logo: "/brands/fitfuel.png",
+    description: "Premium fitness supplement brand looking for authentic fitness influencers",
+    followers: "1.8M",
+    budget: "$3K - $25K",
+    lookingFor: ["Fitness Trainers", "Nutrition Experts", "Wellness Coaches"],
+    activeCampaigns: 5,
+  },
+  {
+    name: "EcoStyle",
+    industry: "Sustainable Fashion",
+    logo: "/brands/ecostyle.png",
+    description: "Eco-friendly fashion brand seeking sustainable lifestyle advocates",
+    followers: "950K",
+    budget: "$2K - $20K",
+    lookingFor: ["Fashion Influencers", "Sustainability Advocates", "Lifestyle Creators"],
+    activeCampaigns: 2,
+  },
+  {
+    name: "GameZone",
+    industry: "Gaming",
+    logo: "/brands/gamezone.png",
+    description: "Gaming accessories company looking for esports and gaming content creators",
+    followers: "3.2M",
+    budget: "$4K - $40K",
+    lookingFor: ["Gaming Streamers", "Esports Players", "Tech Reviewers"],
+    activeCampaigns: 4,
+  },
+];
+
+// TrendingNichesSection: Fetches and displays trending niches from the backend
+function TrendingNichesSection() {
+  // State for trending niches, loading, and error
+  const [niches, setNiches] = useState<{ name: string; insight: string; global_activity: number }[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch trending niches from the backend API on mount
+  useEffect(() => {
+    fetch("/api/trending-niches")
+      .then(res => {
+        if (!res.ok) throw new Error("Failed to fetch trending niches");
+        return res.json();
+      })
+      .then(data => {
+        setNiches(data);
+        setLoading(false);
+      })
+      .catch(err => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) return <div>Loading trending niches...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  // Emoji icons for visual variety in cards
+  const icons = ['🤖','🌱','🎮','💸','✈️','🧩'];
+
+  // Modern glassmorphism card design for each trending niche
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">
+      {niches.map((niche, idx) => (
+        <div
+          key={idx}
+          className="relative group pt-8 bg-white/20 backdrop-blur-xl rounded-2xl border border-white/30 shadow-2xl w-full max-w-xs transition-transform duration-300 hover:scale-105 hover:shadow-2xl overflow-hidden"
+        >
+          {/* Gradient overlay for extra glass effect */}
+          <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/40 via-white/10 to-blue-100/10 pointer-events-none" />
+          {/* Floating Emoji icon above the card */}
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 flex items-center justify-center w-12 h-12 bg-gradient-to-br from-purple-400 to-blue-400 rounded-full shadow-lg border-4 border-white z-10">
+            <span className="text-2xl">{icons[idx % icons.length]}</span>
+          </div>
+          {/* Niche name */}
+          <h3 className="text-xl font-bold text-gray-900 mb-2 mt-6 text-center relative z-10">{niche.name}</h3>
+          {/* Niche insight as a quote */}
+          <blockquote className="italic text-gray-700 mb-4 text-center border-l-4 border-purple-300 pl-3 relative z-10">
+            “{niche.insight}”
+          </blockquote>
+          {/* Global activity as a progress bar */}
+          <div className="flex flex-col items-center mt-4 relative z-10">
+            <span className="text-xs text-gray-500 mb-1">Global Activity</span>
+            <div className="w-full flex items-center justify-center">
+              <div className="w-24 h-3 bg-gray-200 rounded-full overflow-hidden">
+                <div
+                  className={`h-3 rounded-full transition-all duration-300 ${
+                    niche.global_activity >= 4
+                      ? 'bg-gradient-to-r from-purple-500 to-blue-500'
+                      : 'bg-gradient-to-r from-yellow-400 to-orange-500'
+                  }`}
+                  style={{ width: `${(niche.global_activity / 5) * 100}%` }}
+                />
+              </div>
+              <span className="ml-2 font-semibold text-purple-700">{niche.global_activity}/5</span>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function WhyChooseSection() {
+  return (
+    <section className="w-full py-20 bg-gradient-to-b from-white via-blue-50 to-purple-50">
+      <div className="container mx-auto px-6 md:px-12">
+        <h2 className="text-3xl md:text-4xl font-bold text-center text-gray-900 mb-4">Why Choose Inpact AI?</h2>
+        <p className="text-lg text-center text-gray-600 mb-12 max-w-2xl mx-auto">
+          Powerful tools for both brands and creators to connect, collaborate, and grow.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+          {/* Brands Column */}
+          <div className="bg-white rounded-2xl shadow-lg p-8 flex flex-col items-center border border-purple-100">
+            <div className="flex items-center gap-3 mb-4">
+              <Rocket className="h-8 w-8 text-purple-600" />
+              <span className="text-xl font-semibold text-purple-700">For Brands</span>
+            </div>
+            <ul className="space-y-4 text-gray-700 w-full">
+              <li className="flex items-start gap-3"><Handshake className="h-6 w-6 text-blue-500" /> AI-driven creator matching for your campaigns</li>
+              <li className="flex items-start gap-3"><BarChart3 className="h-6 w-6 text-green-500" /> Real-time performance analytics & ROI tracking</li>
+              <li className="flex items-start gap-3"><Layers className="h-6 w-6 text-pink-500" /> Smart pricing & budget optimization</li>
+              <li className="flex items-start gap-3"><MessageSquare className="h-6 w-6 text-orange-500" /> Streamlined communication & contract management</li>
+            </ul>
+          </div>
+          {/* Creators Column */}
+          <div className="bg-white rounded-2xl shadow-lg p-8 flex flex-col items-center border border-blue-100">
+            <div className="flex items-center gap-3 mb-4">
+              <Users className="h-8 w-8 text-blue-600" />
+              <span className="text-xl font-semibold text-blue-700">For Creators</span>
+            </div>
+            <ul className="space-y-4 text-gray-700 w-full">
+              <li className="flex items-start gap-3"><TrendingUp className="h-6 w-6 text-purple-500" /> Get discovered by top brands in your niche</li>
+              <li className="flex items-start gap-3"><Award className="h-6 w-6 text-yellow-500" /> Fair sponsorship deals & transparent payments</li>
+              <li className="flex items-start gap-3"><BookOpen className="h-6 w-6 text-indigo-500" /> AI-powered content & contract assistant</li>
+              <li className="flex items-start gap-3"><Heart className="h-6 w-6 text-pink-500" /> Grow your audience & track your impact</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 export default function HomePage() {
+  const { isAuthenticated, user } = useAuth();
+  
   // Refs for scroll detection
   const featuresRef = useRef(null);
+  const successStoriesRef = useRef(null);
+  const trendingRef = useRef(null);
+  const resourcesRef = useRef(null);
   const footerRef = useRef(null);
 
-  // State to track visibility
+  // State to track visibility (for one-time animation)
   const [isFeaturesVisible, setIsFeaturesVisible] = useState(false);
+  const [isSuccessStoriesVisible, setIsSuccessStoriesVisible] = useState(false);
+  const [isTrendingVisible, setIsTrendingVisible] = useState(false);
+  const [isResourcesVisible, setIsResourcesVisible] = useState(false);
   const [isFooterVisible, setIsFooterVisible] = useState(false);
 
-  // Set up intersection observer for scroll detection
+  // One-time animation state
+  const [hasAnimatedTrending, setHasAnimatedTrending] = useState(false);
+  const [hasAnimatedBrands, setHasAnimatedBrands] = useState(false);
+
+  // Set up intersection observer for scroll detection (one-time animation)
   useEffect(() => {
-    const featuresObserver = new IntersectionObserver(
+    const trendingObserver = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry.isIntersecting && !hasAnimatedTrending) {
+          setIsTrendingVisible(true);
+          setHasAnimatedTrending(true);
+        }
+      },
+      { root: null, rootMargin: "0px", threshold: 0.1 }
+    );
+    const brandsObserver = new IntersectionObserver(
       (entries) => {
         const [entry] = entries;
-        setIsFeaturesVisible(entry.isIntersecting);
+        if (entry.isIntersecting && !hasAnimatedBrands) {
+          setIsSuccessStoriesVisible(true);
+          setHasAnimatedBrands(true);
+        }
       },
-      {
-        root: null,
-        rootMargin: "0px",
-        threshold: 0.1, // Trigger when 10% of the element is visible
-      }
+      { root: null, rootMargin: "0px", threshold: 0.1 }
     );
+    if (trendingRef.current) trendingObserver.observe(trendingRef.current);
+    if (successStoriesRef.current) brandsObserver.observe(successStoriesRef.current);
+    return () => {
+      if (trendingRef.current) trendingObserver.unobserve(trendingRef.current);
+      if (successStoriesRef.current) brandsObserver.unobserve(successStoriesRef.current);
+    };
+  }, [hasAnimatedTrending, hasAnimatedBrands]);
 
+  // ... keep other observers for footer, etc. if needed ...
+  useEffect(() => {
     const footerObserver = new IntersectionObserver(
       (entries) => {
         const [entry] = entries;
         setIsFooterVisible(entry.isIntersecting);
       },
-      {
-        root: null,
-        rootMargin: "0px",
-        threshold: 0.1,
-      }
+      { root: null, rootMargin: "0px", threshold: 0.1 }
     );
-
-    if (featuresRef.current) {
-      featuresObserver.observe(featuresRef.current);
-    }
-
-    if (footerRef.current) {
-      footerObserver.observe(footerRef.current);
-    }
-
+    if (footerRef.current) footerObserver.observe(footerRef.current);
     return () => {
-      if (featuresRef.current) {
-        featuresObserver.unobserve(featuresRef.current);
-      }
-      if (footerRef.current) {
-        footerObserver.unobserve(footerRef.current);
-      }
+      if (footerRef.current) footerObserver.unobserve(footerRef.current);
     };
   }, []);
 
+  // Logged-in user homepage
+  if (isAuthenticated && user) {
+    return (
+      <div className="flex min-h-screen flex-col bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 text-gray-900">
+        {/* Header with glassmorphism */}
+        <header className="fixed top-0 z-50 w-full border-b border-white/20 bg-white/10 backdrop-blur-xl px-6">
+          <div className="container flex h-16 items-center justify-between">
+            <div className="flex items-center gap-6 md:gap-10">
+              <Link to="/" className="flex items-center space-x-2">
+                <div className="relative">
+                  <Rocket className="h-6 w-6 text-purple-600" />
+                  <div className="absolute -inset-1 bg-purple-600/20 rounded-full blur-sm"></div>
+                </div>
+                <span className="font-bold text-xl text-gray-900">Inpact</span>
+              </Link>
+              <MainNav />
+            </div>
+            <div className="flex items-center gap-4">
+              <ModeToggle />
+              <UserNav />
+            </div>
+          </div>
+        </header>
+
+        {/* Hero Section - Image Left, Text Right, Text More Centered */}
+        <main className="flex-1">
+          <section className="w-full min-h-screen flex items-center relative pt-16 overflow-hidden">
+            {/* Background elements */}
+            <div className="absolute inset-0 bg-gradient-to-br from-purple-100/50 via-blue-100/50 to-indigo-100/50"></div>
+            <div className="absolute top-20 left-10 w-72 h-72 bg-purple-300/30 rounded-full blur-3xl animate-pulse"></div>
+            <div className="absolute bottom-20 right-10 w-96 h-96 bg-blue-300/30 rounded-full blur-3xl animate-pulse"></div>
+            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-r from-purple-400/10 to-blue-400/10 rounded-full blur-3xl"></div>
+            
+            <div className="container relative z-10 px-0 md:px-0 max-w-7xl mx-auto">
+              <div className="grid lg:grid-cols-2 gap-24 items-center">
+                {/* Left Image */}
+                <div className="relative order-first">
+                  <div className="relative">
+                    {/* 3D Glow Effect */}
+                    <div className="absolute -inset-8 bg-gradient-to-r from-purple-600/20 via-blue-600/20 to-indigo-600/20 rounded-3xl blur-2xl animate-pulse"></div>
+                    <div className="absolute -inset-4 bg-gradient-to-r from-purple-400/30 to-blue-400/30 rounded-2xl blur-xl"></div>
+                    {/* Main Image */}
+                    <div className="relative bg-white/20 backdrop-blur-sm rounded-2xl p-4 border border-white/30 shadow-2xl">
+                      <img
+                        src="/Home.png"
+                        alt="Dashboard Preview"
+                        className="rounded-xl object-cover w-full h-auto shadow-lg"
+                      />
+                    </div>
+                    {/* Floating Elements */}
+                    <div className="absolute -top-4 -right-4 w-16 h-16 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center shadow-lg animate-bounce">
+                      <TrendingUp className="h-8 w-8 text-white" />
+                    </div>
+                    <div className="absolute -bottom-4 -left-4 w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center shadow-lg animate-bounce" style={{animationDelay: '0.5s'}}>
+                      <Users className="h-6 w-6 text-white" />
+                    </div>
+                    <div className="absolute top-1/2 -right-8 w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center shadow-lg animate-bounce" style={{animationDelay: '1s'}}>
+                      <Zap className="h-5 w-5 text-white" />
+                    </div>
+                  </div>
+                </div>
+                {/* Right Content */}
+                <div className="flex flex-col items-center lg:items-start justify-center w-full h-full space-y-8 order-last px-6 md:px-12 lg:px-24">
+                  <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full border border-white/30 mb-6">
+                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                    <span className="text-sm font-medium text-gray-700">Welcome back!</span>
+                  </div>
+                  <div className="space-y-6 w-full">
+                    {/* Main Welcome Heading */}
+                    <h1 className="text-5xl lg:text-7xl font-bold tracking-tight text-gray-900 leading-tight w-full text-center lg:text-left">
+                      Welcome, <span className="bg-gradient-to-r from-purple-600 via-blue-600 to-indigo-600 bg-clip-text text-transparent animate-gradient">{user.user_metadata?.name || user.email?.split('@')[0]}</span>
+                    </h1>
+                    <p className="text-xl lg:text-2xl text-gray-700 max-w-2xl mx-auto lg:mx-0 leading-relaxed w-full text-center lg:text-left">
+                      Ready to grow your creator business? Explore new opportunities, track your performance, and connect with brands.
+                    </p>
+                  </div>
+                  {/* Action Buttons */}
+                  <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
+                    <Button
+                      size="lg"
+                      className="bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700 shadow-lg hover:shadow-xl transition-all duration-300 px-8 py-4 text-lg"
+                    >
+                      <Link to="/dashboard" className="flex items-center">
+                        Go to Dashboard <ArrowRight className="ml-2 h-5 w-5" />
+                      </Link>
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="lg"
+                      className="border-white/30 bg-white/10 backdrop-blur-sm text-gray-900 hover:bg-white/20 transition-all duration-300 px-8 py-4 text-lg"
+                    >
+                      <Link to="/dashboard/sponsorships" className="flex items-center">
+                        Browse Opportunities
+                      </Link>
+                    </Button>
+                  </div>
+                  {/* How It Works Row */}
+                  <div className="flex flex-col sm:flex-row gap-8 justify-center mt-19">
+                    <div className="flex flex-col items-center text-center">
+                      <UserPlus className="h-10 w-10 mb-2 text-purple-600" />
+                      <span className="font-semibold text-gray-800">Create your profile</span>
+                    </div>
+                    <div className="flex flex-col items-center text-center">
+                      <Sparkles className="h-10 w-10 mb-2 text-blue-600" />
+                      <span className="font-semibold text-gray-800">Get matched by AI</span>
+                    </div>
+                    <div className="flex flex-col items-center text-center">
+                      <Handshake className="h-10 w-10 mb-2 text-green-600" />
+                      <span className="font-semibold text-gray-800">Collaborate & grow</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Why Choose Inpact AI Section (for logged out users) */}
+          <WhyChooseSection />
+
+          {/* Trending Niches Section - Centered Grid, No Extra Right Space */}
+          <section ref={trendingRef} className="w-full py-24 bg-gradient-to-b from-blue-50 via-white to-purple-50 relative">
+            <div className="absolute inset-0 bg-gradient-to-br from-purple-50/50 to-blue-50/50"></div>
+            <div
+              className={`max-w-7xl mx-auto relative z-10 px-2 sm:px-4 md:px-8 text-center transition-all duration-1000 transform ${
+                isTrendingVisible
+                  ? "opacity-100 translate-y-0"
+                  : "opacity-0 translate-y-20"
+              }`}
+            >
+              <h2 className="text-3xl font-bold sm:text-4xl text-gray-900 mb-4">
+                Trending Niches
+              </h2>
+              <p className="mt-4 text-lg text-gray-700 mb-12">
+                Discover the fastest-growing content categories and opportunities.
+              </p>
+              <TrendingNichesSection />
+            </div>
+          </section>
+
+          {/* Brand Showcase Section - Centered Grid, No Extra Right Space */}
+          <section ref={successStoriesRef} className="w-full py-24 bg-gradient-to-b from-purple-50 via-white to-blue-50 relative">
+            <div className="absolute inset-0 bg-white/50 backdrop-blur-sm"></div>
+            <div className="max-w-6xl mx-auto px-6 md:px-12 relative z-10">
+              <h2 className="text-3xl font-bold sm:text-4xl text-gray-900 mb-4 text-center">
+                Brands Seeking Creators
+              </h2>
+              <p className="mt-4 text-lg text-gray-700 mb-12 text-center">
+                Connect with companies actively looking for creators like you.
+              </p>
+              <div className="mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 justify-items-center">
+                {brandShowcase.map((brand, idx) => (
+                  <div
+                    key={idx}
+                    className="group p-6 bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-white/20 hover:bg-white/90 w-full max-w-xl"
+                  >
+                    <div className="flex items-start gap-4 mb-4">
+                      <div className="relative">
+                        <div className="w-16 h-16 bg-gradient-to-br from-purple-400 to-blue-500 rounded-xl flex items-center justify-center">
+                          <span className="text-white font-bold text-xl">
+                            {brand.name.split('').slice(0, 2).join('')}
+                          </span>
+                        </div>
+                        <div className="absolute -inset-1 bg-gradient-to-br from-purple-400/20 to-blue-500/20 rounded-xl blur-sm"></div>
+                      </div>
+                      <div className="text-left flex-1">
+                        <h3 className="font-semibold text-gray-900 text-lg">{brand.name}</h3>
+                        <p className="text-sm text-gray-600 mb-2">{brand.industry}</p>
+                        <p className="text-gray-700 text-sm">{brand.description}</p>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-2 gap-4 mb-4 text-sm">
+                      <div>
+                        <p className="text-gray-600">Followers</p>
+                        <p className="font-semibold text-gray-900">{brand.followers}</p>
+                      </div>
+                      <div>
+                        <p className="text-gray-600">Budget Range</p>
+                        <p className="font-semibold text-green-600">{brand.budget}</p>
+                      </div>
+                      <div>
+                        <p className="text-gray-600">Active Campaigns</p>
+                        <p className="font-semibold text-blue-600">{brand.activeCampaigns}</p>
+                      </div>
+                      <div>
+                        <p className="text-gray-600">Looking For</p>
+                        <p className="font-semibold text-purple-600">{brand.lookingFor.length} types</p>
+                      </div>
+                    </div>
+                    <div className="flex flex-wrap gap-2 mb-4">
+                      {brand.lookingFor.map((type, typeIdx) => (
+                        <span
+                          key={typeIdx}
+                          className="px-3 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded-full"
+                        >
+                          {type}
+                        </span>
+                      ))}
+                    </div>
+                    <Button
+                      className="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700"
+                    >
+                      <Link to="/dashboard/sponsorships" className="flex items-center justify-center">
+                        View Opportunities <ArrowRight className="ml-2 h-4 w-4" />
+                      </Link>
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Footer */}
+          <footer ref={footerRef} className="w-full py-12 bg-gradient-to-r from-gray-900 to-gray-800 text-white relative">
+            <div className="absolute inset-0 bg-black/20 backdrop-blur-sm"></div>
+            <div
+              className={`container relative z-10 px-6 md:px-12 text-center transition-all duration-1000 transform ${
+                isFooterVisible
+                  ? "opacity-100 translate-y-0"
+                  : "opacity-0 translate-y-20"
+              }`}
+            >
+              <div className="flex items-center justify-center space-x-2 mb-4">
+                <div className="relative">
+                  <Rocket className="h-6 w-6 text-purple-400" />
+                  <div className="absolute -inset-1 bg-purple-400/20 rounded-full blur-sm"></div>
+                </div>
+                <span className="font-bold text-xl">Inpact</span>
+              </div>
+              <p className="text-gray-400">
+                Empowering creators to build meaningful partnerships and grow their businesses.
+              </p>
+              <div className="mt-6 flex justify-center space-x-6 text-sm text-gray-400">
+                <Link to="/dashboard" className="hover:text-white transition-colors">
+                  Dashboard
+                </Link>
+                <Link to="/dashboard/sponsorships" className="hover:text-white transition-colors">
+                  Opportunities
+                </Link>
+                <Link to="/dashboard/analytics" className="hover:text-white transition-colors">
+                  Analytics
+                </Link>
+                <Link to="/dashboard/messages" className="hover:text-white transition-colors">
+                  Messages
+                </Link>
+              </div>
+            </div>
+          </footer>
+        </main>
+      </div>
+    );
+  }
+
+  // Non-logged-in user homepage (redesigned)
   return (
-    <div className="flex min-h-screen flex-col bg-gray-50 text-gray-900">
-      {/* Header */}
-      <header className="fixed top-0 z-50 w-full border-b border-gray-200 bg-white/80 backdrop-blur-lg px-6">
+    <div className="flex min-h-screen flex-col bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 text-gray-900">
+      {/* Header with glassmorphism */}
+      <header className="fixed top-0 z-50 w-full border-b border-white/20 bg-white/10 backdrop-blur-xl px-6">
         <div className="container flex h-16 items-center justify-between">
           <div className="flex items-center gap-6 md:gap-10">
             <Link to="/" className="flex items-center space-x-2">
-              <Rocket className="h-6 w-6 text-purple-600" />
+              <div className="relative">
+                <Rocket className="h-6 w-6 text-purple-600" />
+                <div className="absolute -inset-1 bg-purple-600/20 rounded-full blur-sm"></div>
+              </div>
               <span className="font-bold text-xl text-gray-900">Inpact</span>
             </Link>
             <MainNav />
@@ -116,12 +712,10 @@ export default function HomePage() {
           <div className="flex items-center gap-4">
             <ModeToggle />
             <div className="hidden md:flex gap-2">
-              <Button variant="ghost">
-                <Link to="/login" className="text-gray-900">
-                  Login
-                </Link>
+              <Button variant="ghost" className="text-gray-900 hover:bg-white/20">
+                <Link to="/login">Login</Link>
               </Button>
-              <Button className="bg-purple-600 text-white hover:bg-purple-700">
+              <Button className="bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700">
                 <Link to="/signup">Sign Up</Link>
               </Button>
             </div>
@@ -130,108 +724,214 @@ export default function HomePage() {
         </div>
       </header>
 
-      {/* Hero Section - Full Screen */}
+      {/* Hero Section - Completely Redesigned */}
       <main className="flex-1">
-        <section className="w-full min-h-screen flex items-center bg-purple-100 pt-16">
-          <div className="container ml-23 px-6 md:px-12 flex flex-col-reverse lg:flex-row items-center gap-12">
-            <div className="text-center lg:text-left max-w-2xl">
-              <h1 className="text-4xl font-bold tracking-tight sm:text-6xl text-gray-900">
-                AI-Powered Creator Collaboration Platform
-              </h1>
-              <p className="mt-4 text-lg text-gray-700 md:text-xl">
-                Connect with brands, collaborate with creators, and optimize
-                your partnerships through data-driven insights.
-              </p>
-              <div className="mt-6 flex flex-col gap-3 sm:flex-row">
-                <Button
-                  size="lg"
-                  className="bg-purple-600 text-white hover:bg-purple-700"
-                >
-                  <Link to="/dashboard" className="flex items-center">
-                    Get Started <ArrowRight className="ml-2 h-4 w-4" />
-                  </Link>
-                </Button>
-                <Button
-                  variant="outline"
-                  size="lg"
-                  className="border-gray-300 text-gray-900 hover:bg-gray-100"
-                >
-                  Learn More
-                </Button>
+        <section className="w-full min-h-screen flex items-center relative pt-16 overflow-hidden">
+          {/* Background elements */}
+          <div className="absolute inset-0 bg-gradient-to-br from-purple-100/50 via-blue-100/50 to-indigo-100/50"></div>
+          <div className="absolute top-20 left-10 w-72 h-72 bg-purple-300/30 rounded-full blur-3xl animate-pulse"></div>
+          <div className="absolute bottom-20 right-10 w-96 h-96 bg-blue-300/30 rounded-full blur-3xl animate-pulse"></div>
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-r from-purple-400/10 to-blue-400/10 rounded-full blur-3xl"></div>
+          
+          <div className="container relative z-10 px-6 md:px-12">
+            <div className="grid lg:grid-cols-2 gap-24 items-center">
+              {/* Left Content */}
+              <div className="text-center lg:text-left space-y-8">
+                <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full border border-white/30 mb-6">
+                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                  <span className="text-sm font-medium text-gray-700">AI-Powered Platform</span>
+                </div>
+                
+                <div className="space-y-6">
+                  {/* 3D Text Effect for "Inpact AI" */}
+                  <div className="relative">
+                    <h1 className="text-5xl lg:text-7xl font-black tracking-tight leading-tight uppercase bg-gradient-to-r from-purple-600 via-blue-500 to-indigo-600 bg-clip-text text-transparent">
+                      INPACT AI
+                    </h1>
+                    <h2 className="text-3xl lg:text-4xl font-bold text-gray-800 mt-4">
+                      Creator Collaboration Platform
+                    </h2>
+                  </div>
+                  
+                  <p className="text-xl lg:text-2xl text-gray-700 max-w-2xl mx-auto lg:mx-0 leading-relaxed">
+                    Connect with brands, collaborate with creators, and optimize your partnerships through data-driven insights.
+                  </p>
+                </div>
+                
+                <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
+                  <Button
+                    size="lg"
+                    className="bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700 shadow-lg hover:shadow-xl transition-all duration-300 px-8 py-4 text-lg group"
+                  >
+                    <Link to="/signup" className="flex items-center">
+                      Get Started <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
+                    </Link>
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="lg"
+                    className="border-white/30 bg-white/10 backdrop-blur-sm text-gray-900 hover:bg-white/20 transition-all duration-300 px-8 py-4 text-lg"
+                  >
+                    Learn More
+                  </Button>
+                </div>
+                {/* How It Works Row */}
+                <div className="flex flex-col sm:flex-row gap-8 justify-center mt-19">
+                  <div className="flex flex-col items-center text-center">
+                    <UserPlus className="h-10 w-10 mb-2 text-purple-600" />
+                    <span className="font-semibold text-gray-800">Create your profile</span>
+                  </div>
+                  <div className="flex flex-col items-center text-center">
+                    <Sparkles className="h-10 w-10 mb-2 text-blue-600" />
+                    <span className="font-semibold text-gray-800">Get matched by AI</span>
+                  </div>
+                  <div className="flex flex-col items-center text-center">
+                    <Handshake className="h-10 w-10 mb-2 text-green-600" />
+                    <span className="font-semibold text-gray-800">Collaborate & grow</span>
+                  </div>
+                </div>
+              </div>
+              
+              {/* Right Image */}
+              <div className="relative order-first lg:order-last">
+                <div className="relative">
+                  {/* 3D Glow Effect */}
+                  <div className="absolute -inset-8 bg-gradient-to-r from-purple-600/20 via-blue-600/20 to-indigo-600/20 rounded-3xl blur-2xl animate-pulse"></div>
+                  <div className="absolute -inset-4 bg-gradient-to-r from-purple-400/30 to-blue-400/30 rounded-2xl blur-xl"></div>
+                  
+                  {/* Main Image */}
+                  <div className="relative bg-white/20 backdrop-blur-sm rounded-2xl p-4 border border-white/30 shadow-2xl">
+                    <img
+                      src="/Home.png"
+                      alt="Hero Image"
+                      className="rounded-xl object-cover w-full h-auto shadow-lg"
+                    />
+                  </div>
+                  
+                  {/* Floating Elements */}
+                  <div className="absolute -top-4 -right-4 w-16 h-16 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center shadow-lg animate-bounce">
+                    <TrendingUp className="h-8 w-8 text-white" />
+                  </div>
+                  <div className="absolute -bottom-4 -left-4 w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center shadow-lg animate-bounce" style={{animationDelay: '0.5s'}}>
+                    <Users className="h-6 w-6 text-white" />
+                  </div>
+                  <div className="absolute top-1/2 -right-8 w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center shadow-lg animate-bounce" style={{animationDelay: '1s'}}>
+                    <Zap className="h-5 w-5 text-white" />
+                  </div>
+                </div>
               </div>
-            </div>
-            <div className="relative w-full max-w-lg">
-              <img
-                src="/Home.png"
-                alt="Hero Image"
-                className="rounded-xl shadow-xl object-cover w-full h-auto"
-              />
             </div>
           </div>
         </section>
 
-        {/* Onboarding Section */}
-        <Onboarding />
+        {/* Why Choose Inpact AI Section (for logged out users) */}
+        <WhyChooseSection />
 
-        {/* Features Section - Revealed on Scroll */}
-        <section ref={featuresRef} className="w-full py-24 bg-white">
-          <div
-            className={`container px-6 md:px-12 text-center transition-all duration-1000 transform ${
-              isFeaturesVisible
-                ? "opacity-100 translate-y-0"
-                : "opacity-0 translate-y-20"
-            }`}
-          >
-            <h2 className="text-3xl font-bold sm:text-4xl text-gray-900">
-              Key Features
+        {/* Success Stories Section */}
+        <section ref={successStoriesRef} className="w-full py-24 bg-gradient-to-b from-purple-50 via-white to-blue-50 relative">
+          <div className="absolute inset-0 bg-gradient-to-br from-purple-50/50 to-blue-50/50"></div>
+          <div className="max-w-6xl mx-auto px-6 md:px-12 relative z-10">
+            <h2 className="text-3xl font-bold sm:text-4xl text-gray-900 mb-4 text-center">
+              Success Stories
             </h2>
-            <p className="mt-4 text-lg text-gray-700">
-              Leverage AI to transform your creator partnerships and brand
-              sponsorships.
+            <p className="mt-4 text-lg text-gray-700 mb-12 text-center">
+              Real creators achieving amazing results with brand partnerships.
             </p>
-            <div className="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
-              {features.map(({ icon: Icon, title, desc }, idx) => (
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              {successStories.map((story, idx) => (
                 <div
                   key={idx}
-                  className="flex flex-col items-center text-center p-6 bg-gray-100 rounded-xl shadow-md"
+                  className="group p-6 bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-white/20 hover:bg-white/90"
                 >
-                  <div className="flex items-center justify-center h-20 w-20 rounded-full bg-purple-100 mb-4">
-                    <Icon className="h-10 w-10 text-purple-600" />
+                  <div className="flex items-center gap-4 mb-4">
+                    <div className="relative">
+                      <div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-blue-500 rounded-full flex items-center justify-center">
+                        <span className="text-white font-semibold text-lg">
+                          {story.creator.split(' ').map(n => n[0]).join('')}
+                        </span>
+                      </div>
+                      <div className="absolute -inset-1 bg-gradient-to-br from-purple-400/20 to-blue-500/20 rounded-full blur-sm"></div>
+                    </div>
+                    <div className="text-left">
+                      <h3 className="font-semibold text-gray-900">{story.creator}</h3>
+                      <p className="text-sm text-gray-600">{story.niche}</p>
+                    </div>
+                  </div>
+                  <div className="text-left mb-4">
+                    <p className="text-gray-700 mb-3">{story.story}</p>
+                    <div className="flex items-center gap-4 text-sm">
+                      <span className="flex items-center gap-1">
+                        <Eye className="h-4 w-4 text-gray-500" />
+                        {story.followers}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Star className="h-4 w-4 text-yellow-500" />
+                        {story.platform}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="bg-gradient-to-r from-green-100 to-emerald-100 rounded-lg p-3 border border-green-200">
+                    <p className="text-sm font-semibold text-green-800">
+                      Result: {story.result}
+                    </p>
                   </div>
-                  <h3 className="text-xl font-semibold text-gray-900">
-                    {title}
-                  </h3>
-                  <p className="mt-2 text-gray-600">{desc}</p>
                 </div>
               ))}
             </div>
           </div>
         </section>
-      </main>
 
-      {/* Footer - Revealed on Scroll */}
-      <footer
-        ref={footerRef}
-        className="mr-12 ml-12 border-t border-gray-200 bg-gray-50 py-6"
-      >
-        <div
-          className={`container flex flex-col md:flex-row items-center justify-between text-gray-600 transition-all duration-1000 transform ${
-            isFooterVisible
-              ? "opacity-100 translate-y-0"
-              : "opacity-0 translate-y-10"
-          }`}
-        >
-          <p>© 2024 Inpact. All rights reserved.</p>
-          <div className="flex gap-4 mt-4 md:mt-0">
-            <Link to="/terms" className="hover:underline">
-              Terms
-            </Link>
-            <Link to="/privacy" className="hover:underline">
-              Privacy
-            </Link>
+        {/* Trending Niches Section */}
+        <section ref={trendingRef} className="w-full py-24 bg-gradient-to-b from-blue-50 via-white to-purple-50 relative">
+          <div className="absolute inset-0 bg-white/50 backdrop-blur-sm"></div>
+          <div className="max-w-6xl mx-auto px-6 md:px-12 relative z-10">
+            <h2 className="text-3xl font-bold sm:text-4xl text-gray-900 mb-4 text-center">
+              Trending Niches
+            </h2>
+            <p className="mt-4 text-lg text-gray-700 mb-12 text-center">
+              Discover the fastest-growing content categories and opportunities.
+            </p>
+            <TrendingNichesSection />
           </div>
-        </div>
-      </footer>
+        </section>
+
+        {/* Footer */}
+        <footer ref={footerRef} className="w-full py-12 bg-gradient-to-r from-gray-900 to-gray-800 text-white relative">
+          <div className="absolute inset-0 bg-black/20 backdrop-blur-sm"></div>
+          <div
+            className={`container relative z-10 px-6 md:px-12 text-center transition-all duration-1000 transform ${
+              isFooterVisible
+                ? "opacity-100 translate-y-0"
+                : "opacity-0 translate-y-20"
+            }`}
+          >
+            <div className="flex items-center justify-center space-x-2 mb-4">
+              <div className="relative">
+                <Rocket className="h-6 w-6 text-purple-400" />
+                <div className="absolute -inset-1 bg-purple-400/20 rounded-full blur-sm"></div>
+              </div>
+              <span className="font-bold text-xl">Inpact</span>
+            </div>
+            <p className="text-gray-400">
+              Empowering creators to build meaningful partnerships and grow their businesses.
+            </p>
+            <div className="mt-6 flex justify-center space-x-6 text-sm text-gray-400">
+              <Link to="/dashboard" className="hover:text-white transition-colors">
+                Dashboard
+              </Link>
+              <Link to="/dashboard/sponsorships" className="hover:text-white transition-colors">
+                Opportunities
+              </Link>
+              <Link to="/dashboard/analytics" className="hover:text-white transition-colors">
+                Analytics
+              </Link>
+              <Link to="/dashboard/messages" className="hover:text-white transition-colors">
+                Messages
+              </Link>
+            </div>
+          </div>
+        </footer>
+      </main>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/Frontend/src/pages/Login.tsx b/Frontend/src/pages/Login.tsx
index 5e77eb9..875567a 100644
--- a/Frontend/src/pages/Login.tsx
+++ b/Frontend/src/pages/Login.tsx
@@ -30,7 +30,7 @@ export default function LoginPage() {
         return;
       }
 
-      Navigate("/dashboard");
+      // AuthContext will handle navigation based on user onboarding status and role
       setIsLoading(false);
     } catch (err) {
       setError("Invalid email or password. Please try again.");
@@ -49,11 +49,7 @@ export default function LoginPage() {
       return;
     }
 
-    supabase.auth.onAuthStateChange((event, session) => {
-      if (session) {
-        login();
-      }
-    });
+    // AuthContext will handle navigation based on user onboarding status and role
   };
 
   return (
diff --git a/Frontend/src/pages/RoleSelection.tsx b/Frontend/src/pages/RoleSelection.tsx
new file mode 100644
index 0000000..9905a64
--- /dev/null
+++ b/Frontend/src/pages/RoleSelection.tsx
@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export default function RoleSelection() {
+  const [selectedRole, setSelectedRole] = useState<string>("");
+  const [error, setError] = useState("");
+  const navigate = useNavigate();
+
+  const handleSelect = (role: string) => {
+    setSelectedRole(role);
+    setError("");
+  };
+
+  const handleContinue = () => {
+    if (!selectedRole) {
+      setError("Please select a role to continue.");
+      return;
+    }
+    if (selectedRole === "brand") {
+      navigate("/onboarding/brand");
+    } else if (selectedRole === "creator") {
+      navigate("/onboarding/creator");
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800">
+      <div className="w-full max-w-md bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8">
+        <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4 text-center">Choose your role</h2>
+        <p className="text-gray-600 dark:text-gray-300 mb-8 text-center">Select whether you want to sign up as a Brand or a Creator. You cannot change this later.</p>
+        {error && (
+          <div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-600 dark:text-red-400 text-sm">
+            {error}
+          </div>
+        )}
+        <div className="flex gap-6 justify-center mb-8">
+          <button
+            className={`flex-1 py-4 rounded-lg border-2 transition-all duration-200 text-lg font-semibold ${selectedRole === "creator" ? "border-purple-600 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300" : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200"}`}
+            onClick={() => handleSelect("creator")}
+          >
+            Creator
+          </button>
+          <button
+            className={`flex-1 py-4 rounded-lg border-2 transition-all duration-200 text-lg font-semibold ${selectedRole === "brand" ? "border-purple-600 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300" : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200"}`}
+            onClick={() => handleSelect("brand")}
+          >
+            Brand
+          </button>
+        </div>
+        <button
+          className="w-full py-3 px-4 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition-colors duration-200"
+          onClick={handleContinue}
+        >
+          Continue
+        </button>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/Frontend/src/pages/Signup.tsx b/Frontend/src/pages/Signup.tsx
index cc95e51..0055239 100644
--- a/Frontend/src/pages/Signup.tsx
+++ b/Frontend/src/pages/Signup.tsx
@@ -1,8 +1,10 @@
+
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { Check, Eye, EyeOff, Rocket } from "lucide-react";
 import { supabase } from "../utils/supabase";
 import { useAuth } from "@/context/AuthContext";
+import { demoInsert } from '../utils/demoInsert';
 
 export default function SignupPage() {
   const navigate = useNavigate();
@@ -10,8 +12,7 @@ export default function SignupPage() {
     name: "",
     email: "",
     password: "",
-    username: "",
-    accountType: "creator",
+    confirmPassword: ""
   });
   const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -19,14 +20,10 @@ export default function SignupPage() {
   const [step, setStep] = useState(1);
   const [user, setuser] = useState("influencer");
   const { login } = useAuth();
-  const [usernameError, setUsernameError] = useState("");
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData((prev) => ({ ...prev, [name]: value }));
-    if (name === "username") {
-      setUsernameError(validateUsername(value));
-    }
   };
 
   const handleAccountTypeChange = (type: string) => {
@@ -34,90 +31,45 @@ export default function SignupPage() {
     setFormData((prev) => ({ ...prev, accountType: type }));
   };
 
-  const validateUsername = (username: string) => {
-    // Username must be 3-20 chars, start with a letter, only letters, numbers, underscores
-    const regex = /^[a-zA-Z][a-zA-Z0-9_]{2,19}$/;
-    if (!regex.test(username)) {
-      return "Username must be 3-20 characters, start with a letter, and contain only letters, numbers, or underscores.";
-    }
-    return "";
-  };
-
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
-    if (step === 1) {
-      setStep(2);
+    if (formData.password !== formData.confirmPassword) {
+      setError("Passwords do not match");
       return;
     }
-
     setIsLoading(true);
     setError("");
-
-    // Validate username before submitting
-    const usernameValidation = validateUsername(formData.username);
-    if (usernameValidation) {
-      setUsernameError(usernameValidation);
-      setIsLoading(false);
-      return;
-    }
-
     try {
-      const { name, email, password, accountType, username } = formData;
-      // Check if username already exists in the users table before signup
-      const { data: existingUser, error: userCheckError } = await supabase
-        .from("users")
-        .select("id")
-        .eq("username", username)
-        .maybeSingle();
-      if (userCheckError) throw userCheckError;
-      if (existingUser) {
-        setError("This username is not available. Please choose another.");
+      const { name, email, password } = formData;
+      
+      // Check if user already exists
+      const { data: existingUser } = await supabase.auth.signInWithPassword({
+        email,
+        password: "dummy-password-to-check-existence",
+      });
+      
+      if (existingUser.user) {
+        setError("An account with this email already exists. Please sign in instead.");
         setIsLoading(false);
         return;
       }
-      // Sign up user with Supabase Auth (handles password securely)
+      
       const { data, error } = await supabase.auth.signUp({
         email,
         password,
-        options: { data: { name, accountType } },
+        options: { data: { name } },
       });
-
       if (error) {
-        console.error("Signup error:", error.message);
-        setError(error.message);
+        if (error.message.includes("already registered")) {
+          setError("An account with this email already exists. Please sign in instead.");
+        } else {
+          setError(error.message);
+        }
         setIsLoading(false);
         return;
       }
-
-      if (data.user) {
-        // Insert the new user into the users table with all required fields
-        // Use the id and canonical email from Supabase Auth for consistency
-        const { error: userInsertError } = await supabase
-          .from("users")
-          .insert([
-            {
-              id: data.user.id,
-              username: username,
-              email: data.user.email, // Use canonical email from Supabase
-              role: accountType,
-              profile_image: null,
-              bio: null,
-              created_at: new Date().toISOString(),
-              is_online: false,
-              last_seen: new Date().toISOString(),
-            },
-          ]);
-        if (userInsertError) {
-          console.error("User insert error:", userInsertError.message);
-          setError("Error saving user. Please try again.");
-          setIsLoading(false);
-          return;
-        }
-      }
-
       setIsLoading(false);
-      navigate(`/BasicDetails/${accountType}`);
+      // AuthContext will handle navigation based on user onboarding status and role
     } catch (err) {
       setError("Something went wrong. Please try again.");
     } finally {
@@ -135,11 +87,7 @@ export default function SignupPage() {
       return;
     }
 
-    supabase.auth.onAuthStateChange((event, session) => {
-      if (session) {
-        login();
-      }
-    });
+    // AuthContext will handle navigation based on user onboarding status and role
   };
 
   const passwordStrength = () => {
@@ -214,277 +162,19 @@ export default function SignupPage() {
               )}
 
               <form onSubmit={handleSubmit} className="space-y-6">
-                {step === 1 ? (
-                  <>
-                    <div className="space-y-2">
-                      <label
-                        htmlFor="username"
-                        className="text-sm font-medium text-gray-700 dark:text-gray-300"
-                      >
-                        Username
-                      </label>
-                      {/* User enters username here. Must be unique. */}
-                      <input
-                        id="username"
-                        name="username"
-                        type="text"
-                        value={formData.username}
-                        onChange={handleChange}
-                        required
-                        className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-200"
-                        placeholder="Choose a unique username"
-                      />
-                      {usernameError && (
-                        <div className="text-xs text-red-500 mt-1">{usernameError}</div>
-                      )}
-                    </div>
-                    <div className="space-y-2">
-                      <label
-                        htmlFor="email"
-                        className="text-sm font-medium text-gray-700 dark:text-gray-300"
-                      >
-                        Email
-                      </label>
-                      <input
-                        id="email"
-                        name="email"
-                        type="email"
-                        value={formData.email}
-                        onChange={handleChange}
-                        required
-                        className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-200"
-                        placeholder="you@example.com"
-                      />
-                    </div>
-
-                    <div className="space-y-2">
-                      <label
-                        htmlFor="password"
-                        className="text-sm font-medium text-gray-700 dark:text-gray-300"
-                      >
-                        Password
-                      </label>
-                      <div className="relative">
-                        <input
-                          id="password"
-                          name="password"
-                          type={showPassword ? "text" : "password"}
-                          value={formData.password}
-                          onChange={handleChange}
-                          required
-                          className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-200"
-                          placeholder="••••••••"
-                        />
-                        <button
-                          type="button"
-                          onClick={() => setShowPassword(!showPassword)}
-                          className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200"
-                        >
-                          {showPassword ? (
-                            <EyeOff className="h-5 w-5" />
-                          ) : (
-                            <Eye className="h-5 w-5" />
-                          )}
-                        </button>
-                      </div>
-
-                      {formData.password && (
-                        <div className="mt-2 space-y-2">
-                          <div className="flex justify-between items-center">
-                            <span className="text-xs text-gray-600 dark:text-gray-400">
-                              Password strength: {text}
-                            </span>
-                            <span className="text-xs text-gray-600 dark:text-gray-400">
-                              {strength}/4
-                            </span>
-                          </div>
-                          <div className="h-1 w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
-                            <div
-                              className={`h-full ${color} transition-all duration-300 ease-in-out`}
-                              style={{ width: `${(strength / 4) * 100}%` }}
-                            ></div>
-                          </div>
-                          <ul className="text-xs space-y-1 text-gray-600 dark:text-gray-400 mt-2">
-                            <li className="flex items-center">
-                              <span
-                                className={`mr-1 ${
-                                  formData.password.length >= 8
-                                    ? "text-green-500"
-                                    : "text-gray-400"
-                                }`}
-                              >
-                                {formData.password.length >= 8 ? (
-                                  <Check className="h-3 w-3" />
-                                ) : (
-                                  "○"
-                                )}
-                              </span>
-                              At least 8 characters
-                            </li>
-                            <li className="flex items-center">
-                              <span
-                                className={`mr-1 ${
-                                  /[A-Z]/.test(formData.password)
-                                    ? "text-green-500"
-                                    : "text-gray-400"
-                                }`}
-                              >
-                                {/[A-Z]/.test(formData.password) ? (
-                                  <Check className="h-3 w-3" />
-                                ) : (
-                                  "○"
-                                )}
-                              </span>
-                              At least 1 uppercase letter
-                            </li>
-                            <li className="flex items-center">
-                              <span
-                                className={`mr-1 ${
-                                  /[0-9]/.test(formData.password)
-                                    ? "text-green-500"
-                                    : "text-gray-400"
-                                }`}
-                              >
-                                {/[0-9]/.test(formData.password) ? (
-                                  <Check className="h-3 w-3" />
-                                ) : (
-                                  "○"
-                                )}
-                              </span>
-                              At least 1 number
-                            </li>
-                            <li className="flex items-center">
-                              <span
-                                className={`mr-1 ${
-                                  /[^A-Za-z0-9]/.test(formData.password)
-                                    ? "text-green-500"
-                                    : "text-gray-400"
-                                }`}
-                              >
-                                {/[^A-Za-z0-9]/.test(formData.password) ? (
-                                  <Check className="h-3 w-3" />
-                                ) : (
-                                  "○"
-                                )}
-                              </span>
-                              At least 1 special character
-                            </li>
-                          </ul>
-                        </div>
-                      )}
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    <div className="space-y-2">
-                      <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                        Account Type
-                      </label>
-                      <div className="grid grid-cols-2 gap-3">
-                        <button
-                          type="button"
-                          onClick={() => handleAccountTypeChange("influencer")}
-                          className={`flex flex-col items-center justify-center p-4 border rounded-lg transition-all duration-200 ${
-                            formData.accountType === "creator"
-                              ? "border-purple-500 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300"
-                              : "border-gray-300 dark:border-gray-600 hover:border-purple-300 dark:hover:border-purple-700"
-                          }`}
-                        >
-                          <svg
-                            className="h-6 w-6 mb-2"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                          >
-                            <path d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                          </svg>
-                          <span className="text-sm font-medium">Creator</span>
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => handleAccountTypeChange("brand")}
-                          className={`flex flex-col items-center justify-center p-4 border rounded-lg transition-all duration-200 ${
-                            formData.accountType === "brand"
-                              ? "border-purple-500 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300"
-                              : "border-gray-300 dark:border-gray-600 hover:border-purple-300 dark:hover:border-purple-700"
-                          }`}
-                        >
-                          <svg
-                            className="h-6 w-6 mb-2"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                          >
-                            <path d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                          </svg>
-                          <span className="text-sm font-medium">Brand</span>
-                        </button>
-                      </div>
-                    </div>
-                  </>
-                )}
-
-                <div className="pt-2">
-                  <button
-                    type="submit"
-                    disabled={isLoading}
-                    className={`w-full py-3 px-4 bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg ${
-                      isLoading ? "opacity-70 cursor-not-allowed" : ""
-                    }`}
-                  >
-                    {isLoading ? (
-                      <div className="flex items-center justify-center">
-                        <svg
-                          className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-                          xmlns="http://www.w3.org/2000/svg"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            className="opacity-25"
-                            cx="12"
-                            cy="12"
-                            r="10"
-                            stroke="currentColor"
-                            strokeWidth="4"
-                          ></circle>
-                          <path
-                            className="opacity-75"
-                            fill="currentColor"
-                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                          ></path>
-                        </svg>
-                        Creating account...
-                      </div>
-                    ) : step === 1 ? (
-                      "Continue"
-                    ) : (
-                      "Create Account"
-                    )}
-                  </button>
+                <div className="space-y-2">
+                  <label htmlFor="email" className="text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
+                  <input id="email" name="email" type="email" value={formData.email} onChange={handleChange} required className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-200" placeholder="you@example.com" />
                 </div>
-
-                {step === 1 && (
-                  <p className="text-xs text-center text-gray-500 dark:text-gray-400 mt-4">
-                    By creating an account, you agree to our{" "}
-                    <Link
-                      to="/terms"
-                      className="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300"
-                    >
-                      Terms of Service
-                    </Link>{" "}
-                    and{" "}
-                    <Link
-                      to="/privacy"
-                      className="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300"
-                    >
-                      Privacy Policy
-                    </Link>
-                    .
-                  </p>
-                )}
+                <div className="space-y-2">
+                  <label htmlFor="password" className="text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
+                  <input id="password" name="password" type={showPassword ? "text" : "password"} value={formData.password} onChange={handleChange} required className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-200" placeholder="Password" />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="confirmPassword" className="text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
+                  <input id="confirmPassword" name="confirmPassword" type={showPassword ? "text" : "password"} value={formData.confirmPassword} onChange={handleChange} required className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-200" placeholder="Confirm Password" />
+                </div>
+                <button type="submit" className="w-full py-3 px-4 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition-colors duration-200" disabled={isLoading}>{isLoading ? "Signing up..." : "Sign Up"}</button>
               </form>
 
               {step === 1 && (
diff --git a/Frontend/src/utils/demoInsert.ts b/Frontend/src/utils/demoInsert.ts
new file mode 100644
index 0000000..3e309e9
--- /dev/null
+++ b/Frontend/src/utils/demoInsert.ts
@@ -0,0 +1,40 @@
+import { supabase } from './supabase';
+
+export async function demoInsert() {
+  // Insert user
+  const { data: user, error: userError } = await supabase
+    .from('users')
+    .insert({
+      id: 'demo-user-123',
+      username: 'demouser',
+      email: 'demo@example.com',
+      role: 'creator',
+      age: '25',
+      gender: 'Male',
+      country: 'India',
+      category: 'Tech',
+    });
+  console.log('User:', user, userError);
+
+  // Insert social profile
+  const { data: profile, error: profileError } = await supabase
+    .from('social_profiles')
+    .insert({
+      user_id: 'demo-user-123',
+      platform: 'YouTube',
+      username: 'demoyt',
+      followers: 1000,
+      posts: 10,
+      channel_id: 'UC1234567890abcdef',
+      channel_name: 'Demo Channel',
+      subscriber_count: 1000,
+      total_views: 50000,
+      video_count: 10,
+      per_post_cost: 100,
+      per_video_cost: 200,
+      per_post_cost_currency: 'USD',
+      per_video_cost_currency: 'USD',
+      channel_url: 'https://youtube.com/channel/UC1234567890abcdef',
+    });
+  console.log('Profile:', profile, profileError);
+} 
\ No newline at end of file
diff --git a/Frontend/src/utils/supabase.tsx b/Frontend/src/utils/supabase.tsx
index b5df15b..b97998d 100644
--- a/Frontend/src/utils/supabase.tsx
+++ b/Frontend/src/utils/supabase.tsx
@@ -3,5 +3,10 @@ import { createClient } from "@supabase/supabase-js";
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
 const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
 
+if (!supabaseUrl || !supabaseAnonKey) {
+  console.error("Supabase environment variables are not configured. Please set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY in your .env file.");
+  throw new Error("Missing Supabase environment variables");
+}
+
 export const supabase = createClient(supabaseUrl, supabaseAnonKey);
 export * from "@supabase/supabase-js";
diff --git a/Frontend/vite.config.ts b/Frontend/vite.config.ts
index 41e04e1..4eba012 100644
--- a/Frontend/vite.config.ts
+++ b/Frontend/vite.config.ts
@@ -11,4 +11,9 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  server: {
+    proxy: {
+      '/api': 'http://localhost:8000',
+    },
+  },
 });
diff --git a/README.md b/README.md
index c91bc6e..07d283d 100644
--- a/README.md
+++ b/README.md
@@ -100,9 +100,11 @@ cd frontend
 npm install
 ```
 
+
 3. Create a `.env` file using `.env-example` file:
 
 
+
 4. Get your Supabase credentials:
    - Go to [Supabase](https://supabase.com/)
    - Log in and create a new project (or use existing)
@@ -122,6 +124,7 @@ cd ../backend
 pip install -r requirements.txt
 ```
 
+
 3. Navigate to the app directory:
 ```sh
 cd app
@@ -130,6 +133,7 @@ cd app
 4. Create a `.env` file using `.env-example` as a reference.
 
 5. Obtain Supabase credentials:
+
    - Go to [Supabase](https://supabase.com/)
    - Log in and create a new project
    - Click on the project and remember the project password
@@ -156,12 +160,14 @@ cd app
       dbname=postgres
      ```
 
+
 6. Get the Groq API key:
    - Visit [Groq Console](https://console.groq.com/)
    - Create an API key and paste it into the `.env` file
 
 #### 4. Start Development Servers
 
+
 1. Start the frontend server (from the frontend directory):
 ```sh
 npm run dev
@@ -260,4 +266,6 @@ graph TD;
 
 For queries, issues, or feature requests, please raise an issue or reach out on our Discord server.
 
+
 Happy Coding!
+