diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css
index 921af48bae..57c14a8ce3 100644
--- a/src/components/EventCalendar/EventCalendar.module.css
+++ b/src/components/EventCalendar/EventCalendar.module.css
@@ -276,7 +276,8 @@
   padding: 5px;
   width: fit-content;
   display: flex;
-  flex-direction: row;
+  align-items: center;
+  gap: var(--indicator-spacing);
 }
 
 .event_list_hour {
@@ -316,7 +317,7 @@
   flex-grow: 1;
 }
 
-@media only screen and (max-width: 700px) {
+@media only screen and (max-width: var(--mobile-breakpoint)) {
   .event_list {
     display: none;
   }
@@ -331,7 +332,7 @@
   }
 }
 
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: var(--small-mobile-breakpoint)) {
   .btn__more {
     font-size: 12px;
   }
@@ -344,7 +345,21 @@
   gap: 10px;
   margin-top: 35px;
 }
+.holidays_card {
+  flex: 1;
+  padding: 20px;
+  background-color: var(--holiday-card-bg);
+  border-radius: 10px;
+  box-shadow: var(--card-shadow);
+}
 
+.events_card {
+  flex: 1;
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: var(--card-shadow);
+}
 .card__holidays {
   background-color: rgba(246, 242, 229, 1);
   display: flex;
@@ -421,3 +436,149 @@
   background: rgba(146, 200, 141, 0.5);
   border-radius: 10px;
 }
+
+.baseIndicator {
+  border-radius: 5px;
+  width: 20px;
+  height: 12px;
+  display: inline-block;
+}
+
+.holidayText {
+  font-size: 14px;
+  color: #555555;
+}
+.eventsLegend {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.listContainer {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.holidayIndicator {
+  background-color: rgba(0, 0, 0, 0.15);
+  border-radius: 5px;
+  width: 20px;
+  height: 12px;
+  display: inline-block;
+}
+
+.holidayText {
+  font-size: 14px;
+  color: #555555;
+}
+.eventsLegend {
+  display: flex;
+  align-items: center;
+  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);
+
+  --text-color-secondary: rgba(85, 85, 85, 1);
+}
+.organizationIndicator {
+  background-color: rgba(82, 172, 255, 0.5);
+  border-radius: 5px;
+  width: 20px;
+  height: 12px;
+  display: inline-block;
+}
+
+.legendText {
+  font-size: 14px;
+  color: #555555;
+}
+@media only screen and (max-width: 700px) {
+  .listContainer,
+  .eventsLegend {
+    gap: 4px;
+  }
+
+  .holidayIndicator,
+  .organizationIndicator {
+    width: 16px;
+    height: 10px;
+  }
+
+  .holidayText,
+  .legendText {
+    font-size: 12px;
+  }
+}
+.card_title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-color-primary);
+  margin-bottom: 15px;
+}
+
+.card_list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.card_list_item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: var(--text-color-secondary);
+}
+
+.holiday_date {
+  font-weight: 500;
+  color: var(--holiday-date-color);
+}
+
+.calendar_infocards {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 20px;
+  background-color: var(--grey-bg-color);
+}
+
+.holidays_card,
+.events_card {
+  flex: 1;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: var(--card-shadow);
+}
+
+.holidays_card {
+  background-color: var(--holiday-card-bg);
+}
+
+.events_card {
+  background-color: white;
+}
+
+.legend {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.userEvents__color {
+  background-color: rgba(139, 195, 74, 1);
+  border-radius: 5px;
+  width: 20px;
+  height: 12px;
+  display: inline-block;
+}
diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx
index 592456f295..a142c5f7dd 100644
--- a/src/components/EventCalendar/EventCalendar.tsx
+++ b/src/components/EventCalendar/EventCalendar.tsx
@@ -1,16 +1,14 @@
 import EventListCard from 'components/EventListCard/EventListCard';
 import dayjs from 'dayjs';
-import Button from 'react-bootstrap/Button';
 import React, { useState, useEffect } from 'react';
+import Button from 'react-bootstrap/Button';
 import styles from './EventCalendar.module.css';
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
-import CurrentHourIndicator from 'components/CurrentHourIndicator/CurrentHourIndicator';
 import { ViewType } from 'screens/OrganizationEvents/OrganizationEvents';
 import HolidayCard from '../HolidayCards/HolidayCard';
-import { holidays, hours, months, weekdays } from './constants';
+import { holidays, months, weekdays } from './constants';
 import type { InterfaceRecurrenceRule } from 'utils/recurrenceUtils';
 import YearlyEventCalender from './YearlyEventCalender';
-
 interface InterfaceEventListCardProps {
   userRole?: string;
   key?: string;
@@ -75,7 +73,6 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
   );
   const [expanded, setExpanded] = useState<number>(-1);
   const [windowWidth, setWindowWidth] = useState<number>(window.screen.width);
-
   useEffect(() => {
     function handleResize(): void {
       setWindowWidth(window.screen.width);
@@ -224,7 +221,6 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
         setExpanded(index);
       }
     };
-
     /*istanbul ignore next*/
     const allDayEventsList: JSX.Element[] =
       events
@@ -272,7 +268,6 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
             />
           );
         }) || [];
-
     return (
       <>
         <div className={styles.calendar_hour_block}>
@@ -293,7 +288,6 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
                   ? styles.expand_list_container
                   : styles.list_container
               }
-              style={{ width: 'fit-content' }}
             >
               <div
                 className={
@@ -310,9 +304,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
                 (windowWidth <= 700 && allDayEventsList?.length > 0)) && (
                 <button
                   className={styles.btn__more}
-                  onClick={() => {
-                    toggleExpand(-100);
-                  }}
+                  onClick={() => toggleExpand(-100)}
                 >
                   {expanded === -100 ? 'View less' : 'View all'}
                 </button>
@@ -320,112 +312,50 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
             </div>
           </div>
         </div>
-        {hours.map((hour, index) => {
-          const timeEventsList: JSX.Element[] =
-            events
-              ?.filter((datas) => {
-                const currDate = new Date(
-                  currentYear,
-                  currentMonth,
-                  currentDate,
-                );
 
-                if (
-                  parseInt(datas.startTime?.slice(0, 2) as string).toString() ==
-                    (index % 24).toString() &&
-                  datas.startDate == dayjs(currDate).format('YYYY-MM-DD')
-                ) {
-                  return datas;
-                }
-              })
-              .map((datas: InterfaceEventListCardProps) => {
-                const attendees: { _id: string }[] = [];
-                datas.attendees?.forEach((attendee: { _id: string }) => {
-                  const r = {
-                    _id: attendee._id,
-                  };
-
-                  attendees.push(r);
-                });
+        <div className={styles.calendar_infocards}>
+          <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>
+                ))}
+            </ul>
+          </div>
 
-                return (
-                  <EventListCard
-                    refetchEvents={refetchEvents}
-                    userRole={userRole}
-                    key={datas._id}
-                    id={datas._id}
-                    eventLocation={datas.location}
-                    eventName={datas.title}
-                    eventDescription={datas.description}
-                    startDate={datas.startDate}
-                    endDate={datas.endDate}
-                    startTime={datas.startTime}
-                    endTime={datas.endTime}
-                    allDay={datas.allDay}
-                    recurring={datas.recurring}
-                    recurrenceRule={datas.recurrenceRule}
-                    isRecurringEventException={datas.isRecurringEventException}
-                    isPublic={datas.isPublic}
-                    isRegisterable={datas.isRegisterable}
-                    registrants={attendees}
-                    creator={datas.creator}
-                  />
-                );
-              }) || [];
-          /*istanbul ignore next*/
-          return (
-            <div key={hour} className={styles.calendar_hour_block}>
-              <div className={styles.calendar_hour_text_container}>
-                <p className={styles.calendar_hour_text}>{`${hour}`}</p>
+          <div className={styles.events_card}>
+            <h3 className={styles.card_title}>Events</h3>
+            <div className={styles.legend}>
+              <div className={styles.listContainer}>
+                <span className={styles.holidayIndicator}></span>
+                <span className={styles.holidayText}>Holidays</span>
               </div>
-              <div className={styles.dummyWidth}></div>
-              <div
-                className={
-                  timeEventsList?.length > 0
-                    ? styles.event_list_parent_current
-                    : styles.event_list_parent
-                }
-              >
-                {index % 24 == new Date().getHours() &&
-                  new Date().getDate() == currentDate && (
-                    <CurrentHourIndicator />
-                  )}
-                <div
-                  className={
-                    expanded === index
-                      ? styles.expand_list_container
-                      : styles.list_container
-                  }
-                  style={{ width: 'fit-content' }}
-                >
-                  <div
-                    className={
-                      expanded === index
-                        ? styles.expand_event_list
-                        : styles.event_list
-                    }
-                  >
-                    {/*istanbul ignore next*/}
-                    {expanded === index
-                      ? timeEventsList
-                      : timeEventsList?.slice(0, 1)}
-                  </div>
-                  {(timeEventsList?.length > 1 ||
-                    (windowWidth <= 700 && timeEventsList?.length > 0)) && (
-                    <button
-                      className={styles.btn__more}
-                      onClick={() => {
-                        toggleExpand(index);
-                      }}
-                    >
-                      {expanded === index ? 'View less' : 'View all'}
-                    </button>
-                  )}
-                </div>
+              <div className={styles.eventsLegend}>
+                <span className={styles.organizationIndicator}></span>
+                <span className={styles.legendText}>
+                  Events Created by Organization
+                </span>
+              </div>
+              <div className={styles.eventsLegend}>
+                <span className={styles.userEvents__color}></span>
+                <span className={styles.legendText}>
+                  Events Created by User
+                </span>
               </div>
             </div>
-          );
-        })}
+          </div>
+        </div>
       </>
     );
   };
@@ -457,22 +387,20 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
     return days.map((date, index) => {
       const className = [
         date.getDay() === 0 || date.getDay() === 6 ? styles.day_weekends : '',
-        date.toLocaleDateString() === today.toLocaleDateString() //Styling for today day cell
+        date.toLocaleDateString() === today.toLocaleDateString()
           ? styles.day__today
           : '',
-        date.getMonth() !== currentMonth ? styles.day__outside : '', //Styling for days outside the current month
+        date.getMonth() !== currentMonth ? styles.day__outside : '',
         selectedDate?.getTime() === date.getTime() ? styles.day__selected : '',
         styles.day,
       ].join(' ');
       const toggleExpand = (index: number): void => {
-        /*istanbul ignore next*/
         if (expanded === index) {
           setExpanded(-1);
         } else {
           setExpanded(index);
         }
       };
-      /*istanbul ignore next*/
       const allEventsList: JSX.Element[] =
         events
           ?.filter((datas) => {
@@ -521,6 +449,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
         .map((holiday) => {
           return <HolidayCard key={holiday.name} holidayName={holiday.name} />;
         });
+
       return (
         <div
           key={index}
@@ -536,7 +465,6 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
             >
               <div
                 className={
-                  /*istanbul ignore next*/
                   expanded === index
                     ? styles.expand_event_list
                     : styles.event_list
@@ -555,19 +483,14 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
               </div>
               {(allEventsList?.length > 2 ||
                 (windowWidth <= 700 && allEventsList?.length > 0)) && (
-                /*istanbul ignore next*/
                 <button
                   className={styles.btn__more}
                   data-testid="more"
-                  /*istanbul ignore next*/
                   onClick={() => {
                     toggleExpand(index);
                   }}
                 >
-                  {
-                    /*istanbul ignore next*/
-                    expanded === index ? 'View less' : 'View all'
-                  }
+                  {expanded === index ? 'View less' : 'View all'}
                 </button>
               )}
             </div>
@@ -622,7 +545,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
       )}
       <div className={`${styles.calendar__scroll} customScroll`}>
         {viewType == ViewType.MONTH ? (
-          <div>
+          <>
             <div className={styles.calendar__weekdays}>
               {weekdays.map((weekday, index) => (
                 <div key={index} className={styles.weekday}>
@@ -631,18 +554,14 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
               ))}
             </div>
             <div className={styles.calendar__days}>{renderDays()}</div>
-          </div>
+          </>
+        ) : viewType == ViewType.YEAR ? (
+          <YearlyEventCalender eventData={eventData} />
         ) : (
-          // <YearlyEventCalender eventData={eventData} />
-          <div>
-            {viewType == ViewType.YEAR ? (
-              <YearlyEventCalender eventData={eventData} />
-            ) : (
-              <div className={styles.calendar__hours}>{renderHours()}</div>
-            )}
-          </div>
+          <div className={styles.calendar__hours}>{renderHours()}</div>
         )}
       </div>
+
       <div>
         {viewType == ViewType.YEAR ? (
           <YearlyEventCalender eventData={eventData} />