diff --git a/Backend/app/db/seed.py b/Backend/app/db/seed.py
index 9b8936a..89496c6 100644
--- a/Backend/app/db/seed.py
+++ b/Backend/app/db/seed.py
@@ -1,6 +1,8 @@
-from datetime import datetime, timezone
-from db.db import AsyncSessionLocal
-from models.models import User
+import sys
+import os
+from app.db.db import AsyncSessionLocal
+from app.models.models import User
+sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
 
 
 async def seed_db():
diff --git a/Backend/app/main.py b/Backend/app/main.py
index 41ef7b7..7109a09 100644
--- a/Backend/app/main.py
+++ b/Backend/app/main.py
@@ -1,10 +1,10 @@
 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 app.db.db import engine
+from app.db.seed import seed_db
+from app.models import models, chat
+from app.routes.post import router as post_router
+from app.routes.chat import router as chat_router
 from sqlalchemy.exc import SQLAlchemyError
 import logging
 import os
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..429fbf1 100644
--- a/Backend/app/models/models.py
+++ b/Backend/app/models/models.py
@@ -12,7 +12,7 @@
 )
 from sqlalchemy.orm import relationship
 from datetime import datetime, timezone
-from db.db import Base
+from app.db.db import Base
 import uuid
 
 
@@ -40,10 +40,18 @@ class User(Base):
         DateTime(timezone=True), default=lambda: datetime.now(timezone.utc)
     )
 
-    audience = relationship("AudienceInsights", back_populates="user", uselist=False)
-    sponsorships = relationship("Sponsorship", back_populates="brand")
-    posts = relationship("UserPost", back_populates="user")
-    applications = relationship("SponsorshipApplication", back_populates="creator")
+    audience = relationship(
+        "AudienceInsights", back_populates="user", uselist=False
+    )
+    sponsorships = relationship(
+        "Sponsorship", back_populates="brand"
+    )
+    posts = relationship(
+        "UserPost", back_populates="user"
+    )
+    applications = relationship(
+        "SponsorshipApplication", back_populates="creator"
+    )
     payments = relationship(
         "SponsorshipPayment",
         foreign_keys="[SponsorshipPayment.creator_id]",
@@ -83,7 +91,9 @@ class Sponsorship(Base):
     brand_id = Column(String, ForeignKey("users.id"), nullable=False)
     title = Column(String, nullable=False)
     description = Column(Text, nullable=False)
-    required_audience = Column(JSON)  # {"age": ["18-24"], "location": ["USA", "UK"]}
+    required_audience = Column(
+        JSON
+    )  # {"age": ["18-24"], "location": ["USA", "UK"]}
     budget = Column(DECIMAL(10, 2))
     engagement_minimum = Column(Float)
     status = Column(String, default="open")
@@ -105,7 +115,9 @@ class UserPost(Base):
     content = Column(Text, nullable=False)
     post_url = Column(Text, nullable=True)
     category = Column(String, nullable=True)
-    engagement_metrics = Column(JSON)  # {"likes": 500, "comments": 100, "shares": 50}
+    engagement_metrics = Column(
+        JSON
+    )  # {"likes": 500, "comments": 100, "shares": 50}
     created_at = Column(
         DateTime(timezone=True), default=lambda: datetime.now(timezone.utc)
     )
diff --git a/Backend/app/routes/post.py b/Backend/app/routes/post.py
index d0f1413..14494ea 100644
--- a/Backend/app/routes/post.py
+++ b/Backend/app/routes/post.py
@@ -1,8 +1,8 @@
 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 app.db.db import AsyncSessionLocal
+from app.models.models import (
     User, AudienceInsights, Sponsorship, UserPost,
     SponsorshipApplication, SponsorshipPayment, Collaboration
 )
@@ -20,21 +20,30 @@
 
 # Load environment variables
 load_dotenv()
-url: str = os.getenv("SUPABASE_URL")
-key: str = os.getenv("SUPABASE_KEY")
+url = os.getenv("SUPABASE_URL")
+key = os.getenv("SUPABASE_KEY")
+if url is None:
+    raise RuntimeError("SUPABASE_URL environment variable is not set")
+if key is None:
+    raise RuntimeError("SUPABASE_KEY environment variable is not set")
 supabase: Client = create_client(url, key)
 
 # Define Router
 router = APIRouter()
 
 # Helper Functions
+
+
 def generate_uuid():
     return str(uuid.uuid4())
 
+
 def current_timestamp():
     return datetime.now(timezone.utc).isoformat()
 
 # ========== USER ROUTES ==========
+
+
 @router.post("/users/")
 async def create_user(user: UserCreate):
     user_id = generate_uuid()
@@ -53,12 +62,15 @@ async def create_user(user: UserCreate):
 
     return response
 
+
 @router.get("/users/")
 async def get_users():
     result = supabase.table("users").select("*").execute()
     return result
 
 # ========== AUDIENCE INSIGHTS ROUTES ==========
+
+
 @router.post("/audience-insights/")
 async def create_audience_insights(insights: AudienceInsightsCreate):
     insight_id = generate_uuid()
@@ -78,12 +90,15 @@ async def create_audience_insights(insights: AudienceInsightsCreate):
 
     return response
 
+
 @router.get("/audience-insights/")
 async def get_audience_insights():
     result = supabase.table("audience_insights").select("*").execute()
     return result
 
 # ========== SPONSORSHIP ROUTES ==========
+
+
 @router.post("/sponsorships/")
 async def create_sponsorship(sponsorship: SponsorshipCreate):
     sponsorship_id = generate_uuid()
@@ -103,12 +118,15 @@ async def create_sponsorship(sponsorship: SponsorshipCreate):
 
     return response
 
+
 @router.get("/sponsorships/")
 async def get_sponsorships():
     result = supabase.table("sponsorships").select("*").execute()
     return result
 
 # ========== USER POST ROUTES ==========
+
+
 @router.post("/posts/")
 async def create_post(post: UserPostCreate):
     post_id = generate_uuid()
@@ -127,12 +145,15 @@ async def create_post(post: UserPostCreate):
 
     return response
 
+
 @router.get("/posts/")
 async def get_posts():
     result = supabase.table("user_posts").select("*").execute()
     return result
 
 # ========== SPONSORSHIP APPLICATION ROUTES ==========
+
+
 @router.post("/sponsorship-applications/")
 async def create_sponsorship_application(application: SponsorshipApplicationCreate):
     application_id = generate_uuid()
@@ -150,12 +171,15 @@ async def create_sponsorship_application(application: SponsorshipApplicationCrea
 
     return response
 
+
 @router.get("/sponsorship-applications/")
 async def get_sponsorship_applications():
     result = supabase.table("sponsorship_applications").select("*").execute()
     return result
 
 # ========== SPONSORSHIP PAYMENT ROUTES ==========
+
+
 @router.post("/sponsorship-payments/")
 async def create_sponsorship_payment(payment: SponsorshipPaymentCreate):
     payment_id = generate_uuid()
@@ -172,12 +196,15 @@ async def create_sponsorship_payment(payment: SponsorshipPaymentCreate):
 
     return response
 
+
 @router.get("/sponsorship-payments/")
 async def get_sponsorship_payments():
     result = supabase.table("sponsorship_payments").select("*").execute()
     return result
 
 # ========== COLLABORATION ROUTES ==========
+
+
 @router.post("/collaborations/")
 async def create_collaboration(collab: CollaborationCreate):
     collaboration_id = generate_uuid()
@@ -194,6 +221,7 @@ async def create_collaboration(collab: CollaborationCreate):
 
     return response
 
+
 @router.get("/collaborations/")
 async def get_collaborations():
     result = supabase.table("collaborations").select("*").execute()
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/Frontend/package-lock.json b/Frontend/package-lock.json
index deae757..448612c 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -22,7 +22,7 @@
         "@radix-ui/react-tabs": "^1.1.3",
         "@reduxjs/toolkit": "^2.6.1",
         "@supabase/supabase-js": "^2.49.4",
-        "@tailwindcss/vite": "^4.0.16",
+        "@tailwindcss/vite": "^4.1.8",
         "axios": "^1.8.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -37,7 +37,7 @@
         "react-router-dom": "^7.2.0",
         "recharts": "^2.15.1",
         "tailwind-merge": "^3.0.2",
-        "tailwindcss": "^4.0.16",
+        "tailwindcss": "^4.1.8",
         "tw-animate-css": "^1.2.4"
       },
       "devDependencies": {
@@ -59,7 +59,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
       "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -1043,11 +1042,22 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
       "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -1062,7 +1072,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1072,7 +1081,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1082,14 +1090,12 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -2706,42 +2712,52 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.16.tgz",
-      "integrity": "sha512-T6IK79hoCFScxD5tRxWMtwqwSs4sT81Vw+YbzL7RZD0/Ndm4y5kboV7LdQ97YGH6udoOZyVT/uEfrnU2L5Nkog==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.8.tgz",
+      "integrity": "sha512-OWwBsbC9BFAJelmnNcrKuf+bka2ZxCE2A4Ft53Tkg4uoiE67r/PMEYwCsourC26E+kmxfwE0hVzMdxqeW+xu7Q==",
       "license": "MIT",
       "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
         "enhanced-resolve": "^5.18.1",
         "jiti": "^2.4.2",
-        "tailwindcss": "4.0.16"
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.17",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.8"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.0.16.tgz",
-      "integrity": "sha512-n++F8Rzvo/e+FYxikZgKW4sCRXneSstLhTI91Ay9toeRcE/+WO33SQWzGtgmjWJcTupXZreskJ8FCr9b+kdXew==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.8.tgz",
+      "integrity": "sha512-d7qvv9PsM5N3VNKhwVUhpK6r4h9wtLkJ6lz9ZY9aeZgrUWk1Z8VPyqyDT9MZlem7GTGseRQHkeB1j3tC7W1P+A==",
+      "hasInstallScript": true,
       "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.0.16",
-        "@tailwindcss/oxide-darwin-arm64": "4.0.16",
-        "@tailwindcss/oxide-darwin-x64": "4.0.16",
-        "@tailwindcss/oxide-freebsd-x64": "4.0.16",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.16",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.0.16",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.0.16",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.0.16",
-        "@tailwindcss/oxide-linux-x64-musl": "4.0.16",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.0.16",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.0.16"
+        "@tailwindcss/oxide-android-arm64": "4.1.8",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.8",
+        "@tailwindcss/oxide-darwin-x64": "4.1.8",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.8",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.8",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.8",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.8",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.8",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.8",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.8",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.8",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.8"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.0.16.tgz",
-      "integrity": "sha512-mieEZrNLHatpQu6ad0pWBnL8ObUE9ZSe4eoX6GKTqsKv98AxNw5lUa5nJM0FgD8rYJeZ2dPtHNN/YM2xY9R+9g==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.8.tgz",
+      "integrity": "sha512-Fbz7qni62uKYceWYvUjRqhGfZKwhZDQhlrJKGtnZfuNtHFqa8wmr+Wn74CTWERiW2hn3mN5gTpOoxWKk0jRxjg==",
       "cpu": [
         "arm64"
       ],
@@ -2755,9 +2771,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.0.16.tgz",
-      "integrity": "sha512-pfilSvgrX5UDdjh09gGVMhAPfZVucm4AnwFBkwBe6WFl7gzMAZ92/35GC0yMDeS+W+RNSXclXJz+HamF1iS/aA==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.8.tgz",
+      "integrity": "sha512-RdRvedGsT0vwVVDztvyXhKpsU2ark/BjgG0huo4+2BluxdXo8NDgzl77qh0T1nUxmM11eXwR8jA39ibvSTbi7A==",
       "cpu": [
         "arm64"
       ],
@@ -2771,9 +2787,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.0.16.tgz",
-      "integrity": "sha512-Z3lJY3yUjlHbzgXwWH9Y6IGeSGXfwjbXuvTPolyJUGMZl2ZaHdQMPOZ8dMll1knSLjctOif+QijMab0+GSXYLQ==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.8.tgz",
+      "integrity": "sha512-t6PgxjEMLp5Ovf7uMb2OFmb3kqzVTPPakWpBIFzppk4JE4ix0yEtbtSjPbU8+PZETpaYMtXvss2Sdkx8Vs4XRw==",
       "cpu": [
         "x64"
       ],
@@ -2787,9 +2803,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.0.16.tgz",
-      "integrity": "sha512-dv2U8Yc7vKIDyiJkUouhjsl+dTfRImNyZRCTFsHvvrhJvenYZBRtE/wDSYlZHR0lWKhIocxk1ScAkAcMR3F3QQ==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.8.tgz",
+      "integrity": "sha512-g8C8eGEyhHTqwPStSwZNSrOlyx0bhK/V/+zX0Y+n7DoRUzyS8eMbVshVOLJTDDC+Qn9IJnilYbIKzpB9n4aBsg==",
       "cpu": [
         "x64"
       ],
@@ -2803,9 +2819,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.0.16.tgz",
-      "integrity": "sha512-XBRXyUUyjMg5UMiyuQxJqWSs27w0V49g1iPuhrFakmu1/idDSly59XYteRrI2onoS9AzmMwfyzdiQSJXM89+PQ==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.8.tgz",
+      "integrity": "sha512-Jmzr3FA4S2tHhaC6yCjac3rGf7hG9R6Gf2z9i9JFcuyy0u79HfQsh/thifbYTF2ic82KJovKKkIB6Z9TdNhCXQ==",
       "cpu": [
         "arm"
       ],
@@ -2819,9 +2835,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.0.16.tgz",
-      "integrity": "sha512-+bL1zkU8MDzv389OqyI0SJbrG9kGsdxf+k2ZAILlw1TPWg5oeMkwoqgaQRqGwpOHz0pycT94qIgWVNJavAz+Iw==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.8.tgz",
+      "integrity": "sha512-qq7jXtO1+UEtCmCeBBIRDrPFIVI4ilEQ97qgBGdwXAARrUqSn/L9fUrkb1XP/mvVtoVeR2bt/0L77xx53bPZ/Q==",
       "cpu": [
         "arm64"
       ],
@@ -2835,9 +2851,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.0.16.tgz",
-      "integrity": "sha512-Uqfnyx9oFxoX+/iy9pIDTADHLLNwuZNB8QSp+BwKAhtHjBTTYmDAdxKy3u8lJZve1aOd+S145eWpn3tT08cm4w==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.8.tgz",
+      "integrity": "sha512-O6b8QesPbJCRshsNApsOIpzKt3ztG35gfX9tEf4arD7mwNinsoCKxkj8TgEE0YRjmjtO3r9FlJnT/ENd9EVefQ==",
       "cpu": [
         "arm64"
       ],
@@ -2851,9 +2867,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.16.tgz",
-      "integrity": "sha512-v0Hx0KD94F6FG0IW3AJyCzQepSv/47xhShCgiWJ2TNVu406VtREkGpJtxS0Gu1ecSXhgn/36LToU5kivAuQiPg==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.8.tgz",
+      "integrity": "sha512-32iEXX/pXwikshNOGnERAFwFSfiltmijMIAbUhnNyjFr3tmWmMJWQKU2vNcFX0DACSXJ3ZWcSkzNbaKTdngH6g==",
       "cpu": [
         "x64"
       ],
@@ -2867,9 +2883,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.0.16.tgz",
-      "integrity": "sha512-CjV6hhQAVNYw6W2EXp1ZVL81CTSBEh6nTmS5EZq5rdEhqOx8G8YQtFKjcCJiojsS+vMXt9r87gGoORJcHOA0lg==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.8.tgz",
+      "integrity": "sha512-s+VSSD+TfZeMEsCaFaHTaY5YNj3Dri8rST09gMvYQKwPphacRG7wbuQ5ZJMIJXN/puxPcg/nU+ucvWguPpvBDg==",
       "cpu": [
         "x64"
       ],
@@ -2882,10 +2898,39 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.8.tgz",
+      "integrity": "sha512-CXBPVFkpDjM67sS1psWohZ6g/2/cd+cq56vPxK4JeawelxwK4YECgl9Y9TjkE2qfF+9/s1tHHJqrC4SS6cVvSg==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@emnapi/wasi-threads": "^1.0.2",
+        "@napi-rs/wasm-runtime": "^0.2.10",
+        "@tybys/wasm-util": "^0.9.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.0.16.tgz",
-      "integrity": "sha512-Pj9eaAtXYH7NrvVx8Jx0U/sEaNpcIbb8d+2WnC8a+xL0LfIXWsu4AyeRUeTeb8Ty4fTGhKSJTohdXj1iSdN9WQ==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.8.tgz",
+      "integrity": "sha512-7GmYk1n28teDHUjPlIx4Z6Z4hHEgvP5ZW2QS9ygnDAdI/myh3HTHjDqtSqgu1BpRoI4OiLx+fThAyA1JePoENA==",
       "cpu": [
         "arm64"
       ],
@@ -2899,9 +2944,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.0.16.tgz",
-      "integrity": "sha512-M35hoFrhJe+1QdSiZpn85y8K7tfEVw6lswv3TjIfJ44JiPjPzZ4URg+rsTjTq0kue6NjNCbbY99AsRSSpJZxOw==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.8.tgz",
+      "integrity": "sha512-fou+U20j+Jl0EHwK92spoWISON2OBnCazIc038Xj2TdweYV33ZRkS9nwqiUi2d/Wba5xg5UoHfvynnb/UB49cQ==",
       "cpu": [
         "x64"
       ],
@@ -2915,15 +2960,14 @@
       }
     },
     "node_modules/@tailwindcss/vite": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.0.16.tgz",
-      "integrity": "sha512-6mZVWhAyjVNMMRw0Pvv2RZfTttjsAClU8HouLNZbeLbX0yURMa0UYEY/qS4dB1tZlRpiDBnCLsGsWbxEyIjW6A==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.8.tgz",
+      "integrity": "sha512-CQ+I8yxNV5/6uGaJjiuymgw0kEQiNKRinYbZXPdx1fk5WgiyReG0VaUx/Xq6aVNSUNJFzxm6o8FNKS5aMaim5A==",
       "license": "MIT",
       "dependencies": {
-        "@tailwindcss/node": "4.0.16",
-        "@tailwindcss/oxide": "4.0.16",
-        "lightningcss": "1.29.2",
-        "tailwindcss": "4.0.16"
+        "@tailwindcss/node": "4.1.8",
+        "@tailwindcss/oxide": "4.1.8",
+        "tailwindcss": "4.1.8"
       },
       "peerDependencies": {
         "vite": "^5.2.0 || ^6"
@@ -3563,6 +3607,15 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -3832,9 +3885,9 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
-      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -4767,9 +4820,9 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
-      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
       "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
@@ -4782,22 +4835,22 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.29.2",
-        "lightningcss-darwin-x64": "1.29.2",
-        "lightningcss-freebsd-x64": "1.29.2",
-        "lightningcss-linux-arm-gnueabihf": "1.29.2",
-        "lightningcss-linux-arm64-gnu": "1.29.2",
-        "lightningcss-linux-arm64-musl": "1.29.2",
-        "lightningcss-linux-x64-gnu": "1.29.2",
-        "lightningcss-linux-x64-musl": "1.29.2",
-        "lightningcss-win32-arm64-msvc": "1.29.2",
-        "lightningcss-win32-x64-msvc": "1.29.2"
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
-      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
       "cpu": [
         "arm64"
       ],
@@ -4815,9 +4868,9 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
-      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
       "cpu": [
         "x64"
       ],
@@ -4835,9 +4888,9 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
-      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
       "cpu": [
         "x64"
       ],
@@ -4855,9 +4908,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
-      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
       "cpu": [
         "arm"
       ],
@@ -4875,9 +4928,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
-      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
       "cpu": [
         "arm64"
       ],
@@ -4895,9 +4948,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
-      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
       "cpu": [
         "arm64"
       ],
@@ -4915,9 +4968,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
-      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
       "cpu": [
         "x64"
       ],
@@ -4935,9 +4988,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
-      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
       "cpu": [
         "x64"
       ],
@@ -4955,9 +5008,9 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
-      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
       "cpu": [
         "arm64"
       ],
@@ -4975,9 +5028,9 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
-      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
       "cpu": [
         "x64"
       ],
@@ -5054,6 +5107,15 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -5121,6 +5183,42 @@
         "node": "*"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
+      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/motion-dom": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.6.0.tgz",
@@ -5795,7 +5893,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -5838,20 +5935,46 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.16.tgz",
-      "integrity": "sha512-i/SbG7ThTIcLshcFJL+je7hCv9dPis4Xl4XNeel6iZNX42pp/BZ+la+SbZIPoYE+PN8zhKbnHblpQ/lhOWwIeQ==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.8.tgz",
+      "integrity": "sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og==",
       "license": "MIT"
     },
     "node_modules/tapable": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
+      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/tar": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
+      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
diff --git a/Frontend/package.json b/Frontend/package.json
index 1f4ad6f..bdd99c1 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -24,7 +24,7 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@reduxjs/toolkit": "^2.6.1",
     "@supabase/supabase-js": "^2.49.4",
-    "@tailwindcss/vite": "^4.0.16",
+    "@tailwindcss/vite": "^4.1.8",
     "axios": "^1.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -39,7 +39,7 @@
     "react-router-dom": "^7.2.0",
     "recharts": "^2.15.1",
     "tailwind-merge": "^3.0.2",
-    "tailwindcss": "^4.0.16",
+    "tailwindcss": "^4.1.8",
     "tw-animate-css": "^1.2.4"
   },
   "devDependencies": {
diff --git a/Frontend/src/App.tsx b/Frontend/src/App.tsx
index 15b8bc6..3ba2667 100644
--- a/Frontend/src/App.tsx
+++ b/Frontend/src/App.tsx
@@ -15,75 +15,78 @@ import { AuthProvider } from "./context/AuthContext";
 import ProtectedRoute from "./components/ProtectedRoute";
 import Dashboard from "./pages/Brand/Dashboard";
 import BasicDetails from "./pages/BasicDetails";
+import { ThemeProvider } from "./components/theme-provider";
 
 function App() {
-  return (
-    <Router>
-      <AuthProvider>
-        <Routes>
-          {/* Public Routes */}
-          <Route path="/" element={<HomePage />} />
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/signup" element={<SignupPage />} />
-          <Route path="/forgot-password" element={<ForgotPasswordPage />} />
-          <Route path="/reset-password" element={<ResetPasswordPage />} />
-          <Route path="/brand/dashboard" element={<Dashboard />} />
-          <Route path="/basicDetails/:user" element={<BasicDetails />} />
-          <Route path="/creator/messages" element={<MessagesPage />} />
+    return (
+        <Router>
+            <AuthProvider>
+                <ThemeProvider>
+                    <Routes>
+                        {/* Public Routes */}
+                        <Route path="/" element={<HomePage />} />
+                        <Route path="/login" element={<LoginPage />} />
+                        <Route path="/signup" element={<SignupPage />} />
+                        <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+                        <Route path="/reset-password" element={<ResetPasswordPage />} />
+                        <Route path="/brand/dashboard" element={<Dashboard />} />
+                        <Route path="/basicDetails/:user" element={<BasicDetails />} />
+                        <Route path="/creator/messages" element={<MessagesPage />} />
 
-          {/* 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/messages"
-            element={
-              <ProtectedRoute>
-                <MessagesPage />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path="/dashboard/contracts"
-            element={
-              <ProtectedRoute>
-                <Contracts />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path="/dashboard/analytics"
-            element={
-              <ProtectedRoute>
-                <Analytics />
-              </ProtectedRoute>
-            }
-          />
-        </Routes>
-      </AuthProvider>
-    </Router>
-  );
+                        {/* 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/messages"
+                            element={
+                                <ProtectedRoute>
+                                    <MessagesPage />
+                                </ProtectedRoute>
+                            }
+                        />
+                        <Route
+                            path="/dashboard/contracts"
+                            element={
+                                <ProtectedRoute>
+                                    <Contracts />
+                                </ProtectedRoute>
+                            }
+                        />
+                        <Route
+                            path="/dashboard/analytics"
+                            element={
+                                <ProtectedRoute>
+                                    <Analytics />
+                                </ProtectedRoute>
+                            }
+                        />
+                    </Routes>
+                </ThemeProvider>
+            </AuthProvider>
+        </Router>
+    );
 }
 
 export default App;
diff --git a/Frontend/src/components/Onboarding.tsx b/Frontend/src/components/Onboarding.tsx
index 9a78c9a..3f8e1d3 100644
--- a/Frontend/src/components/Onboarding.tsx
+++ b/Frontend/src/components/Onboarding.tsx
@@ -5,10 +5,10 @@ export default function Onboarding() {
   const navigate = useNavigate();
 
   return (
-    <div className="bg-gray-200 flex flex-col items-center justify-center px-4 py-16">
+    <div className="bg-gray-200 flex flex-col items-center justify-center px-4 py-16 dark:bg-nightP dark:text-nightTS">
       <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">
+        <h1 className="text-3xl font-bold text-gray-900 dark:text-nightTP">Welcome to Inpact</h1>
+        <p className="mt-2 text-gray-600 dark:text-nightTS">
           Let's get you started with your profile setup
         </p>
 
diff --git a/Frontend/src/components/chat/chat-list.tsx b/Frontend/src/components/chat/chat-list.tsx
index 19a1431..d90c3bd 100644
--- a/Frontend/src/components/chat/chat-list.tsx
+++ b/Frontend/src/components/chat/chat-list.tsx
@@ -39,20 +39,20 @@ export default function ChatList() {
   };
 
   return (
-    <div className="col-span-4 bg-white rounded-lg h-[calc(100vh-289px)] border border-gray-300">
+    <div className="col-span-4 bg-white rounded-lg h-[calc(100vh-289px)] border border-gray-300 dark:bg-nightS dark:text-nightTS dark:border-nightP ml-4">
       <div className="p-4 border-neutral-200 flex items-center gap-2">
         <ChatSearch />
         <CreateNewChat />
       </div>
-      <div className="overflow-y-auto h-[calc(100%-60px)]">
+      <div className="overflow-y-auto h-[calc(100%-60px)] dark:bg-nightS dark:text-nightTS">
         {loading && (
-          <div className="flex justify-center py-2">
-            <div className="text-gray-500">Loading chats...</div>
+          <div className="flex justify-center py-2  dark:bg-nightS dark:text-nightTS">
+            <div className="text-gray-500 dark:text-nightTP">Loading chats...</div>
           </div>
         )}
         {!loading && sortedChatList.length === 0 && (
-          <div className="flex justify-center py-2">
-            <div className="text-gray-500">No chats available</div>
+          <div className="flex justify-center py-2 dark:bg-nightS dark:text-nightTS">
+            <div className="text-gray-500 dark:text-nightTP">No chats available</div>
           </div>
         )}
         {sortedChatList.map((chat) => (
diff --git a/Frontend/src/components/chat/chat-search.tsx b/Frontend/src/components/chat/chat-search.tsx
index 7ef2366..6db0b77 100644
--- a/Frontend/src/components/chat/chat-search.tsx
+++ b/Frontend/src/components/chat/chat-search.tsx
@@ -107,11 +107,11 @@ const ChatSearch = () => {
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger asChild>
         <div className="relative w-full max-w-md">
-          <SearchIcon className="h-4 w-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
+          <SearchIcon className="h-4 w-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground " />
           <Input
             type="text"
             placeholder="Search chats and messages..."
-            className="pl-9 pr-4"
+            className="pl-9 pr-4 rounded-full dark:bg-[#364152] dark:text-nightTS"
             value={searchQuery}
             onChange={(e) => {
               setSearchQuery(e.target.value);
@@ -128,7 +128,7 @@ const ChatSearch = () => {
         </div>
       </PopoverTrigger>
       <PopoverContent
-        className="w-[300px] p-0 max-h-[400px] overflow-y-auto"
+        className="w-[300px] p-0 max-h-[400px] overflow-y-auto dark:bg-[#364152] dark:text-nightTP"
         onOpenAutoFocus={(e) => e.preventDefault()} // This prevents the auto focus
       >
         <div className="py-2">{renderSearchResults()}</div>
diff --git a/Frontend/src/components/chat/chat.tsx b/Frontend/src/components/chat/chat.tsx
index e177e68..b0f9aac 100644
--- a/Frontend/src/components/chat/chat.tsx
+++ b/Frontend/src/components/chat/chat.tsx
@@ -10,12 +10,12 @@ export default function Chat() {
   const [userId, setUserId] = useState<string | null>(null);
   return (
     <>
-      <div className="relative flex items-center">
+      <div className="relative m-4 max-w-xl ml-auto">
         <Input
           value={inputUserId ?? ""}
           onChange={(e) => setInputUserId(e.target.value)}
           placeholder="Enter user ID"
-          className="mb-4 max-w-xl ml-auto"
+          className="pr-28 rounded-full dark:bg-[#364152] dark:text-nightTS"
           disabled={!!userId}
         />
         <Button
@@ -24,14 +24,14 @@ export default function Chat() {
           onClick={() => {
             setUserId(inputUserId);
           }}
-          className="absolute right-2 top-1"
+          className="absolute rounded-full right-2 top-1/2 -translate-y-1/2 dark:border-purple-700 dark:bg-purple-600 dark:text-nightTS dark:hover:bg-purple-700"
         >
           {userId ? "Connected" : "Connect"}
         </Button>
       </div>
       {userId && (
         <ChatProvider userId={userId}>
-          <div className="grid grid-cols-12 gap-6">
+          <div className="grid grid-cols-12 gap-6 dark:bg-nightP dark:text-nightTS">
             <ChatList />
             <MessagesView />
           </div>
diff --git a/Frontend/src/components/chat/create-new-chat.tsx b/Frontend/src/components/chat/create-new-chat.tsx
index 603b059..015923c 100644
--- a/Frontend/src/components/chat/create-new-chat.tsx
+++ b/Frontend/src/components/chat/create-new-chat.tsx
@@ -51,9 +51,9 @@ export function CreateNewChat() {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <CirclePlus className="cursor-pointer" />
+        <CirclePlus className="cursor-pointer dark:text-nightTP" />
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-[425px] dark:bg-nightS">
         <form onSubmit={handleSubmit}>
           <DialogHeader>
             <DialogTitle>Create New Chat</DialogTitle>
@@ -71,25 +71,25 @@ export function CreateNewChat() {
                 id="username"
                 value={username}
                 onChange={(e) => setUsername(e.target.value)}
-                className="col-span-3"
+                className="col-span-3 dark:bg-[#364152] dark:text-nightTS"
                 disabled={loading}
               />
             </div>
             <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="message" className="text-right">
+              <Label htmlFor="message" className="text-right ">
                 Message
               </Label>
               <Textarea
                 id="message"
                 value={message}
                 onChange={(e) => setMessage(e.target.value)}
-                className="col-span-3"
+                className="col-span-3 dark:bg-[#364152] dark:text-nightTS"
                 disabled={loading}
               />
             </div>
           </div>
           <DialogFooter>
-            <Button type="submit" disabled={loading}>
+            <Button type="submit" disabled={loading} className="dark:bg-purple-600 dark:text-nightTS dark:hover:bg-purple-700">
               {loading ? "Creating..." : "Create Chat"}
             </Button>
           </DialogFooter>
diff --git a/Frontend/src/components/chat/messages-view.tsx b/Frontend/src/components/chat/messages-view.tsx
index 13167e1..796c150 100644
--- a/Frontend/src/components/chat/messages-view.tsx
+++ b/Frontend/src/components/chat/messages-view.tsx
@@ -8,154 +8,154 @@ import { useChat } from "@/lib/useChat";
 import { Loader2 } from "lucide-react";
 
 export default function MessagesView() {
-  const selectedChatId = useSelector(
-    (state: RootState) => state.chat.selectedChatId
-  );
-  const dispatch = useDispatch();
-  const [lastFetchedTime, setLastFetchedTime] = useState<number>(
-    new Date().getTime()
-  );
-  const [loading, setLoading] = useState<boolean>(false);
-  const [hasMore, setHasMore] = useState<boolean>(true);
-  const messagesContainerRef = useRef<HTMLDivElement>(null);
-  const initialLoadPerformedRef = useRef<boolean>(false);
-
-  const chatMessageIds = useSelector((state: RootState) =>
-    selectedChatId ? state.chat.chats[selectedChatId]?.messageIds || [] : []
-  );
-
-  const { fetchChatMessages, markChatAsSeen } = useChat();
-
-  const messages = useSelector((state: RootState) =>
-    chatMessageIds.map((messageId) => state.chat.messages[messageId])
-  );
-
-  // Load messages function (used for both initial and scroll-based loading)
-  const loadMessages = (timestamp: number = 0) => {
-    if (!selectedChatId || loading || (!hasMore && timestamp !== 0)) return;
-
-    setLoading(true);
-
-    fetchChatMessages(selectedChatId, timestamp)
-      .then((fetchedMessages) => {
-        // If no messages or empty array, we've reached the end
-        if (!fetchedMessages) {
-          setHasMore(false);
-        }
+    const selectedChatId = useSelector(
+        (state: RootState) => state.chat.selectedChatId
+    );
+    const dispatch = useDispatch();
+    const [lastFetchedTime, setLastFetchedTime] = useState<number>(
+        new Date().getTime()
+    );
+    const [loading, setLoading] = useState<boolean>(false);
+    const [hasMore, setHasMore] = useState<boolean>(true);
+    const messagesContainerRef = useRef<HTMLDivElement>(null);
+    const initialLoadPerformedRef = useRef<boolean>(false);
 
-        // Mark messages as seen on initial load
-        if (timestamp === 0) {
-          markChatAsSeen(selectedChatId);
-          // Scroll to bottom after loading old messages
-          setTimeout(() => {
-            if (messagesContainerRef.current) {
-              messagesContainerRef.current.scrollTop =
-                messagesContainerRef.current.scrollHeight;
-            }
-          }, 1000);
+    const chatMessageIds = useSelector((state: RootState) =>
+        selectedChatId ? state.chat.chats[selectedChatId]?.messageIds || [] : []
+    );
+
+    const { fetchChatMessages, markChatAsSeen } = useChat();
+
+    const messages = useSelector((state: RootState) =>
+        chatMessageIds.map((messageId) => state.chat.messages[messageId])
+    );
+
+    // Load messages function (used for both initial and scroll-based loading)
+    const loadMessages = (timestamp: number = 0) => {
+        if (!selectedChatId || loading || (!hasMore && timestamp !== 0)) return;
+
+        setLoading(true);
+
+        fetchChatMessages(selectedChatId, timestamp)
+            .then((fetchedMessages) => {
+                // If no messages or empty array, we've reached the end
+                if (!fetchedMessages) {
+                    setHasMore(false);
+                }
+
+                // Mark messages as seen on initial load
+                if (timestamp === 0) {
+                    markChatAsSeen(selectedChatId);
+                    // Scroll to bottom after loading old messages
+                    setTimeout(() => {
+                        if (messagesContainerRef.current) {
+                            messagesContainerRef.current.scrollTop =
+                                messagesContainerRef.current.scrollHeight;
+                        }
+                    }, 1000);
+                }
+            })
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    // Reset state when chat changes
+    useEffect(() => {
+        if (selectedChatId) {
+            setHasMore(true);
+            setLastFetchedTime(new Date().getTime());
+            initialLoadPerformedRef.current = false;
+            setTimeout(() => {
+                if (messagesContainerRef.current) {
+                    messagesContainerRef.current.scrollTop =
+                        messagesContainerRef.current.scrollHeight;
+                }
+            }, 10);
         }
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  };
-
-  // Reset state when chat changes
-  useEffect(() => {
-    if (selectedChatId) {
-      setHasMore(true);
-      setLastFetchedTime(new Date().getTime());
-      initialLoadPerformedRef.current = false;
-      setTimeout(() => {
-        if (messagesContainerRef.current) {
-          messagesContainerRef.current.scrollTop =
-            messagesContainerRef.current.scrollHeight;
+    }, [selectedChatId]);
+
+    // Perform initial load if needed
+    useEffect(() => {
+        if (
+            selectedChatId &&
+            chatMessageIds.length === 0 &&
+            !initialLoadPerformedRef.current
+        ) {
+            initialLoadPerformedRef.current = true;
+            loadMessages(0);
         }
-      }, 10);
-    }
-  }, [selectedChatId]);
-
-  // Perform initial load if needed
-  useEffect(() => {
-    if (
-      selectedChatId &&
-      chatMessageIds.length === 0 &&
-      !initialLoadPerformedRef.current
-    ) {
-      initialLoadPerformedRef.current = true;
-      loadMessages(0);
-    }
-  }, [selectedChatId, chatMessageIds.length]);
-
-  // Update lastFetchedTime when messages change
-  useEffect(() => {
-    if (messages.length > 0) {
-      const oldestMessageTime = new Date(messages[0].createdAt).getTime();
-      // Only update if we have a new oldest message
-      if (oldestMessageTime < lastFetchedTime) {
-        setLastFetchedTime(oldestMessageTime);
-      }
-    }
-  }, [messages, lastFetchedTime]);
+    }, [selectedChatId, chatMessageIds.length]);
+
+    // Update lastFetchedTime when messages change
+    useEffect(() => {
+        if (messages.length > 0) {
+            const oldestMessageTime = new Date(messages[0].createdAt).getTime();
+            // Only update if we have a new oldest message
+            if (oldestMessageTime < lastFetchedTime) {
+                setLastFetchedTime(oldestMessageTime);
+            }
+        }
+    }, [messages, lastFetchedTime]);
 
-  // Handle scroll to load more messages
-  const handleScroll = () => {
-    if (!messagesContainerRef.current) return;
+    // Handle scroll to load more messages
+    const handleScroll = () => {
+        if (!messagesContainerRef.current) return;
 
-    const { scrollTop } = messagesContainerRef.current;
+        const { scrollTop } = messagesContainerRef.current;
 
-    // Check if scrolled to top (with a small threshold)
-    if (scrollTop < 10 && !loading && hasMore && selectedChatId) {
-      loadMessages(lastFetchedTime);
-    }
-  };
-
-  // Maintain scroll position when adding old messages
-  useEffect(() => {
-    if (loading && messagesContainerRef.current) {
-      const container = messagesContainerRef.current;
-      const oldScrollHeight = container.scrollHeight;
-
-      setTimeout(() => {
-        const newScrollHeight = container.scrollHeight;
-        container.scrollTop = newScrollHeight - oldScrollHeight;
-      }, 0);
+        // Check if scrolled to top (with a small threshold)
+        if (scrollTop < 10 && !loading && hasMore && selectedChatId) {
+            loadMessages(lastFetchedTime);
+        }
+    };
+
+    // Maintain scroll position when adding old messages
+    useEffect(() => {
+        if (loading && messagesContainerRef.current) {
+            const container = messagesContainerRef.current;
+            const oldScrollHeight = container.scrollHeight;
+
+            setTimeout(() => {
+                const newScrollHeight = container.scrollHeight;
+                container.scrollTop = newScrollHeight - oldScrollHeight;
+            }, 0);
+        }
+    }, [messages, loading]);
+
+    if (!selectedChatId) {
+        return (
+            <div className="col-span-8 bg-white rounded-lg h-[calc(100vh-300px)] flex items-center justify-center border border-gray-300 dark:bg-nightS dark:text-nightTS dark:border-nightP mr-4">
+                <p className="text-gray-500 dark:text-nightTP">Select a chat to view messages</p>
+            </div>
+        );
     }
-  }, [messages, loading]);
 
-  if (!selectedChatId) {
     return (
-      <div className="col-span-8 bg-white rounded-lg h-[calc(100vh-300px)] flex items-center justify-center border border-gray-300">
-        <p className="text-gray-500">Select a chat to view messages</p>
-      </div>
+        <div className="col-span-8 bg-white rounded-lg h-[calc(100vh-300px)] flex flex-col border border-gray-300">
+            <div className="p-4 border-neutral-200">
+                <SelectedUserCard />
+            </div>
+
+            <div
+                ref={messagesContainerRef}
+                className="flex-1 overflow-y-auto p-4 space-y-4"
+                onScroll={handleScroll}
+            >
+                {loading && (
+                    <div className="flex justify-center py-2">
+                        <Loader2 className="w-6 h-6 animate-spin text-gray-500" />
+                    </div>
+                )}
+                {!hasMore && messages.length > 0 && (
+                    <div className="text-center text-sm text-gray-500 py-2">
+                        No more messages
+                    </div>
+                )}
+                <MessagesList messages={messages} />
+            </div>
+
+            <MessageInput containerRef={messagesContainerRef} />
+        </div>
     );
-  }
-
-  return (
-    <div className="col-span-8 bg-white rounded-lg h-[calc(100vh-300px)] flex flex-col border border-gray-300">
-      <div className="p-4 border-neutral-200">
-        <SelectedUserCard />
-      </div>
-
-      <div
-        ref={messagesContainerRef}
-        className="flex-1 overflow-y-auto p-4 space-y-4"
-        onScroll={handleScroll}
-      >
-        {loading && (
-          <div className="flex justify-center py-2">
-            <Loader2 className="w-6 h-6 animate-spin text-gray-500" />
-          </div>
-        )}
-        {!hasMore && messages.length > 0 && (
-          <div className="text-center text-sm text-gray-500 py-2">
-            No more messages
-          </div>
-        )}
-        <MessagesList messages={messages} />
-      </div>
-
-      <MessageInput containerRef={messagesContainerRef} />
-    </div>
-  );
 }
diff --git a/Frontend/src/components/dashboard/sponsorship-matches.tsx b/Frontend/src/components/dashboard/sponsorship-matches.tsx
index 94014e6..9a13493 100644
--- a/Frontend/src/components/dashboard/sponsorship-matches.tsx
+++ b/Frontend/src/components/dashboard/sponsorship-matches.tsx
@@ -6,12 +6,12 @@ import { Badge } from "../ui/badge"
 export function SponsorshipMatches() {
   return (
     <div className="space-y-4">
-      <Card>
+      <Card className="dark:bg-nightS dark:border-nightP">
         <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>
+              <AvatarFallback className="bg-gray-200 dark:bg-white/70 dark:border-nightP dark:text-black">ES</AvatarFallback>
             </Avatar>
             <div className="flex-1 space-y-1">
               <div className="flex items-center justify-between">
@@ -26,7 +26,7 @@ export function SponsorshipMatches() {
               </div>
               <div className="flex items-center gap-2 pt-2">
                 <Button size="sm">View Details</Button>
-                <Button size="sm" variant="outline">
+                <Button size="sm" variant="outline" className="dark:text-nightP dark:hover:bg-primary/90">
                   Contact
                 </Button>
               </div>
@@ -34,12 +34,12 @@ export function SponsorshipMatches() {
           </div>
         </CardContent>
       </Card>
-      <Card>
+      <Card  className="dark:bg-nightS dark:border-nightP">
         <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>
+              <AvatarFallback className="bg-gray-200 dark:bg-white/70 dark:border-nightP dark:text-black">TG</AvatarFallback>
             </Avatar>
             <div className="flex-1 space-y-1">
               <div className="flex items-center justify-between">
@@ -56,7 +56,7 @@ export function SponsorshipMatches() {
               </div>
               <div className="flex items-center gap-2 pt-2">
                 <Button size="sm">View Details</Button>
-                <Button size="sm" variant="outline">
+                <Button size="sm" variant="outline" className="dark:text-nightP dark:hover:bg-primary/90">
                   Contact
                 </Button>
               </div>
@@ -64,12 +64,12 @@ export function SponsorshipMatches() {
           </div>
         </CardContent>
       </Card>
-      <Card>
+      <Card className="dark:bg-nightS dark:border-nightP">
         <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>
+              <AvatarFallback className="bg-gray-200 dark:bg-white/70 dark:border-nightP dark:text-black">FL</AvatarFallback>
             </Avatar>
             <div className="flex-1 space-y-1">
               <div className="flex items-center justify-between">
@@ -86,7 +86,7 @@ export function SponsorshipMatches() {
               </div>
               <div className="flex items-center gap-2 pt-2">
                 <Button size="sm">View Details</Button>
-                <Button size="sm" variant="outline">
+                <Button size="sm" variant="outline" className="dark:text-nightP dark:hover:bg-primary/90">
                   Contact
                 </Button>
               </div>
diff --git a/Frontend/src/components/mode-toggle.tsx b/Frontend/src/components/mode-toggle.tsx
index ff4a8c4..422c7f5 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="dark:bg-nightS dark:text-nightTS">
           <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>
diff --git a/Frontend/src/components/ui/slider.tsx b/Frontend/src/components/ui/slider.tsx
index 3b528d2..4d0c191 100644
--- a/Frontend/src/components/ui/slider.tsx
+++ b/Frontend/src/components/ui/slider.tsx
@@ -3,22 +3,22 @@ import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "../../lib/utils";
 
 const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+    React.ComponentRef<typeof SliderPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
+    <SliderPrimitive.Root
+        ref={ref}
+        className={cn(
+            "relative flex w-full touch-none select-none items-center",
+            className
+        )}
+        {...props}
+    >
+        <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary dark:bg-[#364152]">
+            <SliderPrimitive.Range className="absolute h-full bg-primary" />
+        </SliderPrimitive.Track>
+        <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    </SliderPrimitive.Root>
 ));
 
 export { Slider };
diff --git a/Frontend/src/index.css b/Frontend/src/index.css
index 56b2e5a..b054c45 100644
--- a/Frontend/src/index.css
+++ b/Frontend/src/index.css
@@ -73,6 +73,10 @@
 }
 
 @theme inline {
+    --color-nightP:#18181B;
+    --color-nightTS:#E4E4E7;
+    --color-nightS:#27272A;
+    --color-nightTP:#fff;
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -118,3 +122,5 @@
     @apply bg-background text-foreground;
   }
 }
+
+
diff --git a/Frontend/src/pages/BasicDetails.tsx b/Frontend/src/pages/BasicDetails.tsx
index a1fa5f9..e959f89 100644
--- a/Frontend/src/pages/BasicDetails.tsx
+++ b/Frontend/src/pages/BasicDetails.tsx
@@ -1,30 +1,30 @@
 import { Button } from "../components/ui/button";
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
 } from "../components/ui/card";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
 } from "../components/ui/select";
 import {
-  Instagram,
-  Youtube,
-  Twitter,
-  BookText as TikTok,
-  Globe,
-  ChevronRight,
-  ChevronLeft,
-  Rocket,
-  Check,
+    Instagram,
+    Youtube,
+    Twitter,
+    BookText as TikTok,
+    Globe,
+    ChevronRight,
+    ChevronLeft,
+    Rocket,
+    Check,
 } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useState, useEffect } from "react";
@@ -35,544 +35,541 @@ import { Link } from "react-router-dom";
 import { ModeToggle } from "../components/mode-toggle";
 
 export default function BasicDetails() {
-  const { user } = useParams();
-  const [step, setStep] = useState(0);
-  const [animationDirection, setAnimationDirection] = useState(0);
+    const { user } = useParams();
+    const [step, setStep] = useState(0);
+    const [animationDirection, setAnimationDirection] = useState(0);
 
-  const totalSteps = user === "influencer" ? 3 : 2;
-  const nextStep = () => {
-    if ((user === "influencer" && step < 2) || (user === "brand" && step < 1)) {
-      setAnimationDirection(1);
-      setTimeout(() => {
-        setStep((prev) => prev + 1);
-      }, 50);
-    }
-  };
+    const totalSteps = user === "influencer" ? 3 : 2;
+    const nextStep = () => {
+        if ((user === "influencer" && step < 2) || (user === "brand" && step < 1)) {
+            setAnimationDirection(1);
+            setTimeout(() => {
+                setStep((prev) => prev + 1);
+            }, 50);
+        }
+    };
 
-  const prevStep = () => {
-    if (step > 0) {
-      setAnimationDirection(-1);
-      setTimeout(() => {
-        setStep((prev) => prev - 1);
-      }, 50);
-    }
-  };
+    const prevStep = () => {
+        if (step > 0) {
+            setAnimationDirection(-1);
+            setTimeout(() => {
+                setStep((prev) => prev - 1);
+            }, 50);
+        }
+    };
 
-  useEffect(() => {
-    // Reset animation direction after animation completes
-    const timer = setTimeout(() => {
-      setAnimationDirection(0);
-    }, 500);
-    return () => clearTimeout(timer);
-  }, [step]);
+    useEffect(() => {
+        // Reset animation direction after animation completes
+        const timer = setTimeout(() => {
+            setAnimationDirection(0);
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [step]);
 
-  const InfluencerBasicDetails = () => (
-    <div className="space-y-4 p-4 border border-gray-300 rounded-md">
-      <div className="grid grid-cols-2 gap-4">
-        <div className="space-y-2">
-          <Label htmlFor="firstName">First Name</Label>
-          <Input
-            id="firstName"
-            placeholder="John"
-            className="border border-gray-300"
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="lastName">Last Name</Label>
-          <Input
-            id="lastName"
-            placeholder="Doe"
-            className="border border-gray-300"
-          />
+    const InfluencerBasicDetails = () => (
+        <div className="space-y-4 p-4 border border-gray-300 rounded-md">
+            <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                    <Label htmlFor="firstName">First Name</Label>
+                    <Input
+                        id="firstName"
+                        placeholder="John"
+                        className="border border-gray-300"
+                    />
+                </div>
+                <div className="space-y-2">
+                    <Label htmlFor="lastName">Last Name</Label>
+                    <Input
+                        id="lastName"
+                        placeholder="Doe"
+                        className="border border-gray-300"
+                    />
+                </div>
+            </div>
+            <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                    id="email"
+                    type="email"
+                    placeholder="john@example.com"
+                    className="border border-gray-300"
+                />
+            </div>
+            <div className="space-y-2">
+                <Label htmlFor="phone">Phone Number</Label>
+                <Input
+                    id="phone"
+                    type="tel"
+                    placeholder="+1 (555) 000-0000"
+                    className="border border-gray-300"
+                />
+            </div>
+            <div className="space-y-2">
+                <Label htmlFor="category">Content Category</Label>
+                <Select>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select your main content category" />
+                    </SelectTrigger>
+                    <SelectContent className="border border-gray-300">
+                        <SelectItem value="lifestyle">Lifestyle</SelectItem>
+                        <SelectItem value="tech">Technology</SelectItem>
+                        <SelectItem value="fashion">Fashion</SelectItem>
+                        <SelectItem value="gaming">Gaming</SelectItem>
+                        <SelectItem value="food">Food</SelectItem>
+                        <SelectItem value="travel">Travel</SelectItem>
+                        <SelectItem value="fitness">Fitness</SelectItem>
+                        <SelectItem value="education">Education</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
         </div>
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="email">Email</Label>
-        <Input
-          id="email"
-          type="email"
-          placeholder="john@example.com"
-          className="border border-gray-300"
-        />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="phone">Phone Number</Label>
-        <Input
-          id="phone"
-          type="tel"
-          placeholder="+1 (555) 000-0000"
-          className="border border-gray-300"
-        />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="category">Content Category</Label>
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select your main content category" />
-          </SelectTrigger>
-          <SelectContent className="border border-gray-300">
-            <SelectItem value="lifestyle">Lifestyle</SelectItem>
-            <SelectItem value="tech">Technology</SelectItem>
-            <SelectItem value="fashion">Fashion</SelectItem>
-            <SelectItem value="gaming">Gaming</SelectItem>
-            <SelectItem value="food">Food</SelectItem>
-            <SelectItem value="travel">Travel</SelectItem>
-            <SelectItem value="fitness">Fitness</SelectItem>
-            <SelectItem value="education">Education</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    </div>
-  );
-
-  const InfluencerSocialMedia = () => (
-    <div className="space-y-4 p-4 border border-gray-300 rounded-md">
-      <div className="space-y-2">
-        <Label className="flex items-center gap-2">
-          <Instagram className="h-5 w-5 text-pink-600" />
-          Instagram Handle
-        </Label>
-        <Input placeholder="@username" className="border border-gray-300" />
-      </div>
-      <div className="space-y-2">
-        <Label className="flex items-center gap-2">
-          <Youtube className="h-5 w-5 text-red-600" />
-          YouTube Channel
-        </Label>
-        <Input placeholder="Channel URL" className="border border-gray-300" />
-      </div>
-      <div className="space-y-2">
-        <Label className="flex items-center gap-2">
-          <Twitter className="h-5 w-5 text-blue-400" />
-          Twitter Handle
-        </Label>
-        <Input placeholder="@username" className="border border-gray-300" />
-      </div>
-      <div className="space-y-2">
-        <Label className="flex items-center gap-2">
-          <TikTok className="h-5 w-5" />
-          TikTok Username
-        </Label>
-        <Input placeholder="@username" className="border border-gray-300" />
-      </div>
-      <div className="space-y-2">
-        <Label className="flex items-center gap-2">
-          <Globe className="h-5 w-5 text-blue-500" />
-          Personal Website
-        </Label>
-        <Input placeholder="https://" className="border border-gray-300" />
-      </div>
-    </div>
-  );
-
-  const InfluencerAudience = () => (
-    <div className="space-y-4 p-4 border border-gray-300 rounded-md">
-      <div className="space-y-2">
-        <Label htmlFor="audienceSize">Total Audience Size</Label>
-        <Input
-          id="audienceSize"
-          type="number"
-          placeholder="e.g., 100000"
-          className="border border-gray-300"
-        />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="avgEngagement">Average Engagement Rate (%)</Label>
-        <Input
-          id="avgEngagement"
-          type="number"
-          step="0.01"
-          placeholder="e.g., 3.5"
-          className="border border-gray-300"
-        />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="mainPlatform">Primary Platform</Label>
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select your main platform" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="instagram">Instagram</SelectItem>
-            <SelectItem value="youtube">YouTube</SelectItem>
-            <SelectItem value="tiktok">TikTok</SelectItem>
-            <SelectItem value="twitter">Twitter</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="audienceAge">Primary Audience Age Range</Label>
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select age range" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="13-17">13-17</SelectItem>
-            <SelectItem value="18-24">18-24</SelectItem>
-            <SelectItem value="25-34">25-34</SelectItem>
-            <SelectItem value="35-44">35-44</SelectItem>
-            <SelectItem value="45+">45+</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    </div>
-  );
+    );
 
-  const BrandBasicDetails = () => (
-    <div className="space-y-4 p-4 border border-gray-300 rounded-md">
-      <div className="space-y-2">
-        <h3 className="text-lg font-medium text-gray-800 dark:text-gray-200">
-          Brand Information
-        </h3>
-        <Label htmlFor="companyName">Company Name</Label>
-        <Input id="companyName" placeholder="Brand Inc." />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="website">Company Website</Label>
-        <Input id="website" type="url" placeholder="https://www.example.com" />
-      </div>
-      <div className="grid grid-cols-2 gap-4">
-        <div className="space-y-2">
-          <Label htmlFor="industry">Industry</Label>
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select industry" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="fashion">Fashion</SelectItem>
-              <SelectItem value="tech">Technology</SelectItem>
-              <SelectItem value="food">Food & Beverage</SelectItem>
-              <SelectItem value="health">Health & Wellness</SelectItem>
-              <SelectItem value="beauty">Beauty</SelectItem>
-              <SelectItem value="entertainment">Entertainment</SelectItem>
-            </SelectContent>
-          </Select>
+    const InfluencerSocialMedia = () => (
+        <div className="space-y-4 p-4 border border-gray-300 rounded-md">
+            <div className="space-y-2">
+                <Label className="flex items-center gap-2">
+                    <Instagram className="h-5 w-5 text-pink-600" />
+                    Instagram Handle
+                </Label>
+                <Input placeholder="@username" className="border border-gray-300" />
+            </div>
+            <div className="space-y-2">
+                <Label className="flex items-center gap-2">
+                    <Youtube className="h-5 w-5 text-red-600" />
+                    YouTube Channel
+                </Label>
+                <Input placeholder="Channel URL" className="border border-gray-300" />
+            </div>
+            <div className="space-y-2">
+                <Label className="flex items-center gap-2">
+                    <Twitter className="h-5 w-5 text-blue-400" />
+                    Twitter Handle
+                </Label>
+                <Input placeholder="@username" className="border border-gray-300" />
+            </div>
+            <div className="space-y-2">
+                <Label className="flex items-center gap-2">
+                    <TikTok className="h-5 w-5" />
+                    TikTok Username
+                </Label>
+                <Input placeholder="@username" className="border border-gray-300" />
+            </div>
+            <div className="space-y-2">
+                <Label className="flex items-center gap-2">
+                    <Globe className="h-5 w-5 text-blue-500" />
+                    Personal Website
+                </Label>
+                <Input placeholder="https://" className="border border-gray-300" />
+            </div>
         </div>
-        <div className="space-y-2">
-          <Label htmlFor="size">Company Size</Label>
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select size" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="1-10">1-10 employees</SelectItem>
-              <SelectItem value="11-50">11-50 employees</SelectItem>
-              <SelectItem value="51-200">51-200 employees</SelectItem>
-              <SelectItem value="201-500">201-500 employees</SelectItem>
-              <SelectItem value="501+">501+ employees</SelectItem>
-            </SelectContent>
-          </Select>
+    );
+
+    const InfluencerAudience = () => (
+        <div className="space-y-4 p-4 border border-gray-300 rounded-md">
+            <div className="space-y-2">
+                <Label htmlFor="audienceSize">Total Audience Size</Label>
+                <Input
+                    id="audienceSize"
+                    type="number"
+                    placeholder="e.g., 100000"
+                    className="border border-gray-300"
+                />
+            </div>
+            <div className="space-y-2">
+                <Label htmlFor="avgEngagement">Average Engagement Rate (%)</Label>
+                <Input
+                    id="avgEngagement"
+                    type="number"
+                    step="0.01"
+                    placeholder="e.g., 3.5"
+                    className="border border-gray-300"
+                />
+            </div>
+            <div className="space-y-2">
+                <Label htmlFor="mainPlatform">Primary Platform</Label>
+                <Select>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select your main platform" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="instagram">Instagram</SelectItem>
+                        <SelectItem value="youtube">YouTube</SelectItem>
+                        <SelectItem value="tiktok">TikTok</SelectItem>
+                        <SelectItem value="twitter">Twitter</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+            <div className="space-y-2">
+                <Label htmlFor="audienceAge">Primary Audience Age Range</Label>
+                <Select>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select age range" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="13-17">13-17</SelectItem>
+                        <SelectItem value="18-24">18-24</SelectItem>
+                        <SelectItem value="25-34">25-34</SelectItem>
+                        <SelectItem value="35-44">35-44</SelectItem>
+                        <SelectItem value="45+">45+</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
         </div>
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="budget">Monthly Marketing Budget</Label>
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select budget range" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="0-5000">$0 - $5,000</SelectItem>
-            <SelectItem value="5001-10000">$5,001 - $10,000</SelectItem>
-            <SelectItem value="10001-50000">$10,001 - $50,000</SelectItem>
-            <SelectItem value="50001+">$50,001+</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    </div>
-  );
+    );
 
-  const BrandCampaignPreferences = () => (
-    <div className="space-y-4 p-4 border border-gray-300 rounded-md">
-      <div className="space-y-2">
-        <h3 className="text-lg font-medium text-gray-800 dark:text-gray-200">
-          Campaign Settings
-        </h3>
-        <Label htmlFor="targetAudience">Target Audience Age Range</Label>
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select target age range" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="13-17">13-17</SelectItem>
-            <SelectItem value="18-24">18-24</SelectItem>
-            <SelectItem value="25-34">25-34</SelectItem>
-            <SelectItem value="35-44">35-44</SelectItem>
-            <SelectItem value="45+">45+</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="preferredPlatforms">Preferred Platforms</Label>
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select primary platform" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="instagram">Instagram</SelectItem>
-            <SelectItem value="youtube">YouTube</SelectItem>
-            <SelectItem value="tiktok">TikTok</SelectItem>
-            <SelectItem value="twitter">Twitter</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="campaignGoals">Primary Campaign Goals</Label>
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select campaign goal" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="awareness">Brand Awareness</SelectItem>
-            <SelectItem value="sales">Direct Sales</SelectItem>
-            <SelectItem value="engagement">Community Engagement</SelectItem>
-            <SelectItem value="loyalty">Brand Loyalty</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    </div>
-  );
+    const BrandBasicDetails = () => (
+        <div className="space-y-4 p-4 border border-gray-300 dark:border-nightS rounded-md">
+            <div className="space-y-2">
+                <h3 className="text-lg font-medium text-gray-800 dark:text-nightTP">
+                    Brand Information
+                </h3>
+                <Label htmlFor="companyName" className="dark:text-nightTS">Company Name</Label>
+                <Input id="companyName" placeholder="Brand Inc." className="dark:bg-[#364152] mt-1" />
+            </div>
+            <div className="space-y-2">
+                <Label htmlFor="website" className="dark:text-nightTS">Company Website</Label>
+                <Input id="website" type="url" placeholder="https://www.example.com" className="dark:bg-[#364152] mt-1" />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                    <Label htmlFor="industry" className="dark:text-nightTS">Industry</Label>
+                    <Select>
+                        <SelectTrigger className="dark:bg-[#364152]">
+                            <SelectValue placeholder="Select industry" className="dark:text-nightTS dark:bg-[#364152] mt-1" />
+                        </SelectTrigger>
+                        <SelectContent className="dark:bg-[#364152]">
+                            <SelectItem value="fashion" className="dark:text-nightTS">Fashion</SelectItem>
+                            <SelectItem value="tech" className="dark:text-nightTS">Technology</SelectItem>
+                            <SelectItem value="food" className="dark:text-nightTS">Food & Beverage</SelectItem>
+                            <SelectItem value="health" className="dark:text-nightTS">Health & Wellness</SelectItem>
+                            <SelectItem value="beauty" className="dark:text-nightTS">Beauty</SelectItem>
+                            <SelectItem value="entertainment" className="dark:text-nightTS">Entertainment</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <div className="space-y-2">
+                    <Label htmlFor="size">Company Size</Label>
+                    <Select>
+                        <SelectTrigger className="dark:bg-[#364152]">
+                            <SelectValue placeholder="Select size" className="dark:text-nightTS dark:bg-[#364152] mt-1" />
+                        </SelectTrigger>
+                        <SelectContent className="dark:bg-[#364152]">
+                            <SelectItem value="1-10" className="dark:text-nightTS">1-10 employees</SelectItem>
+                            <SelectItem value="11-50" className="dark:text-nightTS">11-50 employees</SelectItem>
+                            <SelectItem value="51-200" className="dark:text-nightTS">51-200 employees</SelectItem>
+                            <SelectItem value="201-500" className="dark:text-nightTS">201-500 employees</SelectItem>
+                            <SelectItem value="501+" className="dark:text-nightTS">501+ employees</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+            <div className="space-y-2">
+                <Label htmlFor="budget" className="dark:text-nightTS">Monthly Marketing Budget</Label>
+                <Select>
+                    <SelectTrigger className="dark:bg-[#364152]">
+                        <SelectValue placeholder="Select budget range" className="dark:text-nightTS dark:bg-[#364152] mt-1" />
+                    </SelectTrigger>
+                    <SelectContent className="dark:bg-[#364152]">
+                        <SelectItem value="0-5000" className="dark:text-nightTS">$0 - $5,000</SelectItem>
+                        <SelectItem value="5001-10000" className="dark:text-nightTS">$5,001 - $10,000</SelectItem>
+                        <SelectItem value="10001-50000" className="dark:text-nightTS">$10,001 - $50,000</SelectItem>
+                        <SelectItem value="50001+" className="dark:text-nightTS">$50,001+</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+        </div>
+    );
 
-  const getStepContent = () => {
-    if (user === "influencer") {
-      switch (step) {
-        case 0:
-          return {
-            title: "Basic Details",
-            description: "Let's start with your personal information",
-            content: <InfluencerBasicDetails />,
-          };
-        case 1:
-          return {
-            title: "Social Media Profiles",
-            description: "Connect your social media accounts",
-            content: <InfluencerSocialMedia />,
-          };
-        case 2:
-          return {
-            title: "Audience Information",
-            description: "Tell us about your audience and engagement",
-            content: <InfluencerAudience />,
-          };
-      }
-    } else {
-      switch (step) {
-        case 0:
-          return {
-            title: "Company Information",
-            description: "Tell us about your brand",
-            content: <BrandBasicDetails />,
-          };
-        case 1:
-          return {
-            title: "Campaign Preferences",
-            description: "Define your target audience and campaign goals",
-            content: <BrandCampaignPreferences />,
-          };
-      }
-    }
-  };
+    const BrandCampaignPreferences = () => (
+        <div className="space-y-4 p-4 border border-gray-300 dark:border-nightTS rounded-md">
+            <div className="space-y-2">
+                <h3 className="text-lg font-medium text-gray-800 dark:text-nightTP">
+                    Campaign Settings
+                </h3>
+                <Label htmlFor="targetAudience">Target Audience Age Range</Label>
+                <Select>
+                    <SelectTrigger className="dark:bg-[#364152]">
+                        <SelectValue placeholder="Select target age range" className="dark:text-nightTS dark:bg-[#364152] mt-1" />
+                    </SelectTrigger>
+                    <SelectContent className="dark:bg-[#364152]">
+                        <SelectItem value="13-17" className="dark:text-nightTS">13-17</SelectItem>
+                        <SelectItem value="18-24" className="dark:text-nightTS">18-24</SelectItem>
+                        <SelectItem value="25-34" className="dark:text-nightTS">25-34</SelectItem>
+                        <SelectItem value="35-44" className="dark:text-nightTS">35-44</SelectItem>
+                        <SelectItem value="45+" className="dark:text-nightTS">45+</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+            <div className="space-y-2">
+                <Label htmlFor="preferredPlatforms">Preferred Platforms</Label>
+                <Select>
+                    <SelectTrigger className="dark:bg-[#364152]">
+                        <SelectValue placeholder="Select primary platform" className="dark:text-nightTS dark:bg-[#364152] mt-1" />
+                    </SelectTrigger>
+                    <SelectContent className="dark:bg-[#364152]">
+                        <SelectItem value="instagram" className="dark:text-nightTS">Instagram</SelectItem>
+                        <SelectItem value="youtube" className="dark:text-nightTS">YouTube</SelectItem>
+                        <SelectItem value="tiktok" className="dark:text-nightTS">TikTok</SelectItem>
+                        <SelectItem value="twitter" className="dark:text-nightTS">Twitter</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+            <div className="space-y-2">
+                <Label htmlFor="campaignGoals">Primary Campaign Goals</Label>
+                <Select>
+                    <SelectTrigger className="dark:bg-[#364152]">
+                        <SelectValue placeholder="Select campaign goal" className="dark:text-nightTS dark:bg-[#364152] mt-1" />
+                    </SelectTrigger>
+                    <SelectContent className="dark:bg-[#364152]">
+                        <SelectItem value="awareness" className="dark:text-nightTS">Brand Awareness</SelectItem>
+                        <SelectItem value="sales" className="dark:text-nightTS">Direct Sales</SelectItem>
+                        <SelectItem value="engagement" className="dark:text-nightTS">Community Engagement</SelectItem>
+                        <SelectItem value="loyalty" className="dark:text-nightTS">Brand Loyalty</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+        </div>
+    );
 
-  const currentStep = getStepContent();
-  const variants = {
-    enter: (direction: number) => {
-      return {
-        x: direction > 0 ? 300 : -300,
-        opacity: 0,
-      };
-    },
-    center: {
-      x: 0,
-      opacity: 1,
-    },
-    exit: (direction: number) => {
-      return {
-        x: direction < 0 ? 300 : -300,
-        opacity: 0,
-      };
-    },
-  };
+    const getStepContent = () => {
+        if (user === "influencer") {
+            switch (step) {
+                case 0:
+                    return {
+                        title: "Basic Details",
+                        description: "Let's start with your personal information",
+                        content: <InfluencerBasicDetails />,
+                    };
+                case 1:
+                    return {
+                        title: "Social Media Profiles",
+                        description: "Connect your social media accounts",
+                        content: <InfluencerSocialMedia />,
+                    };
+                case 2:
+                    return {
+                        title: "Audience Information",
+                        description: "Tell us about your audience and engagement",
+                        content: <InfluencerAudience />,
+                    };
+            }
+        } else {
+            switch (step) {
+                case 0:
+                    return {
+                        title: "Company Information",
+                        description: "Tell us about your brand",
+                        content: <BrandBasicDetails />,
+                    };
+                case 1:
+                    return {
+                        title: "Campaign Preferences",
+                        description: "Define your target audience and campaign goals",
+                        content: <BrandCampaignPreferences />,
+                    };
+            }
+        }
+    };
 
-  const resetForm = () => {
-    setStep(0);
-    setAnimationDirection(0);
+    const currentStep = getStepContent();
+    const variants = {
+        enter: (direction: number) => {
+            return {
+                x: direction > 0 ? 300 : -300,
+                opacity: 0,
+            };
+        },
+        center: {
+            x: 0,
+            opacity: 1,
+        },
+        exit: (direction: number) => {
+            return {
+                x: direction < 0 ? 300 : -300,
+                opacity: 0,
+            };
+        },
+    };
 
-    document.querySelectorAll("input").forEach((input) => (input.value = ""));
-    document
-      .querySelectorAll("select")
-      .forEach((select) => (select.value = ""));
-  };
+    const resetForm = () => {
+        setStep(0);
+        setAnimationDirection(0);
 
-  return (
-    <>
-      <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800">
-        <div className="flex justify-between items-center p-6">
-          <Link
-            to="/"
-            className="flex items-center space-x-2 transition-transform duration-200 hover:scale-105"
-          >
-            <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-            <span className="font-bold text-xl text-gray-900 dark:text-white">
-              Inpact
-            </span>
-          </Link>
-          <div className="hidden md:flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-300">
-            <span>Need help?</span>
-            <Link
-              to="/support"
-              className="text-purple-600 hover:text-purple-700 dark:text-purple-400 transition-colors duration-200"
-            >
-              Contact support
-            </Link>
-          </div>
-        </div>
+        document.querySelectorAll("input").forEach((input) => (input.value = ""));
+        document
+            .querySelectorAll("select")
+            .forEach((select) => (select.value = ""));
+    };
 
-        <div className="flex-1 flex items-center justify-center p-6">
-          <div className="w-full max-w-4xl">
-            <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl border border-gray-200 dark:border-gray-700">
-              <div className="p-8">
-                {/* Progress indicator */}
-                <div className="mb-8">
-                  <div className="flex items-center justify-between mb-2">
-                    <h2 className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                      Step {step + 1} of {totalSteps}
-                    </h2>
-                    <span className="text-sm text-gray-500 dark:text-gray-400">
-                      {Math.round(((step + 1) / totalSteps) * 100)}% Complete
-                    </span>
-                  </div>
-                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
-                    <motion.div
-                      className="bg-purple-600 dark:bg-purple-500 h-2.5 rounded-full"
-                      initial={{ width: `${(step / totalSteps) * 100}%` }}
-                      animate={{ width: `${((step + 1) / totalSteps) * 100}%` }}
-                      transition={{ duration: 0.3, ease: "easeInOut" }}
-                    />
-                  </div>
-                  <div className="flex justify-between">
-                    {Array.from({ length: totalSteps }).map((_, index) => (
-                      <div
-                        key={index}
-                        className={`flex flex-col items-center ${
-                          index <= step
-                            ? "text-purple-600 dark:text-purple-400"
-                            : "text-gray-400 dark:text-gray-600"
-                        }`}
-                      >
-                        <div
-                          className={`w-8 h-8 rounded-full border-2 flex items-center justify-center mb-1
-                        ${
-                          index < step
-                            ? "bg-purple-600 dark:bg-purple-500 border-purple-600 dark:border-purple-500"
-                            : index === step
-                            ? "border-purple-600 dark:border-purple-400"
-                            : "border-gray-300 dark:border-gray-600"
-                        }`}
+    return (
+        <>
+            <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-50 to-indigo-50 dark:bg-nightP">
+                <div className="flex justify-between items-center p-6 dark:bg-nightP">
+                    <Link
+                        to="/"
+                        className="flex items-center space-x-2 transition-transform duration-200 hover:scale-105"
+                    >
+                        <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+                        <span className="font-bold text-xl text-gray-900 dark:text-white">
+                            Inpact
+                        </span>
+                    </Link>
+                    <div className="hidden md:flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-300">
+                        <span>Need help?</span>
+                        <Link
+                            to="/support"
+                            className="text-purple-600 hover:text-purple-700 dark:text-purple-400 transition-colors duration-200"
                         >
-                          {index < step ? (
-                            <Check className="h-4 w-4 text-white" />
-                          ) : (
-                            <span
-                              className={
-                                index === step
-                                  ? "text-purple-600 dark:text-purple-400"
-                                  : "text-gray-400 dark:text-gray-600"
-                              }
-                            >
-                              {index + 1}
-                            </span>
-                          )}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
+                            Contact support
+                        </Link>
+                    </div>
                 </div>
 
-                <Card className="w-full border border-gray-300 dark:border-gray-600">
-                  <CardHeader className="border-b border-gray-200 dark:border-gray-700">
-                    <CardTitle className="text-2xl">
-                      {currentStep?.title}
-                    </CardTitle>
-                    <CardDescription>
-                      {currentStep?.description}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-6 pt-6">
-                    <AnimatePresence mode="wait" custom={animationDirection}>
-                      <motion.div
-                        key={step}
-                        custom={animationDirection}
-                        variants={variants}
-                        initial="enter"
-                        animate="center"
-                        exit="exit"
-                        transition={{
-                          x: { type: "spring", stiffness: 300, damping: 30 },
-                          opacity: { duration: 0.2 },
-                        }}
-                      >
-                        {currentStep?.content}
-                      </motion.div>
-                    </AnimatePresence>
+                <div className="flex-1 flex items-center justify-center p-6 dark:bg-nightP dark:text-nightTS">
+                    <div className="w-full max-w-4xl">
+                        <div className="bg-white dark:bg-nightS rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl border border-gray-200 dark:border-nightS">
+                            <div className="p-8">
+                                {/* Progress indicator */}
+                                <div className="mb-8">
+                                    <div className="flex items-center justify-between mb-2">
+                                        <h2 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                                            Step {step + 1} of {totalSteps}
+                                        </h2>
+                                        <span className="text-sm text-gray-500 dark:text-gray-400">
+                                            {Math.round(((step + 1) / totalSteps) * 100)}% Complete
+                                        </span>
+                                    </div>
+                                    <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
+                                        <motion.div
+                                            className="bg-purple-600 dark:bg-purple-500 h-2.5 rounded-full"
+                                            initial={{ width: `${(step / totalSteps) * 100}%` }}
+                                            animate={{ width: `${((step + 1) / totalSteps) * 100}%` }}
+                                            transition={{ duration: 0.3, ease: "easeInOut" }}
+                                        />
+                                    </div>
+                                    <div className="flex justify-between">
+                                        {Array.from({ length: totalSteps }).map((_, index) => (
+                                            <div
+                                                key={index}
+                                                className={`flex flex-col items-center ${index <= step
+                                                        ? "text-purple-600 dark:text-purple-400"
+                                                        : "text-gray-400 dark:text-gray-600"
+                                                    }`}
+                                            >
+                                                <div
+                                                    className={`w-8 h-8 rounded-full border-2 flex items-center justify-center mb-1
+                        ${index < step
+                                                            ? "bg-purple-600 dark:bg-purple-500 border-purple-600 dark:border-purple-500"
+                                                            : index === step
+                                                                ? "border-purple-600 dark:border-purple-400"
+                                                                : "border-gray-300 dark:border-gray-600"
+                                                        }`}
+                                                >
+                                                    {index < step ? (
+                                                        <Check className="h-4 w-4 text-white" />
+                                                    ) : (
+                                                        <span
+                                                            className={
+                                                                index === step
+                                                                    ? "text-purple-600 dark:text-purple-400"
+                                                                    : "text-gray-400 dark:text-gray-600"
+                                                            }
+                                                        >
+                                                            {index + 1}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
 
-                    <div className="flex justify-between pt-6 mt-6 border-t border-gray-200 dark:border-gray-700">
-                      <Button
-                        variant="outline"
-                        onClick={prevStep}
-                        disabled={step === 0}
-                        className="border border-gray-300 dark:border-gray-600 transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-700"
-                      >
-                        <ChevronLeft className="mr-2 h-4 w-4" />
-                        Back
-                      </Button>
+                                <Card className="w-full border border-gray-300 dark:border-nightS dark:bg-nightS">
+                                    <CardHeader className="border-b border-gray-200 dark:border-gray-700">
+                                        <CardTitle className="text-2xl dark:text-nightTP">
+                                            {currentStep?.title}
+                                        </CardTitle>
+                                        <CardDescription>
+                                            {currentStep?.description}
+                                        </CardDescription>
+                                    </CardHeader>
+                                    <CardContent className="space-y-6 pt-6">
+                                        <AnimatePresence mode="wait" custom={animationDirection}>
+                                            <motion.div
+                                                key={step}
+                                                custom={animationDirection}
+                                                variants={variants}
+                                                initial="enter"
+                                                animate="center"
+                                                exit="exit"
+                                                transition={{
+                                                    x: { type: "spring", stiffness: 300, damping: 30 },
+                                                    opacity: { duration: 0.2 },
+                                                }}
+                                            >
+                                                {currentStep?.content}
+                                            </motion.div>
+                                        </AnimatePresence>
 
-                      <div className="flex items-center space-x-2">
-                        <div className="flex space-x-1">
-                          {Array.from({ length: totalSteps }).map(
-                            (_, index) => (
-                              <div
-                                key={index}
-                                className={`h-2 w-2 rounded-full transition-all duration-300 ${
-                                  index === step
-                                    ? "w-4 bg-purple-600 dark:bg-purple-400"
-                                    : "bg-gray-300 dark:bg-gray-600"
-                                }`}
-                              />
-                            )
-                          )}
-                        </div>
-                      </div>
+                                        <div className="flex justify-between pt-6 mt-6 border-t border-gray-200 dark:border-gray-700">
+                                            <Button
+                                                variant="outline"
+                                                onClick={prevStep}
+                                                disabled={step === 0}
+                                                className="border border-gray-300 dark:border-gray-600 transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-700"
+                                            >
+                                                <ChevronLeft className="mr-2 h-4 w-4" />
+                                                Back
+                                            </Button>
 
-                      <Button
-                        className="bg-purple-700 hover:bg-purple-800 border border-purple-800 transition-all duration-200 transform hover:scale-105 text-white"
-                        onClick={nextStep}
-                        disabled={
-                          (user === "influencer" && step === 2) ||
-                          (user === "brand" && step === 1)
-                        }
-                      >
-                        {step === totalSteps - 1 ? "Complete" : "Next"}
-                        <ChevronRight className="ml-2 h-4 w-4" />
-                      </Button>
-                    </div>
-                  </CardContent>
-                </Card>
+                                            <div className="flex items-center space-x-2">
+                                                <div className="flex space-x-1">
+                                                    {Array.from({ length: totalSteps }).map(
+                                                        (_, index) => (
+                                                            <div
+                                                                key={index}
+                                                                className={`h-2 w-2 rounded-full transition-all duration-300 ${index === step
+                                                                        ? "w-4 bg-purple-600 dark:bg-purple-400"
+                                                                        : "bg-gray-300 dark:bg-gray-600"
+                                                                    }`}
+                                                            />
+                                                        )
+                                                    )}
+                                                </div>
+                                            </div>
 
-                <div className="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
-                  <p>
-                    Need to start over?{" "}
-                    <button
-                      onClick={resetForm}
-                      className="text-purple-600 hover:text-purple-700 dark:text-purple-400 transition-colors"
-                    >
-                      Reset form
-                    </button>
-                  </p>
+                                            <Button
+                                                className="bg-purple-700 hover:bg-purple-800 border border-purple-800 transition-all duration-200 transform hover:scale-105 text-white"
+                                                onClick={nextStep}
+                                                disabled={
+                                                    (user === "influencer" && step === 2) ||
+                                                    (user === "brand" && step === 1)
+                                                }
+                                            >
+                                                {step === totalSteps - 1 ? "Complete" : "Next"}
+                                                <ChevronRight className="ml-2 h-4 w-4" />
+                                            </Button>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+
+                                <div className="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
+                                    <p>
+                                        Need to start over?{" "}
+                                        <button
+                                            onClick={resetForm}
+                                            className="text-purple-600 hover:text-purple-700 dark:text-purple-400 transition-colors"
+                                        >
+                                            Reset form
+                                        </button>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
             </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
+        </>
+    );
 }
diff --git a/Frontend/src/pages/Brand/Dashboard.tsx b/Frontend/src/pages/Brand/Dashboard.tsx
index d2b4dcd..c1bbb35 100644
--- a/Frontend/src/pages/Brand/Dashboard.tsx
+++ b/Frontend/src/pages/Brand/Dashboard.tsx
@@ -37,14 +37,14 @@ import {
 const Dashboard = () => {
   return (
     <>
-      <div className="min-h-screen bg-gray-50">
+      <div className="min-h-screen bg-gray-50  dark:bg-nightP">
         {/* Navigation */}
-        <nav className="border-neutral-200 bg-white">
+        <nav className="border-neutral-200 bg-white dark:bg-nightS dark:text-nightTS">
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="flex h-16 items-center justify-between">
               <div className="flex items-center">
                 <Rocket className="h-8 w-8 text-purple-700" />
-                <span className="ml-2 text-xl font-bold text-black">
+                <span className="ml-2 text-xl font-bold text-black dark:text-nightTP">
                   Inpact
                 </span>
                 <span className="ml-1 mb-3 text-sm font-medium text-purple-500">
@@ -53,40 +53,40 @@ const Dashboard = () => {
               </div>
               <div className="flex items-center gap-4">
                 <div className="relative">
-                  <Bell className="h-6 w-6 text-gray-500 hover:text-purple-700 cursor-pointer" />
+                  <Bell className="h-6 w-6 text-gray-500 hover:text-purple-700 cursor-pointer dark:text-nightTS" />
                   <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-purple-700 text-[10px] font-bold text-white flex items-center justify-center">
                     3
                   </span>
                 </div>
-                <UserCircle className="h-8 w-8 text-gray-500 hover:text-purple-700 cursor-pointer" />
+                <UserCircle className="h-8 w-8 text-gray-500 hover:text-purple-700 cursor-pointer dark:text-nightTS" />
               </div>
             </div>
           </div>
         </nav>
 
-        <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
+        <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 dark:bg-nightP dark:text-nightTS">
           {/* Header */}
           <div className="mb-8">
-            <h1 className="text-3xl font-bold text-gray-900">
+            <h1 className="text-3xl font-bold  text-gray-900 dark:text-nightTP">
               Brand Dashboard
             </h1>
-            <p className="mt-2 text-gray-600">
+            <p className="mt-2 text-gray-600 dark:text-nightTS">
               Discover and collaborate with creators that match your brand
             </p>
           </div>
 
           {/* Search */}
           <div className="relative mb-8">
-            <Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400 border-neutral-200" />
+            <Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400 border-neutral-200 dark:border-none" />
             <Input
-              className="pl-10 border border-gray-300"
+              className="pl-10 border border-gray-300 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-200 dark:border-none"
               placeholder="Search creators by niche, audience size, or location..."
             />
           </div>
 
           {/* Main Content */}
           <Tabs defaultValue="discover" className="space-y-8">
-            <TabsList className="bg-white border border-gray-300">
+            <TabsList className="bg-white border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
               <TabsTrigger value="discover">Discover</TabsTrigger>
               <TabsTrigger value="contracts">Contracts</TabsTrigger>
               <TabsTrigger value="messages">Messages</TabsTrigger>
@@ -97,7 +97,7 @@ const Dashboard = () => {
             <TabsContent value="discover" className="space-y-8">
               {/* Stats */}
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-                <Card className="border border-gray-300">
+                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 ">
                     <CardTitle className="text-sm font-medium">
                       Active Creators
@@ -111,7 +111,7 @@ const Dashboard = () => {
                     </p>
                   </CardContent>
                 </Card>
-                <Card className="border border-gray-300">
+                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                     <CardTitle className="text-sm font-medium">
                       Avg. Engagement
@@ -125,7 +125,7 @@ const Dashboard = () => {
                     </p>
                   </CardContent>
                 </Card>
-                <Card className="border border-gray-300">
+                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                     <CardTitle className="text-sm font-medium">
                       Active Campaigns
@@ -139,7 +139,7 @@ const Dashboard = () => {
                     </p>
                   </CardContent>
                 </Card>
-                <Card className="border border-gray-300">
+                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                     <CardTitle className="text-sm font-medium">
                       Messages
@@ -158,14 +158,14 @@ const Dashboard = () => {
               {/* Creator Recommendations */}
               <div className="space-y-4">
                 <div className="flex items-center justify-between">
-                  <h2 className="text-xl font-semibold text-gray-900">
+                  <h2 className="text-xl font-semibold text-gray-900  dark:text-nightTP">
                     Recommended Creators
                   </h2>
-                  <Button variant="default">View All</Button>
+                  <Button className="bg-purple-600 text-white hover:bg-purple-700">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">
+                    <Card key={i} className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
                       <CardContent className="p-6">
                         <div className="flex items-center gap-4">
                           <img
@@ -174,7 +174,7 @@ const Dashboard = () => {
                             className="h-16 w-16 rounded-full object-cover"
                           />
                           <div>
-                            <h3 className="font-semibold text-gray-900">
+                            <h3 className="font-semibold text-gray-900 dark:text-nightTP">
                               Sarah Parker
                             </h3>
                             <p className="text-sm text-gray-500">
@@ -205,7 +205,7 @@ const Dashboard = () => {
             {/* Contracts Tab */}
             <TabsContent value="contracts" className="space-y-6">
               <div className="flex justify-between items-center">
-                <h2 className="text-xl font-semibold text-gray-900">
+                <h2 className="text-xl font-semibold text-gray-900  dark:text-nightTP">
                   Active Contracts
                 </h2>
                 <Button className="bg-purple-700 hover:bg-purple-800 text-white">
@@ -218,7 +218,7 @@ const Dashboard = () => {
                 {[1, 2, 3].map((i) => (
                   <div
                     key={i}
-                    className="bg-white p-6 rounded-lg shadow-sm border border-gray-300"
+                    className="bg-white p-6 rounded-lg shadow-sm border border-gray-300  dark:border-nightS dark:bg-nightS dark:text-nightTS"
                   >
                     <div className="flex justify-between items-start">
                       <div className="flex gap-4">
@@ -228,36 +228,36 @@ const Dashboard = () => {
                           className="h-12 w-12 rounded-full object-cover"
                         />
                         <div>
-                          <h3 className="font-semibold text-gray-900">
+                          <h3 className="font-semibold text-gray-900  dark:text-nightTP">
                             Summer Collection Campaign
                           </h3>
-                          <p className="text-sm text-gray-500">
+                          <p className="text-sm text-gray-500 dark:text-nightTS">
                             with Alex Rivera
                           </p>
                           <div className="flex items-center gap-2 mt-2">
                             <Clock className="h-4 w-4 text-gray-400" />
-                            <span className="text-sm text-gray-500">
+                            <span className="text-sm text-gray-500 dark:text-nightTS">
                               Due in 12 days
                             </span>
                           </div>
                         </div>
                       </div>
                       <div className="flex flex-col items-end">
-                        <span className="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700">
+                        <span className="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 dark:bg-green-900 dark:text-green-300">
                           Active
                         </span>
-                        <p className="mt-2 text-sm font-medium text-gray-900">
+                        <p className="mt-2 text-sm font-medium text-gray-900 dark:text-nightTP">
                           $2,400
                         </p>
                       </div>
                     </div>
                     <div className="mt-4 flex justify-between items-center">
                       <div className="flex gap-4">
-                        <Button variant="default" size="sm">
+                        <Button variant="default" size="sm" className="dark:bg-[#364152] dark:text-nightTS">
                           <FileText className="mr-2 h-4 w-4" />
                           View Contract
                         </Button>
-                        <Button variant="default" size="sm">
+                        <Button variant="default" size="sm" className="dark:bg-[#364152] dark:text-nightTS">
                           <MessageSquareMore className="mr-2 h-4 w-4" />
                           Message
                         </Button>
@@ -272,7 +272,7 @@ const Dashboard = () => {
             {/* Messages Tab */}
             <TabsContent
               value="messages"
-              //  className="grid grid-cols-12 gap-6"
+            //    className="grid grid-cols-12 gap-6"
             >
               <Chat />
             </TabsContent>
@@ -280,7 +280,7 @@ const Dashboard = () => {
             {/* Tracking Tab */}
             <TabsContent value="tracking" className="space-y-6">
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-                <Card className="border border-gray-300">
+                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                     <CardTitle className="text-sm font-medium">
                       Total Reach
@@ -294,7 +294,7 @@ const Dashboard = () => {
                     </p>
                   </CardContent>
                 </Card>
-                <Card className="border border-gray-300">
+                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                     <CardTitle className="text-sm font-medium">
                       Engagement Rate
@@ -308,7 +308,7 @@ const Dashboard = () => {
                     </p>
                   </CardContent>
                 </Card>
-                <Card className="border border-gray-300">
+                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                     <CardTitle className="text-sm font-medium">ROI</CardTitle>
                     <LineChart className="h-4 w-4 text-purple-700" />
@@ -320,7 +320,7 @@ const Dashboard = () => {
                     </p>
                   </CardContent>
                 </Card>
-                <Card className="border border-gray-300">
+                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                     <CardTitle className="text-sm font-medium">
                       Active Posts
@@ -336,7 +336,7 @@ const Dashboard = () => {
                 </Card>
               </div>
 
-              <div className="bg-white rounded-lg p-6 border border-gray-300">
+              <div className="bg-white rounded-lg p-6 border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
                 <h3 className="text-lg font-semibold mb-4">
                   Campaign Performance
                 </h3>
diff --git a/Frontend/src/pages/Collaborations.tsx b/Frontend/src/pages/Collaborations.tsx
index fed0781..6ca5b47 100644
--- a/Frontend/src/pages/Collaborations.tsx
+++ b/Frontend/src/pages/Collaborations.tsx
@@ -4,7 +4,7 @@ import { UserNav } from "../components/user-nav"
 import { Button } from "../components/ui/button"
 import { Input } from "../components/ui/input"
 import { BarChart3, Briefcase, FileText, LayoutDashboard, MessageSquare, Rocket, Search, Users } from "lucide-react"
-import {Link} from "react-router-dom"
+import { Link } from "react-router-dom"
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar"
 import { Badge } from "../components/ui/badge"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs"
@@ -12,302 +12,316 @@ import { Label } from "../components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select"
 
 export default function CollaborationsPage() {
-  return (
-    <div className="flex min-h-screen flex-col bg-white text-gray-900">
-      <header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60">
-      <div className="container flex h-16 items-center">
-          <Link to="/" className="flex items-center space-x-2 mr-6  ml-6">
-            <Rocket className="h-6 w-6 text-[hsl(262.1,83.3%,57.8%)]" />
-            <span className="font-bold text-xl hidden md:inline-block">Inpact</span>
-          </Link>
-          <div className="flex items-center space-x-4">
-  {[
-    { to: "/dashboard", icon: LayoutDashboard, label: "Dashboard" },
-    { to: "/dashboard/sponsorships", icon: Briefcase, label: "Sponsorships" },
-    { to: "/dashboard/collaborations", icon: Users, label: "Collaborations" },
-    { to: "/dashboard/contracts", icon: FileText, label: "Contracts" },
-    { to: "/dashboard/analytics", icon: BarChart3, label: "Analytics" },
-    { to: "/dashboard/messages", icon: MessageSquare, label: "Messages" },
-  ].map(({ to, icon: Icon, label }) => (
-    <Button
-      key={to}
-      variant="ghost"
-      size="sm"
-      className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]"
-      asChild
-    >
-      <Link to={to}>
-        <Icon className="h-5 w-5" />
-        <span className="sr-only">{label}</span>
-      </Link>
-    </Button>
-  ))}
-</div>
-<div className="ml-auto flex items-center space-x-4">
-  <div className="relative hidden md:flex">
-    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-[hsl(215.4,16.3%,46.9%)]" />
-    <Input
-      type="search"
-      placeholder="Search..."
-      className="w-[200px] pl-8 md:w-[300px] rounded-full bg-[hsl(210,40%,96.1%)] border-[hsl(214.3,31.8%,91.4%)]"
-    />
-  </div>
-  <ModeToggle />
-  <UserNav />
-</div>
-        </div>
-      </header>
-      <main className="flex-1 space-y-4 p-4 md:p-8 pt-6">
-        <div className="flex items-center justify-between">
-          <h1 className="text-3xl font-bold tracking-tight text-gray-900">Creator Collaboration Hub</h1>
-          <div className="flex items-center space-x-2">
-            <Button className="bg-purple-600 text-white hover:bg-purple-700">
-              <Users className="mr-2 h-4 w-4" />
-              Find Collaborators
-            </Button>
-          </div>
-        </div>
+    return (
+        <div className="flex min-h-screen flex-col bg-white text-gray-900 dark:text-nightTS dark:bg-nightP">
+            <header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:bg-nightP dark:text-nightTS dark:border-nightS">
+                <div className="container flex h-16 items-center">
+                    <Link to="/" className="flex items-center space-x-2 mr-6 ml-6">
+                        <Rocket className="h-6 w-6 text-purple-600" />
+                        <span className="font-bold text-xl hidden md:inline-block dark:text-nightTP">Inpact</span>
+                    </Link>
+                    <div className="flex items-center space-x-4">
+                        <Button variant="ghost" size="sm" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]" asChild>
+                            <Link to="/dashboard">
+                                <LayoutDashboard className="h-5 w-5" />
+                                <span className="sr-only">Dashboard</span>
+                            </Link>
+                        </Button>
+                        <Button variant="ghost" size="sm" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]" asChild>
+                            <Link to="/dashboard/sponsorships">
+                                <Briefcase className="h-5 w-5" />
+                                <span className="sr-only">Sponsorships</span>
+                            </Link>
+                        </Button>
+                        <Button variant="ghost" size="sm" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]" asChild>
+                            <Link to="/dashboard/collaborations">
+                                <Users className="h-5 w-5" />
+                                <span className="sr-only">Collaborations</span>
+                            </Link>
+                        </Button>
+                        <Button variant="ghost" size="sm" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]" asChild>
+                            <Link to="/dashboard/contracts">
+                                <FileText className="h-5 w-5" />
+                                <span className="sr-only">Contracts</span>
+                            </Link>
+                        </Button>
+                        <Button variant="ghost" size="sm" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]" asChild>
+                            <Link to="/dashboard/analytics">
+                                <BarChart3 className="h-5 w-5" />
+                                <span className="sr-only">Analytics</span>
+                            </Link>
+                        </Button>
+                        <Button variant="ghost" size="sm" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]" asChild>
+                            <Link to="/dashboard/messages">
+                                <MessageSquare className="h-5 w-5" />
+                                <span className="sr-only">Messages</span>
+                            </Link>
+                        </Button>
+                    </div>
+                    <div className="ml-auto flex items-center space-x-3">
+                        <div className="relative hidden md:flex">
+                            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS" />
+                            <Input
+                                type="search"
+                                placeholder="Search..."
+                                className="w-[200px] pl-8 md:w-[300px] rounded-full bg-[hsl(210,40%,96.1%)] border-[hsl(214.3,31.8%,91.4%)] dark:bg-[#364152] dark:border-nightP" />
+                        </div>
+                        <ModeToggle />
+                        <UserNav />
+                    </div>
+                </div>
+            </header>
+            <main className="flex-1 space-y-4 p-4 md:p-8 pt-6 dark:text-nightTP dark:bg-nightP">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-nightTP">Creator Collaboration Hub</h1>
+                    <div className="flex items-center space-x-2">
+                        <Button className="bg-purple-600 text-white hover:bg-purple-700">
+                            <Users className="mr-2 h-4 w-4" />
+                            Find Collaborators
+                        </Button>
+                    </div>
+                </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <Card className="md:col-span-1">
-            <CardHeader>
-              <CardTitle className="text-gray-900">Filters</CardTitle>
-              <CardDescription className="text-gray-600">Find your ideal collaborators</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="niche" className="text-gray-900">Content Niche</Label>
-                <Select defaultValue="all">
-                  <SelectTrigger id="niche" className="bg-gray-100">
-                    <SelectValue placeholder="Select niche" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Niches</SelectItem>
-                    <SelectItem value="fashion">Fashion</SelectItem>
-                    <SelectItem value="tech">Technology</SelectItem>
-                    <SelectItem value="beauty">Beauty</SelectItem>
-                    <SelectItem value="fitness">Fitness</SelectItem>
-                    <SelectItem value="food">Food</SelectItem>
-                    <SelectItem value="travel">Travel</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    <Card className="md:col-span-1">
+                        <CardHeader>
+                            <CardTitle className="text-gray-900 dark:text-nightTP">Filters</CardTitle>
+                            <CardDescription className="text-gray-600 dark:text-nightTS">Find your ideal collaborators</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="niche" className="text-gray-900 dark:text-nightTP">Content Niche</Label>
+                                <Select defaultValue="all">
+                                    <SelectTrigger id="niche" className="bg-gray-100 dark:bg-[#364152] dark:border-nightP">
+                                        <SelectValue placeholder="Select niche" />
+                                    </SelectTrigger>
+                                    <SelectContent className="bg-white dark:bg-[#364152] dark:border-nightP">
+                                        <SelectItem value="all" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">All Niches</SelectItem>
+                                        <SelectItem value="fashion" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Fashion</SelectItem>
+                                        <SelectItem value="tech" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Technology</SelectItem>
+                                        <SelectItem value="beauty" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Beauty</SelectItem>
+                                        <SelectItem value="fitness" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Fitness</SelectItem>
+                                        <SelectItem value="food" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Food</SelectItem>
+                                        <SelectItem value="travel" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Travel</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="audience-size" className="text-gray-900">Audience Size</Label>
-                <Select defaultValue="all">
-                  <SelectTrigger id="audience-size" className="bg-gray-100">
-                    <SelectValue placeholder="Select size" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Sizes</SelectItem>
-                    <SelectItem value="micro">Micro (10K-50K)</SelectItem>
-                    <SelectItem value="mid">Mid-tier (50K-500K)</SelectItem>
-                    <SelectItem value="macro">Macro (500K-1M)</SelectItem>
-                    <SelectItem value="mega">Mega (1M+)</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="audience-size" className="text-gray-900 dark:text-nightTP">Audience Size</Label>
+                                <Select defaultValue="all">
+                                    <SelectTrigger id="audience-size" className="bg-gray-100 dark:bg-[#364152] dark:border-nightP">
+                                        <SelectValue placeholder="Select size" />
+                                    </SelectTrigger>
+                                    <SelectContent className="bg-white dark:bg-[#364152] dark:border-nightP">
+                                        <SelectItem value="all" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">All Sizes</SelectItem>
+                                        <SelectItem value="micro" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Micro (10K-50K)</SelectItem>
+                                        <SelectItem value="mid" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Mid-tier (50K-500K)</SelectItem>
+                                        <SelectItem value="macro" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Macro (500K-1M)</SelectItem>
+                                        <SelectItem value="mega" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Mega (1M+)</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="collab-type" className="text-gray-900">Collaboration Type</Label>
-                <Select defaultValue="all">
-                  <SelectTrigger id="collab-type" className="bg-gray-100">
-                    <SelectValue placeholder="Select type" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Types</SelectItem>
-                    <SelectItem value="guest">Guest Appearances</SelectItem>
-                    <SelectItem value="joint">Joint Content</SelectItem>
-                    <SelectItem value="challenge">Challenges</SelectItem>
-                    <SelectItem value="series">Content Series</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="collab-type" className="text-gray-900 dark:text-nightTP">Collaboration Type</Label>
+                                <Select defaultValue="all">
+                                    <SelectTrigger id="collab-type" className="bg-gray-100 dark:bg-[#364152] dark:border-nightP">
+                                        <SelectValue placeholder="Select type" />
+                                    </SelectTrigger>
+                                    <SelectContent className="bg-white dark:bg-[#364152] dark:border-nightP">
+                                        <SelectItem value="all" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">All Types</SelectItem>
+                                        <SelectItem value="guest" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Guest Appearances</SelectItem>
+                                        <SelectItem value="joint" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Joint Content</SelectItem>
+                                        <SelectItem value="challenge" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Challenges</SelectItem>
+                                        <SelectItem value="series" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Content Series</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="location" className="text-gray-900">Location</Label>
-                <Select defaultValue="all">
-                  <SelectTrigger id="location" className="bg-gray-100">
-                    <SelectValue placeholder="Select location" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">Anywhere</SelectItem>
-                    <SelectItem value="us">United States</SelectItem>
-                    <SelectItem value="europe">Europe</SelectItem>
-                    <SelectItem value="asia">Asia</SelectItem>
-                    <SelectItem value="remote">Remote Only</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="location" className="text-gray-900 dark:text-nightTP">Location</Label>
+                                <Select defaultValue="all">
+                                    <SelectTrigger id="location" className="bg-gray-100 dark:bg-[#364152] dark:border-nightP">
+                                        <SelectValue placeholder="Select location" />
+                                    </SelectTrigger>
+                                    <SelectContent className="bg-white dark:bg-[#364152] dark:border-nightP">
+                                        <SelectItem value="all" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Anywhere</SelectItem>
+                                        <SelectItem value="us" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">United States</SelectItem>
+                                        <SelectItem value="europe" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Europe</SelectItem>
+                                        <SelectItem value="asia" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Asia</SelectItem>
+                                        <SelectItem value="remote" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Remote Only</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
 
-              <Button className="w-full bg-purple-600 text-white hover:bg-purple-700">Apply Filters</Button>
-            </CardContent>
-          </Card>
+                            <Button className="w-full bg-purple-600 text-white hover:bg-purple-700">Apply Filters</Button>
+                        </CardContent>
+                    </Card>
 
-          <div className="md:col-span-3 space-y-4">
-            <Tabs defaultValue="matches">
-              <TabsList className="grid w-full grid-cols-3 bg-gray-100">
-                <TabsTrigger value="matches" className="text-gray-900">AI Matches</TabsTrigger>
-                <TabsTrigger value="active" className="text-gray-900">Active Collabs</TabsTrigger>
-                <TabsTrigger value="requests" className="text-gray-900">Requests</TabsTrigger>
-              </TabsList>
-              <TabsContent value="matches" className="space-y-4 pt-4">
-                <Card>
-                  <CardContent className="p-6">
-                    <div className="flex flex-col md:flex-row gap-6">
-                      <Avatar className="h-24 w-24">
-                        <AvatarImage src="/placeholder.svg?height=96&width=96" alt="Sarah Johnson" />
-                        <AvatarFallback className="bg-gray-200">SJ</AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1 space-y-2">
-                        <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
-                          <div>
-                            <h3 className="text-xl font-bold text-gray-900">Sarah Johnson</h3>
-                            <div className="flex items-center gap-2">
-                              <Badge variant="outline">Travel</Badge>
-                              <Badge variant="outline">Lifestyle</Badge>
-                            </div>
-                          </div>
-                          <Badge className="w-fit text-lg px-3 py-1 bg-purple-100 text-purple-600">95% Match</Badge>
-                        </div>
-                        <p>
-                          Travel content creator specializing in sustainable tourism and local experiences. Looking to
-                          collaborate with creators who share similar values and can bring complementary perspectives.
-                        </p>
-                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
-                          <div>
-                            <p className="text-sm text-gray-500">Audience</p>
-                            <p className="font-medium text-gray-900">350K followers</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Engagement</p>
-                            <p className="font-medium text-gray-900">4.8%</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Location</p>
-                            <p className="font-medium text-gray-900">Los Angeles, CA</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Audience Overlap</p>
-                            <p className="font-medium text-gray-900">32%</p>
-                          </div>
-                        </div>
-                        <div className="flex flex-wrap gap-2 pt-4">
-                          <Button className="bg-purple-600 text-white hover:bg-purple-700">View Profile</Button>
-                          <Button variant="outline" className="border-gray-200 text-gray-900 hover:bg-gray-100">Message</Button>
-                          <Button variant="secondary" className="bg-gray-100 text-gray-900 hover:bg-gray-200">Propose Collaboration</Button>
-                        </div>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
+                    <div className="md:col-span-3 space-y-4">
+                        <Tabs defaultValue="matches">
+                            <TabsList className="grid w-full grid-cols-3 bg-gray-100  dark:bg-nightS border-b border-gray-200 dark:border-nightS dark:text-nightTS">
+                                <TabsTrigger value="matches">AI Matches</TabsTrigger>
+                                <TabsTrigger value="active">Active Collabs</TabsTrigger>
+                                <TabsTrigger value="requests">Requests</TabsTrigger>
+                            </TabsList>
+                            <TabsContent value="matches" className="space-y-4 pt-4">
+                                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                    <CardContent className="p-6">
+                                        <div className="flex flex-col md:flex-row gap-6">
+                                            <Avatar className="h-24 w-24 dark:bg-nightP">
+                                                <AvatarImage src="/placeholder.svg?height=96&width=96" alt="Sarah Johnson" />
+                                                <AvatarFallback className="bg-gray-200 dark:bg-white/70 dark:border-nightP dark:text-black">SJ</AvatarFallback>
+                                            </Avatar>
+                                            <div className="flex-1 space-y-2">
+                                                <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
+                                                    <div>
+                                                        <h3 className="text-xl font-bold text-gray-900 dark:text-nightTP">Sarah Johnson</h3>
+                                                        <div className="flex items-center gap-2">
+                                                            <Badge variant="outline" className="bg-gray-200 dark:bg-white/70 dark:border-nightP dark:text-black mt-1">Travel</Badge>
+                                                            <Badge variant="outline" className="bg-gray-200 dark:bg-white/70 dark:border-nightP dark:text-black mt-1">Lifestyle</Badge>
+                                                        </div>
+                                                    </div>
+                                                    <Badge className="w-fit text-lg px-3 py-1 bg-purple-100 text-purple-600">95% Match</Badge>
+                                                </div>
+                                                <p className="text-gray-600 dark:text-nightTS">
+                                                    Travel content creator specializing in sustainable tourism and local experiences. Looking to
+                                                    collaborate with creators who share similar values and can bring complementary perspectives.
+                                                </p>
+                                                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Audience</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">350K followers</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Engagement</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">4.8%</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Location</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">Los Angeles, CA</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Audience Overlap</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">32%</p>
+                                                    </div>
+                                                </div>
+                                                <div className="flex flex-wrap gap-2 pt-4">
+                                                    <Button className="bg-purple-600 text-white hover:bg-purple-700">View Profile</Button>
+                                                    <Button variant="outline" className="border-gray-200 text-gray-900 hover:bg-gray-100">Message</Button>
+                                                    <Button variant="secondary" className="bg-gray-100 text-gray-900 hover:bg-gray-200">Propose Collaboration</Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </CardContent>
+                                </Card>
 
-                <Card>
-                  <CardContent className="p-6">
-                    <div className="flex flex-col md:flex-row gap-6">
-                      <Avatar className="h-24 w-24">
-                        <AvatarImage src="/placeholder.svg?height=96&width=96" alt="Sarah Johnson" />
-                        <AvatarFallback className="bg-gray-200">SJ</AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1 space-y-2">
-                        <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
-                          <div>
-                            <h3 className="text-xl font-bold text-gray-900">Sarah Johnson</h3>
-                            <div className="flex items-center gap-2">
-                              <Badge variant="outline">Travel</Badge>
-                              <Badge variant="outline">Lifestyle</Badge>
-                            </div>
-                          </div>
-                          <Badge className="w-fit text-lg px-3 py-1 bg-purple-100 text-purple-600">95% Match</Badge>
-                        </div>
-                        <p>
-                          Travel content creator specializing in sustainable tourism and local experiences. Looking to
-                          collaborate with creators who share similar values and can bring complementary perspectives.
-                        </p>
-                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
-                          <div>
-                            <p className="text-sm text-gray-500">Audience</p>
-                            <p className="font-medium text-gray-900">350K followers</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Engagement</p>
-                            <p className="font-medium text-gray-900">4.8%</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Location</p>
-                            <p className="font-medium text-gray-900">Los Angeles, CA</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Audience Overlap</p>
-                            <p className="font-medium text-gray-900">32%</p>
-                          </div>
-                        </div>
-                        <div className="flex flex-wrap gap-2 pt-4">
-                          <Button className="bg-purple-600 text-white hover:bg-purple-700">View Profile</Button>
-                          <Button variant="outline" className="border-gray-200 text-gray-900 hover:bg-gray-100">Message</Button>
-                          <Button variant="secondary" className="bg-gray-100 text-gray-900 hover:bg-gray-200">Propose Collaboration</Button>
-                        </div>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
+                                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                    <CardContent className="p-6">
+                                        <div className="flex flex-col md:flex-row gap-6">
+                                            <Avatar className="h-24 w-24">
+                                                <AvatarImage src="/placeholder.svg?height=96&width=96" alt="Sarah Johnson" />
+                                                <AvatarFallback className="bg-gray-200 dark:bg-white/70 dark:border-nightP dark:text-black">SJ</AvatarFallback>
+                                            </Avatar>
+                                            <div className="flex-1 space-y-2">
+                                                <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
+                                                    <div>
+                                                        <h3 className="text-xl font-bold text-gray-900 dark:text-nightTP">Sarah Johnson</h3>
+                                                        <div className="flex items-center gap-2">
+                                                            <Badge variant="outline" className="bg-[#262626]">Travel</Badge>
+                                                            <Badge variant="outline" className="bg-[#262626]">Lifestyle</Badge>
+                                                        </div>
+                                                    </div>
+                                                    <Badge className="w-fit text-lg px-3 py-1 bg-purple-100 text-purple-600">95% Match</Badge>
+                                                </div>
+                                                <p className="text-gray-600 dark:text-nightTS">
+                                                    Travel content creator specializing in sustainable tourism and local experiences. Looking to
+                                                    collaborate with creators who share similar values and can bring complementary perspectives.
+                                                </p>
+                                                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Audience</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">350K followers</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Engagement</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">4.8%</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Location</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">Los Angeles, CA</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Audience Overlap</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">32%</p>
+                                                    </div>
+                                                </div>
+                                                <div className="flex flex-wrap gap-2 pt-4">
+                                                    <Button className="bg-purple-600 text-white hover:bg-purple-700">View Profile</Button>
+                                                    <Button variant="outline" className="border-gray-200 text-gray-900 hover:bg-gray-100">Message</Button>
+                                                    <Button variant="secondary" className="bg-gray-100 text-gray-900 hover:bg-gray-200">Propose Collaboration</Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </CardContent>
+                                </Card>
 
-                <Card>
-                  <CardContent className="p-6">
-                    <div className="flex flex-col md:flex-row gap-6">
-                      <Avatar className="h-24 w-24">
-                        <AvatarImage src="/placeholder.svg?height=96&width=96" alt="Sarah Johnson" />
-                        <AvatarFallback className="bg-gray-200">SJ</AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1 space-y-2">
-                        <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
-                          <div>
-                            <h3 className="text-xl font-bold text-gray-900">Sarah Johnson</h3>
-                            <div className="flex items-center gap-2">
-                              <Badge variant="outline">Travel</Badge>
-                              <Badge variant="outline">Lifestyle</Badge>
-                            </div>
-                          </div>
-                          <Badge className="w-fit text-lg px-3 py-1 bg-purple-100 text-purple-600">95% Match</Badge>
-                        </div>
-                        <p>
-                          Travel content creator specializing in sustainable tourism and local experiences. Looking to
-                          collaborate with creators who share similar values and can bring complementary perspectives.
-                        </p>
-                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
-                          <div>
-                            <p className="text-sm text-gray-500">Audience</p>
-                            <p className="font-medium text-gray-900">350K followers</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Engagement</p>
-                            <p className="font-medium text-gray-900">4.8%</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Location</p>
-                            <p className="font-medium text-gray-900">Los Angeles, CA</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Audience Overlap</p>
-                            <p className="font-medium text-gray-900">32%</p>
-                          </div>
-                        </div>
-                        <div className="flex flex-wrap gap-2 pt-4">
-                          <Button className="bg-purple-600 text-white hover:bg-purple-700">View Profile</Button>
-                          <Button variant="outline" className="border-gray-200 text-gray-900 hover:bg-gray-100">Message</Button>
-                          <Button variant="secondary" className="bg-gray-100 text-gray-900 hover:bg-gray-200">Propose Collaboration</Button>
-                        </div>
-                      </div>
+                                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                    <CardContent className="p-6">
+                                        <div className="flex flex-col md:flex-row gap-6">
+                                            <Avatar className="h-24 w-24">
+                                                <AvatarImage src="/placeholder.svg?height=96&width=96" alt="Sarah Johnson" />
+                                                <AvatarFallback className="bg-gray-200 dark:bg-white/70 dark:border-nightP dark:text-black">SJ</AvatarFallback>
+                                            </Avatar>
+                                            <div className="flex-1 space-y-2">
+                                                <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
+                                                    <div>
+                                                        <h3 className="text-xl font-bold text-gray-900 dark:text-nightTP">Sarah Johnson</h3>
+                                                        <div className="flex items-center gap-2">
+                                                            <Badge variant="outline" className="bg-[#262626]">Travel</Badge>
+                                                            <Badge variant="outline" className="bg-[#262626]">Lifestyle</Badge>
+                                                        </div>
+                                                    </div>
+                                                    <Badge className="w-fit text-lg px-3 py-1 bg-purple-100 text-purple-600">95% Match</Badge>
+                                                </div>
+                                                <p className="text-gray-600 dark:text-nightTS">
+                                                    Travel content creator specializing in sustainable tourism and local experiences. Looking to
+                                                    collaborate with creators who share similar values and can bring complementary perspectives.
+                                                </p>
+                                                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Audience</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">350K followers</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Engagement</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">4.8%</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Location</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">Los Angeles, CA</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Audience Overlap</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">32%</p>
+                                                    </div>
+                                                </div>
+                                                <div className="flex flex-wrap gap-2 pt-4">
+                                                    <Button className="bg-purple-600 text-white hover:bg-purple-700">View Profile</Button>
+                                                    <Button variant="outline" className="border-gray-200 text-gray-900 hover:bg-gray-100">Message</Button>
+                                                    <Button variant="secondary" className="bg-gray-100 text-gray-900 hover:bg-gray-200">Propose Collaboration</Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+                            </TabsContent>
+                        </Tabs>
                     </div>
-                  </CardContent>
-                </Card>
-              </TabsContent>
-            </Tabs>
-          </div>
+                </div>
+            </main>
         </div>
-      </main>
-    </div>
-  )
+    )
 }
 
diff --git a/Frontend/src/pages/DashboardPage.tsx b/Frontend/src/pages/DashboardPage.tsx
index fa2ea4f..155ae11 100644
--- a/Frontend/src/pages/DashboardPage.tsx
+++ b/Frontend/src/pages/DashboardPage.tsx
@@ -6,17 +6,17 @@ import { UserNav } from "../components/user-nav"
 import { Button } from "../components/ui/button"
 import { Input } from "../components/ui/input"
 import {
-  BarChart3,
-  Briefcase,
-  DollarSign,
-  FileText,
-  Icon,
-  LayoutDashboard,
-  LogOut,
-  MessageSquare,
-  Rocket,
-  Search,
-  Users,
+    BarChart3,
+    Briefcase,
+    DollarSign,
+    FileText,
+    Icon,
+    LayoutDashboard,
+    LogOut,
+    MessageSquare,
+    Rocket,
+    Search,
+    Users,
 } from "lucide-react"
 import { PerformanceMetrics } from "../components/dashboard/performance-metrics"
 import { RecentActivity } from "../components/dashboard/recent-activity"
@@ -24,226 +24,221 @@ import { SponsorshipMatches } from "../components/dashboard/sponsorship-matches"
 import { useAuth } from "../context/AuthContext"
 
 export default function DashboardPage() {
-  const {logout} = useAuth();
+    const { logout } = useAuth();
 
-  return (
-    <div className="flex min-h-screen flex-col bg-[hsl(0,0%,100%)] text-[hsl(222.2,84%,4.9%)]">
-      <header className="sticky top-0 z-50 w-full border-b border-[hsl(214.3,31.8%,91.4%)] bg-[rgba(255,255,255,0.95)] backdrop-blur supports-[backdrop-filter]:bg-[hsla(0,0%,100%,0.6)]">
-        <div className="container flex h-16 items-center">
-          <Link to="/" className="flex items-center space-x-2 mr-6  ml-6">
-            <Rocket className="h-6 w-6 text-[hsl(262.1,83.3%,57.8%)]" />
-            <span className="font-bold text-xl hidden md:inline-block">Inpact</span>
-          </Link>
-          <div className="flex items-center space-x-4">
-  {[
-    { to: "/dashboard", icon: LayoutDashboard, label: "Dashboard" },
-    { to: "/dashboard/sponsorships", icon: Briefcase, label: "Sponsorships" },
-    { to: "/dashboard/collaborations", icon: Users, label: "Collaborations" },
-    { to: "/dashboard/contracts", icon: FileText, label: "Contracts" },
-    { to: "/dashboard/analytics", icon: BarChart3, label: "Analytics" },
-    { to: "/dashboard/messages", icon: MessageSquare, label: "Messages" },
-  ].map(({ to, icon: Icon, label }) => (
-    <Button
-      key={to}
-      variant="ghost"
-      size="sm"
-      className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]"
-      asChild
-    >
-      <Link to={to}>
-        <Icon className="h-5 w-5" />
-        <span className="sr-only">{label}</span>
-      </Link>
-    </Button>
-  ))}
-</div>
-<div className="ml-auto flex items-center space-x-3">
-  <div className="relative hidden md:flex">
-    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-[hsl(215.4,16.3%,46.9%)]" />
-    <Input
-      type="search"
-      placeholder="Search..."
-      className="w-[200px] pl-8 md:w-[300px] rounded-full bg-[hsl(210,40%,96.1%)] border-[hsl(214.3,31.8%,91.4%)]"
-    />
-  </div>
-  <ModeToggle />
-  <Button onClick={logout} variant="ghost">
-    <LogOut className="h-5 w-5" />  
-  </Button>
-  <UserNav />
-</div>
-</div>
-      </header>
-      <main className="flex-1 space-y-4 p-4 md:p-8 pt-6">
-        <div className="flex items-center justify-between">
-          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
-          <div className="flex items-center space-x-2">
-            <Button className="bg-[hsl(262.1,83.3%,57.8%)] text-[hsl(210,40%,98%)] hover:bg-[hsl(262.1,73.3%,57.8%)]">
-              <DollarSign className="mr-2 h-4 w-4" />
-              New Campaign
-            </Button>
-          </div>
+    return (
+        <div className="flex min-h-screen flex-col bg-[hsl(0,0%,100%)] text-[hsl(222.2,84%,4.9%)] dark:text-nightTS dark:bg-nightP">
+            <header className="sticky top-0 z-50 w-full border-b border-[hsl(214.3,31.8%,91.4%)] bg-[rgba(255,255,255,0.95)] backdrop-blur supports-[backdrop-filter]:bg-[hsla(0,0%,100%,0.6)] dark:bg-nightP dark:text-nightTS dark:border-white">
+                <div className="container flex h-16 items-center">
+                    <Link to="/" className="flex items-center space-x-2 mr-6  ml-6">
+                        <Rocket className="h-6 w-6 text-[hsl(262.1,83.3%,57.8%)]" />
+                        <span className="font-bold text-xl hidden md:inline-block dark:text-nightTP">Inpact</span>
+                    </Link>
+                    <div className="flex items-center space-x-4">
+                        {[
+                            { to: "/dashboard", icon: LayoutDashboard, label: "Dashboard" },
+                            { to: "/dashboard/sponsorships", icon: Briefcase, label: "Sponsorships" },
+                            { to: "/dashboard/collaborations", icon: Users, label: "Collaborations" },
+                            { to: "/dashboard/contracts", icon: FileText, label: "Contracts" },
+                            { to: "/dashboard/analytics", icon: BarChart3, label: "Analytics" },
+                            { to: "/dashboard/messages", icon: MessageSquare, label: "Messages" },
+                        ].map(({ to, icon: Icon, label }) => (
+                            <Button
+                                key={to}
+                                variant="ghost"
+                                size="sm"
+                                className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]"
+                                asChild
+                            >
+                                <Link to={to}>
+                                    <Icon className="h-5 w-5" />
+                                    <span className="sr-only">{label}</span>
+                                </Link>
+                            </Button>
+                        ))}
+                    </div>
+                    <div className="ml-auto flex items-center space-x-3">
+                        <div className="relative hidden md:flex">
+                            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS" />
+                            <Input
+                                type="search"
+                                placeholder="Search..."
+                                className="w-[200px] pl-8 md:w-[300px] rounded-full bg-[hsl(210,40%,96.1%)] border-[hsl(214.3,31.8%,91.4%)] dark:bg-[#364152] dark:border-nightP" />
+                        </div>
+                        <ModeToggle />
+                        <Button onClick={logout} variant="ghost" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]">
+                            <LogOut />
+                        </Button>
+                        <UserNav />
+                    </div>
+                </div>
+            </header>
+            <main className="flex-1 space-y-4 p-4 md:p-8 pt-6  dark:text-nightTP dark:bg-nightP">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+                    <div className="flex items-center space-x-2">
+                        <Button className="bg-[hsl(262.1,83.3%,57.8%)] text-[hsl(210,40%,98%)] hover:bg-[hsl(262.1,73.3%,57.8%)]">
+                            <DollarSign className="mr-2 h-4 w-4" />
+                            New Campaign
+                        </Button>
+                    </div>
+                </div>
+                <Tabs defaultValue="overview" className="space-y-4">
+                    <TabsList className="bg-white border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                        <TabsTrigger
+                            value="overview"
+                        >
+                            Overview
+                        </TabsTrigger>
+                        <TabsTrigger
+                            value="sponsorships"
+                        >
+                            Sponsorships
+                        </TabsTrigger>
+                        <TabsTrigger
+                            value="collaborations"
+                        >
+                            Collaborations
+                        </TabsTrigger>
+                        <TabsTrigger
+                            value="analytics"
+                        >
+                            Analytics
+                        </TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="overview" className="space-y-4">
+                        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+                            <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                                    <CardTitle className="text-sm font-medium text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">Total Revenue</CardTitle>
+                                    <DollarSign className="h-4 w-4 text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS" />
+                                </CardHeader>
+                                <CardContent>
+                                    <div className="text-2xl font-bold text-[hsl(222.2,84%,4.9%)] dark:text-nightTS">$45,231.89</div>
+                                    <p className="text-xs text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">+20.1% from last month</p>
+                                </CardContent>
+                            </Card>
+                            <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                                    <CardTitle className="text-sm font-medium text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">Active Sponsorships</CardTitle>
+                                    <Briefcase className="h-4 w-4 text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS" />
+                                </CardHeader>
+                                <CardContent>
+                                    <div className="text-2xl font-bold text-[hsl(222.2,84%,4.9%)] dark:text-nightTS">12</div>
+                                    <p className="text-xs text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">+3 from last month</p>
+                                </CardContent>
+                            </Card>
+                            <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                                    <CardTitle className="text-sm font-medium text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">Collaborations</CardTitle>
+                                    <Users className="h-4 w-4 text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS" />
+                                </CardHeader>
+                                <CardContent>
+                                    <div className="text-2xl font-bold text-[hsl(222.2,84%,4.9%)] dark:text-nightTS">8</div>
+                                    <p className="text-xs text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">+2 from last month</p>
+                                </CardContent>
+                            </Card>
+                            <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                                    <CardTitle className="text-sm font-medium text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">Audience Growth</CardTitle>
+                                    <BarChart3 className="h-4 w-4 text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS" />
+                                </CardHeader>
+                                <CardContent>
+                                    <div className="text-2xl font-bold text-[hsl(222.2,84%,4.9%)] dark:text-nightTS">+12.5%</div>
+                                    <p className="text-xs text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">+2.1% from last month</p>
+                                </CardContent>
+                            </Card>
+                        </div>
+                        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+                            <Card className="col-span-4 border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                <CardHeader>
+                                    <CardTitle className="text-[hsl(222.2,84%,4.9%)] dark:text-nightTP">Performance Metrics</CardTitle>
+                                </CardHeader>
+                                <CardContent className="pl-2">
+                                    <PerformanceMetrics />
+                                </CardContent>
+                            </Card>
+                            <Card className="col-span-3 border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                <CardHeader>
+                                    <CardTitle className="text-[hsl(222.2,84%,4.9%)] dark:text-nightTP">Recent Activity</CardTitle>
+                                    <CardDescription className="text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">Your latest interactions and updates</CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                    <RecentActivity />
+                                </CardContent>
+                            </Card>
+                        </div>
+                        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+                            <Card className="col-span-4 border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                <CardHeader>
+                                    <CardTitle className="text-[hsl(222.2,84%,4.9%)] dark:text-nightTP">AI-Matched Sponsorships</CardTitle>
+                                    <CardDescription className="text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">Brands that match your audience and content</CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                    <SponsorshipMatches />
+                                </CardContent>
+                            </Card>
+                            <Card className="col-span-3 border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                <CardHeader>
+                                    <CardTitle className="text-[hsl(222.2,84%,4.9%)] dark:text-nightTP">Creator Collaborations</CardTitle>
+                                    <CardDescription className="text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">Creators with complementary audiences</CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                    {/* <CreatorCollaborations /> */}
+                                </CardContent>
+                            </Card>
+                        </div>
+                    </TabsContent>
+                    <TabsContent value="sponsorships" className="space-y-4">
+                        <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                            <CardHeader>
+                                <CardTitle className="text-[hsl(222.2,84%,4.9%)] dark:text-nightTS">AI-Driven Sponsorship Matchmaking</CardTitle>
+                                <CardDescription className="text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">Discover brands that align with your audience and content style</CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-4">
+                                <div className="rounded-lg border border-[hsl(214.3,31.8%,91.4%)] bg-[hsl(210,40%,96.1%)] p-4 dark:bg-nightS dark:border-nightP">
+                                    <h3 className="text-lg font-semibold text-[hsl(222.2,84%,4.9%)] dark:text-nightTS">Coming Soon</h3>
+                                    <p className="text-sm text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">
+                                        The full sponsorship matchmaking interface will be available here.
+                                    </p>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </TabsContent>
+                    <TabsContent value="collaborations" className="space-y-4">
+                        <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                            <CardHeader>
+                                <CardTitle className="text-[hsl(222.2,84%,4.9%)] dark:text-nightTS">Creator Collaboration Hub</CardTitle>
+                                <CardDescription className="text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">Find and partner with creators who have complementary audiences</CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-4">
+                                <div className="rounded-lg border border-[hsl(214.3,31.8%,91.4%)] bg-[hsl(210,40%,96.1%)] p-4  dark:bg-nightS dark:border-nightP">
+                                    <h3 className="text-lg font-semibold text-[hsl(222.2,84%,4.9%)] dark:text-nightTS">Coming Soon</h3>
+                                    <p className="text-sm text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">
+                                        The full creator collaboration interface will be available here.
+                                    </p>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </TabsContent>
+                    <TabsContent value="analytics" className="space-y-4">
+                        <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                            <CardHeader>
+                                <CardTitle className="text-[hsl(222.2,84%,4.9%)] dark:text-nightTS">Performance Analytics & ROI Tracking</CardTitle>
+                                <CardDescription className="text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">Track sponsorship performance and campaign success</CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-4">
+                                <div className="rounded-lg border border-[hsl(214.3,31.8%,91.4%)] bg-[hsl(210,40%,96.1%)] p-4 dark:bg-nightS dark:border-nightP">
+                                    <h3 className="text-lg font-semibold text-[hsl(222.2,84%,4.9%)] dark:text-nightTS">Coming Soon</h3>
+                                    <p className="text-sm text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS">
+                                        The full analytics dashboard will be available here.
+                                    </p>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </TabsContent>
+                </Tabs>
+            </main>
         </div>
-        <Tabs defaultValue="overview" className="space-y-4">
-          <TabsList className="bg-[hsl(210,40%,96.1%)]">
-            <TabsTrigger 
-              value="overview" 
-              className="data-[state=active]:bg-white data-[state=active]:text-[hsl(222.2,47.4%,11.2%)] data-[state=active]:shadow-sm"
-            >
-              Overview
-            </TabsTrigger>
-            <TabsTrigger 
-              value="sponsorships" 
-              className="data-[state=active]:bg-white data-[state=active]:text-[hsl(222.2,47.4%,11.2%)] data-[state=active]:shadow-sm"
-            >
-              Sponsorships
-            </TabsTrigger>
-            <TabsTrigger 
-              value="collaborations" 
-              className="data-[state=active]:bg-white data-[state=active]:text-[hsl(222.2,47.4%,11.2%)] data-[state=active]:shadow-sm"
-            >
-              Collaborations
-            </TabsTrigger>
-            <TabsTrigger 
-              value="analytics" 
-              className="data-[state=active]:bg-white data-[state=active]:text-[hsl(222.2,47.4%,11.2%)] data-[state=active]:shadow-sm"
-            >
-              Analytics
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="overview" className="space-y-4">
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-              <Card className="bg-[hsl(0,0%,100%)] border-[hsl(214.3,31.8%,91.4%)]">
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <CardTitle className="text-sm font-medium text-[hsl(215.4,16.3%,46.9%)]">Total Revenue</CardTitle>
-                  <DollarSign className="h-4 w-4 text-[hsl(215.4,16.3%,46.9%)]" />
-                </CardHeader>
-                <CardContent>
-                  <div className="text-2xl font-bold text-[hsl(222.2,84%,4.9%)]">$45,231.89</div>
-                  <p className="text-xs text-[hsl(215.4,16.3%,46.9%)]">+20.1% from last month</p>
-                </CardContent>
-              </Card>
-              <Card className="bg-[hsl(0,0%,100%)] border-[hsl(214.3,31.8%,91.4%)]">
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <CardTitle className="text-sm font-medium text-[hsl(215.4,16.3%,46.9%)]">Active Sponsorships</CardTitle>
-                  <Briefcase className="h-4 w-4 text-[hsl(215.4,16.3%,46.9%)]" />
-                </CardHeader>
-                <CardContent>
-                  <div className="text-2xl font-bold text-[hsl(222.2,84%,4.9%)]">12</div>
-                  <p className="text-xs text-[hsl(215.4,16.3%,46.9%)]">+3 from last month</p>
-                </CardContent>
-              </Card>
-              <Card className="bg-[hsl(0,0%,100%)] border-[hsl(214.3,31.8%,91.4%)]">
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <CardTitle className="text-sm font-medium text-[hsl(215.4,16.3%,46.9%)]">Collaborations</CardTitle>
-                  <Users className="h-4 w-4 text-[hsl(215.4,16.3%,46.9%)]" />
-                </CardHeader>
-                <CardContent>
-                  <div className="text-2xl font-bold text-[hsl(222.2,84%,4.9%)]">8</div>
-                  <p className="text-xs text-[hsl(215.4,16.3%,46.9%)]">+2 from last month</p>
-                </CardContent>
-              </Card>
-              <Card className="bg-[hsl(0,0%,100%)] border-[hsl(214.3,31.8%,91.4%)]">
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <CardTitle className="text-sm font-medium text-[hsl(215.4,16.3%,46.9%)]">Audience Growth</CardTitle>
-                  <BarChart3 className="h-4 w-4 text-[hsl(215.4,16.3%,46.9%)]" />
-                </CardHeader>
-                <CardContent>
-                  <div className="text-2xl font-bold text-[hsl(222.2,84%,4.9%)]">+12.5%</div>
-                  <p className="text-xs text-[hsl(215.4,16.3%,46.9%)]">+2.1% from last month</p>
-                </CardContent>
-              </Card>
-            </div>
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
-              <Card className="col-span-4 bg-[hsl(0,0%,100%)] border-[hsl(214.3,31.8%,91.4%)]">
-                <CardHeader>
-                  <CardTitle className="text-[hsl(222.2,84%,4.9%)]">Performance Metrics</CardTitle>
-                </CardHeader>
-                <CardContent className="pl-2">
-                  <PerformanceMetrics />
-                </CardContent>
-              </Card>
-              <Card className="col-span-3 bg-[hsl(0,0%,100%)] border-[hsl(214.3,31.8%,91.4%)]">
-                <CardHeader>
-                  <CardTitle className="text-[hsl(222.2,84%,4.9%)]">Recent Activity</CardTitle>
-                  <CardDescription className="text-[hsl(215.4,16.3%,46.9%)]">Your latest interactions and updates</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <RecentActivity />
-                </CardContent>
-              </Card>
-            </div>
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
-              <Card className="col-span-4 bg-[hsl(0,0%,100%)] border-[hsl(214.3,31.8%,91.4%)]">
-                <CardHeader>
-                  <CardTitle className="text-[hsl(222.2,84%,4.9%)]">AI-Matched Sponsorships</CardTitle>
-                  <CardDescription className="text-[hsl(215.4,16.3%,46.9%)]">Brands that match your audience and content</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <SponsorshipMatches />
-                </CardContent>
-              </Card>
-              <Card className="col-span-3 bg-[hsl(0,0%,100%)] border-[hsl(214.3,31.8%,91.4%)]">
-                <CardHeader>
-                  <CardTitle className="text-[hsl(222.2,84%,4.9%)]">Creator Collaborations</CardTitle>
-                  <CardDescription className="text-[hsl(215.4,16.3%,46.9%)]">Creators with complementary audiences</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  {/* <CreatorCollaborations /> */}
-                </CardContent>
-              </Card>
-            </div>
-          </TabsContent>
-          <TabsContent value="sponsorships" className="space-y-4">
-        <Card className="bg-[hsl(0,0%,100%)] border-[hsl(214.3,31.8%,91.4%)]">
-          <CardHeader>
-            <CardTitle className="text-[hsl(222.2,84%,4.9%)]">AI-Driven Sponsorship Matchmaking</CardTitle>
-            <CardDescription className="text-[hsl(215.4,16.3%,46.9%)]">Discover brands that align with your audience and content style</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="rounded-lg border border-[hsl(214.3,31.8%,91.4%)] bg-[hsl(210,40%,96.1%)] p-4">
-              <h3 className="text-lg font-semibold text-[hsl(222.2,84%,4.9%)]">Coming Soon</h3>
-              <p className="text-sm text-[hsl(215.4,16.3%,46.9%)]">
-                The full sponsorship matchmaking interface will be available here.
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      </TabsContent>
-      <TabsContent value="collaborations" className="space-y-4">
-        <Card className="bg-[hsl(0,0%,100%)] border-[hsl(214.3,31.8%,91.4%)]">
-          <CardHeader>
-            <CardTitle className="text-[hsl(222.2,84%,4.9%)]">Creator Collaboration Hub</CardTitle>
-            <CardDescription className="text-[hsl(215.4,16.3%,46.9%)]">Find and partner with creators who have complementary audiences</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="rounded-lg border border-[hsl(214.3,31.8%,91.4%)] bg-[hsl(210,40%,96.1%)] p-4">
-              <h3 className="text-lg font-semibold text-[hsl(222.2,84%,4.9%)]">Coming Soon</h3>
-              <p className="text-sm text-[hsl(215.4,16.3%,46.9%)]">
-                The full creator collaboration interface will be available here.
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      </TabsContent>
-      <TabsContent value="analytics" className="space-y-4">
-        <Card className="bg-[hsl(0,0%,100%)] border-[hsl(214.3,31.8%,91.4%)]">
-          <CardHeader>
-            <CardTitle className="text-[hsl(222.2,84%,4.9%)]">Performance Analytics & ROI Tracking</CardTitle>
-            <CardDescription className="text-[hsl(215.4,16.3%,46.9%)]">Track sponsorship performance and campaign success</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="rounded-lg border border-[hsl(214.3,31.8%,91.4%)] bg-[hsl(210,40%,96.1%)] p-4">
-              <h3 className="text-lg font-semibold text-[hsl(222.2,84%,4.9%)]">Coming Soon</h3>
-              <p className="text-sm text-[hsl(215.4,16.3%,46.9%)]">
-                The full analytics dashboard will be available here.
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      </TabsContent>
-      </Tabs>
-    </main>
-  </div>
     )
-  }
\ No newline at end of file
+}
diff --git a/Frontend/src/pages/ForgotPassword.tsx b/Frontend/src/pages/ForgotPassword.tsx
index f2d1a03..e1af63c 100644
--- a/Frontend/src/pages/ForgotPassword.tsx
+++ b/Frontend/src/pages/ForgotPassword.tsx
@@ -4,182 +4,181 @@ import { ArrowLeft, Check, Rocket } from "lucide-react";
 import { supabase } from "../utils/supabase";
 
 export default function ForgotPasswordPage() {
-  const [email, setEmail] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const [error, setError] = useState("");
-  const [showSignupPrompt, setShowSignupPrompt] = useState(false);
+    const [email, setEmail] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSubmitted, setIsSubmitted] = useState(false);
+    const [error, setError] = useState("");
+    const [showSignupPrompt, setShowSignupPrompt] = useState(false);
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setError("");
-    setShowSignupPrompt(false);
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setIsLoading(true);
+        setError("");
+        setShowSignupPrompt(false);
 
-    try {
-      // Check if the email exists in the users table before sending a reset link
-      const { data: users, error: userError } = await supabase
-        .from("users")
-        .select("id")
-        .eq("email", email)
-        .maybeSingle();
-      if (userError) throw userError;
-      if (!users) {
-        // If the email does not exist, prompt the user to sign up
-        setShowSignupPrompt(true);
-        setIsLoading(false);
-        return;
-      }
-      // Send the password reset email using Supabase Auth
-      const { error } = await supabase.auth.resetPasswordForEmail(email, {
-        redirectTo: window.location.origin + "/reset-password"
-      });
-      if (error) throw error;
-      setIsSubmitted(true);
-    } catch (err: any) {
-     
-      setError(err.message || "Something went wrong. Please try again.");
-    } finally {
-      setIsLoading(false);
-    }
-  };
+        try {
+            // Check if the email exists in the users table before sending a reset link
+            const { data: users, error: userError } = await supabase
+                .from("users")
+                .select("id")
+                .eq("email", email)
+                .maybeSingle();
+            if (userError) throw userError;
+            if (!users) {
+                // If the email does not exist, prompt the user to sign up
+                setShowSignupPrompt(true);
+                setIsLoading(false);
+                return;
+            }
+            // Send the password reset email using Supabase Auth
+            const { error } = await supabase.auth.resetPasswordForEmail(email, {
+                redirectTo: window.location.origin + "/reset-password"
+            });
+            if (error) throw error;
+            setIsSubmitted(true);
+        } catch (err: any) {
 
-  return (
-    <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800">
-      <div className="flex justify-between items-center p-6">
-        <Link
-          to="/"
-          className="flex items-center space-x-2 transition-transform duration-200 hover:scale-105"
-        >
-          <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-          <span className="font-bold text-xl text-gray-900 dark:text-white">
-            Inpact
-          </span>
-        </Link>
-      </div>
+            setError(err.message || "Something went wrong. Please try again.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
 
-      <div className="flex-1 flex items-center justify-center p-6">
-        <div className="w-full max-w-md">
-          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
-            <div className="p-8">
-              <Link
-                to="/login"
-                className="inline-flex items-center text-sm text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 mb-6 transition-colors duration-200"
-              >
-                <ArrowLeft className="h-4 w-4 mr-1" />
-                Back to login
-              </Link>
+    return (
+        <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-50 to-indigo-50 dark:bg-nightP">
+            <div className="flex justify-between items-center p-6 dark:bg-nightP">
+                <Link
+                    to="/"
+                    className="flex items-center space-x-2 transition-transform duration-200 hover:scale-105"
+                >
+                    <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+                    <span className="font-bold text-xl text-gray-900 dark:text-white">
+                        Inpact
+                    </span>
+                </Link>
+            </div>
 
-              {isSubmitted ? (
-                <div className="text-center py-8">
-                  <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/30 mb-4">
-                    <Check className="h-6 w-6 text-green-600 dark:text-green-400" />
-                  </div>
-                  <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-                    Check your email
-                  </h2>
-                  <p className="text-gray-600 dark:text-gray-300 mb-6">
-                    We've sent a password reset link to{" "}
-                    <span className="font-medium">{email}</span>
-                  </p>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    Didn't receive the email? Check your spam folder or{" "}
-                    <button
-                      onClick={() => setIsSubmitted(false)}
-                      className="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200"
-                    >
-                      try another email address
-                    </button>
-                  </p>
-                </div>
-              ) : (
-                <>
-                  <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-                    Reset your password
-                  </h2>
-                  <p className="text-gray-600 dark:text-gray-300 mb-8">
-                    Enter your email address and we'll send you a link to reset
-                    your password
-                  </p>
+            <div className="flex-1 flex items-center justify-center p-6 dark:bg-nightP">
+                <div className="w-full max-w-md">
+                    <div className="bg-white dark:bg-nightS rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
+                        <div className="p-8">
+                            <Link
+                                to="/login"
+                                className="inline-flex items-center text-sm text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 mb-6 transition-colors duration-200"
+                            >
+                                <ArrowLeft className="h-4 w-4 mr-1" />
+                                Back to login
+                            </Link>
 
-                  {error && (
-                    <div className="mb-6 p-4 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 animate-[pulse_1s_ease-in-out]">
-                      {error}
-                    </div>
-                  )}
+                            {isSubmitted ? (
+                                <div className="text-center py-8">
+                                    <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/30 mb-4">
+                                        <Check className="h-6 w-6 text-green-600 dark:text-green-400" />
+                                    </div>
+                                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                                        Check your email
+                                    </h2>
+                                    <p className="text-gray-600 dark:text-gray-300 mb-6">
+                                        We've sent a password reset link to{" "}
+                                        <span className="font-medium">{email}</span>
+                                    </p>
+                                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                                        Didn't receive the email? Check your spam folder or{" "}
+                                        <button
+                                            onClick={() => setIsSubmitted(false)}
+                                            className="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200"
+                                        >
+                                            try another email address
+                                        </button>
+                                    </p>
+                                </div>
+                            ) : (
+                                <>
+                                    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+                                        Reset your password
+                                    </h2>
+                                    <p className="text-gray-600 dark:text-gray-300 mb-8">
+                                        Enter your email address and we'll send you a link to reset
+                                        your password
+                                    </p>
 
-                  {showSignupPrompt && (
-                    <div className="mb-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg text-yellow-700 dark:text-yellow-400 text-sm animate-[pulse_1s_ease-in-out]">
-                      No account found with this email. <Link to="/signup" className="underline text-purple-600">Sign up?</Link>
-                    </div>
-                  )}
+                                    {error && (
+                                        <div className="mb-6 p-4 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 animate-[pulse_1s_ease-in-out]">
+                                            {error}
+                                        </div>
+                                    )}
 
-                  <form onSubmit={handleSubmit} className="space-y-6">
-                    <div className="space-y-2">
-                      <label
-                        htmlFor="email"
-                        className="text-sm font-medium text-gray-700 dark:text-gray-300"
-                      >
-                        Email address
-                      </label>
-                      <input
-                        id="email"
-                        type="email"
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
-                        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"
-                        // Email is case sensitive for password reset
-                        placeholder="you@example.com (CASE sensitive)"
-                      />
-                    </div>
+                                    {showSignupPrompt && (
+                                        <div className="mb-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg text-yellow-700 dark:text-yellow-400 text-sm animate-[pulse_1s_ease-in-out]">
+                                            No account found with this email. <Link to="/signup" className="underline text-purple-600">Sign up?</Link>
+                                        </div>
+                                    )}
 
-                    <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>
-                          Sending reset link...
+                                    <form onSubmit={handleSubmit} className="space-y-6">
+                                        <div className="space-y-2">
+                                            <label
+                                                htmlFor="email"
+                                                className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                                            >
+                                                Email address
+                                            </label>
+                                            <input
+                                                id="email"
+                                                type="email"
+                                                value={email}
+                                                onChange={(e) => setEmail(e.target.value)}
+                                                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"
+                                                // Email is case sensitive for password reset
+                                                placeholder="you@example.com (CASE sensitive)"
+                                            />
+                                        </div>
+
+                                        <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>
+                                                    Sending reset link...
+                                                </div>
+                                            ) : (
+                                                "Send reset link"
+                                            )}
+                                        </button>
+                                    </form>
+                                </>
+                            )}
                         </div>
-                      ) : (
-                        "Send reset link"
-                      )}
-                    </button>
-                  </form>
-                </>
-              )}
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
 
-      <footer className="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
-        © 2024 Inpact. All rights reserved.
-      </footer>
-    </div>
-  );
+            <footer className="py-6 text-center text-sm text-gray-500 dark:text-nightTS dark:bg-nightP">
+                © 2024 Inpact. All rights reserved.
+            </footer>
+        </div>
+    );
 }
diff --git a/Frontend/src/pages/HomePage.tsx b/Frontend/src/pages/HomePage.tsx
index b8d95a9..ec231d5 100644
--- a/Frontend/src/pages/HomePage.tsx
+++ b/Frontend/src/pages/HomePage.tsx
@@ -102,14 +102,14 @@ export default function HomePage() {
   }, []);
 
   return (
-    <div className="flex min-h-screen flex-col bg-gray-50 text-gray-900">
+    <div className="flex min-h-screen flex-col bg-gray-50 text-gray-900  dark:bg-nightP dark:text-nightTS">
       {/* Header */}
-      <header className="fixed top-0 z-50 w-full border-b border-gray-200 bg-white/80 backdrop-blur-lg px-6">
+      <header className="fixed top-0 z-50 w-full border-b border-gray-200 dark:border-nightS bg-white/80 backdrop-blur-lg px-6 dark:bg-nightS dark:text-nightTS">
         <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" />
-              <span className="font-bold text-xl text-gray-900">Inpact</span>
+              <span className="font-bold text-xl text-gray-900 dark:text-nightTP">Inpact</span>
             </Link>
             <MainNav />
           </div>
@@ -117,7 +117,7 @@ export default function HomePage() {
             <ModeToggle />
             <div className="hidden md:flex gap-2">
               <Button variant="ghost">
-                <Link to="/login" className="text-gray-900">
+                <Link to="/login" className="text-gray-900 dark:text-nightTS">
                   Login
                 </Link>
               </Button>
@@ -131,14 +131,14 @@ export default function HomePage() {
       </header>
 
       {/* Hero Section - Full Screen */}
-      <main className="flex-1">
-        <section className="w-full min-h-screen flex items-center bg-purple-100 pt-16">
+      <main className="flex-1 dark:bg-nightP dark:text-nightTS">
+        <section className="w-full min-h-screen flex items-center bg-purple-100 pt-16 dark:bg-nightP dark:text-nightTS">
           <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">
+              <h1 className="text-4xl font-bold tracking-tight sm:text-6xl text-gray-900  dark:text-nightTP">
                 AI-Powered Creator Collaboration Platform
               </h1>
-              <p className="mt-4 text-lg text-gray-700 md:text-xl">
+              <p className="mt-4 text-lg text-gray-700 md:text-xl  dark:text-nightTS">
                 Connect with brands, collaborate with creators, and optimize
                 your partnerships through data-driven insights.
               </p>
@@ -164,7 +164,10 @@ export default function HomePage() {
               <img
                 src="/Home.png"
                 alt="Hero Image"
-                className="rounded-xl shadow-xl object-cover w-full h-auto"
+                className="rounded-xl object-cover w-full h-auto transition-transform duration-300 hover:scale-105"
+                style={{
+                  boxShadow: "0 0 0 0 rgba(128,90,213,0.15), 0 8px 16px 0 rgba(128,90,213,0.15)"
+                }}
               />
             </div>
           </div>
@@ -174,18 +177,18 @@ export default function HomePage() {
         <Onboarding />
 
         {/* Features Section - Revealed on Scroll */}
-        <section ref={featuresRef} className="w-full py-24 bg-white">
+        <section ref={featuresRef} className="w-full py-24 bg-white flex flex-col-reverse lg:flex-row items-center dark:bg-nightP dark:text-nightTS">
           <div
-            className={`container px-6 md:px-12 text-center transition-all duration-1000 transform ${
+            className={`container px-6 md:px-12 text-center transition-all duration-1000 transform mx-auto ${
               isFeaturesVisible
                 ? "opacity-100 translate-y-0"
                 : "opacity-0 translate-y-20"
             }`}
           >
-            <h2 className="text-3xl font-bold sm:text-4xl text-gray-900">
+            <h2 className="text-3xl font-bold sm:text-4xl text-gray-900 dark:text-nightTP">
               Key Features
             </h2>
-            <p className="mt-4 text-lg text-gray-700">
+            <p className="mt-4 text-lg text-gray-700 dark:text-nightTS">
               Leverage AI to transform your creator partnerships and brand
               sponsorships.
             </p>
@@ -193,15 +196,15 @@ export default function HomePage() {
               {features.map(({ icon: Icon, title, desc }, idx) => (
                 <div
                   key={idx}
-                  className="flex flex-col items-center text-center p-6 bg-gray-100 rounded-xl shadow-md"
+                  className="flex flex-col items-center text-center p-6 bg-gray-100 rounded-xl shadow-md dark:bg-nightS dark:text-nightTS"
                 >
-                  <div className="flex items-center justify-center h-20 w-20 rounded-full bg-purple-100 mb-4">
+                  <div className="flex items-center justify-center h-20 w-20 rounded-full bg-purple-100 mb-4 dark:bg-nightS">
                     <Icon className="h-10 w-10 text-purple-600" />
                   </div>
-                  <h3 className="text-xl font-semibold text-gray-900">
+                  <h3 className="text-xl font-semibold text-gray-900 dark:text-nightTP">
                     {title}
                   </h3>
-                  <p className="mt-2 text-gray-600">{desc}</p>
+                  <p className="mt-2 text-gray-600 dark:text-nightTS">{desc}</p>
                 </div>
               ))}
             </div>
@@ -212,17 +215,17 @@ export default function HomePage() {
       {/* Footer - Revealed on Scroll */}
       <footer
         ref={footerRef}
-        className="mr-12 ml-12 border-t border-gray-200 bg-gray-50 py-6"
+        className="border-t border-gray-200 bg-gray-50 py-6 dark:bg-nightS dark:text-nightTS dark:border-nightS"
       >
         <div
-          className={`container flex flex-col md:flex-row items-center justify-between text-gray-600 transition-all duration-1000 transform ${
+          className={`container flex flex-col md:flex-row md:min-w-full items-center justify-between text-gray-600 transition-all duration-1000 transform dark:text-nightTS ${
             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">
+          <p className="dark:text-nightTS ml-12">© 2024 Inpact. All rights reserved.</p>
+          <div className="flex gap-4 mt-4 flex-row-reverse md:mt-0 dark:text-nightTS pr-12">
             <Link to="/terms" className="hover:underline">
               Terms
             </Link>
diff --git a/Frontend/src/pages/Login.tsx b/Frontend/src/pages/Login.tsx
index 5e77eb9..821fde1 100644
--- a/Frontend/src/pages/Login.tsx
+++ b/Frontend/src/pages/Login.tsx
@@ -57,14 +57,14 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800">
-      <div className="flex justify-between items-center p-6">
+    <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-50 to-indigo-50 dark:bg-nightP">
+      <div className="flex justify-between items-center p-6 dark:bg-nightP">
         <Link
           to="/"
           className="flex items-center space-x-2 transition-transform duration-200 hover:scale-105"
         >
           <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-          <span className="font-bold text-xl text-gray-900 dark:text-white">
+          <span className="font-bold text-xl text-gray-900 dark:text-nightTP">
             Inpact
           </span>
         </Link>
@@ -81,9 +81,9 @@ export default function LoginPage() {
         </div>
       </div>
 
-      <div className="flex-1 flex items-center justify-center p-6">
+      <div className="flex-1 flex items-center justify-center p-6 dark:bg-nightP">
         <div className="w-full max-w-md">
-          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
+          <div className="bg-white dark:bg-nightS rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
             <div className="p-8">
               <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                 Welcome back
@@ -240,7 +240,7 @@ export default function LoginPage() {
         </div>
       </div>
 
-      <footer className="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
+      <footer className="py-6 text-center text-sm text-gray-500 dark:text-nightTS dark:bg-nightP">
         © 2024 Inpact. All rights reserved.
       </footer>
     </div>
diff --git a/Frontend/src/pages/Messages.tsx b/Frontend/src/pages/Messages.tsx
index 332b854..c31a4c0 100644
--- a/Frontend/src/pages/Messages.tsx
+++ b/Frontend/src/pages/Messages.tsx
@@ -167,16 +167,16 @@ export default function MessagesPage() {
       : contacts.filter((contact) => contact.type === activeTab);
 
   return (
-    <div className="flex min-h-screen flex-col bg-white text-gray-900">
-      <header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60">
-        <div className="container flex h-16 items-center">
-          <Link to="/" className="flex items-center space-x-2 mr-6  ml-6">
+    <div className="flex min-h-screen flex-col bg-white text-gray-900 dark:bg-nightP">
+      <header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:bg-nightP">
+        <div className="container flex h-16 items-center dark:bg-nightP dark:text-nightTP">
+          <Link to="/" className="flex items-center space-x-2 mr-6  ml-6 dark:text-nightTP">
             <Rocket className="h-6 w-6 text-[hsl(262.1,83.3%,57.8%)]" />
-            <span className="font-bold text-xl hidden md:inline-block">
+            <span className="font-bold text-xl hidden md:inline-block dark:text-nightTP">
               Inpact
             </span>
           </Link>
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-4 dark:text-nightTS">
             {[
               { to: "/dashboard", icon: LayoutDashboard, label: "Dashboard" },
               {
@@ -225,7 +225,7 @@ export default function MessagesPage() {
               <Input
                 type="search"
                 placeholder="Search..."
-                className="w-[200px] pl-8 md:w-[300px] rounded-full bg-[hsl(210,40%,96.1%)] border-[hsl(214.3,31.8%,91.4%)]"
+                className="w-[200px] pl-8 md:w-[300px] rounded-full bg-[hsl(210,40%,96.1%)] border-[hsl(214.3,31.8%,91.4%)] dark:bg-[#364152] dark:border-nightP"
               />
             </div>
             <ModeToggle />
diff --git a/Frontend/src/pages/ResetPassword.tsx b/Frontend/src/pages/ResetPassword.tsx
index 2beff71..4fe7914 100644
--- a/Frontend/src/pages/ResetPassword.tsx
+++ b/Frontend/src/pages/ResetPassword.tsx
@@ -5,353 +5,347 @@ import { Check, Eye, EyeOff, Rocket } from "lucide-react";
 import { supabase } from "../utils/supabase";
 
 export default function ResetPasswordPage() {
-  const router = useNavigate();
-  const searchParams = useParams();
+    const router = useNavigate();
+    const searchParams = useParams();
 
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [isSuccess, setIsSuccess] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const progressRef = useRef<NodeJS.Timeout | null>(null);
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [showPassword, setShowPassword] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState("");
+    const [isSuccess, setIsSuccess] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const progressRef = useRef<NodeJS.Timeout | null>(null);
 
-  useEffect(() => {
-    // Supabase will automatically handle the session if the user comes from the reset link
-    // No need to manually extract token
-  }, []);
+    useEffect(() => {
+        // Supabase will automatically handle the session if the user comes from the reset link
+        // No need to manually extract token
+    }, []);
 
-  useEffect(() => {
-    if (isSuccess) {
-      setProgress(0);
-      progressRef.current = setInterval(() => {
-        setProgress((prev) => {
-          if (prev >= 100) {
+    useEffect(() => {
+        if (isSuccess) {
+            setProgress(0);
+            progressRef.current = setInterval(() => {
+                setProgress((prev) => {
+                    if (prev >= 100) {
+                        if (progressRef.current) clearInterval(progressRef.current);
+                        router("/dashboard");
+                        return 100;
+                    }
+                    return prev + (100 / 30); // 3 seconds, 100ms interval
+                });
+            }, 100);
+        }
+        return () => {
             if (progressRef.current) clearInterval(progressRef.current);
-            router("/dashboard");
-            return 100;
-          }
-          return prev + (100 / 30); // 3 seconds, 100ms interval
-        });
-      }, 100);
-    }
-    return () => {
-      if (progressRef.current) clearInterval(progressRef.current);
-    };
-  }, [isSuccess, router]);
+        };
+    }, [isSuccess, router]);
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
 
-    if (password !== confirmPassword) {
-      setError("Passwords don't match");
-      return;
-    }
+        if (password !== confirmPassword) {
+            setError("Passwords don't match");
+            return;
+        }
 
-    setIsLoading(true);
-    setError("");
+        setIsLoading(true);
+        setError("");
 
-    try {
-      // Update the user's password using Supabase Auth
-      // Supabase automatically authenticates the user from the reset link
-      const { error } = await supabase.auth.updateUser({ password });
-      if (error) throw error;
-      setIsSuccess(true);
-      // After success,redirect to dashboard
-    } catch (err: any) {
-      
-      setError(err.message || "Something went wrong. Please try again.");
-    } finally {
-      setIsLoading(false);
-    }
-  };
+        try {
+            // Update the user's password using Supabase Auth
+            // Supabase automatically authenticates the user from the reset link
+            const { error } = await supabase.auth.updateUser({ password });
+            if (error) throw error;
+            setIsSuccess(true);
+            // After success,redirect to dashboard
+        } catch (err: any) {
 
-  const passwordStrength = () => {
-    if (!password)
-      return { strength: 0, text: "", color: "bg-gray-200 dark:bg-gray-700" };
+            setError(err.message || "Something went wrong. Please try again.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const passwordStrength = () => {
+        if (!password)
+            return { strength: 0, text: "", color: "bg-gray-200 dark:bg-gray-700" };
 
-    let strength = 0;
-    if (password.length >= 8) strength += 1;
-    if (/[A-Z]/.test(password)) strength += 1;
-    if (/[0-9]/.test(password)) strength += 1;
-    if (/[^A-Za-z0-9]/.test(password)) strength += 1;
+        let strength = 0;
+        if (password.length >= 8) strength += 1;
+        if (/[A-Z]/.test(password)) strength += 1;
+        if (/[0-9]/.test(password)) strength += 1;
+        if (/[^A-Za-z0-9]/.test(password)) strength += 1;
 
-    const strengthMap = [
-      { text: "Weak", color: "bg-red-500" },
-      { text: "Fair", color: "bg-orange-500" },
-      { text: "Good", color: "bg-yellow-500" },
-      { text: "Strong", color: "bg-green-500" },
-    ];
+        const strengthMap = [
+            { text: "Weak", color: "bg-red-500" },
+            { text: "Fair", color: "bg-orange-500" },
+            { text: "Good", color: "bg-yellow-500" },
+            { text: "Strong", color: "bg-green-500" },
+        ];
 
-    return {
-      strength,
-      text: strengthMap[strength - 1]?.text || "",
-      color: strengthMap[strength - 1]?.color || "bg-gray-200 dark:bg-gray-700",
+        return {
+            strength,
+            text: strengthMap[strength - 1]?.text || "",
+            color: strengthMap[strength - 1]?.color || "bg-gray-200 dark:bg-gray-700",
+        };
     };
-  };
 
-  const { strength, text, color } = passwordStrength();
+    const { strength, text, color } = passwordStrength();
 
-  if (isSuccess) {
-    return (
-      <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800">
-        <div className="flex justify-between items-center p-6">
-          <Link
-            to="/"
-            className="flex items-center space-x-2 transition-transform duration-200 hover:scale-105"
-          >
-            <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-            <span className="font-bold text-xl text-gray-900 dark:text-white">
-              Inpact
-            </span>
-          </Link>
-        </div>
-        <div className="flex-1 flex items-center justify-center p-6">
-          <div className="w-full max-w-md">
-            <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden p-8 text-center">
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-                Password Changed Successfully
-              </h2>
-              <p className="text-gray-600 dark:text-gray-300 mb-6">
-                Redirecting you to your application...
-              </p>
-              <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden mb-2">
-                <div
-                  className="h-full bg-purple-600 transition-all duration-100"
-                  style={{ width: `${progress}%` }}
-                ></div>
-              </div>
+    if (isSuccess) {
+        return (
+            <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-50 to-indigo-50 dark:bg-nightP">
+                <div className="flex justify-between items-center p-6 dark:bg-nightP">
+                    <Link
+                        to="/"
+                        className="flex items-center space-x-2 transition-transform duration-200 hover:scale-105"
+                    >
+                        <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+                        <span className="font-bold text-xl text-gray-900 dark:text-white">
+                            Inpact
+                        </span>
+                    </Link>
+                </div>
+                <div className="flex-1 flex items-center justify-center p-6 dark:bg-nightP">
+                    <div className="w-full max-w-md">
+                        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden p-8 text-center">
+                            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+                                Password Changed Successfully
+                            </h2>
+                            <p className="text-gray-600 dark:text-gray-300 mb-6">
+                                Redirecting you to your application...
+                            </p>
+                            <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden mb-2">
+                                <div
+                                    className="h-full bg-purple-600 transition-all duration-100"
+                                    style={{ width: `${progress}%` }}
+                                ></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <footer className="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
+                    © 2024 Inpact. All rights reserved.
+                </footer>
             </div>
-          </div>
-        </div>
-        <footer className="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
-          © 2024 Inpact. All rights reserved.
-        </footer>
-      </div>
-    );
-  }
+        );
+    }
 
-  return (
-    <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800">
-      <div className="flex justify-between items-center p-6">
-        <Link
-          to="/"
-          className="flex items-center space-x-2 transition-transform duration-200 hover:scale-105"
-        >
-          <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-          <span className="font-bold text-xl text-gray-900 dark:text-white">
-            Inpact
-          </span>
-        </Link>
-      </div>
+    return (
+        <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-50 to-indigo-50">
+            <div className="flex justify-between items-center p-6 dark:bg-nightP">
+                <Link
+                    to="/"
+                    className="flex items-center space-x-2 transition-transform duration-200 hover:scale-105"
+                >
+                    <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+                    <span className="font-bold text-xl text-gray-900 dark:text-white">
+                        Inpact
+                    </span>
+                </Link>
+            </div>
 
-      <div className="flex-1 flex items-center justify-center p-6">
-        <div className="w-full max-w-md">
-          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
-            <div className="p-8">
-              {error && (
-                <div className="mb-6 p-4 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 animate-[pulse_1s_ease-in-out]">
-                  {error}
-                </div>
-              )}
+            <div className="flex-1 flex items-center justify-center p-6 dark:bg-nightP">
+                <div className="w-full max-w-md">
+                    <div className="bg-white dark:bg-nightS rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
+                        <div className="p-8">
+                            {error && (
+                                <div className="mb-6 p-4 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 animate-[pulse_1s_ease-in-out]">
+                                    {error}
+                                </div>
+                            )}
 
-              <form onSubmit={handleSubmit} className="space-y-6">
-                <div className="space-y-2">
-                  <label
-                    htmlFor="password"
-                    className="text-sm font-medium text-gray-700 dark:text-gray-300"
-                  >
-                    New Password
-                  </label>
-                  <div className="relative">
-                    <input
-                      id="password"
-                      type={showPassword ? "text" : "password"}
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                      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>
+                            <form onSubmit={handleSubmit} className="space-y-6">
+                                <div className="space-y-2">
+                                    <label
+                                        htmlFor="password"
+                                        className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                                    >
+                                        New Password
+                                    </label>
+                                    <div className="relative">
+                                        <input
+                                            id="password"
+                                            type={showPassword ? "text" : "password"}
+                                            value={password}
+                                            onChange={(e) => setPassword(e.target.value)}
+                                            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>
 
-                  {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 ${
-                              password.length >= 8
-                                ? "text-green-500"
-                                : "text-gray-400"
-                            }`}
-                          >
-                            {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(password)
-                                ? "text-green-500"
-                                : "text-gray-400"
-                            }`}
-                          >
-                            {/[A-Z]/.test(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(password)
-                                ? "text-green-500"
-                                : "text-gray-400"
-                            }`}
-                          >
-                            {/[0-9]/.test(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(password)
-                                ? "text-green-500"
-                                : "text-gray-400"
-                            }`}
-                          >
-                            {/[^A-Za-z0-9]/.test(password) ? (
-                              <Check className="h-3 w-3" />
-                            ) : (
-                              "○"
-                            )}
-                          </span>
-                          At least 1 special character
-                        </li>
-                      </ul>
-                    </div>
-                  )}
-                </div>
+                                    {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 ${password.length >= 8
+                                                                ? "text-green-500"
+                                                                : "text-gray-400"
+                                                            }`}
+                                                    >
+                                                        {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(password)
+                                                                ? "text-green-500"
+                                                                : "text-gray-400"
+                                                            }`}
+                                                    >
+                                                        {/[A-Z]/.test(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(password)
+                                                                ? "text-green-500"
+                                                                : "text-gray-400"
+                                                            }`}
+                                                    >
+                                                        {/[0-9]/.test(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(password)
+                                                                ? "text-green-500"
+                                                                : "text-gray-400"
+                                                            }`}
+                                                    >
+                                                        {/[^A-Za-z0-9]/.test(password) ? (
+                                                            <Check className="h-3 w-3" />
+                                                        ) : (
+                                                            "○"
+                                                        )}
+                                                    </span>
+                                                    At least 1 special character
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    )}
+                                </div>
 
-                <div className="space-y-2">
-                  <label
-                    htmlFor="confirmPassword"
-                    className="text-sm font-medium text-gray-700 dark:text-gray-300"
-                  >
-                    Confirm Password
-                  </label>
-                  <div className="relative">
-                    <input
-                      id="confirmPassword"
-                      type={showPassword ? "text" : "password"}
-                      value={confirmPassword}
-                      onChange={(e) => setConfirmPassword(e.target.value)}
-                      required
-                      className={`w-full px-4 py-3 rounded-lg border 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 ${
-                        confirmPassword && password !== confirmPassword
-                          ? "border-red-500 dark:border-red-500"
-                          : "border-gray-300 dark:border-gray-600"
-                      }`}
-                      placeholder="••••••••"
-                    />
-                  </div>
-                  {confirmPassword && password !== confirmPassword && (
-                    <p className="text-xs text-red-500 mt-1">
-                      Passwords don't match
-                    </p>
-                  )}
-                </div>
+                                <div className="space-y-2">
+                                    <label
+                                        htmlFor="confirmPassword"
+                                        className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                                    >
+                                        Confirm Password
+                                    </label>
+                                    <div className="relative">
+                                        <input
+                                            id="confirmPassword"
+                                            type={showPassword ? "text" : "password"}
+                                            value={confirmPassword}
+                                            onChange={(e) => setConfirmPassword(e.target.value)}
+                                            required
+                                            className={`w-full px-4 py-3 rounded-lg border 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 ${confirmPassword && password !== confirmPassword
+                                                    ? "border-red-500 dark:border-red-500"
+                                                    : "border-gray-300 dark:border-gray-600"
+                                                }`}
+                                            placeholder="••••••••"
+                                        />
+                                    </div>
+                                    {confirmPassword && password !== confirmPassword && (
+                                        <p className="text-xs text-red-500 mt-1">
+                                            Passwords don't match
+                                        </p>
+                                    )}
+                                </div>
 
-                <button
-                  type="submit"
-                  disabled={
-                    isLoading ||
-                    (!!confirmPassword && password !== confirmPassword)
-                  }
-                  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 ||
-                    (!!confirmPassword && password !== confirmPassword)
-                      ? "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>
-                      Resetting password...
+                                <button
+                                    type="submit"
+                                    disabled={
+                                        isLoading ||
+                                        (!!confirmPassword && password !== confirmPassword)
+                                    }
+                                    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 ||
+                                            (!!confirmPassword && password !== confirmPassword)
+                                            ? "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>
+                                            Resetting password...
+                                        </div>
+                                    ) : (
+                                        "Reset Password"
+                                    )}
+                                </button>
+                            </form>
+                        </div>
                     </div>
-                  ) : (
-                    "Reset Password"
-                  )}
-                </button>
-              </form>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
 
-      <footer className="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
-        © 2024 Inpact. All rights reserved.
-      </footer>
-    </div>
-  );
+            <footer className="py-6 text-center text-sm text-gray-500 dark:text-nightTS dark:bg-nightP">
+                © 2024 Inpact. All rights reserved.
+            </footer>
+        </div>
+    );
 }
diff --git a/Frontend/src/pages/Signup.tsx b/Frontend/src/pages/Signup.tsx
index cc95e51..d15a28f 100644
--- a/Frontend/src/pages/Signup.tsx
+++ b/Frontend/src/pages/Signup.tsx
@@ -5,540 +5,533 @@ import { supabase } from "../utils/supabase";
 import { useAuth } from "@/context/AuthContext";
 
 export default function SignupPage() {
-  const navigate = useNavigate();
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    password: "",
-    username: "",
-    accountType: "creator",
-  });
-  const [showPassword, setShowPassword] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [step, setStep] = useState(1);
-  const [user, setuser] = useState("influencer");
-  const { login } = useAuth();
-  const [usernameError, setUsernameError] = useState("");
+    const navigate = useNavigate();
+    const [formData, setFormData] = useState({
+        name: "",
+        email: "",
+        password: "",
+        username: "",
+        accountType: "creator",
+    });
+    const [showPassword, setShowPassword] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState("");
+    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 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) => {
+        setuser(type);
+        setFormData((prev) => ({ ...prev, accountType: type }));
+    };
 
-  const handleAccountTypeChange = (type: string) => {
-    setuser(type);
-    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 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();
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+        if (step === 1) {
+            setStep(2);
+            return;
+        }
 
-    if (step === 1) {
-      setStep(2);
-      return;
-    }
+        setIsLoading(true);
+        setError("");
 
-    setIsLoading(true);
-    setError("");
+        // Validate username before submitting
+        const usernameValidation = validateUsername(formData.username);
+        if (usernameValidation) {
+            setUsernameError(usernameValidation);
+            setIsLoading(false);
+            return;
+        }
 
-    // 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.");
+                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 } },
+            });
 
-    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.");
-        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 } },
-      });
+            if (error) {
+                console.error("Signup error:", error.message);
+                setError(error.message);
+                setIsLoading(false);
+                return;
+            }
 
-      if (error) {
-        console.error("Signup error:", error.message);
-        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;
+                }
+            }
 
-      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}`);
+        } catch (err) {
+            setError("Something went wrong. Please try again.");
+        } finally {
+            setIsLoading(false);
         }
-      }
-
-      setIsLoading(false);
-      navigate(`/BasicDetails/${accountType}`);
-    } catch (err) {
-      setError("Something went wrong. Please try again.");
-    } finally {
-      setIsLoading(false);
-    }
-  };
+    };
 
-  const handleGoogleSignUp = async () => {
-    const { data, error } = await supabase.auth.signInWithOAuth({
-      provider: "google",
-    });
+    const handleGoogleSignUp = async () => {
+        const { data, error } = await supabase.auth.signInWithOAuth({
+            provider: "google",
+        });
 
-    if (error) {
-      console.log("Google login error", error);
-      return;
-    }
+        if (error) {
+            console.log("Google login error", error);
+            return;
+        }
 
-    supabase.auth.onAuthStateChange((event, session) => {
-      if (session) {
-        login();
-      }
-    });
-  };
+        supabase.auth.onAuthStateChange((event, session) => {
+            if (session) {
+                login();
+            }
+        });
+    };
 
-  const passwordStrength = () => {
-    const { password } = formData;
-    if (!password)
-      return { strength: 0, text: "", color: "bg-gray-200 dark:bg-gray-700" };
+    const passwordStrength = () => {
+        const { password } = formData;
+        if (!password)
+            return { strength: 0, text: "", color: "bg-gray-200 dark:bg-gray-700" };
 
-    let strength = 0;
-    if (password.length >= 8) strength += 1;
-    if (/[A-Z]/.test(password)) strength += 1;
-    if (/[0-9]/.test(password)) strength += 1;
-    if (/[^A-Za-z0-9]/.test(password)) strength += 1;
+        let strength = 0;
+        if (password.length >= 8) strength += 1;
+        if (/[A-Z]/.test(password)) strength += 1;
+        if (/[0-9]/.test(password)) strength += 1;
+        if (/[^A-Za-z0-9]/.test(password)) strength += 1;
 
-    const strengthMap = [
-      { text: "Weak", color: "bg-red-500" },
-      { text: "Fair", color: "bg-orange-500" },
-      { text: "Good", color: "bg-yellow-500" },
-      { text: "Strong", color: "bg-green-500" },
-    ];
+        const strengthMap = [
+            { text: "Weak", color: "bg-red-500" },
+            { text: "Fair", color: "bg-orange-500" },
+            { text: "Good", color: "bg-yellow-500" },
+            { text: "Strong", color: "bg-green-500" },
+        ];
 
-    return {
-      strength,
-      text: strengthMap[strength - 1]?.text || "",
-      color: strengthMap[strength - 1]?.color || "bg-gray-200 dark:bg-gray-700",
+        return {
+            strength,
+            text: strengthMap[strength - 1]?.text || "",
+            color: strengthMap[strength - 1]?.color || "bg-gray-200 dark:bg-gray-700",
+        };
     };
-  };
 
-  const { strength, text, color } = passwordStrength();
+    const { strength, text, color } = passwordStrength();
 
-  return (
-    <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800">
-      <div className="flex justify-between items-center p-6">
-        <Link
-          to="/"
-          className="flex items-center space-x-2 transition-transform duration-200 hover:scale-105"
-        >
-          <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-          <span className="font-bold text-xl text-gray-900 dark:text-white">
-            Inpact
-          </span>
-        </Link>
-        <div className="flex space-x-4">
-          <span className="text-sm text-gray-600 dark:text-gray-300">
-            Already have an account?
-          </span>
-          <Link
-            to="/login"
-            className="text-sm font-medium text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200"
-          >
-            Sign in
-          </Link>
-        </div>
-      </div>
+    return (
+        <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-50 to-indigo-50 dark:bg-nightP">
+            <div className="flex justify-between items-center p-6 dark:bg-nightP">
+                <Link
+                    to="/"
+                    className="flex items-center space-x-2 transition-transform duration-200 hover:scale-105"
+                >
+                    <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+                    <span className="font-bold text-xl text-gray-900 dark:text-white">
+                        Inpact
+                    </span>
+                </Link>
+                <div className="flex space-x-4">
+                    <span className="text-sm text-gray-600 dark:text-gray-300">
+                        Already have an account?
+                    </span>
+                    <Link
+                        to="/login"
+                        className="text-sm font-medium text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200"
+                    >
+                        Sign in
+                    </Link>
+                </div>
+            </div>
 
-      <div className="flex-1 flex items-center justify-center p-6">
-        <div className="w-full max-w-md">
-          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
-            <div className="p-8">
-              <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-                {step === 1 ? "Create your account" : "Complete your profile"}
-              </h2>
-              <p className="text-gray-600 dark:text-gray-300 mb-8">
-                {step === 1
-                  ? "Join the AI-powered creator collaboration platform"
-                  : "How do you want to use our Platform?"}
-              </p>
+            <div className="flex-1 flex items-center justify-center p-6 dark:bg-nightP">
+                <div className="w-full max-w-md">
+                    <div className="bg-white dark:bg-nightS rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
+                        <div className="p-8">
+                            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+                                {step === 1 ? "Create your account" : "Complete your profile"}
+                            </h2>
+                            <p className="text-gray-600 dark:text-gray-300 mb-8">
+                                {step === 1
+                                    ? "Join the AI-powered creator collaboration platform"
+                                    : "How do you want to use our Platform?"}
+                            </p>
 
-              {error && (
-                <div className="mb-6 p-4 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 animate-[pulse_1s_ease-in-out]">
-                  {error}
-                </div>
-              )}
+                            {error && (
+                                <div className="mb-6 p-4 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 animate-[pulse_1s_ease-in-out]">
+                                    {error}
+                                </div>
+                            )}
 
-              <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>
+                            <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>
+                                        <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" />
+                                            {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>
+                                    </>
                                 )}
-                              </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>
+                                <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>
 
-                {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>
-                )}
-              </form>
+                                {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>
+                                )}
+                            </form>
 
-              {step === 1 && (
-                <div className="mt-8">
-                  <div className="relative">
-                    <div className="absolute inset-0 flex items-center">
-                      <div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
-                    </div>
-                    <div className="relative flex justify-center text-sm">
-                      <span className="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
-                        Or continue with
-                      </span>
-                    </div>
-                  </div>
+                            {step === 1 && (
+                                <div className="mt-8">
+                                    <div className="relative">
+                                        <div className="absolute inset-0 flex items-center">
+                                            <div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
+                                        </div>
+                                        <div className="relative flex justify-center text-sm">
+                                            <span className="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
+                                                Or continue with
+                                            </span>
+                                        </div>
+                                    </div>
 
-                  <div className="mt-6 grid grid-cols-2 gap-3">
-                    <button
-                      type="button"
-                      onClick={handleGoogleSignUp}
-                      className="w-full inline-flex justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200"
-                    >
-                      <svg
-                        className="h-5 w-5 mr-2"
-                        viewBox="0 0 24 24"
-                        fill="currentColor"
-                      >
-                        <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z" />
-                      </svg>
-                      Google
-                    </button>
-                    <button
-                      type="button"
-                      className="w-full inline-flex justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200"
-                    >
-                      <svg
-                        className="h-5 w-5 mr-2"
-                        viewBox="0 0 24 24"
-                        fill="currentColor"
-                      >
-                        <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
-                      </svg>
-                      Facebook
-                    </button>
-                  </div>
+                                    <div className="mt-6 grid grid-cols-2 gap-3">
+                                        <button
+                                            type="button"
+                                            onClick={handleGoogleSignUp}
+                                            className="w-full inline-flex justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200"
+                                        >
+                                            <svg
+                                                className="h-5 w-5 mr-2"
+                                                viewBox="0 0 24 24"
+                                                fill="currentColor"
+                                            >
+                                                <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z" />
+                                            </svg>
+                                            Google
+                                        </button>
+                                        <button
+                                            type="button"
+                                            className="w-full inline-flex justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200"
+                                        >
+                                            <svg
+                                                className="h-5 w-5 mr-2"
+                                                viewBox="0 0 24 24"
+                                                fill="currentColor"
+                                            >
+                                                <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
+                                            </svg>
+                                            Facebook
+                                        </button>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
                 </div>
-              )}
             </div>
-          </div>
-        </div>
-      </div>
 
-      <footer className="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
-        © 2024 Inpact. All rights reserved.
-      </footer>
-    </div>
-  );
+            <footer className="py-6 text-center text-sm text-gray-500 dark:text-nightTS dark:bg-nightP">
+                © 2024 Inpact. All rights reserved.
+            </footer>
+        </div>
+    );
 }
diff --git a/Frontend/src/pages/Sponsorships.tsx b/Frontend/src/pages/Sponsorships.tsx
index 67e813e..bbb970e 100644
--- a/Frontend/src/pages/Sponsorships.tsx
+++ b/Frontend/src/pages/Sponsorships.tsx
@@ -5,15 +5,15 @@ import { UserNav } from "../components/user-nav"
 import { Button } from "../components/ui/button"
 import { Input } from "../components/ui/input"
 import {
-  BarChart3,
-  Briefcase,
-  DollarSign,
-  FileText,
-  LayoutDashboard,
-  MessageSquare,
-  Rocket,
-  Search,
-  Users,
+    BarChart3,
+    Briefcase,
+    DollarSign,
+    FileText,
+    LayoutDashboard,
+    MessageSquare,
+    Rocket,
+    Search,
+    Users,
 } from "lucide-react"
 import { Link } from "react-router-dom"
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar"
@@ -24,337 +24,336 @@ import { Label } from "../components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select"
 
 export default function SponsorshipsPage() {
-  return (
-    <div className="flex min-h-screen flex-col bg-white text-gray-900">
-      <header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60">
-        <div className="container flex h-16 items-center">
-          <Link to="/" className="flex items-center space-x-2 mr-6 ml-6">
-            <Rocket className="h-6 w-6 text-purple-600" />
-            <span className="font-bold text-xl hidden md:inline-block">Inpact</span>
-          </Link>
-          <div className="flex items-center space-x-4">
-            <Button variant="ghost" size="sm" className="w-9 px-0" asChild>
-              <Link to="/dashboard">
-                <LayoutDashboard className="h-5 w-5" />
-                <span className="sr-only">Dashboard</span>
-              </Link>
-            </Button>
-            <Button variant="ghost" size="sm" className="w-9 px-0" asChild>
-              <Link to="/dashboard/sponsorships">
-                <Briefcase className="h-5 w-5" />
-                <span className="sr-only">Sponsorships</span>
-              </Link>
-            </Button>
-            <Button variant="ghost" size="sm" className="w-9 px-0" asChild>
-              <Link to="/dashboard/collaborations">
-                <Users className="h-5 w-5" />
-                <span className="sr-only">Collaborations</span>
-              </Link>
-            </Button>
-            <Button variant="ghost" size="sm" className="w-9 px-0" asChild>
-              <Link to="/dashboard/contracts">
-                <FileText className="h-5 w-5" />
-                <span className="sr-only">Contracts</span>
-              </Link>
-            </Button>
-            <Button variant="ghost" size="sm" className="w-9 px-0" asChild>
-              <Link to="/dashboard/analytics">
-                <BarChart3 className="h-5 w-5" />
-                <span className="sr-only">Analytics</span>
-              </Link>
-            </Button>
-            <Button variant="ghost" size="sm" className="w-9 px-0" asChild>
-              <Link to="/dashboard/messages">
-                <MessageSquare className="h-5 w-5" />
-                <span className="sr-only">Messages</span>
-              </Link>
-            </Button>
-          </div>
-          <div className="ml-auto flex items-center space-x-4">
-            <div className="relative hidden md:flex">
-              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
-              <Input
-                type="search"
-                placeholder="Search..."
-                className="w-[200px] pl-8 md:w-[300px] rounded-full bg-gray-100"
-              />
-            </div>
-            <ModeToggle />
-            <UserNav />
-          </div>
-        </div>
-      </header>
-      <main className="flex-1 space-y-4 p-4 md:p-8 pt-6">
-        <div className="flex items-center justify-between">
-          <h1 className="text-3xl font-bold tracking-tight text-gray-900">AI-Driven Sponsorship Matchmaking</h1>
-          <div className="flex items-center space-x-2">
-            <Button className="bg-purple-600 text-white hover:bg-purple-700">
-              <DollarSign className="mr-2 h-4 w-4" />
-              Create Proposal
-            </Button>
-          </div>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <Card className="md:col-span-1">
-            <CardHeader>
-              <CardTitle className="text-gray-900">Filters</CardTitle>
-              <CardDescription className="text-gray-600">Refine your sponsorship matches</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="category" className="text-gray-900">Category</Label>
-                <Select defaultValue="all">
-                  <SelectTrigger id="category" className="bg-gray-100">
-                    <SelectValue placeholder="Select category" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Categories</SelectItem>
-                    <SelectItem value="fashion">Fashion</SelectItem>
-                    <SelectItem value="tech">Technology</SelectItem>
-                    <SelectItem value="beauty">Beauty</SelectItem>
-                    <SelectItem value="fitness">Fitness</SelectItem>
-                    <SelectItem value="food">Food</SelectItem>
-                    <SelectItem value="travel">Travel</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="space-y-2">
-                <Label className="text-gray-900">Budget Range</Label>
-                <div className="pt-2">
-                  <Slider defaultValue={[1000, 10000]} min={0} max={20000} step={100} />
+    return (
+        <div className="flex min-h-screen flex-col bg-white text-gray-900 dark:text-nightTS dark:bg-nightP">
+            <header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:bg-nightP dark:text-nightTS dark:border-nightS">
+                <div className="container flex h-16 items-center">
+                    <Link to="/" className="flex items-center space-x-2 mr-6 ml-6">
+                        <Rocket className="h-6 w-6 text-purple-600" />
+                        <span className="font-bold text-xl hidden md:inline-block dark:text-nightTP">Inpact</span>
+                    </Link>
+                    <div className="flex items-center space-x-4">
+                        <Button variant="ghost" size="sm" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]" asChild>
+                            <Link to="/dashboard">
+                                <LayoutDashboard className="h-5 w-5" />
+                                <span className="sr-only">Dashboard</span>
+                            </Link>
+                        </Button>
+                        <Button variant="ghost" size="sm" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]" asChild>
+                            <Link to="/dashboard/sponsorships">
+                                <Briefcase className="h-5 w-5" />
+                                <span className="sr-only">Sponsorships</span>
+                            </Link>
+                        </Button>
+                        <Button variant="ghost" size="sm" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]" asChild>
+                            <Link to="/dashboard/collaborations">
+                                <Users className="h-5 w-5" />
+                                <span className="sr-only">Collaborations</span>
+                            </Link>
+                        </Button>
+                        <Button variant="ghost" size="sm" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]" asChild>
+                            <Link to="/dashboard/contracts">
+                                <FileText className="h-5 w-5" />
+                                <span className="sr-only">Contracts</span>
+                            </Link>
+                        </Button>
+                        <Button variant="ghost" size="sm" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]" asChild>
+                            <Link to="/dashboard/analytics">
+                                <BarChart3 className="h-5 w-5" />
+                                <span className="sr-only">Analytics</span>
+                            </Link>
+                        </Button>
+                        <Button variant="ghost" size="sm" className="w-9 px-0 hover:bg-[hsl(210,40%,96.1%)] hover:text-[hsl(222.2,47.4%,11.2%)]" asChild>
+                            <Link to="/dashboard/messages">
+                                <MessageSquare className="h-5 w-5" />
+                                <span className="sr-only">Messages</span>
+                            </Link>
+                        </Button>
+                    </div>
+                    <div className="ml-auto flex items-center space-x-3">
+                        <div className="relative hidden md:flex">
+                            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-[hsl(215.4,16.3%,46.9%)] dark:text-nightTS" />
+                            <Input
+                                type="search"
+                                placeholder="Search..."
+                                className="w-[200px] pl-8 md:w-[300px] rounded-full bg-[hsl(210,40%,96.1%)] border-[hsl(214.3,31.8%,91.4%)] dark:bg-[#364152] dark:border-nightP" />
+                        </div>
+                        <ModeToggle />
+                        <UserNav />
+                    </div>
                 </div>
+            </header>
+            <main className="flex-1 space-y-4 p-4 md:p-8 pt-6 dark:text-nightTP dark:bg-nightP">
                 <div className="flex items-center justify-between">
-                  <span className="text-sm text-gray-600">$1,000</span>
-                  <span className="text-sm text-gray-600">$10,000</span>
+                    <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-nightTP">AI-Driven Sponsorship Matchmaking</h1>
+                    <div className="flex items-center space-x-2">
+                        <Button className="bg-purple-600 text-white hover:bg-purple-700">
+                            <DollarSign className="mr-2 h-4 w-4" />
+                            Create Proposal
+                        </Button>
+                    </div>
                 </div>
-              </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="campaign-type" className="text-gray-900">Campaign Type</Label>
-                <Select defaultValue="all">
-                  <SelectTrigger id="campaign-type" className="bg-gray-100">
-                    <SelectValue placeholder="Select type" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Types</SelectItem>
-                    <SelectItem value="post">Single Post</SelectItem>
-                    <SelectItem value="series">Content Series</SelectItem>
-                    <SelectItem value="long-term">Long-term Partnership</SelectItem>
-                    <SelectItem value="affiliate">Affiliate Program</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    <Card className="md:col-span-1">
+                        <CardHeader>
+                            <CardTitle className="text-gray-900 dark:text-nightTP">Filters</CardTitle>
+                            <CardDescription className="text-gray-600 dark:text-nightTS">Refine your sponsorship matches</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="category" className="text-gray-900 dark:text-nightTP">Category</Label>
+                                <Select defaultValue="all">
+                                    <SelectTrigger id="category" className="bg-gray-100 dark:bg-[#364152] dark:border-nightP">
+                                        <SelectValue placeholder="Select category" />
+                                    </SelectTrigger>
+                                    <SelectContent className="bg-white dark:bg-[#364152] dark:border-nightP">
+                                        <SelectItem value="all" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">All Categories</SelectItem>
+                                        <SelectItem value="fashion" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Fashion</SelectItem>
+                                        <SelectItem value="tech" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Technology</SelectItem>
+                                        <SelectItem value="beauty" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Beauty</SelectItem>
+                                        <SelectItem value="fitness" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Fitness</SelectItem>
+                                        <SelectItem value="food" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Food</SelectItem>
+                                        <SelectItem value="travel" className="dark:text-nightTS dark:hover:bg-nightP dark:bg-[#364152]">Travel</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="match-score" className="text-gray-900">Minimum Match Score</Label>
-                <Select defaultValue="80">
-                  <SelectTrigger id="match-score" className="bg-gray-100">
-                    <SelectValue placeholder="Select minimum score" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="90">90% and above</SelectItem>
-                    <SelectItem value="80">80% and above</SelectItem>
-                    <SelectItem value="70">70% and above</SelectItem>
-                    <SelectItem value="60">60% and above</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
+                            <div className="space-y-2">
+                                <Label className="text-gray-900 dark:text-nightTP">Budget Range</Label>
+                                <div className="pt-2">
+                                    <Slider defaultValue={[1000, 10000]} min={0} max={20000} step={100} />
+                                </div>
+                                <div className="flex items-center justify-between">
+                                    <span className="text-sm text-gray-600 dark:text-nightTS">$1,000</span>
+                                    <span className="text-sm text-gray-600 dark:text-nightTS">$10,000</span>
+                                </div>
+                            </div>
 
-              <Button className="w-full bg-purple-600 text-white hover:bg-purple-700">Apply Filters</Button>
-            </CardContent>
-          </Card>
+                            <div className="space-y-2">
+                                <Label htmlFor="campaign-type" className="text-gray-900 dark:text-nightTP">Campaign Type</Label>
+                                <Select defaultValue="all">
+                                    <SelectTrigger id="campaign-type" className="bg-gray-100 dark:bg-[#364152] dark:border-nightP">
+                                        <SelectValue placeholder="Select type" />
+                                    </SelectTrigger>
+                                    <SelectContent className="bg-white dark:bg-[#364152] dark:border-nightP">
+                                        <SelectItem value="all" className="dark:text-nightTS dark:hover:bg-nightP">All Types</SelectItem>
+                                        <SelectItem value="post" className="dark:text-nightTS dark:hover:bg-nightP">Single Post</SelectItem>
+                                        <SelectItem value="series" className="dark:text-nightTS dark:hover:bg-nightP">Content Series</SelectItem>
+                                        <SelectItem value="long-term" className="dark:text-nightTS dark:hover:bg-nightP">Long-term Partnership</SelectItem>
+                                        <SelectItem value="affiliate" className="dark:text-nightTS dark:hover:bg-nightP">Affiliate Program</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
 
-          <div className="md:col-span-3 space-y-4">
-            <Tabs defaultValue="matches">
-              <TabsList className="grid w-full grid-cols-3 bg-gray-100">
-                <TabsTrigger value="matches" className="text-gray-900">AI Matches</TabsTrigger>
-                <TabsTrigger value="active" className="text-gray-900">Active Deals</TabsTrigger>
-                <TabsTrigger value="history" className="text-gray-900">History</TabsTrigger>
-              </TabsList>
-              <TabsContent value="matches" className="space-y-4 pt-4">
-                <Card>
-                  <CardContent className="p-6">
-                    <div className="flex flex-col md:flex-row gap-6">
-                      <Avatar className="h-24 w-24">
-                        <AvatarImage src="/placeholder.svg?height=96&width=96" alt="EcoStyle" />
-                        <AvatarFallback className="bg-gray-200">ES</AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1 space-y-2">
-                        <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
-                          <div>
-                            <h3 className="text-xl font-bold text-gray-900">EcoStyle</h3>
-                            <p className="text-gray-600">Sustainable fashion brand</p>
-                          </div>
-                          <Badge className="w-fit text-lg px-3 py-1 bg-purple-100 text-purple-600">98% Match</Badge>
-                        </div>
-                        <p className="text-gray-600">
-                          EcoStyle is looking for lifestyle creators who can showcase their sustainable fashion line to
-                          environmentally conscious audiences. Their products include eco-friendly clothing,
-                          accessories, and home goods.
-                        </p>
-                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
-                          <div>
-                            <p className="text-sm text-gray-500">Budget</p>
-                            <p className="font-medium text-gray-900">$3,000 - $5,000</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Duration</p>
-                            <p className="font-medium text-gray-900">1-2 months</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Deliverables</p>
-                            <p className="font-medium text-gray-900">1 post, 2 stories</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Audience Match</p>
-                            <p className="font-medium text-gray-900">Very High</p>
-                          </div>
-                        </div>
-                        <div className="flex flex-wrap gap-2 pt-4">
-                          <Button className="bg-purple-600 text-white hover:bg-purple-700">View Full Details</Button>
-                          <Button variant="outline" className="border-gray-200 text-gray-900 hover:bg-gray-100">
-                            Contact Brand
-                          </Button>
-                          <Button variant="secondary" className="bg-gray-100 text-gray-900 hover:bg-gray-200">
-                            Generate Proposal
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
+                            <div className="space-y-2">
+                                <Label htmlFor="match-score" className="text-gray-900 dark:text-nightTP">Minimum Match Score</Label>
+                                <Select defaultValue="80">
+                                    <SelectTrigger id="match-score" className="bg-gray-100 dark:bg-[#364152] dark:border-nightP">
+                                        <SelectValue placeholder="Select minimum score" />
+                                    </SelectTrigger>
+                                    <SelectContent className="bg-white dark:bg-[#364152] dark:border-nightP">
+                                        <SelectItem value="90" className="dark:text-nightTS dark:hover:bg-nightP">90% and above</SelectItem>
+                                        <SelectItem value="80" className="dark:text-nightTS dark:hover:bg-nightP">80% and above</SelectItem>
+                                        <SelectItem value="70" className="dark:text-nightTS dark:hover:bg-nightP">70% and above</SelectItem>
+                                        <SelectItem value="60" className="dark:text-nightTS dark:hover:bg-nightP">60% and above</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
 
-                <Card>
-                  <CardContent className="p-6">
-                    <div className="flex flex-col md:flex-row gap-6">
-                      <Avatar className="h-24 w-24">
-                        <AvatarImage src="/placeholder.svg?height=96&width=96" alt="TechGadgets" />
-                        <AvatarFallback className="bg-gray-200">TG</AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1 space-y-2">
-                        <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
-                          <div>
-                            <h3 className="text-xl font-bold text-gray-900">TechGadgets</h3>
-                            <p className="text-gray-600">Consumer electronics company</p>
-                          </div>
-                          <Badge className="w-fit text-lg px-3 py-1 bg-purple-100 text-purple-600">95% Match</Badge>
-                        </div>
-                        <p className="text-gray-600">
-                          TechGadgets is seeking tech-savvy creators to review and showcase their new line of smart home
-                          products. They're looking for in-depth reviews that highlight features and user experience.
-                        </p>
-                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
-                          <div>
-                            <p className="text-sm text-gray-500">Budget</p>
-                            <p className="font-medium text-gray-900">$2,500 - $4,000</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Duration</p>
-                            <p className="font-medium text-gray-900">2-3 weeks</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Deliverables</p>
-                            <p className="font-medium text-gray-900">Review video + posts</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Audience Match</p>
-                            <p className="font-medium text-gray-900">High</p>
-                          </div>
-                        </div>
-                        <div className="flex flex-wrap gap-2 pt-4">
-                          <Button className="bg-purple-600 text-white hover:bg-purple-700">View Full Details</Button>
-                          <Button variant="outline" className="border-gray-200 text-gray-900 hover:bg-gray-100">
-                            Contact Brand
-                          </Button>
-                          <Button variant="secondary" className="bg-gray-100 text-gray-900 hover:bg-gray-200">
-                            Generate Proposal
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
+                            <Button className="w-full bg-purple-600 text-white hover:bg-purple-700">Apply Filters</Button>
+                        </CardContent>
+                    </Card>
 
-                <Card>
-                  <CardContent className="p-6">
-                    <div className="flex flex-col md:flex-row gap-6">
-                      <Avatar className="h-24 w-24">
-                        <AvatarImage src="/placeholder.svg?height=96&width=96" alt="FitLife" />
-                        <AvatarFallback className="bg-gray-200">FL</AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1 space-y-2">
-                        <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
-                          <div>
-                            <h3 className="text-xl font-bold text-gray-900">FitLife Supplements</h3>
-                            <p className="text-gray-600">Health and wellness brand</p>
-                          </div>
-                          <Badge className="w-fit text-lg px-3 py-1 bg-purple-100 text-purple-600">92% Match</Badge>
-                        </div>
-                        <p className="text-gray-600">
-                          FitLife is looking for health and fitness creators to promote their new line of plant-based
-                          supplements. They want authentic content showing how their products integrate into a healthy
-                          lifestyle.
-                        </p>
-                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
-                          <div>
-                            <p className="text-sm text-gray-500">Budget</p>
-                            <p className="font-medium text-gray-900">$1,800 - $3,500</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Duration</p>
-                            <p className="font-medium text-gray-900">3 months</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Deliverables</p>
-                            <p className="font-medium text-gray-900">Monthly content</p>
-                          </div>
-                          <div>
-                            <p className="text-sm text-gray-500">Audience Match</p>
-                            <p className="font-medium text-gray-900">Very High</p>
-                          </div>
-                        </div>
-                        <div className="flex flex-wrap gap-2 pt-4">
-                          <Button className="bg-purple-600 text-white hover:bg-purple-700">View Full Details</Button>
-                          <Button variant="outline" className="border-gray-200 text-gray-900 hover:bg-gray-100">
-                            Contact Brand
-                          </Button>
-                          <Button variant="secondary" className="bg-gray-100 text-gray-900 hover:bg-gray-200">
-                            Generate Proposal
-                          </Button>
-                        </div>
-                      </div>
+                    <div className="md:col-span-3 space-y-4">
+                        <Tabs defaultValue="matches">
+                            <TabsList className="grid w-full grid-cols-3 bg-gray-100  dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                <TabsTrigger value="matches">AI Matches</TabsTrigger>
+                                <TabsTrigger value="active">Active Deals</TabsTrigger>
+                                <TabsTrigger value="history">History</TabsTrigger>
+                            </TabsList>
+                            <TabsContent value="matches" className="space-y-4 pt-4">
+                                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                    <CardContent className="p-6">
+                                        <div className="flex flex-col md:flex-row gap-6">
+                                            <Avatar className="h-24 w-24 dark:bg-nightP">
+                                                <AvatarImage src="/placeholder.svg?height=96&width=96" alt="EcoStyle" />
+                                                <AvatarFallback className="bg-gray-200 dark:bg-white/70 dark:border-nightP dark:text-black">ES</AvatarFallback>
+                                            </Avatar>
+                                            <div className="flex-1 space-y-2">
+                                                <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
+                                                    <div>
+                                                        <h3 className="text-xl font-bold text-gray-900 dark:text-nightTP">EcoStyle</h3>
+                                                        <p className="text-gray-600 dark:text-nightTS">Sustainable fashion brand</p>
+                                                    </div>
+                                                    <Badge className="w-fit text-lg px-3 py-1 bg-purple-100 text-purple-600">98% Match</Badge>
+                                                </div>
+                                                <p className="text-gray-600 dark:text-nightTS">
+                                                    EcoStyle is looking for lifestyle creators who can showcase their sustainable fashion line to
+                                                    environmentally conscious audiences. Their products include eco-friendly clothing,
+                                                    accessories, and home goods.
+                                                </p>
+                                                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Budget</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">$3,000 - $5,000</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Duration</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">1-2 months</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Deliverables</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">1 post, 2 stories</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Audience Match</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">Very High</p>
+                                                    </div>
+                                                </div>
+                                                <div className="flex flex-wrap gap-2 pt-4">
+                                                    <Button className="bg-purple-600 text-white hover:bg-purple-700">View Full Details</Button>
+                                                    <Button variant="outline" className="border-gray-200 text-gray-900 hover:bg-gray-100">
+                                                        Contact Brand
+                                                    </Button>
+                                                    <Button variant="secondary" className="bg-gray-100 text-gray-900 hover:bg-gray-200">
+                                                        Generate Proposal
+                                                    </Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+
+                                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                    <CardContent className="p-6">
+                                        <div className="flex flex-col md:flex-row gap-6">
+                                            <Avatar className="h-24 w-24  dark:bg-nightP">
+                                                <AvatarImage src="/placeholder.svg?height=96&width=96" alt="TechGadgets" />
+                                                <AvatarFallback className="bg-gray-200 dark:bg-white/70 dark:border-nightP dark:text-black">TG</AvatarFallback>
+                                            </Avatar>
+                                            <div className="flex-1 space-y-2">
+                                                <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
+                                                    <div>
+                                                        <h3 className="text-xl font-bold text-gray-900 dark:text-nightTP">TechGadgets</h3>
+                                                        <p className="text-gray-600 dark:text-nightTS">Consumer electronics company</p>
+                                                    </div>
+                                                    <Badge className="w-fit text-lg px-3 py-1 bg-purple-100 text-purple-600">95% Match</Badge>
+                                                </div>
+                                                <p className="text-gray-600 dark:text-nightTS">
+                                                    TechGadgets is seeking tech-savvy creators to review and showcase their new line of smart home
+                                                    products. They're looking for in-depth reviews that highlight features and user experience.
+                                                </p>
+                                                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Budget</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">$2,500 - $4,000</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Duration</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">2-3 weeks</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Deliverables</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">Review video + posts</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Audience Match</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">High</p>
+                                                    </div>
+                                                </div>
+                                                <div className="flex flex-wrap gap-2 pt-4">
+                                                    <Button className="bg-purple-600 text-white hover:bg-purple-700">View Full Details</Button>
+                                                    <Button variant="outline" className="border-gray-200 text-gray-900 hover:bg-gray-100">
+                                                        Contact Brand
+                                                    </Button>
+                                                    <Button variant="secondary" className="bg-gray-100 text-gray-900 hover:bg-gray-200">
+                                                        Generate Proposal
+                                                    </Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+
+                                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                    <CardContent className="p-6">
+                                        <div className="flex flex-col md:flex-row gap-6">
+                                            <Avatar className="h-24 w-24 dark:bg-nightP">
+                                                <AvatarImage src="/placeholder.svg?height=96&width=96" alt="FitLife" />
+                                                <AvatarFallback className="bg-gray-200 dark:bg-white/70 dark:border-nightP dark:text-black">FL</AvatarFallback>
+                                            </Avatar>
+                                            <div className="flex-1 space-y-2">
+                                                <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
+                                                    <div>
+                                                        <h3 className="text-xl font-bold text-gray-900 dark:text-nightTP">FitLife Supplements</h3>
+                                                        <p className="text-gray-600 dark:text-nightTS">Health and wellness brand</p>
+                                                    </div>
+                                                    <Badge className="w-fit text-lg px-3 py-1 bg-purple-100 text-purple-600">92% Match</Badge>
+                                                </div>
+                                                <p className="text-gray-600 dark:text-nightTS">
+                                                    FitLife is looking for health and fitness creators to promote their new line of plant-based
+                                                    supplements. They want authentic content showing how their products integrate into a healthy
+                                                    lifestyle.
+                                                </p>
+                                                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Budget</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">$1,800 - $3,500</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Duration</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">3 months</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Deliverables</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">Monthly content</p>
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm text-gray-500 dark:text-nightTS">Audience Match</p>
+                                                        <p className="font-medium text-gray-900 dark:text-nightTP">Very High</p>
+                                                    </div>
+                                                </div>
+                                                <div className="flex flex-wrap gap-2 pt-4">
+                                                    <Button className="bg-purple-600 text-white hover:bg-purple-700">View Full Details</Button>
+                                                    <Button variant="outline" className="border-gray-200 text-gray-900 hover:bg-gray-100">
+                                                        Contact Brand
+                                                    </Button>
+                                                    <Button variant="secondary" className="bg-gray-100 text-gray-900 hover:bg-gray-200">
+                                                        Generate Proposal
+                                                    </Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+                            </TabsContent>
+                            <TabsContent value="active" className="pt-4">
+                                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                    <CardHeader>
+                                        <CardTitle className="text-gray-900 dark:text-nightTP">Active Sponsorships</CardTitle>
+                                        <CardDescription className="text-gray-600 dark:text-nightTS">Your current brand partnerships</CardDescription>
+                                    </CardHeader>
+                                    <CardContent>
+                                        <p className="text-sm text-gray-600 dark:text-nightTS">Your active sponsorships will appear here.</p>
+                                    </CardContent>
+                                </Card>
+                            </TabsContent>
+                            <TabsContent value="history" className="pt-4">
+                                <Card className="border border-gray-300 dark:border-nightS dark:bg-nightS dark:text-nightTS">
+                                    <CardHeader>
+                                        <CardTitle className="text-gray-900 dark:text-nightTP">Sponsorship History</CardTitle>
+                                        <CardDescription className="text-gray-600 dark:text-nightTS">Your past brand partnerships</CardDescription>
+                                    </CardHeader>
+                                    <CardContent>
+                                        <p className="text-sm text-gray-600 dark:text-nightTS">Your sponsorship history will appear here.</p>
+                                    </CardContent>
+                                </Card>
+                            </TabsContent>
+                        </Tabs>
                     </div>
-                  </CardContent>
-                </Card>
-              </TabsContent>
-              <TabsContent value="active" className="pt-4">
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="text-gray-900">Active Sponsorships</CardTitle>
-                    <CardDescription className="text-gray-600">Your current brand partnerships</CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <p className="text-sm text-gray-600">Your active sponsorships will appear here.</p>
-                  </CardContent>
-                </Card>
-              </TabsContent>
-              <TabsContent value="history" className="pt-4">
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="text-gray-900">Sponsorship History</CardTitle>
-                    <CardDescription className="text-gray-600">Your past brand partnerships</CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <p className="text-sm text-gray-600">Your sponsorship history will appear here.</p>
-                  </CardContent>
-                </Card>
-              </TabsContent>
-            </Tabs>
-          </div>
+                </div>
+            </main>
         </div>
-      </main>
-    </div>
-  )
-}
\ No newline at end of file
+    )
+}