diff --git a/docs/finding-a-mentor/mentor-list.mdx b/docs/finding-a-mentor/mentor-list.mdx
index 47d9c7a7..d11f1975 100644
--- a/docs/finding-a-mentor/mentor-list.mdx
+++ b/docs/finding-a-mentor/mentor-list.mdx
@@ -2,7 +2,7 @@
 description: A list of willing mentors.
 id: mentor-list
 sidebar_position: 2
-title: Mentor List
+title: Mentor List 
 ---
 <head>
     <meta property="og:title" content="Mentor List" />
diff --git a/src/components/MentorList/index.jsx b/src/components/MentorList/index.jsx
index 637ab752..ada6e07c 100644
--- a/src/components/MentorList/index.jsx
+++ b/src/components/MentorList/index.jsx
@@ -1,15 +1,17 @@
 import React from 'react';
-import mentorsData from '@site/src/data/mentors.json'; // Fixed path for JSON data
-import styles from "./styles.module.css"; // Fixed path for CSS file
+import mentorsData from '@site/src/data/mentors.json';
+import styles from "./styles.module.css";
+
+const MentorCard = ({ mentor, isDarkMode }) => {
+  const cardStyle = isDarkMode ? styles.darkMode : styles.lightMode;
 
-const MentorCard = ({ mentor }) => {
   return (
-    <div className={styles.mentorCard}>
+    <div className={`${styles.mentorCard} ${cardStyle}`}>
       <img src={mentor.imageUrl} alt={`Picture of ${mentor.name}`} className={styles.mentorImage} />
       <h3 className={styles.mentorName}>{mentor.name}</h3>
       <p className={styles.mentorLocation}>📍 {mentor.location}</p>
       <br/>
-      <p className={styles.mentorExpertise}>💼 {mentor.expertise.join(', ')}</p> {/* Join the array of expertise into a string */}
+      <p className={styles.mentorExpertise}>💼 {mentor.expertise.join(', ')}</p>
       <p className={styles.mentorAvailability}>🕒 {mentor.availability}</p>
       <p className={styles.mentorContact}>💬 {mentor.contact}</p>
       <p className={styles.mentorBio}>{mentor.bio}</p>
@@ -19,13 +21,16 @@ const MentorCard = ({ mentor }) => {
 };
 
 const MentorList = () => {
+  // Assuming you have a way to determine the current theme mode (dark/light)
+  const isDarkMode = true; // You need to replace this with your actual logic to determine the theme mode
+
   return (
     <div className={styles.mentorGrid}>
       {mentorsData.map((mentor, index) => (
-        <MentorCard key={index} mentor={mentor} />
+        <MentorCard key={index} mentor={mentor} isDarkMode={isDarkMode} />
       ))}
     </div>
-  );
+  );  
 };
 
 export default MentorList;
diff --git a/src/components/MentorList/styles.module.css b/src/components/MentorList/styles.module.css
index 90a2c709..b3d221d7 100644
--- a/src/components/MentorList/styles.module.css
+++ b/src/components/MentorList/styles.module.css
@@ -2,13 +2,20 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin: 20px;
   padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.061);
 }
 
+/* Dark mode styles */
+.darkMode .mentorCard {
+  background: rgba(0, 0, 0, 0.3);
+  color: #fff;
+}
+
+
 .mentorImage {
   width: 100px;
   height: 100px;
@@ -46,7 +53,7 @@
 
 .mentorContact {
   color: #333;
-}
+}  
 
 .mentorGrid {
   display: grid;
