diff --git a/package.json b/package.json
index 6559e76d3b8..61fd3ebd6a9 100644
--- a/package.json
+++ b/package.json
@@ -145,7 +145,8 @@
   "resolutions": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "css-tree": "^3.2.1"
+    "css-tree": "^3.2.1",
+    "@mapbox/jsonlint-lines-primitives": "2.0.2"
   },
   "packageManager": "yarn@1.22.22",
   "scripts": {
diff --git a/src/actions/eventActions.js b/src/actions/eventActions.js
index fd493c4b539..64c502a8310 100644
--- a/src/actions/eventActions.js
+++ b/src/actions/eventActions.js
@@ -1,4 +1,5 @@
 import axios from 'axios';
+import httpService from '~/services/httpService';
 import { ENDPOINTS } from '~/utils/URL';
 
 /**
@@ -13,7 +14,7 @@ import { ENDPOINTS } from '~/utils/URL';
  */
 export async function getEvents(params = {}) {
   try {
-    const { type = '', location = '', page = 1, limit = 9, sortBy = 'date', userId = '' } = params;
+    const { type = '', location = '', page = 1, limit = 9, sortBy = 'date', sortOrder = 'asc', userId = '' } = params;
     const queryParams = new URLSearchParams();
     if (userId) queryParams.append('userId', userId);
     if (type) queryParams.append('type', type);
@@ -21,10 +22,11 @@ export async function getEvents(params = {}) {
     queryParams.append('page', page);
     queryParams.append('limit', limit);
     queryParams.append('sortBy', sortBy);
+    queryParams.append('sortOrder', sortOrder);
 
     const url = `${ENDPOINTS.EVENTS}?${queryParams.toString()}`;
     const response = await axios.get(url);
-    return Promise.resolve(response);
+    return response;
   } catch (error) {
     return {
       message: error.response?.data?.error || error.message,
@@ -42,7 +44,7 @@ export async function getEventTypes() {
   try {
     const url = ENDPOINTS.EVENT_TYPES;
     const response = await axios.get(url);
-    return Promise.resolve(response);
+    return response;
   } catch (error) {
     return {
       message: error.response?.data?.error || error.message,
@@ -60,7 +62,7 @@ export async function getEventLocations() {
   try {
     const url = ENDPOINTS.EVENT_LOCATIONS;
     const response = await axios.get(url);
-    return Promise.resolve(response);
+    return response;
   } catch (error) {
     return {
       message: error.response?.data?.error || error.message,
@@ -93,4 +95,80 @@ export async function leaveWaitlist(eventId, userId, token) {
       Authorization: token,
     },
   });
-}
\ No newline at end of file
+}
+
+export async function getPopularityMetrics(startDate, endDate) {
+  try {
+    const url = ENDPOINTS.EVENT_POPULARITY(startDate, endDate);
+    const response = await httpService.get(url);
+    return response;
+  } catch (error) {
+    const errorMessage =
+      error.response?.data?.error ||
+      error.response?.data?.message ||
+      error.message ||
+      'Failed to fetch popularity metrics';
+    return {
+      message: errorMessage,
+      errorCode: error.response?.status,
+      status: error.response?.status || 500,
+    };
+  }
+}
+
+export async function getEngagementMetrics(startDate, endDate, format) {
+  try {
+    const url = ENDPOINTS.EVENT_ENGAGEMENT(startDate, endDate, format);
+    const response = await httpService.get(url);
+    return response;
+  } catch (error) {
+    const errorMessage =
+      error.response?.data?.error ||
+      error.response?.data?.message ||
+      error.message ||
+      'Failed to fetch engagement metrics';
+    return {
+      message: errorMessage,
+      errorCode: error.response?.status,
+      status: error.response?.status || 500,
+    };
+  }
+}
+
+export async function getEventValue(startDate, endDate) {
+  try {
+    const url = ENDPOINTS.EVENT_VALUE(startDate, endDate);
+    const response = await httpService.get(url);
+    return response;
+  } catch (error) {
+    const errorMessage =
+      error.response?.data?.error ||
+      error.response?.data?.message ||
+      error.message ||
+      'Failed to fetch event value';
+    return {
+      message: errorMessage,
+      errorCode: error.response?.status,
+      status: error.response?.status || 500,
+    };
+  }
+}
+
+export async function getFormatComparison(startDate, endDate) {
+  try {
+    const url = ENDPOINTS.EVENT_FORMAT_COMPARISON(startDate, endDate);
+    const response = await httpService.get(url);
+    return response;
+  } catch (error) {
+    const errorMessage =
+      error.response?.data?.error ||
+      error.response?.data?.message ||
+      error.message ||
+      'Failed to fetch format comparison';
+    return {
+      message: errorMessage,
+      errorCode: error.response?.status,
+      status: error.response?.status || 500,
+    };
+  }
+}
diff --git a/src/components/CommunityPortal/Reports/Participation/EngagementVisuals.jsx b/src/components/CommunityPortal/Reports/Participation/EngagementVisuals.jsx
new file mode 100644
index 00000000000..0e8f17a854d
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/EngagementVisuals.jsx
@@ -0,0 +1,256 @@
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { getEngagementMetrics, getFormatComparison } from '~/actions/eventActions';
+import { FaClock, FaChartLine, FaVideo, FaBuilding, FaUsers, FaCalendarAlt } from 'react-icons/fa';
+import styles from './EngagementVisuals.module.css';
+
+function SummaryCards({ engagementData, darkMode }) {
+  if (!engagementData) return null;
+
+  return (
+    <div className={styles.summaryCards}>
+      <div className={`${styles.summaryCard} ${darkMode ? styles.summaryCardDark : ''}`}>
+        <FaClock className={styles.summaryIcon} />
+        <div className={styles.summaryContent}>
+          <span className={styles.summaryValue}>{engagementData.averageSessionDuration} min</span>
+          <span className={styles.summaryLabel}>Avg Session Duration</span>
+        </div>
+      </div>
+
+      <div className={`${styles.summaryCard} ${darkMode ? styles.summaryCardDark : ''}`}>
+        <FaUsers className={styles.summaryIcon} />
+        <div className={styles.summaryContent}>
+          <span className={styles.summaryValue}>{engagementData.totalAttendees}</span>
+          <span className={styles.summaryLabel}>Total Attendees</span>
+        </div>
+      </div>
+
+      <div className={`${styles.summaryCard} ${darkMode ? styles.summaryCardDark : ''}`}>
+        <FaChartLine className={styles.summaryIcon} />
+        <div className={styles.summaryContent}>
+          <span className={styles.summaryValue}>
+            {engagementData.averageInteractionRate.toFixed(1)}%
+          </span>
+          <span className={styles.summaryLabel}>Avg Interaction Rate</span>
+        </div>
+      </div>
+
+      <div className={`${styles.summaryCard} ${darkMode ? styles.summaryCardDark : ''}`}>
+        <FaCalendarAlt className={styles.summaryIcon} />
+        <div className={styles.summaryContent}>
+          <span className={styles.summaryValue}>{engagementData.totalEvents}</span>
+          <span className={styles.summaryLabel}>Total Events</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FormatComparisonCard({ titleIcon: Icon, title, stats, darkMode }) {
+  return (
+    <div className={`${styles.comparisonCard} ${darkMode ? styles.comparisonCardDark : ''}`}>
+      <div className={styles.comparisonHeader}>
+        <Icon className={styles.formatIcon} />
+        <h4 className={styles.formatTitle}>{title}</h4>
+      </div>
+      <div className={styles.comparisonStats}>
+        <div className={styles.comparisonStat}>
+          <span className={styles.comparisonLabel}>Total Events:</span>
+          <span className={styles.comparisonValue}>{stats.totalEvents}</span>
+        </div>
+        <div className={styles.comparisonStat}>
+          <span className={styles.comparisonLabel}>Total Attendees:</span>
+          <span className={styles.comparisonValue}>{stats.totalAttendees}</span>
+        </div>
+        <div className={styles.comparisonStat}>
+          <span className={styles.comparisonLabel}>Avg Attendees/Event:</span>
+          <span className={styles.comparisonValue}>{stats.averageAttendeesPerEvent}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ComparisonSection({ comparisonData, darkMode }) {
+  if (!comparisonData) return null;
+
+  return (
+    <div className={styles.comparisonSection}>
+      <h3 className={`${styles.comparisonTitle} ${darkMode ? styles.comparisonTitleDark : ''}`}>
+        Format Comparison: Virtual vs In-Person
+      </h3>
+
+      <div className={styles.comparisonGrid}>
+        <FormatComparisonCard
+          titleIcon={FaVideo}
+          title="Virtual Events"
+          stats={comparisonData.virtual}
+          darkMode={darkMode}
+        />
+        <FormatComparisonCard
+          titleIcon={FaBuilding}
+          title="In-Person Events"
+          stats={comparisonData.inPerson}
+          darkMode={darkMode}
+        />
+      </div>
+    </div>
+  );
+}
+
+function EventCard({ event, darkMode }) {
+  return (
+    <div className={`${styles.eventCard} ${darkMode ? styles.eventCardDark : ''}`}>
+      <div className={styles.eventHeader}>
+        <h4 className={styles.eventName}>{event.title}</h4>
+        <span className={styles.eventType}>{event.type}</span>
+      </div>
+      <div className={styles.eventMetrics}>
+        <div className={styles.eventMetric}>
+          <FaClock className={styles.metricIcon} />
+          <span>{event.averageSessionDuration} min</span>
+        </div>
+        <div className={styles.eventMetric}>
+          <FaUsers className={styles.metricIcon} />
+          <span>{event.attendees} attendees</span>
+        </div>
+        <div className={styles.eventMetric}>
+          <FaChartLine className={styles.metricIcon} />
+          <span>{event.interactionRate.toFixed(1)}% interaction</span>
+        </div>
+      </div>
+      <div className={styles.eventLocation}>
+        {event.location === 'Virtual' ? (
+          <FaVideo className={styles.locationIcon} />
+        ) : (
+          <FaBuilding className={styles.locationIcon} />
+        )}
+        <span>{event.location}</span>
+      </div>
+    </div>
+  );
+}
+
+function EventsListSection({ engagementData, darkMode }) {
+  const hasEvents = engagementData?.events?.length > 0;
+
+  if (!hasEvents) {
+    return (
+      <div className={styles.emptyState}>
+        <p>No engagement metrics available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.eventsList}>
+      <h3 className={`${styles.eventsTitle} ${darkMode ? styles.eventsTitleDark : ''}`}>
+        Event Engagement Details
+      </h3>
+      <div className={styles.eventsGrid}>
+        {engagementData.events.slice(0, 10).map(event => (
+          <EventCard key={event.eventId} event={event} darkMode={darkMode} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+async function fetchEngagementAndComparison(selectedFormat) {
+  const [engagementResponse, comparisonResponse] = await Promise.all([
+    getEngagementMetrics(null, null, selectedFormat || undefined),
+    getFormatComparison(),
+  ]);
+
+  const engagementFailed =
+    engagementResponse?.status >= 400 || (engagementResponse && !engagementResponse.data);
+
+  if (engagementFailed) {
+    throw new Error(engagementResponse.message || 'Failed to fetch engagement metrics');
+  }
+
+  return {
+    engagement: engagementResponse?.data ? engagementResponse.data.engagement : null,
+    comparison: comparisonResponse?.data ? comparisonResponse.data.comparison : null,
+  };
+}
+
+function EngagementVisuals() {
+  const darkMode = useSelector(state => state.theme.darkMode);
+  const [engagementData, setEngagementData] = useState(null);
+  const [comparisonData, setComparisonData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [selectedFormat, setSelectedFormat] = useState(''); // 'Virtual', 'In person', or '' for all
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const { engagement, comparison } = await fetchEngagementAndComparison(selectedFormat);
+        setEngagementData(engagement);
+        setComparisonData(comparison);
+      } catch (err) {
+        setError(err.message || 'An error occurred while loading data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void fetchData();
+  }, [selectedFormat]);
+
+  if (loading) {
+    return (
+      <div className={`${styles.container} ${darkMode ? styles.containerDark : ''}`}>
+        <div className={styles.loadingContainer}>
+          <p>Loading engagement metrics...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`${styles.container} ${darkMode ? styles.containerDark : ''}`}>
+        <div className={styles.errorContainer}>
+          <p>Error: {error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${styles.container} ${darkMode ? styles.containerDark : ''}`}>
+      <div className={styles.headerSection}>
+        <h2 className={`${styles.sectionTitle} ${darkMode ? styles.sectionTitleDark : ''}`}>
+          Engagement Metrics & Session Analytics
+        </h2>
+
+        <div className={styles.formatFilter}>
+          <label htmlFor="formatFilter" className={styles.filterLabel}>
+            Filter by Format:
+          </label>
+          <select
+            id="formatFilter"
+            value={selectedFormat}
+            onChange={e => setSelectedFormat(e.target.value)}
+            className={`${styles.filterSelect} ${darkMode ? styles.filterSelectDark : ''}`}
+          >
+            <option value="">All Formats</option>
+            <option value="Virtual">Virtual</option>
+            <option value="In person">In Person</option>
+          </select>
+        </div>
+      </div>
+
+      <SummaryCards engagementData={engagementData} darkMode={darkMode} />
+      <ComparisonSection comparisonData={comparisonData} darkMode={darkMode} />
+      <EventsListSection engagementData={engagementData} darkMode={darkMode} />
+    </div>
+  );
+}
+
+export default EngagementVisuals;
diff --git a/src/components/CommunityPortal/Reports/Participation/EngagementVisuals.module.css b/src/components/CommunityPortal/Reports/Participation/EngagementVisuals.module.css
new file mode 100644
index 00000000000..653b803e313
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/EngagementVisuals.module.css
@@ -0,0 +1,437 @@
+.container {
+  margin: 30px 0;
+  padding: 24px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.containerDark {
+  background: #1e293b;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.headerSection {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.sectionTitle {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #111;
+  margin: 0;
+}
+
+.sectionTitleDark {
+  color: #ffffff;
+}
+
+.formatFilter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.filterLabel {
+  font-size: 0.9rem;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.containerDark .filterLabel {
+  color: #94a3b8;
+}
+
+.filterSelect {
+  padding: 8px 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #111;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.filterSelectDark {
+  background: #0f172a;
+  border-color: #334155;
+  color: #ffffff;
+}
+
+.filterSelectDark option {
+  background: #0f172a;
+  color: #ffffff;
+}
+
+.summaryCards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.summaryCard {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 10px;
+  border: 1px solid #e0e0e0;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.summaryCard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.summaryCardDark {
+  background: #0f172a;
+  border-color: #334155;
+}
+
+.summaryCardDark:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.summaryIcon {
+  font-size: 2rem;
+  color: #3b82f6;
+  flex-shrink: 0;
+}
+
+.containerDark .summaryIcon {
+  color: #60a5fa;
+}
+
+.summaryContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.summaryValue {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #111;
+  margin-bottom: 4px;
+}
+
+.containerDark .summaryValue {
+  color: #ffffff;
+}
+
+.summaryLabel {
+  font-size: 0.85rem;
+  color: #64748b;
+}
+
+.containerDark .summaryLabel {
+  color: #94a3b8;
+}
+
+.comparisonSection {
+  margin-bottom: 30px;
+}
+
+.comparisonTitle {
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: #111;
+  margin-bottom: 20px;
+}
+
+.comparisonTitleDark {
+  color: #ffffff;
+}
+
+.comparisonGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+.comparisonCard {
+  padding: 24px;
+  background: #f8f9fa;
+  border-radius: 12px;
+  border: 2px solid #e0e0e0;
+}
+
+.comparisonCardDark {
+  background: #0f172a;
+  border-color: #334155;
+}
+
+.comparisonHeader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.comparisonCardDark .comparisonHeader {
+  border-bottom-color: #334155;
+}
+
+.formatIcon {
+  font-size: 1.8rem;
+  color: #3b82f6;
+}
+
+.containerDark .formatIcon {
+  color: #60a5fa;
+}
+
+.formatTitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #111;
+  margin: 0;
+}
+
+.comparisonCardDark .formatTitle {
+  color: #ffffff;
+}
+
+.comparisonStats {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.comparisonStat {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.comparisonLabel {
+  font-size: 0.95rem;
+  color: #64748b;
+}
+
+.comparisonCardDark .comparisonLabel {
+  color: #94a3b8;
+}
+
+.comparisonValue {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #111;
+}
+
+.comparisonCardDark .comparisonValue {
+  color: #ffffff;
+}
+
+.eventsList {
+  margin-top: 30px;
+}
+
+.eventsTitle {
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: #111;
+  margin-bottom: 20px;
+}
+
+.eventsTitleDark {
+  color: #ffffff;
+}
+
+.eventsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.eventCard {
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 10px;
+  border: 1px solid #e0e0e0;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.eventCard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.eventCardDark {
+  background: #0f172a;
+  border-color: #334155;
+}
+
+.eventCardDark:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.eventHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.eventCardDark .eventHeader {
+  border-bottom-color: #334155;
+}
+
+.eventName {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #111;
+  margin: 0;
+  flex: 1;
+}
+
+.eventCardDark .eventName {
+  color: #ffffff;
+}
+
+.eventType {
+  font-size: 0.75rem;
+  padding: 4px 8px;
+  background: #2563eb;
+  color: #ffffff;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.eventMetrics {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.eventMetric {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.9rem;
+  color: #64748b;
+}
+
+.eventCardDark .eventMetric {
+  color: #94a3b8;
+}
+
+.metricIcon {
+  font-size: 1rem;
+  color: #3b82f6;
+}
+
+.containerDark .metricIcon {
+  color: #60a5fa;
+}
+
+.eventLocation {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.85rem;
+  color: #64748b;
+  padding-top: 12px;
+  border-top: 1px solid #e0e0e0;
+}
+
+.eventCardDark .eventLocation {
+  color: #94a3b8;
+  border-top-color: #334155;
+}
+
+.locationIcon {
+  font-size: 1rem;
+  color: #3b82f6;
+}
+
+.containerDark .locationIcon {
+  color: #60a5fa;
+}
+
+.loadingContainer,
+.errorContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  color: #64748b;
+}
+
+.loadingContainer p,
+.errorContainer p {
+  color: inherit;
+  margin: 0;
+}
+
+.containerDark .loadingContainer,
+.containerDark .errorContainer {
+  color: #94a3b8;
+}
+
+.containerDark .loadingContainer p,
+.containerDark .errorContainer p {
+  color: #94a3b8;
+}
+
+.emptyState {
+  text-align: center;
+  padding: 40px;
+  color: #64748b;
+}
+
+.emptyState p {
+  color: inherit;
+  margin: 0;
+}
+
+.containerDark .emptyState {
+  color: #94a3b8;
+}
+
+.containerDark .emptyState p {
+  color: #94a3b8;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .summaryCard,
+  .eventCard {
+    transition: none;
+  }
+
+  .summaryCard:hover,
+  .eventCard:hover {
+    transform: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .headerSection {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .summaryCards {
+    grid-template-columns: 1fr;
+  }
+
+  .comparisonGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .eventsGrid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx b/src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx
index 6aee55d08d0..d264ac38306 100644
--- a/src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx
@@ -9,6 +9,8 @@ import AnalyticsNavigation from './AnalyticsNavigation';
 import MyCases from './MyCases';
 import DropOffTracking from './DropOffTracking';
 import NoShowInsights from './NoShowInsights';
+import EventPopularityBreakdown from './EventPopularityBreakdown';
+import EngagementVisuals from './EngagementVisuals';
 import styles from './Participation.module.css';
 
 function EventParticipation() {
@@ -36,6 +38,11 @@ function EventParticipation() {
         <DropOffTracking />
         <NoShowInsights />
       </div>
+
+      <EventPopularityBreakdown />
+
+      <EngagementVisuals />
+
       <AnalyticsNavigation />
 
       {/* Print-only footer note */}
diff --git a/src/components/CommunityPortal/Reports/Participation/EventPopularityBreakdown.module.css b/src/components/CommunityPortal/Reports/Participation/EventPopularityBreakdown.module.css
new file mode 100644
index 00000000000..06fcd43e08d
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/EventPopularityBreakdown.module.css
@@ -0,0 +1,272 @@
+.container {
+  margin: 30px 0;
+  padding: 24px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.containerDark {
+  background: #1e293b;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.sectionTitle {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #111;
+  margin-bottom: 24px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.sectionTitleDark {
+  color: #ffffff;
+  border-bottom-color: #475569;
+}
+
+.valueSummary {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.valueSummaryDark {
+  background: #0f172a;
+}
+
+.valueCard {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.valueSummaryDark .valueCard {
+  background: #1e293b;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.valueLabel {
+  font-size: 0.9rem;
+  color: #64748b;
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.valueSummaryDark .valueLabel {
+  color: #94a3b8;
+}
+
+.valueAmount {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #3b82f6;
+}
+
+.valueSummaryDark .valueAmount {
+  color: #60a5fa;
+}
+
+.metricsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+.metricCard {
+  padding: 24px;
+  background: #f8f9fa;
+  border-radius: 12px;
+  border: 1px solid #e0e0e0;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.metricCard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.metricCardDark {
+  background: #0f172a;
+  border-color: #334155;
+}
+
+.metricCardDark:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.metricHeader {
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.metricCardDark .metricHeader {
+  border-bottom-color: #334155;
+}
+
+.eventType {
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: #111;
+  margin: 0;
+}
+
+.metricCardDark .eventType {
+  color: #ffffff;
+}
+
+.metricStats {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.statItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.statIcon {
+  font-size: 1.5rem;
+  color: #3b82f6;
+  flex-shrink: 0;
+}
+
+.metricCardDark .statIcon {
+  color: #60a5fa;
+}
+
+.statContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.statValue {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #111;
+}
+
+.metricCardDark .statValue {
+  color: #ffffff;
+}
+
+.statLabel {
+  font-size: 0.85rem;
+  color: #64748b;
+}
+
+.metricCardDark .statLabel {
+  color: #94a3b8;
+}
+
+.detailedStats {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #e0e0e0;
+}
+
+.metricCardDark .detailedStats {
+  border-top-color: #334155;
+}
+
+.detailRow {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.detailLabel {
+  font-size: 0.9rem;
+  color: #64748b;
+}
+
+.metricCardDark .detailLabel {
+  color: #94a3b8;
+}
+
+.detailValue {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #111;
+}
+
+.metricCardDark .detailValue {
+  color: #ffffff;
+}
+
+.loadingContainer,
+.errorContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  color: #64748b;
+}
+
+.loadingContainer p,
+.errorContainer p {
+  color: inherit;
+  margin: 0;
+}
+
+.containerDark .loadingContainer,
+.containerDark .errorContainer {
+  color: #94a3b8;
+}
+
+.containerDark .loadingContainer p,
+.containerDark .errorContainer p {
+  color: #94a3b8;
+}
+
+.emptyState {
+  text-align: center;
+  padding: 40px;
+  color: #64748b;
+}
+
+.emptyState p {
+  color: inherit;
+  margin: 0;
+}
+
+.containerDark .emptyState {
+  color: #94a3b8;
+}
+
+.containerDark .emptyState p {
+  color: #94a3b8;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .metricCard {
+    transition: none;
+  }
+
+  .metricCard:hover {
+    transform: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .metricsGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .valueSummary {
+    flex-direction: column;
+  }
+}
diff --git a/src/components/CommunityPortal/Reports/Participation/MyCases.jsx b/src/components/CommunityPortal/Reports/Participation/MyCases.jsx
index 9304480dfaa..542924ad29c 100644
--- a/src/components/CommunityPortal/Reports/Participation/MyCases.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/MyCases.jsx
@@ -1,18 +1,21 @@
-import { useState } from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import styles from './MyCases.module.css';
-import mockEvents from './mockData';
-import CreateEventModal from './CreateEventModal';
+import ReactCalendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUsers } from '@fortawesome/free-solid-svg-icons';
+import styles from './MyCases.module.css';
+import { getEvents } from '../../../../actions/eventActions';
+import CreateEventModal from './CreateEventModal';
 import { filterEventsByDate } from './FilterByDate';
 
 function MyCases() {
+  const [events, setEvents] = useState([]);
   const [view, setView] = useState('card');
   const [filter, setFilter] = useState('All Time');
   const [expanded, setExpanded] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-  const [events, setEvents] = useState(mockEvents);
+  const [selectedDate, setSelectedDate] = useState(new Date());
 
   const isExporting =
     typeof document !== 'undefined' && document.documentElement?.dataset?.exporting === 'true';
@@ -20,20 +23,61 @@ function MyCases() {
   const now = new Date();
 
   const darkMode = useSelector(state => state.theme.darkMode);
+  const loadEvents = useCallback(async () => {
+    try {
+      const response = await getEvents({
+        page: 1,
+        limit: 200,
+        sortBy: 'date',
+        sortOrder: 'desc',
+      });
+
+      if (response?.status && response.status >= 400) {
+        throw new Error(response.message || 'Failed to fetch events');
+      }
+
+      const backendEvents = response?.data?.events || [];
+
+      const formattedEvents = backendEvents.map(event => ({
+        id: event._id,
+        eventName: event.title,
+        eventType: event.type,
+        eventDate: event.date,
+        startTime: event.startTime,
+        eventTime: new Date(event.startTime).toLocaleTimeString([], {
+          hour: '2-digit',
+          minute: '2-digit',
+        }),
+        attendees: event.currentAttendees || 0,
+        image: event.coverImage,
+      }));
+
+      setEvents(formattedEvents);
+    } catch (error) {
+      console.error('loadEvents error:', error);
+    }
+  }, []);
 
-  const filteredEvents = filterEventsByDate(events, filter)
-    .filter(event => event.isNew || new Date(event.eventDate).getTime() >= now.getTime())
-    .sort((a, b) => (b.isNew ? 1 : 0) - (a.isNew ? 1 : 0));
+  useEffect(() => {
+    loadEvents();
+  }, [loadEvents]);
+
+  const filteredEvents = filterEventsByDate(events, filter).filter(
+    event => new Date(event.startTime).getTime() >= now.getTime(),
+  );
 
   const handleEventCreated = createdEvent => {
     if (!createdEvent) return;
+
     const eventDate = createdEvent.startTime || createdEvent.date || Date.now();
+
     setEvents(prev => [
       {
         id: createdEvent._id || createdEvent.id || `local-${Date.now()}`,
         isNew: true,
         eventType: createdEvent.type || 'all',
         eventDate: new Date(eventDate).toISOString(),
+        startTime: eventDate,
         eventTime: new Date(eventDate).toLocaleString('en-US', {
           hour: 'numeric',
           minute: 'numeric',
@@ -56,7 +100,41 @@ function MyCases() {
     visibleEvents = expanded ? filteredEvents : filteredEvents.slice(0, 10);
   }
 
-  const placeholderAvatar = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
+  const FALLBACK_IMG =
+    'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=60';
+
+  // Memoized event cache by date for calendar
+  const eventCacheByDate = useMemo(() => {
+    const cache = new Map();
+    events.forEach(event => {
+      const eventDate = new Date(event.startTime || event.eventDate);
+      if (Number.isNaN(eventDate.getTime())) return;
+      const dateKey = eventDate.toDateString();
+      if (!cache.has(dateKey)) {
+        cache.set(dateKey, []);
+      }
+      cache.get(dateKey).push(event);
+    });
+    return cache;
+  }, [events]);
+
+  // Get events for selected date
+  const selectedDateEvents = useMemo(() => {
+    const dateKey = selectedDate.toDateString();
+    return eventCacheByDate.get(dateKey) || [];
+  }, [selectedDate, eventCacheByDate]);
+
+  // Handle date selection in calendar
+  const handleDateSelect = useCallback(date => {
+    setSelectedDate(date);
+  }, []);
+
+  // Handle Create New button
+  // Get event image or fallback
+  const getEventImage = useCallback(event => {
+    // Check if event has image property, otherwise use fallback
+    return event.image || event.imageUrl || FALLBACK_IMG;
+  }, []);
 
   const isEventToday = dateString => {
     const eventDate = new Date(dateString);
@@ -69,41 +147,104 @@ function MyCases() {
     );
   };
 
-  const renderCardView = () => (
-    <div
-      className={`case-cards-global ${styles.caseCards} ${
-        expanded || isExporting ? styles.expanded : ''
-      }`}
-    >
-      {visibleEvents.map(event => (
-        <div
-          className={`case-card-global ${styles.caseCard} ${darkMode ? styles.caseCardDark : ''}`}
-          key={event.id}
-        >
-          <span className={styles.eventBadge} data-type={event.eventType}>
-            {event.eventType}
-          </span>
-
-          <span className={`${styles.eventTime} ${darkMode ? styles.eventTimeDark : ''}`}>
-            {event.eventTime}
-          </span>
-
-          <span className={`${styles.eventName} ${darkMode ? styles.eventNameDark : ''}`}>
-            {isEventToday(event.eventDate) ? "Today's " : ''}
-            {event.eventName}
-          </span>
-
-          <div className={`${styles.attendeesInfo} ${darkMode ? styles.attendeesInfoDark : ''}`}>
-            <div className={styles.avatars}>
+  const renderCardView = () => {
+    if (visibleEvents.length === 0) {
+      return <div className={styles.noEventsMessage}>No upcoming events.</div>;
+    }
+
+    return (
+      <div
+        className={`case-cards-global ${styles.caseCards} ${
+          expanded || isExporting ? styles.expanded : ''
+        }`}
+      >
+        {visibleEvents.map(event => (
+          <div
+            className={`case-card-global ${styles.caseCard} ${darkMode ? styles.caseCardDark : ''}`}
+            key={event.id}
+          >
+            <span className={styles.eventBadge} data-type={event.eventType}>
+              {event.eventType}
+            </span>
+
+            <span className={`${styles.eventTime} ${darkMode ? styles.eventTimeDark : ''}`}>
+              {event.eventTime}
+            </span>
+
+            <span className={`${styles.eventName} ${darkMode ? styles.eventNameDark : ''}`}>
+              {isEventToday(event.eventDate) ? "Today's " : ''}
+              {event.eventName}
+            </span>
+
+            <div className={styles.eventImageContainer}>
               <img
-                alt="profile img"
-                src={placeholderAvatar}
-                width="24"
-                height="24"
-                crossOrigin="anonymous"
-                loading="lazy"
+                src={getEventImage(event)}
+                alt={event.eventName}
+                className={styles.eventImage}
+                onError={e => {
+                  if (e.currentTarget.src !== FALLBACK_IMG) {
+                    e.currentTarget.src = FALLBACK_IMG;
+                  }
+                }}
               />
             </div>
+            <div className={`${styles.attendeesInfo} ${darkMode ? styles.attendeesInfoDark : ''}`}>
+              <div className={styles.avatars}>
+                <img
+                  alt="profile img"
+                  src="/pfp-default-header.png"
+                  width="24"
+                  height="24"
+                  crossOrigin="anonymous"
+                  loading="lazy"
+                  onError={e => {
+                    e.currentTarget.src = FALLBACK_IMG;
+                  }}
+                />
+              </div>
+
+              <span
+                className={`${styles.attendeesCount} ${darkMode ? styles.attendeesCountDark : ''}`}
+                title="Number of members who attended this event"
+                data-tooltip="Members Attended"
+              >
+                <FontAwesomeIcon icon={faUsers} className="me-2" />
+                {`+${event.attendees}`} Attendees
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderListView = () => {
+    if (visibleEvents.length === 0) {
+      return <div className={styles.noEventsMessage}>No upcoming events.</div>;
+    }
+
+    return (
+      <ul
+        className={`case-list-global ${styles.caseList} ${
+          expanded || isExporting ? styles.expanded : ''
+        }`}
+      >
+        {visibleEvents.map(event => (
+          <li
+            className={`case-list-item-global ${styles.caseListItem} ${
+              darkMode ? styles.caseListItemDark : ''
+            }`}
+            key={event.id}
+          >
+            <span className={`${styles.eventType} ${darkMode ? styles.eventTypeDark : ''}`}>
+              {event.eventType}
+            </span>
+            <span className={`${styles.eventTime} ${darkMode ? styles.eventTimeDark : ''}`}>
+              {event.eventTime}
+            </span>
+            <span className={`${styles.eventName} ${darkMode ? styles.eventNameDark : ''}`}>
+              {event.eventName}
+            </span>
 
             <span
               className={`${styles.attendeesCount} ${darkMode ? styles.attendeesCountDark : ''}`}
@@ -113,45 +254,130 @@ function MyCases() {
               <FontAwesomeIcon icon={faUsers} className="me-2" />
               {`+${event.attendees}`} Attendees
             </span>
-          </div>
-        </div>
-      ))}
-    </div>
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  // Memoized tile content for calendar
+  const tileContent = useCallback(
+    ({ date, view }) => {
+      if (view === 'month') {
+        const dateKey = date.toDateString();
+        const eventsForDate = eventCacheByDate.get(dateKey) || [];
+        if (eventsForDate.length > 0) {
+          return (
+            <div className={styles.calendarEventIndicator}>
+              {eventsForDate.length > 3 ? (
+                <span className={styles.eventCountBadge}>+{eventsForDate.length}</span>
+              ) : (
+                eventsForDate.slice(0, 3).map((event, idx) => {
+                  const eventTypeClass = styles[`eventType${idx}`];
+                  return (
+                    <div
+                      key={event.id}
+                      className={`${styles.calendarEventDot} ${eventTypeClass}`}
+                      title={event.eventName}
+                    />
+                  );
+                })
+              )}
+            </div>
+          );
+        }
+      }
+      return null;
+    },
+    [eventCacheByDate],
   );
 
-  const renderListView = () => (
-    <ul
-      className={`case-list-global ${styles.caseList} ${
-        expanded || isExporting ? styles.expanded : ''
-      }`}
-    >
-      {visibleEvents.map(event => (
-        <li
-          className={`case-list-item-global ${styles.caseListItem} ${
-            darkMode ? styles.caseListItemDark : ''
-          }`}
-          key={event.id}
-        >
-          <span className={styles.eventType}>{event.eventType}</span>
-          <span className={styles.eventTime}>{event.eventTime}</span>
-          <span className={styles.eventName}>{event.eventName}</span>
-
-          <span
-            className={styles.attendeesCount}
-            title="Number of members who attended this event"
-            data-tooltip="Members Attended"
-          >
-            <FontAwesomeIcon icon={faUsers} className="me-2" />
-            {`+${event.attendees}`} Attendees
-          </span>
-        </li>
-      ))}
-    </ul>
+  // Memoized tile class name
+  const tileClassName = useCallback(
+    ({ date, view }) => {
+      if (view === 'month') {
+        const dateKey = date.toDateString();
+        const classes = [];
+        if (eventCacheByDate.has(dateKey)) {
+          classes.push(styles.hasEvents);
+        }
+        if (date.toDateString() === selectedDate.toDateString()) {
+          classes.push(styles.selectedDate);
+        }
+        return classes.join(' ');
+      }
+      return null;
+    },
+    [eventCacheByDate, selectedDate],
   );
 
   const renderCalendarView = () => (
     <div className={`${styles.calendarView} ${darkMode ? styles.calendarViewDark : ''}`}>
-      <p>Calendar View is under construction...</p>
+      <div className={styles.calendarContainer}>
+        <ReactCalendar
+          onChange={handleDateSelect}
+          value={selectedDate}
+          tileContent={tileContent}
+          tileClassName={tileClassName}
+          className={darkMode ? styles.calendarDark : styles.calendar}
+        />
+      </div>
+      {selectedDateEvents.length > 0 && (
+        <div className={styles.selectedDateEvents}>
+          <h3
+            className={`${styles.selectedDateTitle} ${
+              darkMode ? styles.selectedDateTitleDark : ''
+            }`}
+          >
+            Events on{' '}
+            {selectedDate.toLocaleDateString('en-US', {
+              month: 'long',
+              day: 'numeric',
+              year: 'numeric',
+            })}
+          </h3>
+          <div className={styles.selectedEventsList}>
+            {selectedDateEvents.map(event => (
+              <div
+                key={event.id}
+                className={`${styles.selectedEventCard} ${
+                  darkMode ? styles.selectedEventCardDark : ''
+                }`}
+              >
+                <span className={styles.eventBadge} data-type={event.eventType}>
+                  {event.eventType}
+                </span>
+                <h4
+                  className={`${styles.selectedEventName} ${
+                    darkMode ? styles.selectedEventNameDark : ''
+                  }`}
+                >
+                  {event.eventName}
+                </h4>
+                <p
+                  className={`${styles.selectedEventTime} ${
+                    darkMode ? styles.selectedEventTimeDark : ''
+                  }`}
+                >
+                  {event.eventTime}
+                </p>
+                <p
+                  className={`${styles.selectedEventAttendees} ${
+                    darkMode ? styles.selectedEventAttendeesDark : ''
+                  }`}
+                >
+                  {event.attendees} attendees
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {selectedDateEvents.length === 0 && (
+        <div className={styles.noEventsMessage}>
+          <p>No events scheduled for this date.</p>
+        </div>
+      )}
     </div>
   );
 
diff --git a/src/components/CommunityPortal/Reports/Participation/MyCases.module.css b/src/components/CommunityPortal/Reports/Participation/MyCases.module.css
index f6d3dad696c..5286da649c0 100644
--- a/src/components/CommunityPortal/Reports/Participation/MyCases.module.css
+++ b/src/components/CommunityPortal/Reports/Participation/MyCases.module.css
@@ -1,19 +1,5 @@
-/* ---------- CSS Variables for Dark Mode ---------- */
-:root {
-  --color-text-dark: #fff;
-  --color-border-dark: #4a5a77;
-}
-
-/* ---------- General Styles ---------- */
-.body {
-  font-family: Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 .myCasesPage {
-  padding: 20px;
+  padding: 24px;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
@@ -21,11 +7,12 @@
 }
 
 .myCasesPageDark {
-  padding: 16px;
-  background-color: #1C2541;
-  border: 1px solid var(--color-border-dark);
-  border-radius: 6px;
+  padding: 24px;
+  background-color: #1c2541;
+  border: 1px solid #555;
+  border-radius: 8px;
   box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  color: #fff;
 }
 
 /* ---------- Header ---------- */
@@ -35,13 +22,6 @@
   align-items: center;
 }
 
-/* Fixed no-descending-specificity: .headerActions moved before .myCasesPageDark .headerActions */
-.headerActions {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-
 .myCasesPageDark .header {
   display: flex;
   justify-content: space-between;
@@ -50,10 +30,6 @@
   color: #fff;
 }
 
-.myCasesPageDark .headerActions {
-  gap: 20px;
-}
-
 .sectionTitle {
   font-size: 24px;
   font-weight: bold;
@@ -69,6 +45,13 @@
   margin: 0;
 }
 
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
 @media (width <= 1024px) {
   .headerActions {
     flex-direction: column;
@@ -88,24 +71,27 @@
   gap: 12px;
 }
 
-.viewSwitcher button {
-  background-color: #fff;
-  border-radius: 6px;
-  padding: 8px 16px;
-  cursor: pointer;
+.viewSwitcher button,
+.createNew,
+.moreBtn,
+.filterDropdown {
+  height: 38px;
+  padding: 0 16px;
   font-size: 14px;
   font-weight: 500;
+  border-radius: 6px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.viewSwitcher button {
+  background-color: #fff;
   color: #333;
-  border: none;
   border: 1px solid #ccc;
+  transition: background-color 0.2s;
 }
 
-.myCasesPageDark .viewSwitcher button,
-.myCasesPageDark .createNew {
-  background-color: #3A506B;
-  color: var(--color-text-dark);
-  border: 1px solid var(--color-border-dark);
-}
+/* Dark mode */
 
 .viewSwitcher button.active {
   background-color: #0056b3;
@@ -113,31 +99,41 @@
   border-color: #0056b3;
 }
 
+.myCasesPageDark .viewSwitcher button {
+  background-color: #3a506b;
+  color: #fff;
+  border-color: #555;
+}
+
+.myCasesPageDark .viewSwitcher button:hover {
+  background-color: #4a5f7a;
+}
+
 .myCasesPageDark .viewSwitcher button.active {
-  background-color: #0056b3;
-  color: var(--color-text-dark);
-  border-color: #0056b3;
+  background-color: #0069d9;
+  color: #fff;
+  border-color: #0069d9;
 }
 
 .filterWrapper {
-  display: flex;
+  margin: 10px 0;
 }
 
-/* ---------- Dropdown Styles ---------- */
 .filterDropdown {
-  padding: 8px 16px;
-  font-size: 14px;
   border: 1px solid #ccc;
   border-radius: 6px;
   cursor: pointer;
+  min-width: 130px;
+  box-sizing: border-box;
   background-color: #fff;
   color: #333;
 }
 
-.myCasesPageDark .filterDropdown {
-  background-color: #3A506B;
-  color: var(--color-text-dark);
-  border: 1px solid var(--color-border-dark);
+.myCasesPageDark .viewSwitcher button,
+.myCasesPageDark .filterDropdown,
+.myCasesPageDark .createNew {
+  color: #fff;
+  border: 1px solid #555;
 }
 
 .myCasesPageDark .filterDropdown {
@@ -146,12 +142,6 @@
   border: 1px solid #555;
 }
 
-.filterDropdown:hover,
-.filterDropdown:focus {
-  border-color: #007bff;
-  outline: none;
-}
-
 /* Dark mode dropdown (component-level) */
 .filterDropdownDarkMode {
   padding: 8px 16px;
@@ -174,26 +164,23 @@
 }
 
 /* Hover and focus */
-.filterDropdownDarkMode:hover,
-.filterDropdownDarkMode:focus {
-  border-color: #3b82f6;
-  outline: none;
-}
-
 /* Dropdown options */
 .filterDropdownDarkMode option {
   background-color: #1e293b;
   color: #fff;
 }
 
+.myCasesPageDark .filterDropdown option {
+  background-color: #3a506b;
+  color: #fff;
+}
+
 /* Insight bar dark mode */
 .myCasesPageDark .insight-bar-container {
   background-color: rgb(255 255 255 / 10%);
   border-radius: 4px;
 }
 
-/* Light Mode */
-/* stylelint-disable-next-line no-descending-specificity */
 .createNew {
   font-weight: bold;
   border: 1px solid #ccc;
@@ -203,6 +190,7 @@
   padding: 8px 16px;
   cursor: pointer;
   font-size: 14px;
+  transition: background-color 0.2s, color 0.2s;
 }
 
 /* Dark mode */
@@ -217,18 +205,21 @@
   font-size: 14px;
 }
 
+.createNewDarkMode:hover {
+  background-color: #0056b3;
+  color: #fff;
+  border-color: #0056b3;
+}
+
 .myCasesPageDark .createNew {
   background-color: #3a506b;
   color: #fff;
-  border: 1px solid #555;
 }
 
 .content {
   margin-top: 10px;
-  cursor: pointer;
 }
 
-/* ---------- Card View Styles ---------- */
 .caseCards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -239,28 +230,19 @@
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
-  padding: 15px;
+  padding: 16px;
   box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  transition:
+    box-shadow 0.2s,
+    transform 0.2s;
+  min-height: 180px;
 }
 
-.caseCard:hover {
-  box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
-}
-
-
-.caseCardDark {
-  background-color: #3A506B;
-  color: var(--color-text-dark);
-  border: 1px solid var(--color-border-dark);
-  border-radius: 8px;
-  padding: 15px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+.caseCardDark > * {
+  color: #fff;
 }
 
 .caseCardDark:hover {
@@ -275,53 +257,31 @@
   border-radius: 20px;
   margin-bottom: 10px;
   background-color: #e9f7ef;
-  color: #28a745;
+  color: #1e7e34;
 }
 
 .eventBadge[data-type='Yoga Class'] {
   background-color: #e9f7ef;
-  color: #28a745;
+  color: #1e7e34;
 }
 
 .eventBadge[data-type='Cooking Workshop'] {
   background-color: #fdecea;
-  color: #e74c3c;
+  color: #c23f32;
 }
 
 .eventBadge[data-type='Dance Class'] {
   background-color: #fff5e6;
-  color: #f39c12;
+  color: #9b630b;
 }
 
 .eventBadge[data-type='Fitness Bootcamp'] {
   background-color: #f5e6ff;
-  color: #9b59b6;
-}
-
-/* Dark mode event badge styles */
-.caseCardDark .eventBadge[data-type='Yoga Class'] {
-  background-color: #1e4d2e;
-  color: #4ade80;
-  border: 1px solid #4ade80;
-}
-
-.caseCardDark .eventBadge[data-type='Cooking Workshop'] {
-  background-color: #4d1e1e;
-  color: #f87171;
-  border: 1px solid #f87171;
+  color: #8e51a7;
 }
 
-.caseCardDark .eventBadge[data-type='Dance Class'] {
-  background-color: #4d3d1e;
-  color: #fbbf24;
-  border: 1px solid #fbbf24;
-}
+/* Ensure event badges maintain their colors in dark mode */
 
-.caseCardDark .eventBadge[data-type='Fitness Bootcamp'] {
-  background-color: #3d1e4d;
-  color: #c084fc;
-  border: 1px solid #c084fc;
-}
 
 .caseCardDark .eventBadge[data-type='Workshop'] {
   background-color: #1e3a5f;
@@ -353,12 +313,6 @@
   margin-bottom: 10px;
 }
 
-.eventTimeDark {
-  font-size: 14px;
-  color: var(--color-text-dark);
-  margin-bottom: 10px;
-}
-
 .eventName {
   font-size: 16px;
   font-weight: bold;
@@ -366,32 +320,18 @@
   color: #333;
 }
 
-.eventNameDark {
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 15px;
-  color: var(--color-text-dark);
-}
-
 .attendeesInfo {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.attendeesInfoDark {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #fff !important;
-}
-
 .avatars img {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   margin-right: -8px;
-  border: 2px solid #1c2541; 
+  border: 2px solid #fff;
 }
 
 .attendeesInfoDark .avatars img {
@@ -399,23 +339,17 @@
   height: 24px;
   border-radius: 50%;
   margin-right: -8px;
-  border: 2px solid #fff; 
+  border: 2px solid #fff;
 }
 
 /* Combined duplicated selector blocks */
-.attendeesCount {
-  font-size: 14px;
-  color: #555;
-  cursor: pointer;
-  padding: 6px 10px;
-  border-radius: 4px;
-  transition: all 0.3s ease;
-  position: relative;
+.caseCardDark .avatars img {
+  border-color: #3a506b;
 }
 
-.attendeesCountDark {
+.attendeesCount {
   font-size: 14px;
-  color: var(--color-text-dark);
+  color: #555;
 }
 
 .rates {
@@ -424,17 +358,6 @@
   color: #555;
 }
 
-.myCasesPageDark .rateCard {
-  background-color: #3A506B;
-  color: #fff;
-  border: 1px solid #555;
-}
-
-.myCasesPageDark .rateCard .percentage {
-  color: #4ade80;
-}
-
-/* ---------- List View Styles ---------- */
 .caseList {
   list-style-type: none;
   padding: 0;
@@ -445,26 +368,10 @@
   display: grid;
   grid-template-columns: 2fr 3fr 1fr 1fr;
   align-items: center;
-  padding: 15px;
+  padding: 16px;
   background-color: #fff;
   box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
-}
-
-.caseListItem:hover {
-  background-color: #d2cfcf;
-}
-
-.caseListItemDark {
-  display: grid;
-  grid-template-columns: 2fr 3fr 1fr 1fr;
-  align-items: center;
-  padding: 15px;
-  background-color: #3a506b;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
-}
-
-.caseListItemDark:hover {
-  background-color: #2c3e50;
+  transition: background-color 0.2s;
 }
 
 .caseListItem span {
@@ -473,145 +380,733 @@
   color: #333;
 }
 
-.caseListItemDark span {
-  margin-right: 15px;
-  font-size: 14px;
-  color: #fff;
+.caseCards.expanded,
+.caseList.expanded {
+  max-height: 500px;
+  overflow-y: auto;
+  padding-right: 8px;
 }
 
-.eventType {
-  font-weight: bold;
-  font-size: 14px;
+/* ==========================================================================
+   DARK MODE (standalone classes — lower specificity)
+   ========================================================================== */
+
+.viewSwitcherDarkMode {
+  display: flex;
+  gap: 12px;
 }
 
-/* ---------- Calendar View Styles ---------- */
-.calendarView {
-  padding: 20px;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  text-align: center;
-  font-size: 16px;
-  color: #555;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+.viewSwitcherDarkMode button,
+.viewSwitcherDarkMode button.active {
+  background-color: #1d4ed8;
+  color: #fff;
+  border-color: #1d4ed8;
 }
 
-.calendarViewDark {
-  padding: 20px;
+.caseCardDark {
   background-color: #3a506b;
+  color: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
-  text-align: center;
-  font-size: 16px;
-  color: #fff;
+  padding: 15px;
   box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
-/* ---------- More button ---------- */
-.moreBtn {
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  padding: 6px 12px;
-  font-size: 14px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.moreBtn:hover {
-  background-color: #0056b3;
+.caseCardDark .eventBadge {
+  background-color: #1e293b;
+  color: #e2e8f0;
 }
 
-/* ---------- Expanded scroll area ---------- */
-.caseCards.expanded,
-.caseList.expanded {
-  max-height: 500px;
-  overflow-y: auto;
-  padding-right: 8px;
+.caseCardDark .eventBadge[data-type='Yoga Class'] {
+  background-color: #14532d;
+  color: #86efac;
 }
 
-/* ---------- Print styles ---------- */
-
-@media print {
-  .myCasesPage {
-    overflow: visible !important;
-    height: auto !important;
-    max-height: none !important;
-    break-inside: auto !important;
-  }
-
-  .caseCards {
-    display: grid !important;
-    grid-template-columns: repeat(2, 1fr) !important;
-    gap: 12px !important;
-    max-height: none !important;
-    height: auto !important;
-    overflow: visible !important;
-    break-inside: auto !important;
-  }
-
- .caseCard {
-  background: white !important;
-  color: #333 !important;
-  border: 1px solid #ddd !important;
-  -webkit-print-color-adjust: exact !important;
-  print-color-adjust: exact !important;
-  break-inside: avoid-page !important;
-  break-inside: avoid !important;
+.caseCardDark .eventBadge[data-type='Cooking Workshop'] {
+  background-color: #7f1d1d;
+  color: #fca5a5;
 }
 
-.caseCardDark {
-  background: #3a506b !important;
-  color: #fff !important;
-  border: 1px solid #555 !important;
-  -webkit-print-color-adjust: exact !important;
-  print-color-adjust: exact !important;
-  break-inside: avoid-page !important;
-  break-inside: avoid !important;
+.caseCardDark .eventBadge[data-type='Dance Class'] {
+  background-color: #78350f;
+  color: #fcd34d;
 }
 
-.caseList {
-  max-height: none !important;
-  height: auto !important;
-  overflow: visible !important;
-  break-inside: auto !important;
+.caseCardDark .eventBadge[data-type='Fitness Bootcamp'] {
+  background-color: #3b0764;
+  color: #d8b4fe;
 }
 
-.caseListItem {
-  break-inside: avoid-page !important;
-  break-inside: avoid !important;
+.eventTimeDark {
+  font-size: 14px;
+  color: #fff;
+  margin-bottom: 10px;
+}
+
+.eventNameDark {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  color: #fff;
+}
+
+.attendeesInfoDark {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff;
+}
+
+.attendeesCountDark {
+  font-size: 14px;
+  color: #fff;
 }
 
 .caseListItemDark {
-  break-inside: avoid-page !important;
-  break-inside: avoid !important;
+  display: grid;
+  grid-template-columns: 2fr 3fr 1fr 1fr;
+  align-items: center;
+  padding: 16px;
+  background-color: #3a506b;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
+  margin-bottom: 8px;
+  border-radius: 6px;
+  border: 1px solid #555;
 }
 
-.eventBadge {
-  -webkit-print-color-adjust: exact !important;
-  print-color-adjust: exact !important;
+.caseListItemDark span {
+  margin-right: 15px;
+  font-size: 14px;
+  color: #fff;
 }
 
-.eventBadge[data-type='Yoga Class'] {
-  background-color: #e9f7ef !important;
-  color: #28a745 !important;
+.caseListItemDark .eventType {
+  color: #fff;
 }
 
-.eventBadge[data-type='Cooking Workshop'] {
-  background-color: #fdecea !important;
-  color: #e74c3c !important;
+.caseListItemDark .eventTime {
+  color: #ccc;
 }
 
-.eventBadge[data-type='Dance Class'] {
-  background-color: #fff5e6 !important;
-  color: #f39c12 !important;
+.caseListItemDark .eventName {
+  color: #fff;
 }
 
-.eventBadge[data-type='Fitness Bootcamp'] {
-  background-color: #f5e6ff !important;
-  color: #9b59b6 !important;
+.caseListItemDark .attendeesCount {
+  color: #fff;
+}
+
+.eventType {
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+}
+
+.eventTypeDark {
+  font-weight: bold;
+  font-size: 14px;
+  color: #fff;
+}
+
+/* ---------- Event Image Styles ---------- */
+.eventImageContainer {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  background: #f2f2f2;
+}
+
+.caseCardDark .eventImageContainer {
+  background: #2c3e50;
+}
+
+.eventImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ---------- Calendar View Styles ---------- */
+.calendarView {
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  text-align: center;
+  font-size: 16px;
+  color: #555;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.calendarViewDark {
+  padding: 20px;
+  background-color: #3a506b;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.calendarContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.calendar {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-family: inherit;
+}
+
+.calendarDark {
+  border: 1px solid #555;
+  border-radius: 8px;
+  font-family: inherit;
+  background-color: #2c3e50;
+  color: #fff;
+}
+
+.calendarDark :global(.react-calendar__tile) {
+  color: #fff;
+}
+
+.calendarDark :global(.react-calendar__tile:enabled:hover),
+.calendarDark :global(.react-calendar__tile:enabled:focus) {
+  background-color: #34495e;
+  color: #fff;
+}
+
+.calendarDark :global(.react-calendar__tile--active) {
+  background-color: #0069d9;
+  color: #fff;
+}
+
+.calendarDark :global(.react-calendar__tile--now) {
+  background-color: #1e3a5f;
+  color: #fff;
+}
+
+.calendarDark :global(.react-calendar__tile--neighboringMonth) {
+  color: #6c757d;
+}
+
+.calendarDark :global(.react-calendar__navigation button) {
+  color: #fff;
+  background-color: transparent;
+}
+
+.calendarDark :global(.react-calendar__navigation button:enabled:hover),
+.calendarDark :global(.react-calendar__navigation button:enabled:focus) {
+  background-color: #34495e;
+  color: #fff;
+}
+
+.calendarDark :global(.react-calendar__navigation button:disabled) {
+  color: #6c757d;
+}
+
+.calendarDark :global(.react-calendar__month-view__weekdays) {
+  color: #94a3b8;
+}
+
+.calendarDark :global(.react-calendar__month-view__weekdays__weekday) {
+  color: #94a3b8;
+}
+
+.calendarDark :global(.react-calendar__month-view__weekdays__weekday abbr) {
+  color: #94a3b8;
+}
+
+.calendarEventIndicator {
+  display: flex;
+  gap: 2px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2px;
+}
+
+.calendarEventDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #007bff;
+}
+
+.eventType0 {
+  background-color: #28a745;
+}
+
+.eventType1 {
+  background-color: #ffc107;
+}
+
+.eventType2 {
+  background-color: #dc3545;
+}
+
+.eventCountBadge {
+  font-size: 10px;
+  font-weight: bold;
+  color: #0069db;
+  background-color: #e7f3ff;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.calendarDark .eventCountBadge {
+  color: #60a5fa;
+  background-color: #1e3a5f;
+}
+
+.hasEvents {
+  background-color: #f0f8ff;
+}
+
+.calendarDark .hasEvents {
+  background-color: #1e3a5f;
+}
+
+.calendar :global(.react-calendar__tile).selectedDate {
+  background-color: #0069d9;
+  color: #fff;
+}
+
+.calendarDark :global(.react-calendar__tile).selectedDate {
+  background-color: #0056b3;
+  color: #fff;
+}
+
+.selectedDateEvents {
+  margin-top: 20px;
+}
+
+.selectedDateTitle {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 15px;
+}
+
+.selectedDateTitleDark {
+  font-size: 18px;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 15px;
+}
+
+.selectedEventsList {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 15px;
+}
+
+.selectedEventCard {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+}
+
+.selectedEventCardDark {
+  background-color: #2c3e50;
+  border: 1px solid #555;
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  color: #fff;
+}
+
+.selectedEventName {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin: 10px 0 5px;
+}
+
+.selectedEventNameDark {
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  margin: 10px 0 5px;
+}
+
+.selectedEventTime {
+  font-size: 14px;
+  color: #555;
+  margin: 5px 0;
+}
+
+.selectedEventTimeDark {
+  font-size: 14px;
+  color: #ccc;
+  margin: 5px 0;
+}
+
+.selectedEventAttendees {
+  font-size: 14px;
+  color: #555;
+  margin: 5px 0 0;
+}
+
+.selectedEventAttendeesDark {
+  font-size: 14px;
+  color: #ccc;
+  margin: 5px 0 0;
+}
+
+.selectedEventCardDark .eventBadge {
+  background-color: #1e293b;
+  color: #e2e8f0;
+  border: 1px solid #334155;
+}
+
+.selectedEventCardDark .eventBadge[data-type='Workshop'] {
+  background-color: #1e3a5f;
+  color: #60a5fa;
+  border: 1px solid #60a5fa;
+}
+
+.selectedEventCardDark .eventBadge[data-type='Meeting'] {
+  background-color: #4d3d1e;
+  color: #fbbf24;
+  border: 1px solid #fbbf24;
+}
+
+.selectedEventCardDark .eventBadge[data-type='Webinar'] {
+  background-color: #3d1e4d;
+  color: #c084fc;
+  border: 1px solid #c084fc;
+}
+
+.selectedEventCardDark .eventBadge[data-type='Social Gathering'] {
+  background-color: #1e4d2e;
+  color: #4ade80;
+  border: 1px solid #4ade80;
+}
+
+.noEventsMessage {
+  text-align: center;
+  padding: 40px 20px;
+  color: #999;
+  font-size: 16px;
+}
+
+.noEventsMessage p {
+  color: inherit;
+  margin: 0;
+}
+
+.calendarViewDark .noEventsMessage {
+  color: #ccc;
+}
+
+.calendarViewDark .noEventsMessage p {
+  color: #ccc;
+}
+
+.viewSwitcher button:hover {
+  background-color: #e9ecef;
+}
+
+.filterDropdown:hover,
+.filterDropdown:focus {
+  border-color: #0056b3;
+  outline: none;
+}
+
+.createNew:hover {
+  background-color: #004085;
+}
+
+/* ---------- More button ---------- */
+.moreBtn {
+  background-color: #0069d9;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-weight: 500;
+}
+
+.moreBtn:hover {
+  background-color: #004085;
+}
+
+.caseCard:hover {
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  transform: translateY(-2px);
+}
+
+.caseListItem:hover {
+  background-color: #f1f5f9;
+}
+
+.filterDropdownDarkMode:hover,
+.filterDropdownDarkMode:focus {
+  border-color: #1d4ed8;
+  outline: none;
+}
+
+/* ==========================================================================
+   DARK MODE (nested under .myCasesPage.darkMode — higher specificity)
+   ========================================================================== */
+
+.myCasesPage.darkMode {
+  background-color: #1e293b;
+}
+
+.myCasesPage.darkMode .header {
+  background-color: #1e293b;
+  color: #fff;
+}
+
+.myCasesPage.darkMode .headerActions {
+  gap: 20px;
+}
+
+.myCasesPage.darkMode .sectionTitle {
+  background-color: #1e293b;
+  color: #fff;
+}
+
+.myCasesPage.darkMode .viewSwitcher button,
+.myCasesPage.darkMode .createNew,
+.myCasesPage.darkMode .moreBtn {
+  background-color: #1e293b;
+  color: #f1f5f9;
+  border: 1px solid #555;
+  transition: background-color 0.2s;
+}
+
+.myCasesPage.darkMode .viewSwitcher button.active {
+  background-color: #1d4ed8;
+  color: #fff;
+  border-color: #1d4ed8;
+}
+
+.myCasesPage.darkMode .filterDropdown {
+  background-color: #3a506b;
+  color: #fff;
+  border: 1px solid #555;
+}
+
+.myCasesPage.darkMode .caseCard {
+  background-color: #3a506b;
+  color: #fff;
+  border: 1px solid #ddd;
+}
+
+.myCasesPage.darkMode .caseCard .eventBadge {
+  background-color: #1e293b;
+  color: #e2e8f0;
+  border: 1px solid #334155;
+}
+
+.myCasesPage.darkMode .caseCard .eventBadge[data-type='Workshop'] {
+  background-color: #1e3a5f;
+  color: #60a5fa;
+  border: 1px solid #60a5fa;
+}
+
+.myCasesPage.darkMode .caseCard .eventBadge[data-type='Meeting'] {
+  background-color: #4d3d1e;
+  color: #fbbf24;
+  border: 1px solid #fbbf24;
+}
+
+.myCasesPage.darkMode .caseCard .eventBadge[data-type='Webinar'] {
+  background-color: #3d1e4d;
+  color: #c084fc;
+  border: 1px solid #c084fc;
+}
+
+.myCasesPage.darkMode .caseCard .eventBadge[data-type='Social Gathering'] {
+  background-color: #1e4d2e;
+  color: #4ade80;
+  border: 1px solid #4ade80;
+}
+
+.myCasesPage.darkMode .caseCard .eventBadge[data-type='Yoga Class'] {
+  background-color: #052e16;
+  color: #4ade80;
+  border: 1px solid #22c55e;
+}
+
+.myCasesPage.darkMode .caseCard .eventBadge[data-type='Cooking Workshop'] {
+  background-color: #450a0a;
+  color: #f87171;
+  border: 1px solid #ef4444;
+}
+
+.myCasesPage.darkMode .caseCard .eventBadge[data-type='Dance Class'] {
+  background-color: #451a03;
+  color: #fbbf24;
+  border: 1px solid #f59e0b;
+}
+
+.myCasesPage.darkMode .caseCard .eventBadge[data-type='Fitness Bootcamp'] {
+  background-color: #2e1065;
+  color: #c084fc;
+  border: 1px solid #a855f7;
+}
+
+.myCasesPage.darkMode .caseCard .eventTime {
+  color: #fff;
+}
+
+.myCasesPage.darkMode .caseCard .eventName {
+  color: #fff;
+}
+
+.myCasesPage.darkMode .caseCard .attendeesInfo {
+  color: #fff;
+}
+
+.myCasesPage.darkMode .caseCard .attendeesCount {
+  color: #fff;
+}
+
+.myCasesPage.darkMode .caseListItem {
+  background-color: #3a506b;
+}
+
+.myCasesPage.darkMode .caseListItem span {
+  color: #fff;
 }
+
+.myCasesPage.darkMode .calendarView {
+  background-color: #1e293b;
+  color: #cbd5e1;
+  border: 1px solid #4a5568;
+}
+
+.myCasesPage.darkMode .calendarView p {
+  color: inherit;
+}
+
+/* ==========================================================================
+   PRINT
+   ========================================================================== */
+
+@media print {
+  .myCasesPage {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+    break-inside: auto !important;
+  }
+
+  .caseCards {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 12px !important;
+    max-height: none !important;
+    height: auto !important;
+    overflow: visible !important;
+    break-inside: auto !important;
+  }
+
+  .caseCard {
+    background: white !important;
+    color: #333 !important;
+    border: 1px solid #ddd !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    break-inside: avoid !important;
+  }
+
+  .caseCardDark {
+    background: #3a506b !important;
+    color: #fff !important;
+    border: 1px solid #555 !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    break-inside: avoid !important;
+  }
+
+  .caseList {
+    max-height: none !important;
+    height: auto !important;
+    overflow: visible !important;
+    break-inside: auto !important;
+  }
+
+  .caseListItem {
+    break-inside: avoid !important;
+  }
+
+  .caseListItemDark {
+    break-inside: avoid !important;
+  }
+
+  .eventBadge {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  .eventBadge[data-type='Yoga Class'] {
+    background-color: #e9f7ef;
+    color: #1e7e34;
+  }
+
+  .eventBadge[data-type='Cooking Workshop'] {
+    background-color: #fdecea;
+    color: #c23f32;
+  }
+
+  .eventBadge[data-type='Dance Class'] {
+    background-color: #fff5e6;
+    color: #9b630b;
+  }
+
+  .eventBadge[data-type='Fitness Bootcamp'] {
+    background-color: #f5e6ff;
+    color: #8e51a7;
+  }
+
+  .myCasesPage.darkMode {
+    background-color: transparent;
+  }
+
+  .myCasesPage.darkMode .caseCard {
+    background-color: #3a506b;
+    color: #fff;
+  }
+}
+
+.myCasesPage.darkMode .viewSwitcher button:hover,
+.myCasesPage.darkMode .createNew:hover,
+.myCasesPage.darkMode .moreBtn:hover {
+  background-color: #334155;
+}
+
+.myCasesPage.darkMode .filterDropdown:hover,
+.myCasesPage.darkMode .filterDropdown:focus {
+  border-color: #60a5fa;
+  outline: none;
+}
+
+.myCasesPage.darkMode .caseCard:hover {
+  box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
+  transform: translateY(-2px);
+}
+
+.myCasesPage.darkMode .caseListItem:hover {
+  background-color: #4a607b;
 }
 
 /* ---------- Attendees Hover (Light Mode) ---------- */
@@ -663,23 +1158,33 @@
 
 .caseListItem .attendeesCount:hover {
   background-color: rgb(0 123 255 /12%);
-  color: inherit; 
+  color: inherit;
   border-radius: 4px;
 }
 
 .caseListItemDark .attendeesCount:hover {
   background-color: rgb(255 255 255 /12%);
-  color: inherit; 
+  color: inherit;
   border-radius: 4px;
 }
 
 .myCasesPageDark .moreBtn {
-  background-color: #3A506B;
-  border: 1px solid #5A6B7D;
+  background-color: #3a506b;
+  border: 1px solid #5a6b7d;
   color: #fff;
 }
 
 .myCasesPageDark .moreBtn:hover {
-  background-color: #5A6B7D;
+  background-color: #5a6b7d;
   color: #fff;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .caseCard {
+    transition: none;
+  }
+
+  .caseCard:hover {
+    transform: none;
+  }
+}
diff --git a/src/components/CommunityPortal/Reports/Participation/Participation.module.css b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
index 32d69bf954a..1d982704f43 100644
--- a/src/components/CommunityPortal/Reports/Participation/Participation.module.css
+++ b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
@@ -15,11 +15,13 @@
 .participationLandingPage {
   max-width: 90%;
   margin: 0 auto;
+  padding: 24px;
 }
 
 .participationLandingPageDark {
   min-width: 100%;
   margin: 0 auto;
+  padding: 24px;
   background-color: #1b2a41;
   color: #fff;
 }
@@ -38,7 +40,7 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 30px;
-  padding: 12px 0;
+  padding: 16px 0;
   border-bottom: 2px solid #e0e0e0;
 }
 
@@ -53,10 +55,6 @@
   text-align: center;
 }
 
-.landingPageHeaderDark {
-  color: #fff;
-}
-
 .header {
   margin-bottom: 30px;
 }
@@ -77,6 +75,10 @@
   color: #333;
 }
 
+.participationLandingPageDark .myCasesHeader h2 {
+  color: #fff;
+}
+
 .myCasesHeader button {
   padding: 8px 15px;
   background-color: #0056b3;
@@ -179,12 +181,20 @@
   white-space: nowrap;
 }
 
+.trackingFilters {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 12px; /* spacing between dropdowns */
+}
+
 .trackingFilters select {
   margin-left: 10px;
   padding: 8px;
   font-size: 0.8rem;
   border: 1px solid #ccc;
   border-radius: 5px;
+  cursor: pointer;
+  transition: border-color 0.2s;
   background-color: #ffffff;
   color: #333;
 }
@@ -435,6 +445,20 @@
   font-size: 0.8rem;
   border: 1px solid #ccc;
   border-radius: 5px;
+  transition: border-color 0.2s;
+  background-color: #fff;
+  color: #333;
+}
+
+.insightsDark .insightsFilters select {
+  background-color: #1c2541;
+  color: #fff;
+  border-color: #555;
+}
+
+.insightsDark .insightsFilters select option {
+  background-color: #1c2541;
+  color: #fff;
 }
 
 .insightsTabs {
@@ -463,13 +487,11 @@
   border: 1px solid var(--color-border-dark);
 }
 
-.insightsDark .insightsTab:not(:last-child) {
-  border-right: 1px solid var(--color-border-dark);
-}
 
 .insightsDark .insightsTab.activeTab {
   background-color: #007bff;
   color: var(--color-text-dark);
+  font-weight: bold;
 }
 
 .insightsTab:not(:last-child) {
@@ -493,10 +515,6 @@
   color: #fff;
 }
 
-.navigationCardDark:hover {
-  background: #465d7b;
-}
-
 .case-list-item-dark:hover {
   background-color: #2b3f59;
 }
@@ -508,6 +526,15 @@
   background: #304663;
 }
 
+/* Dark mode tab styles */
+.insightsDark .insightsTabs {
+  border-color: #555;
+}
+
+.insightsDark .insightsTab:not(:last-child) {
+  border-right-color: #555;
+}
+
 .insightsContent {
   display: flex;
   flex-direction: column;
@@ -546,6 +573,10 @@
   margin-left: 10px;
 }
 
+.insightsDark .insightBar {
+  background: #2c3e50;
+}
+
 .insightFill {
   height: 100%;
   background: #007bff;
@@ -574,6 +605,104 @@
   color: #fff;
 }
 
+.modalTitle {
+  margin: 0;
+}
+
+.modalClose {
+  border: none;
+  background: transparent;
+  font-size: 22px;
+  cursor: pointer;
+}
+
+.modalBody {
+  margin-top: 12px;
+}
+
+.modalMeta {
+  font-size: 16px;
+  opacity: 0.85;
+  display: grid;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.modalError {
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: #b00020;
+}
+
+.modalActions {
+  display: flex;
+  gap: 10px;
+}
+
+.exportOptionsButtons {
+  flex: 1;
+  padding: 10px 12px;
+  border-radius: 10px;
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid #ccc;
+  color: #555;
+}
+
+.exportOptionsButtons:hover {
+  color: #555;
+  background-color: #e0e0e0;
+}
+
+.exportOptionsButtons:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Use :global for data attributes and print styles */
+:global(html[data-exporting='true'][data-exporting='true']) .caseCards:global(.expanded),
+:global(html[data-exporting='true'][data-exporting='true']) .caseList:global(.expanded),
+:global(html[data-exporting='true'][data-exporting='true']) .trackingListContainer {
+  max-height: none;
+  overflow: visible;
+  -webkit-overflow-scrolling: auto;
+}
+
+:global(html[data-exporting='true']) * {
+  animation: none;
+  transition: none;
+}
+
+:global(html[data-exporting='true'][data-exporting='true']) .participationLandingPageDark {
+  background-color: #1b2a41;
+}
+
+.printOnly {
+  display: none;
+}
+
+/* ==========================================================================
+   DARK MODE (standalone classes)
+   ========================================================================== */
+
+.landingPageHeaderDark {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #fff;
+  letter-spacing: 0.5px;
+}
+
+.savePdfBtnDark {
+  background: #333;
+  color: #f5f5f5;
+  border: 1px solid #666;
+}
+
+.savePdfBtnDark:hover {
+  background: #444;
+  transform: translateY(-1px);
+}
+
 .headerContent {
   display: flex;
   justify-content: space-between;
@@ -1085,123 +1214,6 @@
   color: #fff;
 }
 
-/* Analytics Navigation Styles */
-.analyticsNavigation {
-  margin-top: 2rem;
-}
-
-.analyticsNavigationDark {
-  background-color: #1c2541;
-  padding: 1.5rem;
-  border-radius: 12px;
-  border: 1px solid #3a506b;
-}
-
-.sectionSubtitle {
-  color: #666;
-  margin-bottom: 1.5rem;
-  font-size: 1rem;
-}
-
-.analyticsNavigationDark .sectionSubtitle {
-  color: #e5e7eb;
-}
-
-.navigationGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1rem;
-}
-
-.navigationCard {
-  background: white;
-  border-radius: 12px;
-  padding: 1.5rem;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
-  text-decoration: none;
-  color: inherit;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  border: 1px solid #eee;
-}
-
-.navigationCard:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgb(0 0 0 / 15%);
-  text-decoration: none;
-  color: inherit;
-}
-
-.navigationCardDark {
-  background: #3a506b;
-  color: #fff;
-  border-color: #5a6b7d;
-}
-
-.navigationCard .cardIcon {
-  font-size: 2rem;
-  width: 50px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f8f9fa;
-  border-radius: 10px;
-  flex-shrink: 0;
-}
-
-.navigationCardDark .cardIcon {
-  background: #5a6b7d;
-}
-
-.navigationCard .cardContent {
-  flex: 1;
-}
-
-.navigationCard .cardTitle {
-  font-size: 1.1rem;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-  color: #333;
-}
-
-.navigationCardDark .cardTitle {
-  color: #fff;
-}
-
-.navigationCard .cardDescription {
-  font-size: 0.9rem;
-  color: #666;
-  margin-bottom: 0.5rem;
-  line-height: 1.4;
-}
-
-.navigationCardDark .cardDescription {
-  color: #e5e7eb;
-}
-
-.navigationCard .cardStats {
-  font-size: 0.8rem;
-  color: #888;
-  font-weight: 600;
-}
-
-.navigationCardDark .cardStats {
-  color: #d1d5db;
-}
-
-.navigationCard .cardArrow {
-  font-size: 1.2rem;
-  color: #666;
-  font-weight: bold;
-}
-
-.navigationCardDark .cardArrow {
-  color: #e5e7eb;
-}
-
 /* Charts Section Styles */
 .chartsSection {
   margin-bottom: 2rem;
@@ -2133,3 +2145,160 @@
     grid-template-columns: 1fr;
   }
 }
+
+/* Analytics Navigation Styles */
+.analyticsNavigation {
+  margin-top: 2rem;
+}
+
+.analyticsNavigationDark {
+  background-color: #1c2541;
+  padding: 1.5rem;
+  border-radius: 12px;
+  border: 1px solid #3a506b;
+}
+
+.sectionSubtitle {
+  color: #666;
+  margin-bottom: 1.5rem;
+  font-size: 1rem;
+}
+
+.analyticsNavigationDark .sectionSubtitle {
+  color: #ccc;
+}
+
+.navigationGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1rem;
+}
+
+.navigationCard {
+  background: white;
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+  border: 1px solid #eee;
+}
+
+.navigationCard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgb(0 0 0 / 15%);
+  text-decoration: none;
+  color: inherit;
+}
+
+.navigationCardDark {
+  background: #3a506b;
+  color: #fff;
+  border-color: #5a6b7d;
+}
+
+.navigationCardDark:hover {
+  background: #465d7b;
+}
+
+.navigationCard .cardIcon {
+  font-size: 2rem;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f8f9fa;
+  border-radius: 10px;
+  flex-shrink: 0;
+}
+
+.navigationCardDark .cardIcon {
+  background: #5a6b7d;
+}
+
+.navigationCard .cardContent {
+  flex: 1;
+}
+
+.navigationCard .cardTitle {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: #333;
+}
+
+.navigationCardDark .cardTitle {
+  color: #fff;
+}
+
+.navigationCard .cardDescription {
+  font-size: 0.9rem;
+  color: #666;
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+}
+
+.navigationCardDark .cardDescription {
+  color: #ccc;
+}
+
+.navigationCard .cardStats {
+  font-size: 0.8rem;
+  color: #888;
+  font-weight: 600;
+}
+
+.navigationCardDark .cardStats {
+  color: #aaa;
+}
+
+.navigationCard .cardArrow {
+  font-size: 1.2rem;
+  color: #666;
+  font-weight: bold;
+}
+
+.navigationCardDark .cardArrow {
+  color: #ccc;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .trackingFilters select,
+  .infoIcon,
+  .insightsFilters select,
+  .insightsTab,
+  .insightFill,
+  .savePdfBtnDark,
+  .navLink,
+  .engagementCard,
+  .valueCard,
+  .trendCard,
+  .performanceCard,
+  .attendanceFill,
+  .engagementFill,
+  .navigationCard {
+    transition: none;
+  }
+
+  .savePdfBtnDark:hover,
+  .engagementCard:hover,
+  .valueCard:hover,
+  .trendCard:hover,
+  .performanceCard:hover,
+  .navigationCard:hover {
+    transform: none;
+  }
+}
+
+@media (width <= 768px) {
+  .navigationGrid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/utils/URL.js b/src/utils/URL.js
index 57df9efcd63..d4633fb39de 100644
--- a/src/utils/URL.js
+++ b/src/utils/URL.js
@@ -605,6 +605,35 @@ export const ENDPOINTS = {
   ATTENDANCE_BY_ID: attendanceId => `${APIEndpoint}/attendance/${attendanceId}`,
   ATTENDANCE_SEED: eventId => `${APIEndpoint}/attendance/event/${eventId}/seed`,
   ATTENDANCE_MOCK: eventId => `${APIEndpoint}/attendance/event/${eventId}/mock`,
+  EVENT_POPULARITY: (startDate, endDate) => {
+    const params = [];
+    if (startDate) params.push(`startDate=${encodeURIComponent(startDate)}`);
+    if (endDate) params.push(`endDate=${encodeURIComponent(endDate)}`);
+    const queryString = params.length ? `?${params.join('&')}` : '';
+    return `${APIEndpoint}/events/popularity${queryString}`;
+  },
+  EVENT_ENGAGEMENT: (startDate, endDate, format) => {
+    const params = [];
+    if (startDate) params.push(`startDate=${encodeURIComponent(startDate)}`);
+    if (endDate) params.push(`endDate=${encodeURIComponent(endDate)}`);
+    if (format) params.push(`format=${encodeURIComponent(format)}`);
+    const queryString = params.length ? `?${params.join('&')}` : '';
+    return `${APIEndpoint}/events/engagement${queryString}`;
+  },
+  EVENT_VALUE: (startDate, endDate) => {
+    const params = [];
+    if (startDate) params.push(`startDate=${encodeURIComponent(startDate)}`);
+    if (endDate) params.push(`endDate=${encodeURIComponent(endDate)}`);
+    const queryString = params.length ? `?${params.join('&')}` : '';
+    return `${APIEndpoint}/events/value${queryString}`;
+  },
+  EVENT_FORMAT_COMPARISON: (startDate, endDate) => {
+    const params = [];
+    if (startDate) params.push(`startDate=${encodeURIComponent(startDate)}`);
+    if (endDate) params.push(`endDate=${encodeURIComponent(endDate)}`);
+    const queryString = params.length ? `?${params.join('&')}` : '';
+    return `${APIEndpoint}/events/format-comparison${queryString}`;
+  },
   LB_SEND_MESSAGE: `${APIEndpoint}/lb/messages`,
   LB_READ_MESSAGE: `${APIEndpoint}/lb/messages/conversation`,
   LB_UPDATE_MESSAGE_STATUS: `${APIEndpoint}/lb/messages/statuses`,