diff --git a/src/components/CommunityPortal/CPDashboard.jsx b/src/components/CommunityPortal/CPDashboard.jsx
index 8083c8a876..e6afdebad2 100644
--- a/src/components/CommunityPortal/CPDashboard.jsx
+++ b/src/components/CommunityPortal/CPDashboard.jsx
@@ -15,6 +15,7 @@ import {
 import { FaCalendarAlt, FaMapMarkerAlt, FaUserAlt, FaSearch, FaTimes } from 'react-icons/fa';
 import styles from './CPDashboard.module.css';
 import { ENDPOINTS } from '../../utils/URL';
+import { Link } from 'react-router-dom';
 import axios from 'axios';
 
 const FixedRatioImage = ({ src, alt, fallback }) => (
@@ -174,9 +175,7 @@ export function CPDashboard() {
         const day = String(parsedDate.getDate()).padStart(2, '0');
         return `${year}-${month}-${day}`;
       }
-    } catch (error) {
-      console.error('Error parsing date:', error);
-    }
+    } catch (error) {}
     return null;
   };
 
@@ -252,24 +251,38 @@ export function CPDashboard() {
     eventsContent = <div className={styles.noEvents}>{error}</div>;
   } else if (displayedEvents.length > 0) {
     eventsContent = displayedEvents.map(event => (
-      <Col md={4} key={event.id} className={styles.eventCardCol}>
-        <Card className={styles.eventCard}>
-          <div className={styles.eventCardImgContainer}>
-            <FixedRatioImage src={event.image} alt={event.title} fallback={FALLBACK_IMG} />
-          </div>
-          <CardBody>
-            <h5 className={styles.eventTitle}>{event.title}</h5>
-            <p className={styles.eventDate}>
-              <FaCalendarAlt className={styles.eventIcon} /> {formatDate(event.date)}
-            </p>
-            <p className={styles.eventLocation}>
-              <FaMapMarkerAlt className={styles.eventIcon} /> {event.location || 'Location TBD'}
-            </p>
-            <p className={styles.eventOrganizer}>
-              <FaUserAlt className={styles.eventIcon} /> {event.organizer || 'Organizer TBD'}
-            </p>
-          </CardBody>
-        </Card>
+      <Col md={4} key={event.id} className={`${styles.eventCardCol}`}>
+        <Link
+          className={styles.eventCardLink}
+          to={`/communityportal/Activities/Register/${event._id}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Card className={`${styles.eventCard} ${darkMode ? styles.darkEventCard : ''}`}>
+            <div className={styles.eventCardImgContainer}>
+              <FixedRatioImage src={event.coverImage} alt={event.title} fallback={FALLBACK_IMG} />
+            </div>
+            <CardBody className={`${styles.eventCardBody} ${darkMode ? styles.darkEventCard : ''}`}>
+              <h5 className={styles.eventTitle}>{event.title}</h5>
+              <p className={styles.eventDate}>
+                <FaCalendarAlt
+                  className={`${darkMode ? styles.eventIconDark : styles.eventIcon}`}
+                />{' '}
+                {formatDate(event.date)}
+              </p>
+              <p className={styles.eventLocation}>
+                <FaMapMarkerAlt
+                  className={`${darkMode ? styles.eventIconDark : styles.eventIcon}`}
+                />{' '}
+                {event.location || 'Location TBD'}
+              </p>
+              <p className={styles.eventOrganizer}>
+                <FaUserAlt className={`${darkMode ? styles.eventIconDark : styles.eventIcon}`} />{' '}
+                {event.organizer || 'Organizer TBD'}
+              </p>
+            </CardBody>
+          </Card>
+        </Link>
       </Col>
     ));
   } else {
@@ -333,7 +346,7 @@ export function CPDashboard() {
       <Row className={styles.centeredRow}>
         <Col md={3} className={`${styles.dashboardSidebar} ${darkMode ? styles.darkSidebar : ''}`}>
           <div className={styles.filterSection}>
-            <h4>Search Filters</h4>
+            <h4 className={styles.sidebarTitle}>Search Filters</h4>
             <div className={styles.filterSectionDivider}>
               <div className={styles.filterItem}>
                 <label htmlFor="date-tomorrow"> Dates</label>
@@ -434,7 +447,7 @@ export function CPDashboard() {
           </div>
         </Col>
 
-        <Col md={9} className={`${styles.dashboardMain} ${darkMode ? styles.darkMain : ''}`}>
+        <Col md={9} className={`${styles.dashboardMain}`}>
           <h2 className={styles.sectionTitle}>Events</h2>
 
           <Row>{eventsContent}</Row>
diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index fe0ba38538..08da0530d0 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -34,7 +34,7 @@
 }
 
 .darkHeader {
-  background: #1b2a41;
+  background: #2b3e59;
 }
 
 .dashboardHeader h1 {
@@ -225,7 +225,7 @@
 }
 
 .darkSidebar {
-  background: #1b2a41;
+  background: #2b3e59;
 }
 
 .filterSection h4 {
@@ -321,7 +321,6 @@
 
 .dashboardMain {
   width: 65%;
-  padding: 30px;
   border-radius: 12px;
 }
 
@@ -337,40 +336,58 @@
   text-align: center;
 }
 
-.eventCardCol {
-  display: flex;
+.sidebarTitle {
+  color: #2c3e50;
+  margin-bottom: 30px;
 }
 
-.eventCard:hover {
-  transform: scale(1.05);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+.eventCardCol {
+  display: flex;
+  padding: 20px 12px;
 }
 
-.eventCardImgContainer img {
+.eventCardLink {
+  display: flex;
   width: 100%;
-  height: auto;
+  height: 100%;
+  text-decoration: none !important;
+  color: inherit;
 }
 
 .eventCard {
   width: 100%;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  height: 100%;
   display: flex;
   flex-direction: column;
+  border-radius: 12px;
+  overflow: hidden;
   border: none;
   background: #ffffff;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+}
+
+.darkEventCard{
+  background: #1B2A41;
+}
+
+.eventCard:hover {
+  transform: scale(1.02);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }
 
 .eventCardImgContainer {
   width: 100%;
-  height: 220px;
   overflow: hidden;
   background-color: #f0f0f0;
   position: relative;
 }
 
+.eventCardImgContainer img {
+  width: 100%;
+  height: auto;
+}
+
 .eventCardBody {
   display: flex;
   flex-direction: column;
@@ -406,6 +423,13 @@
   font-size: 1rem;
 }
 
+.eventIconDark {
+  color: #fff;
+  margin-top: 2px;
+  flex-shrink: 0;
+  font-size: 1rem;
+}
+
 .noEvents {
   text-align: center;
   padding: 40px;
@@ -418,23 +442,6 @@
   margin-top: 30px;
 }
 
-.dashboardActions button {
-  background-color: #2c3e50;
-  color: #ffffff;
-  border: none;
-  padding: 12px 25px;
-  font-size: 1rem;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  font-weight: bold;
-}
-
-.dashboardActions button:hover {
-  background-color: #34495e;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
 .paginationContainer {
   margin-top: 20px;
   display: flex;