diff --git a/frontend/src/components/InfoItem.tsx b/frontend/src/components/InfoItem.tsx
index aa268c2bd6..a38f8a2336 100644
--- a/frontend/src/components/InfoItem.tsx
+++ b/frontend/src/components/InfoItem.tsx
@@ -44,7 +44,7 @@ export const TextInfoItem = ({
   value: string
 }) => {
   return (
-    <div className="flex items-center gap-2 text-sm text-gray-400">
+    <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
       <IconWrapper icon={icon} className="text-xs" />
       <span className="font-medium">{label}:</span> {value}
     </div>
diff --git a/frontend/src/components/ModuleCard.tsx b/frontend/src/components/ModuleCard.tsx
index 5c2b9faab1..7a11201fba 100644
--- a/frontend/src/components/ModuleCard.tsx
+++ b/frontend/src/components/ModuleCard.tsx
@@ -1,4 +1,5 @@
-import upperFirst from 'lodash/upperFirst'
+import { capitalize } from 'lodash'
+import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import type React from 'react'
@@ -7,7 +8,6 @@ import { FaChevronDown, FaChevronUp, FaTurnUp, FaCalendar, FaHourglassHalf } fro
 import type { Module } from 'types/mentorship'
 import { formatDate } from 'utils/dateFormatter'
 import { TextInfoItem } from 'components/InfoItem'
-import { LabelList } from 'components/LabelList'
 import SingleModuleCard from 'components/SingleModuleCard'
 import { TruncatedText } from 'components/TruncatedText'
 
@@ -25,7 +25,6 @@ const ModuleCard = ({ modules, accessLevel, admins }: ModuleCardProps) => {
   }
 
   const displayedModule = showAllModule ? modules : modules.slice(0, 4)
-  const isAdmin = accessLevel === 'admin'
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' || e.key === ' ') {
@@ -36,9 +35,9 @@ const ModuleCard = ({ modules, accessLevel, admins }: ModuleCardProps) => {
 
   return (
     <div>
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
         {displayedModule.map((module) => {
-          return <ModuleItem key={module.key || module.id} module={module} isAdmin={isAdmin} />
+          return <ModuleItem key={module.key || module.id} module={module} />
         })}
       </div>
       {modules.length > 4 && (
@@ -65,26 +64,116 @@ const ModuleCard = ({ modules, accessLevel, admins }: ModuleCardProps) => {
   )
 }
 
-const ModuleItem = ({ module, isAdmin }: { module: Module; isAdmin: boolean }) => {
+const ModuleItem = ({ module }: { module: Module }) => {
   const pathname = usePathname()
+
+  const mentors = module.mentors || []
+  const mentees = module.mentees || []
+
+  const mentorsWithAvatars = mentors.filter((m) => m?.avatarUrl)
+  const menteesWithAvatars = mentees.filter((m) => m?.avatarUrl)
+
+  const programKey = pathname?.split('/programs/')[1]?.split('/')[0] || ''
+  const moduleKey = module.key || module.id
+
+  const getMenteeUrl = (login: string) => {
+    if (pathname?.startsWith('/my/mentorship')) {
+      return `/my/mentorship/programs/${programKey}/modules/${moduleKey}/mentees/${login}`
+    }
+    return `/members/${login}`
+  }
+
+  const getAvatarUrlWithSize = (avatarUrl: string): string => {
+    try {
+      const url = new URL(avatarUrl)
+      url.searchParams.set('s', '60')
+      return url.toString()
+    } catch {
+      const separator = avatarUrl.includes('?') ? '&' : '?'
+      return `${avatarUrl}${separator}s=60`
+    }
+  }
+
   return (
-    <div className="flex h-46 w-full flex-col gap-3 rounded-lg border-1 border-gray-200 p-4 shadow-xs ease-in-out hover:shadow-md dark:border-gray-700 dark:bg-gray-800">
+    <div className="flex h-auto min-h-[12rem] w-full flex-col gap-3 rounded-lg border-1 border-gray-200 p-4 text-gray-600 shadow-xs ease-in-out hover:shadow-md dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
       <Link
         href={`${pathname}/modules/${module.key}`}
-        className="text-start font-semibold text-blue-400 hover:underline"
+        className="text-start font-semibold text-gray-600 hover:underline dark:text-gray-300"
       >
         <TruncatedText text={module?.name} />
       </Link>
-      <TextInfoItem icon={FaTurnUp} label="Level" value={upperFirst(module.experienceLevel)} />
+      <TextInfoItem icon={FaTurnUp} label="Level" value={capitalize(module.experienceLevel)} />
       <TextInfoItem icon={FaCalendar} label="Start" value={formatDate(module.startedAt)} />
       <TextInfoItem
         icon={FaHourglassHalf}
         label="Duration"
         value={getSimpleDuration(module.startedAt, module.endedAt)}
       />
-      {isAdmin && module.labels && module.labels.length > 0 && (
-        <div className="mt-2">
-          <LabelList labels={module.labels} maxVisible={3} />
+
+      {(mentorsWithAvatars.length > 0 || menteesWithAvatars.length > 0) && (
+        <div className="mt-auto flex w-full gap-4">
+          {mentorsWithAvatars.length > 0 && (
+            <div className="flex flex-1 flex-col gap-2">
+              <span className="text-xs font-bold tracking-wider text-gray-600 uppercase dark:text-gray-300">
+                Mentors
+              </span>
+              <div className="flex flex-wrap gap-1">
+                {mentorsWithAvatars.slice(0, 4).map((contributor) => (
+                  <Link
+                    key={contributor.login}
+                    href={`/members/${contributor.login}`}
+                    className="transition-opacity hover:opacity-80"
+                  >
+                    <Image
+                      alt={contributor.name || contributor.login}
+                      className="rounded-full border-1 border-gray-200 dark:border-gray-700"
+                      height={24}
+                      src={getAvatarUrlWithSize(contributor.avatarUrl)}
+                      title={contributor.name || contributor.login}
+                      width={24}
+                    />
+                  </Link>
+                ))}
+                {mentorsWithAvatars.length > 4 && (
+                  <span className="self-center text-xs font-medium text-gray-600 dark:text-gray-300">
+                    +{mentorsWithAvatars.length - 4}
+                  </span>
+                )}
+              </div>
+            </div>
+          )}
+          {menteesWithAvatars.length > 0 && (
+            <div
+              className={`flex flex-1 flex-col gap-2 ${mentorsWithAvatars.length > 0 ? 'border-l-1 border-gray-100 pl-4 dark:border-gray-700' : ''}`}
+            >
+              <span className="text-xs font-bold tracking-wider text-gray-600 uppercase dark:text-gray-300">
+                Mentees
+              </span>
+              <div className="flex flex-wrap gap-1">
+                {menteesWithAvatars.slice(0, 4).map((contributor) => (
+                  <Link
+                    key={contributor.login}
+                    href={getMenteeUrl(contributor.login)}
+                    className="transition-opacity hover:opacity-80"
+                  >
+                    <Image
+                      alt={contributor.name || contributor.login}
+                      className="rounded-full border-1 border-gray-200 dark:border-gray-700"
+                      height={24}
+                      src={getAvatarUrlWithSize(contributor.avatarUrl)}
+                      title={contributor.name || contributor.login}
+                      width={24}
+                    />
+                  </Link>
+                ))}
+                {menteesWithAvatars.length > 4 && (
+                  <span className="self-center text-xs font-medium text-gray-600 dark:text-gray-300">
+                    +{menteesWithAvatars.length - 4}
+                  </span>
+                )}
+              </div>
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/frontend/src/components/SingleModuleCard.tsx b/frontend/src/components/SingleModuleCard.tsx
index 6a58f8b0ee..68c76f4358 100644
--- a/frontend/src/components/SingleModuleCard.tsx
+++ b/frontend/src/components/SingleModuleCard.tsx
@@ -11,6 +11,7 @@ import type { Module } from 'types/mentorship'
 import { formatDate } from 'utils/dateFormatter'
 import EntityActions from 'components/EntityActions'
 import Markdown from 'components/MarkdownWrapper'
+import MenteeContributorsList from 'components/MenteeContributorsList'
 import { getSimpleDuration } from 'components/ModuleCard'
 import TopContributorsList from 'components/TopContributorsList'
 
@@ -88,6 +89,24 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({ module, accessLevel
           label="Mentors"
         />
       )}
+      {module.mentees?.length > 0 &&
+        (pathname?.startsWith('/my/mentorship') ? (
+          <MenteeContributorsList
+            icon={HiUserGroup}
+            contributors={module.mentees}
+            maxInitialDisplay={6}
+            label="Mentees"
+            programKey={programKey}
+            moduleKey={module.key}
+          />
+        ) : (
+          <TopContributorsList
+            icon={HiUserGroup}
+            contributors={module.mentees}
+            maxInitialDisplay={6}
+            label="Mentees"
+          />
+        ))}
     </div>
   )
 }