diff --git a/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx b/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx
new file mode 100644
index 0000000000..719de038c3
--- /dev/null
+++ b/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx
@@ -0,0 +1,42 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import CustomDateTimeModal from './index';
+
+describe('CustomDateTimeModal', () => {
+	const handleCreate = jest.fn();
+	const handleCancel = jest.fn();
+
+	beforeEach(() => {
+		render(
+			<CustomDateTimeModal
+				visible
+				onCreate={handleCreate}
+				onCancel={handleCancel}
+			/>,
+		);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders the modal with title and buttons', () => {
+		expect(screen.getByText('Chose date and time range')).toBeInTheDocument();
+		expect(screen.getByText('Apply')).toBeInTheDocument();
+		expect(screen.getByText('Cancel')).toBeInTheDocument();
+	});
+
+	it('donot calls onCreate when the Apply button is clicked without selecting dates', () => {
+		fireEvent.click(screen.getByText('Apply'));
+
+		expect(handleCreate).toHaveBeenCalledTimes(0);
+		expect(handleCreate).not.toHaveBeenCalledWith(undefined);
+	});
+
+	it('calls onCancel when Cancel button is clicked', () => {
+		fireEvent.click(screen.getByText('Cancel'));
+
+		expect(handleCancel).toHaveBeenCalledTimes(1);
+	});
+});
diff --git a/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx b/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx
index e2e8ad428c..2682815a74 100644
--- a/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx
+++ b/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-bind */
 import { DatePicker, Modal } from 'antd';
 import dayjs, { Dayjs } from 'dayjs';
 import React, { useState } from 'react';
@@ -12,18 +11,21 @@ function CustomDateTimeModal({
 	onCreate,
 	onCancel,
 }: CustomDateTimeModalProps): JSX.Element {
-	const [customDateTimeRange, setCustomDateTimeRange] = useState();
+	const [selectedDate, setDateTime] = useState<DateTimeRangeType>();
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	function handleRangePickerOk(date_time: any): void {
-		setCustomDateTimeRange(date_time);
-	}
+	const onModalOkHandler = (date_time: any): void => {
+		onCreate(date_time);
+		setDateTime(date_time);
+	};
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	function disabledDate(current: any): boolean {
+	const disabledDate = (current: Dayjs): boolean => {
 		const currentDay = dayjs(current);
 		return currentDay.isAfter(dayjs());
-	}
+	};
+
+	const onOk = (): void => {
+		if (selectedDate) onCreate(selectedDate);
+	};
 
 	return (
 		<Modal
@@ -32,13 +34,14 @@ function CustomDateTimeModal({
 			okText="Apply"
 			cancelText="Cancel"
 			onCancel={onCancel}
-			style={{ position: 'absolute', top: 60, right: 40 }}
-			onOk={(): void => onCreate(customDateTimeRange || null)}
+			onOk={onOk}
 		>
 			<RangePicker
 				disabledDate={disabledDate}
-				onOk={handleRangePickerOk}
+				allowClear
+				onOk={onModalOkHandler}
 				showTime
+				onCalendarChange={onModalOkHandler}
 			/>
 		</Modal>
 	);