diff --git a/src/components/CommunityPortal/CPDashboard.jsx b/src/components/CommunityPortal/CPDashboard.jsx
index 1e13f76809..5f804c1ff1 100644
--- a/src/components/CommunityPortal/CPDashboard.jsx
+++ b/src/components/CommunityPortal/CPDashboard.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import { Container, Row, Col, Card, CardBody, Button, Input } from 'reactstrap';
 import styles from './CPDashboard.module.css';
 import { FaCalendarAlt, FaMapMarkerAlt, FaUserAlt } from 'react-icons/fa';
@@ -10,6 +11,7 @@ export function CPDashboard() {
   const [search, setSearch] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
+  const darkMode = useSelector(state => state.theme.darkMode);
   const [pagination, setPagination] = useState({
     currentPage: 1,
     totalPages: 5,
@@ -52,10 +54,10 @@ export function CPDashboard() {
 
       try {
         const response = await axios.get(ENDPOINTS.EVENTS);
-        console.log('Fetched events:', response.data.events);
+        //console.log('Fetched events:', response.data.events);
         setEvents(response.data.events);
       } catch (err) {
-        console.error('Here', err);
+        //console.error('Here', err);
         setError('Failed to load events');
       } finally {
         setIsLoading(false);
@@ -89,30 +91,30 @@ export function CPDashboard() {
   );
 
   return (
-    <Container className={styles['dashboard-container']}>
-      <header className={styles['dashboard-header']}>
+    <Container className={`${styles.dashboardContainer} ${darkMode ? styles.darkContainer : ''}`}>
+      <header className={`${styles.dashboardHeader} ${darkMode ? styles.darkHeader : ''}`}>
         <h1>All Events</h1>
-        <div className={styles['dashboard-controls']}>
-          <div className={styles['dashboard-search-container']}>
+        <div className={styles.dashboardControls}>
+          <div className={styles.dashboardSearchContainer}>
             <Input
               type="search"
               placeholder="Search events..."
               value={search}
               onChange={e => setSearch(e.target.value)}
-              className={styles['dashboard-search']}
+              className={styles.dashboardSearch}
             />
           </div>
         </div>
       </header>
 
-      <Row>
-        <Col md={3} className={styles['dashboard-sidebar']}>
-          <div className={styles['filter-section']}>
+      <Row className={styles.centeredRow}>
+        <Col md={3} className={`${styles.dashboardSidebar} ${darkMode ? styles.darkSidebar : ''}`}>
+          <div className={styles.filterSection}>
             <h4>Search Filters</h4>
-            <div className={styles['filter-section-divider']}>
-              <div className={styles['filter-item']}>
+            <div className={styles.filterSectionDivider}>
+              <div className={styles.filterItem}>
                 <label htmlFor="date-tomorrow"> Dates</label>
-                <div className={styles['filter-options-horizontal']}>
+                <div className={styles.filterOptionsHorizontal}>
                   <div>
                     <Input type="radio" name="dates" /> Tomorrow
                   </div>
@@ -120,27 +122,27 @@ export function CPDashboard() {
                     <Input type="radio" name="dates" /> This Weekend
                   </div>
                 </div>
-                <Input type="date" placeholder="Ending After" className={styles['date-filter']} />
+                <Input type="date" placeholder="Ending After" className={styles.dateFilter} />
               </div>
-              <div className={styles['filter-item']}>
+              <div className={styles.filterItem}>
                 <label htmlFor="online-only">Online</label>
                 <div>
                   <Input type="checkbox" /> Online Only
                 </div>
               </div>
-              <div className={styles['filter-item']}>
+              <div className={styles.filterItem}>
                 <label htmlFor="branches">Branches</label>
                 <Input type="select">
                   <option>Select branches</option>
                 </Input>
               </div>
-              <div className={styles['filter-item']}>
+              <div className={styles.filterItem}>
                 <label htmlFor="themes">Themes</label>
                 <Input type="select">
                   <option>Select themes</option>
                 </Input>
               </div>
-              <div className={styles['filter-item']}>
+              <div className={styles.filterItem}>
                 <label htmlFor="categories">Categories</label>
                 <Input type="select">
                   <option>Select categories</option>
@@ -150,40 +152,40 @@ export function CPDashboard() {
           </div>
         </Col>
 
-        <Col md={9} className={styles['dashboard-main']}>
-          <h2 className={styles['section-title']}>Events</h2>
+        <Col md={9} className={`${styles.dashboardMain} ${darkMode ? styles.darkMain : ''}`}>
+          <h2 className={styles.sectionTitle}>Events</h2>
           <Row>
             {events.length > 0 ? (
               events.map(event => (
-                <Col md={4} key={event.id} className={styles['event-card-col']}>
-                  <Card className={styles['event-card']}>
-                    <div className={styles['event-card-img-container']}>
+                <Col md={4} key={event.id} className={styles.eventCardCol}>
+                  <Card className={styles.eventCard}>
+                    <div className={styles.eventCardImgContainer}>
                       <img
                         src={event.image}
                         alt={event.title}
-                        className={styles['event-card-img']}
+                        className={styles['eventCard-img']}
                       />
                     </div>
                     <CardBody>
-                      <h5 className={styles['event-title']}>{event.title}</h5>
-                      <p className={styles['event-date']}>
-                        <FaCalendarAlt className={styles['event-icon']} /> {event.date}
+                      <h5 className={styles.eventTitle}>{event.title}</h5>
+                      <p className={styles.eventDate}>
+                        <FaCalendarAlt className={styles.eventIcon} /> {event.date}
                       </p>
-                      <p className={styles['event-location']}>
-                        <FaMapMarkerAlt className={styles['event-icon']} /> {event.location}
+                      <p className={styles.eventLocation}>
+                        <FaMapMarkerAlt className={styles.eventIcon} /> {event.location}
                       </p>
-                      <p className={styles['event-organizer']}>
-                        <FaUserAlt className={styles['event-icon']} /> {event.organizer}
+                      <p className={styles.eventOrganizer}>
+                        <FaUserAlt className={styles.eventIcon} /> {event.organizer}
                       </p>
                     </CardBody>
                   </Card>
                 </Col>
               ))
             ) : (
-              <div className={styles['no-events']}>No events available</div>
+              <div className={styles.noEvents}>No events available</div>
             )}
           </Row>
-          <div className={styles['dashboard-actions']}>
+          <div className={styles.dashboardActions}>
             <Button color="primary">Show Past Events</Button>
           </div>
         </Col>
diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index fcde3d24aa..44dd5fd45d 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -5,7 +5,7 @@ body {
   padding: 0;
 }
 
-.dashboard-container {
+.dashboardContainer {
   padding: 20px 15px;
   max-width: 1400px;
   margin: 0 auto;
@@ -18,7 +18,12 @@ body {
   width: min(95%, 1400px);
 }
 
-.dashboard-header {
+.darkContainer {
+  background: #2b3e59 !important;
+  color: #fff;
+}
+
+.dashboardHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -29,13 +34,17 @@ body {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.dashboard-header h1 {
+.dashboardHeader h1 {
   font-size: 2.5rem;
   font-weight: bold;
   color: #2c3e50;
 }
 
-.dashboard-search-container input {
+.darkHeader{
+  background: #1B2A41;
+}
+
+.dashboardSearchContainer input {
   border: 2px solid #2c3e50;
   border-radius: 25px;
   padding: 12px 20px;
@@ -45,27 +54,35 @@ body {
   transition: all 0.3s ease;
 }
 
-.dashboard-search-container input:focus {
+.dashboardSearchContainer input:focus {
   border-color: #34495e;
   box-shadow: 0 0 8px rgba(52, 73, 94, 0.3);
   outline: none;
 }
 
-.dashboard-sidebar {
+.centeredRow{
+  padding: 30px;
+}
+
+.dashboardSidebar {
   padding: 30px;
   background: #f9f9f9;
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.filter-section h4 {
+.darkSidebar{
+    background: #1B2A41;
+}
+
+.filterSection h4 {
   font-size: 1.8rem;
   color: #2c3e50;
   /* margin-bottom: 20px; */
   font-weight: 600;
 }
 
-.filter-section-divider {
+.filterSectionDivider {
   height: fit-content;
   margin: 10px 10px;;
   border-radius: 1px;
@@ -73,7 +90,7 @@ body {
   flex-direction: column;
 }
 
-.filter-item{
+.filterItem{
   padding: 8px 15px;
   margin-top: 10px;
   /* border: 1px solid #ddd; */
@@ -84,15 +101,14 @@ body {
   transition: all 0.3s ease;
 }
 
-.filter-item input:focus,
-.filter-item select:focus {
+.filterItem input:focus,
+.filterItem select:focus {
   border-color: #2c3e50;
   box-shadow: 0 0 5px rgba(44, 62, 80, 0.4);
   outline: none;
 }
 
-.dashboard-main {
-  margin-top: 25px;
+.dashboardMain {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
@@ -102,8 +118,12 @@ body {
   box-shadow: 0 4px 12px #0000001a;
 }
 
+.darkMain{
+    background: #2b3e59;
+    box-shadow: none;
+}
 
-.section-title {
+.sectionTitle {
   font-size: 2.2rem;
   color: #2c3e50;
   margin-bottom: 20px;
@@ -111,7 +131,7 @@ body {
   text-align: center;
 }
 
-.event-card {
+.eventCard {
   margin-bottom: 20px;
   border-radius: 12px;
   overflow: hidden;
@@ -119,18 +139,18 @@ body {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.event-card:hover {
+.eventCard:hover {
   transform: scale(1.05);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }
 
-.event-card-img-container img {
+.eventCardImgContainer img {
   width: 100%;
   height: auto;
   border-bottom: 3px solid #34495e;
 }
 
-.event-title {
+.eventTitle {
   text-align: center;
   color: #2c3e50;
   margin: 10px 0;
@@ -138,9 +158,9 @@ body {
   font-size: 1.5rem;
 }
 
-.event-date,
-.event-location,
-.event-organizer {
+.eventDate,
+.eventLocation,
+.eventOrganizer {
   font-size: 1rem;
   color: #555;
   display: flex;
@@ -149,12 +169,12 @@ body {
   margin: 5px 0;
 }
 
-.dashboard-actions {
+.dashboardActions {
   text-align: center;
   margin-top: 20px;
 }
 
-.dashboard-actions button {
+.dashboardActions button {
   background-color: #2c3e50;
   color: #ffffff;
   border: none;
@@ -166,11 +186,11 @@ body {
   font-weight: bold;
 }
 
-.dashboard-actions button:hover {
+.dashboardActions button:hover {
   background-color: #34495e;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
-.date-filter {
+.dateFilter {
   margin-top: 15px;
 }
\ No newline at end of file
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index bae1f5fd03..b45ed0a2ea 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -160,7 +160,6 @@ export function Header(props) {
   const [hasProfileLoaded, setHasProfileLoaded] = useState(false);
   const dismissalKey = `lastDismissed_${userId}`;
   const [lastDismissed, setLastDismissed] = useState(localStorage.getItem(dismissalKey));
-   const [isAckLoading, setIsAckLoading] = useState(false);
   const unreadNotifications = props.notification?.unreadNotifications; // List of unread notifications
   const dispatch = useDispatch();
   const history = useHistory();