diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css
index b4bfc50cda..1dfc2f73bc 100644
--- a/src/components/EventCalendar/EventCalendar.module.css
+++ b/src/components/EventCalendar/EventCalendar.module.css
@@ -482,9 +482,14 @@
   --color-holiday-indicator: rgba(0, 0, 0, 0.15);
   --color-holiday-date: rgba(255, 152, 0, 1);
   --mobile-breakpoint: 700px;
+  --small-mobile-breakpoint: 480px; /* Adjust value based on your needs */
   /* Text colors */
   --color-text-primary: rgba(51, 51, 51, 1);
   --color-text-secondary: rgba(85, 85, 85, 1);
+  /* Card styles */
+  --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --holiday-card-bg: #f6f2e5;
+  --holiday-date-color: #ea7b56;
 }
 .organizationIndicator {
   composes: baseIndicator;
@@ -518,12 +523,6 @@
   color: var(--text-color-primary);
   margin-bottom: 15px;
 }
-.card_title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-color-primary);
-  margin-bottom: 15px;
-}
 
 .card_list {
   list-style: none;
@@ -555,6 +554,14 @@
   background-color: var(--grey-bg-color);
 }
 
+.userEvents__color {
+  background-color: rgba(139, 195, 74, 1);
+  border-radius: 5px;
+  width: 20px;
+  height: 12px;
+  display: inline-block;
+}
+
 .holidays_card,
 .events_card {
   flex: 1;
@@ -578,9 +585,6 @@
 }
 
 .userEvents__color {
+  composes: baseIndicator;
   background-color: rgba(139, 195, 74, 1);
-  border-radius: 5px;
-  width: 20px;
-  height: 12px;
-  display: inline-block;
 }