diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.module.css b/src/components/CurrentHourIndicator/CurrentHourIndicator.module.css
new file mode 100644
index 0000000000..d2c250035a
--- /dev/null
+++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.module.css
@@ -0,0 +1,19 @@
+.round {
+  background-color: red;
+  border-radius: 100%;
+  width: 15px;
+  height: 15px;
+}
+.line {
+  width: 100%;
+  height: 1px;
+  background-color: red;
+  margin: auto;
+}
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  top: -8px;
+  left: -9px;
+}
diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx b/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx
new file mode 100644
index 0000000000..47bea7827c
--- /dev/null
+++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx
@@ -0,0 +1,10 @@
+import type { Dispatch, SetStateAction } from 'react';
+import React from 'react';
+import { render } from '@testing-library/react';
+import CurrentHourIndicator from './CurrentHourIndicator';
+
+describe('Testing Current Hour Indicator', () => {
+  test('Component Should be rendered properly', async () => {
+    render(<CurrentHourIndicator />);
+  });
+});
diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx b/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx
new file mode 100644
index 0000000000..2d8edfb36b
--- /dev/null
+++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './CurrentHourIndicator.module.css';
+
+const CurrentHourIndicator = (): JSX.Element => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.round}></div>
+      <div className={styles.line}></div>
+    </div>
+  );
+};
+
+export default CurrentHourIndicator;
diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css
index 348a123f81..1229e44a45 100644
--- a/src/components/EventCalendar/EventCalendar.module.css
+++ b/src/components/EventCalendar/EventCalendar.module.css
@@ -46,12 +46,19 @@
   width: 40px;
 }
 .calendar_hour_text {
-  top: 20px;
+  top: -10px;
   left: -5px;
   position: relative;
   color: #707070;
   font-size: 12px;
 }
+.calendar_timezone_text {
+  top: -10px;
+  left: -11px;
+  position: relative;
+  color: #707070;
+  font-size: 9px;
+}
 .calendar_hour_block {
   display: flex;
   flex-direction: row;
@@ -62,6 +69,12 @@
 }
 .event_list_parent {
   position: relative;
+  width: 100%;
+}
+.event_list_parent_current {
+  background-color: #def6e1;
+  position: relative;
+  width: 100%;
 }
 .dummyWidth {
   width: 1px;
diff --git a/src/components/EventCalendar/EventCalendar.test.tsx b/src/components/EventCalendar/EventCalendar.test.tsx
index bd242ea179..d13686d4eb 100644
--- a/src/components/EventCalendar/EventCalendar.test.tsx
+++ b/src/components/EventCalendar/EventCalendar.test.tsx
@@ -3,6 +3,7 @@ import Calendar from './EventCalendar';
 import { render, screen, fireEvent, act } from '@testing-library/react';
 import { MockedProvider } from '@apollo/react-testing';
 import { I18nextProvider } from 'react-i18next';
+import { debug } from 'jest-preview';
 
 import {
   DELETE_EVENT_MUTATION,
@@ -11,6 +12,7 @@ import {
 import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import styles from './EventCalendar.module.css';
+import { BrowserRouter } from 'react-router-dom';
 
 const eventData = [
   {
@@ -272,6 +274,63 @@ describe('Calendar', () => {
     fireEvent.click(lessButton);
     expect(screen.queryByText('Event 3')).not.toBeInTheDocument();
   });
+  // it('Should open the day view calendar', async () => {
+  //   const multipleEventData = [
+  //     {
+  //       _id: '1',
+  //       title: 'Event 1',
+  //       description: 'This is event 1',
+  //       startDate: new Date().toISOString().split('T')[0],
+  //       endDate: new Date().toISOString().split('T')[0],
+  //       location: 'Los Angeles',
+  //       startTime: '14:00',
+  //       endTime: '16:00',
+  //       allDay: false,
+  //       recurring: false,
+  //       isPublic: true,
+  //       isRegisterable: true,
+  //     },
+  //     {
+  //       _id: '2',
+  //       title: 'Event 2',
+  //       description: 'This is event 2',
+  //       startDate: new Date().toISOString().split('T')[0],
+  //       endDate: new Date().toISOString().split('T')[0],
+  //       location: 'Los Angeles',
+  //       startTime: '14:00',
+  //       endTime: '16:00',
+  //       allDay: false,
+  //       recurring: false,
+  //       isPublic: true,
+  //       isRegisterable: true,
+  //     },
+  //     {
+  //       _id: '3',
+  //       title: 'Event 3',
+  //       description: 'This is event 3',
+  //       startDate: new Date().toISOString().split('T')[0],
+  //       endDate: new Date().toISOString().split('T')[0],
+  //       location: 'Los Angeles',
+  //       startTime: '14:00',
+  //       endTime: '16:00',
+  //       allDay: false,
+  //       recurring: false,
+  //       isPublic: true,
+  //       isRegisterable: true,
+  //     },
+  //   ];
+  //    act(() => {
+  //   render(< />);
+  // });
+  //   const selector = screen.getByText('Month');
+  //   await act(() => {
+  //     fireEvent.click(selector);
+  //   });
+  //   act(() => {
+  //     fireEvent.click(getByTestId('selectDay'));
+  //   });
+  //   debug();
+  // });
 
   test('Handles window resize', () => {
     render(
diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx
index 8d037d2f66..a0615963d7 100644
--- a/src/components/EventCalendar/EventCalendar.tsx
+++ b/src/components/EventCalendar/EventCalendar.tsx
@@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react';
 import styles from './EventCalendar.module.css';
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 import { Dropdown } from 'react-bootstrap';
+import CurrentHourIndicator from 'components/CurrentHourIndicator/CurrentHourIndicator';
 
 interface InterfaceEvent {
   _id: string;
@@ -41,7 +42,7 @@ enum Role {
   ADMIN = 'ADMIN',
 }
 
-enum ViewType {
+export enum ViewType {
   DAY = 'Day',
   MONTH = 'Month',
 }
@@ -86,6 +87,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
     '05 AM',
     '06 AM',
     '07 AM',
+    '08 AM',
     '09 AM',
     '10 AM',
     '11 AM',
@@ -97,6 +99,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
     '05 PM',
     '06 PM',
     '07 PM',
+    '08 PM',
     '09 PM',
     '10 PM',
     '11 PM',
@@ -229,6 +232,13 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
     setCurrentDate(today.getDate());
   };
 
+  const timezoneString = `UTC${
+    new Date().getTimezoneOffset() > 0 ? '-' : '+'
+  }${String(Math.floor(Math.abs(new Date().getTimezoneOffset()) / 60)).padStart(
+    2,
+    '0'
+  )}:${String(Math.abs(new Date().getTimezoneOffset()) % 60).padStart(2, '0')}`;
+
   const renderHours = (): JSX.Element => {
     const toggleExpand = (index: number): void => {
       if (expanded === index) {
@@ -272,9 +282,17 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
       <>
         {allDayEventsList.length > 0 && (
           <div className={styles.calendar_hour_block}>
-            <div className={styles.calendar_hour_text_container}>{``}</div>
+            <div className={styles.calendar_hour_text_container}>
+              <p className={styles.calendar_timezone_text}>{timezoneString}</p>
+            </div>
             <div className={styles.dummyWidth}></div>
-            <div className={styles.event_list_parent}>
+            <div
+              className={
+                allDayEventsList.length > 0
+                  ? styles.event_list_parent_current
+                  : styles.event_list_parent
+              }
+            >
               <div
                 className={
                   expanded === -100
@@ -312,11 +330,10 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
         {hours.map((hour, index) => {
           const timeEventsList: any = events
             ?.filter((datas) => {
-              console.log(dayjs(hour, { format: 'hh A' }));
               const currDate = new Date(currentYear, currentMonth, currentDate);
+
               if (
-                datas.startTime?.slice(0, 2) ==
-                  dayjs(hour, { format: 'hh A' }).format('HH') &&
+                datas.startTime?.slice(0, 2) == (index % 24).toString() &&
                 datas.startDate == dayjs(currDate).format('YYYY-MM-DD')
               ) {
                 return datas;
@@ -348,7 +365,17 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
                 <p className={styles.calendar_hour_text}>{`${hour}`}</p>
               </div>
               <div className={styles.dummyWidth}></div>
-              <div className={styles.event_list_parent}>
+              <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
@@ -527,19 +554,18 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
         </div>
         <div className={styles.flex_grow}></div>
         <div>
-          {/* <Dropdown className={styles.selectType} onChange={handleChangeView}>
-            <option value="month">Month</option>
-            <option value="day">Day</option>
-          </Dropdown> */}
           <Dropdown onSelect={handleChangeView} className={styles.selectType}>
             <Dropdown.Toggle variant="success" id="dropdown-basic">
               {viewType || ViewType.MONTH}
             </Dropdown.Toggle>
             <Dropdown.Menu>
-              <Dropdown.Item eventKey={ViewType.MONTH}>
+              <Dropdown.Item
+                eventKey={ViewType.MONTH}
+                data-testid="selectMonth"
+              >
                 {ViewType.MONTH}
               </Dropdown.Item>
-              <Dropdown.Item eventKey={ViewType.DAY}>
+              <Dropdown.Item eventKey={ViewType.DAY} data-testid="selectDay">
                 {ViewType.DAY}
               </Dropdown.Item>
             </Dropdown.Menu>