diff --git a/web/src/components/TimePicker.jsx b/web/src/components/TimePicker.jsx
new file mode 100644
index 000000000..4b95cc62b
--- /dev/null
+++ b/web/src/components/TimePicker.jsx
@@ -0,0 +1,49 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+// import './CalendarTimePicker.css';
+
+const CalendarTimePicker = () => {
+  const [timeSelector, setTimeSelector] = useState({ After: 0, Before: 0 });
+
+  const handleTime = (name, idx) => {
+    setTimeSelector({
+      ...timeSelector,
+      [name]: idx,
+    });
+  };
+
+  const renderTimePicker = ({ title, selected }) => {
+    return (
+      <span>
+        <label className="block text-center font-medium mb-2 text-gray-300">{title}</label>
+        <div
+          className="border border-gray-400 cursor-pointer hide-scroll"
+          style={{ maxHeight: '23rem', overflowY: 'scroll' }}
+        >
+          {Array.from({ length: 24 }, (_, idx) => (
+            <div
+              key={idx}
+              className={`w-full font-light border border-transparent hover:border-gray-300 rounded-sm text-center text-xl ${
+                selected === idx ? 'bg-blue-500' : ''
+              } `}
+              onClick={() => handleTime(title, idx)}
+            >
+              <span className="">{idx}:00</span>
+            </div>
+          ))}
+        </div>
+      </span>
+    );
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex justify-between ">
+        <div className="w-24 px-1">{renderTimePicker({ title: 'Before', selected: timeSelector.Before })}</div>
+        <div className="w-24 px-1">{renderTimePicker({ title: 'After', selected: timeSelector.After })}</div>
+      </div>
+    </div>
+  );
+};
+
+export default CalendarTimePicker;