diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties
index 18b9140..5d3b3b3 100644
--- a/backend/src/main/resources/application.properties
+++ b/backend/src/main/resources/application.properties
@@ -1,7 +1,7 @@
 # ─── DATABASE CONNECTION CONFIGURATION ───
 spring.datasource.url=jdbc:postgresql://localhost:5432/rit_freshers_hub?sslmode=disable
 spring.datasource.username=postgres
-spring.datasource.password=${DB_PASSWORD:jouganxd1011}
+spring.datasource.password=${DB_PASSWORD:Amudiesh22@.}
 
 # ─── JPA / HIBERNATE SETTINGS ───
 spring.jpa.database-platform=org.hibernate.dialect.PostgreSQLDialect
diff --git a/public/campus-map.jpg b/public/campus-map.jpg
deleted file mode 100644
index b0339af..0000000
Binary files a/public/campus-map.jpg and /dev/null differ
diff --git a/public/map.png b/public/map.png
new file mode 100644
index 0000000..3450135
Binary files /dev/null and b/public/map.png differ
diff --git a/public/video/RIT Video.mp4 b/public/video/RIT Video.mp4
deleted file mode 100644
index fdd0fde..0000000
Binary files a/public/video/RIT Video.mp4 and /dev/null differ
diff --git a/public/video/RIT Video.webm b/public/video/RIT Video.webm
new file mode 100644
index 0000000..7a05640
Binary files /dev/null and b/public/video/RIT Video.webm differ
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index a8cf7c5..4ea9673 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -19,6 +19,24 @@ export default function Navbar() {
     setIsMobileOpen(false);
   }, [location.pathname]);
 
+  const checkIsActive = (linkPath: string) => {
+    const [pathName, searchString] = linkPath.split('?');
+    if (location.pathname !== pathName) return false;
+    
+    if (pathName === '/notes') {
+      const params = new URLSearchParams(location.search);
+      const hasToolkit = params.has('toolkit') || params.get('section') === 'toolkit';
+      
+      if (searchString) {
+        return hasToolkit;
+      } else {
+        return !hasToolkit;
+      }
+    }
+    
+    return true;
+  };
+
   return (
     <>
       <motion.nav
@@ -61,12 +79,12 @@ export default function Navbar() {
           {/* Desktop Nav */}
           <div className="hidden md:flex items-center gap-1">
             {NAV_LINKS.map((link) => {
-              const isActive = location.pathname === link.path;
+              const isActive = checkIsActive(link.path);
               return (
                 <Link
                   key={link.path}
                   to={link.path}
-                  className="relative px-4 py-2 rounded-xl text-xs font-semibold uppercase tracking-wider transition-all duration-200"
+                  className="relative px-1.5 lg:px-2.5 xl:px-3.5 py-1.5 rounded-lg text-[10px] lg:text-[11px] xl:text-xs font-semibold uppercase tracking-wider transition-all duration-200"
                   style={{
                     fontFamily: 'Poppins, sans-serif',
                     color: isActive ? '#FFFFFF' : '#CBD5E1',
@@ -112,7 +130,7 @@ export default function Navbar() {
             >
               <div className="px-4 pb-5 pt-3 grid grid-cols-2 gap-2 border-t border-white/10 bg-slate-950/90 backdrop-blur-2xl rounded-b-2xl">
                 {NAV_LINKS.map((link) => {
-                  const isActive = location.pathname === link.path;
+                  const isActive = checkIsActive(link.path);
                   return (
                     <Link
                       key={link.path}
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 76b2212..cccb36c 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -4,6 +4,7 @@ import type { Feature, Stat, BusRoute, Faculty, Event, Club, Question, ToolkitIt
 export const NAV_LINKS = [
   { label: 'Home', path: '/' },
   { label: 'Notes', path: '/notes' },
+  { label: 'Toolkit', path: '/notes?section=toolkit' },
   { label: 'Chatbot', path: '/ai-assistant' },
   { label: 'Campus Map', path: '/campus' },
   { label: 'Bus Routes', path: '/bus-routes' },
@@ -93,7 +94,7 @@ export const FEATURES: Feature[] = [
     icon: 'Wrench',
     title: 'Student Toolkit',
     description: 'Download timetables, academic calendar, syllabus, forms, and ERP guides.',
-    path: '/notes',
+    path: '/notes?section=toolkit',
     color: '#06B6D4',
     bgColor: '#ECFEFF',
   },
@@ -857,12 +858,12 @@ export const QUESTIONS_DATA: Question[] = [
 
 // ─── Toolkit Items ───────────────────────────────────────────────────────────
 export const TOOLKIT_ITEMS: ToolkitItem[] = [
-  { id: '1', title: 'CS tools', description: 'Computer Science tools and resources', type: 'link', url: '#', icon: 'Code', category: 'Engineering' },
-  { id: '2', title: 'Business tools', description: 'Business systems and management resources', type: 'link', url: '#', icon: 'Briefcase', category: 'Engineering' },
-  { id: '3', title: 'Cybersecurity tools', description: 'Security and networking tools', type: 'link', url: '#', icon: 'Shield', category: 'Engineering' },
-  { id: '4', title: 'AI tools', description: 'Artificial Intelligence and Machine Learning resources', type: 'link', url: '#', icon: 'Brain', category: 'Engineering' },
-  { id: '5', title: 'Electrical and Electronic tools', description: 'Electrical and Electronics engineering tools', type: 'link', url: '#', icon: 'Cpu', category: 'Engineering' },
-  { id: '6', title: 'Biotech tools', description: 'Biotechnology tools and lab resources', type: 'link', url: '#', icon: 'FlaskConical', category: 'Engineering' },
+  { id: '1', title: 'CS tools', description: 'Access specialized development environments, IDE configurations, compiler guides, GitHub setup instructions, and essential documentation for Computer Science students.', type: 'link', url: '#', icon: 'Code', category: 'Engineering' },
+  { id: '2', title: 'Business tools', description: 'Explore enterprise resource planning (ERP) guides, financial spreadsheets, management templates, and business analytics tools for CSBS and management students.', type: 'link', url: '#', icon: 'Briefcase', category: 'Engineering' },
+  { id: '3', title: 'Cybersecurity tools', description: 'Discover network simulators, virtualization setup guides, penetration testing tutorials, cryptography tools, and security lab blueprints.', type: 'link', url: '#', icon: 'Shield', category: 'Engineering' },
+  { id: '4', title: 'AI tools', description: 'Configure machine learning frameworks, deep learning libraries, Jupyter environments, dataset download scripts, and pre-trained model APIs.', type: 'link', url: '#', icon: 'Brain', category: 'Engineering' },
+  { id: '5', title: 'Electrical and Electronic tools', description: 'Access circuit design simulators, MATLAB packages, microcontroller IDE setups, hardware debugging guides, and lab calculation spreadsheets.', type: 'link', url: '#', icon: 'Cpu', category: 'Engineering' },
+  { id: '6', title: 'Biotech tools', description: 'Find biology lab guidelines, chemical structure tools, bioinformatics databases tutorials, genetic sequence analysis resources, and safety manuals.', type: 'link', url: '#', icon: 'FlaskConical', category: 'Engineering' },
 ];
 
 // ─── Campus Locations ────────────────────────────────────────────────────────
diff --git a/src/pages/AIAssistant/AIAssistant.tsx b/src/pages/AIAssistant/AIAssistant.tsx
index 747273a..5a4ca81 100644
--- a/src/pages/AIAssistant/AIAssistant.tsx
+++ b/src/pages/AIAssistant/AIAssistant.tsx
@@ -102,7 +102,7 @@ export default function AIAssistant() {
   return (
     <div className="min-h-screen flex flex-col" style={{ backgroundColor: '#FAFAFA' }}>
       {/* Header */}
-      <div className="bg-white border-b border-[#E5E7EB] py-4 sticky top-16 z-40">
+      <div className="bg-white border-b border-[#E5E7EB] py-4 relative z-10">
         <div className="container-custom flex items-center justify-between">
           <div className="flex items-center gap-3">
             <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}>
diff --git a/src/pages/Campus/Campus.tsx b/src/pages/Campus/Campus.tsx
index 8ee2ebe..ea2b4b8 100644
--- a/src/pages/Campus/Campus.tsx
+++ b/src/pages/Campus/Campus.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
   ChevronRight, MapPin, ZoomIn, ZoomOut, Maximize2, Minimize2,
@@ -32,25 +32,25 @@ const BLUEPRINT_LEGEND = [
 ];
 
 const LOCATION_SPOTS: LocationSpot[] = [
-  { name: 'Girls Hostel', x: 8.5, y: 12.0, category: 'Hostel / Mess', desc: 'Residential Quarter for Women', area: 'Top Left' },
-  { name: 'Playground', x: 32.0, y: 24.0, category: 'Amenity', desc: 'Main Sports & Athletic Field', area: 'Top Left' },
-  { name: 'Canteen', x: 64.0, y: 14.0, category: 'Amenity', desc: 'Food Court & Refreshments', area: 'North Center' },
-  { name: 'Statue', x: 63.0, y: 25.5, category: 'Amenity', desc: 'Landmark Monument', area: 'North Center' },
-  { name: 'Boys Mess', x: 87.0, y: 9.5, category: 'Amenity', desc: 'Ground Floor Dining', area: 'Top Right' },
-  { name: 'Staff Mess', x: 87.0, y: 18.5, category: 'Amenity', desc: 'First Floor Dining', area: 'Top Right' },
-  { name: 'C Block', x: 87.0, y: 42.0, category: 'C Block', desc: 'Labs, Classrooms, Auditorium & Staff Rooms', area: 'East Block' },
-  { name: 'Steve Jobs Block', x: 8.5, y: 39.0, category: 'Admin / Facility', desc: 'Auditorium, Labs & Staff Rooms', area: 'West Wing' },
-  { name: 'Girls Mess', x: 8.5, y: 53.0, category: 'Amenity', desc: 'Dedicated Dining Hall for Women', area: 'West Wing' },
-  { name: 'EPL Lab', x: 8.5, y: 67.0, category: 'Lab / Academic', desc: 'Engineering Practices Laboratory', area: 'South West' },
-  { name: 'B Block', x: 33.0, y: 51.0, category: 'B Block', desc: 'Labs, Classrooms & Faculty Rooms', area: 'Central West' },
-  { name: 'Hut', x: 63.0, y: 41.0, category: 'Amenity', desc: 'Student Discussion & Rest Area', area: 'Central Green' },
-  { name: 'A Block', x: 70.0, y: 65.0, category: 'A Block', desc: 'Labs, Classrooms, Faculty Rooms, Principal Room & Exam Cell', area: 'Central East' },
-  { name: 'RSB Block', x: 24.0, y: 80.0, category: 'Amenity', desc: 'Library, Auditorium & Accounts Room', area: 'South West' },
-  { name: 'Side Parking', x: 6.5, y: 83.0, category: 'Parking Area', desc: 'Visitor & Staff Parking Zone', area: 'South West' },
-  { name: 'Arcade', x: 43.5, y: 72.0, category: 'Amenity', desc: 'Student Hub & Stores', area: 'South Central' },
-  { name: 'Security Booth', x: 45.8, y: 88.5, category: 'Amenity', desc: 'Main Gate Security Checkpoint', area: 'South Entrance' },
-  { name: 'Parking Area', x: 73.5, y: 85.5, category: 'Parking Area', desc: 'Two-Wheeler & Four-Wheeler Parking', area: 'South East' },
-  { name: 'Main Entrance', x: 50.5, y: 95.5, category: 'Amenity', desc: 'Primary Campus Security Gate', area: 'South Entrance' },
+  { name: 'Girls Hostel', x: 8.2, y: 12.0, category: 'Hostel / Mess', desc: 'Residential Quarter for Women', area: 'Top Left' },
+  { name: 'Playground', x: 32.5, y: 19.5, category: 'Amenity', desc: 'Main Sports & Athletic Field', area: 'Top Left' },
+  { name: 'Canteen', x: 63.5, y: 13.5, category: 'Amenity', desc: 'Food Court & Refreshments', area: 'North Center' },
+  { name: 'Statue', x: 61.0, y: 26.0, category: 'Amenity', desc: 'Landmark Monument', area: 'North Center' },
+  { name: 'Boys Mess', x: 87.8, y: 10.5, category: 'Amenity', desc: 'Ground Floor Dining', area: 'Top Right' },
+  { name: 'Staff Mess', x: 87.8, y: 22.0, category: 'Amenity', desc: 'First Floor Dining', area: 'Top Right' },
+  { name: 'C Block', x: 87.8, y: 41.0, category: 'C Block', desc: 'Labs, Classrooms, Auditorium & Staff Rooms', area: 'East Block' },
+  { name: 'Steve Jobs Block', x: 8.1, y: 38.5, category: 'Admin / Facility', desc: 'Auditorium, Labs & Staff Rooms', area: 'West Wing' },
+  { name: 'Girls Mess', x: 8.1, y: 53.0, category: 'Amenity', desc: 'Dedicated Dining Hall for Women', area: 'West Wing' },
+  { name: 'EPL Lab', x: 8.1, y: 65.5, category: 'Lab / Academic', desc: 'Engineering Practices Laboratory', area: 'South West' },
+  { name: 'B Block', x: 32.5, y: 55.0, category: 'B Block', desc: 'Labs, Classrooms & Faculty Rooms', area: 'Central West' },
+  { name: 'Hut', x: 62.7, y: 42.5, category: 'Amenity', desc: 'Student Discussion & Rest Area', area: 'Central Green' },
+  { name: 'A Block', x: 70.3, y: 67.0, category: 'A Block', desc: 'Labs, Classrooms, Faculty Rooms, Principal Room & Exam Cell', area: 'Central East' },
+  { name: 'RSB Block', x: 24.0, y: 81.5, category: 'Amenity', desc: 'Library, Auditorium & Accounts Room', area: 'South West' },
+  { name: 'Side Parking', x: 5.5, y: 85.5, category: 'Parking Area', desc: 'Visitor & Staff Parking Zone', area: 'South West' },
+  { name: 'Arcade', x: 41.5, y: 72.8, category: 'Amenity', desc: 'Student Hub & Stores', area: 'South Central' },
+  { name: 'Security Booth', x: 45.9, y: 88.5, category: 'Amenity', desc: 'Main Gate Security Checkpoint', area: 'South Entrance' },
+  { name: 'Parking Area', x: 73.0, y: 86.0, category: 'Parking Area', desc: 'Two-Wheeler & Four-Wheeler Parking', area: 'South East' },
+  { name: 'Main Entrance', x: 51.8, y: 92.5, category: 'Amenity', desc: 'Primary Campus Security Gate', area: 'South Entrance' },
 ];
 
 const CATEGORY_MAP_SPOTS: Record<string, string[]> = {
@@ -64,6 +64,14 @@ const CATEGORY_MAP_SPOTS: Record<string, string[]> = {
 };
 
 export default function Campus() {
+  const mapRef = useRef<HTMLDivElement>(null);
+
+  const scrollToMap = () => {
+    setTimeout(() => {
+      mapRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }, 100);
+  };
+
   // Interactive Map State
   const [zoomLevel, setZoomLevel] = useState(1);
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -71,7 +79,7 @@ export default function Campus() {
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
   const [selectedFacility, setSelectedFacility] = useState<LocationSpot | null>(null);
 
-  const currentMapSrc = '/campus-map.jpg';
+  const currentMapSrc = '/map.png';
 
   const handleZoomIn = () => setZoomLevel((prev) => Math.min(prev + 0.25, 2.5));
   const handleZoomOut = () => setZoomLevel((prev) => Math.max(prev - 0.25, 0.75));
@@ -80,7 +88,7 @@ export default function Campus() {
   const handleDownload = () => {
     const link = document.createElement('a');
     link.href = currentMapSrc;
-    link.download = 'RIT_Campus_Blueprint.jpg';
+    link.download = 'RIT_Campus_Blueprint.png';
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
@@ -92,7 +100,7 @@ export default function Campus() {
     } else {
       setActiveCategory(catId);
       setSelectedFacility(null);
-      setZoomLevel(1.1);
+      scrollToMap();
     }
   };
 
@@ -155,7 +163,7 @@ export default function Campus() {
         <div className="container-custom py-8">
           <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
             {/* Map Viewer Header Bar */}
-            <div className="bg-[#0F172A] rounded-t-3xl p-4 md:p-6 text-white border-b border-slate-800 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+            <div ref={mapRef} className="bg-[#0F172A] rounded-t-3xl p-4 md:p-6 text-white border-b border-slate-800 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
               <div>
                 <div className="flex items-center gap-2 mb-1">
                   <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-orange-500/20 text-orange-400 text-xs font-semibold border border-orange-500/30">
@@ -223,7 +231,7 @@ export default function Campus() {
                           )}
                           <motion.div whileHover={{ scale: 1.3 }} animate={isHighlighted ? { scale: [1, 1.25, 1] } : { scale: 1 }} transition={isHighlighted ? { repeat: Infinity, duration: 2 } : {}} className={`relative flex items-center justify-center p-1.5 rounded-full shadow-lg border transition-all ${isSelected ? 'bg-gradient-to-r from-orange-500 to-amber-500 border-white ring-4 ring-orange-500/40 text-white z-30' : isHighlighted ? 'bg-orange-500 border-white text-white ring-2 ring-orange-400/60 z-20' : 'bg-slate-900/80 border-slate-600 text-orange-400 hover:bg-orange-50 hover:text-white opacity-75 hover:opacity-100'}`}>
                             <MapPin className="w-4 h-4" />
-                            <div className={`absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2.5 py-1 rounded-xl text-[11px] font-bold whitespace-nowrap shadow-xl border pointer-events-none transition-all ${isHighlighted || isSelected ? 'bg-slate-900 text-orange-400 border-orange-500/40 opacity-100 scale-100' : 'bg-slate-900/90 text-white border-slate-700 opacity-0 group-hover:opacity-100 scale-95 group-hover:scale-100'}`}>{spot.name}</div>
+                            <div className={`absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2.5 py-1 rounded-xl text-[11px] font-bold whitespace-nowrap shadow-xl border pointer-events-none transition-all ${isHighlighted || isSelected ? 'bg-slate-900 text-orange-400 border-orange-500/40 opacity-100 scale-100' : 'bg-slate-900/90 text-white border-slate-700 opacity-0 group-hover:opacity-100 scale-95 group-hover:scale-100'}`}>{spot.name}</div>
                           </motion.div>
                         </div>
                       );
@@ -289,7 +297,7 @@ export default function Campus() {
                 {BLUEPRINT_LEGEND.map((item) => {
                   const isActive = activeLegend === item.id;
                   return (
-                    <button key={item.id} onClick={() => { setActiveLegend(item.id); setActiveCategory(null); setSelectedFacility(null); }} className={`flex items-center gap-2.5 px-4 py-2 rounded-full border transition-all cursor-pointer ${isActive ? 'border-[#F97316] bg-orange-500 text-white shadow-md scale-105' : `${item.border} ${item.bg} ${item.text} hover:scale-105`}`}>
+                    <button key={item.id} onClick={() => { setActiveLegend(item.id); setActiveCategory(null); setSelectedFacility(null); scrollToMap(); }} className={`flex items-center gap-2.5 px-4 py-2 rounded-full border transition-all cursor-pointer ${isActive ? 'border-[#F97316] bg-orange-500 text-white shadow-md scale-105' : `${item.border} ${item.bg} ${item.text} hover:scale-105`}`}>
                       <span className="w-3.5 h-3.5 rounded-full shrink-0 shadow-xs border border-black/10" style={{ backgroundColor: isActive ? 'white' : item.color }} />
                       <span className="text-xs font-semibold" style={{ fontFamily: 'Inter, sans-serif' }}>{item.label}</span>
                     </button>
@@ -315,7 +323,7 @@ export default function Campus() {
                   const isSelected = selectedFacility?.name === facility.name;
                   const isHighlighted = highlightedSpotNames.has(facility.name);
                   return (
-                    <motion.button key={facility.name} whileHover={{ scale: 1.02, y: -2 }} whileTap={{ scale: 0.98 }} onClick={() => { if (isSelected) setSelectedFacility(null); else { setSelectedFacility(facility); setActiveCategory(null); } }} className={`text-left p-4 rounded-2xl border transition-all cursor-pointer ${isSelected ? 'border-[#F97316] bg-orange-500 text-white shadow-lg ring-2 ring-orange-400/40' : isHighlighted ? 'border-[#F97316] bg-orange-50/90 shadow-md' : 'border-[#E5E7EB] bg-[#F8FAFC] hover:bg-white hover:border-orange-200 hover:shadow-xs'}`}>
+                    <motion.button key={facility.name} whileHover={{ scale: 1.02, y: -2 }} whileTap={{ scale: 0.98 }} onClick={() => { if (isSelected) setSelectedFacility(null); else { setSelectedFacility(facility); setActiveCategory(null); scrollToMap(); } }} className={`text-left p-4 rounded-2xl border transition-all cursor-pointer ${isSelected ? 'border-[#F97316] bg-orange-500 text-white shadow-lg ring-2 ring-orange-400/40' : isHighlighted ? 'border-[#F97316] bg-orange-50/90 shadow-md' : 'border-[#E5E7EB] bg-[#F8FAFC] hover:bg-white hover:border-orange-200 hover:shadow-xs'}`}>
                       <div className="flex items-start justify-between gap-1 mb-1.5">
                         <span className={`text-sm font-bold ${isSelected ? 'text-white' : 'text-[#1E293B]'}`} style={{ fontFamily: 'Poppins, sans-serif' }}>{facility.name}</span>
                         <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full shrink-0 border ${isSelected ? 'bg-white/20 border-white/30 text-white' : 'bg-white border-[#E5E7EB] text-[#475569]'}`}>{facility.area}</span>
@@ -348,7 +356,7 @@ export default function Campus() {
                           <div key={`fs-${spot.name}`} style={{ left: `${spot.x}%`, top: `${spot.y}%` }} className="absolute -translate-x-1/2 -translate-y-1/2 z-20 group cursor-pointer" onClick={() => setSelectedFacility(spot)}>
                             <div className={`relative flex items-center justify-center p-1.5 rounded-full shadow-lg border transition-all ${isSelected ? 'bg-orange-500 border-white text-white ring-4 ring-orange-500/40 z-30 scale-125' : isHighlighted ? 'bg-orange-500 border-white text-white ring-2 ring-orange-400/60 z-20' : 'bg-slate-900/80 border-slate-600 text-orange-400 hover:bg-orange-50 hover:text-white'}`}>
                               <MapPin className="w-4 h-4" />
-                              <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-0.5 rounded-lg text-[10px] font-bold whitespace-nowrap bg-slate-900 text-white border border-slate-700 opacity-0 group-hover:opacity-100 transition-opacity">{spot.name}</div>
+                              <div className="absolute top-full left-1/2 -translate-x-1/2 mt-1.5 px-2 py-0.5 rounded-lg text-[10px] font-bold whitespace-nowrap bg-slate-900 text-white border border-slate-700 opacity-0 group-hover:opacity-100 transition-opacity">{spot.name}</div>
                             </div>
                           </div>
                         );
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 9c747c2..806146b 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -34,6 +34,7 @@ export default function Home() {
             willChange: 'transform'
           }}
         >
+          <source src="/video/RIT Video.webm" type="video/webm" />
           <source src="/video/RIT Video.mp4" type="video/mp4" />
         </video>
         {/* Dark Overlay (40-50%) */}
diff --git a/src/pages/LeetcodeLeaderboard/LeetcodeLeaderboard.tsx b/src/pages/LeetcodeLeaderboard/LeetcodeLeaderboard.tsx
index a79e438..4765f0a 100644
--- a/src/pages/LeetcodeLeaderboard/LeetcodeLeaderboard.tsx
+++ b/src/pages/LeetcodeLeaderboard/LeetcodeLeaderboard.tsx
@@ -125,7 +125,7 @@ export default function LeetcodeLeaderboard() {
   const topProfile = profiles.length > 0 ? profiles[0] : null;
 
   return (
-    <div className="min-h-screen pt-24 pb-16 bg-[#0B0F17] text-slate-100 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen pt-24 pb-16 bg-[#FAFAFA] text-[#1E293B] px-4 sm:px-6 lg:px-8">
       {/* Toast Notification */}
       <AnimatePresence>
         {toastMessage && (
@@ -133,7 +133,7 @@ export default function LeetcodeLeaderboard() {
             initial={{ opacity: 0, y: -20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -20 }}
-            className="fixed top-6 right-6 z-50 px-5 py-3 rounded-xl bg-slate-800/90 border border-slate-700 backdrop-blur-md text-white font-medium shadow-2xl flex items-center gap-2"
+            className="fixed top-6 right-6 z-50 px-5 py-3 rounded-xl bg-white border border-[#E5E7EB] backdrop-blur-md text-[#1E293B] font-semibold shadow-2xl flex items-center gap-2"
           >
             {toastMessage}
           </motion.div>
@@ -142,20 +142,20 @@ export default function LeetcodeLeaderboard() {
 
       <div className="max-w-7xl mx-auto space-y-8">
         {/* Banner Header */}
-        <div className="relative overflow-hidden rounded-3xl bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 border border-slate-800 p-8 shadow-2xl">
-          <div className="absolute top-0 right-0 -mt-12 -mr-12 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
-          <div className="absolute bottom-0 left-1/3 -mb-12 w-80 h-80 bg-teal-500/10 rounded-full blur-3xl pointer-events-none" />
+        <div className="relative overflow-hidden rounded-[24px] bg-white border border-[#E5E7EB] p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)]">
+          <div className="absolute top-0 right-0 -mt-12 -mr-12 w-96 h-96 bg-amber-500/5 rounded-full blur-3xl pointer-events-none" />
+          <div className="absolute bottom-0 left-1/3 -mb-12 w-80 h-80 bg-teal-500/5 rounded-full blur-3xl pointer-events-none" />
 
           <div className="relative z-10 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
             <div>
-              <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-xs font-semibold uppercase tracking-wider mb-4">
+              <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-500 text-xs font-semibold uppercase tracking-wider mb-4">
                 <Flame className="w-4 h-4 text-amber-500 animate-pulse" />
                 RIT LeetCode Arena
               </div>
-              <h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-white font-poppins">
-                Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-amber-400 via-orange-400 to-teal-400">LeetCode Leaderboard</span>
+              <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-amber-400 via-orange-400 to-[#F97316]">LeetCode Leaderboard</span>
               </h1>
-              <p className="mt-2 text-slate-400 max-w-2xl text-sm sm:text-base">
+              <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.
               </p>
             </div>
@@ -163,7 +163,7 @@ export default function LeetcodeLeaderboard() {
             <div className="flex flex-wrap items-center gap-3 shrink-0">
               <button
                 onClick={() => setShowModal(true)}
-                className="flex items-center gap-2 px-5 py-3 rounded-2xl bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-slate-950 font-bold text-sm shadow-lg shadow-amber-500/25 transition-all transform hover:-translate-y-0.5 active:translate-y-0"
+                className="flex items-center gap-2 px-5 py-3 rounded-2xl bg-gradient-to-r from-[#F97316] to-[#FB923C] hover:from-[#EA580C] hover:to-[#F97316] text-white font-bold text-sm shadow-lg shadow-[#F97316]/25 transition-all transform hover:-translate-y-0.5 active:translate-y-0 cursor-pointer"
               >
                 <Plus className="w-5 h-5 stroke-[2.5]" />
                 Register Handle
@@ -171,62 +171,62 @@ export default function LeetcodeLeaderboard() {
               <button
                 onClick={handleTriggerSync}
                 disabled={isSyncing}
-                className="flex items-center gap-2 px-4 py-3 rounded-2xl bg-slate-800/80 hover:bg-slate-800 text-slate-300 border border-slate-700/80 font-semibold text-sm transition-all hover:text-white"
+                className="flex items-center gap-2 px-4 py-3 rounded-2xl bg-[#F8FAFC] hover:bg-[#F1F5F9] text-slate-700 border border-[#E2E8F0] font-semibold text-sm transition-all cursor-pointer"
               >
-                <RefreshCw className={`w-4 h-4 ${isSyncing ? 'animate-spin text-amber-400' : ''}`} />
+                <RefreshCw className={`w-4 h-4 ${isSyncing ? 'animate-spin text-amber-500' : ''}`} />
                 24h Spaced Sync
               </button>
             </div>
           </div>
 
           {/* Quick Metrics Bar */}
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8 pt-6 border-t border-slate-800/80">
-            <div className="p-4 rounded-2xl bg-slate-950/40 border border-slate-800/60 backdrop-blur-sm">
-              <span className="text-xs font-semibold text-slate-400 flex items-center gap-1.5">
-                <Trophy className="w-4 h-4 text-amber-400" /> #1 Top Solver
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8 pt-6 border-t border-[#E5E7EB]">
+            <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">
+                <Trophy className="w-4 h-4 text-[#F97316]" /> #1 Top Solver
               </span>
-              <p className="text-lg font-bold text-white mt-1 truncate">
+              <p className="text-lg font-bold text-[#1E293B] mt-1 truncate">
                 {topProfile ? `${topProfile.studentName}` : 'N/A'}
               </p>
-              <p className="text-xs text-amber-400 font-medium">
+              <p className="text-xs text-[#F97316] font-medium">
                 {topProfile ? `${topProfile.totalSolved} Problems Solved` : ''}
               </p>
             </div>
 
-            <div className="p-4 rounded-2xl bg-slate-950/40 border border-slate-800/60 backdrop-blur-sm">
-              <span className="text-xs font-semibold text-slate-400 flex items-center gap-1.5">
-                <Code2 className="w-4 h-4 text-teal-400" /> Total Campus Solved
+            <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">
+                <Code2 className="w-4 h-4 text-emerald-500" /> Total Campus Solved
               </span>
-              <p className="text-xl font-bold text-white mt-1">
+              <p className="text-xl font-bold text-[#1E293B] mt-1">
                 {totalCampusSolved.toLocaleString()}
               </p>
-              <p className="text-xs text-slate-500">Problems across all coders</p>
+              <p className="text-xs text-slate-400">Problems across all coders</p>
             </div>
 
-            <div className="p-4 rounded-2xl bg-slate-950/40 border border-slate-800/60 backdrop-blur-sm">
-              <span className="text-xs font-semibold text-slate-400 flex items-center gap-1.5">
-                <User className="w-4 h-4 text-indigo-400" /> Active Coders
+            <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
               </span>
-              <p className="text-xl font-bold text-white mt-1">
+              <p className="text-xl font-bold text-[#1E293B] mt-1">
                 {profiles.length}
               </p>
-              <p className="text-xs text-slate-500">Registered RIT coders</p>
+              <p className="text-xs text-slate-400">Registered RIT coders</p>
             </div>
 
-            <div className="p-4 rounded-2xl bg-slate-950/40 border border-slate-800/60 backdrop-blur-sm">
-              <span className="text-xs font-semibold text-slate-400 flex items-center gap-1.5">
-                <Clock className="w-4 h-4 text-emerald-400" /> Sync Frequency
+            <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">
+                <Clock className="w-4 h-4 text-amber-500" /> Sync Frequency
               </span>
-              <p className="text-base font-bold text-white mt-1">
+              <p className="text-base font-bold text-[#1E293B] mt-1">
                 Every 24 Hours
               </p>
-              <p className="text-[11px] text-emerald-400/90 font-mono">3s spaced rate-limiting</p>
+              <p className="text-[11px] text-[#F97316] font-mono">3s spaced rate-limiting</p>
             </div>
           </div>
         </div>
 
         {/* Search & Filter Controls */}
-        <div className="flex flex-col sm:flex-row gap-4 items-center justify-between bg-slate-900/60 border border-slate-800/80 p-4 rounded-2xl backdrop-blur-xl">
+        <div className="flex flex-col sm:flex-row gap-4 items-center justify-between bg-white border border-[#E5E7EB] p-4 rounded-2xl shadow-[0_2px_15px_-3px_rgba(0,0,0,0.04)]">
           <div className="relative w-full sm:w-80">
             <Search className="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" />
             <input
@@ -234,7 +234,7 @@ export default function LeetcodeLeaderboard() {
               placeholder="Search by student name or handle..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-slate-950/60 border border-slate-800 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-amber-500/50 transition-colors"
+              className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-[#F8FAFC] border border-[#E2E8F0] text-sm text-[#1E293B] placeholder-slate-400 focus:outline-none focus:border-[#F97316] transition-colors"
             />
           </div>
 
@@ -244,10 +244,10 @@ export default function LeetcodeLeaderboard() {
               <select
                 value={selectedDept}
                 onChange={(e) => setSelectedDept(e.target.value)}
-                className="bg-slate-950/60 border border-slate-800 rounded-xl px-3 py-2 text-xs font-medium text-slate-300 focus:outline-none focus:border-amber-500/50"
+                className="bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl px-3 py-2 text-xs font-medium text-slate-700 focus:outline-none focus:border-[#F97316]"
               >
                 {DEPARTMENTS.map((d) => (
-                  <option key={d} value={d} className="bg-slate-900">
+                  <option key={d} value={d}>
                     Dept: {d}
                   </option>
                 ))}
@@ -257,10 +257,10 @@ export default function LeetcodeLeaderboard() {
             <select
               value={selectedYear}
               onChange={(e) => setSelectedYear(e.target.value)}
-              className="bg-slate-950/60 border border-slate-800 rounded-xl px-3 py-2 text-xs font-medium text-slate-300 focus:outline-none focus:border-amber-500/50"
+              className="bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl px-3 py-2 text-xs font-medium text-slate-700 focus:outline-none focus:border-[#F97316]"
             >
               {YEARS.map((y) => (
-                <option key={y} value={y} className="bg-slate-900">
+                <option key={y} value={y}>
                   Year: {y}
                 </option>
               ))}
@@ -269,20 +269,20 @@ export default function LeetcodeLeaderboard() {
         </div>
 
         {/* Leaderboard Table */}
-        <div className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-900/40 backdrop-blur-xl shadow-xl">
+        <div className="overflow-hidden rounded-2xl border border-[#E5E7EB] bg-white shadow-[0_4px_25px_-4px_rgba(0,0,0,0.05)]">
           {loading ? (
-            <div className="p-16 text-center text-slate-500 flex flex-col items-center gap-3">
-              <RefreshCw className="w-8 h-8 animate-spin text-amber-500" />
+            <div className="p-16 text-center text-slate-400 flex flex-col items-center gap-3">
+              <RefreshCw className="w-8 h-8 animate-spin text-[#F97316]" />
               <p className="text-sm font-medium">Fetching LeetCode rankings...</p>
             </div>
           ) : filteredProfiles.length === 0 ? (
-            <div className="p-16 text-center text-slate-500 space-y-3">
-              <Trophy className="w-12 h-12 text-slate-700 mx-auto" />
-              <p className="text-base font-semibold text-slate-300">No coders found</p>
+            <div className="p-16 text-center text-slate-400 space-y-3">
+              <Trophy className="w-12 h-12 text-slate-300 mx-auto" />
+              <p className="text-base font-semibold text-slate-800">No coders found</p>
               <p className="text-xs text-slate-500">Be the first to register your LeetCode handle!</p>
               <button
                 onClick={() => setShowModal(true)}
-                className="mt-2 inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-amber-500 text-slate-950 font-bold text-xs"
+                className="mt-2 inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-gradient-to-r from-[#F97316] to-[#FB923C] text-white font-bold text-xs shadow-md shadow-[#F97316]/10 cursor-pointer"
               >
                 <Plus className="w-4 h-4" /> Register Profile
               </button>
@@ -290,7 +290,7 @@ export default function LeetcodeLeaderboard() {
           ) : (
             <>
               {/* Mobile Card View (Small Screens) */}
-              <div className="block md:hidden divide-y divide-slate-800/80">
+              <div className="block md:hidden divide-y divide-[#E5E7EB]">
                 {filteredProfiles.map((p, index) => {
                   const rank = index + 1;
                   const total = p.totalSolved || 1;
@@ -304,7 +304,7 @@ export default function LeetcodeLeaderboard() {
                       initial={{ opacity: 0, y: 10 }}
                       animate={{ opacity: 1, y: 0 }}
                       transition={{ delay: index * 0.03 }}
-                      className="p-4 space-y-3 bg-slate-900/60"
+                      className="p-4 space-y-3 bg-white"
                     >
                       <div className="flex items-center justify-between gap-3">
                         <div className="flex items-center gap-3">
@@ -315,36 +315,36 @@ export default function LeetcodeLeaderboard() {
                           ) : rank === 3 ? (
                             <span className="text-2xl" title="Rank 3 Bronze">🥉</span>
                           ) : (
-                            <span className="text-xs font-mono font-extrabold px-2 py-1 rounded bg-slate-800 text-slate-400">
+                            <span className="text-xs font-mono font-extrabold px-2 py-1 rounded bg-[#F1F5F9] text-slate-500">
                               #{rank}
                             </span>
                           )}
 
                           <div>
-                            <p className="font-bold text-white text-base leading-tight">{p.studentName}</p>
+                            <p className="font-bold text-[#1E293B] text-base leading-tight">{p.studentName}</p>
                             <p className="text-xs text-slate-400 font-mono">@{p.leetcodeUsername}</p>
                           </div>
                         </div>
 
                         <div className="text-right">
-                          <p className="text-xl font-black text-amber-400 font-mono leading-none">{p.totalSolved}</p>
-                          <p className="text-[10px] text-slate-500 font-medium">Solved</p>
+                          <p className="text-xl font-black text-[#F97316] font-mono leading-none">{p.totalSolved}</p>
+                          <p className="text-[10px] text-slate-400 font-medium">Solved</p>
                         </div>
                       </div>
 
-                      <div className="flex items-center justify-between text-xs text-slate-400 pt-1">
+                      <div className="flex items-center justify-between text-xs text-slate-500 pt-1">
                         <div className="flex items-center gap-2">
-                          <span className="px-2 py-0.5 rounded bg-slate-800 border border-slate-700 text-[11px] font-medium text-slate-300">
+                          <span className="px-2 py-0.5 rounded bg-[#F1F5F9] border border-[#E2E8F0] text-[11px] font-medium text-slate-600">
                             {p.department}
                           </span>
-                          <span className="text-[11px] text-slate-500">{p.year}</span>
+                          <span className="text-[11px] text-slate-400">{p.year}</span>
                         </div>
 
                         <a
                           href={`https://leetcode.com/u/${p.leetcodeUsername}`}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="inline-flex items-center gap-1 text-xs text-amber-400 hover:underline font-semibold"
+                          className="inline-flex items-center gap-1 text-xs text-[#F97316] hover:underline font-semibold"
                         >
                           LeetCode Profile <ExternalLink className="w-3.5 h-3.5" />
                         </a>
@@ -352,12 +352,12 @@ export default function LeetcodeLeaderboard() {
 
                       {/* Progress Bar */}
                       <div className="space-y-1 pt-1">
-                        <div className="flex justify-between text-[10px] font-mono text-slate-400">
-                          <span className="text-emerald-400">Easy: {p.easySolved}</span>
-                          <span className="text-amber-400">Med: {p.mediumSolved}</span>
-                          <span className="text-rose-400">Hard: {p.hardSolved}</span>
+                        <div className="flex justify-between text-[10px] font-mono text-slate-500">
+                          <span className="text-emerald-600">Easy: {p.easySolved}</span>
+                          <span className="text-amber-500">Med: {p.mediumSolved}</span>
+                          <span className="text-rose-500">Hard: {p.hardSolved}</span>
                         </div>
-                        <div className="w-full h-2 rounded-full bg-slate-800 overflow-hidden flex">
+                        <div className="w-full h-2 rounded-full bg-[#E2E8F0] overflow-hidden flex">
                           <div style={{ width: `${easyPct}%` }} className="bg-emerald-500 h-full" />
                           <div style={{ width: `${medPct}%` }} className="bg-amber-500 h-full" />
                           <div style={{ width: `${hardPct}%` }} className="bg-rose-500 h-full" />
@@ -370,9 +370,9 @@ export default function LeetcodeLeaderboard() {
 
               {/* Desktop Table View (Medium Screens & Up) */}
               <div className="hidden md:block overflow-x-auto">
-                <table className="w-full text-left text-slate-300 border-collapse">
+                <table className="w-full text-left text-slate-600 border-collapse">
                   <thead>
-                    <tr className="border-b border-slate-800 bg-slate-950/50 text-[11px] font-bold uppercase tracking-wider text-slate-400">
+                    <tr className="border-b border-[#E5E7EB] bg-[#F8FAFC] text-[11px] font-bold uppercase tracking-wider text-slate-500">
                       <th className="py-4 px-6 text-center w-16">Rank</th>
                       <th className="py-4 px-6">Student</th>
                       <th className="py-4 px-6">Dept & Year</th>
@@ -382,7 +382,7 @@ export default function LeetcodeLeaderboard() {
                       <th className="py-4 px-6 text-center w-24">Profile</th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-slate-800/60 text-sm">
+                  <tbody className="divide-y divide-[#E5E7EB] text-sm">
                     {filteredProfiles.map((p, index) => {
                       const rank = index + 1;
                       const total = p.totalSolved || 1;
@@ -396,31 +396,31 @@ export default function LeetcodeLeaderboard() {
                           initial={{ opacity: 0, y: 10 }}
                           animate={{ opacity: 1, y: 0 }}
                           transition={{ delay: index * 0.03 }}
-                          className="hover:bg-slate-800/40 transition-colors group"
+                          className="hover:bg-[#FFF7ED]/50 transition-colors group"
                         >
                           {/* Rank */}
                           <td className="py-4 px-6 text-center font-extrabold">
                             {rank === 1 ? (
-                              <div className="w-8 h-8 rounded-full bg-amber-500/20 text-amber-400 border border-amber-500/40 flex items-center justify-center mx-auto text-base shadow-[0_0_12px_rgba(245,158,11,0.3)]">
+                              <div className="w-8 h-8 rounded-full bg-amber-500/10 text-amber-600 border border-amber-500/20 flex items-center justify-center mx-auto text-base shadow-sm">
                                 🥇
                               </div>
                             ) : rank === 2 ? (
-                              <div className="w-8 h-8 rounded-full bg-slate-300/20 text-slate-200 border border-slate-300/40 flex items-center justify-center mx-auto text-base">
+                              <div className="w-8 h-8 rounded-full bg-slate-300/10 text-slate-600 border border-slate-300/20 flex items-center justify-center mx-auto text-base">
                                 🥈
                               </div>
                             ) : rank === 3 ? (
-                              <div className="w-8 h-8 rounded-full bg-amber-700/20 text-amber-600 border border-amber-700/40 flex items-center justify-center mx-auto text-base">
+                              <div className="w-8 h-8 rounded-full bg-amber-700/10 text-amber-700 border border-amber-700/20 flex items-center justify-center mx-auto text-base">
                                 🥉
                               </div>
                             ) : (
-                              <span className="text-slate-500 font-mono">#{rank}</span>
+                              <span className="text-slate-400 font-mono">#{rank}</span>
                             )}
                           </td>
 
                           {/* Student Info */}
                           <td className="py-4 px-6">
                             <div>
-                              <p className="font-bold text-white group-hover:text-amber-400 transition-colors">
+                              <p className="font-bold text-[#1E293B] group-hover:text-[#F97316] transition-colors">
                                 {p.studentName}
                               </p>
                               <p className="text-xs text-slate-400 font-mono">
@@ -430,16 +430,16 @@ export default function LeetcodeLeaderboard() {
                           </td>
 
                           {/* Dept & Year */}
-                          <td className="py-4 px-6 text-xs text-slate-400">
-                            <span className="px-2.5 py-1 rounded-md bg-slate-800 border border-slate-700 text-slate-300 font-medium mr-1.5">
+                          <td className="py-4 px-6 text-xs text-slate-500">
+                            <span className="px-2.5 py-1 rounded-md bg-[#F1F5F9] border border-[#E2E8F0] text-slate-600 font-medium mr-1.5">
                               {p.department}
                             </span>
-                            <span className="text-slate-500">{p.year}</span>
+                            <span className="text-slate-400">{p.year}</span>
                           </td>
 
                           {/* Total Solved */}
                           <td className="py-4 px-6 text-center">
-                            <span className="text-lg font-black text-amber-400 font-mono">
+                            <span className="text-lg font-black text-[#F97316] font-mono">
                               {p.totalSolved}
                             </span>
                           </td>
@@ -447,12 +447,12 @@ export default function LeetcodeLeaderboard() {
                           {/* Problem Breakdown Bars */}
                           <td className="py-4 px-6">
                             <div className="space-y-1.5">
-                              <div className="flex items-center justify-between text-[11px] font-mono text-slate-400">
-                                <span className="text-emerald-400">Easy: {p.easySolved}</span>
-                                <span className="text-amber-400">Med: {p.mediumSolved}</span>
-                                <span className="text-rose-400">Hard: {p.hardSolved}</span>
+                              <div className="flex items-center justify-between text-[11px] font-mono text-slate-500">
+                                <span className="text-emerald-600">Easy: {p.easySolved}</span>
+                                <span className="text-amber-500">Med: {p.mediumSolved}</span>
+                                <span className="text-rose-500">Hard: {p.hardSolved}</span>
                               </div>
-                              <div className="w-full h-2 rounded-full bg-slate-800 overflow-hidden flex">
+                              <div className="w-full h-2 rounded-full bg-[#E2E8F0] overflow-hidden flex">
                                 <div
                                   style={{ width: `${easyPct}%` }}
                                   className="bg-emerald-500 h-full"
@@ -475,11 +475,11 @@ export default function LeetcodeLeaderboard() {
                           {/* LeetCode Global Rank */}
                           <td className="py-4 px-6 text-right font-mono text-xs">
                             {p.ranking > 0 ? (
-                              <span className="text-slate-300 font-medium">
+                              <span className="text-[#1E293B] font-medium">
                                 #{p.ranking.toLocaleString()}
                               </span>
                             ) : (
-                              <span className="text-slate-600">-</span>
+                              <span className="text-slate-400">-</span>
                             )}
                           </td>
 
@@ -489,7 +489,7 @@ export default function LeetcodeLeaderboard() {
                               href={`https://leetcode.com/u/${p.leetcodeUsername}`}
                               target="_blank"
                               rel="noopener noreferrer"
-                              className="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-slate-800 hover:bg-amber-500/20 text-slate-400 hover:text-amber-400 border border-slate-700/60 transition-colors"
+                              className="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-[#F8FAFC] hover:bg-[#FFF7ED] text-slate-500 hover:text-[#F97316] border border-[#E2E8F0] transition-colors"
                               title="View on LeetCode"
                             >
                               <ExternalLink className="w-4 h-4" />
@@ -509,33 +509,33 @@ export default function LeetcodeLeaderboard() {
       {/* Registration Modal */}
       <AnimatePresence>
         {showModal && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm">
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/40 backdrop-blur-sm">
             <motion.div
               initial={{ scale: 0.95, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
               exit={{ scale: 0.95, opacity: 0 }}
-              className="w-full max-w-md bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-2xl relative max-h-[90vh] overflow-y-auto"
+              className="w-full max-w-md bg-white border border-[#E5E7EB] rounded-3xl p-6 shadow-2xl relative max-h-[90vh] overflow-y-auto"
             >
               <button
                 onClick={() => setShowModal(false)}
-                className="absolute top-5 right-5 text-slate-400 hover:text-white"
+                className="absolute top-5 right-5 text-slate-400 hover:text-slate-600 cursor-pointer"
               >
                 <X className="w-5 h-5" />
               </button>
 
               <div className="flex items-center gap-3 mb-6">
-                <div className="w-10 h-10 rounded-2xl bg-amber-500/20 border border-amber-500/40 flex items-center justify-center text-amber-400">
+                <div className="w-10 h-10 rounded-2xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center text-[#F97316]">
                   <Trophy className="w-5 h-5" />
                 </div>
                 <div>
-                  <h3 className="text-lg font-bold text-white">Register LeetCode Handle</h3>
+                  <h3 className="text-lg font-bold text-[#1E293B]">Register LeetCode Handle</h3>
                   <p className="text-xs text-slate-400">Join the RIT campus coding rankings</p>
                 </div>
               </div>
 
               <form onSubmit={handleRegister} className="space-y-4">
                 <div>
-                  <label className="block text-xs font-semibold text-slate-300 mb-1.5">
+                  <label className="block text-xs font-semibold text-slate-600 mb-1.5">
                     Your Full Name
                   </label>
                   <input
@@ -544,12 +544,12 @@ export default function LeetcodeLeaderboard() {
                     placeholder="e.g. Shanmuga Sundaram"
                     value={studentName}
                     onChange={(e) => setStudentName(e.target.value)}
-                    className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-sm text-white focus:outline-none focus:border-amber-500"
+                    className="w-full px-4 py-2.5 rounded-xl bg-[#F8FAFC] border border-[#E2E8F0] text-sm text-[#1E293B] focus:outline-none focus:border-[#F97316]"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-xs font-semibold text-slate-300 mb-1.5">
+                  <label className="block text-xs font-semibold text-slate-600 mb-1.5">
                     LeetCode Username (Exact)
                   </label>
                   <input
@@ -558,20 +558,20 @@ export default function LeetcodeLeaderboard() {
                     placeholder="e.g. neal_wu"
                     value={leetcodeUsername}
                     onChange={(e) => setLeetcodeUsername(e.target.value)}
-                    className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-sm text-white focus:outline-none focus:border-amber-500"
+                    className="w-full px-4 py-2.5 rounded-xl bg-[#F8FAFC] border border-[#E2E8F0] text-sm text-[#1E293B] focus:outline-none focus:border-[#F97316]"
                   />
-                  <p className="text-[11px] text-slate-500 mt-1">We will immediately fetch your problem stats from LeetCode.</p>
+                  <p className="text-[11px] text-slate-400 mt-1">We will immediately fetch your problem stats from LeetCode.</p>
                 </div>
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <label className="block text-xs font-semibold text-slate-300 mb-1.5">
+                    <label className="block text-xs font-semibold text-slate-600 mb-1.5">
                       Department
                     </label>
                     <select
                       value={department}
                       onChange={(e) => setDepartment(e.target.value)}
-                      className="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-sm text-white focus:outline-none focus:border-amber-500"
+                      className="w-full px-3 py-2.5 rounded-xl bg-[#F8FAFC] border border-[#E2E8F0] text-sm text-[#1E293B] focus:outline-none focus:border-[#F97316]"
                     >
                       {DEPARTMENTS.filter(d => d !== 'All').map(d => (
                         <option key={d} value={d}>{d}</option>
@@ -580,13 +580,13 @@ export default function LeetcodeLeaderboard() {
                   </div>
 
                   <div>
-                    <label className="block text-xs font-semibold text-slate-300 mb-1.5">
+                    <label className="block text-xs font-semibold text-slate-600 mb-1.5">
                       Year
                     </label>
                     <select
                       value={year}
                       onChange={(e) => setYear(e.target.value)}
-                      className="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-sm text-white focus:outline-none focus:border-amber-500"
+                      className="w-full px-3 py-2.5 rounded-xl bg-[#F8FAFC] border border-[#E2E8F0] text-sm text-[#1E293B] focus:outline-none focus:border-[#F97316]"
                     >
                       {YEARS.filter(y => y !== 'All').map(y => (
                         <option key={y} value={y}>{y}</option>
@@ -599,14 +599,14 @@ export default function LeetcodeLeaderboard() {
                   <button
                     type="button"
                     onClick={() => setShowModal(false)}
-                    className="px-4 py-2.5 rounded-xl bg-slate-800 text-slate-300 text-xs font-semibold hover:bg-slate-700"
+                    className="px-4 py-2.5 rounded-xl bg-[#F1F5F9] text-slate-600 text-xs font-semibold hover:bg-[#E2E8F0] cursor-pointer"
                   >
                     Cancel
                   </button>
                   <button
                     type="submit"
                     disabled={isSubmitting}
-                    className="px-5 py-2.5 rounded-xl bg-amber-500 hover:bg-amber-600 text-slate-950 text-xs font-bold transition-all"
+                    className="px-5 py-2.5 rounded-xl bg-gradient-to-r from-[#F97316] to-[#FB923C] hover:from-[#EA580C] hover:to-[#F97316] text-white text-xs font-bold transition-all shadow-md shadow-orange-500/10 cursor-pointer"
                   >
                     {isSubmitting ? 'Fetching Stats...' : 'Register Profile'}
                   </button>
diff --git a/src/pages/Notes/Notes.tsx b/src/pages/Notes/Notes.tsx
index 7852c6c..35cb187 100644
--- a/src/pages/Notes/Notes.tsx
+++ b/src/pages/Notes/Notes.tsx
@@ -1360,6 +1360,14 @@ export default function Notes() {
     fetchNotes();
   }, []);
 
+  useEffect(() => {
+    if (searchParams.get('section') === 'toolkit') {
+      setTimeout(() => {
+        toolkitRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }, 300);
+    }
+  }, [searchParams]);
+
   const handleDownload = async (noteId: string, downloadUrl: string) => {
     try {
       await fetch(getBackendUrl(`/api/notes/${noteId}/download`), { method: 'POST' });
@@ -2073,7 +2081,7 @@ export default function Notes() {
             {/* Toolkit Section */}
             <div ref={toolkitRef} />
             <SectionTitle tag="Useful Downloads" title="Student" highlight="Toolkit" align="left" />
-            <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-20">
+            <StaggerContainer className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-20">
               {TOOLKIT_ITEMS.map((item) => {
                 const iconConfig = TOOLKIT_ICONS[item.title] || { icon: Code, bg: '#FFF7ED', color: '#F97316' };
                 const IconComponent = iconConfig.icon;
@@ -2097,24 +2105,24 @@ export default function Notes() {
                           window.open(item.url, '_blank');
                         }
                       }}
-                      whileHover={{ y: -3 }}
-                      className="flex items-center gap-4 p-5 bg-white hover:bg-[#FFF7ED] rounded-2xl border border-[#E5E7EB] hover:border-[#FED7AA] cursor-pointer group w-full transition-all shadow-xs hover:shadow-md"
+                      whileHover={{ y: -4, boxShadow: '0 12px 30px -10px rgba(249,115,22,0.15)' }}
+                      className="flex items-start gap-5 p-7 bg-white hover:bg-[#FFF7ED] rounded-[22px] border border-[#E5E7EB] hover:border-[#FED7AA] cursor-pointer group w-full transition-all shadow-xs hover:shadow-md"
                     >
                       <div
-                        className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 font-bold text-sm transition-transform group-hover:scale-105"
+                        className="w-14 h-14 rounded-2xl flex items-center justify-center shrink-0 font-bold text-sm transition-transform group-hover:scale-105"
                         style={{ backgroundColor: iconConfig.bg, color: iconConfig.color }}
                       >
-                        <IconComponent className="w-5.5 h-5.5" />
+                        <IconComponent className="w-7 h-7" />
                       </div>
                       <div className="flex-1 min-w-0">
-                        <div className="text-sm font-bold text-[#1E293B] group-hover:text-[#F97316] transition-colors mb-0.5" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                        <div className="text-base lg:text-lg font-bold text-[#1E293B] group-hover:text-[#F97316] transition-colors mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
                           {item.title}
                         </div>
-                        <div className="text-xs text-[#64748B] line-clamp-1" style={{ fontFamily: 'Inter, sans-serif' }}>
+                        <div className="text-sm text-[#64748B] leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
                           {item.description}
                         </div>
                       </div>
-                      <ChevronRight className="w-4 h-4 text-[#94A3B8] group-hover:text-[#F97316] group-hover:translate-x-1 transition-all shrink-0" />
+                      <ChevronRight className="w-5 h-5 text-[#94A3B8] group-hover:text-[#F97316] group-hover:translate-x-1.5 transition-all shrink-0 mt-1" />
                     </motion.div>
                   </StaggerItem>
                 );
diff --git a/telegram-bot/config.json b/telegram-bot/config.json
index 0958a17..5716b56 100644
--- a/telegram-bot/config.json
+++ b/telegram-bot/config.json
@@ -1,7 +1,7 @@
 {
   "community_bot_token": "",
   "telegram_bot_token": "",
-  "helper_chat_ids": [971749136, 5567776672],
+  "helper_chat_ids": [971749136, 5567776672,1873240361],
   "discord_bot_token": "",
   "discord_helper_user_ids": [789393727641878568],
   "spring_backend_url": "http://localhost:8085"