adjust ui and bus route

src/components/BusRouteMap/BusRouteMap.tsx

@@ -17,28 +17,74 @@ L.Icon.Default.mergeOptions({
   shadowUrl: markerShadow,
 });
 
+// Glowing Live Bus Icon
 const liveBusIcon = L.divIcon({
-  html: `<div class="relative flex items-center justify-center w-10 h-10 rounded-full bg-emerald-500 border-2 border-white shadow-xl text-white text-base font-bold cursor-pointer"><span class="absolute inset-0 rounded-full bg-emerald-500/50 animate-ping"></span>🚌</div>`,
+  html: `<div class="relative flex items-center justify-center w-10 h-10 rounded-full bg-emerald-500 border-2 border-white shadow-2xl text-white text-base font-bold cursor-pointer"><span class="absolute inset-0 rounded-full bg-emerald-500/60 animate-ping"></span>🚌</div>`,
   className: '',
   iconSize: [40, 40],
   iconAnchor: [20, 20],
 });
 
+// Stopped Bus Icon
 const stoppedBusIcon = L.divIcon({
-  html: `<div class="relative flex items-center justify-center w-10 h-10 rounded-full bg-red-500 border-2 border-white shadow-xl text-white text-base font-bold cursor-pointer">🚌</div>`,
+  html: `<div class="relative flex items-center justify-center w-10 h-10 rounded-full bg-red-500 border-2 border-white shadow-2xl text-white text-base font-bold cursor-pointer">🚌</div>`,
   className: '',
   iconSize: [40, 40],
   iconAnchor: [20, 20],
 });
 
-// Helper component to pan map to active bus marker when selected
-function MapPanFocus({ center }: { center: [number, number] | null }) {
+// Helper: Create Clean Start Point Icon (Starting Location Name Only)
+function createStartIcon(locationName: string) {
+  return L.divIcon({
+    html: `
+      <div class="relative flex items-center justify-center cursor-pointer group">
+        <span class="absolute -inset-2 rounded-full bg-emerald-500/40 animate-ping"></span>
+        <div class="relative flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-emerald-600 border-2 border-white text-white font-extrabold text-xs shadow-2xl transition-transform group-hover:scale-105">
+          <span class="text-sm">📍</span>
+          <span class="whitespace-nowrap tracking-wide">${locationName}</span>
+        </div>
+      </div>
+    `,
+    className: '',
+    iconSize: [160, 40],
+    iconAnchor: [80, 20],
+  });
+}
+
+// Helper: Create Clean Destination Point Icon (RIT Campus Only)
+function createDestinationIcon(locationName: string) {
+  const displayName = locationName.includes('RIT') ? locationName : 'RIT Campus';
+  return L.divIcon({
+    html: `
+      <div class="relative flex items-center justify-center cursor-pointer group">
+        <span class="absolute -inset-2 rounded-full bg-orange-500/40 animate-ping"></span>
+        <div class="relative flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-orange-600 border-2 border-white text-white font-extrabold text-xs shadow-2xl transition-transform group-hover:scale-105">
+          <span class="text-sm">🏫</span>
+          <span class="whitespace-nowrap tracking-wide">${displayName}</span>
+        </div>
+      </div>
+    `,
+    className: '',
+    iconSize: [160, 40],
+    iconAnchor: [80, 20],
+  });
+}
+
+// Helper component to auto-fit map view bounds when route changes
+function MapPanFocus({ bounds }: { bounds: L.LatLngBoundsExpression | null }) {
   const map = useMap();
+
   useEffect(() => {
-    if (center) {
-      map.setView(center, 13, { animate: true });
+    if (bounds) {
+      map.fitBounds(bounds, {
+        padding: [80, 80],
+        maxZoom: 14,
+        animate: true,
+        duration: 0.8,
+      });
     }
-  }, [center, map]);
+  }, [bounds, map]);
+
   return null;
 }
 
@@ -47,7 +93,8 @@ interface BusRouteMapProps {
   allRoutes: BusRoute[];
 }
 
-const DEFAULT_CENTER: [number, number] = [13.0118, 80.0214]; // RIT Campus default
+const RIT_CAMPUS_COORDS: [number, number] = [13.03868, 80.045138]; // True RIT Campus Kuthambakkam / Poonamallee
+const DEFAULT_CENTER: [number, number] = RIT_CAMPUS_COORDS;
 
 export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
   const [allLiveLocations, setAllLiveLocations] = useState<
@@ -100,36 +147,52 @@ export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
     return () => clearInterval(interval);
   }, []);
 
-  // Determine center focus point if a bus is live or selected
-  const activeFocusCenter = useMemo<[number, number] | null>(() => {
+  // Compute Start and Destination coordinates only
+  const routeData = useMemo(() => {
     if (!selectedRoute) return null;
 
-    const normalizeRouteNum = (str: string) => (str || '').replace(/^[Rr]0*/, '').trim().toUpperCase();
-    const matchLocKey = Object.keys(allLiveLocations).find(
-      (k) => normalizeRouteNum(k) === normalizeRouteNum(selectedRoute.number)
-    );
-
-    if (matchLocKey && allLiveLocations[matchLocKey]) {
-      const loc = allLiveLocations[matchLocKey];
-      return [loc.latitude, loc.longitude];
-    }
+    // Start coordinates
+    let startCoords: [number, number] | null = null;
+    let startName = selectedRoute.from || 'Start Point';
 
     if (selectedRoute.from_lat && selectedRoute.from_lng) {
-      return [selectedRoute.from_lat, selectedRoute.from_lng];
+      startCoords = [selectedRoute.from_lat, selectedRoute.from_lng];
+    } else if (selectedRoute.stops && selectedRoute.stops.length > 0) {
+      const firstStop = selectedRoute.stops[0];
+      if (firstStop.lat && firstStop.lng) {
+        startCoords = [firstStop.lat, firstStop.lng];
+        startName = firstStop.name || startName;
+      }
     }
 
-    return DEFAULT_CENTER;
-  }, [selectedRoute, allLiveLocations]);
+    // Destination is ALWAYS the true RIT Campus location (Kuthambakkam)
+    const destCoords: [number, number] = RIT_CAMPUS_COORDS;
+    const destName = 'RIT Campus';
+
+    // Compute bounding box for map view auto-fit (start & destination only)
+    const allPoints: [number, number][] = [];
+    if (startCoords) allPoints.push(startCoords);
+    if (destCoords) allPoints.push(destCoords);
+
+    const bounds: L.LatLngBoundsExpression | null =
+      allPoints.length > 0 ? (allPoints as L.LatLngBoundsExpression) : null;
+
+    return {
+      startCoords,
+      startName,
+      destCoords,
+      destName,
+      bounds,
+    };
+  }, [selectedRoute]);
 
   return (
     <div className="relative h-full w-full bg-slate-950 overflow-hidden">
       <MapContainer
         center={DEFAULT_CENTER as L.LatLngExpression}
         zoom={11}
-        minZoom={10}
+        minZoom={9}
         maxZoom={18}
-        maxBounds={[[12.65, 79.25], [13.35, 80.45]] as L.LatLngBoundsExpression}
-        maxBoundsViscosity={1.0}
         className="h-full w-full z-10"
         style={{ height: '100%', width: '100%' }}
       >
@@ -138,7 +201,52 @@ export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
 
-        {/* Live GPS Bus Markers ONLY - No polyline routes */}
+        {/* ── SELECTED ROUTE MARKERS (Starting Point & RIT Campus Destination ONLY) ── */}
+        {selectedRoute && routeData && (
+          <>
+            {/* START Point Marker */}
+            {routeData.startCoords && (
+              <Marker
+                position={routeData.startCoords}
+                icon={createStartIcon(routeData.startName)}
+              >
+                <Popup>
+                  <div className="p-1 font-sans text-center">
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800 text-[10px] font-bold">
+                      📍 ORIGIN / PICKUP
+                    </span>
+                    <h4 className="font-bold text-slate-900 text-xs mt-1">{routeData.startName}</h4>
+                    <p className="text-[10px] text-slate-500 mt-0.5">
+                      Departure: <strong>{selectedRoute.departureTime || 'Early Morning'}</strong>
+                    </p>
+                  </div>
+                </Popup>
+              </Marker>
+            )}
+
+            {/* DESTINATION Point Marker (RIT Campus) */}
+            {routeData.destCoords && (
+              <Marker
+                position={routeData.destCoords}
+                icon={createDestinationIcon(routeData.destName)}
+              >
+                <Popup>
+                  <div className="p-1 font-sans text-center">
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-orange-100 text-orange-800 text-[10px] font-bold">
+                      🏫 DESTINATION
+                    </span>
+                    <h4 className="font-bold text-slate-900 text-xs mt-1">{routeData.destName}</h4>
+                    <p className="text-[10px] text-slate-500 mt-0.5">
+                      Arrival: <strong>{selectedRoute.arrivalTime || '08:30 AM'}</strong>
+                    </p>
+                  </div>
+                </Popup>
+              </Marker>
+            )}
+          </>
+        )}
+
+        {/* ── LIVE GPS BUS TRACKING MARKERS ── */}
         {Object.entries(allLiveLocations).map(([rNum, loc]) => {
           const normalizeRouteNum = (str: string) => (str || '').replace(/^[Rr]0*/, '').trim().toUpperCase();
           if (selectedRoute && normalizeRouteNum(selectedRoute.number) !== normalizeRouteNum(rNum)) return null;
@@ -174,7 +282,8 @@ export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
           );
         })}
 
-        <MapPanFocus center={activeFocusCenter} />
+        {/* Auto fit map bounds when selected route changes */}
+        <MapPanFocus bounds={routeData?.bounds || null} />
       </MapContainer>
 
       {/* Floating Info Card on Selected Route */}
@@ -183,21 +292,21 @@ export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
           <div className="flex items-center gap-2 mb-1.5">
             <span
               className="px-2.5 py-0.5 rounded-full text-xs font-bold text-white shadow-xs"
-              style={{ backgroundColor: selectedRoute.color }}
+              style={{ backgroundColor: selectedRoute.color || '#F97316' }}
             >
               {selectedRoute.number}
             </span>
             <span className="text-xs font-bold text-white">{selectedRoute.name}</span>
           </div>
           <div className="text-[11px] text-slate-300 space-y-1">
-            <p>
-              🏁 <strong>Start:</strong> {selectedRoute.from} ({selectedRoute.departureTime})
+            <p className="flex items-center gap-1.5">
+              <span className="text-emerald-400 font-bold">📍 Start:</span> {selectedRoute.from} ({selectedRoute.departureTime})
             </p>
-            <p>
-              🏫 <strong>Destination:</strong> RIT Campus ({selectedRoute.arrivalTime})
+            <p className="flex items-center gap-1.5">
+              <span className="text-orange-400 font-bold">🏫 Destination:</span> RIT Campus ({selectedRoute.arrivalTime})
             </p>
-            <p>
-              📍 <strong>Stops:</strong> {selectedRoute.stops.length} mapped stops
+            <p className="text-slate-400 text-[10px] pt-0.5">
+              📍 {selectedRoute.stops.length} mapped stops along route
             </p>
           </div>
         </div>

src/components/Navbar/Navbar.tsx

@@ -58,32 +58,32 @@ export default function Navbar() {
         initial={{ y: -100, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.6, ease: 'easeOut' }}
-        className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[95%] max-w-6xl transition-all duration-300 shadow-[0_8px_32px_rgba(0,0,0,0.25)]"
+        className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[96%] max-w-7xl transition-all duration-300 shadow-[0_8px_32px_rgba(0,0,0,0.3)]"
         style={{
-          background: 'linear-gradient(to right, rgba(15, 23, 42, 0.45) 0%, rgba(30, 41, 59, 0.35) 50%, rgba(15, 23, 42, 0.45) 100%)',
+          background: 'linear-gradient(to right, rgba(15, 23, 42, 0.75) 0%, rgba(30, 41, 59, 0.65) 50%, rgba(15, 23, 42, 0.75) 100%)',
           backdropFilter: 'blur(16px)',
           WebkitBackdropFilter: 'blur(16px)',
           borderRadius: '20px',
-          border: '1px solid rgba(255, 255, 255, 0.1)',
+          border: '1px solid rgba(255, 255, 255, 0.15)',
         }}
       >
-        <div className="flex items-center justify-between px-5 py-2.5">
+        <div className="flex items-center justify-between px-3.5 sm:px-5 py-2">
           {/* Logo - RIT Event Hub Style */}
-          <a href="/" className="flex items-center gap-2 group">
+          <a href="/" className="flex items-center gap-2 group shrink-0">
             {/* Logo Image */}
             <motion.img
               whileHover={{ scale: 1.05 }}
               src="/logo.png"
               alt="RIT Logo"
-              className="w-10 h-10 object-contain rounded-full shrink-0"
+              className="w-9 h-9 sm:w-10 sm:h-10 object-contain rounded-full shrink-0"
             />
             
             <div className="flex items-center">
-              <span className="font-extrabold text-white text-2xl tracking-tighter" style={{ fontFamily: 'Poppins, sans-serif' }}>
+              <span className="font-extrabold text-white text-xl sm:text-2xl tracking-tighter" style={{ fontFamily: 'Poppins, sans-serif' }}>
                 rit
               </span>
-              <div className="h-7 w-[1px] bg-white/20 mx-2" />
-              <div className="flex flex-col text-[8.5px] font-bold text-slate-200 leading-tight tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}>
+              <div className="h-6 sm:h-7 w-[1px] bg-white/20 mx-1.5 sm:mx-2" />
+              <div className="hidden sm:flex flex-col text-[8px] sm:text-[8.5px] font-bold text-slate-200 leading-tight tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}>
                 <span>RAJALAKSHMI</span>
                 <span>INSTITUTE OF</span>
                 <span>TECHNOLOGY</span>
@@ -92,14 +92,14 @@ export default function Navbar() {
           </a>
 
           {/* Desktop Nav */}
-          <div className="hidden md:flex items-center gap-1">
+          <div className="hidden lg:flex items-center gap-0.5 xl:gap-1">
             {NAV_LINKS.map((link) => {
               const isActive = checkIsActive(link.path);
               return (
                 <Link
                   key={link.path}
                   to={link.path}
-                  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"
+                  className="relative px-2 xl:px-2.5 py-1.5 rounded-lg text-[10px] xl:text-[11px] font-bold uppercase tracking-wider transition-all duration-200"
                   style={{
                     fontFamily: 'Poppins, sans-serif',
                     color: isActive ? '#FFFFFF' : '#CBD5E1',
@@ -120,7 +120,7 @@ export default function Navbar() {
           </div>
 
           {/* Right Side: Auth + Mobile Toggle */}
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 shrink-0">
             {/* Auth Section */}
             {isAuthenticated && user ? (
               <div className="relative" ref={profileRef}>
@@ -140,8 +140,8 @@ export default function Navbar() {
                       {user.name.charAt(0).toUpperCase()}
                     </div>
                   )}
-                  <div className="hidden lg:flex flex-col items-start">
-                    <span className="text-white text-[11px] font-semibold leading-tight max-w-[100px] truncate">
+                  <div className="hidden xl:flex flex-col items-start">
+                    <span className="text-white text-[11px] font-semibold leading-tight max-w-[90px] truncate">
                       {user.name.split(' ')[0]}
                     </span>
                     {isVerifiedStudent && (
@@ -150,7 +150,7 @@ export default function Navbar() {
                       </span>
                     )}
                   </div>
-                  <ChevronDown className="w-3 h-3 text-slate-400 hidden lg:block" />
+                  <ChevronDown className="w-3 h-3 text-slate-400 hidden xl:block" />
                 </button>
 
                 {/* Profile Dropdown */}
@@ -213,10 +213,10 @@ export default function Navbar() {
               </div>
             ) : (
               <motion.button
-                whileHover={{ scale: 1.03 }}
-                whileTap={{ scale: 0.97 }}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
                 onClick={loginWithGoogle}
-                className="hidden md:flex items-center gap-2 px-4 py-2 rounded-xl text-white text-[11px] font-semibold border border-white/15 hover:border-orange-500/40 hover:bg-white/5 transition-all cursor-pointer"
+                className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-white text-xs font-bold bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 shadow-md shadow-orange-500/25 border border-orange-400/40 transition-all cursor-pointer shrink-0"
                 style={{ fontFamily: 'Poppins, sans-serif' }}
               >
                 <LogIn className="w-3.5 h-3.5" />

src/constants/index.ts

@@ -4,7 +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: 'Toolkit', path: '/toolkit' },
   { label: 'Chatbot', path: '/ai-assistant' },
   { label: 'Campus Map', path: '/campus' },
   { label: 'Bus Routes', path: '/bus-routes' },
@@ -98,6 +98,24 @@ export const FEATURES: Feature[] = [
     color: '#06B6D4',
     bgColor: '#ECFEFF',
   },
+  {
+    id: 'collab',
+    icon: 'Code2',
+    title: 'Dev Collab',
+    description: 'Connect with peer developers, build campus projects, share repositories, and collaborate.',
+    path: '/collab',
+    color: '#6366F1',
+    bgColor: '#EEF2FF',
+  },
+  {
+    id: 'leetcode',
+    icon: 'Trophy',
+    title: 'LeetCode Leaderboard',
+    description: 'Track peer coding rankings, solve daily problems, and compete on the campus leaderboard.',
+    path: '/leetcode',
+    color: '#F59E0B',
+    bgColor: '#FEF3C7',
+  },
 ];
 
 // ─── Bus Routes ──────────────────────────────────────────────────────────────

src/pages/Campus/Campus.tsx

@@ -23,8 +23,9 @@ const BLUEPRINT_LEGEND = [
   { 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: 'h-block', label: 'H Block', color: '#C084FC', bg: 'bg-purple-50/80', text: 'text-purple-900', border: 'border-purple-200' },
   { 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: 'hostel', label: 'Hostel / Mess', color: '#F472B6', bg: 'bg-pink-50/80', text: 'text-pink-950', border: 'border-pink-200' },
   { id: 'lab', label: 'Lab / Academic', color: '#FDE047', bg: 'bg-yellow-50/80', text: 'text-yellow-950', border: 'border-yellow-200' },
   { id: 'amenity', label: 'Amenity', color: '#BEF264', bg: 'bg-lime-50/80', text: 'text-lime-950', border: 'border-lime-200' },
   { id: 'parking', label: 'Parking Area', color: '#94A3B8', bg: 'bg-slate-100/80', text: 'text-slate-900', border: 'border-slate-300' },
@@ -39,15 +40,15 @@ const LOCATION_SPOTS: LocationSpot[] = [
   { name: 'Girls Mess', x: 14.5, y: 31.0, category: 'Hostel / Mess', desc: 'Dedicated Dining Hall for Women', area: 'West Wing' },
   { name: 'MEC Lab', x: 14.0, y: 39.5, category: 'Lab / Academic', desc: 'Mechanical Engineering Laboratory', area: 'West Wing' },
   { name: 'EPL Lab', x: 13.0, y: 47.5, category: 'Lab / Academic', desc: 'Engineering Practices Laboratory', area: 'West Wing' },
-  { name: 'Nikola Tesla Block', x: 40.5, y: 36.5, category: 'B Block', desc: 'Main Electrical & Engineering Research Block', area: 'Central Block' },
+  { name: 'B Block (Nikola Tesla Block)', x: 40.5, y: 36.5, category: 'B Block', desc: 'Main Electrical & Engineering Research Block', area: 'Central Block' },
   { name: 'Astronaut Statue', x: 51.0, y: 23.0, category: 'Amenity', desc: 'Iconic Landmark Monument', area: 'Central Park' },
   { name: 'Campus Centre', x: 67.0, y: 23.0, category: 'Admin / Facility', desc: 'Student Activity & Administrative Center', area: 'North East' },
   { name: 'Hut', x: 70.0, y: 37.0, category: 'Amenity', desc: 'Student Discussion & Rest Area', area: 'Central East' },
-  { name: 'Homi Jehangir Bhabha Block', x: 87.0, y: 24.0, category: 'A Block', desc: 'Science & Physics Research Block', area: 'East Wing' },
-  { name: 'Boys Mess', x: 87.0, y: 17.5, category: 'Hostel / Mess', desc: 'Ground Floor Dining Hall for Men (Homi Bhabha Block)', area: 'East Wing' },
-  { name: 'Staff Mess', x: 87.0, y: 30.5, category: 'Amenity', desc: 'First Floor Dining Hall for Faculty & Staff (Homi Bhabha Block)', area: 'East Wing' },
+  { name: 'H Block (Homi Jehangir Bhabha Block)', x: 87.0, y: 24.0, category: 'H Block', desc: 'Science & Physics Research Block', area: 'East Wing' },
+  { name: 'Boys Mess', x: 87.0, y: 17.5, category: 'Hostel / Mess', desc: 'Ground Floor Dining Hall for Men (H Block)', area: 'East Wing' },
+  { name: 'Staff Mess', x: 87.0, y: 30.5, category: 'Amenity', desc: 'First Floor Dining Hall for Faculty & Staff (H Block)', area: 'East Wing' },
   { name: 'C Block', x: 87.0, y: 38.0, category: 'C Block', desc: 'Labs, Classrooms & Staff Rooms', area: 'East Wing' },
-  { name: 'Alan Turing Block', x: 77.0, y: 53.0, category: 'Lab / Academic', desc: 'Computer Science & AI Labs', area: 'East Wing' },
+  { name: 'A Block (Alan Turing Block)', x: 77.0, y: 53.0, category: 'A Block', desc: 'Computer Science & AI Labs', area: 'East Wing' },
   { name: 'Arcade', x: 35.0, y: 57.0, category: 'Amenity', desc: 'Student Hub & Stores', area: 'Central South' },
   { name: 'Green Building', x: 23.0, y: 71.0, category: 'Admin / Facility', desc: 'Eco-Friendly Academic Complex & Library', area: 'South West' },
   { name: 'Security Booth', x: 49.0, y: 77.0, category: 'Amenity', desc: 'Main Gate Security Checkpoint', area: 'South Entrance' },
@@ -59,9 +60,9 @@ const LOCATION_SPOTS: LocationSpot[] = [
 ];
 
 const CATEGORY_MAP_SPOTS: Record<string, string[]> = {
-  dept: ['Homi Jehangir Bhabha Block', 'Nikola Tesla Block', 'C Block', 'Steve Jobs Block', 'Alan Turing Block', 'Green Building'],
+  dept: ['A Block (Alan Turing Block)', 'B Block (Nikola Tesla Block)', 'C Block', 'H Block (Homi Jehangir Bhabha Block)', 'Steve Jobs Block', 'Green Building'],
   library: ['Green Building'],
-  labs: ['MEC Lab', 'EPL Lab', 'Steve Jobs Block', 'Alan Turing Block', 'Nikola Tesla Block', 'C Block'],
+  labs: ['MEC Lab', 'EPL Lab', 'A Block (Alan Turing Block)', 'B Block (Nikola Tesla Block)', 'C Block', 'H Block (Homi Jehangir Bhabha Block)', 'Steve Jobs Block'],
   hostel: ['Girls Hostel', 'Boys Mess'],
   canteen: ['Canteen', 'Girls Mess', 'Boys Mess', 'Staff Mess', 'Arcade'],
   auditorium: ['Steve Jobs Block', 'Campus Centre'],
@@ -119,6 +120,7 @@ export default function Campus() {
       if (activeLegend === 'a-block' && spot.category === 'A Block') highlightedSpotNames.add(spot.name);
       if (activeLegend === 'b-block' && spot.category === 'B Block') highlightedSpotNames.add(spot.name);
       if (activeLegend === 'c-block' && spot.category === 'C Block') highlightedSpotNames.add(spot.name);
+      if (activeLegend === 'h-block' && spot.category === 'H Block') highlightedSpotNames.add(spot.name);
       if (activeLegend === 'admin' && spot.category === 'Admin / Facility') highlightedSpotNames.add(spot.name);
       if (activeLegend === 'hostel' && spot.category === 'Hostel / Mess') highlightedSpotNames.add(spot.name);
       if (activeLegend === 'lab' && spot.category === 'Lab / Academic') highlightedSpotNames.add(spot.name);
@@ -133,6 +135,7 @@ export default function Campus() {
     if (activeLegend === 'a-block') return fac.category === 'A Block';
     if (activeLegend === 'b-block') return fac.category === 'B Block';
     if (activeLegend === 'c-block') return fac.category === 'C Block';
+    if (activeLegend === 'h-block') return fac.category === 'H Block';
     if (activeLegend === 'admin') return fac.category === 'Admin / Facility';
     if (activeLegend === 'hostel') return fac.category === 'Hostel / Mess';
     if (activeLegend === 'lab') return fac.category === 'Lab / Academic';