diff --git a/Frontend/env-example b/Frontend/env-example
deleted file mode 100644
index 4ce57da..0000000
--- a/Frontend/env-example
+++ /dev/null
@@ -1,3 +0,0 @@
-VITE_SUPABASE_URL=https://your-project.supabase.co
-VITE_SUPABASE_ANON_KEY=your-anon-key-here
-VITE_YOUTUBE_API_KEY=your-youtube-api-key-here
\ No newline at end of file
diff --git a/Frontend/src/components/dashboard-header.tsx b/Frontend/src/components/dashboard-header.tsx
new file mode 100644
index 0000000..8ed90bc
--- /dev/null
+++ b/Frontend/src/components/dashboard-header.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import type { LucideIcon } from "lucide-react";
+import {
+  BarChart3,
+  Briefcase,
+  FileText,
+  LayoutDashboard,
+  LogOut,
+  MessageSquare,
+  Rocket,
+  Search,
+  Users,
+} from "lucide-react";
+
+import { ModeToggle } from "./mode-toggle";
+import { UserNav } from "./user-nav";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+type NavItem = {
+  to: string;
+  icon: LucideIcon;
+  label: string;
+};
+
+const DASHBOARD_NAV_ITEMS: NavItem[] = [
+  { 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" },
+];
+
+export type DashboardHeaderProps = {
+  showSearch?: boolean;
+  showQuickLogout?: boolean;
+  onLogout?: () => void;
+};
+
+export default function DashboardHeader({
+  showSearch = true,
+  showQuickLogout = false,
+  onLogout,
+}: DashboardHeaderProps) {
+  return (
+    <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">
+          {DASHBOARD_NAV_ITEMS.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">
+          {showSearch && (
+            <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 />
+
+          {showQuickLogout && typeof onLogout === "function" && (
+            <Button onClick={onLogout} variant="ghost" aria-label="Log out">
+              <LogOut className="h-5 w-5" />
+            </Button>
+          )}
+
+          <UserNav />
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/Frontend/src/pages/CollaborationDetails.tsx b/Frontend/src/pages/CollaborationDetails.tsx
index f0c29f9..aec120b 100644
--- a/Frontend/src/pages/CollaborationDetails.tsx
+++ b/Frontend/src/pages/CollaborationDetails.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { useParams, useNavigate, Link } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
 import { Button } from "../components/ui/button";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
@@ -8,8 +8,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs"
 import { Input } from "../components/ui/input";
 import { Textarea } from "../components/ui/textarea";
 import { Separator } from "../components/ui/separator";
-import { ModeToggle } from "../components/mode-toggle";
-import { UserNav } from "../components/user-nav";
+import DashboardHeader from "../components/dashboard-header";
 import { 
   ArrowLeft, 
   MessageSquare, 
@@ -17,7 +16,6 @@ import {
   CheckCircle, 
   Clock, 
   FileText, 
-  Users, 
   BarChart3,
   Send,
   Edit,
@@ -31,10 +29,6 @@ import {
   Star,
   TrendingUp,
   Activity,
-  LayoutDashboard,
-  Briefcase,
-  Search,
-  Rocket,
   X
 } from "lucide-react";
 import { activeCollabsMock } from "../components/collaboration-hub/activeCollabsMockData";
@@ -315,49 +309,7 @@ export default function CollaborationDetails() {
   return (
     <div className="flex min-h-screen flex-col bg-white text-gray-900">
       {/* Main Header */}
-      <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>
+      <DashboardHeader />
 
       {/* Page Header */}
       <div className="bg-white border-b border-gray-200">
diff --git a/Frontend/src/pages/Collaborations.tsx b/Frontend/src/pages/Collaborations.tsx
index dbbbbc8..30e7367 100644
--- a/Frontend/src/pages/Collaborations.tsx
+++ b/Frontend/src/pages/Collaborations.tsx
@@ -1,10 +1,6 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card"
-import { ModeToggle } from "../components/mode-toggle"
-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 DashboardHeader from "../components/dashboard-header"
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar"
 import { Badge } from "../components/ui/badge"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs"
@@ -45,51 +41,7 @@ export default function CollaborationsPage({ showHeader = true }: { showHeader?:
   };
   return (
     <div className="flex min-h-screen flex-col bg-white text-gray-900">
-      {showHeader && (
-        <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>
-      )}
+      {showHeader && <DashboardHeader />}
       <main className="flex-1 space-y-4 p-4 md:p-8 pt-6">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-6 items-start">
           {/* Filter Sidebar */}
diff --git a/Frontend/src/pages/DashboardPage.tsx b/Frontend/src/pages/DashboardPage.tsx
index e5a8fc2..987bb95 100644
--- a/Frontend/src/pages/DashboardPage.tsx
+++ b/Frontend/src/pages/DashboardPage.tsx
@@ -1,21 +1,11 @@
-import { Link } from "react-router-dom"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs"
-import { ModeToggle } from "../components/mode-toggle"
-import { UserNav } from "../components/user-nav"
 import { Button } from "../components/ui/button"
-import { Input } from "../components/ui/input"
+import DashboardHeader from "../components/dashboard-header"
 import {
   BarChart3,
   Briefcase,
   DollarSign,
-  FileText,
-  Icon,
-  LayoutDashboard,
-  LogOut,
-  MessageSquare,
-  Rocket,
-  Search,
   Users,
 } from "lucide-react"
 import { PerformanceMetrics } from "../components/dashboard/performance-metrics"
@@ -29,52 +19,7 @@ export default function DashboardPage() {
 
   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>
+      <DashboardHeader showQuickLogout onLogout={logout} />
       <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>
diff --git a/Frontend/src/pages/Messages.tsx b/Frontend/src/pages/Messages.tsx
index 332b854..ca63289 100644
--- a/Frontend/src/pages/Messages.tsx
+++ b/Frontend/src/pages/Messages.tsx
@@ -1,22 +1,10 @@
 import { useState } from "react";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
-import {
-  BarChart3,
-  Briefcase,
-  FileText,
-  LayoutDashboard,
-  MessageSquare,
-  Rocket,
-  Search,
-  Send,
-  Users,
-} from "lucide-react";
-import { Link } from "react-router-dom";
+import DashboardHeader from "../components/dashboard-header";
+import { Search, Send } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Badge } from "../components/ui/badge";
-import { ModeToggle } from "../components/mode-toggle";
-import { UserNav } from "../components/user-nav";
 import { ScrollArea } from "../components/ui/scroll-area";
 import { Separator } from "../components/ui/separator";
 import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
@@ -168,71 +156,7 @@ export default function MessagesPage() {
 
   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>
+      <DashboardHeader />
       {/* Old Code */}
       <main className="flex-1 hidden">
         {/* Sidebar */}
diff --git a/Frontend/src/pages/Sponsorships.tsx b/Frontend/src/pages/Sponsorships.tsx
index 67e813e..29a0752 100644
--- a/Frontend/src/pages/Sponsorships.tsx
+++ b/Frontend/src/pages/Sponsorships.tsx
@@ -1,21 +1,10 @@
 import React from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card"
-import { ModeToggle } from "../components/mode-toggle"
-import { UserNav } from "../components/user-nav"
+import DashboardHeader from "../components/dashboard-header"
 import { Button } from "../components/ui/button"
-import { Input } from "../components/ui/input"
 import {
-  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"
 import { Badge } from "../components/ui/badge"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs"
@@ -26,64 +15,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 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>
+      <DashboardHeader />
       <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>