diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx
index 397df845fb0..01426ca0474 100644
--- a/src/components/EventCalendar/EventCalendar.tsx
+++ b/src/components/EventCalendar/EventCalendar.tsx
@@ -348,7 +348,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
                     {months[parseInt(holiday.date.slice(0, 2), 10) - 1]}{' '}
                     {holiday.date.slice(3)}
                   </span>
-                  <span>{holiday.name}</span>
+                  <span className={styles.holiday_name}>{holiday.name}</span>
                 </li>
               ))}
             </ul>
@@ -357,21 +357,15 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
           <div className={styles.events_card} role="region" aria-label="Events">
             <h3 className={styles.card_title}>Events</h3>
             <div className={styles.legend}>
-              <div className={styles.list_container}>
-                <span className={styles.holidayIndicator}></span>
-                <span className={styles.holidayText}>Holidays</span>
-              </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 className={styles.list_container_holidays}>
+                <span className={styles.holidayIndicator}></span>
+                <span className={styles.holidayText}>Holidays</span>
               </div>
             </div>
           </div>
@@ -519,34 +513,36 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
     <div className={styles.calendar}>
       {viewType != ViewType.YEAR && (
         <div className={styles.calendar__header}>
-          <Button
-            variant="outlined"
-            className={styles.buttonEventCalendar}
-            onClick={
-              viewType == ViewType.DAY ? handlePrevDate : handlePrevMonth
-            }
-            data-testid="prevmonthordate"
-          >
-            <ChevronLeft />
-          </Button>
+          <div className={styles.calender_month}>
+            <Button
+              variant="outlined"
+              className={styles.buttonEventCalendar}
+              onClick={
+                viewType == ViewType.DAY ? handlePrevDate : handlePrevMonth
+              }
+              data-testid="prevmonthordate"
+            >
+              <ChevronLeft />
+            </Button>
 
-          <div
-            className={styles.calendar__header_month}
-            data-testid="current-date"
-          >
-            {viewType == ViewType.DAY ? `${currentDate}` : ``} {currentYear}{' '}
-            <div>{months[currentMonth]}</div>
+            <div
+              className={styles.calendar__header_month}
+              data-testid="current-date"
+            >
+              {viewType == ViewType.DAY ? `${currentDate}` : ``} {currentYear}{' '}
+              <div>{months[currentMonth]}</div>
+            </div>
+            <Button
+              variant="outlined"
+              className={styles.buttonEventCalendar}
+              onClick={
+                viewType == ViewType.DAY ? handleNextDate : handleNextMonth
+              }
+              data-testid="nextmonthordate"
+            >
+              <ChevronRight />
+            </Button>
           </div>
-          <Button
-            variant="outlined"
-            className={styles.buttonEventCalendar}
-            onClick={
-              viewType == ViewType.DAY ? handleNextDate : handleNextMonth
-            }
-            data-testid="nextmonthordate"
-          >
-            <ChevronRight />
-          </Button>
           <div>
             <Button
               className={styles.editButton}
diff --git a/src/components/EventCalendar/EventHeader.tsx b/src/components/EventCalendar/EventHeader.tsx
index 6fe18149697..19492be0ae5 100644
--- a/src/components/EventCalendar/EventHeader.tsx
+++ b/src/components/EventCalendar/EventHeader.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Button, Form } from 'react-bootstrap';
-import { Search } from '@mui/icons-material';
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
+import AddIcon from '@mui/icons-material/Add';
 import styles from '../../style/app.module.css';
 import { ViewType } from '../../screens/OrganizationEvents/OrganizationEvents';
 import { useTranslation } from 'react-i18next';
@@ -35,7 +36,10 @@ function eventHeader({
   });
 
   return (
-    <div className={styles.calendarEventHeader}>
+    <div
+      className={styles.calendarEventHeader}
+      data-testid="calendarEventHeader"
+    >
       <div className={styles.calendar__header}>
         <div className={styles.input}>
           <Form.Control
@@ -57,12 +61,13 @@ function eventHeader({
           />
           <Button
             className={styles.searchButton}
+            data-testid="searchButton"
             style={{ marginBottom: '10px' }}
           >
-            <Search />
+            <SearchOutlinedIcon />
           </Button>
         </div>
-        <div className={styles.flex_grow}></div>
+        {/* <div className={styles.flex_grow}></div> */}
         <div className={styles.space}>
           <SortingButton
             title={t('viewType')}
@@ -88,14 +93,25 @@ function eventHeader({
             className={styles.dropdown}
             buttonLabel={t('eventType')}
           />
-          <Button
-            variant="success"
-            className={styles.dropdown}
-            onClick={showInviteModal}
-            data-testid="createEventModalBtn"
-          >
-            Create Event
-          </Button>
+          <div className={styles.selectTypeEventHeader}>
+            <Button
+              variant="success"
+              className={styles.dropdown}
+              onClick={showInviteModal}
+              data-testid="createEventModalBtn"
+            >
+              <div className="">
+                <AddIcon
+                  sx={{
+                    fontSize: '25px',
+                    marginBottom: '2px',
+                    marginRight: '2px',
+                  }}
+                />
+                <span>Create</span>
+              </div>
+            </Button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/EventCalendar/constants.js b/src/components/EventCalendar/constants.js
index f2b770426c9..3cacad758ae 100644
--- a/src/components/EventCalendar/constants.js
+++ b/src/components/EventCalendar/constants.js
@@ -13,7 +13,15 @@ export const holidays = [
   },
   { name: 'Christmas Day', date: '12-25', month: 'December' }, // December 25th
 ];
-export const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+export const weekdays = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+];
 export const months = [
   'January',
   'February',
diff --git a/src/components/HolidayCards/HolidayCard.module.css b/src/components/HolidayCards/HolidayCard.module.css
deleted file mode 100644
index c7686ab8702..00000000000
--- a/src/components/HolidayCards/HolidayCard.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.card {
-  background-color: #b4dcb7;
-  font-size: 14px;
-  font-weight: 400;
-  display: flex;
-  padding: 8px 4px;
-  border-radius: 5px;
-  margin-bottom: 4px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
diff --git a/src/components/HolidayCards/HolidayCard.spec.tsx b/src/components/HolidayCards/HolidayCard.spec.tsx
new file mode 100644
index 00000000000..cb865a267b8
--- /dev/null
+++ b/src/components/HolidayCards/HolidayCard.spec.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { describe, test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import HolidayCard from './HolidayCard';
+import styles from './../../style/app.module.css';
+
+describe('HolidayCard Component', () => {
+  test('renders without crashing', () => {
+    render(<HolidayCard holidayName="Christmas" />);
+    expect(screen.getByTestId('holiday-card')).toBeDefined();
+  });
+
+  test('displays the provided holiday name', () => {
+    const testHolidayName = 'New Year';
+    render(<HolidayCard holidayName={testHolidayName} />);
+
+    const cardElement = screen.getByTestId('holiday-card');
+    expect(cardElement.textContent).toBe(testHolidayName);
+  });
+
+  test('applies the correct CSS class', () => {
+    render(<HolidayCard holidayName="Easter" />);
+
+    const cardElement = screen.getByTestId('holiday-card');
+    expect(cardElement.className).toBe(styles.holidayCard);
+  });
+
+  test('handles empty holiday name', () => {
+    render(<HolidayCard holidayName="" />);
+
+    const cardElement = screen.getByTestId('holiday-card');
+    expect(cardElement.textContent).toBe('');
+  });
+
+  test('handles long holiday names', () => {
+    const longHolidayName = 'International Talk Like a Pirate Day Celebration';
+    render(<HolidayCard holidayName={longHolidayName} />);
+
+    const cardElement = screen.getByTestId('holiday-card');
+    expect(cardElement.textContent).toBe(longHolidayName);
+  });
+
+  // TypeScript compile-time tests
+  test('TypeScript props validation', () => {
+    // @ts-expect-error - Testing TypeScript validation for missing required prop
+    render(<HolidayCard />);
+
+    // @ts-expect-error - Testing TypeScript validation for wrong prop type
+    render(<HolidayCard holidayName={123} />);
+  });
+});
diff --git a/src/components/HolidayCards/HolidayCard.tsx b/src/components/HolidayCards/HolidayCard.tsx
index 56ac86405da..5bcc9f95f5b 100644
--- a/src/components/HolidayCards/HolidayCard.tsx
+++ b/src/components/HolidayCards/HolidayCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './HolidayCard.module.css';
+import styles from './../../style/app.module.css';
 
 // Props for the HolidayCard component
 interface InterfaceHolidayList {
@@ -13,8 +13,11 @@ interface InterfaceHolidayList {
  * @returns JSX element representing a card with the holiday name.
  */
 const HolidayCard = (props: InterfaceHolidayList): JSX.Element => {
-  /*istanbul ignore next*/
-  return <div className={styles.card}>{props?.holidayName}</div>;
+  return (
+    <div className={styles.holidayCard} data-testid="holiday-card">
+      {props?.holidayName}
+    </div>
+  );
 };
 
 export default HolidayCard;
diff --git a/src/screens/UserPortal/Events/Events.spec.tsx b/src/screens/UserPortal/Events/Events.spec.tsx
index 0e494020197..86d257a9371 100644
--- a/src/screens/UserPortal/Events/Events.spec.tsx
+++ b/src/screens/UserPortal/Events/Events.spec.tsx
@@ -650,7 +650,7 @@ describe('Testing Events Screen [User Portal]', () => {
     const calenderView = 'Calendar View';
 
     expect(screen.queryAllByText(calenderView)).not.toBeNull();
-    expect(screen.getByText('Sun')).toBeInTheDocument();
+    expect(screen.getByText('Sunday')).toBeInTheDocument();
   });
 
   it('Testing DatePicker and TimePicker', async () => {
diff --git a/src/screens/UserPortal/Events/Events.tsx b/src/screens/UserPortal/Events/Events.tsx
index a6862c0a731..2e3cadedc3d 100644
--- a/src/screens/UserPortal/Events/Events.tsx
+++ b/src/screens/UserPortal/Events/Events.tsx
@@ -121,8 +121,6 @@ export default function events(): JSX.Element {
           createChat: createChatCheck,
         },
       });
-
-      /* istanbul ignore next */
       if (createEventData) {
         toast.success(t('eventCreated') as string);
         refetch();
@@ -137,7 +135,6 @@ export default function events(): JSX.Element {
       setCreateEventmodalisOpen(false);
     } catch (error: unknown) {
       console.error('create event error', error);
-      /* istanbul ignore next */
       errorHandler(t, error);
     }
   };
@@ -147,7 +144,6 @@ export default function events(): JSX.Element {
    *
    * @returns Void.
    */
-  /* istanbul ignore next */
   const toggleCreateEventModal = (): void =>
     setCreateEventmodalisOpen(!createEventModal);
 
@@ -188,7 +184,6 @@ export default function events(): JSX.Element {
   };
 
   // Update the list of events when the data from the query changes
-  /* istanbul ignore next */
   React.useEffect(() => {
     if (data) {
       setEvents(data.eventsByOrganizationConnection);
@@ -200,7 +195,6 @@ export default function events(): JSX.Element {
    *
    * @returns Void.
    */
-  /* istanbul ignore next */
   const showInviteModal = (): void => {
     setCreateEventmodalisOpen(true);
   };
@@ -211,9 +205,7 @@ export default function events(): JSX.Element {
    * @param item - The view type to set, or null to reset.
    * @returns Void.
    */
-  /* istanbul ignore next */
   const handleChangeView = (item: string | null): void => {
-    /*istanbul ignore next*/
     if (item) {
       setViewType(item as ViewType);
     }
@@ -222,7 +214,7 @@ export default function events(): JSX.Element {
   return (
     <>
       <div className={`d-flex flex-row`}>
-        <div className={`${styles.mainContainer}`}>
+        <div className={`${styles.mainContainerEvent}`}>
           <EventHeader
             viewType={viewType}
             showInviteModal={showInviteModal}
diff --git a/src/style/app.module.css b/src/style/app.module.css
index dfba7748869..fea01199a51 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -46,6 +46,11 @@
   --grey-border-box-color: #e8e5e5;
   --subtle-blue-grey: #7c9beb;
   --subtle-blue-grey-hover: #5f7e91;
+  --search-bar-icon-blue: #a8c7fa;
+  --holidays-card-background-color: #e0e9ff;
+  --holidays-card-date-color: #3771c8;
+  --events-card-background-color: #eaebef;
+  --organization-indicator-color: #a8c7fa;
   --white: #fff;
   --black: black;
   --rating-star-filled: #ff6d75;
@@ -279,8 +284,9 @@
   color: var(--brown-color) !important;
   position: relative;
   display: inline-block;
-  /* margin-top: 10px;
-  margin-bottom: 10px; */
+  margin-top: 10px;
+  margin-bottom: 10px;
+  box-shadow: 2.5px 2.5px 2.5px rgba(0, 0, 0, 0.3);
 }
 
 .dropdown:is(
@@ -340,6 +346,13 @@
 .input {
   flex: 1;
   position: relative;
+  margin-right: 80px;
+}
+
+.eventCreatebtn {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
 }
 
 .btnsContainer {
@@ -462,7 +475,7 @@
 .searchButton {
   margin-bottom: 10px;
   background-color: var(--search-button-bg);
-  border-color: var(--search-button-border);
+  border-color: var(--search-button-bg);
   position: absolute;
   z-index: 10;
   bottom: 0;
@@ -474,7 +487,7 @@
 
 .searchButton:hover {
   background-color: var(--search-button-hover-bg, var(--light-blue-color));
-  border-color: var(--search-button-border);
+  border-color: var(--search-button-hover-bg, var(--light-blue-color));
 }
 
 .searchButton:active {
@@ -4408,6 +4421,15 @@ button[data-testid='createPostBtn'] {
   padding: 0 1rem;
 }
 
+.mainContainerEvent {
+  margin-top: 2rem;
+  width: 100%;
+  flex-grow: 3;
+  max-height: 90vh;
+  overflow: auto;
+  padding: 0 1rem;
+}
+
 .selectType {
   border-radius: 10px;
 }
@@ -4915,11 +4937,8 @@ button[data-testid='createPostBtn'] {
 .calendar__days {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
-  grid-template-rows: repeat(6, 1fr);
-}
-
-.day__outside {
-  color: var(--grey-dark) !important;
+  grid-template-rows: repeat(5, 1fr);
+  margin-bottom: 30px;
 }
 
 .day__selected {
@@ -5396,23 +5415,32 @@ button[data-testid='createPostBtn'] {
 .calendar {
   font-family: sans-serif;
   font-size: 1.2rem;
-  margin-bottom: 20px;
-  background: var(--grey-bg-color);
+  margin-bottom: 10px;
+  background: var(--white-color);
   border-radius: 10px;
-  padding: 5px;
+  padding-left: 70px;
+  padding-right: 70px;
+  padding-top: 5px;
 }
 
 .calendar__header {
   display: flex;
   align-items: center;
-  margin: 2rem 10px 0px 10px;
+  justify-content: space-between;
+  margin-right: 50px;
+  /* margin: 2rem 10px 0px 10px; */
+}
+
+.calender_month {
+  display: flex;
+  align-items: center;
 }
 
 .calendar__header_month {
   margin: 0.5rem;
   color: var(--grey-dark);
   font-weight: 800;
-  font-size: 55px;
+  font-size: 45px;
   display: flex;
   gap: 23px;
   flex-direction: row;
@@ -5426,11 +5454,11 @@ button[data-testid='createPostBtn'] {
 
 .buttonEventCalendar {
   border-radius: 100px;
-  color: var(--bs-gray-600);
-  background-color: var(--black-shadow-color);
-  font-weight: bold;
+  color: var(--bs-gray);
+  /* background-color: var(--black-shadow-color); */
+  /* font-weight: bold; */
   border: 0px;
-  font-size: 20px;
+  font-size: 40px;
 }
 
 .calendar__weekdays {
@@ -5438,11 +5466,11 @@ button[data-testid='createPostBtn'] {
   grid-template-columns: repeat(7, 1fr);
   background-color: var(--black-color);
   font-family: Outfit;
-  height: 60px;
+  height: 25px;
 }
 
 .calendar__scroll {
-  height: 80vh;
+  height: 70vh;
   padding: 10px;
 }
 
@@ -5451,15 +5479,11 @@ button[data-testid='createPostBtn'] {
   justify-content: center;
   align-items: center;
   background-color: var(--white);
+  color: var(--gray-white);
+  font-size: medium;
   font-weight: 600;
 }
 
-.calendar__days {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  grid-template-rows: repeat(6, 1fr);
-}
-
 .calendar_hour_text_container {
   display: flex;
   flex-direction: row;
@@ -5531,12 +5555,12 @@ button[data-testid='createPostBtn'] {
 }
 
 .day_weekends {
-  background-color: var(--black-shadow-color);
+  background-color: var(--grey-light);
 }
 
 .day__outside {
   background-color: var(--white);
-  color: var(--grey-dark);
+  color: var(--grey-light);
 }
 
 .day__selected {
@@ -5548,7 +5572,7 @@ button[data-testid='createPostBtn'] {
   background-color: var(--grey-bg-color);
   font-weight: 700;
   text-decoration: underline;
-  color: var(--light-green);
+  color: var(--blue-subtle);
 }
 
 .day__events {
@@ -5573,7 +5597,7 @@ button[data-testid='createPostBtn'] {
   right: auto;
   overflow: auto;
   padding: 10px 4px 0px 4px;
-  background-color: var(--black-shadow-color);
+  background-color: var(--white-color);
   border: 1px solid var(--grey-border);
   border-radius: 5px;
   margin: 5px;
@@ -5588,8 +5612,9 @@ button[data-testid='createPostBtn'] {
 }
 
 .holidayText {
-  font-size: 14px;
-  color: var(--grey-dark);
+  margin-left: 15px;
+  font-size: 18px;
+  color: var(--black-color);
 }
 
 .eventsLegend {
@@ -5606,17 +5631,33 @@ button[data-testid='createPostBtn'] {
   gap: 8px;
 }
 
+.list_container_holidays {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .holidayIndicator {
-  background-color: var(--grey-bg-color-dark);
+  background-color: var(--black-color);
+  opacity: 15%;
 }
 
+.holidayIndicator,
 .organizationIndicator {
-  background-color: var(--gray-blue);
+  width: 35px;
+  height: 12px;
+  border-radius: 4px;
+}
+
+.organizationIndicator {
+  background-color: var(--organization-indicator-color);
 }
 
 .legendText {
-  font-size: 14px;
-  color: var(--grey-dark);
+  margin-left: 15px;
+  font-size: 18px;
+  color: var(--black-color);
 }
 
 .card_list {
@@ -5634,9 +5675,16 @@ button[data-testid='createPostBtn'] {
 }
 
 .holiday_date {
-  font-weight: 500;
-  margin-right: 10px;
-  color: var(--burnt-orange);
+  font-weight: 600;
+  margin-right: 40px;
+  font-size: 18px;
+  color: var(--holidays-card-date-color);
+}
+
+.holiday_name {
+  font-size: 16px;
+  font-weight: 200;
+  color: var(--black-color);
 }
 
 .calendar_infocards {
@@ -5645,8 +5693,7 @@ button[data-testid='createPostBtn'] {
   justify-content: space-between;
   align-items: flex-start;
   gap: 20px;
-  padding: 20px;
-  background-color: var(--grey-bg-color);
+  padding: 20px 0px 20px 0px;
 }
 
 .holidays_card,
@@ -5658,11 +5705,11 @@ button[data-testid='createPostBtn'] {
 }
 
 .holidays_card {
-  background-color: var(--white);
+  background-color: var(--holidays-card-background-color);
 }
 
 .events_card {
-  background-color: var(--white-color);
+  background-color: var(--events-card-background-color);
 }
 
 .legend {
@@ -5672,8 +5719,10 @@ button[data-testid='createPostBtn'] {
 }
 
 .card_list_item:hover {
-  background-color: var(--grey-bg-color-dark);
+  background-color: var(--blue-subtle);
   transition: background-color 0.2s ease;
+  padding: 0.5px 8px 0.5px 8px;
+  border-radius: 4px;
 }
 
 .card_list_item:focus-visible {
@@ -5705,7 +5754,6 @@ button[data-testid='createPostBtn'] {
 .calendarEventHeader {
   width: 100%;
   margin-bottom: 20px;
-  background: var(--grey-bg-color);
   border-radius: 10px;
   padding: 5px;
 }
@@ -5718,26 +5766,28 @@ button[data-testid='createPostBtn'] {
   flex: 1;
   display: flex;
   align-items: center;
-  justify-content: space-around;
+  gap: 10px;
 }
 
 .createButtonEventHeader {
   background-color: var(--grey-bg-color);
-  color: var(--black-color);
-  width: 130px;
-  margin-left: 5px;
+  color: var(--brown-color);
+  width: 110px;
+  /* margin-left: 5px; */
   border: 1px solid var(--brown-color);
+  box-shadow: 2.5px 2.5px 2.5px rgba(0, 0, 0, 0.3);
 }
 
 .createButtonEventHeader:hover {
   background-color: var(--grey-bg-color);
   color: var(--black-color);
   border: 1px solid var(--brown-color);
+  box-shadow: 2.5px 2.5px 2.5px rgba(0, 0, 0, 0.3);
 }
 
 .selectTypeEventHeader {
   border-radius: 10px;
-  margin-left: 5px;
+  margin: 8px;
 }
 
 @media (max-width: 520px) {
@@ -5759,12 +5809,12 @@ button[data-testid='createPostBtn'] {
   }
 
   /* .input {
-    width: 100%; 
+    width: 100%;
   }
 
   .createButton {
     margin: 0 auto;
-    width: 100%; 
+    width: 100%;
   } */
 }
 
@@ -6275,3 +6325,26 @@ button[data-testid='createPostBtn'] {
     width: 100%;
   }
 }
+
+/* Holiday card */
+.holidayCard {
+  color: var(--black-color);
+  background-color: rgba(0, 0, 0, 0.15);
+  font-size: 10px;
+  font-weight: 400;
+  display: flex;
+  padding: 8px 4px;
+  border-radius: 5px;
+  margin-bottom: 4px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* event calender */
+.card_title {
+  font-size: 20px;
+  margin-bottom: 10px;
+  font-weight: bold;
+  color: var(--black-color);
+}