diff --git a/.gitignore b/.gitignore
index 1262b41..d96590f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,11 @@ dist-ssr
 *.sln
 *.sw?
 
+# Env files
+.env
+Backend/.env
+Frontend/.env
+
 # Python
 __pycache__/
 *.py[cod]
diff --git a/Backend/app/main.py b/Backend/app/main.py
index 86d892a..28c5e69 100644
--- a/Backend/app/main.py
+++ b/Backend/app/main.py
@@ -12,6 +12,7 @@
 from dotenv import load_dotenv
 from contextlib import asynccontextmanager
 from app.routes import ai
+from supabase import create_client, AsyncClient
 
 # Load environment variables
 load_dotenv()
@@ -32,9 +33,28 @@ async def create_tables():
 @asynccontextmanager
 async def lifespan(app: FastAPI):
     print("App is starting...")
+    # Initialize Supabase async client (non-fatal if missing envs)
+    supabase_url = os.getenv("SUPABASE_URL")
+    supabase_key = os.getenv("SUPABASE_KEY")
+    if supabase_url and supabase_key:
+        try:
+            app.state.supabase = create_client(supabase_url, supabase_key, supabase_cls=AsyncClient)
+        except Exception as exc:  # broad to avoid startup crash; logs include stack
+            app.state.supabase = None
+            logging.exception("Failed to initialize Supabase AsyncClient: %s", exc)
+    else:
+        app.state.supabase = None
+        logging.warning("Supabase configuration missing; related endpoints will return 500 until configured.")
+
     await create_tables()
     await seed_db()
     yield
+    # Close Supabase async client if initialized
+    supabase_client = getattr(app.state, "supabase", None)
+    if supabase_client:
+        close = getattr(supabase_client, "aclose", None)
+        if close:
+            await close()
     print("App is shutting down...")
 
 
diff --git a/Backend/app/routes/ai.py b/Backend/app/routes/ai.py
index a21a482..7ac0fdb 100644
--- a/Backend/app/routes/ai.py
+++ b/Backend/app/routes/ai.py
@@ -1,32 +1,36 @@
 # FastAPI router for AI-powered endpoints, including trending niches
-from fastapi import APIRouter, HTTPException, Query
+from fastapi import APIRouter, HTTPException, Query, Request
 from datetime import date
+import asyncio
 import os
 import requests
 import json
-from supabase import create_client, Client
+from supabase import AsyncClient
 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")
+def get_supabase_client(request: Request) -> AsyncClient:
+    supabase = getattr(request.app.state, "supabase", None)
+    if supabase is None:
+        raise HTTPException(status_code=500, detail="Supabase configuration missing on server.")
+    return supabase
 
-supabase: Client = create_client(SUPABASE_URL, SUPABASE_KEY)
+
+def get_gemini_api_key() -> str:
+    api_key = os.getenv("GEMINI_API_KEY")
+    if not api_key:
+        raise HTTPException(status_code=500, detail="Gemini API key not configured on server.")
+    return api_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}"
+    gemini_api_key = get_gemini_api_key()
+    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,
@@ -53,7 +57,7 @@ def fetch_from_gemini():
     return json.loads(text)
 
 @router.get("/api/trending-niches")
-def trending_niches():
+async def trending_niches(request: Request):
     """
     API endpoint to get trending niches for the current day.
     - If today's data exists in Supabase, return it.
@@ -61,24 +65,25 @@ def trending_niches():
     - If Gemini fails, fallback to the most recent data available.
     """
     today = str(date.today())
+    supabase = get_supabase_client(request)
     # Check if today's data exists in Supabase
-    result = supabase.table("trending_niches").select("*").eq("fetched_at", today).execute()
+    result = await supabase.table("trending_niches").select("*").eq("fetched_at", today).execute()
     if not result.data:
         # Fetch from Gemini and store
         try:
-            niches = fetch_from_gemini()
+            niches = await asyncio.to_thread(fetch_from_gemini)
             for niche in niches:
-                supabase.table("trending_niches").insert({
+                await 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()
+            result = await 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()
+            result = await supabase.table("trending_niches").select("*").order("fetched_at", desc=True).limit(6).execute()
     return result.data
 
 youtube_router = APIRouter(prefix="/youtube", tags=["YouTube"])
diff --git a/Backend/test_ai_fix.py b/Backend/test_ai_fix.py
new file mode 100644
index 0000000..df0dcc4
--- /dev/null
+++ b/Backend/test_ai_fix.py
@@ -0,0 +1,82 @@
+#!/usr/bin/env python
+"""
+Test to verify the ai.py fix: import-time env validation is removed.
+This demonstrates the fix works without needing Supabase/Gemini keys at import.
+"""
+import os
+import sys
+
+# Clear all env vars that were previously required at import
+os.environ.pop('SUPABASE_URL', None)
+os.environ.pop('SUPABASE_KEY', None)
+os.environ.pop('GEMINI_API_KEY', None)
+
+print("=" * 70)
+print("TEST: Import ai.py with missing env vars (should NOT crash)")
+print("=" * 70)
+
+try:
+    # This import would fail BEFORE the fix with:
+    # ValueError: Missing required environment variables: SUPABASE_URL, SUPABASE_KEY, GEMINI_API_KEY
+    from app.routes import ai
+    print("✓ SUCCESS: ai.py imported without crashing!")
+    print("  - No ValueError on missing SUPABASE_URL/SUPABASE_KEY/GEMINI_API_KEY")
+    print("  - Router and helper functions are available")
+    print("\nHelper functions available:")
+    print(f"  - get_supabase_client: {hasattr(ai, 'get_supabase_client')}")
+    print(f"  - get_gemini_api_key: {hasattr(ai, 'get_gemini_api_key')}")
+    print(f"  - fetch_from_gemini: {hasattr(ai, 'fetch_from_gemini')}")
+    print(f"  - trending_niches: {hasattr(ai, 'trending_niches')}")
+    
+    print("\n" + "=" * 70)
+    print("TEST: Verify per-request env validation")
+    print("=" * 70)
+    
+    # Test 1: Try to get Supabase client without env vars
+    print("\nTest 1: get_supabase_client() without SUPABASE_URL/KEY...")
+    try:
+        client = ai.get_supabase_client()
+        print("  ✗ FAIL: Should have raised HTTPException")
+    except Exception as e:
+        if "Supabase configuration missing" in str(e):
+            print(f"  ✓ PASS: Raised HTTPException with message: {e}")
+        else:
+            print(f"  ✗ FAIL: Wrong exception: {type(e).__name__}: {e}")
+    
+    # Test 2: Try to get Gemini key without env var
+    print("\nTest 2: get_gemini_api_key() without GEMINI_API_KEY...")
+    try:
+        key = ai.get_gemini_api_key()
+        print("  ✗ FAIL: Should have raised HTTPException")
+    except Exception as e:
+        if "Gemini API key not configured" in str(e):
+            print(f"  ✓ PASS: Raised HTTPException with message: {e}")
+        else:
+            print(f"  ✗ FAIL: Wrong exception: {type(e).__name__}: {e}")
+    
+    # Test 3: Set env vars and verify client creation would proceed
+    print("\nTest 3: Setting env vars and retrying get_supabase_client()...")
+    os.environ['SUPABASE_URL'] = 'https://test.supabase.co'
+    os.environ['SUPABASE_KEY'] = 'test_key_123'
+    try:
+        # Note: This will fail when trying to actually connect, but the env check passes
+        client = ai.get_supabase_client()
+        print("  - Got to client creation (would connect to real Supabase now)")
+    except Exception as e:
+        if "Supabase configuration missing" not in str(e):
+            print(f"  ✓ PASS: Passed env check, failed on actual connection: {type(e).__name__}")
+        else:
+            print(f"  ✗ FAIL: Still failing on env check: {e}")
+    
+    print("\n" + "=" * 70)
+    print("SUMMARY")
+    print("=" * 70)
+    print("✓ Fix verified: ai.py no longer crashes at import time")
+    print("✓ Env validation moved to per-request helpers")
+    print("✓ Returns clear 500 errors when config is missing")
+    print("✓ API can start and serve other routes while missing keys")
+    
+except ImportError as e:
+    print(f"✗ FAIL: Could not import app.routes.ai: {e}")
+    print("  Make sure fastapi and supabase packages are installed")
+    sys.exit(1)
diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index deae757..ee14c54 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -831,9 +831,9 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.19.2",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.2.tgz",
-      "integrity": "sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==",
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
+      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -846,9 +846,9 @@
       }
     },
     "node_modules/@eslint/config-helpers": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.0.tgz",
-      "integrity": "sha512-yJLLmLexii32mGrhW29qvU3QBVTu0GUmEf/J4XsBtVhp4JkIUFN/BjWqTF63yRvGApIDpZm5fa97LtYtINmfeQ==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.0.tgz",
+      "integrity": "sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -856,9 +856,9 @@
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.12.0.tgz",
-      "integrity": "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==",
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz",
+      "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -906,13 +906,16 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.23.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.23.0.tgz",
-      "integrity": "sha512-35MJ8vCPU0ZMxo7zfev2pypqTwWTofFZO6m4KAtdoFhRpLJUpHTZZ+KB3C7Hb1d7bULYwO4lJXGCi5Se+8OMbw==",
+      "version": "9.32.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.32.0.tgz",
+      "integrity": "sha512-BBpRFZK3eX6uMLKz8WxFOBIFFcGFJ/g8XuwjTHCqHROSIsopI+ddn/d5Cfh36+7+e5edVS8dbSHnBNhrLEX0zg==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
       }
     },
     "node_modules/@eslint/object-schema": {
@@ -926,13 +929,13 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.7.tgz",
-      "integrity": "sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.4.tgz",
+      "integrity": "sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.12.0",
+        "@eslint/core": "^0.15.1",
         "levn": "^0.4.1"
       },
       "engines": {
@@ -2974,12 +2977,6 @@
         "@babel/types": "^7.20.7"
       }
     },
-    "node_modules/@types/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
-      "license": "MIT"
-    },
     "node_modules/@types/d3-array": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
@@ -3246,9 +3243,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3347,9 +3344,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.14.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
-      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -3446,9 +3443,9 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4012,20 +4009,20 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.23.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.23.0.tgz",
-      "integrity": "sha512-jV7AbNoFPAY1EkFYpLq5bslU9NLNO8xnEeQXwErNibVryjk67wHVmddTBilc5srIttJDBrB0eMHKZBFbSIABCw==",
+      "version": "9.32.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.32.0.tgz",
+      "integrity": "sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.19.2",
-        "@eslint/config-helpers": "^0.2.0",
-        "@eslint/core": "^0.12.0",
+        "@eslint/config-array": "^0.21.0",
+        "@eslint/config-helpers": "^0.3.0",
+        "@eslint/core": "^0.15.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.23.0",
-        "@eslint/plugin-kit": "^0.2.7",
+        "@eslint/js": "9.32.0",
+        "@eslint/plugin-kit": "^0.3.4",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
@@ -4036,9 +4033,9 @@
         "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.3.0",
-        "eslint-visitor-keys": "^4.2.0",
-        "espree": "^10.3.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
         "esquery": "^1.5.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -4096,9 +4093,9 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
-      "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -4113,9 +4110,9 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -4126,15 +4123,15 @@
       }
     },
     "node_modules/espree": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
-      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "acorn": "^8.14.0",
+        "acorn": "^8.15.0",
         "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.2.0"
+        "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4265,6 +4262,21 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fdir": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -4350,14 +4362,15 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
-      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
         "mime-types": "^2.1.12"
       },
       "engines": {
@@ -5503,15 +5516,13 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.0.tgz",
-      "integrity": "sha512-Y2g5ObjkvX3VFeVt+0CIPuYd9PpgqCslG7ASSIdN73LwA1nNWzcMLaoMRJfP3prZFI92svxFwbn7XkLJ+UPQ6A==",
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.7.1.tgz",
+      "integrity": "sha512-jVKHXoWRIsD/qS6lvGveckwb862EekvapdHJN/cGmzw40KnJH5gg53ujOJ4qX6EKIK9LSBfFed/xiQ5yeXNrUA==",
       "license": "MIT",
       "dependencies": {
-        "@types/cookie": "^0.6.0",
         "cookie": "^1.0.1",
-        "set-cookie-parser": "^2.6.0",
-        "turbo-stream": "2.4.0"
+        "set-cookie-parser": "^2.6.0"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -5527,12 +5538,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.0.tgz",
-      "integrity": "sha512-VlksBPf3n2bijPvnA7nkTsXxMAKOj+bWp4R9c3i+bnwlSOFAGOkJkKhzy/OsRkWaBMICqcAl1JDzh9ZSOze9CA==",
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.7.1.tgz",
+      "integrity": "sha512-bavdk2BA5r3MYalGKZ01u8PGuDBloQmzpBZVhDLrOOv1N943Wq6dcM9GhB3x8b7AbqPMEezauv4PeGkAJfy7FQ==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.4.0"
+        "react-router": "7.7.1"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -5858,6 +5869,36 @@
       "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
       "license": "MIT"
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5896,12 +5937,6 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
-    "node_modules/turbo-stream": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
-      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
-      "license": "ISC"
-    },
     "node_modules/tw-animate-css": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.2.4.tgz",
@@ -6083,15 +6118,18 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.3.tgz",
-      "integrity": "sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg==",
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
         "postcss": "^8.5.3",
-        "rollup": "^4.30.1"
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -6154,6 +6192,19 @@
         }
       }
     },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
diff --git a/Frontend/src/App.tsx b/Frontend/src/App.tsx
index 60f7ecd..9c554eb 100644
--- a/Frontend/src/App.tsx
+++ b/Frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { useState, useEffect } from "react";
+import { ThemeProvider } from "./components/theme-provider"; // Make sure path is correct
 import HomePage from "../src/pages/HomePage";
 import DashboardPage from "../src/pages/DashboardPage";
 import SponsorshipsPage from "../src/pages/Sponsorships";
@@ -44,99 +45,101 @@ function App() {
 
   return (
     <Router>
-      <AuthProvider>
-        <Routes>
-          {/* Public Routes */}
-          <Route path="/" element={<HomePage />} />
-          <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={
-            <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
-            path="/dashboard"
-            element={
-              <ProtectedRoute>
-                <DashboardPage />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path="/dashboard/sponsorships"
-            element={
-              <ProtectedRoute>
-                <SponsorshipsPage />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path="/dashboard/collaborations"
-            element={
-              <ProtectedRoute>
-                <CollaborationsPage />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path="/dashboard/collaborations/:id"
-            element={
-              <ProtectedRoute>
-                <CollaborationDetails />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path="/dashboard/messages"
-            element={
+      <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+        <AuthProvider>
+          <Routes>
+            {/* Public Routes */}
+            <Route path="/" element={<HomePage />} />
+            <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={
               <ProtectedRoute>
-                <MessagesPage />
+                <Dashboard />
               </ProtectedRoute>
-            }
-          />
-          <Route
-            path="/dashboard/contracts"
-            element={
+            } />
+            <Route path="/basicDetails/:user" element={<BasicDetails />} />
+            <Route path="/creator/messages" element={<MessagesPage />} />
+            <Route path="/onboarding" element={
               <ProtectedRoute>
-                <Contracts />
+                <Onboarding />
               </ProtectedRoute>
-            }
-          />
-          <Route
-            path="/dashboard/analytics"
-            element={
-              <ProtectedRoute>
-                <Analytics />
-              </ProtectedRoute>
-            }
-          />
-        </Routes>
-      </AuthProvider>
+            } />
+
+            {/* Protected Routes*/}
+            <Route
+              path="/dashboard"
+              element={
+                <ProtectedRoute>
+                  <DashboardPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/dashboard/sponsorships"
+              element={
+                <ProtectedRoute>
+                  <SponsorshipsPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/dashboard/collaborations"
+              element={
+                <ProtectedRoute>
+                  <CollaborationsPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/dashboard/collaborations/:id"
+              element={
+                <ProtectedRoute>
+                  <CollaborationDetails />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/dashboard/messages"
+              element={
+                <ProtectedRoute>
+                  <MessagesPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/dashboard/contracts"
+              element={
+                <ProtectedRoute>
+                  <Contracts />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/dashboard/analytics"
+              element={
+                <ProtectedRoute>
+                  <Analytics />
+                </ProtectedRoute>
+              }
+            />
+          </Routes>
+        </AuthProvider>
+      </ThemeProvider>
     </Router>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/Frontend/src/components/mode-toggle.tsx b/Frontend/src/components/mode-toggle.tsx
index ff4a8c4..80f6a02 100644
--- a/Frontend/src/components/mode-toggle.tsx
+++ b/Frontend/src/components/mode-toggle.tsx
@@ -14,7 +14,7 @@ export function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm">
+        <Button variant="outline" size="sm" className="relative">
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
@@ -33,4 +33,4 @@ export function ModeToggle() {
       </DropdownMenuContent>
     </DropdownMenu>
   );
-}
+}
\ No newline at end of file
diff --git a/Frontend/src/pages/HomePage.tsx b/Frontend/src/pages/HomePage.tsx
index 011641d..7ef8ee0 100644
--- a/Frontend/src/pages/HomePage.tsx
+++ b/Frontend/src/pages/HomePage.tsx
@@ -8,19 +8,13 @@ import {
   MessageSquare,
   Rocket,
   Users,
-  Plus,
   TrendingUp,
-  Calendar,
   Star,
-  Target,
   Zap,
   BookOpen,
   Award,
-  TrendingDown,
   Eye,
   Heart,
-  Share2,
-  Play,
   UserPlus,
   Sparkles,
 } from "lucide-react";
@@ -29,79 +23,12 @@ import { MainNav } from "../components/main-nav";
 import { ModeToggle } from "../components/mode-toggle";
 import { UserNav } from "../components/user-nav";
 import { useAuth } from "../context/AuthContext";
-import { supabase } from "../utils/supabase";
+// import { supabase } from "../utils/supabase";
+import { useTheme } from "../components/theme-provider";
 
-const features = [
-  {
-    icon: Handshake,
-    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: "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: "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 features = [ ... ]; // Unused
 
-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 dashboardFeatures = [ ... ]; // Unused
 
 const successStories = [
   {
@@ -136,87 +63,9 @@ const successStories = [
   },
 ];
 
-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 trendingNiches = [ ... ]; // Unused
 
-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 creatorResources = [ ... ]; // Unused
 
 const brandShowcase = [
   {
@@ -261,14 +110,12 @@ const brandShowcase = [
   },
 ];
 
-// TrendingNichesSection: Fetches and displays trending niches from the backend
 function TrendingNichesSection() {
-  // State for trending niches, loading, and error
+  const { theme } = useTheme();
   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 => {
@@ -288,34 +135,43 @@ function TrendingNichesSection() {
   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"
+          className={`relative group pt-8 rounded-2xl border shadow-2xl w-full max-w-xs transition-transform duration-300 hover:scale-105 hover:shadow-2xl overflow-hidden ${
+            theme === 'dark' 
+              ? 'bg-gray-800/80 border-gray-700' 
+              : 'bg-white/20 backdrop-blur-xl border-white/30'
+          }`}
         >
-          {/* 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 inset-0 rounded-2xl pointer-events-none ${
+            theme === 'dark' 
+              ? 'bg-gradient-to-br from-gray-700/40 via-gray-800/10 to-blue-900/10' 
+              : 'bg-gradient-to-br from-white/40 via-white/10 to-blue-100/10'
+          }`} />
           <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">
+          <h3 className={`text-xl font-bold mb-2 mt-6 text-center relative z-10 ${
+            theme === 'dark' ? 'text-white' : 'text-gray-900'
+          }`}>{niche.name}</h3>
+          <blockquote className={`italic mb-4 text-center border-l-4 border-purple-300 pl-3 relative z-10 ${
+            theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+          }`}>
             “{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>
+            <span className={`text-xs mb-1 ${
+              theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+            }`}>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={`w-24 h-3 rounded-full overflow-hidden ${
+                theme === 'dark' ? 'bg-gray-700' : 'bg-gray-200'
+              }`}>
                 <div
                   className={`h-3 rounded-full transition-all duration-300 ${
                     niche.global_activity >= 4
@@ -325,7 +181,9 @@ function TrendingNichesSection() {
                   style={{ width: `${(niche.global_activity / 5) * 100}%` }}
                 />
               </div>
-              <span className="ml-2 font-semibold text-purple-700">{niche.global_activity}/5</span>
+              <span className={`ml-2 font-semibold ${
+                theme === 'dark' ? 'text-purple-400' : 'text-purple-700'
+              }`}>{niche.global_activity}/5</span>
             </div>
           </div>
         </div>
@@ -335,34 +193,52 @@ function TrendingNichesSection() {
 }
 
 function WhyChooseSection() {
+  const { theme } = useTheme();
+
   return (
-    <section className="w-full py-20 bg-gradient-to-b from-white via-blue-50 to-purple-50">
+    <section className={`w-full py-20 ${
+      theme === 'dark' ? 'bg-gray-900' : '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">
+        <h2 className={`text-3xl md:text-4xl font-bold text-center mb-4 ${
+          theme === 'dark' ? 'text-white' : 'text-gray-900'
+        }`}>Why Choose Inpact AI?</h2>
+        <p className={`text-lg text-center mb-12 max-w-2xl mx-auto ${
+          theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
+        }`}>
           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={`rounded-2xl shadow-lg p-8 flex flex-col items-center border ${
+            theme === 'dark' ? 'bg-gray-800 border-gray-700' : 'bg-white 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>
+              <span className={`text-xl font-semibold ${
+                theme === 'dark' ? 'text-purple-400' : 'text-purple-700'
+              }`}>For Brands</span>
             </div>
-            <ul className="space-y-4 text-gray-700 w-full">
+            <ul className={`space-y-4 w-full ${
+              theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+            }`}>
               <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={`rounded-2xl shadow-lg p-8 flex flex-col items-center border ${
+            theme === 'dark' ? 'bg-gray-800 border-gray-700' : 'bg-white 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>
+              <span className={`text-xl font-semibold ${
+                theme === 'dark' ? 'text-blue-400' : 'text-blue-700'
+              }`}>For Creators</span>
             </div>
-            <ul className="space-y-4 text-gray-700 w-full">
+            <ul className={`space-y-4 w-full ${
+              theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+            }`}>
               <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>
@@ -377,26 +253,21 @@ function WhyChooseSection() {
 
 export default function HomePage() {
   const { isAuthenticated, user } = useAuth();
+  const { theme } = useTheme();
   
-  // Refs for scroll detection
-  const featuresRef = useRef(null);
+  // Removed unused refs: featuresRef, resourcesRef
   const successStoriesRef = useRef(null);
   const trendingRef = useRef(null);
-  const resourcesRef = useRef(null);
   const footerRef = useRef(null);
 
-  // State to track visibility (for one-time animation)
-  const [isFeaturesVisible, setIsFeaturesVisible] = useState(false);
-  const [isSuccessStoriesVisible, setIsSuccessStoriesVisible] = useState(false);
+  // Removed unused state: isFeaturesVisible, setIsFeaturesVisible, isResourcesVisible, setIsResourcesVisible
+  // Removed unused state: isSuccessStoriesVisible, setIsSuccessStoriesVisible
   const [isTrendingVisible, setIsTrendingVisible] = useState(false);
-  const [isResourcesVisible, setIsResourcesVisible] = useState(false);
   const [isFooterVisible, setIsFooterVisible] = useState(false);
 
-  // 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 trendingObserver = new IntersectionObserver(
       (entries) => {
@@ -412,21 +283,21 @@ export default function HomePage() {
       (entries) => {
         const [entry] = entries;
         if (entry.isIntersecting && !hasAnimatedBrands) {
-          setIsSuccessStoriesVisible(true);
           setHasAnimatedBrands(true);
         }
       },
       { root: null, rootMargin: "0px", threshold: 0.1 }
     );
-    if (trendingRef.current) trendingObserver.observe(trendingRef.current);
-    if (successStoriesRef.current) brandsObserver.observe(successStoriesRef.current);
+    const trendingNode = trendingRef.current;
+    const brandsNode = successStoriesRef.current;
+    if (trendingNode) trendingObserver.observe(trendingNode);
+    if (brandsNode) brandsObserver.observe(brandsNode);
     return () => {
-      if (trendingRef.current) trendingObserver.unobserve(trendingRef.current);
-      if (successStoriesRef.current) brandsObserver.unobserve(successStoriesRef.current);
+      if (trendingNode) trendingObserver.unobserve(trendingNode);
+      if (brandsNode) brandsObserver.unobserve(brandsNode);
     };
   }, [hasAnimatedTrending, hasAnimatedBrands]);
 
-  // ... keep other observers for footer, etc. if needed ...
   useEffect(() => {
     const footerObserver = new IntersectionObserver(
       (entries) => {
@@ -435,26 +306,38 @@ export default function HomePage() {
       },
       { root: null, rootMargin: "0px", threshold: 0.1 }
     );
-    if (footerRef.current) footerObserver.observe(footerRef.current);
+    const footerNode = footerRef.current;
+    if (footerNode) footerObserver.observe(footerNode);
     return () => {
-      if (footerRef.current) footerObserver.unobserve(footerRef.current);
+      if (footerNode) footerObserver.unobserve(footerNode);
     };
   }, []);
 
-  // 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={`flex min-h-screen flex-col ${
+        theme === 'dark' ? 'bg-gray-900 text-gray-100' : 'bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 text-gray-900'
+      }`}>
+        {/* Enhanced Header with Improved Logo */}
+        <header className={`fixed top-0 z-50 w-full border-b ${
+          theme === 'dark' ? 'border-gray-700 bg-gray-800/80' : '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">
+              <Link to="/" className="flex items-center space-x-2 group">
                 <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>
+                  <Rocket className={`h-6 w-6 ${
+                    theme === 'dark' ? 'text-purple-400 group-hover:text-purple-300' : 'text-purple-600 group-hover:text-purple-500'
+                  } transition-colors`} />
+                  <div className={`absolute -inset-1 rounded-full ${
+                    theme === 'dark' ? 'bg-purple-500/30' : 'bg-purple-600/30'
+                  } blur-sm group-hover:opacity-80 transition-opacity`}></div>
                 </div>
-                <span className="font-bold text-xl text-gray-900">Inpact</span>
+                <span className={`font-bold text-xl ${
+                  theme === 'dark' ? 'text-white' : 'text-gray-900'
+                } group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors`}>
+                  Inpact
+                </span>
               </Link>
               <MainNav />
             </div>
@@ -465,32 +348,40 @@ export default function HomePage() {
           </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={`absolute inset-0 ${
+              theme === 'dark' ? 'bg-gray-900' : '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 rounded-full blur-3xl animate-pulse ${
+              theme === 'dark' ? 'bg-purple-900/30' : 'bg-purple-300/30'
+            }`}></div>
+            <div className={`absolute bottom-20 right-10 w-96 h-96 rounded-full blur-3xl animate-pulse ${
+              theme === 'dark' ? 'bg-blue-900/30' : 'bg-blue-300/30'
+            }`}></div>
+            <div className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full blur-3xl ${
+              theme === 'dark' ? 'bg-gradient-to-r from-purple-900/10 to-blue-900/10' : 'bg-gradient-to-r from-purple-400/10 to-blue-400/10'
+            }`}></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">
+                    <div className={`absolute -inset-8 rounded-3xl blur-2xl animate-pulse ${
+                      theme === 'dark' ? 'bg-gradient-to-r from-purple-900/20 via-blue-900/20 to-indigo-900/20' : 'bg-gradient-to-r from-purple-600/20 via-blue-600/20 to-indigo-600/20'
+                    }`}></div>
+                    <div className={`absolute -inset-4 rounded-2xl blur-xl ${
+                      theme === 'dark' ? 'bg-gradient-to-r from-purple-800/30 to-blue-800/30' : 'bg-gradient-to-r from-purple-400/30 to-blue-400/30'
+                    }`}></div>
+                    <div className={`relative rounded-2xl p-4 border shadow-2xl ${
+                      theme === 'dark' ? 'bg-gray-800/80 border-gray-700 backdrop-blur-sm' : 'bg-white/20 border-white/30 backdrop-blur-sm'
+                    }`}>
                       <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>
@@ -502,22 +393,27 @@ export default function HomePage() {
                     </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={`inline-flex items-center gap-2 px-4 py-2 rounded-full border mb-6 ${
+                    theme === 'dark' ? 'bg-gray-800/80 border-gray-700 backdrop-blur-sm' : 'bg-white/20 border-white/30 backdrop-blur-sm'
+                  }`}>
                     <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>
+                    <span className={`text-sm font-medium ${
+                      theme === 'dark' ? 'text-gray-300' : '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">
+                    <h1 className={`text-5xl lg:text-7xl font-bold tracking-tight leading-tight w-full text-center lg:text-left ${
+                      theme === 'dark' ? 'text-white' : 'text-gray-900'
+                    }`}>
                       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">
+                    <p className={`text-xl lg:text-2xl max-w-2xl mx-auto lg:mx-0 leading-relaxed w-full text-center lg:text-left ${
+                      theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+                    }`}>
                       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"
@@ -528,28 +424,35 @@ export default function HomePage() {
                       </Link>
                     </Button>
                     <Button
-                      variant="outline"
+                      variant={theme === 'dark' ? 'secondary' : '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"
+                      className={`${
+                        theme === 'dark' ? 'bg-gray-700 hover:bg-gray-600' : 'border-white/30 bg-white/10 hover:bg-white/20'
+                      } backdrop-blur-sm 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>
+                      <span className={`font-semibold ${
+                        theme === 'dark' ? 'text-gray-300' : '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>
+                      <span className={`font-semibold ${
+                        theme === 'dark' ? 'text-gray-300' : '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>
+                      <span className={`font-semibold ${
+                        theme === 'dark' ? 'text-gray-300' : 'text-gray-800'
+                      }`}>Collaborate & grow</span>
                     </div>
                   </div>
                 </div>
@@ -557,12 +460,14 @@ export default function HomePage() {
             </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>
+          <section ref={trendingRef} className={`w-full py-24 relative ${
+            theme === 'dark' ? 'bg-gray-900' : 'bg-gradient-to-b from-blue-50 via-white to-purple-50'
+          }`}>
+            <div className={`absolute inset-0 ${
+              theme === 'dark' ? 'bg-gray-900' : '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
@@ -570,31 +475,46 @@ export default function HomePage() {
                   : "opacity-0 translate-y-20"
               }`}
             >
-              <h2 className="text-3xl font-bold sm:text-4xl text-gray-900 mb-4">
+              <h2 className={`text-3xl font-bold sm:text-4xl mb-4 ${
+                theme === 'dark' ? 'text-white' : 'text-gray-900'
+              }`}>
                 Trending Niches
               </h2>
-              <p className="mt-4 text-lg text-gray-700 mb-12">
+              <p className={`mt-4 text-lg mb-12 ${
+                theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+              }`}>
                 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>
+          <section ref={successStoriesRef} className={`w-full py-24 relative ${
+            theme === 'dark' ? 'bg-gray-900' : 'bg-gradient-to-b from-purple-50 via-white to-blue-50'
+          }`}>
+            <div className={`absolute inset-0 ${
+              theme === 'dark' ? 'bg-gray-900/80' : '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">
+              <h2 className={`text-3xl font-bold sm:text-4xl mb-4 text-center ${
+                theme === 'dark' ? 'text-white' : 'text-gray-900'
+              }`}>
                 Brands Seeking Creators
               </h2>
-              <p className="mt-4 text-lg text-gray-700 mb-12 text-center">
+              <p className={`mt-4 text-lg mb-12 text-center ${
+                theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+              }`}>
                 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"
+                    className={`group p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border w-full max-w-xl ${
+                      theme === 'dark' 
+                        ? 'bg-gray-800/80 border-gray-700 hover:bg-gray-800/90' 
+                        : 'bg-white/80 border-white/20 hover:bg-white/90'
+                    } backdrop-blur-sm`}
                   >
                     <div className="flex items-start gap-4 mb-4">
                       <div className="relative">
@@ -606,26 +526,32 @@ export default function HomePage() {
                         <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>
+                        <h3 className={`font-semibold text-lg ${
+                          theme === 'dark' ? 'text-white' : 'text-gray-900'
+                        }`}>{brand.name}</h3>
+                        <p className={`text-sm mb-2 ${
+                          theme === 'dark' ? 'text-gray-400' : 'text-gray-600'
+                        }`}>{brand.industry}</p>
+                        <p className={`text-sm ${
+                          theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+                        }`}>{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>
+                        <p className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Followers</p>
+                        <p className={theme === 'dark' ? 'font-semibold text-gray-200' : 'font-semibold text-gray-900'}>{brand.followers}</p>
                       </div>
                       <div>
-                        <p className="text-gray-600">Budget Range</p>
+                        <p className={theme === 'dark' ? 'text-gray-400' : '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={theme === 'dark' ? 'text-gray-400' : '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={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Looking For</p>
                         <p className="font-semibold text-purple-600">{brand.lookingFor.length} types</p>
                       </div>
                     </div>
@@ -652,7 +578,6 @@ export default function HomePage() {
             </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
@@ -693,26 +618,37 @@ export default function HomePage() {
     );
   }
 
-  // Non-logged-in user homepage (redesigned)
   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={`flex min-h-screen flex-col ${
+      theme === 'dark' ? 'bg-gray-900 text-gray-100' : 'bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 text-gray-900'
+    }`}>
+      {/* Enhanced Header with Improved Logo */}
+      <header className={`fixed top-0 z-50 w-full border-b ${
+        theme === 'dark' ? 'border-gray-700 bg-gray-800/80' : '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">
+            <Link to="/" className="flex items-center space-x-2 group">
               <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>
+                <Rocket className={`h-6 w-6 ${
+                  theme === 'dark' ? 'text-purple-400 group-hover:text-purple-300' : 'text-purple-600 group-hover:text-purple-500'
+                } transition-colors`} />
+                <div className={`absolute -inset-1 rounded-full ${
+                  theme === 'dark' ? 'bg-purple-500/30' : 'bg-purple-600/30'
+                } blur-sm group-hover:opacity-80 transition-opacity`}></div>
               </div>
-              <span className="font-bold text-xl text-gray-900">Inpact</span>
+              <span className={`font-bold text-xl ${
+                theme === 'dark' ? 'text-white' : 'text-gray-900'
+              } group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors`}>
+                Inpact
+              </span>
             </Link>
             <MainNav />
           </div>
           <div className="flex items-center gap-4">
             <ModeToggle />
             <div className="hidden md:flex gap-2">
-              <Button variant="ghost" className="text-gray-900 hover:bg-white/20">
+              <Button variant={theme === 'dark' ? 'ghost' : 'outline'} className={theme === 'dark' ? 'text-white hover:bg-gray-700' : 'text-gray-900 hover:bg-white/20'}>
                 <Link to="/login">Login</Link>
               </Button>
               <Button className="bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700">
@@ -724,36 +660,50 @@ export default function HomePage() {
         </div>
       </header>
 
-      {/* Hero Section - Completely Redesigned */}
       <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={`absolute inset-0 ${
+            theme === 'dark' ? 'bg-gray-900' : '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 rounded-full blur-3xl animate-pulse ${
+            theme === 'dark' ? 'bg-purple-900/30' : 'bg-purple-300/30'
+          }`}></div>
+          <div className={`absolute bottom-20 right-10 w-96 h-96 rounded-full blur-3xl animate-pulse ${
+            theme === 'dark' ? 'bg-blue-900/30' : 'bg-blue-300/30'
+          }`}></div>
+          <div className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full blur-3xl ${
+            theme === 'dark' ? 'bg-gradient-to-r from-purple-900/10 to-blue-900/10' : 'bg-gradient-to-r from-purple-400/10 to-blue-400/10'
+          }`}></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={`inline-flex items-center gap-2 px-4 py-2 rounded-full border mb-6 ${
+                  theme === 'dark' ? 'bg-gray-800/80 border-gray-700' : 'bg-white/20 border-white/30'
+                } backdrop-blur-sm`}>
                   <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>
+                  <span className={`text-sm font-medium ${
+                    theme === 'dark' ? 'text-gray-300' : '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">
+                    <h1 className={`text-5xl lg:text-7xl font-black tracking-tight leading-tight uppercase ${
+                      theme === 'dark' ? 'text-white' : '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">
+                    <h2 className={`text-3xl lg:text-4xl font-bold mt-4 ${
+                      theme === 'dark' ? 'text-gray-300' : 'text-gray-800'
+                    }`}>
                       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">
+                  <p className={`text-xl lg:text-2xl max-w-2xl mx-auto lg:mx-0 leading-relaxed ${
+                    theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+                  }`}>
                     Connect with brands, collaborate with creators, and optimize your partnerships through data-driven insights.
                   </p>
                 </div>
@@ -768,39 +718,49 @@ export default function HomePage() {
                     </Link>
                   </Button>
                   <Button
-                    variant="outline"
+                    variant={theme === 'dark' ? 'secondary' : '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"
+                    className={`${
+                      theme === 'dark' ? 'bg-gray-700 hover:bg-gray-600' : 'border-white/30 bg-white/10 hover:bg-white/20'
+                    } backdrop-blur-sm 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>
+                    <span className={`font-semibold ${
+                      theme === 'dark' ? 'text-gray-300' : '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>
+                    <span className={`font-semibold ${
+                      theme === 'dark' ? 'text-gray-300' : '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>
+                    <span className={`font-semibold ${
+                      theme === 'dark' ? 'text-gray-300' : '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>
+                  <div className={`absolute -inset-8 rounded-3xl blur-2xl animate-pulse ${
+                    theme === 'dark' ? 'bg-gradient-to-r from-purple-900/20 via-blue-900/20 to-indigo-900/20' : 'bg-gradient-to-r from-purple-600/20 via-blue-600/20 to-indigo-600/20'
+                  }`}></div>
+                  <div className={`absolute -inset-4 rounded-2xl blur-xl ${
+                    theme === 'dark' ? 'bg-gradient-to-r from-purple-800/30 to-blue-800/30' : 'bg-gradient-to-r from-purple-400/30 to-blue-400/30'
+                  }`}></div>
                   
-                  {/* Main Image */}
-                  <div className="relative bg-white/20 backdrop-blur-sm rounded-2xl p-4 border border-white/30 shadow-2xl">
+                  <div className={`relative rounded-2xl p-4 border shadow-2xl ${
+                    theme === 'dark' ? 'bg-gray-800/80 border-gray-700' : 'bg-white/20 border-white/30'
+                  } backdrop-blur-sm`}>
                     <img
                       src="/Home.png"
                       alt="Hero Image"
@@ -808,7 +768,6 @@ export default function HomePage() {
                     />
                   </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>
@@ -824,24 +783,34 @@ export default function HomePage() {
           </div>
         </section>
 
-        {/* Why Choose Inpact AI Section (for logged out users) */}
         <WhyChooseSection />
 
-        {/* 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>
+        <section ref={successStoriesRef} className={`w-full py-24 relative ${
+          theme === 'dark' ? 'bg-gray-900' : 'bg-gradient-to-b from-purple-50 via-white to-blue-50'
+        }`}>
+          <div className={`absolute inset-0 ${
+            theme === 'dark' ? 'bg-gray-900/80' : '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">
+            <h2 className={`text-3xl font-bold sm:text-4xl mb-4 text-center ${
+              theme === 'dark' ? 'text-white' : 'text-gray-900'
+            }`}>
               Success Stories
             </h2>
-            <p className="mt-4 text-lg text-gray-700 mb-12 text-center">
+            <p className={`mt-4 text-lg mb-12 text-center ${
+              theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+            }`}>
               Real creators achieving amazing results with brand partnerships.
             </p>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
               {successStories.map((story, 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"
+                  className={`group p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border ${
+                    theme === 'dark' 
+                      ? 'bg-gray-800/80 border-gray-700 hover:bg-gray-800/90' 
+                      : 'bg-white/80 border-white/20 hover:bg-white/90'
+                  } backdrop-blur-sm`}
                 >
                   <div className="flex items-center gap-4 mb-4">
                     <div className="relative">
@@ -853,15 +822,23 @@ export default function HomePage() {
                       <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>
+                      <h3 className={`font-semibold ${
+                        theme === 'dark' ? 'text-white' : 'text-gray-900'
+                      }`}>{story.creator}</h3>
+                      <p className={`text-sm ${
+                        theme === 'dark' ? 'text-gray-400' : 'text-gray-600'
+                      }`}>{story.niche}</p>
                     </div>
                   </div>
                   <div className="text-left mb-4">
-                    <p className="text-gray-700 mb-3">{story.story}</p>
+                    <p className={`${
+                      theme === 'dark' ? 'text-gray-300' : '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" />
+                      <span className={`flex items-center gap-1 ${
+                        theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                      }`}>
+                        <Eye className="h-4 w-4" />
                         {story.followers}
                       </span>
                       <span className="flex items-center gap-1">
@@ -870,8 +847,14 @@ export default function HomePage() {
                       </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">
+                  <div className={`rounded-lg p-3 border ${
+                    theme === 'dark' 
+                      ? 'bg-gradient-to-r from-green-900/50 to-emerald-900/50 border-green-800' 
+                      : 'bg-gradient-to-r from-green-100 to-emerald-100 border-green-200'
+                  }`}>
+                    <p className={`text-sm font-semibold ${
+                      theme === 'dark' ? 'text-green-300' : 'text-green-800'
+                    }`}>
                       Result: {story.result}
                     </p>
                   </div>
@@ -881,21 +864,27 @@ export default function HomePage() {
           </div>
         </section>
 
-        {/* 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>
+        <section ref={trendingRef} className={`w-full py-24 relative ${
+          theme === 'dark' ? 'bg-gray-900' : 'bg-gradient-to-b from-blue-50 via-white to-purple-50'
+        }`}>
+          <div className={`absolute inset-0 ${
+            theme === 'dark' ? 'bg-gray-900/80' : '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">
+            <h2 className={`text-3xl font-bold sm:text-4xl mb-4 text-center ${
+              theme === 'dark' ? 'text-white' : 'text-gray-900'
+            }`}>
               Trending Niches
             </h2>
-            <p className="mt-4 text-lg text-gray-700 mb-12 text-center">
+            <p className={`mt-4 text-lg mb-12 text-center ${
+              theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
+            }`}>
               Discover the fastest-growing content categories and opportunities.
             </p>
             <TrendingNichesSection />
           </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