diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 5489cf1..bde9f0c 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -120,7 +120,7 @@ export default function AboutPage() {
             <h2 className="text-sm font-mono tracking-[0.4em] text-white/40 uppercase w-48 shrink-0 pt-6">
               Founding Student
             </h2>
-            <div className="flex items-center gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 w-full max-w-2xl cursor-pointer">
+            <div className="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 w-full max-w-2xl cursor-pointer">
               <div className="w-24 h-24 rounded-full overflow-hidden border border-white/20 shrink-0">
                 <img 
                   src="https://res.cloudinary.com/djtemmctt/image/upload/v1773943803/jayanth_dtqvzg.jpg" 
@@ -135,7 +135,7 @@ export default function AboutPage() {
                 <p className="text-white/50 text-sm md:text-base mt-2">
                   Founder & Lead
                 </p>
-                <div className="flex gap-5 mt-4">
+                <div className="flex justify-center sm:justify-start gap-5 mt-4">
                   <a href="https://jayanthramakrishnan.online" target="_blank" rel="noopener noreferrer" className="text-white/40 hover:text-white hover:scale-110 transition-all" aria-label="Personal Website">
                     <Globe size={20} />
                   </a>
@@ -158,7 +158,7 @@ export default function AboutPage() {
               Founding Faculty
             </h2>
             <div className="flex flex-col gap-4 w-full max-w-2xl">
-              <div className="flex items-center gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 cursor-pointer">
+              <div className="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 cursor-pointer">
                 <div className="w-20 h-20 rounded-full overflow-hidden border border-white/20 shrink-0">
                   <img 
                     src="https://res.cloudinary.com/djtemmctt/image/upload/v1774293381/tomy_rbpm0i.jpg" 
@@ -175,7 +175,7 @@ export default function AboutPage() {
                   </p>
                 </div>
               </div>
-              <div className="flex items-center gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 cursor-pointer">
+              <div className="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 cursor-pointer">
                 <div className="w-20 h-20 rounded-full overflow-hidden border border-white/20 shrink-0">
                   <img 
                     src="https://res.cloudinary.com/djtemmctt/image/upload/v1774293381/HOD_ztx99a.jpg" 
@@ -199,7 +199,7 @@ export default function AboutPage() {
             <h2 className="text-sm font-mono tracking-[0.4em] text-white/40 uppercase w-48 shrink-0 pt-6">
               Faculty Advisor
             </h2>
-            <div className="flex items-center gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 w-full max-w-2xl cursor-pointer">
+            <div className="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left gap-6 group p-4 -ml-4 md:p-6 md:-ml-6 rounded-2xl border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all duration-500 w-full max-w-2xl cursor-pointer">
               <div className="w-20 h-20 rounded-full overflow-hidden border border-white/20 shrink-0">
                 <img 
                   src="https://res.cloudinary.com/djtemmctt/image/upload/v1774293381/Priyanka_qcbe5c.jpg" 
@@ -248,7 +248,7 @@ export default function AboutPage() {
                 desc: "From publishing papers to building MVPs — we incubate ideas that can evolve into startups, research publications, or community-focused solutions."
               }
             ].map((feature, i) => (
-              <div key={i} className="why-card group relative p-10 bg-white/[0.02] border border-white/10 hover:bg-white/[0.04] transition-colors duration-500">
+              <div key={i} className="why-card group relative p-6 md:p-10 bg-white/[0.02] border border-white/10 hover:bg-white/[0.04] transition-colors duration-500">
                 <div className="text-[10px] font-mono tracking-widest text-white/30 mb-6">0{i + 1} // CAPABILITY</div>
                 <h3 className="text-2xl font-bold uppercase tracking-tight mb-4 group-hover:text-white transition-colors">{feature.title}</h3>
                 <p className="text-white/50 leading-relaxed text-sm">{feature.desc}</p>
@@ -260,36 +260,36 @@ export default function AboutPage() {
 
         {/* AN OPTIMISTIC APPROACH */}
         <section className="max-w-5xl mx-auto px-6 py-32 border-t border-white/10">
-          <div className="reveal-block border-l-2 border-white/20 pl-8 md:pl-16 py-4">
+          <div className="reveal-block border-l-2 border-white/20 pl-6 md:pl-16 py-4">
             <h2 className="text-sm font-mono tracking-[0.4em] text-white/40 uppercase mb-12">
               An Optimistic Approach
             </h2>
             
             <div className="space-y-16">
               <div>
-                <h3 className="text-3xl font-black uppercase tracking-tight mb-6">Quantum Horizons</h3>
-                <p className="text-white/60 text-lg leading-relaxed max-w-2xl">
+                <h3 className="text-2xl md:text-3xl font-black uppercase tracking-tight mb-4 md:mb-6">Quantum Horizons</h3>
+                <p className="text-white/60 text-base md:text-lg leading-relaxed max-w-2xl">
                   Quantum computing is reshaping cybersecurity, AI, and complex problem-solving. We provide tools for students to explore quantum algorithms and real-world applications.
                 </p>
               </div>
 
               <div>
-                <h3 className="text-3xl font-black uppercase tracking-tight mb-6">Decentralized Trust</h3>
-                <p className="text-white/60 text-lg leading-relaxed max-w-2xl">
+                <h3 className="text-2xl md:text-3xl font-black uppercase tracking-tight mb-4 md:mb-6">Decentralized Trust</h3>
+                <p className="text-white/60 text-base md:text-lg leading-relaxed max-w-2xl">
                   Web3 and blockchain technologies are redefining data ownership, transparency, and digital trust. We build decentralized applications that empower users and secure the internet of tomorrow.
                 </p>
               </div>
 
               <div>
-                <h3 className="text-3xl font-black uppercase tracking-tight mb-6">Immersive Realities</h3>
-                <p className="text-white/60 text-lg leading-relaxed max-w-2xl">
+                <h3 className="text-2xl md:text-3xl font-black uppercase tracking-tight mb-4 md:mb-6">Immersive Realities</h3>
+                <p className="text-white/60 text-base md:text-lg leading-relaxed max-w-2xl">
                   By bridging the physical and digital worlds through Mixed Reality (XR), we are creating intuitive, spatial experiences that transform how we learn, interact, and solve problems.
                 </p>
               </div>
 
               <div>
-                <h3 className="text-3xl font-black uppercase tracking-tight mb-6">Inclusive Progress</h3>
-                <p className="text-white/60 text-lg leading-relaxed max-w-2xl">
+                <h3 className="text-2xl md:text-3xl font-black uppercase tracking-tight mb-4 md:mb-6">Inclusive Progress</h3>
+                <p className="text-white/60 text-base md:text-lg leading-relaxed max-w-2xl">
                   With low-code and no-code platforms, we enable students from all backgrounds to develop solutions without deep programming expertise. Empowering non-tech innovators is key to our mission.
                 </p>
               </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index c2ccc1a..1bd0296 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -49,4 +49,11 @@ body {
 
 .lab-logo{
   transform: translateZ(40px);
+}
+
+/* Prevent horizontal overflow on mobile */
+@media (max-width: 767px) {
+  body {
+    overflow-x: hidden;
+  }
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9876b70..eabe130 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -182,9 +182,9 @@ export default function Hub() {
           </div>
 
           {/* HERO SECTION */}
-          <section className="relative min-h-[140vh] pt-60 flex flex-col items-center overflow-hidden">
+          <section className="relative min-h-[140vh] pt-40 md:pt-60 flex flex-col items-center overflow-hidden">
             <div className="hero-heading-container relative z-10 mix-blend-difference pointer-events-none">
-              <h1 className="text-[6.5vw] font-black tracking-tighter uppercase leading-none text-center hero-heading">
+              <h1 className="text-4xl md:text-[6.5vw] font-black tracking-tighter uppercase leading-none text-center hero-heading">
                 <span className="relative inline-block">
                   Singularity
                   <svg className="absolute top-[58%] left-[-6%] w-[112%] translate-y-[-50%] rotate-[2deg]" viewBox="0 0 842.14 500">
@@ -192,11 +192,11 @@ export default function Hub() {
                   </svg>
                 </span>
                 <br />
-                <span className="text-[1vw] tracking-[0.5em] opacity-50 block mt-4 uppercase">{"<Student_Research_Lab/>"}</span>
+                <span className="text-[10px] md:text-[1vw] tracking-[0.5em] opacity-50 block mt-4 uppercase">{"<Student_Research_Lab/>"}</span>
               </h1>
             </div>
 
-            <div className="parallax-grid grid grid-cols-4 gap-8 w-full px-12 absolute top-1/2 -translate-y-1/2 z-0" >
+            <div className="parallax-grid grid grid-cols-4 gap-3 md:gap-8 w-full px-4 md:px-12 absolute top-1/2 -translate-y-1/2 z-0" >
                {[
                  "first_jqmtz8.jpg",
                  "WhatsApp_Image_2026-02-15_at_2.46.25_AM_ttclec.jpg",
@@ -207,7 +207,7 @@ export default function Hub() {
                    key={idx}
                    onLoad={handleMediaLoad} 
                    data-speed={`clamp(${2.4 - (idx * 0.3)})`}
-                   className="h-[70vh] object-cover mt-80 transform-gpu" 
+                   className="h-[30vh] md:h-[70vh] object-cover mt-0 md:mt-80 transform-gpu" 
                    src={`${CLOUDINARY_BASE}v1771104005/${img}`} 
                    alt="" 
                  />
@@ -217,9 +217,9 @@ export default function Hub() {
             <div className="header__marq marquee-section absolute bottom-0 left-0 w-full bg-[#111111] border-y border-white/10 z-20">
               <div className="marquee-track flex w-fit whitespace-nowrap py-3">
                 {[...Array(12)].map((_, i) => (
-                  <span key={i} className="flex items-center text-[#9e9e9e] text-xl md:text-[25px] font-black uppercase pr-[55px] mr-[15px]">
+                  <span key={i} className="flex items-center text-[#9e9e9e] text-sm md:text-[25px] font-black uppercase pr-6 md:pr-[55px] mr-2 md:mr-[15px]">
                     singularity student lab
-                    <img src={singularityLogo} className="marquee-logo ml-8 w-10 h-10 object-contain opacity-80" alt="" />
+                    <img src={singularityLogo} className="marquee-logo ml-4 md:ml-8 w-6 h-6 md:w-10 md:h-10 object-contain opacity-80" alt="" />
                   </span>
                 ))}
               </div>
@@ -227,12 +227,12 @@ export default function Hub() {
           </section>
 
           {/* CARDS SECTION */}
-          <div className="cards-container relative w-full max-w-4xl mx-auto px-6 pt-[10vh] pb-[20vh] z-20">
+          <div className="cards-container relative w-full max-w-4xl mx-auto px-4 md:px-6 pt-[6vh] md:pt-[10vh] pb-[10vh] md:pb-[20vh] z-20">
             {labs.map((lab, i) => (
-              <div key={lab.id} className="card-wrapper w-full mb-[80vh] last:mb-0">
+              <div key={lab.id} className="card-wrapper w-full mb-[50vh] md:mb-[80vh] last:mb-0">
                 <div
                 id={`lab-card-${lab.id}`}
-                  className="card-interactive relative w-full h-[550px] overflow-hidden border border-white/10 bg-black/80 group transition-all duration-700 hover:border-white/30 shadow-2xl transform-gpu"
+                  className="card-interactive relative w-full h-[400px] md:h-[550px] overflow-hidden border border-white/10 bg-black/80 group transition-all duration-700 hover:border-white/30 shadow-2xl transform-gpu"
                   onMouseMove={(e) => {
                     const rect = e.currentTarget.getBoundingClientRect()
                     const x = (e.clientX - rect.left) / rect.width
@@ -273,14 +273,14 @@ export default function Hub() {
                     <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent pointer-events-none" />
                   </div>
 
-                  <div className="relative z-10 h-full p-16 flex flex-col justify-between">
+                  <div className="relative z-10 h-full p-6 md:p-16 flex flex-col justify-between">
                     <div className="flex justify-between items-start">
                       <span className="text-xs font-mono text-white/40 uppercase tracking-[0.4em] block">Archive // 0{i+1}</span>
                       <img src={singularityLogo} alt="" className="lab-logo w-8 h-8 opacity-20 transition-all duration-500 group-hover:opacity-80 group-hover:translate-z-10" />
                     </div>
                     <div>
-                      <h2 className="text-6xl font-black uppercase tracking-tighter leading-none mb-6">{lab.name}</h2>
-                      <p className="text-sm font-mono text-white/60 uppercase leading-relaxed max-w-md">{lab.focus}</p>
+                      <h2 className="text-3xl md:text-6xl font-black uppercase tracking-tighter leading-none mb-3 md:mb-6">{lab.name}</h2>
+                      <p className="text-xs md:text-sm font-mono text-white/60 uppercase leading-relaxed max-w-md">{lab.focus}</p>
                     </div>
                     <div 
                       onClick={() => {
@@ -326,7 +326,7 @@ export default function Hub() {
                         }
                         tl.to(curtain, { opacity: 1, duration: 0.5, ease: "power2.inOut" }, "-=0.2")
                       }}
-                      className="text-[10px] font-bold border-t border-white/10 pt-8 text-white/20 tracking-[0.3em] flex justify-between items-center group-hover:text-white transition-colors cursor-pointer"
+                      className="text-[10px] font-bold border-t border-white/10 pt-4 md:pt-8 text-white/20 tracking-[0.3em] flex justify-between items-center group-hover:text-white transition-colors cursor-pointer"
                     >
                       <span>VIEW_LIVE_FEED</span>
                       <span className="text-lg">→</span>
@@ -338,8 +338,8 @@ export default function Hub() {
           </div>
 
           {/* PING US SECTION (Homepage Only CTA) */}
-          <section id="contact" className="relative min-h-[70vh] flex flex-col items-center justify-center z-30 px-6 py-10 bg-black">
-            <h2 className="text-[5vw] font-black uppercase tracking-tighter mb-16 leading-none">Ping Us</h2>
+          <section id="contact" className="relative min-h-[50vh] md:min-h-[70vh] flex flex-col items-center justify-center z-30 px-4 md:px-6 py-10 bg-black">
+            <h2 className="text-3xl md:text-[5vw] font-black uppercase tracking-tighter mb-8 md:mb-16 leading-none">Ping Us</h2>
             <div className="w-full max-w-5xl">
               <ClipPathLinks />
             </div>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index ef90851..1e0ad50 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -2,7 +2,7 @@
 
 import { useState, useRef, useEffect } from 'react';
 import Link from 'next/link';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, Menu, X } from 'lucide-react';
 import { labs } from '../data/labs'; 
 
 const singularityLogo = "https://res.cloudinary.com/djtemmctt/image/upload/v1771104005/singularity_new_logo_knedxr.png";
@@ -10,6 +10,7 @@ const singularityLogo = "https://res.cloudinary.com/djtemmctt/image/upload/v1771
 export default function Navbar() {
   const [labsDropdownOpen, setLabsDropdownOpen] = useState(false);
   const [eventsDropdownOpen, setEventsDropdownOpen] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const labsDropdownRef = useRef(null);
   const eventsDropdownRef = useRef(null);
 
@@ -22,7 +23,6 @@ export default function Navbar() {
   ];
 
   useEffect(() => {
-    // Removed the ': MouseEvent' and 'as Node' types
     const handleOutsideClick = (e) => {
       if (labsDropdownRef.current && !labsDropdownRef.current.contains(e.target)) {
         setLabsDropdownOpen(false);
@@ -38,79 +38,158 @@ export default function Navbar() {
     }
   }, [labsDropdownOpen, eventsDropdownOpen]);
 
+  // Prevent background scrolling when mobile menu is open
+  useEffect(() => {
+    if (mobileMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [mobileMenuOpen]);
+
   return (
-    <nav className="fixed top-0 left-0 w-full z-[100] px-10 py-6 flex justify-between items-center mix-blend-difference text-white">
-      
-      <Link href="/">
-        <div className="flex items-center gap-4 cursor-pointer hover:opacity-80 transition-opacity">
-          <img src={singularityLogo} alt="Logo" className="w-10 h-10 object-contain" />
-          <div className="font-black text-xl tracking-tighter uppercase leading-none">
-            Singularity Student Lab
+    <>
+      <nav className="fixed top-0 left-0 w-full z-[100] px-4 md:px-10 py-4 md:py-6 flex justify-between items-center mix-blend-difference text-white">
+        
+        <Link href="/">
+          <div className="flex items-center gap-2 md:gap-4 cursor-pointer hover:opacity-80 transition-opacity">
+            <img src={singularityLogo} alt="Logo" className="w-8 h-8 md:w-10 md:h-10 object-contain" />
+            <div className="font-black text-xs sm:text-sm md:text-xl tracking-tighter uppercase leading-none">
+              Singularity Student Lab
+            </div>
           </div>
-        </div>
-      </Link>
-      
-      <div className="flex gap-10 font-mono text-[11px] tracking-[0.3em] opacity-60 uppercase">
-        <Link href="/about" className="hover:opacity-100 transition-opacity cursor-pointer">
-          About Us
         </Link>
         
-        <div ref={labsDropdownRef} className="relative">
-          <button 
-            onClick={() => setLabsDropdownOpen(!labsDropdownOpen)}
-            className="hover:opacity-100 transition-opacity cursor-pointer flex items-center gap-2"
+        {/* Desktop Menu */}
+        <div className="hidden md:flex gap-10 font-mono text-[11px] tracking-[0.3em] opacity-60 uppercase">
+          <Link href="/about" className="hover:opacity-100 transition-opacity cursor-pointer">
+            About Us
+          </Link>
+          
+          <div ref={labsDropdownRef} className="relative">
+            <button 
+              onClick={() => setLabsDropdownOpen(!labsDropdownOpen)}
+              className="hover:opacity-100 transition-opacity cursor-pointer flex items-center gap-2"
+            >
+              LABS
+              <ChevronDown size={12} className={`transition-transform duration-200 ${labsDropdownOpen ? 'rotate-180' : ''}`} />
+            </button>
+            
+            {labsDropdownOpen && (
+              <div className="absolute top-full mt-2 left-0 bg-black/95 border border-white/20 rounded-lg shadow-lg py-2 min-w-50 backdrop-blur-sm z-50">
+                {labs.map((lab) => (
+                  <Link
+                    key={lab.id}
+                    href={`/labs/${lab.id}`}
+                    onClick={() => setLabsDropdownOpen(false)}
+                    className="block w-full text-left px-4 py-2 hover:bg-white/10 transition-colors text-white/80 hover:text-white text-xs whitespace-nowrap"
+                  >
+                    {lab.name}
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div ref={eventsDropdownRef} className="relative">
+            <button 
+              onClick={() => setEventsDropdownOpen(!eventsDropdownOpen)}
+              className="hover:opacity-100 transition-opacity cursor-pointer flex items-center gap-2"
+            >
+              EVENTS
+              <ChevronDown size={12} className={`transition-transform duration-200 ${eventsDropdownOpen ? 'rotate-180' : ''}`} />
+            </button>
+            
+            {eventsDropdownOpen && (
+              <div className="absolute top-full mt-2 left-0 bg-black/95 border border-white/20 rounded-lg shadow-lg py-2 min-w-55 backdrop-blur-sm z-50">
+                {events.map((event) => (
+                  <a
+                    key={event.id}
+                    href={event.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={() => setEventsDropdownOpen(false)}
+                    className="block px-4 py-2 hover:bg-white/10 transition-colors text-white/80 hover:text-white text-xs whitespace-nowrap"
+                  >
+                    {event.name}
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <Link href="/#contact" className="hover:opacity-100 transition-opacity cursor-pointer">
+            Contact
+          </Link>
+        </div>
+
+        {/* Mobile Toggle Button */}
+        <button 
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          className="md:hidden p-2 text-white hover:opacity-80 transition-opacity z-[110]"
+          aria-label="Toggle Menu"
+        >
+          {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
+        </button>
+      </nav>
+
+      {/* Mobile Menu Drawer Overlay */}
+      {mobileMenuOpen && (
+        <div className="fixed inset-0 w-full h-screen bg-black/95 backdrop-blur-md z-[99] flex flex-col justify-start overflow-y-auto px-6 pt-24 pb-10 gap-6 text-white font-mono">
+          <Link 
+            href="/about" 
+            onClick={() => setMobileMenuOpen(false)}
+            className="text-base tracking-[0.2em] text-white/80 hover:text-white uppercase transition-colors"
           >
-            LABS
-            <ChevronDown size={12} className={`transition-transform duration-200 ${labsDropdownOpen ? 'rotate-180' : ''}`} />
-          </button>
+            About Us
+          </Link>
           
-          {labsDropdownOpen && (
-            <div className="absolute top-full mt-2 left-0 bg-black/95 border border-white/20 rounded-lg shadow-lg py-2 min-w-50 backdrop-blur-sm z-50">
+          <div className="flex flex-col gap-2">
+            <span className="text-xs tracking-[0.3em] text-white/30 uppercase">Labs</span>
+            <div className="flex flex-col gap-3 pl-4 border-l border-white/10 mt-1">
               {labs.map((lab) => (
                 <Link
                   key={lab.id}
                   href={`/labs/${lab.id}`}
-                  onClick={() => setLabsDropdownOpen(false)}
-                  className="block w-full text-left px-4 py-2 hover:bg-white/10 transition-colors text-white/80 hover:text-white text-xs whitespace-nowrap"
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="text-xs tracking-wider text-white/60 hover:text-white transition-colors"
                 >
                   {lab.name}
                 </Link>
               ))}
             </div>
-          )}
-        </div>
+          </div>
 
-        <div ref={eventsDropdownRef} className="relative">
-          <button 
-            onClick={() => setEventsDropdownOpen(!eventsDropdownOpen)}
-            className="hover:opacity-100 transition-opacity cursor-pointer flex items-center gap-2"
-          >
-            EVENTS
-            <ChevronDown size={12} className={`transition-transform duration-200 ${eventsDropdownOpen ? 'rotate-180' : ''}`} />
-          </button>
-          
-          {eventsDropdownOpen && (
-            <div className="absolute top-full mt-2 left-0 bg-black/95 border border-white/20 rounded-lg shadow-lg py-2 min-w-55 backdrop-blur-sm z-50">
+          <div className="flex flex-col gap-2">
+            <span className="text-xs tracking-[0.3em] text-white/30 uppercase">Events</span>
+            <div className="flex flex-col gap-3 pl-4 border-l border-white/10 mt-1">
               {events.map((event) => (
                 <a
                   key={event.id}
                   href={event.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  onClick={() => setEventsDropdownOpen(false)}
-                  className="block px-4 py-2 hover:bg-white/10 transition-colors text-white/80 hover:text-white text-xs whitespace-nowrap"
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="text-xs tracking-wider text-white/60 hover:text-white transition-colors"
                 >
                   {event.name}
                 </a>
               ))}
             </div>
-          )}
-        </div>
+          </div>
 
-        <Link href="/#contact" className="hover:opacity-100 transition-opacity cursor-pointer">
-          Contact
-        </Link>
-      </div>
-    </nav>
+          <Link 
+            href="/#contact" 
+            onClick={() => setMobileMenuOpen(false)}
+            className="text-base tracking-[0.2em] text-white/80 hover:text-white uppercase transition-colors"
+          >
+            Contact
+          </Link>
+        </div>
+      )}
+    </>
   );
 }
\ No newline at end of file
diff --git a/src/components/lab/LabHero.tsx b/src/components/lab/LabHero.tsx
index c5c697c..5365789 100644
--- a/src/components/lab/LabHero.tsx
+++ b/src/components/lab/LabHero.tsx
@@ -108,7 +108,7 @@ export default function LabHero({ name, focus, description, video, color }: Prop
   return (
     <section
       ref={sectionRef}
-      className="relative h-[85vh] flex items-center justify-center text-center overflow-hidden bg-black"
+      className="relative h-[70vh] md:h-[85vh] flex items-center justify-center text-center overflow-hidden bg-black"
     >
       {/* VIDEO */}
       <video
@@ -146,7 +146,7 @@ export default function LabHero({ name, focus, description, video, color }: Prop
       />
 
       {/* CONTENT */}
-      <div ref={contentRef} className="relative z-30 max-w-4xl px-6">
+      <div ref={contentRef} className="relative z-30 max-w-4xl px-4 md:px-6">
         <p className="text-[11px] font-mono tracking-[0.4em] text-white/40 uppercase mb-6 text-center">
           {focus}
         </p>
diff --git a/tsconfig.json b/tsconfig.json
index 3a13f90..3869b92 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,7 +20,8 @@
     ],
     "paths": {
       "@/*": ["./*"]
-    }
+    },
+    "forceConsistentCasingInFileNames": false
   },
   "include": [
     "next-env.d.ts",