diff --git a/ui/src/components/TimeZonePicker/index.tsx b/ui/src/components/TimeZonePicker/index.tsx
new file mode 100644
index 00000000..bd0d0f5c
--- /dev/null
+++ b/ui/src/components/TimeZonePicker/index.tsx
@@ -0,0 +1,25 @@
+import { Form } from 'react-bootstrap';
+
+import { TIMEZONES } from '@/common/constants';
+
+const TimeZonePicker = (props) => {
+  return (
+    <Form.Select {...props}>
+      {TIMEZONES?.map((item) => {
+        return (
+          <optgroup label={item.label} key={item.label}>
+            {item.options.map((option) => {
+              return (
+                <option value={option.value} key={option.value}>
+                  {option.label}
+                </option>
+              );
+            })}
+          </optgroup>
+        );
+      })}
+    </Form.Select>
+  );
+};
+
+export default TimeZonePicker;