diff --git a/src/App.jsx b/src/App.jsx
index 7ee77a4..21cc8a1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,6 +15,7 @@ import FAQ from './components/FAQ'
 import Concepts from './pages/Concepts'
 import BackToTopButton from './components/Backtotop'
 import OurMission from './components/OurMission'
+import MentorList from './components/MentorList';
 
 function ScrollToTop() {
   const { pathname } = useLocation()
@@ -42,6 +43,7 @@ export default function App() {
                     <LearningPath />
                     <Storyboards />
                     <Mentors />
+
                     <SummerOfAI />
                     <Contribute />
                     <FAQ />
@@ -49,6 +51,7 @@ export default function App() {
               } />
               <Route path="/our-mission" element={<OurMission />} />
               <Route path="/concepts" element={<Concepts />} />
+              <Route path="/mentorlist" element={<MentorList />} />
           </Routes>
       </main>
       <Footer />
diff --git a/src/components/MentorList.jsx b/src/components/MentorList.jsx
new file mode 100644
index 0000000..7e536b1
--- /dev/null
+++ b/src/components/MentorList.jsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import { mentors, avatarStyles } from '../data/mentors'
+
+function MentorList() {
+  return (
+    <section className="min-h-screen py-16 px-6 lg:px-16 bg-white">
+      
+      <h1 className="text-4xl font-bold mb-10 mt-5">
+        All Mentors
+      </h1>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        
+        {mentors.map((mentor) => (
+          <div
+            key={mentor.id}
+            className="rounded-3xl p-6 border transition-all duration-200 hover:-translate-y-1 hover:bg-white"
+            style={{
+              borderColor: 'var(--border)',
+              background: 'var(--cream)'
+            }}
+          >
+            
+            {/* Avatar */}
+            <div
+              className="rounded-full flex items-center justify-center text-white font-bold mb-4"
+              style={{
+                ...avatarStyles[mentor.avatarColor],
+                width: 80,
+                height: 80
+              }}
+            >
+              {mentor.initials}
+            </div>
+
+            <h2 className="text-xl font-bold mb-1">
+              {mentor.name}
+            </h2>
+
+            <p className="text-sm mb-3 text-gray-500">
+              {mentor.role}
+            </p>
+
+            <p className="italic text-sm mb-4">
+              "{mentor.advice}"
+            </p>
+
+            <a
+              href={mentor.linkedin}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-purple-600 font-bold"
+            >
+              Connect on LinkedIn →
+            </a>
+          </div>
+        ))}
+
+      </div>
+    </section>
+  )
+}
+
+export default MentorList
\ No newline at end of file
diff --git a/src/components/Mentors.jsx b/src/components/Mentors.jsx
index 72a50e3..52e8c79 100644
--- a/src/components/Mentors.jsx
+++ b/src/components/Mentors.jsx
@@ -1,4 +1,7 @@
 import { mentors, avatarStyles } from '../data/mentors'
+import {Link} from 'react-router-dom';
+import MentorList from './MentorList';
+
 
 export default function Mentors() {
   return (
@@ -8,7 +11,7 @@ export default function Mentors() {
           <div className="section-label">Role Models</div>
           <h2 className="section-title">Women who've walked<br />this path before you</h2>
         </div>
-        <a href="#" className="btn-secondary hidden md:inline-flex">See all mentors →</a>
+        <Link to="/mentorlist" className="btn-secondary hidden md:inline-flex">See all mentors →</Link>
       </div>
 
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
diff --git a/src/components/SummerOfAI.jsx b/src/components/SummerOfAI.jsx
index 2c7f300..033e566 100644
--- a/src/components/SummerOfAI.jsx
+++ b/src/components/SummerOfAI.jsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { HighlightedText } from './Tooltip'
 
 const features = [
   {
@@ -35,7 +34,7 @@ export default function SummerOfAI() {
   return (
     <section
       id="summer"
-      className="py-16 lg:py-24 px-5 sm:px-8 lg:px-16 relative overflow-hidden"
+      className="py-24 px-16 relative overflow-hidden"
       style={{ background: 'var(--purple)' }}
     >
       {/* Big background year text */}
@@ -75,11 +74,8 @@ export default function SummerOfAI() {
             <br />
             Summer of AI
           </h2>
-          <p
-            className="text-lg leading-relaxed font-light mb-8"
-            style={{ color: "rgba(255,255,255,0.75)", maxWidth: 480 }}
-          >
-            <HighlightedText text="An open source program where girls contribute to real AI projects, get mentored by women in the industry, and earn a certificate that actually means something." />
+          <p className="text-lg leading-relaxed font-light mb-8" style={{ color: 'rgba(255,255,255,0.75)', maxWidth: 480 }}>
+            An open source program where girls contribute to real AI projects, get mentored by women in the industry, and earn a certificate that actually means something.
           </p>
           <button
             onClick={() => SetBtn(true)}
@@ -130,24 +126,13 @@ export default function SummerOfAI() {
             >
               <span className="text-2xl flex-shrink-0">{icon}</span>
               <div>
-                <h4
-                  className="font-display font-bold text-sm mb-1"
-                  style={{ color: "white" }}
-                >
-                  {title}
-                </h4>
-                <p
-                  className="text-xs leading-relaxed font-light"
-                  style={{ color: "rgba(255,255,255,0.65)" }}
-                >
-                  <HighlightedText text={description} />
-                </p>
+                <h4 className="font-display font-bold text-sm mb-1" style={{ color: 'white' }}>{title}</h4>
+                <p className="text-xs leading-relaxed font-light" style={{ color: 'rgba(255,255,255,0.65)' }}>{description}</p>
               </div>
             </div>
           ))}
         </div>
       </div>
     </section>
-      
-  );
+  )
 }