diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 87ae63ec8..21bd2cfda 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -26,6 +26,7 @@ import Dialog from '../components/Dialog';
 import MultiSelect from '../components/MultiSelect';
 import { formatUnixTimestampToDateTime, getDurationFromTimestamps } from '../utils/dateUtil';
 import TimeAgo from '../components/TimeAgo';
+import Timepicker from '../components/TimePicker';
 
 const API_LIMIT = 25;
 
@@ -414,17 +415,21 @@ export default function Events({ path, ...props }) {
         </Menu>
       )}
       {state.showCalendar && (
-        <Menu
-          className="rounded-t-none"
-          onDismiss={() => setState({ ...state, showCalendar: false })}
-          relativeTo={datePicker}
-        >
-          <Calendar
-            onChange={handleSelectDateRange}
-            dateRange={{ before: searchParams.before * 1000 || null, after: searchParams.after * 1000 || null }}
-            close={() => setState({ ...state, showCalendar: false })}
-          />
-        </Menu>
+        <span>
+          <Menu
+            className="rounded-t-none"
+            onDismiss={() => setState({ ...state, showCalendar: false })}
+            relativeTo={datePicker}
+          >
+            <Calendar
+              onChange={handleSelectDateRange}
+              dateRange={{ before: searchParams.before * 1000 || null, after: searchParams.after * 1000 || null }}
+              close={() => setState({ ...state, showCalendar: false })}
+            >
+              <Timepicker />
+            </Calendar>
+          </Menu>
+        </span>
       )}
       {state.showPlusConfig && (
         <Dialog>