diff --git a/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx b/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx
index a9b5f305ef..0ab558a1bf 100644
--- a/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx
@@ -4,7 +4,7 @@ import cn from "classnames";
 import { FieldArray, FormikProps } from "formik";
 import Notifications from "../../../shared/Notifications";
 import { getTimezoneOffset, hasAccess } from "../../../../utils/utils";
-import { hours, minutes, weekdays } from "../../../../configs/modalConfig";
+import { weekdays } from "../../../../configs/modalConfig";
 import { getUserInformation } from "../../../../selectors/userInfoSelectors";
 import {
 	getSchedulingSeriesOptions,
@@ -22,6 +22,8 @@ import {
 } from "../../../../slices/eventSlice";
 import { Recording } from "../../../../slices/recordingSlice";
 import lodash, { groupBy } from "lodash";
+import SchedulingTime from "../wizards/scheduling/SchedulingTime";
+import SchedulingLocation from "../wizards/scheduling/SchedulingLocation";
 
 /**
  * This component renders the edit page for scheduled events of the corresponding bulk action
@@ -265,210 +267,87 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 																			</td>
 																			<td>{"UTC" + getTimezoneOffset()}</td>
 																		</tr>
-																		<tr>
-																			<td>
-																				{t(
-																					"EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_TIME"
-																				)}
-																			</td>
-																			<td className="editable ng-isolated-scope">
-																				{/* drop-down for hour
-																				 *
-																				 * Per event there are 14 input fields, so with 'key * 14', the right
-																				 * event is reached. After the '+' comes the number of the input field.
-																				 * This is the third input field for this event.
-																				 */}
-																				<DropDown
-																					value={
-																						groupedEvent
-																							.changedStartTimeHour
+																		<SchedulingTime
+																			hour={groupedEvent.changedStartTimeHour}
+																			minute={groupedEvent.changedStartTimeMinutes}
+																			disabled={false}
+																			title={"EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_TIME"}
+																			hourPlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"}
+																			minutePlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTES"}
+																			callbackHour={(value: string) => {
+																				for (const [i, entry] of formik.values.editedEvents.entries()) {
+																					if (entry.weekday === groupedEvent.weekday ) {
+																						formik.setFieldValue(
+																							`editedEvents.${i}.changedStartTimeHour`,
+																							value
+																						)
 																					}
-																					text={
-																						groupedEvent
-																							.changedStartTimeHour
+																				}
+																			}}
+																			callbackMinute={(value: string) => {
+																				for (const [i, entry] of formik.values.editedEvents.entries()) {
+																					if (entry.weekday === groupedEvent.weekday ) {
+																						formik.setFieldValue(
+																							`editedEvents.${i}.changedStartTimeMinutes`,
+																							value
+																						)
 																					}
-																					options={hours}
-																					type={"time"}
-																					required={true}
-																					handleChange={(element) => {
-																						if (element) {
-																							for (const [i, value] of formik.values.editedEvents.entries()) {
-																								if (value.weekday === groupedEvent.weekday ) {
-																									formik.setFieldValue(
-																										`editedEvents.${i}.changedStartTimeHour`,
-																										element.value
-																									)
-																								}
-																							}
-																						}
-																					}}
-																					placeholder={t(
-																						"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"
-																					)}
-																				/>
-
-																				{/* drop-down for minute
-																				 *
-																				 * Per event there are 14 input fields, so with 'key * 14', the right
-																				 * event is reached. After the '+' comes the number of the input field.
-																				 * This is the third input field for this event.
-																				 */}
-																				<DropDown
-																					value={
-																						groupedEvent
-																							.changedStartTimeMinutes
+																				}
+																			}}
+																		/>
+																		<SchedulingTime
+																			hour={groupedEvent.changedEndTimeHour}
+																			minute={groupedEvent.changedEndTimeMinutes}
+																			disabled={false}
+																			title={"EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.END_TIME"}
+																			hourPlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"}
+																			minutePlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTES"}
+																			callbackHour={(value: string) => {
+																				for (const [i, entry] of formik.values.editedEvents.entries()) {
+																					if (entry.weekday === groupedEvent.weekday ) {
+																						formik.setFieldValue(
+																							`editedEvents.${i}.changedEndTimeHour`,
+																							value
+																						)
 																					}
-																					text={
-																						groupedEvent
-																							.changedStartTimeMinutes
+																				}
+																			}}
+																			callbackMinute={(value: string) => {
+																				for (const [i, entry] of formik.values.editedEvents.entries()) {
+																					if (entry.weekday === groupedEvent.weekday ) {
+																						formik.setFieldValue(
+																							`editedEvents.${i}.changedEndTimeMinutes`,
+																							value
+																						)
 																					}
-																					options={minutes}
-																					type={"time"}
-																					required={true}
-																					handleChange={(element) => {
-																						if (element) {
-																							for (const [i, value] of formik.values.editedEvents.entries()) {
-																								if (value.weekday === groupedEvent.weekday ) {
-																									formik.setFieldValue(
-																										`editedEvents.${i}.changedStartTimeMinutes`,
-																										element.value
-																									)
-																								}
-																							}
-																						}
-																					}}
-																					placeholder={t(
-																						"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE"
-																					)}
-																				/>
-																			</td>
-																		</tr>
-																		<tr>
-																			<td>
-																				{t(
-																					"EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.END_TIME"
-																				)}
-																			</td>
-																			<td className="editable ng-isolated-scope">
-																				{/* drop-down for hour
-																				 *
-																				 * Per event there are 14 input fields, so with 'key * 14', the right
-																				 * event is reached. After the '+' comes the number of the input field.
-																				 * This is the third input field for this event.
-																				 */}
-																				<DropDown
-																					value={
-																						groupedEvent
-																							.changedEndTimeHour
-																					}
-																					text={
-																						groupedEvent
-																							.changedEndTimeHour
-																					}
-																					options={hours}
-																					type={"time"}
-																					required={true}
-																					handleChange={(element) => {
-																						if (element) {
-																							for (const [i, value] of formik.values.editedEvents.entries()) {
-																								if (value.weekday === groupedEvent.weekday ) {
-																									formik.setFieldValue(
-																										`editedEvents.${i}.changedEndTimeHour`,
-																										element.value
-																									)
-																								}
-																							}
-																						}
-																					}}
-																					placeholder={t(
-																						"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"
-																					)}
-																				/>
+																				}
+																			}}
+																		/>
 
-																				{/* drop-down for minute
-																				 *
-																				 * Per event there are 14 input fields, so with 'key * 14', the right
-																				 * event is reached. After the '+' comes the number of the input field.
-																				 * This is the third input field for this event.
-																				 */}
-																				<DropDown
-																					value={
-																						groupedEvent
-																							.changedEndTimeMinutes
-																					}
-																					text={
-																						groupedEvent
-																							.changedEndTimeMinutes
-																					}
-																					options={minutes}
-																					type={"time"}
-																					required={true}
-																					handleChange={(element) => {
-																						if (element) {
-																							for (const [i, value] of formik.values.editedEvents.entries()) {
-																								if (value.weekday === groupedEvent.weekday ) {
-																									formik.setFieldValue(
-																										`editedEvents.${i}.changedEndTimeMinutes`,
-																										element.value
-																									)
-																								}
-																							}
-																						}
-																					}}
-																					placeholder={t(
-																						"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE"
-																					)}
-																				/>
-																			</td>
-																		</tr>
-
-																		{/* Dropdown for location/input device
-																		 *
-																		 * Per event there are 14 input fields, so with 'key * 14', the right
-																		 * event is reached. After the '+' comes the number of the input field.
-																		 * This is the third input field for this event.
-																		 */}
-																		<tr>
-																			<td>
-																				{t(
-																					"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION"
-																				)}
-																			</td>
-																			<td className="editable ng-isolated-scope">
-																				<DropDown
-																					value={
-																						groupedEvent
-																							.changedLocation
-																					}
-																					text={
-																						groupedEvent
-																							.changedLocation
-																					}
-																					options={inputDevices}
-																					type={"captureAgent"}
-																					required={true}
-																					handleChange={(element) => {
-																						if (element) {
-																							for (const [i, value] of formik.values.editedEvents.entries()) {
-																								if (value.weekday === groupedEvent.weekday ) {
-																									formik.setFieldValue(
-																										`editedEvents.${i}.changedLocation`,
-																										element.value
-																									)
-																									formik.setFieldValue(
-																										`editedEvents.${i}.changedDeviceInputs`,
-																										element.value
-																									)
-																								}
-																							}
-																						}
-																					}}
-																					placeholder={`-- ${t(
+																		{/* Dropdown for location/input device */}
+																		<SchedulingLocation
+																			location={groupedEvent.changedLocation}
+																			inputDevices={inputDevices}
+																			disabled={false}
+																			title={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION"}
+																			placeholder={`-- ${t(
 																						"SELECT_NO_OPTION_SELECTED"
 																					)} --`}
-																				/>
-																			</td>
-																		</tr>
+																			callback={(value: string) => {
+																				for (const [i, entry] of formik.values.editedEvents.entries()) {
+																					if (entry.weekday === groupedEvent.weekday ) {
+																						formik.setFieldValue(
+																							`editedEvents.${i}.changedLocation`,
+																							value
+																						)
+																						formik.setFieldValue(
+																							`editedEvents.${i}.changedDeviceInputs`,
+																							value
+																						)
+																					}
+																				}
+																			}}
+																		/>
 																		{/* Radio buttons for weekdays
 																		 *
 																		 */}
diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx
index 20e243e498..1028df0bde 100644
--- a/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx
@@ -3,7 +3,6 @@ import cn from "classnames";
 import _ from "lodash";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { Formik, FormikErrors, FormikProps } from "formik";
-import { Field } from "../../../shared/Field";
 import Notifications from "../../../shared/Notifications";
 import {
 	getSchedulingConflicts,
@@ -29,15 +28,12 @@ import {
 	changeStartHour,
 	changeStartMinute,
 	makeDate,
-	renderValidDate,
 } from "../../../../utils/dateUtils";
-import { hours, minutes } from "../../../../configs/modalConfig";
 import {
 	filterDevicesForAccess,
 	hasDeviceAccess,
 } from "../../../../utils/resourceUtils";
 import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
-import DropDown from "../../../shared/DropDown";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import {
 	checkConflicts,
@@ -50,8 +46,13 @@ import {
 } from "../../../../slices/notificationSlice";
 import { Recording } from "../../../../slices/recordingSlice";
 import { useTranslation } from "react-i18next";
+import SchedulingTime from "../wizards/scheduling/SchedulingTime";
+import SchedulingEndDateDisplay from "../wizards/scheduling/SchedulingEndDateDisplay";
+import SchedulingLocation from "../wizards/scheduling/SchedulingLocation";
+import SchedulingInputs from "../wizards/scheduling/SchedulingInputs";
+import SchedulingConflicts from "../wizards/scheduling/SchedulingConflicts";
 
-/**
+/**../wizards/scheduling/SchedulingTime
  * This component manages the main assets tab of event details modal
  */
 const EventDetailsSchedulingTab = ({
@@ -216,28 +217,9 @@ const EventDetailsSchedulingTab = ({
 
 				<div className="full-col">
 					{
-						/*list of scheduling conflicts*/
-						conflicts.length > 0 && (
-							<table className="main-tbl scheduling-conflict">
-								<tbody>
-									{conflicts.map((conflict, key) => (
-										<tr key={key}>
-											<td>{conflict.title}</td>
-											<td>
-												{t("dateFormats.dateTime.medium", {
-													dateTime: renderValidDate(conflict.start),
-												})}
-											</td>
-											<td>
-												{t("dateFormats.dateTime.medium", {
-													dateTime: renderValidDate(conflict.end),
-												})}
-											</td>
-										</tr>
-									))}
-								</tbody>
-							</table>
-						)
+						<SchedulingConflicts
+							conflicts={conflicts}
+						/>
 					}
 
 					{
@@ -309,294 +291,176 @@ const EventDetailsSchedulingTab = ({
 													</tr>
 
 													{/* start time */}
+													{hasAccessRole && (
+														<SchedulingTime
+															hour={formik.values.scheduleStartHour}
+															minute={formik.values.scheduleStartMinute}
+															disabled={!accessAllowed(formik.values.captureAgent)}
+															title={"EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_TIME"}
+															hourPlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"}
+															minutePlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTES"}
+															callbackHour={(value: string) => {
+																changeStartHour(
+																	value,
+																	formik.values,
+																	formik.setFieldValue,
+																	eventId,
+																	checkConflictsWrapper
+																)
+															}}
+															callbackMinute={(value: string) => {
+																changeStartMinute(
+																	value,
+																	formik.values,
+																	formik.setFieldValue,
+																	eventId,
+																	checkConflictsWrapper
+																)
+															}}
+														/>
+													)}
+													{!hasAccessRole && (
 													<tr>
 														<td>
-															{t(
-																"EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_TIME"
-															)}
+															{t("EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_TIME")}
+														</td>
+														<td>
+															{source.start.hour ? makeTwoDigits(source.start.hour) : ""}:
+															{source.start.minute ? makeTwoDigits(source.start.minute) : ""}
 														</td>
-														{hasAccessRole && (
-															<td className="editable">
-																{/* drop-down for hour
-																	*
-																	* This is the second input field.
-																	*/}
-																<DropDown
-																	value={formik.values.scheduleStartHour}
-																	text={formik.values.scheduleStartHour}
-																	options={hours}
-																	type={"time"}
-																	required={true}
-																	handleChange={(element) => {
-																		if (element) {
-																			changeStartHour(
-																				element.value,
-																				formik.values,
-																				formik.setFieldValue,
-																				eventId,
-																				checkConflictsWrapper
-																			)
-																		}
-																	}}
-																	placeholder={t(
-																		"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"
-																	)}
-																	disabled={
-																		!accessAllowed(formik.values.captureAgent)
-																	}
-																/>
-
-																{/* drop-down for minute
-																	*
-																	* This is the third input field.
-																	*/}
-																<DropDown
-																	value={formik.values.scheduleStartMinute}
-																	text={formik.values.scheduleStartMinute}
-																	options={minutes}
-																	type={"time"}
-																	required={true}
-																	handleChange={(element) => {
-																		if (element) {
-																			changeStartMinute(
-																				element.value,
-																				formik.values,
-																				formik.setFieldValue,
-																				eventId,
-																				checkConflictsWrapper
-																			)
-																		}
-																	}}
-																	placeholder={t(
-																		"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE"
-																	)}
-																	disabled={
-																		!accessAllowed(formik.values.captureAgent)
-																	}
-																/>
-															</td>
-														)}
-														{!hasAccessRole && (
-															<td>
-																{source.start.hour ? makeTwoDigits(source.start.hour) : ""}:
-																{source.start.minute ? makeTwoDigits(source.start.minute) : ""}
-															</td>
-														)}
 													</tr>
-
+													)}
 													{/* duration */}
+													{hasAccessRole && (
+														<SchedulingTime
+															hour={formik.values.scheduleDurationHours}
+															minute={formik.values.scheduleDurationMinutes}
+															disabled={!accessAllowed(formik.values.captureAgent)}
+															title={"EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.DURATION"}
+															hourPlaceholder={"WIZARD.DURATION.HOURS"}
+															minutePlaceholder={"WIZARD.DURATION.MINUTES"}
+															callbackHour={(value: string) => {
+																changeDurationHour(
+																	value,
+																	formik.values,
+																	formik.setFieldValue,
+																	eventId,
+																	checkConflictsWrapper
+																)
+															}}
+															callbackMinute={(value: string) => {
+																changeDurationMinute(
+																	value,
+																	formik.values,
+																	formik.setFieldValue,
+																	eventId,
+																	checkConflictsWrapper
+																)
+															}}
+														/>
+													)}
+													{!hasAccessRole && (
 													<tr>
 														<td>
 															{t(
 																"EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.DURATION"
 															)}
 														</td>
-														{hasAccessRole && (
-															<td className="editable">
-																{/* drop-down for hour
-																	*
-																	* This is the fourth input field.
-																	*/}
-																<DropDown
-																	value={formik.values.scheduleDurationHours}
-																	text={formik.values.scheduleDurationHours}
-																	options={hours}
-																	type={"time"}
-																	required={true}
-																	handleChange={(element) => {
-																		if (element) {
-																			changeDurationHour(
-																				element.value,
-																				formik.values,
-																				formik.setFieldValue,
-																				eventId,
-																				checkConflictsWrapper
-																			)
-																		}
-																	}}
-																	placeholder={t("WIZARD.DURATION.HOURS")}
-																	disabled={
-																		!accessAllowed(formik.values.captureAgent)
-																	}
-																/>
-
-																{/* drop-down for minute
-																	*
-																	* This is the fifth input field.
-																	*/}
-																<DropDown
-																	value={
-																		formik.values.scheduleDurationMinutes
-																	}
-																	text={formik.values.scheduleDurationMinutes}
-																	options={minutes}
-																	type={"time"}
-																	required={true}
-																	handleChange={(element) => {
-																		if (element) {
-																			changeDurationMinute(
-																				element.value,
-																				formik.values,
-																				formik.setFieldValue,
-																				eventId,
-																				checkConflictsWrapper
-																			)
-																		}
-																	}}
-																	placeholder={t("WIZARD.DURATION.MINUTES")}
-																	disabled={
-																		!accessAllowed(formik.values.captureAgent)
-																	}
-																/>
-															</td>
-														)}
-														{!hasAccessRole && (
-															<td>
-																{source.duration.hour ? makeTwoDigits(source.duration.hour) : ""}:
-																{source.duration.minute ? makeTwoDigits(source.duration.minute) : ""}
-															</td>
-														)}
+														<td>
+															{source.duration.hour ? makeTwoDigits(source.duration.hour) : ""}:
+															{source.duration.minute ? makeTwoDigits(source.duration.minute) : ""}
+														</td>
 													</tr>
-
+													)}
 													{/* end time */}
+													{hasAccessRole && (
+														<SchedulingTime
+															hour={formik.values.scheduleEndHour}
+															minute={formik.values.scheduleEndMinute}
+															disabled={!accessAllowed(formik.values.captureAgent)}
+															title={"EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.END_TIME"}
+															hourPlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"}
+															minutePlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE"}
+															callbackHour={(value: string) => {
+																changeEndHour(
+																	value,
+																	formik.values,
+																	formik.setFieldValue,
+																	eventId,
+																	checkConflictsWrapper
+																)
+															}}
+															callbackMinute={(value: string) => {
+																changeEndMinute(
+																	value,
+																	formik.values,
+																	formik.setFieldValue,
+																	eventId,
+																	checkConflictsWrapper
+																)
+															}}
+														/>
+													)}
+													{hasAccessRole &&
+														formik.values.scheduleEndDate.toString() !==
+															formik.values.scheduleStartDate.toString() && (
+																<SchedulingEndDateDisplay
+																	scheduleEndDate={formik.values.scheduleEndDate}
+																/>
+														)
+													}
+													{!hasAccessRole && (
 													<tr>
 														<td>
 															{t(
 																"EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.END_TIME"
 															)}
 														</td>
-														{hasAccessRole && (
-															<td className="editable">
-																{/* drop-down for hour
-																	*
-																	* This is the sixth input field.
-																	*/}
-																<DropDown
-																	value={formik.values.scheduleEndHour}
-																	text={formik.values.scheduleEndHour}
-																	options={hours}
-																	type={"time"}
-																	required={true}
-																	handleChange={(element) => {
-																		if (element) {
-																			changeEndHour(
-																				element.value,
-																				formik.values,
-																				formik.setFieldValue,
-																				eventId,
-																				checkConflictsWrapper
-																			)
-																		}
-																	}}
-																	placeholder={t(
-																		"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"
-																	)}
-																	disabled={
-																		!accessAllowed(formik.values.captureAgent)
-																	}
-																/>
-
-																{/* drop-down for minute
-																	*
-																	* This is the seventh input field.
-																	*/}
-																<DropDown
-																	value={formik.values.scheduleEndMinute}
-																	text={formik.values.scheduleEndMinute}
-																	options={minutes}
-																	type={"time"}
-																	required={true}
-																	handleChange={(element) => {
-																		if (element) {
-																			changeEndMinute(
-																				element.value,
-																				formik.values,
-																				formik.setFieldValue,
-																				eventId,
-																				checkConflictsWrapper
-																			)
-																		}
-																	}}
-																	placeholder={t(
-																		"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE"
-																	)}
-																	disabled={
-																		!accessAllowed(formik.values.captureAgent)
-																	}
-																/>
-
-																{/* display end date if on different day to start date */}
-																{formik.values.scheduleEndDate.toString() !==
-																	formik.values.scheduleStartDate.toString() && (
-																	<span style={{ marginLeft: "10px" }}>
-																		{new Date(
-																			formik.values.scheduleEndDate
-																		).toLocaleDateString(
-																			currentLanguage ? currentLanguage.dateLocale.code : undefined
-																		)}
-																	</span>
-																)}
-															</td>
-														)}
-														{!hasAccessRole && (
-															<td>
-																{source.end.hour ? makeTwoDigits(source.end.hour) : ""}:
-																{source.end.minute ? makeTwoDigits(source.end.minute) : ""}
-																{formik.values.scheduleEndDate.toString() !==
-																	formik.values.scheduleStartDate.toString() && (
-																	<span>
-																		{new Date(
-																			formik.values.scheduleEndDate
-																		).toLocaleDateString(
-																			currentLanguage ? currentLanguage.dateLocale.code : undefined
-																		)}
-																	</span>
-																)}
-															</td>
-														)}
-													</tr>
-
-													{/* capture agent (aka. room or location) */}
-													<tr>
 														<td>
-															{t(
-																"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION"
+															{source.end.hour ? makeTwoDigits(source.end.hour) : ""}:
+															{source.end.minute ? makeTwoDigits(source.end.minute) : ""}
+															{formik.values.scheduleEndDate.toString() !==
+																formik.values.scheduleStartDate.toString() && (
+																<span>
+																	{new Date(
+																		formik.values.scheduleEndDate
+																	).toLocaleDateString(
+																		currentLanguage ? currentLanguage.dateLocale.code : undefined
+																	)}
+																</span>
 															)}
 														</td>
+													</tr>
+													)}
+													{/* capture agent (aka. room or location) */}
 														{hasAccessRole && (
-															<td className="editable">
-																{/* drop-down for capture agents (aka. rooms or locations)
-																	*
-																	* This is the eighth input field.
-																	*/}
-																<DropDown
-																	value={formik.values.captureAgent}
-																	text={formik.values.captureAgent}
-																	options={filterDevicesForAccess(
-																		user,
-																		captureAgents
-																	).filter((a) => filterCaptureAgents(a))}
-																	type={"captureAgent"}
-																	required={true}
-																	handleChange={(element) => {
-																		if (element) {
-																			changeInputs(
-																				element.value,
-																				formik.setFieldValue
-																			)
-																		}
-																	}}
-																	placeholder={t(
+															<SchedulingLocation
+																location={formik.values.captureAgent}
+																inputDevices={filterDevicesForAccess(
+																	user,
+																	captureAgents
+																).filter((a) => filterCaptureAgents(a))}
+																disabled={!accessAllowed(formik.values.captureAgent)}
+																title={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION"}
+																placeholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION"}
+																callback={(value: string) => {
+																	changeInputs(
+																		value,
+																		formik.setFieldValue
+																	)
+																}}
+															/>
+														)}
+														{!hasAccessRole &&
+															<tr>
+																<td>
+																	{t(
 																		"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION"
 																	)}
-																	disabled={
-																		!accessAllowed(formik.values.captureAgent)
-																	}
-																/>
-															</td>
-														)}
-														{!hasAccessRole && <td>{source.device.name}</td>}
-													</tr>
+																</td>
+																<td>{source.device.name}</td>
+															</tr>
+														}
 
 													{/* inputs */}
 													<tr>
@@ -612,29 +476,13 @@ const EventDetailsSchedulingTab = ({
 																	0 &&
 																(hasAccessRole &&
 																accessAllowed(formik.values.captureAgent)
-																	? /* checkboxes for available inputs
-																			*
-																			* These are the input fields starting at 8.
-																			*/
-																		getInputs(formik.values.captureAgent).map(
-																			(inputMethod, key) => (
-																				<label key={key}>
-																					<Field
-																						name="inputs"
-																						type="checkbox"
-																						tabIndex={8 + key}
-																						value={inputMethod.id}
-																					/>
-																					{t(inputMethod.value)}
-																				</label>
-																			)
-																		)
+																	? <SchedulingInputs
+																			inputs={getInputs(formik.values.captureAgent)}
+																		/>
 																	: formik.values.inputs.map((input, key) => (
 																			<span key={key}>
 																				{t(
-																					getInputs(
-																						formik.values.captureAgent
-																					).find(
+																					getInputs(formik.values.captureAgent).find(
 																						(agent) => agent.id === input
 																					)?.value ?? ""
 																				)}
diff --git a/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx b/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx
index 6a1e3aa5c3..5adfa5dbc3 100644
--- a/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx
@@ -4,7 +4,6 @@ import cn from "classnames";
 import Notifications from "../../../shared/Notifications";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import {
-	getCurrentLanguageInformation,
 	getTimezoneOffset,
 	translateOverrideFallback,
 } from "../../../../utils/utils";
@@ -13,13 +12,12 @@ import { Field } from "../../../shared/Field";
 import RenderField from "../../../shared/wizard/RenderField";
 import { getRecordings } from "../../../../selectors/recordingSelectors";
 import { sourceMetadata } from "../../../../configs/sourceConfig";
-import { hours, minutes, weekdays } from "../../../../configs/modalConfig";
+import { weekdays } from "../../../../configs/modalConfig";
 import { getUserInformation } from "../../../../selectors/userInfoSelectors";
 import {
 	filterDevicesForAccess,
 	hasAnyDeviceAccess,
 } from "../../../../utils/resourceUtils";
-import DropDown from "../../../shared/DropDown";
 import {
 	changeDurationHour,
 	changeDurationHourMultiple,
@@ -36,13 +34,17 @@ import {
 	changeStartHourMultiple,
 	changeStartMinute,
 	changeStartMinuteMultiple,
-	renderValidDate,
 } from "../../../../utils/dateUtils";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { Recording, fetchRecordings } from "../../../../slices/recordingSlice";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import { parseISO } from "date-fns";
 import { checkConflicts, UploadAssetsTrack } from "../../../../slices/eventSlice";
+import SchedulingTime from "../wizards/scheduling/SchedulingTime";
+import SchedulingEndDateDisplay from "../wizards/scheduling/SchedulingEndDateDisplay";
+import SchedulingLocation from "../wizards/scheduling/SchedulingLocation";
+import SchedulingInputs from "../wizards/scheduling/SchedulingInputs";
+import SchedulingConflicts from "../wizards/scheduling/SchedulingConflicts";
 
 /**
  * This component renders the source page for new events in the new event wizard.
@@ -109,30 +111,11 @@ const NewSourcePage = <T extends RequiredFormProps>({
 						{/*Show notifications with context events-form*/}
 						<Notifications context="not_corner" />
 
-            {
-              /*list of scheduling conflicts*/
-              conflicts.length > 0 && (
-                <table className="main-tbl scheduling-conflict">
-                  <tbody>
-                    {conflicts.map((conflict, key) => (
-                      <tr key={key}>
-                        <td>{conflict.title}</td>
-                        <td>
-                          {t("dateFormats.dateTime.medium", {
-                            dateTime: renderValidDate(conflict.start),
-                          })}
-                        </td>
-                        <td>
-                          {t("dateFormats.dateTime.medium", {
-                            dateTime: renderValidDate(conflict.end),
-                          })}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              )
-            }
+						{
+							<SchedulingConflicts
+								conflicts={conflicts}
+							/>
+						}
 
 						<div className="obj list-obj">
 							<header className="no-expand">
@@ -402,8 +385,6 @@ const Schedule = <T extends {
 }) => {
 	const { t } = useTranslation();
 
-	const currentLanguage = getCurrentLanguageInformation();
-
 	const renderInputDeviceOptions = () => {
 		if (!!formik.values.location) {
 			let inputDevice = inputDevices.find(
@@ -412,17 +393,11 @@ const Schedule = <T extends {
 			if (!inputDevice) {
 				return <></>;
 			}
-			return inputDevice.inputs.map((input, key) => (
-				<label key={key}>
-					<Field
-						type="checkbox"
-						name="deviceInputs"
-						value={input.id}
-						tabIndex={12}
-					/>
-					{t(input.value)}
-				</label>
-			));
+			return (
+				<SchedulingInputs
+					inputs={inputDevice.inputs}
+				/>
+			)
 		}
 	};
 
@@ -508,247 +483,143 @@ const Schedule = <T extends {
 								</tr>
 							</>
 						)}
-						<tr>
-							<td>
-								{t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_TIME")}{" "}
-								<i className="required">*</i>
-							</td>
-							<td className="editable ng-isolated-scope">
-								{/* drop-down for hour
-								 *
-								 * This is the 13th input field.
-								 */}
-								<DropDown
-									value={formik.values.scheduleStartHour}
-									text={formik.values.scheduleStartHour.toString()}
-									options={hours}
-									type={"time"}
-									required={true}
-									handleChange={(element) => {
-										if (element) {
-											if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
-												changeStartHourMultiple(
-													element.value,
-													formik.values,
-													formik.setFieldValue
-												).then();
-											} else {
-												changeStartHour(
-													element.value,
-													formik.values,
-													formik.setFieldValue
-												).then();
-											}
-										}
-									}}
-									placeholder={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR")}
-								/>
-
-								{/* drop-down for minute
-								 *
-								 * This is the 14th input field.
-								 */}
-								<DropDown
-									value={formik.values.scheduleStartMinute}
-									text={formik.values.scheduleStartMinute.toString()}
-									options={minutes}
-									type={"time"}
-									required={true}
-									handleChange={(element) => {
-										if (element) {
-											if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
-												changeStartMinuteMultiple(
-													element.value,
-													formik.values,
-													formik.setFieldValue
-												).then();
-											} else {
-												changeStartMinute(
-													element.value,
-													formik.values,
-													formik.setFieldValue
-												).then();
-											}
-										}
-									}}
-									placeholder={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE")}
-								/>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								{t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.DURATION")}{" "}
-								<i className="required">*</i>
-							</td>
-							<td className="editable ng-isolated-scope">
-								{/* drop-down for hour
-								 *
-								 * This is the 15th input field.
-								 */}
-								<DropDown
-									value={formik.values.scheduleDurationHours}
-									text={formik.values.scheduleDurationHours.toString()}
-									options={hours}
-									type={"time"}
-									required={true}
-									handleChange={(element) => {
-										if (element) {
-											if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
-												changeDurationHourMultiple(
-													element.value,
-													formik.values,
-													formik.setFieldValue
-												).then();
-											} else {
-												changeDurationHour(
-													element.value,
-													formik.values,
-													formik.setFieldValue
-												).then();
-											}
-										}
-									}}
-									placeholder={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR")}
-								/>
-
-								{/* drop-down for minute
-								 *
-								 * This is the 16th input field.
-								 */}
-								<DropDown
-									value={formik.values.scheduleDurationMinutes}
-									text={formik.values.scheduleDurationMinutes.toString()}
-									options={minutes}
-									type={"time"}
-									required={true}
-									handleChange={(element) => {
-										if (element) {
-											if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
-												changeDurationMinuteMultiple(
-													element.value,
-													formik.values,
-													formik.setFieldValue
-												).then();
-											} else {
-												changeDurationMinute(
-													element.value,
-													formik.values,
-													formik.setFieldValue
-												).then();
-											}
-										}
-									}}
-									placeholder={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE")}
-								/>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								{t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_TIME")}{" "}
-								<i className="required">*</i>
-							</td>
-							<td className="editable ng-isolated-scope">
-								{/* drop-down for hour
-								 *
-								 * This is the 17th input field.
-								 */}
-								<DropDown
-									value={formik.values.scheduleEndHour}
-									text={formik.values.scheduleEndHour.toString()}
-									options={hours}
-									type={"time"}
-									required={true}
-									handleChange={(element) => {
-										if (element) {
-											if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
-												changeEndHourMultiple(
-													element.value,
-													formik.values,
-													formik.setFieldValue
-												).then();
-											} else {
-												changeEndHour(
-													element.value,
-													formik.values,
-													formik.setFieldValue
-												).then();
-											}
-										}
-									}}
-									placeholder={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR")}
-								/>
+						{/* start time */}
+						<SchedulingTime
+							hour={formik.values.scheduleStartHour}
+							minute={formik.values.scheduleStartMinute}
+							disabled={false}
+							title={"EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_TIME"}
+							hourPlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"}
+							minutePlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTES"}
+							callbackHour={(value: string) => {
+								if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
+									changeStartHourMultiple(
+										value,
+										formik.values,
+										formik.setFieldValue
+									);
+								} else {
+									changeStartHour(
+										value,
+										formik.values,
+										formik.setFieldValue
+									);
+								}
+							}}
+							callbackMinute={(value: string) => {
+								if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
+									changeStartMinuteMultiple(
+										value,
+										formik.values,
+										formik.setFieldValue
+									);
+								} else {
+									changeStartMinute(
+										value,
+										formik.values,
+										formik.setFieldValue
+									);
+								}
+							}}
+						/>
+						{/* duration */}
+						<SchedulingTime
+							hour={formik.values.scheduleDurationHours}
+							minute={formik.values.scheduleDurationMinutes}
+							disabled={false}
+							title={"EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.DURATION"}
+							hourPlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"}
+							minutePlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTES"}
+							callbackHour={(value: string) => {
+								if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
+									changeDurationHourMultiple(
+										value,
+										formik.values,
+										formik.setFieldValue
+									);
+								} else {
+									changeDurationHour(
+										value,
+										formik.values,
+										formik.setFieldValue
+									);
+								}
+							}}
+							callbackMinute={(value: string) => {
+								if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
+									changeDurationMinuteMultiple(
+										value,
+										formik.values,
+										formik.setFieldValue
+									);
+								} else {
+									changeDurationMinute(
+										value,
+										formik.values,
+										formik.setFieldValue
+									);
+								}
+							}}
+						/>
+						{/* end time */}
+						<SchedulingTime
+							hour={formik.values.scheduleEndHour}
+							minute={formik.values.scheduleEndMinute}
+							disabled={false}
+							title={"EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_TIME"}
+							hourPlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"}
+							minutePlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTES"}
+							callbackHour={(value: string) => {
+								if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
+									changeEndHourMultiple(
+										value,
+										formik.values,
+										formik.setFieldValue
+									);
+								} else {
+									changeEndHour(
+										value,
+										formik.values,
+										formik.setFieldValue
+									);
+								}
+							}}
+							callbackMinute={(value: string) => {
+								if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
+									changeEndMinuteMultiple(
+										value,
+										formik.values,
+										formik.setFieldValue
+									);
+								} else {
+									changeEndMinute(
+										value,
+										formik.values,
+										formik.setFieldValue
+									);
+								}
+							}}
+						/>
 
-								{/* drop-down for minute
-								 *
-								 * This is the 18th input field.
-								 */}
-								<DropDown
-									value={formik.values.scheduleEndMinute}
-									text={formik.values.scheduleEndMinute.toString()}
-									options={minutes}
-									type={"time"}
-									required={true}
-									handleChange={(element) => {
-										if (element) {
-											if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
-												changeEndMinuteMultiple(
-													element.value,
-													formik.values,
-													formik.setFieldValue
-												).then();
-											} else {
-												changeEndMinute(
-													element.value,
-													formik.values,
-													formik.setFieldValue
-												).then();
-											}
-										}
-									}}
-									placeholder={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE")}
-								/>
+						{/* display end date if on different day to start date, only if this is current source mode */}
+						{formik.values.sourceMode === "SCHEDULE_SINGLE" &&
+							formik.values.scheduleEndDate.toString() !==
+								formik.values.scheduleStartDate.toString() && (
+									<SchedulingEndDateDisplay
+										scheduleEndDate={formik.values.scheduleEndDate}
+									/>
+							)}
 
-								{/* display end date if on different day to start date, only if this is current source mode */}
-								{formik.values.sourceMode === "SCHEDULE_SINGLE" &&
-									formik.values.scheduleEndDate.toString() !==
-										formik.values.scheduleStartDate.toString() && (
-										<span style={{ marginLeft: "10px" }}>
-											{new Date(
-												formik.values.scheduleEndDate
-											).toLocaleDateString(
-												currentLanguage ? currentLanguage.dateLocale.code : undefined
-											)}
-										</span>
-									)}
-							</td>
-						</tr>
-						<tr>
-							<td>
-								{t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION")}{" "}
-								<i className="required">*</i>
-							</td>
-							{/* one options for each capture agents that has input options
-							 *
-							 * This is the 19th input field.
-							 */}
-							<td className="editable ng-isolated-scope">
-								<DropDown
-									value={formik.values.location}
-									text={formik.values.location}
-									options={inputDevices}
-									type={"captureAgent"}
-									required={true}
-									handleChange={(element) => {
-										if (element) {
-											formik.setFieldValue("location", element.value)
-										}
-									}}
-									placeholder={t(
-										"EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION"
-									)}
-								/>
-							</td>
-						</tr>
+						<SchedulingLocation
+								location={formik.values.location}
+								inputDevices={inputDevices}
+								disabled={false}
+								title={"EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION"}
+								placeholder={"EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION"}
+								callback={(value: string) => {
+									formik.setFieldValue("location", value)
+								}}
+							/>
 						<tr>
 							<td>{t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.INPUTS")}</td>
 							<td>
diff --git a/src/components/events/partials/wizards/scheduling/SchedulingConflicts.tsx b/src/components/events/partials/wizards/scheduling/SchedulingConflicts.tsx
new file mode 100644
index 0000000000..d02cc7e301
--- /dev/null
+++ b/src/components/events/partials/wizards/scheduling/SchedulingConflicts.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { renderValidDate } from "../../../../../utils/dateUtils";
+
+const SchedulingConflicts = ({
+	conflicts,
+}: {
+	conflicts: {
+		title: string,
+		start: string,
+		end: string,
+	}[],
+}) => {
+	const { t } = useTranslation();
+
+	return (
+		/*list of scheduling conflicts*/
+		conflicts.length > 0 ? (
+			<table className="main-tbl scheduling-conflict">
+				<tbody>
+					{conflicts.map((conflict, key) => (
+						<tr key={key}>
+							<td>{conflict.title}</td>
+							<td>
+								{t("dateFormats.dateTime.medium", {
+									dateTime: renderValidDate(conflict.start),
+								})}
+							</td>
+							<td>
+								{t("dateFormats.dateTime.medium", {
+									dateTime: renderValidDate(conflict.end),
+								})}
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		) : <></>
+	)
+};
+
+export default SchedulingConflicts;
\ No newline at end of file
diff --git a/src/components/events/partials/wizards/scheduling/SchedulingEndDateDisplay.tsx b/src/components/events/partials/wizards/scheduling/SchedulingEndDateDisplay.tsx
new file mode 100644
index 0000000000..4a3f06d55d
--- /dev/null
+++ b/src/components/events/partials/wizards/scheduling/SchedulingEndDateDisplay.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { getCurrentLanguageInformation } from "../../../../../utils/utils";
+
+const SchedulingEndDateDisplay = ({
+	scheduleEndDate
+}: {
+	scheduleEndDate: string
+}) => {
+		// Get info about the current language and its date locale
+		const currentLanguage = getCurrentLanguageInformation();
+
+	return (
+		<tr>
+			<td></td>
+			<td className="editable ng-isolated-scope">
+				<span style={{ marginLeft: "10px" }}>
+					{new Date(
+						scheduleEndDate
+					).toLocaleDateString(
+						currentLanguage ? currentLanguage.dateLocale.code : undefined
+					)}
+				</span>
+			</td>
+		</tr>
+	)
+};
+
+export default SchedulingEndDateDisplay;
\ No newline at end of file
diff --git a/src/components/events/partials/wizards/scheduling/SchedulingInputs.tsx b/src/components/events/partials/wizards/scheduling/SchedulingInputs.tsx
new file mode 100644
index 0000000000..c43103f156
--- /dev/null
+++ b/src/components/events/partials/wizards/scheduling/SchedulingInputs.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Field } from "formik";
+
+const SchedulingInputs = ({
+	inputs
+}: {
+	inputs: {
+		id: string,
+		value: string
+	}[]
+}) => {
+	const { t } = useTranslation();
+
+	return (
+		<>
+			{inputs.map(
+				(input, key) => (
+					<label key={key}>
+						<Field
+							name="inputs"
+							type="checkbox"
+							value={input.id}
+						/>
+						{t(input.value)}
+					</label>
+				)
+			)}
+		</>
+	)
+};
+
+export default SchedulingInputs;
\ No newline at end of file
diff --git a/src/components/events/partials/wizards/scheduling/SchedulingLocation.tsx b/src/components/events/partials/wizards/scheduling/SchedulingLocation.tsx
new file mode 100644
index 0000000000..f29fa53073
--- /dev/null
+++ b/src/components/events/partials/wizards/scheduling/SchedulingLocation.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import DropDown from "../../../../shared/DropDown";
+import { Recording } from "../../../../../slices/recordingSlice";
+
+const SchedulingLocation = ({
+	location,
+	inputDevices,
+	disabled,
+	title,
+	placeholder,
+	callback,
+}: {
+	location: string,
+	inputDevices: Recording[]
+	disabled: boolean
+	title: string
+	placeholder: string
+	callback: (value: string) => void
+}) => {
+	const { t } = useTranslation();
+
+	return (
+		<tr>
+			<td>
+				{t(title)}{" "}
+				<i className="required">*</i>
+			</td>
+			{/* one options for each capture agents that has input options
+			*
+			* This is the 19th input field.
+			*/}
+			<td className="editable ng-isolated-scope">
+				<DropDown
+					value={location}
+					text={location}
+					options={inputDevices}
+					type={"captureAgent"}
+					required={true}
+					handleChange={(element) => {
+						if (element) {
+							callback(element.value)
+						}
+					}}
+					placeholder={t(placeholder)}
+					disabled={disabled}
+				/>
+			</td>
+		</tr>
+	)
+};
+
+export default SchedulingLocation;
\ No newline at end of file
diff --git a/src/components/events/partials/wizards/scheduling/SchedulingTime.tsx b/src/components/events/partials/wizards/scheduling/SchedulingTime.tsx
new file mode 100644
index 0000000000..dc1281d456
--- /dev/null
+++ b/src/components/events/partials/wizards/scheduling/SchedulingTime.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import DropDown from "../../../../shared/DropDown";
+import { hours, minutes } from "../../../../../configs/modalConfig";
+
+const SchedulingTime = ({
+	hour,
+	minute,
+	disabled,
+	title,
+	hourPlaceholder,
+	minutePlaceholder,
+	callbackHour,
+	callbackMinute
+}: {
+	hour: string,
+	minute: string,
+	disabled: boolean
+	title: string
+	hourPlaceholder: string
+	minutePlaceholder: string
+	callbackHour: (value: string) => void
+	callbackMinute: (value: string) => void
+}) => {
+	const { t } = useTranslation();
+
+	return (
+		<tr>
+			<td>
+				{t(title)}{" "}
+				<i className="required">*</i>
+			</td>
+			<td className="editable ng-isolated-scope">
+				{/* drop-down for hour */}
+				<DropDown
+					value={hour}
+					text={hour}
+					options={hours}
+					type={"time"}
+					required={true}
+					handleChange={(element) => {
+						if (element) {
+							callbackHour(element.value)
+							// TODO: Allow for ChangeMultiple for NewSourcePage
+						}
+					}}
+					placeholder={t(hourPlaceholder)}
+					disabled={disabled}
+				/>
+
+				{/* drop-down for minute */}
+				<DropDown
+					value={minute}
+					text={minute}
+					options={minutes}
+					type={"time"}
+					required={true}
+					handleChange={(element) => {
+						if (element) {
+							callbackMinute(element.value)
+						}
+					}}
+					placeholder={t(minutePlaceholder)}
+					disabled={disabled}
+				/>
+			</td>
+		</tr>
+	)
+
+};
+
+export default SchedulingTime;
\ No newline at end of file