diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css
index 57c14a8ce3..9cdd506eaf 100644
--- a/src/components/EventCalendar/EventCalendar.module.css
+++ b/src/components/EventCalendar/EventCalendar.module.css
@@ -318,6 +318,7 @@
 }
 
 @media only screen and (max-width: var(--mobile-breakpoint)) {
+  /* --mobile-breakpoint: 768px */
   .event_list {
     display: none;
   }
@@ -345,20 +346,21 @@
   gap: 10px;
   margin-top: 35px;
 }
-.holidays_card {
+.base_card {
   flex: 1;
   padding: 20px;
-  background-color: var(--holiday-card-bg);
   border-radius: 10px;
   box-shadow: var(--card-shadow);
 }
 
+.holidays_card {
+  composes: base_card;
+  background-color: var(--holiday-card-bg);
+}
+
 .events_card {
-  flex: 1;
-  padding: 20px;
+  composes: base_card;
   background-color: #ffffff;
-  border-radius: 10px;
-  box-shadow: var(--card-shadow);
 }
 .card__holidays {
   background-color: rgba(246, 242, 229, 1);
@@ -479,13 +481,13 @@
   gap: 8px;
 }
 :root {
-  --holiday-indicator-color: rgba(0, 0, 0, 0.15);
-
-  --holiday-date-color: rgba(255, 152, 0, 1);
-
-  --text-color-primary: rgba(51, 51, 51, 1);
+  /* Holiday colors */
+  --color-holiday-indicator: rgba(0, 0, 0, 0.15);
+  --color-holiday-date: rgba(255, 152, 0, 1);
 
-  --text-color-secondary: rgba(85, 85, 85, 1);
+  /* Text colors */
+  --color-text-primary: rgba(51, 51, 51, 1);
+  --color-text-secondary: rgba(85, 85, 85, 1);
 }
 .organizationIndicator {
   background-color: rgba(82, 172, 255, 0.5);
diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx
index a142c5f7dd..e5c210faef 100644
--- a/src/components/EventCalendar/EventCalendar.tsx
+++ b/src/components/EventCalendar/EventCalendar.tsx
@@ -1,6 +1,6 @@
 import EventListCard from 'components/EventListCard/EventListCard';
 import dayjs from 'dayjs';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import Button from 'react-bootstrap/Button';
 import styles from './EventCalendar.module.css';
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
@@ -135,7 +135,19 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
       setCurrentMonth(currentMonth - 1);
     }
   };
-
+  const filteredHolidays = useMemo(
+    () =>
+      holidays?.filter((holiday) => {
+        try {
+          return dayjs(holiday.date, 'MM-DD').month() === currentMonth;
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (e) {
+          console.error(`Invalid date format for holiday: ${holiday.name}`);
+          return false;
+        }
+      }),
+    [holidays, currentMonth],
+  );
   /**
    * Moves the calendar view to the next month.
    */
@@ -317,20 +329,15 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
           <div className={styles.holidays_card}>
             <h3 className={styles.card_title}>Holidays</h3>
             <ul className={styles.card_list}>
-              {holidays
-                ?.filter(
-                  (holiday) =>
-                    dayjs(holiday.date, 'MM-DD').month() === currentMonth,
-                )
-                .map((holiday, index) => (
-                  <li className={styles.card_list_item} key={index}>
-                    <span className={styles.holiday_date}>
-                      {months[parseInt(holiday.date.slice(0, 2), 10) - 1]}{' '}
-                      {holiday.date.slice(3)}
-                    </span>
-                    <span>{holiday.name}</span>
-                  </li>
-                ))}
+              {filteredHolidays.map((holiday, index) => (
+                <li className={styles.card_list_item} key={index}>
+                  <span className={styles.holiday_date}>
+                    {months[parseInt(holiday.date.slice(0, 2), 10) - 1]}{' '}
+                    {holiday.date.slice(3)}
+                  </span>
+                  <span>{holiday.name}</span>
+                </li>
+              ))}
             </ul>
           </div>
 
diff --git a/src/screens/CommunityProfile/CommunityProfile.tsx b/src/screens/CommunityProfile/CommunityProfile.tsx
index d96c923eb3..9be36ffab1 100644
--- a/src/screens/CommunityProfile/CommunityProfile.tsx
+++ b/src/screens/CommunityProfile/CommunityProfile.tsx
@@ -90,7 +90,7 @@ const CommunityProfile = (): JSX.Element => {
   React.useEffect(() => {
     const preLoginData: PreLoginImageryDataType | undefined =
       data?.getCommunityData;
-    preLoginData &&
+    if (preLoginData) {
       setProfileVariable({
         name: preLoginData.name ?? '',
         websiteLink: preLoginData.websiteLink ?? '',
@@ -104,6 +104,7 @@ const CommunityProfile = (): JSX.Element => {
         reddit: preLoginData.socialMediaUrls.reddit ?? '',
         slack: preLoginData.socialMediaUrls.slack ?? '',
       });
+    }
   }, [data]);
 
   /**