From 68e8f6e002695d0e20598f2987dfb54137600509 Mon Sep 17 00:00:00 2001
From: Shanmuga Krishnan S M <shanmugakrishnan.240293@aids.ritchennai.edu.in>
Date: Thu, 13 Aug 2026 23:23:48 +0530
Subject: [PATCH] video playback enhanced

---
 src/components/Auth/GoogleAuthModal.tsx       |  2 +-
 src/components/FacultyCard/FacultyCard.tsx    | 24 ++---
 src/components/Footer/Footer.tsx              | 95 ++++---------------
 src/components/Header/Header.tsx              | 68 ++++++-------
 src/components/Sidebar/Sidebar.tsx            | 24 ++---
 src/index.css                                 | 44 ++++-----
 src/pages/Campus/Campus.tsx                   |  6 +-
 src/pages/Community/Community.tsx             |  4 +-
 src/pages/DevCollab/DevCollab.tsx             | 18 ++--
 src/pages/Events/Events.tsx                   | 74 +++++++--------
 src/pages/Home/Home.tsx                       | 52 +++++-----
 .../LeetcodeLeaderboard.tsx                   |  4 +-
 src/pages/Notes/Notes.tsx                     |  2 +-
 .../Raise/components/PortfolioShowcase.tsx    |  8 +-
 .../components/PortfolioShowcase.tsx          |  8 +-
 15 files changed, 189 insertions(+), 244 deletions(-)

diff --git a/src/components/Auth/GoogleAuthModal.tsx b/src/components/Auth/GoogleAuthModal.tsx
index 5d1aa2d..4d242e9 100644
--- a/src/components/Auth/GoogleAuthModal.tsx
+++ b/src/components/Auth/GoogleAuthModal.tsx
@@ -75,7 +75,7 @@ export default function GoogleAuthModal({ isOpen, onClose }: GoogleAuthModalProp
           >
             {/* Background Orbs */}
             <div className="absolute -top-20 -right-20 w-40 h-40 bg-orange-500/20 rounded-full blur-2xl pointer-events-none" />
-            <div className="absolute -bottom-20 -left-20 w-40 h-40 bg-blue-500/20 rounded-full blur-2xl pointer-events-none" />
+            <div className="absolute -bottom-20 -left-20 w-40 h-40 bg-violet-900/30 rounded-full blur-2xl pointer-events-none" />
 
             {/* Close Button */}
             <button
diff --git a/src/components/FacultyCard/FacultyCard.tsx b/src/components/FacultyCard/FacultyCard.tsx
index d804758..bf56e6d 100644
--- a/src/components/FacultyCard/FacultyCard.tsx
+++ b/src/components/FacultyCard/FacultyCard.tsx
@@ -32,7 +32,7 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
   const mailOptions = [
     { name: 'Default Mail App', url: `mailto:${faculty.email}`, icon: Monitor, color: 'text-gray-700', bg: 'bg-gray-100' },
     { name: 'Gmail', url: `https://mail.google.com/mail/?view=cm&fs=1&to=${faculty.email}`, icon: Mail, color: 'text-red-500', bg: 'bg-red-50' },
-    { name: 'Outlook', url: `https://outlook.office.com/mail/deeplink/compose?to=${faculty.email}`, icon: Mail, color: 'text-blue-600', bg: 'bg-blue-50' },
+    { name: 'Outlook', url: `https://outlook.office.com/mail/deeplink/compose?to=${faculty.email}`, icon: Mail, color: 'text-slate-800', bg: 'bg-slate-100' },
     { name: 'Yahoo Mail', url: `https://compose.mail.yahoo.com/?to=${faculty.email}`, icon: Mail, color: 'text-purple-600', bg: 'bg-purple-50' },
   ];
 
@@ -172,8 +172,8 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
                           className="flex items-center gap-4 p-3 rounded-xl hover:bg-white/80 transition-colors border group w-full"
                           style={{ backgroundColor: 'rgba(255, 255, 255, 0.6)', borderColor: `${from}15` }}
                         >
-                          <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center group-hover:bg-blue-500 transition-colors shrink-0">
-                            <Phone className="w-4 h-4 text-blue-500 group-hover:text-white transition-colors" />
+                          <div className="w-10 h-10 rounded-full bg-slate-900 flex items-center justify-center group-hover:bg-[#1E1B4B] transition-colors shrink-0">
+                            <Phone className="w-4 h-4 text-violet-300 group-hover:text-white transition-colors" />
                           </div>
                           <div className="overflow-hidden">
                             <p className="text-[11px] font-semibold text-[#94A3B8] uppercase tracking-wider mb-0.5" style={{ fontFamily: 'Inter, sans-serif' }}>Phone Number</p>
@@ -224,14 +224,14 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
                   {/* Section 2: Academic Info */}
                   <div className="bg-white rounded-[20px] shadow-sm border border-[#E8ECF4] p-6 sm:p-8">
                     <div className="flex items-center gap-3 mb-6">
-                      <div className="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
-                        <BookOpen className="w-5 h-5 text-indigo-500" />
+                      <div className="w-10 h-10 rounded-xl bg-slate-900 flex items-center justify-center shrink-0">
+                        <BookOpen className="w-5 h-5 text-violet-300" />
                       </div>
                       <h3 className="text-lg font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>Academic Information</h3>
                     </div>
                     <div className="flex flex-col gap-4">
-                      <div className="p-5 rounded-xl bg-indigo-50/30 border border-indigo-100/50">
-                        <p className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>Subjects Handling</p>
+                      <div className="p-5 rounded-xl bg-slate-900/40 border border-slate-800">
+                        <p className="text-xs font-bold text-violet-300 uppercase tracking-wider mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>Subjects Handling</p>
                         <p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif', lineHeight: '1.6' }}>{faculty.subjectsHandling || 'Not specified'}</p>
                       </div>
                       <div className="p-5 rounded-xl bg-teal-50/30 border border-teal-100/50">
@@ -239,8 +239,8 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
                         <p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif', lineHeight: '1.6' }}>{faculty.researchAreas || 'Not specified'}</p>
                       </div>
                       {faculty.studentsGuided && (
-                        <div className="p-5 rounded-xl bg-blue-50/30 border border-blue-100/50">
-                          <p className="text-xs font-bold text-blue-500 uppercase tracking-wider mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Students Guided</p>
+                        <div className="p-5 rounded-xl bg-slate-900/40 border border-slate-800">
+                          <p className="text-xs font-bold text-violet-300 uppercase tracking-wider mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Students Guided</p>
                           <div className="flex gap-8">
                             <div className="flex flex-col">
                               <span className="text-2xl font-bold text-[#1E293B]">{faculty.studentsGuided.ug}</span> 
@@ -310,10 +310,10 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
                           <p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.officeHours || 'Not specified'}</p>
                         </div>
                       </div>
-                      <div className="p-5 rounded-xl bg-blue-50/30 border border-blue-100/50 flex items-start gap-4">
-                        <Building2 className="w-6 h-6 text-blue-500 shrink-0 mt-0.5" />
+                      <div className="p-5 rounded-xl bg-slate-900/40 border border-slate-800 flex items-start gap-4">
+                        <Building2 className="w-6 h-6 text-violet-300 shrink-0 mt-0.5" />
                         <div>
-                          <p className="text-xs font-bold text-blue-500 uppercase tracking-wider mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Office Location</p>
+                          <p className="text-xs font-bold text-violet-300 uppercase tracking-wider mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Office Location</p>
                           <p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.office || 'Not specified'}</p>
                         </div>
                       </div>
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 508d42e..95e092d 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,105 +1,50 @@
-import { Link } from 'react-router-dom';
-import { GraduationCap, MapPin, Phone, Mail, ArrowRight } from 'lucide-react';
-
-const quickLinks = [
-  { label: 'Home', path: '/' },
-  { label: 'Notes & PYQs', path: '/notes' },
-  { label: 'RIT Chatbot', path: '/ai-assistant' },
-  { label: '3D Campus Map', path: '/campus' },
-  { label: 'Bus Routes', path: '/bus-routes' },
-  { label: 'Faculty Directory', path: '/faculty' },
-  { label: 'Events', path: '/events' },
-  { label: 'Community', path: '/community' },
-  { label: 'Dev Hub', path: '/collab' },
-];
+import { GraduationCap, MapPin, Phone, Mail } from 'lucide-react';
 
 export default function Footer() {
   return (
     <footer className="bg-[#0F172A] text-white border-t border-slate-800">
-      {/* CTA Banner - Professional Dark Slate Gray */}
-      <div className="bg-slate-800 border-b border-slate-700/60 py-10">
-        <div className="container-custom flex flex-col md:flex-row items-center justify-between gap-6 px-4">
-          <div>
-            <h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'Playfair Display, serif' }}>
-              Ready to explore RIT?
-            </h3>
-            <p className="text-slate-300 mt-1 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
-              Everything a fresher needs — all in one place.
-            </p>
-          </div>
-          <Link
-            to="/ai-assistant"
-            className="flex items-center gap-2 bg-slate-100 hover:bg-white text-slate-900 px-6 py-3 rounded-xl font-bold transition-all shadow-sm border border-slate-200 hover:scale-105"
-            style={{ fontFamily: 'Poppins, sans-serif' }}
-          >
-            <span>Ask Chatbot</span>
-            <ArrowRight className="w-4 h-4 text-slate-700" />
-          </Link>
-        </div>
-      </div>
-
       {/* Main Footer */}
-      <div className="container-custom py-12 px-4">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
+      <div className="container-custom py-6 sm:py-8 px-4">
+        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 md:gap-12">
           {/* Brand */}
-          <div>
-            <div className="flex items-center gap-2.5 mb-4">
-              <div className="w-10 h-10 rounded-xl flex items-center justify-center bg-indigo-600 border border-indigo-400/30 text-white shadow-md">
-                <GraduationCap className="w-5 h-5" />
+          <div className="max-w-md">
+            <div className="flex items-center gap-2.5 mb-2.5">
+              <div className="w-9 h-9 rounded-xl flex items-center justify-center bg-[#1E1B4B] border border-violet-800/40 text-white shadow-md">
+                <GraduationCap className="w-4 h-4" />
               </div>
               <div>
                 <div className="font-bold text-white text-sm" style={{ fontFamily: 'Poppins, sans-serif' }}>RIT Freshers Hub</div>
                 <div className="text-[10px] text-slate-400">Rajalakshmi Institute of Technology</div>
               </div>
             </div>
-            <p className="text-slate-400 text-sm leading-relaxed mb-5" style={{ fontFamily: 'Inter, sans-serif' }}>
+            <p className="text-slate-400 text-xs sm:text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
               Your all-in-one guide to campus life at RIT. Notes, chatbot, bus routes, 3D campus map, and developer hub — built for students.
             </p>
           </div>
 
-          {/* Quick Links */}
-          <div>
-            <h4 className="text-white font-semibold mb-4 text-sm uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
-              Quick Navigation
-            </h4>
-            <div className="grid grid-cols-2 gap-2">
-              {quickLinks.map((link) => (
-                <Link
-                  key={link.path}
-                  to={link.path}
-                  className="text-slate-400 hover:text-indigo-400 text-sm transition-colors flex items-center gap-1.5 group py-1"
-                  style={{ fontFamily: 'Inter, sans-serif' }}
-                >
-                  <span className="w-1 h-1 rounded-full bg-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity" />
-                  {link.label}
-                </Link>
-              ))}
-            </div>
-          </div>
-
           {/* Contact */}
-          <div>
-            <h4 className="text-white font-semibold mb-4 text-sm uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
+          <div className="shrink-0">
+            <h4 className="text-white font-semibold mb-2.5 text-xs sm:text-sm uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
               Campus Location & Contact
             </h4>
-            <ul className="space-y-3">
-              <li className="flex items-start gap-3 text-slate-400 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
-                <MapPin className="w-4 h-4 mt-0.5 shrink-0 text-indigo-400" />
+            <ul className="space-y-2 text-xs sm:text-sm">
+              <li className="flex items-start gap-2.5 text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>
+                <MapPin className="w-4 h-4 mt-0.5 shrink-0 text-violet-300" />
                 <span>Rajalakshmi Institute of Technology,<br />Kuthambakkam, Chennai - 600 124</span>
               </li>
-              <li className="flex items-center gap-3 text-slate-400 text-sm">
-                <Phone className="w-4 h-4 shrink-0 text-indigo-400" />
-                <a href="tel:+914423422890" className="hover:text-indigo-400 transition-colors">+91 44 2342 2890</a>
+              <li className="flex items-center gap-2.5 text-slate-400">
+                <Phone className="w-4 h-4 shrink-0 text-violet-300" />
+                <a href="tel:+914423422890" className="hover:text-violet-300 transition-colors">+91 44 2342 2890</a>
               </li>
-              <li className="flex items-center gap-3 text-slate-400 text-sm">
-                <Mail className="w-4 h-4 shrink-0 text-indigo-400" />
-                <a href="mailto:info@rit.ac.in" className="hover:text-indigo-400 transition-colors">info@rit.ac.in</a>
+              <li className="flex items-center gap-2.5 text-slate-400">
+                <Mail className="w-4 h-4 shrink-0 text-violet-300" />
+                <a href="mailto:info@rit.ac.in" className="hover:text-violet-300 transition-colors">info@rit.ac.in</a>
               </li>
             </ul>
           </div>
         </div>
 
-        <div className="mt-10 pt-6 border-t border-slate-800 text-center text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-3">
+        <div className="mt-6 pt-4 border-t border-slate-800/80 text-center text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-2">
           <span>© {new Date().getFullYear()} Rajalakshmi Institute of Technology. All rights reserved.</span>
           <span className="text-slate-400">RIT Student Portal v2.0</span>
         </div>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 802c5af..035993f 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -176,12 +176,12 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
   };
 
   return (
-    <header className="sticky top-0 z-30 w-full bg-white/90 backdrop-blur-md border-b border-slate-200/80 px-3 sm:px-4 lg:px-8 py-3 flex items-center justify-between shadow-xs">
+    <header className="sticky top-0 z-30 w-full bg-[#0F172A]/90 backdrop-blur-md border-b border-slate-800/80 px-3 sm:px-4 lg:px-8 py-3 flex items-center justify-between shadow-md text-white">
       <div className="flex items-center gap-2.5 sm:gap-4 min-w-0 flex-1">
         {/* Mobile Toggle */}
         <button
           onClick={onToggleSidebar}
-          className="lg:hidden p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors cursor-pointer shrink-0"
+          className="lg:hidden p-2 rounded-xl bg-slate-800/80 hover:bg-slate-700/80 text-slate-200 transition-colors cursor-pointer shrink-0 border border-slate-700/60"
           title="Toggle Navigation Menu"
         >
           <Menu className="w-5 h-5" />
@@ -203,24 +203,24 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
               }}
               onFocus={() => setIsSearchOpen(true)}
               placeholder="Search notes, faculty, bus routes..."
-              className="w-full pl-9 pr-8 sm:pr-12 py-2 text-xs font-medium bg-slate-100/90 hover:bg-slate-100 focus:bg-white border border-transparent focus:border-indigo-500/40 rounded-xl text-slate-800 placeholder-slate-400 outline-none transition-all shadow-inner truncate"
+              className="w-full pl-9 pr-8 sm:pr-12 py-2 text-xs font-medium bg-slate-900/90 hover:bg-slate-900 focus:bg-slate-950 border border-slate-800 focus:border-violet-500/50 rounded-xl text-white placeholder-slate-400 outline-none transition-all shadow-inner truncate"
               style={{ fontFamily: 'Inter, sans-serif' }}
             />
-            <span className="hidden sm:inline-flex absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-semibold text-slate-400 bg-white border border-slate-200 px-1.5 py-0.5 rounded-md shadow-2xs">
+            <span className="hidden sm:inline-flex absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-semibold text-slate-300 bg-slate-800 border border-slate-700 px-1.5 py-0.5 rounded-md shadow-2xs">
               ⌘K
             </span>
           </div>
 
           {/* Search Live Results Dropdown Overlay */}
           {isSearchOpen && (
-            <div className="absolute top-full left-0 mt-2 w-full sm:w-[420px] bg-white rounded-2xl border border-slate-200 shadow-xl overflow-hidden z-50 p-2 text-left">
-              <div className="flex items-center justify-between px-3 py-2 border-b border-slate-100">
+            <div className="absolute top-full left-0 mt-2 w-full sm:w-[420px] bg-[#0F172A] rounded-2xl border border-slate-800 shadow-2xl overflow-hidden z-50 p-2 text-left">
+              <div className="flex items-center justify-between px-3 py-2 border-b border-slate-800">
                 <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                   {searchQuery.trim() ? 'Search Results' : 'Quick Navigation'}
                 </span>
                 <button
                   onClick={() => setIsSearchOpen(false)}
-                  className="p-1 rounded-md text-slate-400 hover:text-slate-600 hover:bg-slate-100"
+                  className="p-1 rounded-md text-slate-400 hover:text-white hover:bg-slate-800"
                 >
                   <X className="w-3.5 h-3.5" />
                 </button>
@@ -234,20 +234,20 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
                       <div
                         key={i}
                         onClick={() => handleSelectResult(res.path)}
-                        className="flex items-center justify-between p-2.5 rounded-xl hover:bg-indigo-50/70 cursor-pointer transition-colors group"
+                        className="flex items-center justify-between p-2.5 rounded-xl hover:bg-slate-800/80 cursor-pointer transition-colors group"
                       >
                         <div className="flex items-center gap-3 min-w-0">
-                          <div className="w-8 h-8 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center shrink-0">
+                          <div className="w-8 h-8 rounded-lg bg-[#1E1B4B] text-violet-300 flex items-center justify-center shrink-0 border border-violet-800/40">
                             <Icon className="w-4 h-4" />
                           </div>
                           <div className="flex flex-col min-w-0">
-                            <span className="text-xs font-bold text-slate-900 group-hover:text-indigo-700 truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                            <span className="text-xs font-bold text-white group-hover:text-violet-300 truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
                               {res.title}
                             </span>
-                            <span className="text-[11px] text-slate-500 truncate">{res.desc}</span>
+                            <span className="text-[11px] text-slate-400 truncate">{res.desc}</span>
                           </div>
                         </div>
-                        <span className="text-[9px] font-bold px-2 py-0.5 rounded-md bg-slate-100 text-slate-600 shrink-0">
+                        <span className="text-[9px] font-bold px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 shrink-0 border border-slate-700">
                           {res.category}
                         </span>
                       </div>
@@ -255,25 +255,25 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
                   })
                 ) : (
                   <div className="p-4 text-center space-y-2">
-                    <span className="text-xs text-slate-500 block">
+                    <span className="text-xs text-slate-400 block">
                       {searchQuery.trim() ? `No matches found for "${searchQuery}"` : 'Type to search notes, faculty, routes & clubs'}
                     </span>
                     <div className="flex flex-wrap justify-center gap-1.5 pt-1">
                       <button
                         onClick={() => handleSelectResult('/notes')}
-                        className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-100 text-slate-700 font-medium hover:bg-indigo-50 hover:text-indigo-600"
+                        className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
                       >
                         Notes
                       </button>
                       <button
                         onClick={() => handleSelectResult('/bus-routes')}
-                        className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-100 text-slate-700 font-medium hover:bg-indigo-50 hover:text-indigo-600"
+                        className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
                       >
                         Bus Routes
                       </button>
                       <button
                         onClick={() => handleSelectResult('/faculty')}
-                        className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-100 text-slate-700 font-medium hover:bg-indigo-50 hover:text-indigo-600"
+                        className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
                       >
                         Faculty
                       </button>
@@ -289,8 +289,8 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
       {/* Right Header Status Bar */}
       <div className="flex items-center gap-2 sm:gap-3 shrink-0">
         {/* Date Display Badge */}
-        <div className="hidden md:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-100 text-slate-600 text-xs font-medium border border-slate-200/60">
-          <Calendar className="w-3.5 h-3.5 text-indigo-600" />
+        <div className="hidden md:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-900/90 text-slate-300 text-xs font-medium border border-slate-800">
+          <Calendar className="w-3.5 h-3.5 text-violet-400" />
           <span>{currentDate}</span>
         </div>
 
@@ -298,25 +298,25 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
         <div className="relative" ref={notifRef}>
           <button
             onClick={() => setIsNotifOpen((prev) => !prev)}
-            className="relative p-2 rounded-xl bg-slate-100 hover:bg-indigo-50 text-slate-600 hover:text-indigo-600 transition-colors cursor-pointer border border-slate-200/60"
+            className="relative p-2 rounded-xl bg-slate-900/90 hover:bg-slate-800 text-slate-300 hover:text-white transition-colors cursor-pointer border border-slate-800"
             title="Notifications"
           >
             <Bell className="w-4 h-4" />
             {unreadCount > 0 && (
-              <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-indigo-600 ring-2 ring-white" />
+              <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-violet-400 ring-2 ring-[#0F172A]" />
             )}
           </button>
 
           {/* Notifications Panel Dropdown */}
           {isNotifOpen && (
-            <div className="absolute right-0 top-full mt-2 w-80 sm:w-96 bg-white rounded-2xl border border-slate-200 shadow-xl overflow-hidden z-50 p-3 text-left">
-              <div className="flex items-center justify-between pb-2 border-b border-slate-100">
+            <div className="absolute right-0 top-full mt-2 w-80 sm:w-96 bg-[#0F172A] rounded-2xl border border-slate-800 shadow-2xl overflow-hidden z-50 p-3 text-left">
+              <div className="flex items-center justify-between pb-2 border-b border-slate-800">
                 <div className="flex items-center gap-2">
-                  <span className="text-xs font-bold text-slate-900" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                  <span className="text-xs font-bold text-white" style={{ fontFamily: 'Poppins, sans-serif' }}>
                     Notifications
                   </span>
                   {unreadCount > 0 && (
-                    <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-indigo-100 text-indigo-700">
+                    <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-violet-600 text-white">
                       {unreadCount} new
                     </span>
                   )}
@@ -326,7 +326,7 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
                   {unreadCount > 0 && (
                     <button
                       onClick={markAllAsRead}
-                      className="text-[11px] font-semibold text-indigo-600 hover:text-indigo-800"
+                      className="text-[11px] font-semibold text-violet-400 hover:text-violet-300"
                     >
                       Mark all read
                     </button>
@@ -334,7 +334,7 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
                   {notifications.length > 0 && (
                     <button
                       onClick={clearNotifications}
-                      className="text-[11px] font-semibold text-slate-400 hover:text-slate-600"
+                      className="text-[11px] font-semibold text-slate-400 hover:text-slate-300"
                     >
                       Clear
                     </button>
@@ -348,16 +348,16 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
                     <div
                       key={n.id}
                       className={`p-2.5 rounded-xl border transition-colors ${
-                        n.read ? 'bg-slate-50/60 border-slate-100' : 'bg-indigo-50/40 border-indigo-100'
+                        n.read ? 'bg-slate-900/40 border-slate-800' : 'bg-slate-900/90 border-slate-700'
                       }`}
                     >
                       <div className="flex items-center justify-between mb-1">
-                        <span className="text-xs font-bold text-slate-900 leading-snug" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                        <span className="text-xs font-bold text-white leading-snug" style={{ fontFamily: 'Poppins, sans-serif' }}>
                           {n.title}
                         </span>
                         <span className="text-[10px] text-slate-400 font-medium">{n.time}</span>
                       </div>
-                      <p className="text-[11px] text-slate-600 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
+                      <p className="text-[11px] text-slate-300 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
                         {n.message}
                       </p>
                     </div>
@@ -374,24 +374,24 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
 
         {/* User Auth Quick Badge (If Logged In) */}
         {isAuthenticated && user && (
-          <div className="flex items-center gap-2 pl-2 border-l border-slate-200">
+          <div className="flex items-center gap-2 pl-2 border-l border-slate-800">
             {user.pictureUrl ? (
               <img
                 src={user.pictureUrl}
                 alt={user.name}
-                className="w-8 h-8 rounded-full border border-indigo-300 object-cover"
+                className="w-8 h-8 rounded-full border border-slate-700 object-cover"
                 referrerPolicy="no-referrer"
               />
             ) : (
-              <div className="w-8 h-8 rounded-full bg-indigo-600 text-white font-bold text-xs flex items-center justify-center">
+              <div className="w-8 h-8 rounded-full bg-[#1E1B4B] text-white font-bold text-xs flex items-center justify-center border border-violet-800/40">
                 {user.name.charAt(0)}
               </div>
             )}
             <div className="hidden xl:flex flex-col text-left">
-              <span className="text-xs font-bold text-slate-800 leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
+              <span className="text-xs font-bold text-white leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
                 {user.name}
               </span>
-              <span className="text-[10px] text-indigo-600 font-semibold">
+              <span className="text-[10px] text-violet-300 font-semibold">
                 {isVerifiedStudent ? 'Verified Student' : 'RIT Account'}
               </span>
             </div>
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 4a7ac29..bddd70b 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -126,7 +126,7 @@ export default function Sidebar({
         <div className="p-4 sm:p-5 flex flex-col gap-5">
           <div className="flex items-center justify-between">
             <Link to="/" className="flex items-center gap-3 group min-w-0">
-              <div className="p-2 rounded-2xl bg-indigo-950/80 border border-indigo-500/20 shadow-sm shrink-0">
+              <div className="p-2 rounded-2xl bg-slate-950 border border-slate-800 shadow-sm shrink-0">
                 <img
                   src="/logo.png"
                   alt="RIT Logo"
@@ -138,7 +138,7 @@ export default function Sidebar({
                   <span className="font-bold text-white text-lg tracking-tight truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
                     RIT Portal
                   </span>
-                  <span className="text-[10px] text-indigo-300/70 font-medium tracking-wider uppercase truncate" style={{ fontFamily: 'Inter, sans-serif' }}>
+                  <span className="text-[10px] text-slate-400 font-medium tracking-wider uppercase truncate" style={{ fontFamily: 'Inter, sans-serif' }}>
                     Freshers Hub
                   </span>
                 </div>
@@ -156,7 +156,7 @@ export default function Sidebar({
             {/* Desktop Collapse Toggle Button */}
             <button
               onClick={onToggleCollapse}
-              className="hidden lg:flex p-1.5 rounded-xl bg-slate-800/80 hover:bg-indigo-900/60 text-indigo-300 hover:text-white border border-slate-700/60 transition-colors"
+              className="hidden lg:flex p-1.5 rounded-xl bg-slate-800/80 hover:bg-slate-700 text-slate-300 hover:text-white border border-slate-700/60 transition-colors"
               title={isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
             >
               {isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
@@ -167,20 +167,20 @@ export default function Sidebar({
           {!isCollapsed && (
             <Link
               to="/collab"
-              className="w-full flex items-center justify-between p-3 rounded-2xl bg-indigo-600 hover:bg-indigo-500 border border-indigo-400/30 text-white group transition-all duration-200 shadow-md shadow-indigo-950/50"
+              className="w-full flex items-center justify-between p-3 rounded-2xl bg-gradient-to-r from-[#1E1B4B] via-[#2E1065] to-[#1E1B4B] hover:from-[#2E1065] hover:to-[#3B0764] border border-violet-800/40 text-white group transition-all duration-200 shadow-md shadow-slate-950/50"
             >
               <div className="flex items-center gap-2.5 min-w-0">
-                <div className="w-7 h-7 rounded-xl bg-white/20 border border-white/30 flex items-center justify-center text-white shrink-0">
+                <div className="w-7 h-7 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center text-white shrink-0">
                   <GitBranch className="w-4 h-4" />
                 </div>
                 <div className="flex flex-col text-left min-w-0">
                   <span className="text-xs font-bold leading-tight truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
                     Dev Collab Hub
                   </span>
-                  <span className="text-[10px] text-indigo-100/80 truncate">Co-Developer Projects</span>
+                  <span className="text-[10px] text-violet-200/90 truncate">Co-Developer Projects</span>
                 </div>
               </div>
-              <ChevronRight className="w-4 h-4 text-indigo-200 group-hover:translate-x-0.5 transition-transform" />
+              <ChevronRight className="w-4 h-4 text-violet-200 group-hover:translate-x-0.5 transition-transform" />
             </Link>
           )}
 
@@ -210,7 +210,7 @@ export default function Sidebar({
                         isCollapsed ? 'justify-center px-0 py-3' : 'justify-between px-3 py-2.5'
                       } rounded-xl text-xs font-semibold transition-all duration-200 group ${
                         isActive
-                          ? 'bg-indigo-600 text-white shadow-sm border border-indigo-400/30'
+                          ? 'bg-gradient-to-r from-[#1E1B4B] to-[#2E1065] text-white shadow-sm border border-violet-800/50'
                           : 'text-slate-300 hover:text-white hover:bg-slate-800/60'
                       }`}
                       style={{ fontFamily: 'Poppins, sans-serif' }}
@@ -225,7 +225,7 @@ export default function Sidebar({
                       </div>
 
                       {!isCollapsed && item.highlight && !isActive && (
-                        <span className="w-2 h-2 rounded-full bg-indigo-400 animate-pulse" />
+                        <span className="w-2 h-2 rounded-full bg-violet-400 animate-pulse" />
                       )}
                     </Link>
                   );
@@ -244,11 +244,11 @@ export default function Sidebar({
                   <img
                     src={user.pictureUrl}
                     alt={user.name}
-                    className="w-8 h-8 rounded-xl border border-indigo-400/40 object-cover shrink-0"
+                    className="w-8 h-8 rounded-xl border border-violet-800/40 object-cover shrink-0"
                     referrerPolicy="no-referrer"
                   />
                 ) : (
-                  <div className="w-8 h-8 rounded-xl bg-indigo-600 text-white font-bold text-xs flex items-center justify-center shrink-0">
+                  <div className="w-8 h-8 rounded-xl bg-[#1E1B4B] text-white font-bold text-xs flex items-center justify-center shrink-0 border border-violet-800/40">
                     {user.name.charAt(0).toUpperCase()}
                   </div>
                 )}
@@ -280,7 +280,7 @@ export default function Sidebar({
               title={isCollapsed ? 'Student Sign In' : undefined}
               className={`w-full flex items-center justify-center gap-2 ${
                 isCollapsed ? 'p-2.5' : 'p-2.5'
-              } rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs transition-all cursor-pointer`}
+              } rounded-xl bg-gradient-to-r from-[#1E1B4B] via-[#2E1065] to-[#1E1B4B] hover:from-[#2E1065] hover:to-[#3B0764] border border-violet-800/40 text-white font-bold text-xs transition-all cursor-pointer shadow-md`}
               style={{ fontFamily: 'Poppins, sans-serif' }}
             >
               <LogIn className="w-4 h-4 shrink-0" />
diff --git a/src/index.css b/src/index.css
index 0d86587..4b41996 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,20 +3,20 @@
 @import "tailwindcss";
 
 @theme {
-  --color-primary: #6366F1;
-  --color-primary-light: #818CF8;
-  --color-primary-dark: #4F46E5;
-  --color-primary-50: #EEF2FF;
-  --color-primary-100: #E0E7FF;
-  --color-primary-200: #C7D2FE;
-  --color-secondary: #818CF8;
+  --color-primary: #1E1B4B;
+  --color-primary-light: #2E1065;
+  --color-primary-dark: #0A0D16;
+  --color-primary-50: #0B0F19;
+  --color-primary-100: #131722;
+  --color-primary-200: #1E1B4B;
+  --color-secondary: #2E1065;
   --color-background: #FAFAFA;
   --color-surface: #FFFFFF;
   --color-border: #E5E7EB;
   --color-heading: #1E293B;
   --color-body: #475569;
   --color-muted: #94A3B8;
-  --color-accent: #EEF2FF;
+  --color-accent: #131722;
 
   --font-heading: 'Playfair Display', Georgia, serif;
   --font-body: 'Inter', system-ui, sans-serif;
@@ -70,17 +70,17 @@ body {
   background: #f1f1f1;
 }
 ::-webkit-scrollbar-thumb {
-  background: #6366F1;
+  background: #1E1B4B;
   border-radius: 3px;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #4F46E5;
+  background: #2E1065;
 }
 
 /* Selection */
 ::selection {
-  background-color: rgba(99, 102, 241, 0.2);
-  color: #1E293B;
+  background-color: rgba(30, 27, 75, 0.4);
+  color: #FFFFFF;
 }
 
 /* Typography base */
@@ -91,7 +91,7 @@ h1, h2, h3, h4, h5, h6 {
 
 /* Focus ring */
 :focus-visible {
-  outline: 2px solid #6366F1;
+  outline: 2px solid #1E1B4B;
   outline-offset: 2px;
 }
 
@@ -160,7 +160,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .glass-dark {
-  background: rgba(30, 41, 59, 0.8);
+  background: rgba(15, 23, 42, 0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -182,7 +182,7 @@ h1, h2, h3, h4, h5, h6 {
 
 /* Gradient text */
 .gradient-text {
-  background: linear-gradient(135deg, #4F46E5, #6366F1, #8B5CF6);
+  background: linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -191,16 +191,16 @@ h1, h2, h3, h4, h5, h6 {
 /* Primary button */
 .btn-primary {
   font-family: var(--font-button);
-  background: linear-gradient(135deg, #4F46E5, #6366F1);
+  background: linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065);
   color: white;
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 12px;
   padding: 12px 28px;
   font-weight: 600;
   font-size: 15px;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
+  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.5);
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -209,8 +209,8 @@ h1, h2, h3, h4, h5, h6 {
 
 .btn-primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
-  background: linear-gradient(135deg, #4338CA, #4F46E5);
+  box-shadow: 0 8px 25px rgba(46, 16, 101, 0.6);
+  background: linear-gradient(135deg, #1E1B4B, #2E1065, #3B0764);
 }
 
 .btn-primary:active {
@@ -236,8 +236,8 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .btn-ghost:hover {
-  border-color: #6366F1;
-  color: #6366F1;
+  border-color: #2E1065;
+  color: #2E1065;
   transform: translateY(-2px);
 }
 
diff --git a/src/pages/Campus/Campus.tsx b/src/pages/Campus/Campus.tsx
index 4f7ff5d..2ecf2bd 100644
--- a/src/pages/Campus/Campus.tsx
+++ b/src/pages/Campus/Campus.tsx
@@ -20,9 +20,9 @@ interface LocationSpot {
 
 const BLUEPRINT_LEGEND = [
   { id: 'all', label: 'All Locations', color: '#F97316', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-300' },
-  { id: 'a-block', label: 'A Block', color: '#60A5FA', bg: 'bg-blue-50/80', text: 'text-blue-900', border: 'border-blue-200' },
-  { id: 'b-block', label: 'B Block', color: '#93C5FD', bg: 'bg-blue-50/60', text: 'text-blue-900', border: 'border-blue-200' },
-  { id: 'c-block', label: 'C Block', color: '#BFDBFE', bg: 'bg-blue-50/40', text: 'text-blue-900', border: 'border-blue-200' },
+  { id: 'a-block', label: 'A Block', color: '#1E1B4B', bg: 'bg-slate-900/80', text: 'text-violet-300', border: 'border-slate-800' },
+  { id: 'b-block', label: 'B Block', color: '#2E1065', bg: 'bg-slate-900/60', text: 'text-violet-300', border: 'border-slate-800' },
+  { id: 'c-block', label: 'C Block', color: '#3B0764', bg: 'bg-slate-900/40', text: 'text-violet-300', border: 'border-slate-800' },
   { id: 'admin', label: 'Admin / Facility', color: '#FDBA74', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-200' },
   { id: 'hostel', label: 'Hostel / Mess', color: '#C084FC', bg: 'bg-purple-50/80', text: 'text-purple-950', border: 'border-purple-200' },
   { id: 'lab', label: 'Lab / Academic', color: '#FDE047', bg: 'bg-yellow-50/80', text: 'text-yellow-950', border: 'border-yellow-200' },
diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
index b7510e9..3cd094e 100644
--- a/src/pages/Community/Community.tsx
+++ b/src/pages/Community/Community.tsx
@@ -533,8 +533,8 @@ export default function Community() {
                                                 <div className="flex-1 min-w-0">
                                                   <div className="flex items-center gap-1.5 mb-0.5 flex-wrap">
                                                     <span className="text-[11.5px] font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{ans.author}</span>
-                                                    {/* Blue verified check icon for senior helpers */}
-                                                    <span className="inline-flex text-blue-500" title="Verified Senior Helper">
+                                                    {/* Verified check icon for senior helpers */}
+                                                    <span className="inline-flex text-violet-400" title="Verified Senior Helper">
                                                       <svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
                                                         <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
                                                       </svg>
diff --git a/src/pages/DevCollab/DevCollab.tsx b/src/pages/DevCollab/DevCollab.tsx
index 797811f..b94f1a7 100644
--- a/src/pages/DevCollab/DevCollab.tsx
+++ b/src/pages/DevCollab/DevCollab.tsx
@@ -433,18 +433,18 @@ export default function DevCollab() {
         <div className="bg-white border-b border-[#E5E7EB] py-10">
           <div className="container-custom">
             <div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3">
-              <Link to="/" className="hover:text-indigo-600">Home</Link>
+              <Link to="/" className="hover:text-violet-400">Home</Link>
               <ChevronRight className="w-3 h-3" />
-              <span className="text-indigo-600">Developer Collab Hub</span>
+              <span className="text-violet-400">Developer Collab Hub</span>
             </div>
             <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
               <div>
-                <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-indigo-50 border border-indigo-200 text-indigo-600 text-xs font-semibold mb-3">
-                  <Code2 className="w-4 h-4 text-indigo-600" /> RIT Developers Environment
+                <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-slate-900 border border-slate-700 text-violet-300 text-xs font-semibold mb-3">
+                  <Code2 className="w-4 h-4 text-violet-300" /> RIT Developers Environment
                 </div>
                 <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
                   Find Project{' '}
-                  <span style={{ background: 'linear-gradient(135deg, #4F46E5, #6366F1)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
+                  <span style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
                     Collaborators
                   </span>
                 </h1>
@@ -457,8 +457,8 @@ export default function DevCollab() {
                 whileHover={{ scale: 1.03 }}
                 whileTap={{ scale: 0.97 }}
                 onClick={() => requireVerifiedStudent(() => setShowPostModal(true))}
-                className="flex items-center gap-2.5 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm shadow-lg shadow-indigo-500/25 shrink-0 cursor-pointer"
-                style={{ background: 'linear-gradient(135deg, #4F46E5, #6366F1)', fontFamily: 'Poppins, sans-serif' }}
+                className="flex items-center gap-2.5 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm shadow-lg shadow-slate-900/25 shrink-0 cursor-pointer border border-violet-800/40"
+                style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065)', fontFamily: 'Poppins, sans-serif' }}
               >
                 {isVerifiedStudent && <ShieldCheck className="w-4 h-4" />}
                 <Plus className="w-4.5 h-4.5" />
@@ -609,7 +609,7 @@ export default function DevCollab() {
                                 CLOSED • SPOTS FILLED
                               </span>
                             ) : (
-                              <span className="px-2.5 py-1 rounded-full text-[11px] font-semibold bg-blue-50 text-blue-700 border border-blue-200">
+                              <span className="px-2.5 py-1 rounded-full text-[11px] font-semibold bg-slate-100 text-slate-700 border border-slate-200">
                                 {accepted} / {needed} Spots Filled
                               </span>
                             )}
@@ -744,7 +744,7 @@ export default function DevCollab() {
                       <div className="pt-4 border-t border-slate-100 flex items-center justify-between gap-2">
                         <button
                           onClick={() => openManageApplicants(item)}
-                          className="px-4 py-2 rounded-xl bg-blue-50 hover:bg-blue-100 text-blue-700 border border-blue-200 text-xs font-bold flex items-center gap-1.5 transition-all cursor-pointer"
+                          className="px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 border border-slate-300 text-xs font-bold flex items-center gap-1.5 transition-all cursor-pointer"
                         >
                           <Users className="w-3.5 h-3.5" />
                           Applicants ({item.applicationsCount || 0})
diff --git a/src/pages/Events/Events.tsx b/src/pages/Events/Events.tsx
index 881c175..9657753 100644
--- a/src/pages/Events/Events.tsx
+++ b/src/pages/Events/Events.tsx
@@ -216,17 +216,17 @@ export default function Events() {
         {/* ─── Feature 1: "Find My Ideal Club" Banner ────────────────────────── */}
         <AnimatedContainer className="mb-14">
           <div
-            className="rounded-3xl p-6 md:p-8 text-white relative overflow-hidden border border-indigo-500/30 flex flex-col md:flex-row items-center justify-between gap-6"
-            style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B)' }}
+            className="rounded-3xl p-6 md:p-8 text-white relative overflow-hidden border border-slate-800 flex flex-col md:flex-row items-center justify-between gap-6"
+            style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065)' }}
           >
             {/* Background Glow */}
             <div
               className="absolute top-0 right-0 w-80 h-80 rounded-full opacity-20 pointer-events-none"
-              style={{ background: 'radial-gradient(circle, #6366F1, transparent)' }}
+              style={{ background: 'radial-gradient(circle, #2E1065, transparent)' }}
             />
 
             <div className="relative z-10 max-w-xl">
-              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/20 text-indigo-300 text-xs font-semibold mb-3 border border-indigo-500/30">
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/80 text-violet-300 text-xs font-semibold mb-3 border border-violet-900/40">
                 <Target className="w-3.5 h-3.5" />
                 <span>Interactive Club Matcher</span>
               </div>
@@ -242,10 +242,10 @@ export default function Events() {
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.98 }}
               onClick={() => { resetQuiz(); setIsQuizOpen(true); }}
-              className="relative z-10 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm flex items-center gap-2.5 shadow-lg shrink-0 cursor-pointer"
-              style={{ background: 'linear-gradient(135deg, #4F46E5, #6366F1)', fontFamily: 'Poppins, sans-serif' }}
+              className="relative z-10 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm flex items-center gap-2.5 shadow-lg shrink-0 cursor-pointer border border-violet-800/40"
+              style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065)', fontFamily: 'Poppins, sans-serif' }}
             >
-              <Sparkles className="w-4 h-4 text-indigo-200" />
+              <Sparkles className="w-4 h-4 text-violet-200" />
               <span>Find My Ideal Club</span>
               <ArrowRight className="w-4 h-4" />
             </motion.button>
@@ -262,7 +262,7 @@ export default function Events() {
 
           const renderClubCard = (club: Club) => {
             const IconComponent = (club.icon && CLUB_ICON_MAP[club.icon]) || Atom;
-            const categoryColor = CLUB_CATEGORY_COLORS[club.category] || '#4F46E5';
+            const categoryColor = CLUB_CATEGORY_COLORS[club.category] || '#1E1B4B';
             const isLiked = likedClubs.has(club.id);
             const likesCount = likesMap[club.id] || 0;
 
@@ -270,7 +270,7 @@ export default function Events() {
               <motion.div
                 whileHover={{ y: -4 }}
                 onClick={() => setSelectedClub(club)}
-                className="bg-white rounded-2xl border border-[#E5E7EB] p-5 cursor-pointer hover:border-indigo-400 transition-all flex flex-col justify-between h-full group"
+                className="bg-white rounded-2xl border border-[#E5E7EB] p-5 cursor-pointer hover:border-slate-800 transition-all flex flex-col justify-between h-full group"
                 style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
               >
                 <div>
@@ -313,7 +313,7 @@ export default function Events() {
                   </div>
 
                   {/* Club Title & Description */}
-                  <h3 className="font-semibold text-[#1E293B] mb-1 group-hover:text-indigo-600 transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                  <h3 className="font-semibold text-[#1E293B] mb-1 group-hover:text-slate-900 transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>
                     {club.name}
                   </h3>
                   <p className="text-xs text-[#64748B] mb-3 line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>{club.description}</p>
@@ -327,7 +327,7 @@ export default function Events() {
                   </span>
                   <motion.button
                     whileHover={{ scale: 1.04 }}
-                    className="px-3.5 py-1.5 rounded-lg text-xs font-semibold text-white flex items-center gap-1 cursor-pointer bg-indigo-600 hover:bg-indigo-700 transition-colors"
+                    className="px-3.5 py-1.5 rounded-lg text-xs font-semibold text-white flex items-center gap-1 cursor-pointer bg-[#1E1B4B] hover:bg-[#2E1065] transition-colors"
                     style={{ fontFamily: 'Poppins, sans-serif' }}
                   >
                     View Details
@@ -390,13 +390,13 @@ export default function Events() {
                   </div>
                   <div className="w-full h-1.5 bg-slate-100 rounded-full mb-6 overflow-hidden">
                     <div
-                      className="h-full bg-indigo-600 transition-all duration-300 rounded-full"
+                      className="h-full bg-[#1E1B4B] transition-all duration-300 rounded-full"
                       style={{ width: `${((quizStep + 1) / QUIZ_QUESTIONS.length) * 100}%` }}
                     />
                   </div>
 
                   {/* Question Header */}
-                  <div className="flex items-center gap-2 mb-2 text-indigo-600">
+                  <div className="flex items-center gap-2 mb-2 text-[#1E1B4B]">
                     <Compass className="w-5 h-5" />
                     <span className="text-xs font-bold uppercase tracking-wider">Club Matcher Quiz</span>
                   </div>
@@ -410,10 +410,10 @@ export default function Events() {
                       <button
                         key={idx}
                         onClick={() => handleSelectOption(idx)}
-                        className="w-full text-left p-4 rounded-2xl border border-slate-200 hover:border-indigo-500 hover:bg-indigo-50/50 transition-all flex items-center justify-between text-sm font-medium text-slate-700 cursor-pointer group"
+                        className="w-full text-left p-4 rounded-2xl border border-slate-200 hover:border-slate-800 hover:bg-slate-50 transition-all flex items-center justify-between text-sm font-medium text-slate-700 cursor-pointer group"
                       >
                         <span>{opt.label}</span>
-                        <ArrowRight className="w-4 h-4 text-slate-300 group-hover:text-indigo-600 group-hover:translate-x-1 transition-all" />
+                        <ArrowRight className="w-4 h-4 text-slate-300 group-hover:text-[#1E1B4B] group-hover:translate-x-1 transition-all" />
                       </button>
                     ))}
                   </div>
@@ -431,7 +431,7 @@ export default function Events() {
                 /* Results Screen */
                 <div>
                   <div className="text-center mb-6">
-                    <div className="w-14 h-14 rounded-2xl bg-indigo-100 text-indigo-600 flex items-center justify-center mx-auto mb-3">
+                    <div className="w-14 h-14 rounded-2xl bg-slate-900 text-violet-300 flex items-center justify-center mx-auto mb-3">
                       <CheckCircle2 className="w-8 h-8" />
                     </div>
                     <h3 className="text-2xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>
@@ -444,7 +444,7 @@ export default function Events() {
                   <div className="space-y-3 mb-6">
                     {quizResults.map((item, i) => {
                       const IconComponent = (item.club.icon && CLUB_ICON_MAP[item.club.icon]) || Atom;
-                      const catColor = CLUB_CATEGORY_COLORS[item.club.category] || '#4F46E5';
+                      const catColor = CLUB_CATEGORY_COLORS[item.club.category] || '#1E1B4B';
                       const matchPercent = i === 0 ? '98%' : i === 1 ? '91%' : '84%';
 
                       return (
@@ -454,7 +454,7 @@ export default function Events() {
                             setIsQuizOpen(false);
                             setSelectedClub(item.club);
                           }}
-                          className="p-4 rounded-2xl border border-slate-200 hover:border-indigo-500 bg-slate-50 hover:bg-white cursor-pointer transition-all flex items-center justify-between"
+                          className="p-4 rounded-2xl border border-slate-200 hover:border-slate-800 bg-slate-50 hover:bg-white cursor-pointer transition-all flex items-center justify-between"
                         >
                           <div className="flex items-center gap-3">
                             {item.club.logoUrl ? (
@@ -495,7 +495,7 @@ export default function Events() {
                     </button>
                     <button
                       onClick={() => setIsQuizOpen(false)}
-                      className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-indigo-600 hover:bg-indigo-700 transition-all cursor-pointer"
+                      className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-[#1E1B4B] hover:bg-[#2E1065] transition-all cursor-pointer"
                     >
                       Explore All Clubs
                     </button>
@@ -529,7 +529,7 @@ export default function Events() {
               {/* Modal Header */}
               {(() => {
                 const IconComponent = (selectedClub.icon && CLUB_ICON_MAP[selectedClub.icon]) || Atom;
-                const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#4F46E5';
+                const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#1E1B4B';
                 const isLiked = likedClubs.has(selectedClub.id);
                 const likesCount = likesMap[selectedClub.id] || 0;
 
@@ -580,9 +580,9 @@ export default function Events() {
               })()}
 
               {/* Club Detailed Description */}
-              <div className="mb-5 bg-indigo-50/60 border border-indigo-100 rounded-2xl p-4.5">
-                <div className="flex items-center gap-2 text-xs font-bold text-indigo-600 uppercase tracking-wider mb-2">
-                  <Info className="w-4 h-4 text-indigo-600" />
+              <div className="mb-5 bg-slate-900/40 border border-slate-800 rounded-2xl p-4.5">
+                <div className="flex items-center gap-2 text-xs font-bold text-violet-300 uppercase tracking-wider mb-2">
+                  <Info className="w-4 h-4 text-violet-300" />
                   <span>About the Club</span>
                 </div>
                 <p className="text-slate-700 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
@@ -592,33 +592,33 @@ export default function Events() {
 
               {/* Leadership & Contact Information */}
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 mb-6">
-                <div className="bg-indigo-50/80 border border-indigo-100 hover:border-indigo-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-600 text-white flex items-center justify-center shadow-xs shadow-indigo-200 shrink-0">
+                <div className="bg-slate-900/60 border border-slate-800 hover:border-slate-700 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#1E1B4B] to-[#2E1065] text-white flex items-center justify-center shadow-xs shrink-0">
                     <UserCheck className="w-5 h-5 text-white" />
                   </div>
                   <div>
-                    <span className="text-[11px] text-indigo-500 font-semibold block">President / Student Lead</span>
-                    <span className="text-sm font-bold text-indigo-950">{selectedClub.presidentName || 'Student President'}</span>
+                    <span className="text-[11px] text-violet-300 font-semibold block">President / Student Lead</span>
+                    <span className="text-sm font-bold text-white">{selectedClub.presidentName || 'Student President'}</span>
                   </div>
                 </div>
 
                 {selectedClub.vicePresidentName && (
-                  <div className="bg-violet-50/80 border border-violet-100 hover:border-violet-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-violet-600 text-white flex items-center justify-center shadow-xs shadow-violet-200 shrink-0">
+                  <div className="bg-slate-900/60 border border-slate-800 hover:border-slate-700 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#2E1065] to-[#3B0764] text-white flex items-center justify-center shadow-xs shrink-0">
                       <Users className="w-5 h-5 text-white" />
                     </div>
                     <div>
-                      <span className="text-[11px] text-violet-500 font-semibold block">Vice President</span>
-                      <span className="text-sm font-bold text-violet-950">{selectedClub.vicePresidentName}</span>
+                      <span className="text-[11px] text-violet-300 font-semibold block">Vice President</span>
+                      <span className="text-sm font-bold text-white">{selectedClub.vicePresidentName}</span>
                     </div>
                   </div>
                 )}
               </div>
 
               {/* Community & Social Links */}
-              <div className="mb-6 bg-indigo-50/60 border border-indigo-200/80 rounded-2xl p-4">
+              <div className="mb-6 bg-slate-900/40 border border-slate-800 rounded-2xl p-4">
                 <div className="flex items-center justify-between mb-3">
-                  <div className="flex items-center gap-2 text-xs font-bold text-indigo-600 uppercase tracking-wider">
+                  <div className="flex items-center gap-2 text-xs font-bold text-violet-300 uppercase tracking-wider">
                     <ExternalLink className="w-3.5 h-3.5" />
                     <span>Community & Social Links</span>
                   </div>
@@ -643,9 +643,9 @@ export default function Events() {
                       href={selectedClub.socialLinks.website}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-indigo-500 hover:text-indigo-600 transition-all text-xs font-medium text-slate-700"
+                      className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-slate-800 hover:text-slate-900 transition-all text-xs font-medium text-slate-700"
                     >
-                      <Globe className="w-4 h-4 text-indigo-500 shrink-0" />
+                      <Globe className="w-4 h-4 text-slate-800 shrink-0" />
                       <span className="truncate">Linktree Hub</span>
                     </a>
                   )}
@@ -655,9 +655,9 @@ export default function Events() {
                       href={selectedClub.socialLinks.linkedin}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-blue-600 hover:text-blue-600 transition-all text-xs font-medium text-slate-700"
+                      className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-slate-800 hover:text-slate-900 transition-all text-xs font-medium text-slate-700"
                     >
-                      <LinkedinIcon className="w-4 h-4 text-blue-600 shrink-0" />
+                      <LinkedinIcon className="w-4 h-4 text-slate-800 shrink-0" />
                       <span className="truncate">LinkedIn</span>
                     </a>
                   )}
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 0e8e41b..55727bf 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -21,8 +21,8 @@ export default function Home() {
   ];
 
   return (
-    <div className="relative overflow-hidden rounded-3xl min-h-[calc(100vh-100px)] flex flex-col justify-between p-5 sm:p-8 lg:p-10 text-white shadow-2xl border border-slate-800/80 bg-slate-950 group">
-      {/* ─── High Clarity Background Video ───────────────────────────────────── */}
+    <div className="relative w-full min-h-[calc(100vh-90px)] flex flex-col justify-between p-2 sm:p-6 lg:p-8 text-white group">
+      {/* ─── Fixed Full-Screen Background Video (Spans Entire Laptop/Phone Frame) ─── */}
       <video
         src="/campus-video.mp4"
         autoPlay
@@ -30,55 +30,55 @@ export default function Home() {
         muted
         playsInline
         preload="auto"
-        className="absolute inset-0 w-full h-full object-cover pointer-events-none transition-transform duration-1000 scale-[1.01]"
+        className="fixed inset-0 w-full h-full object-cover pointer-events-none z-0"
         style={{
-          filter: 'contrast(1.05) brightness(0.9) saturate(1.05)',
+          filter: 'contrast(1.05) brightness(0.85) saturate(1.05)',
           imageRendering: 'crisp-edges',
         }}
       />
 
-      {/* Ultra-sleek Gradient Overlay for Crisp Text Contrast */}
+      {/* Fixed High-Contrast Dark Gradient Overlay across full viewport */}
       <div 
-        className="absolute inset-0 pointer-events-none" 
+        className="fixed inset-0 pointer-events-none z-0" 
         style={{
-          background: 'linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.25) 45%, rgba(15, 23, 42, 0.75) 100%)',
+          background: 'linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.3) 45%, rgba(11, 15, 25, 0.85) 100%)',
         }}
       />
 
       {/* Top Branding Badge */}
-      <div className="relative z-10 flex items-center justify-between">
-        <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-slate-950/40 border border-white/20 text-[11px] font-semibold text-white backdrop-blur-md shadow-lg">
-          <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
-          <span>Rajalakshmi Institute of Technology</span>
+      <div className="relative z-10 flex items-center justify-between gap-2">
+        <div className="inline-flex items-center gap-1.5 sm:gap-2 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full bg-slate-950/60 border border-white/20 text-[10px] sm:text-xs font-semibold text-white backdrop-blur-md shadow-xl truncate">
+          <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse shrink-0" />
+          <span className="truncate">Rajalakshmi Institute of Technology</span>
         </div>
 
         <Link
           to="/raise"
-          className="hidden sm:inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-gradient-to-r from-rose-500/80 to-pink-600/80 hover:from-rose-500 hover:to-pink-600 text-white text-xs font-bold border border-white/20 backdrop-blur-md transition-all shadow-md hover:scale-105"
+          className="inline-flex items-center gap-1 sm:gap-1.5 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full bg-gradient-to-r from-rose-500/90 to-pink-600/90 hover:from-rose-500 hover:to-pink-600 text-white text-[10px] sm:text-xs font-bold border border-white/25 backdrop-blur-md transition-all shadow-lg hover:scale-105 shrink-0"
           style={{ fontFamily: 'Poppins, sans-serif' }}
         >
-          <Sparkles className="w-3.5 h-3.5 text-amber-200" />
+          <Sparkles className="w-3 h-3 sm:w-3.5 sm:h-3.5 text-amber-200" />
           <span>RAISE Incubator</span>
         </Link>
       </div>
 
       {/* Center Main Hero Title */}
-      <div className="relative z-10 max-w-4xl mx-auto text-center space-y-4 my-auto py-10 sm:py-16">
+      <div className="relative z-10 max-w-4xl mx-auto text-center space-y-3 sm:space-y-4 my-auto py-8 sm:py-16">
         <h1
           className="text-4xl sm:text-6xl md:text-7xl font-black tracking-tight leading-tight text-white"
           style={{ 
             fontFamily: 'Playfair Display, Georgia, serif', 
             color: '#FFFFFF', 
-            textShadow: '0 4px 30px rgba(0,0,0,0.85), 0 2px 10px rgba(0,0,0,0.9)' 
+            textShadow: '0 4px 35px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.95)' 
           }}
         >
           RIT Freshers Hub
         </h1>
         <p
-          className="text-sm sm:text-base md:text-lg text-slate-100 font-medium leading-relaxed max-w-2xl mx-auto"
+          className="text-xs sm:text-base md:text-lg text-slate-100 font-medium leading-relaxed max-w-2xl mx-auto px-2"
           style={{ 
             fontFamily: 'Inter, sans-serif',
-            textShadow: '0 2px 12px rgba(0,0,0,0.9)'
+            textShadow: '0 2px 14px rgba(0,0,0,0.95)'
           }}
         >
           Your unified campus portal — academic notes, AI chatbot, live bus tracking, faculty directory & student developer hub.
@@ -86,29 +86,29 @@ export default function Home() {
       </div>
 
       {/* Bottom Ultra-Compact Ultra-Transparent Quick Launch Bar */}
-      <div className="relative z-10 pt-2">
-        <div className="text-center mb-3">
-          <span className="text-[10px] font-extrabold text-slate-200 uppercase tracking-widest bg-slate-950/50 px-3 py-1 rounded-full border border-white/15 backdrop-blur-md shadow-md inline-block">
+      <div className="relative z-10 pt-2 sm:pt-4">
+        <div className="text-center mb-2 sm:mb-3">
+          <span className="text-[9px] sm:text-[10px] font-extrabold text-slate-200 uppercase tracking-widest bg-slate-950/70 px-3 py-1 rounded-full border border-white/20 backdrop-blur-md shadow-lg inline-block">
             Quick Launch Portal Modules
           </span>
         </div>
 
-        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2.5 sm:gap-3">
+        <div className="grid grid-cols-3 sm:grid-cols-3 lg:grid-cols-6 gap-1.5 sm:gap-3">
           {quickLaunchModules.map((item) => {
             const Icon = item.icon;
             return (
               <Link
                 key={item.label}
                 to={item.path}
-                className="flex flex-col items-center justify-center p-2.5 sm:p-3 rounded-2xl bg-slate-950/30 hover:bg-slate-900/60 border border-white/15 hover:border-white/35 backdrop-blur-md text-white transition-all duration-200 cursor-pointer hover:scale-[1.03] shadow-lg group text-center"
+                className="flex flex-col items-center justify-center p-2 sm:p-3.5 rounded-xl sm:rounded-2xl bg-slate-950/50 hover:bg-slate-900/80 border border-white/20 hover:border-white/40 backdrop-blur-md text-white transition-all duration-200 cursor-pointer hover:scale-[1.04] shadow-xl group text-center"
               >
-                <div className="w-8 h-8 rounded-xl bg-white/15 border border-white/20 flex items-center justify-center mb-1.5 group-hover:bg-indigo-600 transition-colors shrink-0">
-                  <Icon className="w-4 h-4 text-white" />
+                <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-lg sm:rounded-xl bg-white/15 border border-white/25 flex items-center justify-center mb-1 sm:mb-1.5 group-hover:bg-[#1E1B4B] transition-colors shrink-0">
+                  <Icon className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white" />
                 </div>
-                <span className="text-xs font-bold truncate max-w-full leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                <span className="text-[10px] sm:text-xs font-bold truncate max-w-full leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
                   {item.label}
                 </span>
-                <span className="text-[10px] text-slate-300/90 truncate max-w-full mt-0.5">
+                <span className="hidden sm:block text-[10px] text-slate-300/90 truncate max-w-full mt-0.5">
                   {item.desc}
                 </span>
               </Link>
diff --git a/src/pages/LeetcodeLeaderboard/LeetcodeLeaderboard.tsx b/src/pages/LeetcodeLeaderboard/LeetcodeLeaderboard.tsx
index f02a2e6..dfb1195 100644
--- a/src/pages/LeetcodeLeaderboard/LeetcodeLeaderboard.tsx
+++ b/src/pages/LeetcodeLeaderboard/LeetcodeLeaderboard.tsx
@@ -153,7 +153,7 @@ export default function LeetcodeLeaderboard() {
                 RIT LeetCode Arena
               </div>
               <h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-[#1E293B] font-poppins">
-                Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-indigo-600 to-purple-600">LeetCode Leaderboard</span>
+                Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#0F172A] via-[#1E1B4B] to-[#2E1065]">LeetCode Leaderboard</span>
               </h1>
               <p className="mt-2 text-slate-500 max-w-2xl text-sm sm:text-base">
                 Track top problem solvers across departments. Automatically updated every 24 hours with rate-limited, spaced background sync.
@@ -205,7 +205,7 @@ export default function LeetcodeLeaderboard() {
 
             <div className="p-4 rounded-2xl bg-[#F8FAFC] border border-[#E2E8F0]">
               <span className="text-xs font-semibold text-slate-500 flex items-center gap-1.5">
-                <User className="w-4 h-4 text-indigo-500" /> Active Coders
+                <User className="w-4 h-4 text-violet-400" /> Active Coders
               </span>
               <p className="text-xl font-bold text-[#1E293B] mt-1">
                 {profiles.length}
diff --git a/src/pages/Notes/Notes.tsx b/src/pages/Notes/Notes.tsx
index 1520707..623c42d 100644
--- a/src/pages/Notes/Notes.tsx
+++ b/src/pages/Notes/Notes.tsx
@@ -1994,7 +1994,7 @@ export default function Notes() {
                   </div>
 
                   <div className="p-4 rounded-2xl bg-[#F8FAFC] border border-[#E5E7EB]/70 flex flex-col gap-2">
-                    <div className="w-8 h-8 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-600">
+                    <div className="w-8 h-8 rounded-xl bg-slate-900 border border-slate-700 flex items-center justify-center text-violet-300">
                       <FileText className="w-4 h-4" />
                     </div>
                     <div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
diff --git a/src/pages/Raise/components/PortfolioShowcase.tsx b/src/pages/Raise/components/PortfolioShowcase.tsx
index 46efbe2..4065b3f 100644
--- a/src/pages/Raise/components/PortfolioShowcase.tsx
+++ b/src/pages/Raise/components/PortfolioShowcase.tsx
@@ -56,7 +56,7 @@ export const PortfolioShowcase: React.FC = () => {
       domain: "AI-based Systems",
       description: "Cognitive educational platforms providing personalised student learning paths.",
       remarks: "Testing with users",
-      color: "bg-blue-500"
+      color: "bg-[#1E1B4B]"
     },
     {
       name: "Innsole",
@@ -64,7 +64,7 @@ export const PortfolioShowcase: React.FC = () => {
       domain: "Hardware & Health",
       description: "Smart footwear soles embedded with sensor arrays to monitor athletic gait and posture.",
       remarks: "Testing with users",
-      color: "bg-blue-500"
+      color: "bg-[#1E1B4B]"
     },
 
     // Prototype
@@ -207,7 +207,7 @@ export const PortfolioShowcase: React.FC = () => {
   const getStageIcon = (stage: string) => {
     switch(stage) {
       case 'commercialization': return <TrendingUp className="w-4 h-4 text-emerald-600" />;
-      case 'mvp': return <Box className="w-4 h-4 text-blue-600" />;
+      case 'mvp': return <Box className="w-4 h-4 text-violet-300" />;
       case 'prototype': return <Layers className="w-4 h-4 text-amber-600" />;
       case 'idea': return <Sparkles className="w-4 h-4 text-purple-600" />;
       default: return <HelpCircle className="w-4 h-4" />;
@@ -277,7 +277,7 @@ export const PortfolioShowcase: React.FC = () => {
                 <div className="flex justify-between items-center mb-6">
                   <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wider ${
                     startup.stage === 'commercialization' ? 'bg-emerald-100 text-emerald-800' :
-                    startup.stage === 'mvp' ? 'bg-blue-100 text-blue-800' :
+                    startup.stage === 'mvp' ? 'bg-slate-900 text-violet-300' :
                     startup.stage === 'prototype' ? 'bg-amber-100 text-amber-800' :
                     'bg-purple-100 text-purple-800'
                   }`}>
diff --git a/src/pages/RaiseIncubator/components/PortfolioShowcase.tsx b/src/pages/RaiseIncubator/components/PortfolioShowcase.tsx
index 46efbe2..4065b3f 100644
--- a/src/pages/RaiseIncubator/components/PortfolioShowcase.tsx
+++ b/src/pages/RaiseIncubator/components/PortfolioShowcase.tsx
@@ -56,7 +56,7 @@ export const PortfolioShowcase: React.FC = () => {
       domain: "AI-based Systems",
       description: "Cognitive educational platforms providing personalised student learning paths.",
       remarks: "Testing with users",
-      color: "bg-blue-500"
+      color: "bg-[#1E1B4B]"
     },
     {
       name: "Innsole",
@@ -64,7 +64,7 @@ export const PortfolioShowcase: React.FC = () => {
       domain: "Hardware & Health",
       description: "Smart footwear soles embedded with sensor arrays to monitor athletic gait and posture.",
       remarks: "Testing with users",
-      color: "bg-blue-500"
+      color: "bg-[#1E1B4B]"
     },
 
     // Prototype
@@ -207,7 +207,7 @@ export const PortfolioShowcase: React.FC = () => {
   const getStageIcon = (stage: string) => {
     switch(stage) {
       case 'commercialization': return <TrendingUp className="w-4 h-4 text-emerald-600" />;
-      case 'mvp': return <Box className="w-4 h-4 text-blue-600" />;
+      case 'mvp': return <Box className="w-4 h-4 text-violet-300" />;
       case 'prototype': return <Layers className="w-4 h-4 text-amber-600" />;
       case 'idea': return <Sparkles className="w-4 h-4 text-purple-600" />;
       default: return <HelpCircle className="w-4 h-4" />;
@@ -277,7 +277,7 @@ export const PortfolioShowcase: React.FC = () => {
                 <div className="flex justify-between items-center mb-6">
                   <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wider ${
                     startup.stage === 'commercialization' ? 'bg-emerald-100 text-emerald-800' :
-                    startup.stage === 'mvp' ? 'bg-blue-100 text-blue-800' :
+                    startup.stage === 'mvp' ? 'bg-slate-900 text-violet-300' :
                     startup.stage === 'prototype' ? 'bg-amber-100 text-amber-800' :
                     'bg-purple-100 text-purple-800'
                   }`}>