diff --git a/App.css b/App.css
index fd60ac5..59fc4ac 100644
--- a/App.css
+++ b/App.css
@@ -66,7 +66,7 @@
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }
 
 .mission-card-back {
@@ -78,17 +78,17 @@
   .mission-card {
     height: 200px;
   }
-  
+
   .mission-card-inner {
     transform: none !important;
   }
-  
+
   .mission-card-front,
   .mission-card-back {
     position: relative;
     backface-visibility: visible;
   }
-  
+
   .mission-card-back {
     transform: none;
     margin-top: -1rem;
diff --git a/public/images/collaborations/annam-logo.png b/public/images/collaborations/annam-logo.png
new file mode 100644
index 0000000..401b90f
Binary files /dev/null and b/public/images/collaborations/annam-logo.png differ
diff --git a/src/App.tsx b/src/App.tsx
index e34c7e7..ad093c3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,36 +1,42 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Home from './app/home';
-import Team from './app/team';
-import Research from './app/research';
-import Careers from './app/careers';
-import Contact from './app/contact';
-import Partners from './app/partners';
-import Events from './app/events';
-import About from './app/about';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Home from "./app/home";
+import Team from "./app/team";
+import Research from "./app/research";
+import Careers from "./app/careers";
+import Contact from "./app/contact";
+import Partners from "./app/partners";
+import Events from "./app/events";
+import About from "./app/about";
 // import { Blog } from './app/blog';
-import ScrollToTop from './components/ScrollToTop';
-import HashScroller from './components/HashScroller';
-import './index.css';
-import ComingSoon from './app/comingsoon';
-import Collaborations from './app/collaborations';
+import ScrollToTop from "./components/ScrollToTop";
+import HashScroller from "./components/HashScroller";
+import "./index.css";
+import ComingSoon from "./app/comingsoon";
+import Collaborations from "./app/collaborations";
+import { Navbar } from "./components/navbar";
+import { FooterWrapper } from "./components/FooterFile";
 
 function App() {
   return (
     <Router>
       <ScrollToTop />
       <HashScroller />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/about" element={<About />} />
-        <Route path="/team" element={<Team />} />
-        <Route path="/research" element={<Research />} />
-        <Route path="/careers" element={<Careers />} />
-        <Route path="/contact" element={<Contact />} />
-        <Route path="/partners" element={<Partners />} />
-        <Route path="/events" element={<Events />} />
-        <Route path="/comingsoon" element={<ComingSoon />} />
-        <Route path="/collaborations" element={<Collaborations />} />
-      </Routes>
+      <Navbar />
+      <div style={{ paddingTop: "110px" }}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/team" element={<Team />} />
+          <Route path="/research" element={<Research />} />
+          <Route path="/careers" element={<Careers />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="/partners" element={<Partners />} />
+          <Route path="/events" element={<Events />} />
+          <Route path="/comingsoon" element={<ComingSoon />} />
+          <Route path="/collaborations" element={<Collaborations />} />
+        </Routes>
+      </div>
+      <FooterWrapper />
     </Router>
   );
 }
diff --git a/src/app/about.tsx b/src/app/about.tsx
index 061a7bd..2366c48 100644
--- a/src/app/about.tsx
+++ b/src/app/about.tsx
@@ -1,18 +1,16 @@
-import { useState } from 'react';
+import { useState } from "react";
 
-import drSudarshan from '/images/dr-sudarshan2.png';
-import meenakshi from '/images/meenakshi4.png';
-import aditya from '/images/aditya.jpeg';
-import shivani from '/images/shivani-aggarwal4.png';
-import { Navbar } from "../components/navbar";
-import '../styles/aboutDled.css';
+import drSudarshan from "/images/dr-sudarshan2.png";
+import meenakshi from "/images/meenakshi4.png";
+import aditya from "/images/aditya.jpeg";
+import shivani from "/images/shivani-aggarwal4.png";
+import "../styles/aboutDled.css";
 
 const About = () => {
-  const [activeTab, setActiveTab] = useState('vision');
+  const [activeTab, setActiveTab] = useState("vision");
 
   return (
     <div className="about-page">
-      <Navbar /> 
       {/* Hero Section */}
       <section className="hero-section position-relative overflow-hidden">
         <div className="container py-6 mt-5">
@@ -22,11 +20,19 @@ const About = () => {
                 Redefining Education Through Innovation
               </h1>
               <p className="lead text-secondary mb-4">
-                The Dhananjaya Lab for Education Design (DLED) at IIT Ropar is pioneering 
-                transformative approaches to learning in the digital age.
+                The Dhananjaya Lab for Education Design (DLED) at IIT Ropar is
+                pioneering transformative approaches to learning in the digital
+                age.
               </p>
               <div className="d-flex gap-3">
-                <a href="#team" className="btn btn-lg px-4 text-light dark-button" style= {{ backgroundColor: 'rgb(233, 103, 52)', borderColor: 'rgb(233, 103, 52)' }}>
+                <a
+                  href="#team"
+                  className="btn btn-lg px-4 text-light dark-button"
+                  style={{
+                    backgroundColor: "rgb(233, 103, 52)",
+                    borderColor: "rgb(233, 103, 52)",
+                  }}
+                >
                   Meet the Team
                 </a>
               </div>
@@ -36,9 +42,9 @@ const About = () => {
                 <div className="floating-shape shape-1 bg-warning rounded-circle"></div>
                 <div className="floating-shape shape-2 bg-info rounded-circle"></div>
                 <div className="floating-shape shape-3 bg-danger rounded-circle"></div>
-                <img 
-                  src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" 
-                  alt="DLED Team" 
+                <img
+                  src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
+                  alt="DLED Team"
                   className="img-fluid rounded-4 shadow-lg position-relative"
                 />
               </div>
@@ -54,22 +60,29 @@ const About = () => {
             <div className="col-lg-10 text-center mb-5">
               <h2 className="display-5 fw-bold mb-3">Our Story</h2>
               <p className="lead text-muted">
-                From humble beginnings to becoming a hub of educational innovation
+                From humble beginnings to becoming a hub of educational
+                innovation
               </p>
             </div>
           </div>
-          
+
           <div className="timeline">
             <div className="timeline-item left">
               <div className="timeline-content shadow-sm">
                 <h3>2023</h3>
-                <p>A small research initiative started to revolutionise Education Design</p>
+                <p>
+                  A small research initiative started to revolutionise Education
+                  Design
+                </p>
               </div>
             </div>
             <div className="timeline-item right">
               <div className="timeline-content shadow-sm">
                 <h3>2024</h3>
-                <p>First major funding to spearhead with the project and setup of the lab</p>
+                <p>
+                  First major funding to spearhead with the project and setup of
+                  the lab
+                </p>
               </div>
             </div>
             <div className="timeline-item left">
@@ -77,7 +90,7 @@ const About = () => {
                 <h3>2025</h3>
                 <p>Launched our first online learning platform prototype</p>
               </div>
-              </div>
+            </div>
           </div>
         </div>
       </section>
@@ -89,34 +102,43 @@ const About = () => {
             <div className="col-lg-10">
               <div className="mission-tabs">
                 <div className="tabs-header d-flex justify-content-center mt-3 mb-2">
-                  <button 
-                    className={`tab-btn ${activeTab === 'vision' ? 'active' : ''}`}
-                    onClick={() => setActiveTab('vision')}
+                  <button
+                    className={`tab-btn ${
+                      activeTab === "vision" ? "active" : ""
+                    }`}
+                    onClick={() => setActiveTab("vision")}
                   >
                     <i className="fas fa-eye me-2"></i> Our Vision
                   </button>
-                  <button 
-                    className={`tab-btn ${activeTab === 'mission' ? 'active' : ''}`}
-                    onClick={() => setActiveTab('mission')}
+                  <button
+                    className={`tab-btn ${
+                      activeTab === "mission" ? "active" : ""
+                    }`}
+                    onClick={() => setActiveTab("mission")}
                   >
                     <i className="fas fa-bullseye me-2"></i> Our Mission
                   </button>
-                  <button 
-                    className={`tab-btn ${activeTab === 'values' ? 'active' : ''}`}
-                    onClick={() => setActiveTab('values')}
+                  <button
+                    className={`tab-btn ${
+                      activeTab === "values" ? "active" : ""
+                    }`}
+                    onClick={() => setActiveTab("values")}
                   >
                     <i className="fas fa-heart me-2"></i> Core Values
                   </button>
                 </div>
-                
+
                 <div className="tab-content p-5 rounded-4 shadow-sm">
-                  {activeTab === 'vision' && (
+                  {activeTab === "vision" && (
                     <div className="vision-content">
-                      <h3 className="fw-bold mb-4">Shaping the Future of Learning</h3>
+                      <h3 className="fw-bold mb-4">
+                        Shaping the Future of Learning
+                      </h3>
                       <p className="lead">
-                        We envision a world where education adapts to each learner's needs, 
-                        leveraging technology to create personalized, accessible, and 
-                        transformative learning experiences.
+                        We envision a world where education adapts to each
+                        learner's needs, leveraging technology to create
+                        personalized, accessible, and transformative learning
+                        experiences.
                       </p>
                       <div className="row mt-4">
                         <div className="col-md-6">
@@ -127,7 +149,8 @@ const About = () => {
                             <div>
                               <h5 className="fw-bold">Innovation</h5>
                               <p className="text-muted">
-                                Pioneering new approaches to teaching and learning
+                                Pioneering new approaches to teaching and
+                                learning
                               </p>
                             </div>
                           </div>
@@ -140,7 +163,8 @@ const About = () => {
                             <div>
                               <h5 className="fw-bold">Global Impact</h5>
                               <p className="text-muted">
-                                Creating solutions that scale across diverse contexts
+                                Creating solutions that scale across diverse
+                                contexts
                               </p>
                             </div>
                           </div>
@@ -148,19 +172,23 @@ const About = () => {
                       </div>
                     </div>
                   )}
-                  
-                  {activeTab === 'mission' && (
+
+                  {activeTab === "mission" && (
                     <div className="mission-content">
-                      <h3 className="fw-bold mb-4">Transforming Education Through Design</h3>
+                      <h3 className="fw-bold mb-4">
+                        Transforming Education Through Design
+                      </h3>
                       <p className="lead">
-                        Our mission is to research, design, and implement educational 
-                        innovations that make learning more effective, engaging, and 
-                        accessible for all.
+                        Our mission is to research, design, and implement
+                        educational innovations that make learning more
+                        effective, engaging, and accessible for all.
                       </p>
                       <ul className="list-unstyled row mt-4">
                         <li className="col-md-6 mb-3 d-flex">
                           <i className="fas fa-check-circle text-success mt-1 me-3"></i>
-                          <span>Develop evidence-based learning frameworks</span>
+                          <span>
+                            Develop evidence-based learning frameworks
+                          </span>
                         </li>
                         <li className="col-md-6 mb-3 d-flex">
                           <i className="fas fa-check-circle text-success mt-1 me-3"></i>
@@ -168,7 +196,9 @@ const About = () => {
                         </li>
                         <li className="col-md-6 mb-3 d-flex">
                           <i className="fas fa-check-circle text-success mt-1 me-3"></i>
-                          <span>Train the next generation of education designers</span>
+                          <span>
+                            Train the next generation of education designers
+                          </span>
                         </li>
                         <li className="col-md-6 mb-3 d-flex">
                           <i className="fas fa-check-circle text-success mt-1 me-3"></i>
@@ -177,22 +207,48 @@ const About = () => {
                       </ul>
                     </div>
                   )}
-                  
-                  {activeTab === 'values' && (
+
+                  {activeTab === "values" && (
                     <div className="values-content">
                       <h3 className="fw-bold mb-4">What Guides Our Work</h3>
                       <div className="row g-4">
                         {[
-                          { icon: 'users', title: 'Collaboration', desc: 'We believe in the power of diverse perspectives' },
-                          { icon: 'lightbulb', title: 'Creativity', desc: 'Innovative solutions require thinking differently' },
-                          { icon: 'shield-alt', title: 'Integrity', desc: 'Ethical research and transparent practices' },
-                          { icon: 'graduation-cap', title: 'Excellence', desc: 'Striving for the highest standards in all we do' },
-                          { icon: 'heart', title: 'Empathy', desc: 'Designing with learners at the center' },
-                          { icon: 'balance-scale', title: 'Equity', desc: 'Creating accessible solutions for all' }
+                          {
+                            icon: "users",
+                            title: "Collaboration",
+                            desc: "We believe in the power of diverse perspectives",
+                          },
+                          {
+                            icon: "lightbulb",
+                            title: "Creativity",
+                            desc: "Innovative solutions require thinking differently",
+                          },
+                          {
+                            icon: "shield-alt",
+                            title: "Integrity",
+                            desc: "Ethical research and transparent practices",
+                          },
+                          {
+                            icon: "graduation-cap",
+                            title: "Excellence",
+                            desc: "Striving for the highest standards in all we do",
+                          },
+                          {
+                            icon: "heart",
+                            title: "Empathy",
+                            desc: "Designing with learners at the center",
+                          },
+                          {
+                            icon: "balance-scale",
+                            title: "Equity",
+                            desc: "Creating accessible solutions for all",
+                          },
                         ].map((value, index) => (
                           <div key={index} className="col-md-4">
                             <div className="value-card p-3 h-100 rounded-3">
-                              <i className={`fas fa-${value.icon} text-warning fs-3 mb-3`}></i>
+                              <i
+                                className={`fas fa-${value.icon} text-warning fs-3 mb-3`}
+                              ></i>
                               <h5 className="fw-bold">{value.title}</h5>
                               <p className="text-muted mb-0">{value.desc}</p>
                             </div>
@@ -208,95 +264,104 @@ const About = () => {
         </div>
       </section>
 
-          {/* Team Section */}
-          <section id="team" className="py-6 bg-light">
-            <div className="container">
-              <div className="row justify-content-center mb-5">
-                <div className="col-lg-8 text-center">
-                  <h2 className="display-5 fw-bold mb-3 p-3">Meet Our Team</h2>
-                  <p className="lead text-muted">
-                    A diverse group of educators, researchers, and technologists <br></br> united by a passion for learning innovation
-                  </p>
+      {/* Team Section */}
+      <section id="team" className="py-6 bg-light">
+        <div className="container">
+          <div className="row justify-content-center mb-5">
+            <div className="col-lg-8 text-center">
+              <h2 className="display-5 fw-bold mb-3 p-3">Meet Our Team</h2>
+              <p className="lead text-muted">
+                A diverse group of educators, researchers, and technologists{" "}
+                <br></br> united by a passion for learning innovation
+              </p>
+            </div>
+          </div>
+
+          <div className="row g-4">
+            {[
+              {
+                name: "Dr. Sudarshan Iyengar",
+                role: "Principal Investigator",
+                bio: "Dr. Sudarshan is a CSE faculty at IIT Ropar and Director of Annam.AI, known for pioneering AI education and reaching over 900,000 learners.",
+                img: drSudarshan,
+                linkedin:
+                  "https://www.linkedin.com/in/sudarshan-iyengar-3560b8145/",
+                email: "sudarshan@iitrpr.ac.in",
+              },
+              {
+                name: "Meenakshi V",
+                role: "PhD Researcher",
+                bio: "A passionate education designer at DLED Lab and Annam.AI, focused on creating engaging, assessment-free learning experiences that align learning with real-world skills.",
+                img: meenakshi,
+                linkedin: "https://www.linkedin.com/in/meenakshi-v-25aa7691/",
+                email: "meenakshi.v@vicharanashala.ai",
+              },
+              {
+                name: "Shivani Aggarwal ",
+                role: "PhD Researcher",
+                bio: "Investigating the impact of AI tutors on student engagement and learning outcomes.",
+                img: shivani,
+                linkedin:
+                  "https://www.linkedin.com/in/shivani-aggarwal-5865b639/",
+                email: "shivani.aggarwal@vicharanashala.ai",
+              },
+              {
+                name: "Aditya BMV",
+                role: "Software Developer",
+                bio: "Software engineer with a passion for creating user-friendly educational applications and tools.",
+                img: aditya,
+                linkedin: "https://www.linkedin.com/in/bvmukunda/",
+                email: "aditya.bmv@vicharanashala.ai",
+              },
+            ].map((member, index) => (
+              <div key={index} className="col-lg-3 col-md-6">
+                <div className="team-card shadow-sm rounded-4 overflow-hidden h-100">
+                  <div className="team-img position-relative">
+                    <img
+                      src={member.img}
+                      alt={member.name}
+                      className="img-fluid w-100"
+                    />
+                    <div className="team-social">
+                      {/* LinkedIn */}
+                      {member.linkedin && (
+                        <a
+                          href={member.linkedin}
+                          className="text-white"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          aria-label={`LinkedIn profile of ${member.name}`}
+                        >
+                          <i className="fab fa-linkedin-in"></i>
+                        </a>
+                      )}
+                      {/* Email */}
+                      {member.email && (
+                        <a
+                          href={`mailto:${member.email}`}
+                          className="text-white"
+                          aria-label={`Email to ${member.name}`}
+                        >
+                          <i className="fas fa-envelope"></i>
+                        </a>
+                      )}
+                    </div>
+                  </div>
+                  <div className="p-5">
+                    <h4 className="fw-bold mb-1">{member.name}</h4>
+                    <p className="text-primary mb-2">{member.role}</p>
+                    <p className="text-muted mb-0">{member.bio}</p>
+                  </div>
                 </div>
               </div>
-              
-              <div className="row g-4">
-      {[
-        { 
-          name: 'Dr. Sudarshan Iyengar', 
-          role: 'Principal Investigator', 
-          bio: 'Education technology specialist with 15+ years experience',
-          img: drSudarshan,
-          linkedin:'https://www.linkedin.com/in/sudarshan-iyengar-3560b8145/',
-          email: 'sudarshan@iitrpr.ac.in'
-        },
-        { 
-          name: 'Meenakshi V', 
-          role: 'PhD Researcher', 
-          bio: 'Cognitive science and learning design expert',
-          img: meenakshi,
-          linkedin:'https://www.linkedin.com/in/meenakshi-v-25aa7691/',
-          email: 'meenakshi.v@vicharanashala.ai'
-        },
-        { 
-          name: 'Shivani Aggarwal ', 
-          role: 'PhD Researcher',
-          bio: 'Expert in data analytics and educational assessment', 
-          img: shivani,
-          linkedin:'https://www.linkedin.com/in/shivani-aggarwal-5865b639/',
-          email: 'shivani.aggarwal@vicharanashala.ai'
-        },
-        {
-          name:'Aditya BMV',
-          role: 'Software Developer',
-          bio: 'Full-stack developer with a focus on educational applications',
-          img: aditya,
-          linkedin:'https://www.linkedin.com/in/bvmukunda/',
-          email: 'aditya.bmv@vicharanashala.ai'
-        }
-      ].map((member, index) => (
-        <div key={index} className="col-lg-3 col-md-6">
-          <div className="team-card shadow-sm rounded-4 overflow-hidden h-100">
-            <div className="team-img position-relative">
-              <img src={member.img} alt={member.name} className="img-fluid w-100" />
-              <div className="team-social">
-                {/* LinkedIn */}
-                {member.linkedin && (
-                  <a
-                    href={member.linkedin}
-                    className="text-white"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label={`LinkedIn profile of ${member.name}`}
-                  >
-                    <i className="fab fa-linkedin-in"></i>
-                  </a>
-                )}
-                {/* Email */}
-                {member.email && (
-                  <a
-                    href={`mailto:${member.email}`}
-                    className="text-white"
-                    aria-label={`Email to ${member.name}`}
-                  >
-                    <i className="fas fa-envelope"></i>
-                  </a>
-                )}
-              </div>
-            </div>
-            <div className="p-5">
-              <h4 className="fw-bold mb-1">{member.name}</h4>
-              <p className="text-primary mb-2">{member.role}</p>
-              <p className="text-muted mb-0">{member.bio}</p>
-            </div>
+            ))}
           </div>
-        </div>
-      ))}
-    </div>
 
-          
           <div className="text-center mt-5 p-3">
-            <a href="/team" className="btn btn-outline-warning fw-bold btn-lg px-4">
+            <a
+              href="/team"
+              className="btn btn-outline-warning fw-bold btn-lg px-4"
+            >
               View Full Team <i className="fas fa-arrow-right ms-2"></i>
             </a>
           </div>
@@ -306,4 +371,4 @@ const About = () => {
   );
 };
 
-export default About;
\ No newline at end of file
+export default About;
diff --git a/src/app/careers.tsx b/src/app/careers.tsx
index 7a7f746..ba7193b 100644
--- a/src/app/careers.tsx
+++ b/src/app/careers.tsx
@@ -1,64 +1,78 @@
 import { Link } from "react-router-dom";
-import { Navbar } from "../components/navbar"; // Import Navbar
 
 const Careers = () => {
   const openings = [
     {
-      title: 'Full Stack Developer Intern (Virtual)',
-      type: 'Internship',
-      location: 'Remote',
+      title: "Full Stack Developer Intern (Virtual)",
+      type: "Internship",
+      location: "Remote",
       description:
-        'Work on cutting-edge educational platforms. Gain experience in React, Node.js, and cloud technologies.',
+        "Work on cutting-edge educational platforms. Gain experience in React, Node.js, and cloud technologies.",
       requirements: [
-        'Proficiency in JavaScript, React, and Node.js',
-        'Experience with REST APIs and databases',
-        'Strong problem-solving skills',
+        "Proficiency in JavaScript, React, and Node.js",
+        "Experience with REST APIs and databases",
+        "Strong problem-solving skills",
       ],
-      applyLink: '/contact?tab=join',
+      applyLink: "/contact?tab=join",
     },
     {
-      title: 'Full Stack Developer Intern (Onsite)',
-      type: 'Internship',
-      location: 'IIT Ropar Campus',
+      title: "Full Stack Developer Intern (Onsite)",
+      type: "Internship",
+      location: "IIT Ropar Campus",
       description:
-        'Collaborate with our team onsite to develop scalable educational tools and platforms.',
+        "Collaborate with our team onsite to develop scalable educational tools and platforms.",
       requirements: [
-        'Proficiency in JavaScript, React, and Node.js',
-        'Experience with version control (Git)',
-        'Ability to work in a team environment',
+        "Proficiency in JavaScript, React, and Node.js",
+        "Experience with version control (Git)",
+        "Ability to work in a team environment",
       ],
-      applyLink: '/contact?tab=join',
+      applyLink: "/contact?tab=join",
     },
     {
-      title: 'Research Assistant (AI in Education)',
-      type: 'Research',
-      location: 'IIT Ropar Campus',
+      title: "Research Assistant (AI in Education)",
+      type: "Research",
+      location: "IIT Ropar Campus",
       description:
-        'Assist in research projects focused on AI-driven personalized learning systems.',
+        "Assist in research projects focused on AI-driven personalized learning systems.",
       requirements: [
-        'Background in AI/ML or related fields',
-        'Experience with Python and machine learning libraries',
-        'Strong analytical and research skills',
+        "Background in AI/ML or related fields",
+        "Experience with Python and machine learning libraries",
+        "Strong analytical and research skills",
       ],
-      applyLink: '/contact?tab=join',
+      applyLink: "/contact?tab=join",
     },
   ];
 
   return (
     <div className="careers-page">
-      <Navbar /> {/* Add Navbar at the top */}
       {/* Hero Section */}
-      <section className="hero-section text-white py-5" style={{ background: 'linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 85%)', marginTop: '-20px' }}>
+      <section
+        className="hero-section text-white py-5"
+        style={{
+          background:
+            "linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 85%)",
+          marginTop: "-20px",
+        }}
+      >
         <div className="container py-4">
           <div className="row align-items-center">
             <div className="col-lg-8">
               {/* <HomeButton/> <-- Remove this line */}
-              <h1 className="display-4 text-black fw-bold mb-4 mt-4">Shape the Future of Education</h1>
+              <h1 className="display-4 text-black fw-bold mb-4 mt-4">
+                Shape the Future of Education
+              </h1>
               <p className="lead mb-4 fs-4 text-secondary">
-                Join DLED and contribute to innovative educational technologies through development and research.
+                Join DLED and contribute to innovative educational technologies
+                through development and research.
               </p>
               <Link to="/#contact">
-                <button className="btn btn-lg px-4 text-light dark-button" style= {{ backgroundColor: 'rgb(233, 103, 52)', borderColor: 'rgb(233, 103, 52)' }}>
+                <button
+                  className="btn btn-lg px-4 text-light dark-button"
+                  style={{
+                    backgroundColor: "rgb(233, 103, 52)",
+                    borderColor: "rgb(233, 103, 52)",
+                  }}
+                >
                   Contact Us
                 </button>
               </Link>
@@ -72,9 +86,7 @@ const Careers = () => {
         <div className="container">
           <div className="row justify-content-center mb-5">
             <div className="col-lg-8 text-center">
-              <h2 className="display-5 fw-bold mb-3">
-                Current Opportunities
-              </h2>
+              <h2 className="display-5 fw-bold mb-3">Current Opportunities</h2>
               <p className="lead text-muted">
                 We're looking for passionate individuals to join our team
               </p>
@@ -87,7 +99,9 @@ const Careers = () => {
                 <div className="card h-100 border-0 shadow-sm hover-shadow transition-all">
                   <div className="card-body p-4">
                     <div className="d-flex justify-content-between align-items-start mb-3">
-                      <h5 className="card-title fw-bold mb-0">{opening.title}</h5>
+                      <h5 className="card-title fw-bold mb-0">
+                        {opening.title}
+                      </h5>
                       <span className="badge bg-primary-subtle bg-opacity-10 text-dark">
                         {opening.type}
                       </span>
@@ -106,7 +120,10 @@ const Careers = () => {
                         </li>
                       ))}
                     </ul>
-                    <a href={opening.applyLink} className="btn btn-warning text-dark w-100">
+                    <a
+                      href={opening.applyLink}
+                      className="btn btn-warning text-dark w-100"
+                    >
                       Apply Now
                     </a>
                   </div>
@@ -120,4 +137,4 @@ const Careers = () => {
   );
 };
 
-export default Careers;
\ No newline at end of file
+export default Careers;
diff --git a/src/app/collaborations.tsx b/src/app/collaborations.tsx
index 002792c..8d9ecb6 100644
--- a/src/app/collaborations.tsx
+++ b/src/app/collaborations.tsx
@@ -1,49 +1,81 @@
-// import { useState } from 'react';
-import { Link } from "react-router-dom";
 import "../styles/collab.css";
-import { Navbar } from "../components/navbar"; // Import Navbar
-
+import dled from "../assets/dled-clear.png";
 
 const collaborationData = [
   {
     id: 1,
-    title: 'MMTTP Faculty Development Program',
-    subtitle: 'A dynamic, hands-on journey into the world of Artificial Intelligence',
-    description: 'This free program is for teachers of degree colleges who wish to enhance their AI literacy and explore the role of AI in education and research.',
-    type: 'Educational Program',
-    status: 'Active',
-    duration: 'Ongoing',
-    participants: '500+ Faculty Members',
-    link: 'https://dled.iitrpr.ac.in/fdp/',
+    title: "MMTTP Faculty Development Program",
+    subtitle:
+      "A dynamic, hands-on journey into the world of Artificial Intelligence",
+    description:
+      "This free program is for teachers of degree colleges who wish to enhance their AI literacy and explore the role of AI in education and research.",
+    type: "Educational Program",
+    status: "Active",
+    duration: "Ongoing",
+    participants: "500+ Faculty Members",
+    link: "https://dled.iitrpr.ac.in/fdp/",
     supportedBy: [
-      { name: 'IIT Ropar', logo: '/images/collaborations/iitrpr.png' },
-      { name: 'MMTTP', logo: '/images/collaborations/mmtts.jpeg' }
+      { name: "IIT Ropar", logo: "/images/collaborations/iitrpr.png" },
+      { name: "MMTTP", logo: "/images/collaborations/mmtts.jpeg" },
+      { name: "Annam.ai", logo: "/images/collaborations/annam-logo.png" },
+      { name: "DLED", logo: dled },
     ],
     outcomes: [
-      'AI literacy enhancement for educators',
-      'Practical AI implementation in curriculum',
-      'Research collaboration opportunities'
-    ]
+      "AI literacy enhancement for educators",
+      "Practical AI implementation in curriculum",
+      "Research collaboration opportunities",
+    ],
   },
 ];
 
-const Collaborations = () => {
+const CollaborationLogos = () => {
+  const item = collaborationData[0]; // or loop if multiple
+
+  return (
+    <div className="d-flex gap-4 flex-wrap align-items-center my-4">
+      {item.supportedBy.map((partner) => (
+        <div
+          key={partner.name}
+          className="text-center bg-white shadow-sm p-3 rounded"
+          style={{ minWidth: "120px" }}
+        >
+          <img
+            src={partner.logo}
+            alt={partner.name}
+            className="img-fluid"
+            style={{ maxHeight: "90px", objectFit: "contain" }}
+          />
+          <div className="small text-muted mt-2 fw-medium">{partner.name}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
 
+const Collaborations = () => {
   return (
-      <div className="collab-page">
-        <Navbar />
-        {/* Hero Section*/}
-        <section className="hero-section text-white py-5" style={{
-          background: 'linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 85%)'
-        }}>
-          <div className="container py-3">
-            <div className="row align-items-center">
-              <div className="col-lg-8">
-                <h1 className="display-4 text-black fw-bold mb-4 mt-4" style={{ marginLeft: '-4px' }}> Our Collaborations</h1>
-                <p className="lead mb-4 fs-4 text-secondary">
-                </p>
-                
-                {/* <div className="d-flex gap-3">
+    <div className="collab-page">
+      {/* Hero Section*/}
+      <section
+        className="hero-section text-white py-5"
+        style={{
+          background:
+            "linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 85%)",
+        }}
+      >
+        <div className="container py-3">
+          <div className="row align-items-center">
+            <div className="col-lg-8">
+              <h1
+                className="display-4 text-black fw-bold mb-4 mt-4"
+                style={{ marginLeft: "-4px" }}
+              >
+                {" "}
+                Our Collaborations
+              </h1>
+              <p className="lead mb-4 fs-4 text-secondary"></p>
+
+              {/* <div className="d-flex gap-3">
                   <Link to="/">
                   <button className="btn btn-lg px-4 text-light dark-button" style= {{ backgroundColor: 'rgb(228, 47, 23)', borderColor: 'rgb(228, 47, 23)', marginRight: '-30px' }}>
                   View Collaborators
@@ -51,104 +83,135 @@ const Collaborations = () => {
                   </Link>
                 </div> */}
 
-                <div className="d-flex gap-3">
-                </div>
-
+              <div className="d-flex gap-3"></div>
+              <div
+                className="lead text-secondary"
+                style={{
+                  width: "90vw",
+                  display: "flex",
+                  fontWeight: "bold",
+                }}
+              >
+                <CollaborationLogos />
               </div>
             </div>
           </div>
-        </section>
+        </div>
+      </section>
 
-        {/* Collaborations Section */}
-        <section className="py-5 bg-light">
-          <div className="container-fluid px-4">
-            <div className="text-center mb-5">
-              {/* <h2 className="display-5 fw-bold mb-3">Our Partnerships</h2> */}
-              <p className="lead text-muted max-w-800 mx-auto">
-                Building bridges between academia, industry, and educational communities
-              </p>
-            </div>
+      {/* Collaborations Section */}
+      <section className="py-5 bg-light">
+        <div className="container-fluid px-4">
+          <div className="text-center mb-5">
+            {/* <h2 className="display-5 fw-bold mb-3">Our Partnerships</h2> */}
+            <p className="lead text-muted max-w-800 mx-auto">
+              Building bridges between academia, industry, and educational
+              communities
+            </p>
+          </div>
 
-            <div className="row g-4">
-              {collaborationData.map((collaboration) => (
-                <div key={collaboration.id} className="col-lg-6">
-                  <div className="collaboration-card card h-100 border-0 shadow-sm overflow-hidden">
-                    <div className="card-body p-4">
-                      <div className="d-flex justify-content-between align-items-start mb-3">
-                        <span className={`badge ${
-                          collaboration.status === 'Active' ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'
-                        }`}>
-                          {collaboration.status}
-                        </span>
-                        <span className="badge bg-primary-subtle text-primary">
-                          {collaboration.type}
-                        </span>
+          <div className="row g-4">
+            {collaborationData.map((collaboration) => (
+              <div key={collaboration.id} className="col-lg-6">
+                <div className="collaboration-card card h-100 border-0 shadow-sm overflow-hidden">
+                  <div className="card-body p-4">
+                    <div className="d-flex justify-content-between align-items-start mb-3">
+                      <span
+                        className={`badge ${
+                          collaboration.status === "Active"
+                            ? "bg-success-subtle text-success"
+                            : "bg-warning-subtle text-warning"
+                        }`}
+                      >
+                        {collaboration.status}
+                      </span>
+                      <span className="badge bg-primary-subtle text-primary">
+                        {collaboration.type}
+                      </span>
+                    </div>
+
+                    <h3 className="h4 card-title fw-bold mb-2">
+                      {collaboration.title}
+                    </h3>
+                    <p className="text-muted mb-3">{collaboration.subtitle}</p>
+                    <p className="card-text mb-4">
+                      {collaboration.description}
+                    </p>
+
+                    <div className="row g-3 mb-4">
+                      <div className="col-md-6">
+                        <h6 className="text-muted small mb-2">Duration</h6>
+                        <p className="fw-bold small">
+                          {collaboration.duration}
+                        </p>
                       </div>
-                      
-                      <h3 className="h4 card-title fw-bold mb-2">{collaboration.title}</h3>
-                      <p className="text-muted mb-3">{collaboration.subtitle}</p>
-                      <p className="card-text mb-4">{collaboration.description}</p>
-                      
-                      <div className="row g-3 mb-4">
-                        <div className="col-md-6">
-                          <h6 className="text-muted small mb-2">Duration</h6>
-                          <p className="fw-bold small">{collaboration.duration}</p>
-                        </div>
-                        <div className="col-md-6">
-                          <h6 className="text-muted small mb-2">Participants</h6>
-                          <p className="fw-bold small">{collaboration.participants}</p>
-                        </div>
+                      <div className="col-md-6">
+                        <h6 className="text-muted small mb-2">Participants</h6>
+                        <p className="fw-bold small">
+                          {collaboration.participants}
+                        </p>
                       </div>
+                    </div>
 
-                      {/* Supported By Section with Logos */}
-                      <div className="mb-4">
-                        <h6 className="text-muted small mb-3">Supported By</h6>
-                        <div className="d-flex flex-wrap gap-3 align-items-center">
-                          {collaboration.supportedBy.map((supporter, index) => (
-                            <div key={index} className="supporter-item d-flex align-items-center gap-2">
-                              <img 
-                                src={supporter.logo} 
+                    {/* Supported By Section with Logos */}
+                    <div className="mb-4">
+                      <h6 className="text-muted small mb-3">Supported By</h6>
+                      <div className="d-flex flex-wrap gap-3 align-items-center">
+                        {collaboration.supportedBy.map((supporter, index) => (
+                          <div
+                            key={index}
+                            className="supporter-item d-flex flex-column align-items-center gap-2"
+                          >
+                            <div>
+                              <img
+                                src={supporter.logo}
                                 alt={supporter.name}
                                 className="supporter-logo"
-                                style={{ width: '40px', height: '40px', objectFit: 'contain' }}
+                                style={{
+                                  width: "80px",
+                                  height: "80px",
+                                  objectFit: "contain",
+                                }}
                               />
-                              <span className="supporter-name small fw-medium">{supporter.name}</span>
                             </div>
-                          ))}
-                        </div>
+                            <div className="supporter-name small fw-medium">
+                              {supporter.name}
+                            </div>
+                          </div>
+                        ))}
                       </div>
+                    </div>
 
-                      {/* Key Outcomes */}
-                      <div className="mb-4">
-                        <h6 className="text-muted small mb-2">Key Outcomes</h6>
-                        <ul className="small list-unstyled">
-                          {collaboration.outcomes.map((outcome, index) => (
-                            <li key={index} className="mb-1">
-                              <i className="fas fa-check-circle text-success me-2"></i>
-                              {outcome}
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                      
-                        <div className="border-top pt-3">
-                        <a 
-                          href={collaboration.link}
-                          className="btn btn-outline-primary btn-sm"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          Learn More <i className="fas fa-arrow-right ms-1"></i>
-                        </a>
-                      </div>
+                    {/* Key Outcomes */}
+                    <div className="mb-4">
+                      <h6 className="text-muted small mb-2">Key Outcomes</h6>
+                      <ul className="small list-unstyled">
+                        {collaboration.outcomes.map((outcome, index) => (
+                          <li key={index} className="mb-1">
+                            <i className="fas fa-check-circle text-success me-2"></i>
+                            {outcome}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+
+                    <div className="border-top pt-3">
+                      <a
+                        href={collaboration.link}
+                        className="btn btn-outline-primary btn-sm"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        Learn More <i className="fas fa-arrow-right ms-1"></i>
+                      </a>
                     </div>
                   </div>
                 </div>
-              ))}
-            </div>
+              </div>
+            ))}
           </div>
-        </section> 
-
+        </div>
+      </section>
     </div>
   );
 };
diff --git a/src/app/comingsoon.tsx b/src/app/comingsoon.tsx
index 58e7435..ee0a2e5 100644
--- a/src/app/comingsoon.tsx
+++ b/src/app/comingsoon.tsx
@@ -1,40 +1,50 @@
 import { Link } from "react-router-dom";
 // import { FaFlask, FaChartLine, FaUsers} from 'react-icons/fa'; // FaEye, FaRobot, FaCertificate, FaChartBar
 import "../styles/researchPage.css";
-import { Navbar } from "../components/navbar";
-
 
 const ComingSoon = () => {
-
   return (
     <div className="research-page">
-      <Navbar /> {/* Add Navbar at the top */}
       {/* Hero Section*/}
-      <section className="hero-section text-white py-6" style={{
-        background: 'linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 85%)'
-      }}>
+      <section
+        className="hero-section text-white py-6"
+        style={{
+          background:
+            "linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 85%)",
+        }}
+      >
         <div className="container py-5">
           <div className="row align-items-center">
             <div className="col-lg-8">
-              <h1 className="display-4 text-black fw-bold mb-4 mt-4" style={{ marginLeft: '-4px' }}>Coming Soon!</h1>
+              <h1
+                className="display-4 text-black fw-bold mb-4 mt-4"
+                style={{ marginLeft: "-4px" }}
+              >
+                Coming Soon!
+              </h1>
               <p className="lead mb-4 fs-4 text-secondary">
                 This page is still under construction
               </p>
               <div className="d-flex gap-3">
                 <Link to="/">
-                <button className="btn btn-lg px-4 text-light dark-button" style= {{ backgroundColor: 'rgb(233, 103, 52)', borderColor: 'rgb(233, 103, 52)', marginRight: '-30px' }}>
-                Go Home
-                </button>
+                  <button
+                    className="btn btn-lg px-4 text-light dark-button"
+                    style={{
+                      backgroundColor: "rgb(233, 103, 52)",
+                      borderColor: "rgb(233, 103, 52)",
+                      marginRight: "-30px",
+                    }}
+                  >
+                    Go Home
+                  </button>
                 </Link>
               </div>
             </div>
           </div>
         </div>
       </section>
-      
-
     </div>
   );
 };
 
-export default ComingSoon;
\ No newline at end of file
+export default ComingSoon;
diff --git a/src/app/contact.tsx b/src/app/contact.tsx
index 661ef5b..09ff316 100644
--- a/src/app/contact.tsx
+++ b/src/app/contact.tsx
@@ -1,43 +1,44 @@
 // pages/contact.tsx
-import { useState, useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useState, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
 import "../styles/researchPage.css";
-import { Navbar } from '../components/navbar';
 
 const Contact = () => {
   const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    subject: '',
-    message: '',
-    resumeLink: '',
+    name: "",
+    email: "",
+    subject: "",
+    message: "",
+    resumeLink: "",
   });
 
   const [searchParams, setSearchParams] = useSearchParams();
-  const tabFromUrl = searchParams.get('tab');
-  const subjectFromUrl = searchParams.get('subject');
-  const [activeTab, setActiveTab] = useState<'join' | 'collaborate'>(tabFromUrl === 'collaborate' ? 'collaborate' : 'join');
+  const tabFromUrl = searchParams.get("tab");
+  const subjectFromUrl = searchParams.get("subject");
+  const [activeTab, setActiveTab] = useState<"join" | "collaborate">(
+    tabFromUrl === "collaborate" ? "collaborate" : "join"
+  );
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitSuccess, setSubmitSuccess] = useState(false);
 
   const initialFormData = {
-    name: '',
-    email: '',
-    subject: '',
-    message: '',
-    resumeLink: '',
+    name: "",
+    email: "",
+    subject: "",
+    message: "",
+    resumeLink: "",
   };
 
   useEffect(() => {
-    if (tabFromUrl === 'collaborate' || tabFromUrl === 'join') {
+    if (tabFromUrl === "collaborate" || tabFromUrl === "join") {
       setActiveTab(tabFromUrl);
     }
   }, [tabFromUrl]);
 
   useEffect(() => {
     if (subjectFromUrl) {
-      setFormData(prev => ({ ...prev, subject: subjectFromUrl }));
+      setFormData((prev) => ({ ...prev, subject: subjectFromUrl }));
     }
   }, [subjectFromUrl]);
 
@@ -48,14 +49,18 @@ const Contact = () => {
     }
   }, [submitSuccess]);
 
-  const handleTabChange = (tab: 'join' | 'collaborate') => {
+  const handleTabChange = (tab: "join" | "collaborate") => {
     setActiveTab(tab);
     setSearchParams({ tab });
   };
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >
+  ) => {
     const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
+    setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -69,13 +74,16 @@ const Contact = () => {
     };
 
     try {
-      const response = await fetch('https://script.google.com/macros/s/AKfycbydzEZ89EhQ-0tI4Hvsc5jC50wo3iq_bYjFG7u5aq3gM2PSQWtoJmeA48t8CjXTgJvvkw/exec', {
-        method: 'POST',
-        body: JSON.stringify(payload),
-        headers: {
-          'Content-Type': 'text/plain',
-        },
-      });
+      const response = await fetch(
+        "https://script.google.com/macros/s/AKfycbydzEZ89EhQ-0tI4Hvsc5jC50wo3iq_bYjFG7u5aq3gM2PSQWtoJmeA48t8CjXTgJvvkw/exec",
+        {
+          method: "POST",
+          body: JSON.stringify(payload),
+          headers: {
+            "Content-Type": "text/plain",
+          },
+        }
+      );
 
       if (response.ok) {
         setSubmitSuccess(true);
@@ -93,7 +101,9 @@ const Contact = () => {
   const renderForm = () => (
     <form onSubmit={handleSubmit}>
       <div className="mb-3">
-        <label htmlFor="name" className="form-label">Full Name</label>
+        <label htmlFor="name" className="form-label">
+          Full Name
+        </label>
         <input
           type="text"
           className="form-control"
@@ -106,7 +116,9 @@ const Contact = () => {
         />
       </div>
       <div className="mb-3">
-        <label htmlFor="email" className="form-label">Email</label>
+        <label htmlFor="email" className="form-label">
+          Email
+        </label>
         <input
           type="email"
           className="form-control"
@@ -119,9 +131,11 @@ const Contact = () => {
         />
       </div>
 
-      {activeTab === 'join' ? (
+      {activeTab === "join" ? (
         <div className="mb-3">
-          <label htmlFor="subject" className="form-label">Subject</label>
+          <label htmlFor="subject" className="form-label">
+            Subject
+          </label>
           <input
             type="text"
             className="form-control"
@@ -134,7 +148,9 @@ const Contact = () => {
         </div>
       ) : (
         <div className="mb-3">
-          <label htmlFor="subject" className="form-label">Collaboration Type</label>
+          <label htmlFor="subject" className="form-label">
+            Collaboration Type
+          </label>
           <select
             className="form-select"
             id="subject"
@@ -154,7 +170,7 @@ const Contact = () => {
 
       <div className="mb-3">
         <label htmlFor="message" className="form-label">
-          {activeTab === 'join' ? 'Message' : 'Details'}
+          {activeTab === "join" ? "Message" : "Details"}
         </label>
         <textarea
           className="form-control"
@@ -167,9 +183,11 @@ const Contact = () => {
         />
       </div>
 
-      {activeTab === 'join' && (
+      {activeTab === "join" && (
         <div className="mb-3">
-          <label htmlFor="resumeLink" className="form-label">Resume/CV Link</label>
+          <label htmlFor="resumeLink" className="form-label">
+            Resume/CV Link
+          </label>
           <input
             type="url"
             className="form-control"
@@ -182,13 +200,23 @@ const Contact = () => {
         </div>
       )}
 
-      <button type="submit" className="btn btn-primary" disabled={isSubmitting} style={{ backgroundColor: 'rgb(233, 103, 52)', borderColor: 'rgb(233, 103, 52)' }}>
-        {isSubmitting ? 'Sending...' : 'Submit'}
+      <button
+        type="submit"
+        className="btn btn-primary"
+        disabled={isSubmitting}
+        style={{
+          backgroundColor: "rgb(233, 103, 52)",
+          borderColor: "rgb(233, 103, 52)",
+        }}
+      >
+        {isSubmitting ? "Sending..." : "Submit"}
       </button>
 
       {submitSuccess && (
         <div className="alert alert-success mt-3 mb-0">
-          Thank you for your {activeTab === 'join' ? 'interest' : 'collaboration request'}! We'll get back to you soon.
+          Thank you for your{" "}
+          {activeTab === "join" ? "interest" : "collaboration request"}! We'll
+          get back to you soon.
         </div>
       )}
     </form>
@@ -196,12 +224,18 @@ const Contact = () => {
 
   return (
     <div className="contact-page">
-      <Navbar />
-      <section className="hero-section text-dark py-5" style={{ background: 'linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 85%)' }}>
+      <section
+        className="hero-section text-dark py-5"
+        style={{
+          background:
+            "linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 85%)",
+        }}
+      >
         <div className="container py-4">
           <h1 className="display-4 fw-bold mb-4 mt-3">Get In Touch</h1>
           <p className="lead text-secondary mb-4 fs-4">
-            Interested in joining our team or collaborating on a project? <br /> We’d love to hear from you.
+            Interested in joining our team or collaborating on a project? <br />{" "}
+            We’d love to hear from you.
           </p>
         </div>
       </section>
@@ -212,10 +246,20 @@ const Contact = () => {
             <div className="col-lg-8">
               <ul className="nav nav-tabs nav-fill mb-4">
                 <li className="nav-item">
-                  <button className={`nav-link ${activeTab === 'join' ? 'active' : ''}`} onClick={() => handleTabChange('join')}>
+                  <button
+                    className={`nav-link ${
+                      activeTab === "join" ? "active" : ""
+                    }`}
+                    onClick={() => handleTabChange("join")}
+                  >
                     Join Our Team
                   </button>
-                  <button className={`nav-link ${activeTab === 'collaborate' ? 'active' : ''}`} onClick={() => handleTabChange('collaborate')}>
+                  <button
+                    className={`nav-link ${
+                      activeTab === "collaborate" ? "active" : ""
+                    }`}
+                    onClick={() => handleTabChange("collaborate")}
+                  >
                     Collaborate With Us
                   </button>
                 </li>
@@ -223,10 +267,12 @@ const Contact = () => {
 
               <div className="tab-content p-4 border border-top-0 rounded-bottom">
                 <h3 className="mb-4">
-                  {activeTab === 'join' ? 'Interested in joining our team?' : 'Collaboration Opportunities'}
+                  {activeTab === "join"
+                    ? "Interested in joining our team?"
+                    : "Collaboration Opportunities"}
                 </h3>
                 <p className="mb-4">
-                  {activeTab === 'join'
+                  {activeTab === "join"
                     ? "We're always looking for talented individuals to join our mission of transforming education. Fill out the form and we'll get back to you."
                     : "Interested in collaborating on research, projects, or educational initiatives? Tell us about your ideas!"}
                 </p>
diff --git a/src/app/events.tsx b/src/app/events.tsx
index fe68253..000fb2a 100644
--- a/src/app/events.tsx
+++ b/src/app/events.tsx
@@ -1,9 +1,8 @@
-import { useState, useEffect } from 'react';
-import { FaCalendarAlt, FaMapMarkerAlt, FaRegClock } from 'react-icons/fa'; // FaTicketAlt, FaUsers
-import { Link } from 'react-router-dom';
-import { Navbar } from '../components/navbar';
-import { getEventsByStatus } from '../utils/eventUtils';
-import '../styles/events.css';
+import { useState, useEffect } from "react";
+import { FaCalendarAlt, FaMapMarkerAlt, FaRegClock } from "react-icons/fa"; // FaTicketAlt, FaUsers
+import { Link } from "react-router-dom";
+import { getEventsByStatus } from "../utils/eventUtils";
+import "../styles/events.css";
 
 // Google Calendar Functionality
 // Helper to format date and time for Google Calendar and ICS
@@ -13,12 +12,18 @@ function parseDateTime(dateStr: string, timeStr: string) {
   // Example: dateStr = 'May 15, 2025', timeStr = '10:00 AM - 4:00 PM'
   const [startTime, endTime] = timeStr.split(" - ");
   const start = new Date(`${dateStr} ${startTime}`);
-  const end = endTime ? new Date(`${dateStr} ${endTime}`) : new Date(start.getTime() + 60 * 60 * 1000);
+  const end = endTime
+    ? new Date(`${dateStr} ${endTime}`)
+    : new Date(start.getTime() + 60 * 60 * 1000);
 
   // Google Calendar and ICS use UTC in YYYYMMDDTHHmmssZ format
   const pad = (n: number) => n.toString().padStart(2, "0");
   const format = (d: Date) =>
-    `${d.getUTCFullYear()}${pad(d.getUTCMonth() + 1)}${pad(d.getUTCDate())}T${pad(d.getUTCHours())}${pad(d.getUTCMinutes())}${pad(d.getUTCSeconds())}Z`;
+    `${d.getUTCFullYear()}${pad(d.getUTCMonth() + 1)}${pad(
+      d.getUTCDate()
+    )}T${pad(d.getUTCHours())}${pad(d.getUTCMinutes())}${pad(
+      d.getUTCSeconds()
+    )}Z`;
 
   return {
     gcStart: format(start),
@@ -32,7 +37,9 @@ function parseDateTime(dateStr: string, timeStr: string) {
 function getGoogleCalendarUrl(event: any) {
   const { gcStart, gcEnd } = parseDateTime(event.date, event.time);
   const base = "https://calendar.google.com/calendar/render?action=TEMPLATE";
-  const details = `${event.description || ""}\n\nJoin Zoom Meeting: ${event.link || ""}`;
+  const details = `${event.description || ""}\n\nJoin Zoom Meeting: ${
+    event.link || ""
+  }`;
   const params = [
     `text=${encodeURIComponent(event.title)}`,
     `dates=${gcStart}/${gcEnd}`,
@@ -45,7 +52,10 @@ function getGoogleCalendarUrl(event: any) {
 // Helper to generate and download ICS file
 function downloadICS(event: any) {
   const { icsStart, icsEnd } = parseDateTime(event.date, event.time);
-  const description = `${(event.description || "").replace(/\n/g, "\\n")}\\n\\nJoin Zoom Meeting: ${event.link || ""}`;
+  const description = `${(event.description || "").replace(
+    /\n/g,
+    "\\n"
+  )}\\n\\nJoin Zoom Meeting: ${event.link || ""}`;
 
   const foldLine = (line: string): string =>
     line.match(/.{1,73}/g)?.join("\r\n ") ?? line;
@@ -75,14 +85,12 @@ function downloadICS(event: any) {
   URL.revokeObjectURL(url);
 }
 
-
-
-
 const Events = () => {
-  const [activeTab, setActiveTab] = useState('upcoming');
+  const [activeTab, setActiveTab] = useState("upcoming");
   const [isLoading, setIsLoading] = useState(true);
-  
-  const filteredEvents = getEventsByStatus(activeTab as 'upcoming' | 'past');
+
+  const filteredEvents = getEventsByStatus(activeTab as "upcoming" | "past");
+  console.log(filteredEvents, "poiu");
 
   useEffect(() => {
     const timer = setTimeout(() => setIsLoading(false), 1000);
@@ -91,11 +99,18 @@ const Events = () => {
 
   return (
     <div className="events-page">
-      <Navbar />
       {/* Hero Section  */}
-      <section className="hero-section text-white py-6" style={{ background: 'linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 85%)' }}>
+      <section
+        className="hero-section text-white py-6"
+        style={{
+          background:
+            "linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 85%)",
+        }}
+      >
         <div className="container position-relative py-5">
-          <h1 className="display-4 text-black fw-bold mb-4 mt-4">Events at DLED</h1>
+          <h1 className="display-4 text-black fw-bold mb-4 mt-4">
+            Events at DLED
+          </h1>
           <p className="lead mb-4 fs-4 text-secondary">
             Join our knowledge-sharing community
           </p>
@@ -105,7 +120,7 @@ const Events = () => {
               Subscribe to Updates
             </button>
             */}
-            
+
             {/* <button className="btn btn-lg px-4 light-button" style ={{ borderWidth: '1.3px', borderColor: 'rgb(233, 103, 52)', color: 'rgb(233, 103, 52)' }} >Past Events Archive</button> */}
           </div>
         </div>
@@ -117,23 +132,32 @@ const Events = () => {
           <div className="text-center mb-5">
             <h2 className="display-5 fw-bold mb-3">Discover Our Events</h2>
             <p className="lead text-muted max-w-800 mx-auto">
-              Workshops, hackathons, and symposiums designed to inspire and educate
+              Workshops, hackathons, and symposiums designed to inspire and
+              educate
             </p>
-            
+
             {/* Event Type Tabs */}
             <div className="d-flex justify-content-center mb-4">
               <div className="btn-group" role="group">
                 <button
                   type="button"
-                  className={`btn btn-${activeTab === 'upcoming' ? 'warning fw-bold' : 'outline-dark-subtle fw-bold'}`}
-                  onClick={() => setActiveTab('upcoming')}
+                  className={`btn btn-${
+                    activeTab === "upcoming"
+                      ? "warning fw-bold"
+                      : "outline-dark-subtle fw-bold"
+                  }`}
+                  onClick={() => setActiveTab("upcoming")}
                 >
                   Upcoming Events
                 </button>
                 <button
                   type="button"
-                  className={`btn btn-${activeTab === 'past' ? 'warning fw-bold' : 'outline-warning fw-bold'}`}
-                  onClick={() => setActiveTab('past')}
+                  className={`btn btn-${
+                    activeTab === "past"
+                      ? "warning fw-bold"
+                      : "outline-warning fw-bold"
+                  }`}
+                  onClick={() => setActiveTab("past")}
                 >
                   Past Events
                 </button>
@@ -155,22 +179,38 @@ const Events = () => {
                     <div className="event-card card h-100 border-0 shadow-sm overflow-hidden hover-shadow-lg transition-all">
                       <div className="row g-0 h-100">
                         <div className="col-md-5">
-                          <img 
-                            src={event.image} 
-                            className="img-fluid h-100 event-card-image" 
+                          <img
+                            src={event.image}
+                            className="img-fluid h-100 event-card-image"
                             alt={event.title}
                           />
                         </div>
                         <div className="col-md-7">
                           <div className="card-body p-4 d-flex flex-column h-100">
                             <div className="d-flex justify-content-between align-items-start mb-2">
-                              <span className="badge" style={{ backgroundColor: 'rgb(223, 94, 8)', color: 'rgb(252, 251, 196)' }}  >{event.category}</span>
-                              {event.status === 'upcoming' && (
-                                <span className="badge" style={{ backgroundColor: 'rgb(248, 229, 201)', color: 'rgb(59, 58, 58)' }} ></span>
+                              <span
+                                className="badge"
+                                style={{
+                                  backgroundColor: "rgb(223, 94, 8)",
+                                  color: "rgb(252, 251, 196)",
+                                }}
+                              >
+                                {event.category}
+                              </span>
+                              {event.status === "upcoming" && (
+                                <span
+                                  className="badge"
+                                  style={{
+                                    backgroundColor: "rgb(248, 229, 201)",
+                                    color: "rgb(59, 58, 58)",
+                                  }}
+                                ></span>
                               )}
                             </div>
-                            <h3 className="h4 card-title fw-bold">{event.title}</h3>
-                            
+                            <h3 className="h4 card-title fw-bold">
+                              {event.title}
+                            </h3>
+
                             <div className="d-flex flex-wrap gap-3 my-3 text-muted small">
                               <div className="d-flex align-items-center">
                                 <FaCalendarAlt className="me-2" />
@@ -185,8 +225,10 @@ const Events = () => {
                                 <span>{event.location}</span>
                               </div>
                             </div>
-                            
-                            <p className="card-text flex-grow-1">{event.description}</p>
+
+                            <p className="card-text flex-grow-1">
+                              {event.description}
+                            </p>
 
                             <div className="mt-4 d-flex gap-2">
                               <a
@@ -205,11 +247,15 @@ const Events = () => {
                                 onClick={() => downloadICS(event)}
                                 type="button"
                               >
-                                <i className="far fa-calendar-alt" aria-hidden="true"></i>
-                                <span className="visually-hidden">Download ICS</span>
+                                <i
+                                  className="far fa-calendar-alt"
+                                  aria-hidden="true"
+                                ></i>
+                                <span className="visually-hidden">
+                                  Download ICS
+                                </span>
                               </button>
                             </div>
-
                           </div>
                         </div>
                       </div>
@@ -229,15 +275,25 @@ const Events = () => {
       </section>
 
       {/* CTA Section */}
-      <section className="py-5 text-white" style ={{ backgroundColor: 'rgb(233, 103, 52)' }}>
+      <section
+        className="py-5 text-white"
+        style={{ backgroundColor: "rgb(233, 103, 52)" }}
+      >
         <div className="container text-center py-4">
-          <h2 className="display-6 fw-bold mb-4" style={{ color: 'rgb(252, 251, 196)' }}  >Have an event idea?</h2>
-          <p className="lead mb-4">We're always looking for collaborators and interesting topics.</p>
+          <h2
+            className="display-6 fw-bold mb-4"
+            style={{ color: "rgb(252, 251, 196)" }}
+          >
+            Have an event idea?
+          </h2>
+          <p className="lead mb-4">
+            We're always looking for collaborators and interesting topics.
+          </p>
 
           <Link to="/contact?tab=collaborate&subject=Other">
-          <button className="btn btn-light btn-lg px-4">
-            Propose an Event <i className="fas fa-arrow-right ms-2"></i>
-          </button>
+            <button className="btn btn-light btn-lg px-4">
+              Propose an Event <i className="fas fa-arrow-right ms-2"></i>
+            </button>
           </Link>
         </div>
       </section>
diff --git a/src/app/home.tsx b/src/app/home.tsx
index 4266f89..de589bb 100644
--- a/src/app/home.tsx
+++ b/src/app/home.tsx
@@ -1,5 +1,4 @@
 import { Header } from "../components/Header";
-import { Navbar } from "../components/navbar";
 import { VibeStrip } from "../components/VibeStrip";
 import { EventFlash } from "../components/EventFlash";
 import ResearchInitiatives from "../components/ResearchInitiatives";
@@ -7,49 +6,45 @@ import { ResearchApproach } from "../components/ResearchApproach";
 import { MeetTheMinds } from "../components/MeetTheMinds";
 import { AboutDLED } from "../components/AboutDled";
 import { ContactSection } from "../components/ContactSection";
-import { FooterWrapper } from "../components/FooterFile";
 import { useNavigate } from "react-router-dom";
 import { getNextUpcomingEvent } from "../utils/eventUtils";
 
 const Home = () => {
   const navigate = useNavigate();
-  
+
   // Get the next upcoming event dynamically
   const nextUpcomingEvent = getNextUpcomingEvent();
 
   return (
     <div>
-      <Navbar />
       <VibeStrip />
       <div style={{ width: "100%" }}>
         <Header
           onLearnMore={() => {
-            navigate('/about');
+            navigate("/about");
           }}
           onContact={() => {
-            const contactSection = document.getElementById('contact');
-            if (contactSection) contactSection.scrollIntoView({ behavior: 'smooth' });
+            const contactSection = document.getElementById("contact");
+            if (contactSection)
+              contactSection.scrollIntoView({ behavior: "smooth" });
           }}
         />
       </div>
       <EventFlash event={nextUpcomingEvent} />
       <div>
-        <ResearchInitiatives/>
-      </div>
-      <div>
-        <ResearchApproach/>
+        <ResearchInitiatives />
       </div>
       <div>
-        <MeetTheMinds/>
+        <ResearchApproach />
       </div>
       <div>
-        <AboutDLED/>
+        <MeetTheMinds />
       </div>
       <div>
-        <ContactSection/>
+        <AboutDLED />
       </div>
       <div>
-        <FooterWrapper/>
+        <ContactSection />
       </div>
     </div>
   );
diff --git a/src/app/research.tsx b/src/app/research.tsx
index 24ccb7e..af4b423 100644
--- a/src/app/research.tsx
+++ b/src/app/research.tsx
@@ -1,117 +1,140 @@
-import { useState } from 'react';
+import { useState } from "react";
 import { Link } from "react-router-dom";
-import { FaFlask, FaChartLine, FaRobot, FaUsers,  FaChartBar } from 'react-icons/fa'; // FaEye, FaRobot, FaCertificate, FaChartBar
+import {
+  FaFlask,
+  FaChartLine,
+  FaRobot,
+  FaUsers,
+  FaChartBar,
+} from "react-icons/fa"; // FaEye, FaRobot, FaCertificate, FaChartBar
 import "../styles/researchPage.css";
-import { Navbar } from "../components/navbar"; // Import Navbar
 
 // Export the array so it can be imported in ResearchInitiatives.tsx
 export const researchProjects = [
-    {
-      id:3,
-      title: 'Dopamine Driving through Dashboard (DDD)',
-      status: 'ongoing',
-      description: 'The DDD project develops centralized, interactive dashboards to drive motivation and engagement among stakeholders in educational research and development. Built with the MERN stack, DDD visualizes project progress, participation, and analytics across multiple initiatives at DLED Lab, enabling intuitive decision-making.',
-      focusArea: 'Educational Technology',
-      team: [''],
-      partners: ['DLED Lab'],
-      timeline: '2023-2025',
-      outcomes: [
-        'Modular dashboard system for live tracking of research and product initiatives',
-        'Improved visibility into student/faculty engagement and contributions',
-        'Scalable design supporting multiple datasets and real-time visualisation'
-      ],
-      imageUrl: "https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?q=80&w=928&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-      icon: <FaChartBar className="text-info" size={32} />
-    }, 
+  {
+    id: 3,
+    title: "Dopamine Driving through Dashboard (DDD)",
+    status: "ongoing",
+    description:
+      "The DDD project develops centralized, interactive dashboards to drive motivation and engagement among stakeholders in educational research and development. Built with the MERN stack, DDD visualizes project progress, participation, and analytics across multiple initiatives at DLED Lab, enabling intuitive decision-making.",
+    focusArea: "Educational Technology",
+    team: [""],
+    partners: ["DLED Lab"],
+    timeline: "2023-2025",
+    outcomes: [
+      "Modular dashboard system for live tracking of research and product initiatives",
+      "Improved visibility into student/faculty engagement and contributions",
+      "Scalable design supporting multiple datasets and real-time visualisation",
+    ],
+    imageUrl:
+      "https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?q=80&w=928&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    icon: <FaChartBar className="text-info" size={32} />,
+  },
 
-    {
-      id: 2,
-      title: 'Peer Evaluation System (PES)',
-      status: 'ongoing',
-      description: 'PES is a scalable web tool that streamlines peer assessment in education. Designed for transparency, fairness, and quality feedback, PES supports structured evaluations for both individual and group activities, providing data-driven insights to instructors and learners.',
-      focusArea: 'Educational Technology',
-      team: [''],
-      partners: ['-'],
-      timeline: '2023-2025',
-      outcomes: [
-      'Customizable peer evaluation forms integrated with participation data',
-      'Analytics dashboard for instructors to identify patterns, biases, and anomalies',
-      'Integration-ready system for LMS platforms and classroom tools',
+  {
+    id: 2,
+    title: "Peer Evaluation System (PES)",
+    status: "ongoing",
+    description:
+      "PES is a scalable web tool that streamlines peer assessment in education. Designed for transparency, fairness, and quality feedback, PES supports structured evaluations for both individual and group activities, providing data-driven insights to instructors and learners.",
+    focusArea: "Educational Technology",
+    team: [""],
+    partners: ["-"],
+    timeline: "2023-2025",
+    outcomes: [
+      "Customizable peer evaluation forms integrated with participation data",
+      "Analytics dashboard for instructors to identify patterns, biases, and anomalies",
+      "Integration-ready system for LMS platforms and classroom tools",
       // 'Support for both formative and summative peer assessments',
       // 'Poll automation'
-      ],
-      imageUrl: "https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-      icon: <FaUsers className="text-dark" size={32} />
-    },
+    ],
+    imageUrl:
+      "https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    icon: <FaUsers className="text-dark" size={32} />,
+  },
 
-    {
+  {
     id: 4,
-    title: 'Poll Automation',
-    status: 'ongoing',
-    description: 'The Poll Automation project is a real-time classroom tool that uses live audio transcripts to generate lecture summaries and create contextual polls every five minutes- or as set by the instructor. This system boosts interactivity, checks comprehension, and gives instructors instant feedback during teaching sessions.',
-    focusArea: 'Educational Technology',
-    team: [ '' ],
+    title: "Poll Automation",
+    status: "ongoing",
+    description:
+      "The Poll Automation project is a real-time classroom tool that uses live audio transcripts to generate lecture summaries and create contextual polls every five minutes- or as set by the instructor. This system boosts interactivity, checks comprehension, and gives instructors instant feedback during teaching sessions.",
+    focusArea: "Educational Technology",
+    team: [""],
     // partners: ['Dopamine Driving through Dashboard (DDD)', 'Peer Evaluation System (PES)'],
-    timeline: '2025-2025',
+    timeline: "2025-2025",
+    outcomes: [
+      "Real-time speech-to-text transcription system for live classes",
+      "Automated, context-aware poll generation with instructor override features",
+      "Seamless integration with dashboards (DDD) and feedback mechanisms (PES)",
+      // 'Enhanced classroom interactivity and adaptive teaching support'
+    ],
+    imageUrl:
+      "https://images.unsplash.com/photo-1576400883215-7083980b6193?q=80&w=1626&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    icon: <FaRobot className="text-primary" size={32} />,
+  },
+  {
+    id: 1,
+    title: "ViBe",
+    status: "ongoing",
+    description:
+      "ViBe is a comprehensive educational platform designed to enhance the learning experience for both students and teachers. It integrates various tools and resources to create a vibrant learning ecosystem, focusing on personalized learning, interactive content, and community engagement.",
+    focusArea: "Educational Technology",
+    team: [""],
+    timeline: "2024-2025",
     outcomes: [
-    'Real-time speech-to-text transcription system for live classes',
-    'Automated, context-aware poll generation with instructor override features',
-    'Seamless integration with dashboards (DDD) and feedback mechanisms (PES)',
-    // 'Enhanced classroom interactivity and adaptive teaching support'
+      "A unified platform for educational resources and tools",
+      "Personalized learning paths for students",
+      "Interactive content and community features for enhanced engagement",
     ],
-    imageUrl: "https://images.unsplash.com/photo-1576400883215-7083980b6193?q=80&w=1626&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    icon: <FaRobot className="text-primary" size={32} />
-    },
-    {
-      id:1,
-      title: 'ViBe',
-      status: 'ongoing',
-      description: 'ViBe is a comprehensive educational platform designed to enhance the learning experience for both students and teachers. It integrates various tools and resources to create a vibrant learning ecosystem, focusing on personalized learning, interactive content, and community engagement.',
-      focusArea: 'Educational Technology',
-      team: [''],
-      timeline: '2024-2025',
-      outcomes: [
-        'A unified platform for educational resources and tools',
-        'Personalized learning paths for students',
-        'Interactive content and community features for enhanced engagement'
-      ],
-      imageUrl: "https://images.unsplash.com/photo-1576400883215-7083980b6193?q=80&w=1626&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-      icon: <FaFlask className="text-warning" size={32} />
-    }
+    imageUrl:
+      "https://images.unsplash.com/photo-1576400883215-7083980b6193?q=80&w=1626&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    icon: <FaFlask className="text-warning" size={32} />,
+  },
 ];
 
-
-
 const Research = () => {
-  const [activeFilter, setActiveFilter] = useState('all');
-  
-  const filteredProjects = activeFilter === 'all' 
-    ? researchProjects 
-    : researchProjects.filter(project => project.status === activeFilter);
+  const [activeFilter, setActiveFilter] = useState("all");
 
+  const filteredProjects =
+    activeFilter === "all"
+      ? researchProjects
+      : researchProjects.filter((project) => project.status === activeFilter);
 
   return (
     <div className="research-page">
-      <Navbar /> 
       {/* Hero Section*/}
-      <section className="hero-section text-white py-6" style={{
-        background: 'linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 85%)'
-      }}>
+      <section
+        className="hero-section text-white py-6"
+        style={{
+          background:
+            "linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 85%)",
+        }}
+      >
         <div className="container py-5">
           <div className="row align-items-center">
             <div className="col-lg-8">
-
-              <h1 className="display-4 text-black fw-bold mb-4 mt-4" style={{ marginLeft: '-4px' }}>
+              <h1
+                className="display-4 text-black fw-bold mb-4 mt-4"
+                style={{ marginLeft: "-4px" }}
+              >
                 Research at DLED
               </h1>
               <p className="lead mb-4 fs-4 text-secondary">
-                Pioneering the future of education through technology and innovation
+                Pioneering the future of education through technology and
+                innovation
               </p>
               <div className="d-flex gap-3">
                 <Link to="/contact?tab=collaborate">
-                <button className="btn btn-lg px-4 text-light dark-button" style= {{ backgroundColor: 'rgb(233, 103, 52)', borderColor: 'rgb(233, 103, 52)' }}>
-                  Collaborate With Us
-                </button>
+                  <button
+                    className="btn btn-lg px-4 text-light dark-button"
+                    style={{
+                      backgroundColor: "rgb(233, 103, 52)",
+                      borderColor: "rgb(233, 103, 52)",
+                    }}
+                  >
+                    Collaborate With Us
+                  </button>
                 </Link>
 
                 {/* <Link to="/comingsoon">
@@ -119,15 +142,18 @@ const Research = () => {
                   View Publications
                 </button>
                 </Link> */}
-
               </div>
             </div>
             <div className="col-lg-4 d-none d-lg-block">
-              <img 
-                src="../images/brain.png" 
-                alt="Research Illustration" 
+              <img
+                src="../images/brain.png"
+                alt="Research Illustration"
                 className="img-fluid"
-                style={{ maxWidth: "200px", height: "auto", marginTop: "-10px" }}
+                style={{
+                  maxWidth: "200px",
+                  height: "auto",
+                  marginTop: "-10px",
+                }}
               />
             </div>
           </div>
@@ -140,30 +166,39 @@ const Research = () => {
           <div className="text-center mb-5">
             <h2 className="display-5 fw-bold mb-3">Our Research Initiatives</h2>
             <p className="lead text-muted max-w-800 mx-auto">
-              Interdisciplinary projects at the intersection of education and cutting-edge technology
+              Interdisciplinary projects at the intersection of education and
+              cutting-edge technology
             </p>
-            
+
             {/* Filter Buttons */}
             <div className="d-flex justify-content-center mb-4 flex-wrap">
               <div className="btn-group" role="group">
                 <button
                   type="button"
-                  className={`btn fw-semibold btn-${activeFilter === 'all' ? 'secondary' : 'outline-warning'}`}
-                  onClick={() => setActiveFilter('all')}
+                  className={`btn fw-semibold btn-${
+                    activeFilter === "all" ? "secondary" : "outline-warning"
+                  }`}
+                  onClick={() => setActiveFilter("all")}
                 >
                   All Projects
                 </button>
                 <button
                   type="button"
-                  className={`btn fw-semibold btn-${activeFilter === 'ongoing' ? 'secondary' : 'outline-warning'}`}
-                  onClick={() => setActiveFilter('ongoing')}
+                  className={`btn fw-semibold btn-${
+                    activeFilter === "ongoing" ? "secondary" : "outline-warning"
+                  }`}
+                  onClick={() => setActiveFilter("ongoing")}
                 >
                   Ongoing Research
                 </button>
                 <button
                   type="button"
-                  className={`btn fw-semibold btn-${activeFilter === 'completed' ? 'secondary' : 'outline-warning'}`}
-                  onClick={() => setActiveFilter('completed')}
+                  className={`btn fw-semibold btn-${
+                    activeFilter === "completed"
+                      ? "secondary"
+                      : "outline-warning"
+                  }`}
+                  onClick={() => setActiveFilter("completed")}
                 >
                   Completed Projects
                 </button>
@@ -171,12 +206,16 @@ const Research = () => {
             </div>
           </div>
 
-          <div className="row g-4">
+          <div className="row g-4 px-4 px-md-5">
             {filteredProjects.map((project) => (
               <div key={project.id} className="col-lg-6">
-                <div className={`project-card card h-100 border-0 shadow-sm overflow-hidden transition-all hover-shadow-lg ${
-                  project.status === 'ongoing' ? 'border-start border-4 border-primary-subtle' : 'border-start border-4 border-success-subtle text-dark'
-                }`}>
+                <div
+                  className={`project-card card h-100 border-0 shadow-sm overflow-hidden transition-all hover-shadow-lg ${
+                    project.status === "ongoing"
+                      ? "border-start border-4 border-primary-subtle"
+                      : "border-start border-4 border-success-subtle text-dark"
+                  }`}
+                >
                   <div className="card-body p-4">
                     <div className="d-flex align-items-start gap-4">
                       <div className="flex-shrink-0">
@@ -186,19 +225,37 @@ const Research = () => {
                       </div>
                       <div className="flex-grow-1">
                         <div className="d-flex justify-content-between align-items-start">
-                          <h3 className="h4 card-title fw-bold mb-3" style={{ marginLeft: '-8px' }}>{project.title}</h3>
-                          <span className={`badge ${
-                            project.status === 'ongoing' ? 'bg-primary-subtle text-dark' : 'bg-success-subtle text-dark'
-                          }`}>
-                            {project.status === 'ongoing' ? 'In Progress' : 'Completed'}
+                          <h3
+                            className="h4 card-title fw-bold mb-3"
+                            style={{ marginLeft: "-8px" }}
+                          >
+                            {project.title}
+                          </h3>
+                          <span
+                            className={`badge ${
+                              project.status === "ongoing"
+                                ? "bg-primary-subtle text-dark"
+                                : "bg-success-subtle text-dark"
+                            }`}
+                          >
+                            {project.status === "ongoing"
+                              ? "In Progress"
+                              : "Completed"}
                           </span>
                         </div>
-                        
-                        <p className="card-text mb-4" style={{ marginLeft: '-8px' }}>{project.description}</p>
-                        
+
+                        <p
+                          className="card-text mb-4"
+                          style={{ marginLeft: "-8px" }}
+                        >
+                          {project.description}
+                        </p>
+
                         <div className="row g-3 mb-4">
                           <div className="col-md-6">
-                            <h6 className="text-muted small mb-2">Focus Area</h6>
+                            <h6 className="text-muted small mb-2">
+                              Focus Area
+                            </h6>
                             <p className="fw-bold">{project.focusArea}</p>
                           </div>
                           <div className="col-md-6">
@@ -214,9 +271,11 @@ const Research = () => {
                               ))}
                             </ul>
                           </div> */}
-                          
+
                           <div className="col-md-6">
-                            <h6 className="text-muted small mb-2">Key Outcomes</h6>
+                            <h6 className="text-muted small mb-2">
+                              Key Outcomes
+                            </h6>
                             <ul className="small">
                               {project.outcomes.map((outcome, i) => (
                                 <li key={i}>{outcome}</li>
@@ -224,7 +283,7 @@ const Research = () => {
                             </ul>
                           </div>
                         </div>
-                        
+
                         <div className="d-flex justify-content-between align-items-center border-top pt-3">
                           {/* <div>
                             <h6 className="text-muted small mb-2">Collaborators</h6>
@@ -255,7 +314,7 @@ const Research = () => {
               Combining rigorous academic research with practical implementation
             </p>
           </div>
-          
+
           <div className="row g-4">
             <div className="col-md-4">
               <div className="text-center p-4">
@@ -264,7 +323,8 @@ const Research = () => {
                 </div>
                 <h4 className="h5 fw-bold mb-3">Interdisciplinary Teams</h4>
                 <p className="text-muted">
-                  Combining expertise from education, computer science, and cognitive psychology
+                  Combining expertise from education, computer science, and
+                  cognitive psychology
                 </p>
               </div>
             </div>
@@ -275,7 +335,8 @@ const Research = () => {
                 </div>
                 <h4 className="h5 fw-bold mb-3">Evidence-Based</h4>
                 <p className="text-muted">
-                  Rigorous experimental designs with quantitative and qualitative measures
+                  Rigorous experimental designs with quantitative and
+                  qualitative measures
                 </p>
               </div>
             </div>
@@ -286,24 +347,33 @@ const Research = () => {
                 </div>
                 <h4 className="h5 fw-bold mb-3">Real-World Impact</h4>
                 <p className="text-muted">
-                  Direct application in educational settings with measurable outcomes
+                  Direct application in educational settings with measurable
+                  outcomes
                 </p>
               </div>
             </div>
           </div>
         </div>
       </section>
-      <section className="py-5 text-white" style ={{ backgroundColor: 'rgb(233, 103, 52)' }}>
+      <section
+        className="py-5 text-white"
+        style={{ backgroundColor: "rgb(233, 103, 52)" }}
+      >
         <div className="container text-center py-4">
-          <h2 className= "display-6 fw-bold mb-4" style={{ color: 'rgb(252, 251, 196)' }} >Interested in our research?</h2>
-          <p className="lead mb-4">We welcome collaborations with academia and industry.</p>
+          <h2
+            className="display-6 fw-bold mb-4"
+            style={{ color: "rgb(252, 251, 196)" }}
+          >
+            Interested in our research?
+          </h2>
+          <p className="lead mb-4">
+            We welcome collaborations with academia and industry.
+          </p>
 
           <div className="d-flex justify-content-center gap-3">
-          <Link to="/#contact">
-            <button className="btn btn-light btn-lg px-4">
-              Contact Us
-            </button>
-          </Link>
+            <Link to="/#contact">
+              <button className="btn btn-light btn-lg px-4">Contact Us</button>
+            </Link>
           </div>
         </div>
       </section>
diff --git a/src/app/team.tsx b/src/app/team.tsx
index 6d94d56..9dd5feb 100644
--- a/src/app/team.tsx
+++ b/src/app/team.tsx
@@ -1,16 +1,15 @@
-import { useState } from 'react';
+import { useState } from "react";
 import "../styles/team.css";
-import drSudarshan from '/images/dr-sudarshan2.png';
-import sakshi from '/images/sakshi-sharma2.jpg';
-import meenakshi from '/images/meenakshi2.png';
-import rohit from '/images/rohit-sharma.jpg';
-import aditya from '/images/aditya2.jpeg';
-import shivani from '/images/shivani-aggarwal2.png';
-import rajan from '/images/rajan.png';
-import { Navbar } from "../components/navbar";
+import drSudarshan from "/images/dr-sudarshan2.png";
+import sakshi from "/images/sakshi-sharma2.jpg";
+import meenakshi from "/images/meenakshi2.png";
+import rohit from "/images/rohit-sharma.jpg";
+import aditya from "/images/aditya2.jpeg";
+import shivani from "/images/shivani-aggarwal2.png";
+import rajan from "/images/rajan.png";
 
 const Team = () => {
-  const [activeFilter, setActiveFilter] = useState('all');
+  const [activeFilter, setActiveFilter] = useState("all");
   const [selectedMember, setSelectedMember] = useState<null | {
     id: number;
     name: string;
@@ -27,107 +26,123 @@ const Team = () => {
   const teamMembers = [
     {
       id: 1,
-      name: 'Dr. Sudarshan Iyengar',
-      role: 'Principal Investigator',
-      department: 'Computer Science',
-      bio: 'A faculty member in the CSE Department at IIT Ropar, who currently serves as Director of Annam.AI- a major Center of Excellence in Artificial Intelligence at IIT Ropar. As a PhD graduate from IISc, he is known for his engaging approach to technical education, delivering over 400 science talks, conducting 120+ Faculty Development Programs, and creating online courses that have reached more than 900,000 students. His SWAYAM course, The Joy of Computing, consistently ranks first in enrollments. He leads the Minor in AI initiative, aiming to train one million students, and heads the Education Design Lab at IIT Ropar. Dr. Sudarshan also coordinates the Prime Minister Research Fellowship and PM SHRI programs, and is a founding faculty member of the IIT Madras BS Programme. He has graduated 10 PhD students, currently supervises five more, and focuses his research on AI for Social Good and Education Design. Beyond academia, he is a homeschooling father of two and an avid reader, committed to making education inspiring and accessible.',
-      research: 'Adaptive learning systems, Educational data mining',
+      name: "Dr. Sudarshan Iyengar",
+      role: "Principal Investigator",
+      department: "Computer Science",
+      bio: "A faculty member in the CSE Department at IIT Ropar, who currently serves as Director of Annam.AI- a major Center of Excellence in Artificial Intelligence at IIT Ropar. As a PhD graduate from IISc, he is known for his engaging approach to technical education, delivering over 400 science talks, conducting 120+ Faculty Development Programs, and creating online courses that have reached more than 900,000 students. His SWAYAM course, The Joy of Computing, consistently ranks first in enrollments. He leads the Minor in AI initiative, aiming to train one million students, and heads the Education Design Lab at IIT Ropar. Dr. Sudarshan also coordinates the Prime Minister Research Fellowship and PM SHRI programs, and is a founding faculty member of the IIT Madras BS Programme. He has graduated 10 PhD students, currently supervises five more, and focuses his research on AI for Social Good and Education Design. Beyond academia, he is a homeschooling father of two and an avid reader, committed to making education inspiring and accessible.",
+      research: "Adaptive learning systems, Educational data mining",
       img: drSudarshan,
-      category: 'faculty',
-      linkedin:'https://www.linkedin.com/in/sudarshan-iyengar-3560b8145/',
-      email: 'sudarshan@iitrpr.ac.in'
+      category: "faculty",
+      linkedin: "https://www.linkedin.com/in/sudarshan-iyengar-3560b8145/",
+      email: "sudarshan@iitrpr.ac.in",
     },
     {
       id: 2,
-      name: 'Sakshi Sharma',
-      role: 'PhD Researcher',
-      department: 'Computer Science',
-      bio: 'An educator and research scholar at DLED Lab, IIT Ropar. My work centers around education design, integrating technology and innovation to create impactful learning experiences.',
-      research: 'DDD, ViBe, PES, Poll Automation, ',
+      name: "Sakshi Sharma",
+      role: "PhD Researcher",
+      department: "Computer Science",
+      bio: "An educator and research scholar at DLED Lab, IIT Ropar. My work centers around education design, integrating technology and innovation to create impactful learning experiences.",
+      research: "DDD, ViBe, PES, Poll Automation, ",
       img: sakshi,
-      category: 'students',
-      linkedin:'https://www.linkedin.com/in/sakshivk/',
-      email: 'sakshi.sharma@vicharanashala.ai'
+      category: "students",
+      linkedin: "https://www.linkedin.com/in/sakshivk/",
+      email: "sakshi.sharma@vicharanashala.ai",
     },
     {
       id: 3,
-      name: 'Meenakshi V',
-      role: 'PhD Researcher',
-      department: 'Computer Science',
-      bio: 'A passionate educator and researcher in Education Design at the DLED Lab  with a research journey focused on crafting engaging learning experiences that dissolve the boundary between learning and assessment—envisioning guided learning that makes final exams obsolete. Part of Annam.AI’s AI Skill Development initiative, working to bridge academia and career aspirations.',
-      research: 'ViBe/CAL, Poll Automation',
+      name: "Meenakshi V",
+      role: "PhD Researcher",
+      department: "Computer Science",
+      bio: "A passionate educator and researcher in Education Design at the DLED Lab  with a research journey focused on crafting engaging learning experiences that dissolve the boundary between learning and assessment—envisioning guided learning that makes final exams obsolete. Part of Annam.AI’s AI Skill Development initiative, working to bridge academia and career aspirations.",
+      research: "ViBe/CAL, Poll Automation",
       img: meenakshi,
-      category: 'students',
-      linkedin:'https://www.linkedin.com/in/meenakshi-v-25aa7691/',
-      email: 'meenakshi.v@vicharanashala.ai'
+      category: "students",
+      linkedin: "https://www.linkedin.com/in/meenakshi-v-25aa7691/",
+      email: "meenakshi.v@vicharanashala.ai",
     },
     {
       id: 4,
-      name: 'Rohit Sharma',
-      role: 'PhD Researcher',
-      department: 'Computer Science',
-      bio: 'A research scholar focused on integrating artificial intelligence into education to enhance teaching and learning experiences. Through my research and development efforts, I strive to create impactful tools that promote meaningful and effective learning.',
-      research: 'PES, Poll Automation',
+      name: "Rohit Sharma",
+      role: "PhD Researcher",
+      department: "Computer Science",
+      bio: "A research scholar focused on integrating artificial intelligence into education to enhance teaching and learning experiences. Through my research and development efforts, I strive to create impactful tools that promote meaningful and effective learning.",
+      research: "PES, Poll Automation",
       img: rohit,
-      category: 'students',
-      linkedin:'https://www.linkedin.com/in/imrohitvk/',
-      email: 'sudarshan@iitrpr.ac.in'
+      category: "students",
+      linkedin: "https://www.linkedin.com/in/imrohitvk/",
+      email: "sudarshan@iitrpr.ac.in",
     },
     {
       id: 5,
-      name: 'Shivani Aggarwal',
-      role: 'PhD Researcher',
-      department: 'Computer Science',
-      bio: 'Investigating the impact of AI tutors on student engagement and learning outcomes.',
-      research: 'AI in education, Student engagement',
+      name: "Shivani Aggarwal",
+      role: "PhD Researcher",
+      department: "Computer Science",
+      bio: "Investigating the impact of AI tutors on student engagement and learning outcomes.",
+      research: "AI in education, Student engagement",
       img: shivani,
-      category: 'students',
-      linkedin:'https://www.linkedin.com/in/shivani-aggarwal-5865b639/',
-      email: 'shivani.aggarwal@vicharanashala.ai'
+      category: "students",
+      linkedin: "https://www.linkedin.com/in/shivani-aggarwal-5865b639/",
+      email: "shivani.aggarwal@vicharanashala.ai",
     },
     {
       id: 6,
-      name: 'Aditya BMV',
-      role: 'Software Developer',
-      bio: 'Software engineer with a passion for creating user-friendly educational applications and tools.',
-      research: 'ViBe/CAL',
+      name: "Aditya BMV",
+      role: "Software Developer",
+      bio: "Software engineer with a passion for creating user-friendly educational applications and tools.",
+      research: "ViBe/CAL",
       img: aditya,
-      category: 'staff',
-      linkedin:'https://www.linkedin.com/in/bvmukunda/',
-      email: 'aditya.bmv@vicharanashala.ai'
+      category: "staff",
+      linkedin: "https://www.linkedin.com/in/bvmukunda/",
+      email: "aditya.bmv@vicharanashala.ai",
     },
     {
       id: 7,
-      name: 'Rajan Gupta',
-      role: 'Software Developer',
-      bio: 'Weaving technology, education, and collaboration into transformative initiatives. Passionate about storytelling and upskilling, driving scalable impact for communities.',
-      research: 'ViBe/CAL',
+      name: "Rajan Gupta",
+      role: "Software Developer",
+      bio: "Weaving technology, education, and collaboration into transformative initiatives. Passionate about storytelling and upskilling, driving scalable impact for communities.",
+      research: "ViBe/CAL",
       img: rajan,
-      category: 'staff',
-      linkedin:'https://www.linkedin.com/in/rajankrsna/',
-      email: 'rajan.gupta@vicharanashala.ai'
-    }
+      category: "staff",
+      linkedin: "https://www.linkedin.com/in/rajankrsna/",
+      email: "rajan.gupta@vicharanashala.ai",
+    },
   ];
 
-  const filteredMembers = activeFilter === 'all' 
-    ? teamMembers 
-    : teamMembers.filter(member => member.category === activeFilter);
-
+  const filteredMembers =
+    activeFilter === "all"
+      ? teamMembers
+      : teamMembers.filter((member) => member.category === activeFilter);
 
   return (
     <div className="people-page">
-      <Navbar />
       {/* Hero Section*/}
       {/* Hero Section */}
-      <section className="hero-section text-white py-6" style ={{ background: 'linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 75%)' }}>
+      <section
+        className="hero-section text-white py-6"
+        style={{
+          background:
+            "linear-gradient(130deg,rgb(253, 232, 224) 0%,rgb(253, 249, 247) 75%)",
+        }}
+      >
         <div className="container">
           <div className="row align-items-center">
-            <div className="col-lg-6" style = {{marginTop:'20px'}} >
-              <h1 className="display-4 fw-bold text-dark mb-4 mt-3"> Our People</h1>
+            <div className="col-lg-6" style={{ marginTop: "20px" }}>
+              <h1 className="display-4 fw-bold text-dark mb-4 mt-3">
+                {" "}
+                Our People
+              </h1>
               <p className="lead mb-4 fs-4 text-secondary">
-                Meet the brilliant minds behind Dhananjaya Lab's innovative research and educational designs
+                Meet the brilliant minds behind Dhananjaya Lab's innovative
+                research and educational designs
               </p>
-              <a href="#team" className="btn btn-lg px-4 text-light dark-button" style= {{ backgroundColor: 'rgb(233, 103, 52)', borderColor: 'rgb(233, 103, 52)' }}>
+              <a
+                href="#team"
+                className="btn btn-lg px-4 text-light dark-button"
+                style={{
+                  backgroundColor: "rgb(233, 103, 52)",
+                  borderColor: "rgb(233, 103, 52)",
+                }}
+              >
                 Explore the Team
               </a>
             </div>
@@ -157,27 +172,41 @@ const Team = () => {
           </div>
 
           <div className="filter-buttons d-flex justify-content-center flex-wrap gap-3 mb-5">
-            <button 
-              className={`btn fw-semibold ${activeFilter === 'all' ? 'btn-secondary' : 'btn-outline-warning'}`}
-              onClick={() => setActiveFilter('all')}
+            <button
+              className={`btn fw-semibold ${
+                activeFilter === "all" ? "btn-secondary" : "btn-outline-warning"
+              }`}
+              onClick={() => setActiveFilter("all")}
             >
               All Members
             </button>
-            <button 
-              className={`btn fw-semibold ${activeFilter === 'faculty' ? 'btn-secondary' : 'btn-outline-warning'}`}
-              onClick={() => setActiveFilter('faculty')}
+            <button
+              className={`btn fw-semibold ${
+                activeFilter === "faculty"
+                  ? "btn-secondary"
+                  : "btn-outline-warning"
+              }`}
+              onClick={() => setActiveFilter("faculty")}
             >
               Faculty
             </button>
-            <button 
-              className={`btn fw-semibold ${activeFilter === 'staff' ? 'btn-secondary' : 'btn-outline-warning'}`}
-              onClick={() => setActiveFilter('staff')}
+            <button
+              className={`btn fw-semibold ${
+                activeFilter === "staff"
+                  ? "btn-secondary"
+                  : "btn-outline-warning"
+              }`}
+              onClick={() => setActiveFilter("staff")}
             >
               Staff
             </button>
-            <button 
-              className={`btn fw-semibold ${activeFilter === 'students' ? 'btn-secondary' : 'btn-outline-warning'}`}
-              onClick={() => setActiveFilter('students')}
+            <button
+              className={`btn fw-semibold ${
+                activeFilter === "students"
+                  ? "btn-secondary"
+                  : "btn-outline-warning"
+              }`}
+              onClick={() => setActiveFilter("students")}
             >
               Students
             </button>
@@ -185,15 +214,19 @@ const Team = () => {
 
           {/* Team Grid */}
           <div className="row g-4">
-            {filteredMembers.map(member => (
+            {filteredMembers.map((member) => (
               <div key={member.id} className="col-lg-4 col-md-6">
-                <div 
+                <div
                   className="team-member-card shadow-sm rounded-4 overflow-hidden h-100 cursor-pointer"
                   onClick={() => setSelectedMember(member)}
                 >
                   <div className="team-member-img position-relative">
-                    <img src={member.img} alt={member.name} className="img-fluid w-50" />
-                    
+                    <img
+                      src={member.img}
+                      alt={member.name}
+                      className="img-fluid w-50"
+                    />
+
                     {/* Conditionally render department badge */}
                     {member.department && (
                       <div className="member-badge bg-primary-subtle text-dark fw-semibold px-3 py-1 rounded-pill position-absolute">
@@ -201,17 +234,24 @@ const Team = () => {
                       </div>
                     )}
                   </div>
-                  
+
                   <div className="p-4">
                     <h4 className="fw-bold mb-1">{member.name}</h4>
                     <p className="text-primary mb-2">{member.role}</p>
-                    <p className="text-muted mb-0">{member.bio.substring(0, 100)}...</p>
-                    
+                    <p className="text-muted mb-0">
+                      {member.bio.substring(0, 100)}...
+                    </p>
+
                     {/* Conditionally render research topics */}
                     {member.research && (
                       <div className="mt-3">
-                        {member.research.split(', ').map((topic, i) => (
-                          <span key={i} className="badge bg-primary-subtle text-dark me-2 mb-1">{topic}</span>
+                        {member.research.split(", ").map((topic, i) => (
+                          <span
+                            key={i}
+                            className="badge bg-primary-subtle text-dark me-2 mb-1"
+                          >
+                            {topic}
+                          </span>
                         ))}
                       </div>
                     )}
@@ -221,39 +261,50 @@ const Team = () => {
             ))}
           </div>
         </div>
-        </section>
-
+      </section>
 
       {/* Member Modal */}
       {selectedMember && (
-        <div className="modal fade show d-block" tabIndex={-1} style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+        <div
+          className="modal fade show d-block"
+          tabIndex={-1}
+          style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+        >
           <div className="modal-dialog modal-lg modal-dialog-centered">
             <div className="modal-content rounded-4 overflow-hidden">
               <div className="modal-header border-0">
                 <h5 className="modal-title fw-bold">{selectedMember.name}</h5>
-                <button 
-                  type="button" 
-                  className="btn-close" 
-                  title="Close" 
+                <button
+                  type="button"
+                  className="btn-close"
+                  title="Close"
                   onClick={() => setSelectedMember(null)}
                 ></button>
               </div>
               <div className="modal-body">
                 <div className="row">
                   <div className="col-md-4">
-                    <img 
-                      src={selectedMember.img} 
-                      alt={selectedMember.name} 
+                    <img
+                      src={selectedMember.img}
+                      alt={selectedMember.name}
                       className="img-fluid rounded-3 mb-3"
                     />
                     <div className="d-flex gap-2 justify-content-center mb-3">
                       {selectedMember.linkedin && (
-                        <a href={selectedMember.linkedin} className="btn btn-sm btn-outline-primary rounded-circle" target="_blank" rel="noopener noreferrer">
+                        <a
+                          href={selectedMember.linkedin}
+                          className="btn btn-sm btn-outline-primary rounded-circle"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
                           <i className="fab fa-linkedin-in"></i>
                         </a>
                       )}
                       {selectedMember.email && (
-                        <a href={`mailto:${selectedMember.email}`} className="btn btn-sm btn-outline-primary rounded-circle">
+                        <a
+                          href={`mailto:${selectedMember.email}`}
+                          className="btn btn-sm btn-outline-primary rounded-circle"
+                        >
                           <i className="fas fa-envelope"></i>
                         </a>
                       )}
@@ -262,16 +313,19 @@ const Team = () => {
                   <div className="col-md-8">
                     <h6 className="text-primary mb-2">{selectedMember.role}</h6>
                     <p className="mb-4">{selectedMember.bio}</p>
-                    
+
                     <h6 className="fw-bold mt-4">Research Interests</h6>
                     <div className="mb-4">
-                      {selectedMember.research.split(', ').map((topic, i) => (
-                        <span key={i} className="badge bg-primary-subtle text-dark bg-opacity-10 me-1 mb-1">
+                      {selectedMember.research.split(", ").map((topic, i) => (
+                        <span
+                          key={i}
+                          className="badge bg-primary-subtle text-dark bg-opacity-10 me-1 mb-1"
+                        >
                           {topic}
                         </span>
                       ))}
                     </div>
-                    
+
                     {/*
                     <h6 className="fw-bold">Recent Publications</h6>
                     <ul className="list-unstyled">
@@ -289,14 +343,13 @@ const Team = () => {
                       </li>
                     </ul>
                     */}
-
                   </div>
                 </div>
               </div>
               <div className="modal-footer border-0">
-                <button 
-                  type="button" 
-                  className="btn btn-secondary" 
+                <button
+                  type="button"
+                  className="btn btn-secondary"
                   onClick={() => setSelectedMember(null)}
                 >
                   Close
@@ -307,7 +360,6 @@ const Team = () => {
                   Contact {selectedMember.name.split(' ')[0]}
                 </a>
                 */}
-
               </div>
             </div>
           </div>
@@ -329,26 +381,29 @@ const Team = () => {
           <div className="row g-4">
             {[
               {
-                name: 'Sakiley Pranaydeep ',
-                role: 'LLM Research Intern (IIT Madras)',
-                period: '2024-2025'
+                name: "Sakiley Pranaydeep ",
+                role: "LLM Research Intern (IIT Madras)",
+                period: "2024-2025",
               },
               {
-                name: 'Neeraj Rajeev Shetkar',
-                role: 'M.S in CS (University of Sydney)',
-                period: '2024-2025'
+                name: "Neeraj Rajeev Shetkar",
+                role: "M.S in CS (University of Sydney)",
+                period: "2024-2025",
               },
               {
-                name: 'Akash Kumar',
-                role: 'Full Stack Developer (Startup)',
-                period: '2024-2025'
-              }
+                name: "Akash Kumar",
+                role: "Full Stack Developer (Startup)",
+                period: "2024-2025",
+              },
             ].map((alum, index) => (
               <div key={index} className="col-md-4">
                 <div className="alumni-card p-4 rounded-3 shadow-sm h-100">
                   <div className="d-flex align-items-center mb-3">
                     <div className="alumni-avatar bg-primary bg-opacity-10 text-secondary rounded-circle me-3">
-                      {alum.name.split(' ').map(n => n[0]).join('')}
+                      {alum.name
+                        .split(" ")
+                        .map((n) => n[0])
+                        .join("")}
                     </div>
                     <div>
                       <h5 className="fw-bold mb-0">{alum.name}</h5>
@@ -362,15 +417,17 @@ const Team = () => {
           </div>
 
           <div className="text-center mt-5">
-             <a href="/comingsoon" className="btn btn-outline-warning mb-4 fw-bold">
+            <a
+              href="/comingsoon"
+              className="btn btn-outline-warning mb-4 fw-bold"
+            >
               View Full Alumni List <i className="fas fa-arrow-right ms-2"></i>
             </a>
           </div>
-
         </div>
       </section>
     </div>
   );
 };
 
-export default Team;
\ No newline at end of file
+export default Team;
diff --git a/src/components/FooterFile.tsx b/src/components/FooterFile.tsx
index e9ee459..c66b74f 100644
--- a/src/components/FooterFile.tsx
+++ b/src/components/FooterFile.tsx
@@ -1,45 +1,45 @@
 import "../styles/footerFile.css";
-import { Link } from 'react-router-dom';
-import { FaLinkedin, FaYoutube, FaMapMarkerAlt, FaEnvelope } from 'react-icons/fa';
-import logo from '../assets/dled-clear.png';
+import { Link } from "react-router-dom";
+import {
+  FaLinkedin,
+  FaYoutube,
+  FaMapMarkerAlt,
+  FaEnvelope,
+} from "react-icons/fa";
+import logo from "../assets/dled-clear.png";
 
 export const FooterWrapper = () => {
   return (
     <footer className="footer">
       <div className="footer-content">
-        
         {/* Main Footer Grid */}
         <div className="footer-grid">
-          
           {/* About Section */}
           <div className="footer-section footer-about">
-            <img 
-              className="footer-logo" 
-              src={logo}
-              alt="DLED Logo"
-            />
+            <img className="footer-logo" src={logo} alt="DLED Logo" />
             <p className="footer-description">
-              The Dhananjaya Lab for Education Design (DLED) at IIT Ropar is pioneering 
-              transformative approaches to learning in the digital age.
+              The Dhananjaya Lab for Education Design (DLED) at IIT Ropar is
+              pioneering transformative approaches to learning in the digital
+              age.
             </p>
             <div className="footer-social">
               <a
-              href="https://www.linkedin.com/company/educationdesignlab/posts/?feedView=all"
-              className="social-link"
-              aria-label="LinkedIn"
-              target="_blank"
-              rel="noopener noreferrer"
+                href="https://www.linkedin.com/company/educationdesignlab/posts/?feedView=all"
+                className="social-link"
+                aria-label="LinkedIn"
+                target="_blank"
+                rel="noopener noreferrer"
               >
-              <FaLinkedin />
+                <FaLinkedin />
               </a>
               <a
-              href="https://youtube.com/@dledlabs?si=zFC1fmeqjkFCRY8Y"
-              className="social-link"
-              aria-label="YouTube"
-              target="_blank"
-              rel="noopener noreferrer"
+                href="https://youtube.com/@dledlabs?si=zFC1fmeqjkFCRY8Y"
+                className="social-link"
+                aria-label="YouTube"
+                target="_blank"
+                rel="noopener noreferrer"
               >
-              <FaYoutube />
+                <FaYoutube />
               </a>
             </div>
           </div>
@@ -48,11 +48,21 @@ export const FooterWrapper = () => {
           <div className="footer-section">
             <h3>Quick Links</h3>
             <ul className="footer-links">
-              <li><Link to="/about">About Us</Link></li>
-              <li><Link to="/research">Research</Link></li>
-              <li><Link to="/team">Our Team</Link></li>
-              <li><Link to="/events">Events</Link></li>
-              <li><Link to="/collaborations">Collaborations</Link></li>
+              <li>
+                <Link to="/about">About Us</Link>
+              </li>
+              <li>
+                <Link to="/research">Research</Link>
+              </li>
+              <li>
+                <Link to="/team">Our Team</Link>
+              </li>
+              <li>
+                <Link to="/events">Events</Link>
+              </li>
+              <li>
+                <Link to="/collaborations">Collaborations</Link>
+              </li>
             </ul>
           </div>
 
@@ -60,8 +70,12 @@ export const FooterWrapper = () => {
           <div className="footer-section">
             <h3>Resources</h3>
             <ul className="footer-links">
-              <li><Link to="/comingsoon">Blogs</Link></li>
-              <li><Link to="/careers">Careers</Link></li>
+              <li>
+                <Link to="/comingsoon">Blogs</Link>
+              </li>
+              <li>
+                <Link to="/careers">Careers</Link>
+              </li>
             </ul>
           </div>
 
@@ -85,7 +99,6 @@ export const FooterWrapper = () => {
               </div>
             </div>
           </div>
-
         </div>
 
         {/* Footer Bottom */}
@@ -98,8 +111,7 @@ export const FooterWrapper = () => {
             </div>
           </div>
         </div>
-
       </div>
     </footer>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index b55124e..893fc4a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,40 +1,41 @@
-import React from 'react';
-import { FaChevronDown } from 'react-icons/fa';
-import '../styles/header.css';
-import { TypedText } from './TypedText';
-import { ImageCarousel } from './ImageCarousel';
+import React from "react";
+import { FaChevronDown } from "react-icons/fa";
+import "../styles/header.css";
+import { TypedText } from "./TypedText";
+import { ImageCarousel } from "./ImageCarousel";
 
 // Sample images for the carousel
 const carouselImages = [
-  {src: "/images/lab/lab3.jpg",
+  {
+    src: "/images/lab/lab3.jpg",
     alt: "Lab Images",
     title: "Collaborative Learning",
-    description: "A space designed for collaborative learning and innovation"
+    description: "A space designed for collaborative learning and innovation",
   },
   {
     src: "/images/lab/lab1.jpeg",
     alt: "Lab Images",
     title: "Vicharanashala",
-    description: "A place where ideas are born and nurtured"
+    description: "A place where ideas are born and nurtured",
   },
   {
     src: "/images/lab/lab4.jpg",
     alt: "Lab Images",
     title: "Work is Meditation",
-    description: "A serene environment where work becomes a form of meditation"
+    description: "A serene environment where work becomes a form of meditation",
   },
-  {
-    src: "/images/lab/lab2.jpeg",
-    alt: "Lab Images",
-    title: "Innovation Garage",
-    description: "A place where ideas are transformed into reality"
-  }
+  // {
+  //   src: "/images/lab/lab2.jpeg",
+  //   alt: "Lab Images",
+  //   title: "Innovation Garage",
+  //   description: "A place where ideas are transformed into reality"
+  // }
 ];
 
-export const Header: React.FC<{ onLearnMore?: () => void; onContact?: () => void }> = ({
-  onLearnMore,
-  onContact,
-}) => (
+export const Header: React.FC<{
+  onLearnMore?: () => void;
+  onContact?: () => void;
+}> = ({ onLearnMore, onContact }) => (
   <div className="header">
     <div className="content hero-flex">
       <div className="hero-text">
@@ -43,8 +44,8 @@ export const Header: React.FC<{ onLearnMore?: () => void; onContact?: () => void
           <TypedText text="Redefining Education Through Innovation" />
         </h1>
         <p className="description">
-          The Dhananjaya Lab for Education Design (DLED) at IIT Ropar is pioneering
-          transformative approaches to learning in the digital age.
+          The Dhananjaya Lab for Education Design (DLED) at IIT Ropar is
+          pioneering transformative approaches to learning in the digital age.
         </p>
         <div className="cta-buttons">
           <button className="btn-black" onClick={onLearnMore}>
@@ -56,7 +57,7 @@ export const Header: React.FC<{ onLearnMore?: () => void; onContact?: () => void
         </div>
       </div>
       <div className="image-group">
-        <ImageCarousel 
+        <ImageCarousel
           images={carouselImages}
           autoSlide={true}
           slideInterval={6000}
@@ -68,14 +69,14 @@ export const Header: React.FC<{ onLearnMore?: () => void; onContact?: () => void
     <div
       className="scroll-indicator pointer-cursor"
       onClick={() => {
-      const el = document.getElementById('research-initiatives');
-      if (el) {
-        el.scrollIntoView({ behavior: 'smooth' });
-      }
+        const el = document.getElementById("research-initiatives");
+        if (el) {
+          el.scrollIntoView({ behavior: "smooth" });
+        }
       }}
     >
       <div className="scroll-text">Discover More</div>
       <FaChevronDown className="scroll-arrow" />
     </div>
   </div>
-);
\ No newline at end of file
+);
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index be86fde..a5f8c55 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,7 +1,7 @@
-import { Link } from 'react-router-dom';
-import React, { useState } from 'react';
+import { Link } from "react-router-dom";
+import React, { useState } from "react";
 import "../styles/header.css";
-import logo from '../assets/dled-iit-clear.png';
+import logo from "../assets/dled-iit-clear.png";
 
 export const Navbar: React.FC = () => {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -10,19 +10,35 @@ export const Navbar: React.FC = () => {
 
   return (
     <header className="navbar">
-      <div className="bg-top"></div>
-      <div className="bg-bottom"></div>
       <div className="header-top">
-        <Link to="/">
+        <Link to="/" className="logo-container">
           <img src={logo} alt="DLED and IIT Logos" className="header-logo" />
         </Link>
+
+        <button
+          className="menu-icon"
+          aria-label="Menu"
+          aria-expanded={menuOpen}
+          onClick={() => setMenuOpen(!menuOpen)}
+        ></button>
+
         <nav className="nav-bar">
           <div className="nav-links">
-            <Link to="/research" className="nav-text">Research</Link>
-            <Link to="/team" className="nav-text">Team</Link>
-            <Link to="/events" className="nav-text">Events</Link>
-            <Link to="/careers" className="nav-text">Careers</Link>
-            <Link to="/comingsoon" className="nav-text">Blog</Link>
+            <Link to="/research" className="nav-text">
+              Research
+            </Link>
+            <Link to="/team" className="nav-text">
+              Team
+            </Link>
+            <Link to="/events" className="nav-text">
+              Events
+            </Link>
+            <Link to="/careers" className="nav-text">
+              Careers
+            </Link>
+            <Link to="/comingsoon" className="nav-text">
+              Blog
+            </Link>
           </div>
           <Link to="/collaborations">
             <button className="nav-button">
@@ -31,20 +47,33 @@ export const Navbar: React.FC = () => {
           </Link>
         </nav>
       </div>
-      <button
-        className="menu-icon"
-        aria-label="Menu"
-        aria-expanded={menuOpen}
-        onClick={() => setMenuOpen(!menuOpen)}
-      ></button>
+
       {menuOpen && (
         <nav className="mobile-nav-dropdown">
-          <Link to="/research" className="nav-text" onClick={handleNavLinkClick}>Research</Link>
-          <Link to="/team" className="nav-text" onClick={handleNavLinkClick}>Team</Link>
-          <Link to="/events" className="nav-text" onClick={handleNavLinkClick}>Events</Link>
-          <Link to="/careers" className="nav-text" onClick={handleNavLinkClick}>Careers</Link>
-          <Link to="/comingsoon" className="nav-text" onClick={handleNavLinkClick}>Blog</Link>
-          <Link to="/collaborations">
+          <Link
+            to="/research"
+            className="nav-text"
+            onClick={handleNavLinkClick}
+          >
+            Research
+          </Link>
+          <Link to="/team" className="nav-text" onClick={handleNavLinkClick}>
+            Team
+          </Link>
+          <Link to="/events" className="nav-text" onClick={handleNavLinkClick}>
+            Events
+          </Link>
+          <Link to="/careers" className="nav-text" onClick={handleNavLinkClick}>
+            Careers
+          </Link>
+          <Link
+            to="/comingsoon"
+            className="nav-text"
+            onClick={handleNavLinkClick}
+          >
+            Blog
+          </Link>
+          <Link to="/collaborations" onClick={handleNavLinkClick}>
             <button className="nav-button">
               <span className="nav-button-text">Collaborations</span>
             </button>
@@ -53,4 +82,4 @@ export const Navbar: React.FC = () => {
       )}
     </header>
   );
-};
\ No newline at end of file
+};
diff --git a/src/styles/header.css b/src/styles/header.css
index b24f694..f5e66b7 100644
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -1,18 +1,24 @@
-body, html {
+body,
+html {
   overflow-x: hidden;
 }
 
 /* ===== Base Styles ===== */
 .navbar {
-  position: fixed;
+  position: fixed !important;
   top: 0;
   left: 0;
-  max-width: 100%;
+  width: 100vw;
+  max-width: 100vw;
   z-index: 1000;
-  background: linear-gradient(130deg, rgb(253, 232, 224) 0%, rgb(253, 249, 247) 85%);
-  /* background-color: rgb(219, 244, 250); */
+  background: linear-gradient(
+    130deg,
+    rgb(253, 232, 224) 0%,
+    rgb(253, 249, 247) 85%
+  );
   padding: 24px 40px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  display: flex;
 }
 
 .header {
@@ -142,7 +148,7 @@ body, html {
 }
 
 .vibe-button::before {
-  content: '';
+  content: "";
   position: absolute;
   top: -2px;
   left: -2px;
@@ -168,7 +174,7 @@ body, html {
 .vibe-button .nav-button-text {
   color: white !important;
   font-weight: 600;
-  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 @keyframes pulse-glow {
@@ -209,7 +215,11 @@ body, html {
 }
 
 @keyframes bounce {
-  0%, 20%, 50%, 80%, 100% {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
     transform: translateX(-50%) translateY(0);
   }
   40% {
@@ -267,8 +277,14 @@ body, html {
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(-20px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* ===== Hero Content ===== */
@@ -322,7 +338,7 @@ body, html {
 
 .letter {
   display: inline-block;
-  transition: transform 0.3s cubic-bezier(.4,2,.6,1);
+  transition: transform 0.3s cubic-bezier(0.4, 2, 0.6, 1);
   cursor: pointer;
 }
 
@@ -348,7 +364,8 @@ body, html {
   margin: 32px 0 0 0;
 }
 
-.btn-black, .btn-outline {
+.btn-black,
+.btn-outline {
   font-family: "Manrope", Helvetica, sans-serif;
   font-size: 18px;
   font-weight: 600;
@@ -361,14 +378,14 @@ body, html {
 .btn-black {
   background-color: #000;
   color: #f9f08d;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
   border: none;
 }
 
 .btn-black:hover {
   background-color: #222;
   color: #ffe066;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
   transform: translateY(-1px);
 }
 
@@ -412,7 +429,7 @@ body, html {
   height: auto;
   border-radius: 5%;
   object-fit: cover;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
 }
 
 /* ===== Responsive Styles ===== */
@@ -421,7 +438,7 @@ body, html {
     font-size: 60px;
     line-height: 70px;
   }
-  
+
   .nav-links {
     gap: 20px;
   }
@@ -443,26 +460,26 @@ body, html {
   .navbar {
     padding: 15px 20px;
   }
-  
+
   .header {
     padding-top: 40px; /* Reduced for mobile to bring content up */
     height: auto;
     min-height: 80vh; /* Adjusted for mobile */
   }
-  
+
   .bg-top {
     height: 60%;
   }
-  
+
   .nav-bar {
     display: none;
   }
-  
+
   .menu-icon {
     display: block;
     margin-left: 30px;
   }
-  
+
   .header-top {
     padding: 0 20px;
   }
@@ -472,17 +489,18 @@ body, html {
     gap: 40px;
     min-height: 50vh; /* Reduced to make scroll indicator more visible on mobile */
   }
-  
+
   .title {
     font-size: 48px;
     line-height: 56px;
     margin-top: 30px;
   }
-  
-  .hero-text, .image-group {
+
+  .hero-text,
+  .image-group {
     max-width: 100%;
   }
-  
+
   .image-group {
     margin-top: 40px;
   }
@@ -498,20 +516,20 @@ body, html {
     line-height: 44px;
     letter-spacing: 0.7px;
   }
-  
+
   .description {
     font-size: 16px;
     line-height: 28px;
   }
-  
+
   .cta-buttons {
     flex-direction: column;
   }
-  
+
   .nav-button {
     padding: 8px 16px;
   }
-  
+
   .mobile-nav-dropdown .nav-text {
     font-size: 20px;
   }
@@ -519,4 +537,4 @@ body, html {
   .image-group .carousel-container {
     height: 250px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/utils/eventUtils.ts b/src/utils/eventUtils.ts
index 65c1c48..d69b3f0 100644
--- a/src/utils/eventUtils.ts
+++ b/src/utils/eventUtils.ts
@@ -17,77 +17,79 @@ export interface Event {
 export const allEvents: Event[] = [
   {
     id: 1,
-    title: 'ViBe Launch',
-    date: 'July 29, 2025',
-    time: '11:00 AM - 12:00 PM',
-    location: 'Virtual Event',
-    description: 'Launch of ViBe, a wave of revolutionary educational tools for teachers and students.',
-    image: '/images/events/vibe.jpg',
-    category: 'Product Launch',
-    status: 'upcoming',
-    speakers: ['Dr. Sudarshan Iyengar', 'DLED Research Team'],
-    link: 'https://zoom.us/j/94299775769?pwd=c6VakDdjWeE8t97eGrORYWAgns9aPy.1'
+    title: "ViBe Launch",
+    date: "July 29, 2025",
+    time: "11:00 AM - 12:00 PM",
+    location: "Virtual Event",
+    description:
+      "Launch of ViBe, a wave of revolutionary educational tools for teachers and students.",
+    image: "/images/events/vibe.jpg",
+    category: "Product Launch",
+    status: "upcoming",
+    speakers: ["Dr. Sudarshan Iyengar", "DLED Research Team"],
+    link: "https://zoom.us/j/94299775769?pwd=c6VakDdjWeE8t97eGrORYWAgns9aPy.1",
   },
   {
-    id:2,
-    title: 'Guru Purnima Meetup',
-    date: 'July 10, 2025',
-    time: '8:00 PM - 9:00 PM',
-    location: 'Virtual Event',
-    description: 'A special online gathering to celebrate Guru Purnima.',
-    image: '/images/events/gurupurnima.png',
-    category: '',
-    speakers: [''],
-    status: 'upcoming',
-    link: 'https://zoom.us/j/98466227317?pwd=CaF207puvMhgbtnAvmNRhNYUvPLgqZ.1'
-  }
+    id: 2,
+    title: "Guru Purnima Meetup",
+    date: "July 10, 2025",
+    time: "8:00 PM - 9:00 PM",
+    location: "Virtual Event",
+    description: "A special online gathering to celebrate Guru Purnima.",
+    image: "/images/events/gurupurnima.png",
+    category: "",
+    speakers: [""],
+    status: "past",
+    link: "https://zoom.us/j/98466227317?pwd=CaF207puvMhgbtnAvmNRhNYUvPLgqZ.1",
+  },
 ];
 
 // Default event for when no upcoming events exist
 export const defaultEvent: Event = {
   id: 0,
-  title: 'Stay Tuned for Upcoming Events',
-  date: 'Coming Soon',
-  time: 'TBD',
-  location: 'To be announced',
-  description: 'We are working on exciting new events. Follow our updates to stay informed about upcoming workshops, launches, and educational initiatives.',
-  image: '/images/events/vibe.png',
-  category: 'Announcement',
-  status: 'upcoming',
-  speakers: ['DLED Team'],
-  link: '#'
+  title: "Stay Tuned for Upcoming Events",
+  date: "Coming Soon",
+  time: "TBD",
+  location: "To be announced",
+  description:
+    "We are working on exciting new events. Follow our updates to stay informed about upcoming workshops, launches, and educational initiatives.",
+  image: "/images/events/vibe.png",
+  category: "Announcement",
+  status: "upcoming",
+  speakers: ["DLED Team"],
+  link: "#",
 };
 
 // Parse date and time to create a comparable Date object
 export function parseEventDateTime(dateStr: string, timeStr: string): Date {
   // Extract start time from time range (e.g., "11:00 AM - 12:00 PM" -> "11:00 AM")
-  const startTime = timeStr.split(' - ')[0];
-  
+  const startTime = timeStr.split(" - ")[0];
+
   // Create date object from date string and start time
   const eventDate = new Date(`${dateStr} ${startTime}`);
-  
+
   // If the date is invalid, return a date far in the past
   if (isNaN(eventDate.getTime())) {
     return new Date(0);
   }
-  
+
   return eventDate;
 }
 
 // Get the next upcoming event (closest to current date/time)
 export function getNextUpcomingEvent(): Event {
   const now = new Date();
-  
+
   // Filter upcoming events and sort by date/time
   const upcomingEvents = allEvents
-    .filter(event => event.status === 'upcoming')
-    .map(event => ({
+    .filter((event) => event.status === "upcoming")
+    .map((event) => ({
       ...event,
-      parsedDateTime: parseEventDateTime(event.date, event.time)
+      parsedDateTime: parseEventDateTime(event.date, event.time),
     }))
-    .filter(event => event.parsedDateTime > now) // Only future events
+    .filter((event) => event.parsedDateTime > now) // Only future events
     .sort((a, b) => a.parsedDateTime.getTime() - b.parsedDateTime.getTime());
-  
+
   // Return the closest upcoming event, or default event if none exist
   return upcomingEvents.length > 0 ? upcomingEvents[0] : defaultEvent;
 }
@@ -96,7 +98,7 @@ export function getNextUpcomingEvent(): Event {
 export function isEventToday(event: Event): boolean {
   const today = new Date();
   const eventDate = parseEventDateTime(event.date, event.time);
-  
+
   return (
     eventDate.getDate() === today.getDate() &&
     eventDate.getMonth() === today.getMonth() &&
@@ -105,23 +107,23 @@ export function isEventToday(event: Event): boolean {
 }
 
 // Get events by status
-export function getEventsByStatus(status: 'upcoming' | 'past'): Event[] {
-  return allEvents.filter(event => event.status === status);
+export function getEventsByStatus(status: "upcoming" | "past"): Event[] {
+  return allEvents.filter((event) => event.status === status);
 }
 
 // Update event status based on current date/time
 export function updateEventStatuses(): Event[] {
   const now = new Date();
-  
-  return allEvents.map(event => {
+
+  return allEvents.map((event) => {
     const eventDateTime = parseEventDateTime(event.date, event.time);
     const eventEndTime = new Date(eventDateTime.getTime() + 2 * 60 * 60 * 1000); // Assume 2 hours duration
-    
+
     // If event end time has passed, mark as past
     if (eventEndTime < now) {
-      return { ...event, status: 'past' };
+      return { ...event, status: "past" };
     }
-    
+
     return event;
   });
 }