diff --git a/src/components/CommunityPortal/CPDashboard.jsx b/src/components/CommunityPortal/CPDashboard.jsx
index 8083c8a876..3353f41a49 100644
--- a/src/components/CommunityPortal/CPDashboard.jsx
+++ b/src/components/CommunityPortal/CPDashboard.jsx
@@ -257,8 +257,10 @@ export function CPDashboard() {
           <div className={styles.eventCardImgContainer}>
             <FixedRatioImage src={event.image} alt={event.title} fallback={FALLBACK_IMG} />
           </div>
-          <CardBody>
-            <h5 className={styles.eventTitle}>{event.title}</h5>
+          <CardBody className={styles.eventCardBody}>
+            <h5 className={styles.eventTitle} title={event.title}>
+              {event.title}
+            </h5>
             <p className={styles.eventDate}>
               <FaCalendarAlt className={styles.eventIcon} /> {formatDate(event.date)}
             </p>
diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index fe0ba38538..d6019b08fc 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -339,6 +339,7 @@
 
 .eventCardCol {
   display: flex;
+  margin-bottom: 1.5rem;
 }
 
 .eventCard:hover {
@@ -353,6 +354,7 @@
 
 .eventCard {
   width: 100%;
+  height: 100%;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -386,6 +388,10 @@
   font-weight: bold;
   font-size: 1.3rem;
   line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
 }
 
 .eventDate,