diff --git a/src/components/CommunityPortal/Reports/Participation/ChartsSection.jsx b/src/components/CommunityPortal/Reports/Participation/ChartsSection.jsx
new file mode 100644
index 0000000000..eaf44e0bea
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/ChartsSection.jsx
@@ -0,0 +1,146 @@
+import { useSelector } from 'react-redux';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  Cell,
+  Legend,
+} from 'recharts';
+
+import mockEvents from './mockData';
+import styles from './ChartsSection.module.css';
+
+function ChartsSection() {
+  const darkMode = useSelector(state => state.theme.darkMode);
+
+  // Group data by event type
+  const eventTypeStats = [];
+  const groups = {};
+
+  mockEvents.forEach(evt => {
+    const key = evt.eventType;
+
+    if (!groups[key]) {
+      groups[key] = { count: 0, noShowSum: 0, dropSum: 0 };
+    }
+
+    groups[key].count++;
+    groups[key].noShowSum += Number.parseInt(evt.noShowRate, 10);
+    groups[key].dropSum += Number.parseInt(evt.dropOffRate, 10);
+  });
+
+  Object.entries(groups).forEach(([key, stats]) => {
+    eventTypeStats.push({
+      eventType: key,
+      avgNoShow: Math.round(stats.noShowSum / stats.count),
+      avgDrop: Math.round(stats.dropSum / stats.count),
+    });
+  });
+
+  // Monthly trend
+  const monthlyTrend = {};
+
+  mockEvents.forEach(evt => {
+    const m = new Date(evt.eventDate).getMonth();
+
+    if (!monthlyTrend[m]) {
+      monthlyTrend[m] = { count: 0, noShowSum: 0 };
+    }
+
+    monthlyTrend[m].count++;
+    monthlyTrend[m].noShowSum += Number.parseInt(evt.noShowRate, 10);
+  });
+
+  const trendData = Object.keys(monthlyTrend).map(m => ({
+    month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][m],
+    avgNoShow: Math.round(monthlyTrend[m].noShowSum / monthlyTrend[m].count),
+  }));
+
+  // Location distribution
+  const locationGroups = {};
+
+  mockEvents.forEach(evt => {
+    const loc = evt.location;
+    if (!locationGroups[loc]) locationGroups[loc] = 0;
+    locationGroups[loc]++;
+  });
+
+  const locationData = Object.keys(locationGroups).map(loc => ({
+    name: loc,
+    value: locationGroups[loc],
+  }));
+
+  const pieColors = ['#007bff', '#00b894', '#e17055', '#6c5ce7', '#fdcb6e'];
+
+  return (
+    <div className={`${styles.chartsSection} ${darkMode ? styles.chartsSectionDark : ''}`}>
+      <h3 className={styles.sectionTitle}>Comparative Charts</h3>
+
+      {/* Row 1 — Bar Charts */}
+      <div className={styles.row}>
+        {/* No-Show Chart */}
+        <div className={styles.chartBox}>
+          <h4>No-show rate by event type</h4>
+          <ResponsiveContainer width="100%" height={250}>
+            <BarChart data={eventTypeStats}>
+              <XAxis dataKey="eventType" stroke={darkMode ? '#fff' : '#333'} />
+              <YAxis stroke={darkMode ? '#fff' : '#333'} />
+              <Tooltip />
+              <Bar dataKey="avgNoShow" fill="#FF6B6B" />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* Drop-Off Chart */}
+        <div className={styles.chartBox}>
+          <h4>Drop-off rate by event type</h4>
+          <ResponsiveContainer width="100%" height={250}>
+            <BarChart data={eventTypeStats}>
+              <XAxis dataKey="eventType" stroke={darkMode ? '#fff' : '#333'} />
+              <YAxis stroke={darkMode ? '#fff' : '#333'} />
+              <Tooltip />
+              <Bar dataKey="avgDrop" fill="#4C89FF" />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      {/* Row 2 — Line Chart */}
+      <div className={styles.chartBoxFull}>
+        <h5>Monthly no-show trend</h5>
+        <ResponsiveContainer width="100%" height={280}>
+          <LineChart data={trendData}>
+            <XAxis dataKey="month" stroke={darkMode ? '#fff' : '#333'} />
+            <YAxis stroke={darkMode ? '#fff' : '#333'} />
+            <Tooltip />
+            <Line type="monotone" dataKey="avgNoShow" stroke="#FF6B6B" strokeWidth={2} />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+
+      {/* Row 3 — Pie Chart */}
+      <div className={styles.chartBoxFull}>
+        <h5>Participation by location</h5>
+        <ResponsiveContainer width="100%" height={300}>
+          <PieChart>
+            <Pie data={locationData} dataKey="value" nameKey="name" outerRadius={110} label>
+              {locationData.map((entry, index) => (
+                <Cell key={entry.name} fill={pieColors[index % pieColors.length]} />
+              ))}
+            </Pie>
+            <Legend />
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
+
+export default ChartsSection;
diff --git a/src/components/CommunityPortal/Reports/Participation/ChartsSection.module.css b/src/components/CommunityPortal/Reports/Participation/ChartsSection.module.css
new file mode 100644
index 0000000000..56402d6839
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/ChartsSection.module.css
@@ -0,0 +1,57 @@
+.chartsSection {
+  margin-top: 30px;
+  background: #fff;
+  padding: 25px;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+}
+
+.chartsSectionDark {
+  background: #1c2541;
+  color: #fff;
+  border: 1px solid #333;
+}
+
+.sectionTitle {
+  font-size: 1.3rem;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.chartBox {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+}
+
+.chartsSectionDark .chartBox {
+  background: #3a506b;
+  border: 1px solid #555;
+}
+
+.chartBox h4 {
+  margin-bottom: 10px;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.chartBoxFull {
+  margin-top: 20px;
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+}
+
+.chartsSectionDark .chartBoxFull {
+  background: #3a506b;
+  border: 1px solid #555;
+}
diff --git a/src/components/CommunityPortal/Reports/Participation/Demographics.jsx b/src/components/CommunityPortal/Reports/Participation/Demographics.jsx
new file mode 100644
index 0000000000..84f1d2cb63
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/Demographics.jsx
@@ -0,0 +1,24 @@
+import { useSelector } from 'react-redux';
+import styles from './Participation.module.css';
+
+function Demographics() {
+  const darkMode = useSelector(state => state.theme.darkMode);
+
+  return (
+    <div className={`${styles.demographicsPage} ${darkMode ? styles.demographicsPageDark : ''}`}>
+      <h2
+        className={`${styles.demographicsHeader} ${darkMode ? styles.demographicsHeaderDark : ''}`}
+      >
+        Demographics Overview
+      </h2>
+
+      <div className={styles.demographicsContent}>
+        <div className={styles.placeholderBox}>
+          <p>Charts and breakdowns for age, gender, and location demographics will appear here.</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Demographics;
diff --git a/src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx b/src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx
index 7a7249309b..94cae85c35 100644
--- a/src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx
@@ -1,20 +1,23 @@
 /* eslint-disable testing-library/no-node-access */
 import { useSelector } from 'react-redux';
 import { useRef, useState, useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFilePdf } from '@fortawesome/free-solid-svg-icons';
 import MyCases from './MyCases';
 import DropOffTracking from './DropOffTracking';
 import NoShowInsights from './NoShowInsights';
 import styles from './Participation.module.css';
+import ChartsSection from './ChartsSection';
 
 function EventParticipation() {
   const darkMode = useSelector(state => state.theme.darkMode);
+  const history = useHistory();
   const exportRef = useRef(null);
   const [exporting, setExporting] = useState(false);
 
   const handleSaveAsPDF = useCallback(() => {
-    if (globalThis.window === undefined || globalThis.document === undefined) return;
+    if (typeof globalThis.window === 'undefined' || typeof document === 'undefined') return;
     if (exporting) return;
     setExporting(true);
 
@@ -22,22 +25,22 @@ function EventParticipation() {
 
     // Expand "More" so all visible items are included
     const moreBtn = document.querySelector('.more-btn-global');
-    const toggled = moreBtn?.textContent?.toLowerCase().includes('more') ?? false;
-    if (toggled) moreBtn.click();
+    const shouldExpand = moreBtn?.textContent?.toLowerCase().includes('more');
+    if (shouldExpand) moreBtn.click();
 
     const prevTitle = document.title;
     document.title = 'event_participation';
 
     setTimeout(() => {
-      globalThis.print();
+      globalThis.window.print();
 
       setTimeout(() => {
-        if (toggled) moreBtn.click();
+        if (shouldExpand) moreBtn.click();
 
         delete document.documentElement.dataset.exporting;
         document.title = prevTitle;
         setExporting(false);
-      }, 100);
+      }, 120);
     }, 500);
   }, [exporting]);
 
@@ -76,13 +79,63 @@ function EventParticipation() {
         </button>
       </header>
 
+      <div className={styles.subPageNav}>
+        <button
+          className={`${styles.subPageBtn} ${darkMode ? styles.subPageBtnDark : ''}`}
+          onClick={() => history.push('/communityportal/reports/participation/demographics')}
+        >
+          Demographics
+        </button>
+        <button
+          className={`${styles.subPageBtn} ${darkMode ? styles.subPageBtnDark : ''}`}
+          onClick={() => history.push('/communityportal/reports/participation/personalization')}
+        >
+          Personalization
+        </button>
+      </div>
+
       <MyCases />
       <div className={`${styles.analyticsSection}`}>
         <DropOffTracking />
         <NoShowInsights />
       </div>
+      <ChartsSection />
+
+      {/* ACTIONABLE INSIGHTS SECTION */}
+      <div
+        className={`${styles.actionableSection} ${darkMode ? styles.actionableSectionDark : ''}`}
+      >
+        <h3 className={styles.actionableHeader}>Actionable insights</h3>
 
-      {/* Print-only footer note */}
+        <div className={styles.actionableGrid}>
+          <div className={styles.actionCard}>
+            <h4 className={styles.actionTitle}>High no-show rate detected</h4>
+            <p className={styles.actionDescription}>
+              Yoga Class events show an unusual increase in no-show percentage this month.
+            </p>
+            <span className={styles.actionTrendUp}>↑ 12%</span>
+          </div>
+
+          <div className={styles.actionCard}>
+            <h4 className={styles.actionTitle}>Weekend events perform better</h4>
+            <p className={styles.actionDescription}>
+              Attendance is consistently higher on Saturdays compared to weekdays.
+            </p>
+            <span className={styles.actionTrendUp}>↑ 8%</span>
+          </div>
+
+          <div className={`${styles.printOnly} ${styles.printFooter}`}>
+            Generated from Event Participation
+            <div className={styles.actionCard}>
+              <h4 className={styles.actionTitle}>Drop-off rate reduction opportunity</h4>
+              <p className={styles.actionDescription}>
+                Average event drop-off decreases when host reminders are sent earlier.
+              </p>
+              <span className={styles.actionTrendDown}>↓ 5%</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/CommunityPortal/Reports/Participation/MyCases.jsx b/src/components/CommunityPortal/Reports/Participation/MyCases.jsx
index f1d1e732b1..a63c5d7d6f 100644
--- a/src/components/CommunityPortal/Reports/Participation/MyCases.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/MyCases.jsx
@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import Calendar from 'react-calendar';
 import styles from './MyCases.module.css';
 import mockEvents from './mockData';
 import CreateEventModal from './CreateEventModal';
@@ -10,9 +11,10 @@ function MyCases() {
   const [filter, setFilter] = useState('all');
   const [expanded, setExpanded] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [calendarDate, setCalendarDate] = useState(new Date());
 
   const isExporting =
-    typeof document !== 'undefined' && document.documentElement?.dataset?.exporting === 'true'; // Sonar: prefer .
+    typeof document !== 'undefined' && document.documentElement?.dataset?.exporting === 'true';
 
   const darkMode = useSelector(state => state.theme.darkMode);
 
@@ -110,11 +112,82 @@ function MyCases() {
     </ul>
   );
 
-  const renderCalendarView = () => (
-    <div className={`${styles.calendarView} ${darkMode ? styles.calendarViewDark : ''}`}>
-      <p>Calendar View is under construction...</p>
-    </div>
-  );
+  const eventsByDate = useMemo(() => {
+    const map = {};
+    filteredEvents.forEach(event => {
+      const baseDate = new Date(event.eventDate || event.eventTime);
+      const key = baseDate.toISOString().slice(0, 10);
+      if (!map[key]) map[key] = [];
+      map[key].push(event);
+    });
+    return map;
+  }, [filteredEvents]);
+
+  const renderCalendarTileContent = ({ date, view: tileView }) => {
+    if (tileView !== 'month') return null;
+
+    const tileKey = date.toISOString().slice(0, 10);
+    const dayEvents = eventsByDate[tileKey];
+
+    if (!dayEvents || dayEvents.length === 0) return null;
+
+    return <div className={styles.calendarBubble}>{dayEvents.length}</div>;
+  };
+
+  const renderCalendarView = () => {
+    const selectedKey = calendarDate.toISOString().slice(0, 10);
+    const selectedEvents = eventsByDate[selectedKey] || [];
+
+    const formattedSelectedDate = calendarDate.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+
+    return (
+      <div className={`${styles.calendarView} ${darkMode ? styles.calendarViewDark : ''}`}>
+        <div className={styles.calendarHeaderRow}>
+          <span className={styles.calendarMonthLabel}>
+            {calendarDate.toLocaleString('en-US', { month: 'long', year: 'numeric' })}
+          </span>
+        </div>
+
+        <Calendar
+          onChange={setCalendarDate}
+          value={calendarDate}
+          tileContent={renderCalendarTileContent}
+          className={styles.reactCalendar}
+        />
+
+        <div className={styles.calendarEventsList}>
+          <h3 className={styles.calendarEventsTitle}>Events on {formattedSelectedDate}</h3>
+
+          {selectedEvents.length === 0 && (
+            <p className={styles.calendarEventsEmpty}>No events scheduled for this day.</p>
+          )}
+
+          {selectedEvents.map(event => (
+            <div
+              key={event.id}
+              className={`${styles.calendarEventItem} ${
+                darkMode ? styles.calendarEventItemDark : ''
+              }`}
+            >
+              <div className={styles.calendarEventItemHeader}>
+                <span className={styles.calendarEventName}>{event.eventName}</span>
+                <span className={styles.calendarEventType}>{event.eventType}</span>
+              </div>
+              <div className={styles.calendarEventMeta}>
+                <span>{event.eventTime}</span>
+                <span>{event.location}</span>
+                <span>{`+${event.attendees} attendees`}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
 
   return (
     <div
diff --git a/src/components/CommunityPortal/Reports/Participation/MyCases.module.css b/src/components/CommunityPortal/Reports/Participation/MyCases.module.css
index cf82dab0fd..596074f1f9 100644
--- a/src/components/CommunityPortal/Reports/Participation/MyCases.module.css
+++ b/src/components/CommunityPortal/Reports/Participation/MyCases.module.css
@@ -489,6 +489,157 @@
   box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
 }
 
+.calendarHeader {
+  display: flex;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  color: #333;
+}
+
+.calendarHeaderDark {
+  color: #fff;
+}
+
+.calendarGrid > div {
+  font-weight: 600;
+  text-align: center;
+  font-size: 16px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  padding: 4px 0;
+  color: #333 !important;
+}
+
+.myCasesPageDark .calendarGrid > div {
+  color: #fff !important;
+}
+
+.calendarCell {
+  border: 1px solid #ccc;
+  min-height: 90px;
+  padding: 6px;
+  border-radius: 8px;
+  background: #fff;
+  color: #333 !important;
+}
+
+.myCasesPageDark .calendarCell {
+  background: #3a506b;
+  border: 1px solid #777;
+  color: #fff !important;
+}
+
+/* ---------- Calendar Events inside Tiles ---------- */
+.calendarEvent {
+  font-size: 11px;
+  background: #e8f1ff;
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin-bottom: 3px;
+  color: #003c8f;
+}
+
+.calendarEventDark {
+  background: #244879;
+  color: #fff;
+}
+
+.reactCalendar {
+  border: none;
+  width: 100%;
+}
+
+/* Fix text inside tiles (events & numbers) for light mode */
+.reactCalendar :global(.react-calendar__tile) {
+  color: #333 !important;
+}
+
+/* ============================================================
+   DARK MODE — react-calendar overrides
+   react-calendar ships its own stylesheet (background: white,
+   dark tile text). Without these overrides the whole widget
+   renders identically to light mode.
+   ============================================================ */
+
+/* Calendar surface */
+.myCasesPageDark .reactCalendar,
+.myCasesPageDark .reactCalendar :global(.react-calendar__viewContainer),
+.myCasesPageDark .reactCalendar :global(.react-calendar__month-view) {
+  background-color: transparent !important;
+  color: #fff !important;
+}
+
+/* Tiles (day cells) */
+.myCasesPageDark .reactCalendar :global(.react-calendar__tile),
+.myCasesPageDark .reactCalendar :global(.react-calendar__tile abbr) {
+  color: #fff !important;
+  background-color: transparent !important;
+}
+
+/* Neighbouring-month days — dimmed */
+.myCasesPageDark .reactCalendar :global(.react-calendar__month-view__days__day--neighboringMonth),
+.myCasesPageDark
+  .reactCalendar
+  :global(.react-calendar__month-view__days__day--neighboringMonth abbr) {
+  color: #9aa7b8 !important;
+}
+
+/* Tile hover / focus */
+.myCasesPageDark .reactCalendar :global(.react-calendar__tile:enabled:hover),
+.myCasesPageDark .reactCalendar :global(.react-calendar__tile:enabled:focus) {
+  background-color: #2c3e50 !important;
+}
+
+/* Today's tile */
+.myCasesPageDark .reactCalendar :global(.react-calendar__tile--now) {
+  background-color: #5a6f8c !important;
+}
+
+.myCasesPageDark .reactCalendar :global(.react-calendar__tile--now:enabled:hover),
+.myCasesPageDark .reactCalendar :global(.react-calendar__tile--now:enabled:focus) {
+  background-color: #6b80a0 !important;
+}
+
+/* Selected / active tile */
+.myCasesPageDark .reactCalendar :global(.react-calendar__tile--active),
+.myCasesPageDark .reactCalendar :global(.react-calendar__tile--active:enabled:hover),
+.myCasesPageDark .reactCalendar :global(.react-calendar__tile--active:enabled:focus) {
+  background-color: #1d6fa5 !important;
+}
+
+/* Navigation bar (month/year + arrows) */
+.myCasesPageDark .reactCalendar :global(.react-calendar__navigation) {
+  background-color: transparent !important;
+}
+
+.myCasesPageDark .reactCalendar :global(.react-calendar__navigation button) {
+  color: #fff !important;
+  background-color: transparent !important;
+}
+
+.myCasesPageDark .reactCalendar :global(.react-calendar__navigation button:enabled:hover),
+.myCasesPageDark .reactCalendar :global(.react-calendar__navigation button:enabled:focus) {
+  background-color: #2c3e50 !important;
+}
+
+.myCasesPageDark .reactCalendar :global(.react-calendar__navigation button:disabled) {
+  background-color: transparent !important;
+  color: #b0b8c4 !important;
+}
+
+/* Weekdays bar (Sun, Mon, ...) */
+.myCasesPageDark .reactCalendar :global(.react-calendar__month-view__weekdays),
+.myCasesPageDark .reactCalendar :global(.react-calendar__month-view__weekdays__weekday) {
+  background-color: transparent !important;
+}
+
+.myCasesPageDark .reactCalendar :global(.react-calendar__month-view__weekdays__weekday abbr) {
+  color: #fff !important;
+  text-decoration: none;
+}
+
+
 /* ---------- More button ---------- */
 .moreBtn {
   background-color: #007bff;
@@ -593,4 +744,4 @@
     background-color: #f5e6ff !important;
     color: #9b59b6 !important;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/CommunityPortal/Reports/Participation/Participation.module.css b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
index 55f1cf21e1..84710fe1a1 100644
--- a/src/components/CommunityPortal/Reports/Participation/Participation.module.css
+++ b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
@@ -179,7 +179,6 @@
 }
 
 @media (width <= 1024px) {
-
   .analyticsSection {
     flex-direction: column;
     gap: 30px;
@@ -401,14 +400,11 @@
   margin-bottom: 15px;
   display: flex;
   justify-content: space-between;
-}
+} 
 
-.insightsHeaderDark {
+.trackingTableDark td,
+.trackingTableDark th  {
   color: #fff;
-  font-weight: bold;
-  margin-bottom: 15px;
-  display: flex;
-  justify-content: space-between;
 }
 
 @media (width <= 1024px) {
@@ -532,7 +528,6 @@
 
 .insightsDark .insightsTab {
   background-color: #3A506B;
-
   color: #fff;
   border-right: 1px solid #555;
 }
@@ -648,7 +643,6 @@
 
 .exportOptionsButtons,
 .exportOptionsButtonsDark {
-
   flex: 1;
   padding: 10px 12px;
   border-radius: 10px;
@@ -799,7 +793,6 @@
 
   :global(.case-card-global) {
     break-inside: avoid !important;
-
     height: auto !important;
   }
 
@@ -846,7 +839,6 @@
 
   :global(.tracking-table-global-dark) thead th {
     background: #1C2541 !important;
-
     color: #fff !important;
   }
 
@@ -876,46 +868,39 @@
   /* Dark mode styles for print */
   .participationLandingPageDark {
     background: #1B2A41 !important;
-
     color: #fff !important;
   }
 
   .participationLandingPageDark :global(.case-card-global) {
     background: #3A506B !important;
-
     color: #fff !important;
     border: 1px solid #555 !important;
   }
 
   .participationLandingPageDark .trackingContainerDark {
     background: #1C2541 !important;
-
     color: #fff !important;
     border: 1px solid #555 !important;
   }
 
   .participationLandingPageDark .insightsDark {
     background: #1C2541 !important;
-
     color: #fff !important;
     border: 1px solid #555 !important;
   }
 
   .participationLandingPageDark .trackingListContainerDark {
     background: #3A506B !important;
-
     color: #fff !important;
   }
 
   .participationLandingPageDark :global(.tracking-table-global-dark) thead th {
     background: #1C2541 !important;
-
     color: #fff !important;
   }
 
   .participationLandingPageDark .trackingRateDark {
     background: #3A506B !important;
-
     color: #fff !important;
   }
 
@@ -1133,3 +1118,187 @@
   border: 1px solid #3A506B;
 }
 
+/* ----- Actionable Insights ----- */
+.actionableSection {
+  margin-top: 30px;
+  background: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+.actionableSectionDark {
+  background: #1c2541;
+  border: 1px solid #333;
+  color: #fff;
+}
+
+.actionableHeader {
+  font-size: 1.3rem;
+  font-weight: 600;
+  margin-bottom: 18px;
+  color: #333;
+}
+
+.actionableSectionDark .actionableHeader {
+  color: #fff;
+}
+
+.actionableGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 15px;
+}
+
+.actionCard {
+  background: #f8f9fa;
+  border-radius: 10px;
+  padding: 15px;
+  border: 1px solid #ddd;
+}
+
+.actionCard:hover {
+  background: #f1f1f1;
+}
+
+.actionableSectionDark .actionCard {
+  background: #3a506b;
+  border: 1px solid #555;
+  color: #fff;
+}
+
+.actionTitle {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.actionDescription {
+  font-size: 0.85rem;
+  color: #555;
+  margin-bottom: 10px;
+}
+
+.actionableSectionDark .actionDescription {
+  color: #e0e0e0;
+}
+
+.actionTrendUp {
+  font-size: 0.85rem;
+  font-weight: bold;
+  color: #28a745;
+}
+
+.actionTrendDown {
+  font-size: 0.85rem;
+  font-weight: bold;
+  color: #e74c3c;
+}
+
+/* ---------- Demographics Page ---------- */
+.demographicsPage {
+  padding: 20px;
+  background: #fff;
+  border-radius: 10px;
+  margin-top: 20px;
+}
+
+.demographicsPageDark {
+  background: #1c2541;
+  color: #fff;
+}
+
+.demographicsHeader {
+  font-size: 22px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.demographicsHeaderDark {
+  color: #fff;
+}
+
+.demographicsContent {
+  display: flex;
+  justify-content: center;
+}
+
+.placeholderBox {
+  width: 100%;
+  padding: 20px;
+  border: 2px dashed #ccc;
+  border-radius: 10px;
+  text-align: center;
+  color: #555;
+}
+
+.demographicsPageDark .placeholderBox {
+  border-color: #888;
+  color: #ddd;
+}
+
+.subPageNav {
+  margin: 15px 0;
+  display: flex;
+  gap: 10px;
+}
+
+.subPageBtn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  background: #f1f1f1;
+  cursor: pointer;
+  font-weight: 500;
+  color: #333;
+}
+
+.subPageBtn:hover {
+  background: #e1e1e1;
+}
+
+.subPageBtnDark {
+  background: #2b3a55;
+  border-color: #666;
+  color: #fff;
+}
+
+.subPageBtnDark:hover {
+  background: #3a4b66;
+}
+
+/* ---------- Personalization Page ---------- */
+.personalizationPage {
+  padding: 20px;
+  background: #fff;
+  border-radius: 10px;
+  margin-top: 20px;
+}
+
+.personalizationPageDark {
+  background: #1c2541;
+  color: #fff;
+}
+
+.personalizationHeader {
+  font-size: 22px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.personalizationHeaderDark {
+  color: #fff;
+}
+
+.personalizationContent {
+  display: flex;
+  justify-content: center;
+}
+
+.personalizationPageDark .placeholderBox {
+  border-color: #888;
+  color: #ddd;
+}
+
diff --git a/src/components/CommunityPortal/Reports/Participation/Personalization.jsx b/src/components/CommunityPortal/Reports/Participation/Personalization.jsx
new file mode 100644
index 0000000000..778cb3e03b
--- /dev/null
+++ b/src/components/CommunityPortal/Reports/Participation/Personalization.jsx
@@ -0,0 +1,31 @@
+import { useSelector } from 'react-redux';
+import styles from './Participation.module.css';
+
+function Personalization() {
+  const darkMode = useSelector(state => state.theme.darkMode);
+
+  return (
+    <div
+      className={`${styles.personalizationPage} ${darkMode ? styles.personalizationPageDark : ''}`}
+    >
+      <h2
+        className={`${styles.personalizationHeader} ${
+          darkMode ? styles.personalizationHeaderDark : ''
+        }`}
+      >
+        Personalization Insights
+      </h2>
+
+      <div className={styles.personalizationContent}>
+        <div className={styles.placeholderBox}>
+          <p>
+            This section will show user engagement patterns, recommended event categories, and
+            personalized insights based on participation history.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Personalization;
diff --git a/src/routes.jsx b/src/routes.jsx
index f2fc47c514..3c217640ba 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -91,6 +91,9 @@ import ResourcesUsage from './components/CommunityPortal/Activities/activityId/R
 import EventNoShowChart from './components/CommunityPortal/Attendence/NoshowViz';
 import EventList from './components/CommunityPortal/Event/EventList/EventList';
 import EventParticipation from './components/CommunityPortal/Reports/Participation/EventParticipation';
+import Demographics from './components/CommunityPortal/Reports/Participation/Demographics';
+import Personalization from './components/CommunityPortal/Reports/Participation/Personalization';
+
 import MaterialSummary from './components/MaterialSummary/MaterialSummary';
 import FeedbackRatingEntry from './components/FeedbackActivityModal/FeedbackActivityEntry';
 import AddLessons from './components/BMDashboard/Lessons/AddLessons';
@@ -1097,7 +1100,32 @@ export default (
         <EPProtectedRoute path="/educationportal/student/tasks/:id" exact component={TaskDetails} />
         <Redirect exact from="/student/tasks" to="/educationportal/student/tasks" />
         <Redirect exact from="/student/tasks/:id" to="/educationportal/student/tasks/:id" />
-
+        <CPProtectedRoute
+          path="/communityportal/activity/:activityid/comments"
+          exact
+          render={() => <Activity initialTab="FAQs" />}
+        />
+        <CPProtectedRoute
+          path="/communityportal/activity/:activityid/Comments"
+          exact
+          render={() => <Activity initialTab="FAQs" />}
+        />
+        <CPProtectedRoute path="/communityportal/activity/:activityId" exact component={Activity} />
+        <CPProtectedRoute
+          path="/communityportal/reports/participation/demographics"
+          exact
+          component={Demographics}
+        />
+        <CPProtectedRoute
+          path="/communityportal/reports/participation/personalization"
+          exact
+          component={Personalization}
+        />
+        <CPProtectedRoute
+          path="/communityportal/events/create"
+          exact
+          component={TestEventRegistration}
+        />
         <Route path="/login" component={Login} />
         <Route path="/forgotpassword" component={ForgotPassword} />
         <Route path="/subscribe" component={SubscribePage} />