diff --git a/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css b/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css
index 5878ceb156..8b950c76dd 100644
--- a/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css
+++ b/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css
@@ -144,6 +144,20 @@
   padding: 2px;
 }
 
+.reactCalendar :global(.react-calendar__month-view__days__day--neighboringMonth) {
+  background: transparent !important;
+  color: #cbd5e0 !important;
+  opacity: 0.6;
+  pointer-events: auto;
+  border: 1px solid #dee2e6 !important;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__month-view__days__day--neighboringMonth) {
+  background: transparent !important;
+  color: #4a5568 !important;
+  opacity: 0.4;
+}
+
 .reactCalendar :global(.react-calendar__navigation) {
   background-color: #f9f9f9;
   border-bottom: 1px solid #ddd;