diff --git a/frontend/src/components/LeadersList.tsx b/frontend/src/components/LeadersList.tsx
index 1f98f5e8fb..7d5a42bcc4 100644
--- a/frontend/src/components/LeadersList.tsx
+++ b/frontend/src/components/LeadersList.tsx
@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom'
 import { LeadersListProps } from 'types/leaders'
+import { TruncatedText } from './TruncatedText'
 
 /**
  * Component that renders a list of project leaders as clickable links.
@@ -17,20 +18,20 @@ const LeadersList = ({ leaders }: LeadersListProps) => {
   const leadersArray = leaders.split(',').map((leader) => leader.trim())
 
   return (
-    <>
+    <TruncatedText>
       {leadersArray.map((leader, index) => (
         <span key={`${leader}-${index}`}>
           <Link
             to={`/community/users?q=${encodeURIComponent(leader)}`}
             aria-label={`View profile of ${leader}`}
-            className="text-blue-400"
+            className="text-blue-400 hover:underline"
           >
             {leader}
           </Link>
           {index < leadersArray.length - 1 && ', '}
         </span>
       ))}
-    </>
+    </TruncatedText>
   )
 }
 
diff --git a/frontend/src/components/TruncatedText.tsx b/frontend/src/components/TruncatedText.tsx
index 1cf1d60efc..1f36506759 100644
--- a/frontend/src/components/TruncatedText.tsx
+++ b/frontend/src/components/TruncatedText.tsx
@@ -1,12 +1,20 @@
-import { useRef, useEffect, useCallback } from 'react'
+import React, { useRef, useEffect, useCallback } from 'react'
 
-export const TruncatedText = ({ text, className = '' }: { text: string; className?: string }) => {
+export const TruncatedText = ({
+  text,
+  children,
+  className = '',
+}: {
+  text?: string
+  children?: React.ReactNode
+  className?: string
+}) => {
   const textRef = useRef<HTMLSpanElement>(null)
 
   const checkTruncation = useCallback(() => {
     const element = textRef.current
     if (element) {
-      element.title = text
+      element.title = text || element.textContent || ''
     }
   }, [text])
 
@@ -31,7 +39,7 @@ export const TruncatedText = ({ text, className = '' }: { text: string; classNam
       ref={textRef}
       className={`block overflow-hidden truncate text-ellipsis whitespace-nowrap ${className}`}
     >
-      {text}
+      {text || children}
     </span>
   )
 }
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 76869746e3..cfe3ae2eb5 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -28,6 +28,7 @@ import { formatDate, formatDateRange } from 'utils/dateFormatter'
 import AnimatedCounter from 'components/AnimatedCounter'
 import ChapterMap from 'components/ChapterMap'
 import ItemCardList from 'components/ItemCardList'
+import LeadersList from 'components/LeadersList'
 import LoadingSpinner from 'components/LoadingSpinner'
 import MovingLogos from 'components/LogoCarousel'
 import Modal from 'components/Modal'
@@ -192,15 +193,16 @@ export default function Home() {
                       <FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
                       <span>{formatDate(chapter.createdAt)}</span>
                     </div>
-                    <div className="mr-4 flex items-center">
+                    <div className="mr-4 flex flex-1 items-center overflow-hidden">
                       <FontAwesomeIcon icon={faMapMarkerAlt} className="mr-2 h-4 w-4" />
-                      <span>{chapter.suggestedLocation}</span>
+                      <TruncatedText text={chapter.suggestedLocation} />
                     </div>
                   </div>
+
                   {chapter.leaders.length > 0 && (
-                    <div className="mr-4 mt-1 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
-                      <FontAwesomeIcon icon={faUsers} className="mr-2 h-4 w-4" />
-                      <span>{chapter.leaders.join(', ')}</span>
+                    <div className="mr-4 mt-1 flex items-center gap-x-2 text-sm [&_a]:text-gray-600 dark:[&_a]:text-gray-400">
+                      <FontAwesomeIcon icon={faUsers} className="h-4 w-4" />
+                      <LeadersList leaders={String(chapter.leaders)} />
                     </div>
                   )}
                 </div>
@@ -229,10 +231,11 @@ export default function Home() {
                       <span>{capitalize(project.type)}</span>
                     </div>
                   </div>
+
                   {project.leaders.length > 0 && (
-                    <div className="mr-4 mt-1 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
-                      <FontAwesomeIcon icon={faUsers} className="mr-2 h-4 w-4" />
-                      <span>{project.leaders.join(', ')}</span>
+                    <div className="mr-4 mt-1 flex items-center gap-x-2 text-sm [&_a]:text-gray-600 dark:[&_a]:text-gray-400">
+                      <FontAwesomeIcon icon={faUsers} className="h-4 w-4" />
+                      <LeadersList leaders={String(project.leaders)} />
                     </div>
                   )}
                 </div>