diff --git a/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx b/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx
index 828c350bd2..de491460d4 100644
--- a/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx
+++ b/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx
@@ -199,7 +199,9 @@ function CommunityCalendar() {
           {visible.map(event => (
             <div
               key={event.id}
-              className={`${styles.eventItem} ${styles.clickable}`}
+              className={`${styles.eventItem} ${styles.clickable} ${styles[
+                statusMap[event.status]
+              ] || ''}`}
               onClick={() => handleEventClick(event)}
               onKeyDown={e => handleEventKeyPress(e, event)}
               onMouseEnter={() => setHoveredEventId(event.id)}
@@ -207,6 +209,10 @@ function CommunityCalendar() {
               role="button"
               tabIndex={0}
               aria-label={`Click to view details for ${event.title}`}
+              style={{
+                borderRadius: '4px',
+                padding: '2px 6px',
+              }}
             >
               {event.title}
 
@@ -277,6 +283,7 @@ function CommunityCalendar() {
       container: `${styles.communityCalendar} ${darkMode ? styles.communityCalendarDarkMode : ''}`,
       header: `${styles.calendarHeader} ${darkMode ? styles.calendarHeaderDarkMode : ''}`,
       filters: `${styles.calendarFilters} ${darkMode ? styles.calendarFiltersDarkMode : ''}`,
+      select: `${styles.filterSelect} ${darkMode ? styles.filterSelectDarkMode : ''}`,
       main: styles.calendarMain,
       calendarContainer: `${styles.calendarContainer} ${
         darkMode ? styles.calendarContainerDarkMode : ''
@@ -372,21 +379,33 @@ function CommunityCalendar() {
       <header className={calendarClasses.header}>
         <h1>Community Calendar</h1>
         <div className={calendarClasses.filters}>
-          <select value={filter.type} onChange={handleFilterChange('type')}>
+          <select
+            className={calendarClasses.select}
+            value={filter.type}
+            onChange={handleFilterChange('type')}
+          >
             <option value="all">All Types</option>
             {uniqueFilterValues.types.map(t => (
               <option key={t}>{t}</option>
             ))}
           </select>
 
-          <select value={filter.location} onChange={handleFilterChange('location')}>
+          <select
+            className={calendarClasses.select}
+            value={filter.location}
+            onChange={handleFilterChange('location')}
+          >
             <option value="all">All Locations</option>
             {uniqueFilterValues.locations.map(l => (
               <option key={l}>{l}</option>
             ))}
           </select>
 
-          <select value={filter.status} onChange={handleFilterChange('status')}>
+          <select
+            className={calendarClasses.select}
+            value={filter.status}
+            onChange={handleFilterChange('status')}
+          >
             <option value="all">All Statuses</option>
             {uniqueFilterValues.statuses.map(s => (
               <option key={s}>{s}</option>
diff --git a/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css b/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css
index 4abc526f5a..3cab7fcb8a 100644
--- a/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css
+++ b/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css
@@ -488,6 +488,13 @@
   color: #cbd5e0;
 }
 
+.selectedEventMeta .metaItem{
+  list-style-type: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .eventDetailButton {
   border: none;
   background-color: #1e40af;
@@ -1143,3 +1150,4 @@
   }
 
 }
+