diff --git a/apps/webservice/package.json b/apps/webservice/package.json
index db34e83b..d7db3e46 100644
--- a/apps/webservice/package.json
+++ b/apps/webservice/package.json
@@ -26,7 +26,6 @@
     "@ctrlplane/validators": "workspace:*",
     "@hookform/resolvers": "^3.3.4",
     "@icons-pack/react-simple-icons": "^10.0.0",
-    "@internationalized/date": "^3.5.4",
     "@monaco-editor/react": "^4.6.0",
     "@next/bundle-analyzer": "^14.2.13",
     "@octokit/auth-app": "^7.1.0",
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-drawer/Overview.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-drawer/Overview.tsx
index 51d22c31..a7ebf0c8 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-drawer/Overview.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-drawer/Overview.tsx
@@ -31,17 +31,6 @@ type OverviewProps = {
   environment: SCHEMA.Environment;
 };
 
-const isUsing12HourClock = (): boolean => {
-  const date = new Date();
-  const options: Intl.DateTimeFormatOptions = {
-    hour: "numeric",
-  };
-  const formattedTime = new Intl.DateTimeFormat(undefined, options).format(
-    date,
-  );
-  return formattedTime.includes("AM") || formattedTime.includes("PM");
-};
-
 export const Overview: React.FC<OverviewProps> = ({ environment }) => {
   const expiresAt = environment.expiresAt ?? undefined;
   const defaultValues = { ...environment, expiresAt };
@@ -103,7 +92,6 @@ export const Overview: React.FC<OverviewProps> = ({ environment }) => {
                     value={value}
                     onChange={onChange}
                     granularity="minute"
-                    hourCycle={isUsing12HourClock() ? 12 : 24}
                     className="w-60"
                   />
                   <Button
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-policy-drawer/RolloutAndTiming.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-policy-drawer/RolloutAndTiming.tsx
index 61c02e5e..5e8af15e 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-policy-drawer/RolloutAndTiming.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-policy-drawer/RolloutAndTiming.tsx
@@ -1,6 +1,5 @@
 import type * as SCHEMA from "@ctrlplane/db/schema";
 import React from "react";
-import { ZonedDateTime } from "@internationalized/date";
 import { IconX } from "@tabler/icons-react";
 import _ from "lodash";
 import ms from "ms";
@@ -8,7 +7,7 @@ import prettyMilliseconds from "pretty-ms";
 import { z } from "zod";
 
 import { Button } from "@ctrlplane/ui/button";
-import { DateTimePicker } from "@ctrlplane/ui/date-time-picker/date-time-picker";
+import { DateTimePicker } from "@ctrlplane/ui/datetime-picker";
 import {
   Form,
   FormControl,
@@ -33,30 +32,6 @@ import {
 
 import { api } from "~/trpc/react";
 
-const toZonedDateTime = (date: Date): ZonedDateTime => {
-  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const offset = -date.getTimezoneOffset() * ms("1m");
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const hour = date.getHours();
-  const minute = date.getMinutes();
-  const second = date.getSeconds();
-  const millisecond = date.getMilliseconds();
-
-  return new ZonedDateTime(
-    year,
-    month,
-    day,
-    timeZone,
-    offset,
-    hour,
-    minute,
-    second,
-    millisecond,
-  );
-};
-
 const isValidDuration = (str: string) => !isNaN(ms(str));
 
 const schema = z.object({
@@ -143,31 +118,17 @@ export const RolloutAndTiming: React.FC<{
                           className="flex w-fit items-center gap-2 rounded-md border p-1 text-sm"
                         >
                           <DateTimePicker
-                            value={toZonedDateTime(value.startTime)}
-                            aria-label="Start Time"
-                            onChange={(t) => {
-                              onChange({
-                                ...value,
-                                startTime: t.toDate(
-                                  Intl.DateTimeFormat().resolvedOptions()
-                                    .timeZone,
-                                ),
-                              });
-                            }}
+                            value={value.startTime}
+                            onChange={onChange}
+                            granularity="minute"
+                            className="w-60"
                           />{" "}
                           <span className="text-muted-foreground">to</span>{" "}
                           <DateTimePicker
-                            value={toZonedDateTime(value.endTime)}
-                            onChange={(t) => {
-                              onChange({
-                                ...value,
-                                endTime: t.toDate(
-                                  Intl.DateTimeFormat().resolvedOptions()
-                                    .timeZone,
-                                ),
-                              });
-                            }}
-                            aria-label="End Time"
+                            value={value.endTime}
+                            onChange={onChange}
+                            granularity="minute"
+                            className="w-60"
                           />
                           <span className="text-muted-foreground">
                             recurring
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/DateConditionRender.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/DateConditionRender.tsx
index 2ad79c61..1be9228a 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/DateConditionRender.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/DateConditionRender.tsx
@@ -1,9 +1,5 @@
-import type { DateValue } from "@internationalized/date";
-import { ZonedDateTime } from "@internationalized/date";
-import ms from "ms";
-
 import { cn } from "@ctrlplane/ui";
-import { DateTimePicker } from "@ctrlplane/ui/date-time-picker/date-time-picker";
+import { DateTimePicker } from "@ctrlplane/ui/datetime-picker";
 import {
   Select,
   SelectContent,
@@ -13,34 +9,10 @@ import {
 } from "@ctrlplane/ui/select";
 import { DateOperator } from "@ctrlplane/validators/conditions";
 
-const toZonedDateTime = (date: Date): ZonedDateTime => {
-  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const offset = -date.getTimezoneOffset() * ms("1m");
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const hour = date.getHours();
-  const minute = date.getMinutes();
-  const second = date.getSeconds();
-  const millisecond = date.getMilliseconds();
-
-  return new ZonedDateTime(
-    year,
-    month,
-    day,
-    timeZone,
-    offset,
-    hour,
-    minute,
-    second,
-    millisecond,
-  );
-};
-
 type Operator = "before" | "after" | "before-or-on" | "after-or-on";
 
 type DateConditionRenderProps = {
-  setDate: (date: DateValue) => void;
+  setDate: (date: Date) => void;
   setOperator: (operator: DateOperator) => void;
   value: string;
   operator: Operator;
@@ -81,10 +53,11 @@ export const DateConditionRender: React.FC<DateConditionRenderProps> = ({
       </div>
       <div className="col-span-7">
         <DateTimePicker
-          value={toZonedDateTime(new Date(value))}
-          onChange={(value) => setDate(value)}
+          value={new Date(value)}
+          onChange={(value) => setDate(value ?? new Date())}
           aria-label={type}
-          variant="filter"
+          granularity="minute"
+          className="rounded-l-none"
         />
       </div>
     </div>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-condition/JobCreatedAtConditionRender.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-condition/JobCreatedAtConditionRender.tsx
index a58a6c4d..a44a0714 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-condition/JobCreatedAtConditionRender.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-condition/JobCreatedAtConditionRender.tsx
@@ -2,7 +2,6 @@ import type {
   CreatedAtCondition,
   DateOperatorType,
 } from "@ctrlplane/validators/conditions";
-import type { DateValue } from "@internationalized/date";
 
 import type { JobConditionRenderProps } from "./job-condition-props";
 import { DateConditionRender } from "../filter/DateConditionRender";
@@ -10,13 +9,8 @@ import { DateConditionRender } from "../filter/DateConditionRender";
 export const JobCreatedAtConditionRender: React.FC<
   JobConditionRenderProps<CreatedAtCondition>
 > = ({ condition, onChange, className }) => {
-  const setDate = (t: DateValue) =>
-    onChange({
-      ...condition,
-      value: t
-        .toDate(Intl.DateTimeFormat().resolvedOptions().timeZone)
-        .toISOString(),
-    });
+  const setDate = (value: Date) =>
+    onChange({ ...condition, value: value.toISOString() });
 
   const setOperator = (operator: DateOperatorType) =>
     onChange({ ...condition, operator });
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/release-condition/ReleaseCreatedAtConditionRender.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/release-condition/ReleaseCreatedAtConditionRender.tsx
index 49be9923..88f4648b 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/release-condition/ReleaseCreatedAtConditionRender.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/release-condition/ReleaseCreatedAtConditionRender.tsx
@@ -2,7 +2,6 @@ import type {
   CreatedAtCondition,
   DateOperatorType,
 } from "@ctrlplane/validators/conditions";
-import type { DateValue } from "@internationalized/date";
 
 import type { ReleaseConditionRenderProps } from "./release-condition-props";
 import { DateConditionRender } from "../filter/DateConditionRender";
@@ -10,13 +9,8 @@ import { DateConditionRender } from "../filter/DateConditionRender";
 export const CreatedAtConditionRender: React.FC<
   ReleaseConditionRenderProps<CreatedAtCondition>
 > = ({ condition, onChange, className }) => {
-  const setDate = (t: DateValue) =>
-    onChange({
-      ...condition,
-      value: t
-        .toDate(Intl.DateTimeFormat().resolvedOptions().timeZone)
-        .toISOString(),
-    });
+  const setDate = (value: Date) =>
+    onChange({ ...condition, value: value.toISOString() });
 
   const setOperator = (operator: DateOperatorType) =>
     onChange({ ...condition, operator });
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/resource-condition/ResourceCreatedAtConditionRender.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/resource-condition/ResourceCreatedAtConditionRender.tsx
index 68685558..8f702fed 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/resource-condition/ResourceCreatedAtConditionRender.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/resource-condition/ResourceCreatedAtConditionRender.tsx
@@ -2,7 +2,6 @@ import type {
   CreatedAtCondition,
   DateOperatorType,
 } from "@ctrlplane/validators/conditions";
-import type { DateValue } from "@internationalized/date";
 
 import type { ResourceConditionRenderProps } from "./resource-condition-props";
 import { DateConditionRender } from "../filter/DateConditionRender";
@@ -10,13 +9,8 @@ import { DateConditionRender } from "../filter/DateConditionRender";
 export const ResourceCreatedAtConditionRender: React.FC<
   ResourceConditionRenderProps<CreatedAtCondition>
 > = ({ condition, onChange, className }) => {
-  const setDate = (t: DateValue) =>
-    onChange({
-      ...condition,
-      value: t
-        .toDate(Intl.DateTimeFormat().resolvedOptions().timeZone)
-        .toISOString(),
-    });
+  const setDate = (value: Date) =>
+    onChange({ ...condition, value: value.toISOString() });
 
   const setOperator = (operator: DateOperatorType) =>
     onChange({ ...condition, operator });
diff --git a/packages/ui/src/date-time-picker/calendar.tsx b/packages/ui/src/date-time-picker/calendar.tsx
deleted file mode 100644
index 7bab2741..00000000
--- a/packages/ui/src/date-time-picker/calendar.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-"use client";
-
-import type { CalendarDate } from "@internationalized/date";
-import type { CalendarProps, DateValue } from "react-aria";
-import type { CalendarState } from "react-stately";
-import React, { useMemo } from "react";
-import {
-  isToday as _isToday,
-  createCalendar,
-  getLocalTimeZone,
-  getWeeksInMonth,
-} from "@internationalized/date";
-import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
-import {
-  useButton,
-  useCalendar,
-  useCalendarCell,
-  useCalendarGrid,
-  useLocale,
-} from "react-aria";
-import { useCalendarState } from "react-stately";
-
-import { Button } from "../button";
-import { cn } from "../index";
-
-function Calendar(props: CalendarProps<DateValue>) {
-  const prevButtonRef = React.useRef<HTMLButtonElement | null>(null);
-  const nextButtonRef = React.useRef<HTMLButtonElement | null>(null);
-
-  const { locale } = useLocale();
-  const state = useCalendarState({
-    ...props,
-    locale,
-    createCalendar,
-  });
-  const {
-    calendarProps,
-    prevButtonProps: _prevButtonProps,
-    nextButtonProps: _nextButtonProps,
-    title,
-  } = useCalendar(props, state);
-  const { buttonProps: prevButtonProps } = useButton(
-    _prevButtonProps,
-    prevButtonRef,
-  );
-  const { buttonProps: nextButtonProps } = useButton(
-    _nextButtonProps,
-    nextButtonRef,
-  );
-
-  return (
-    <div {...calendarProps} className="space-y-4">
-      <div className="relative flex items-center justify-center bg-red-500 pt-1">
-        <Button
-          {...prevButtonProps}
-          ref={prevButtonRef}
-          variant={"outline"}
-          className={cn(
-            "absolute left-0 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          )}
-        >
-          <IconChevronLeft className="h-4 w-4" />
-        </Button>
-        <div className="text-sm font-medium">{title}</div>
-        <Button
-          {...nextButtonProps}
-          ref={nextButtonRef}
-          variant={"outline"}
-          className={cn(
-            "absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          )}
-        >
-          <IconChevronRight className="h-4 w-4" />
-        </Button>
-      </div>
-      <CalendarGrid state={state} />
-    </div>
-  );
-}
-
-interface CalendarGridProps {
-  state: CalendarState;
-}
-
-function CalendarGrid({ state, ...props }: CalendarGridProps) {
-  const { locale } = useLocale();
-  const { gridProps, headerProps, weekDays } = useCalendarGrid(props, state);
-
-  // Get the number of weeks in the month so we can render the proper number of rows.
-  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
-
-  return (
-    <table
-      {...gridProps}
-      className={cn(gridProps.className, "w-full border-collapse space-y-1")}
-    >
-      <thead {...headerProps}>
-        <tr className="flex">
-          {weekDays.map((day, index) => (
-            <th
-              className="w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground"
-              key={index}
-            >
-              {day}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {[...new Array(weeksInMonth).keys()].map((weekIndex) => (
-          <tr className="mt-2 flex w-full" key={weekIndex}>
-            {state
-              .getDatesInWeek(weekIndex)
-              .map((date, i) =>
-                date ? (
-                  <CalendarCell key={i} state={state} date={date} />
-                ) : (
-                  <td key={i} />
-                ),
-              )}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-
-interface CalendarCellProps {
-  state: CalendarState;
-  date: CalendarDate;
-}
-
-function CalendarCell({ state, date }: CalendarCellProps) {
-  const ref = React.useRef<HTMLButtonElement | null>(null);
-  const {
-    cellProps,
-    buttonProps,
-    isSelected,
-    isOutsideVisibleRange,
-    isDisabled,
-    formattedDate,
-  } = useCalendarCell({ date }, state, ref);
-
-  const isToday = useMemo(() => {
-    const timezone = getLocalTimeZone();
-    return _isToday(date, timezone);
-  }, [date]);
-
-  return (
-    <td
-      {...cellProps}
-      className={cn(
-        cellProps.className,
-        "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md",
-      )}
-    >
-      <Button
-        {...buttonProps}
-        type="button"
-        variant={"ghost"}
-        ref={ref}
-        className={cn(
-          buttonProps.className,
-          "h-9 w-9",
-          isToday ? "bg-accent text-accent-foreground" : "",
-          isSelected
-            ? "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground"
-            : "",
-          isOutsideVisibleRange ? "text-muted-foreground opacity-50" : "",
-          isDisabled ? "text-muted-foreground opacity-50" : "",
-        )}
-      >
-        {formattedDate}
-      </Button>
-    </td>
-  );
-}
-
-export { Calendar };
diff --git a/packages/ui/src/date-time-picker/date-field.tsx b/packages/ui/src/date-time-picker/date-field.tsx
deleted file mode 100644
index 10957b43..00000000
--- a/packages/ui/src/date-time-picker/date-field.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client";
-
-import type { AriaDatePickerProps, DateValue } from "react-aria";
-import { useRef } from "react";
-import { createCalendar } from "@internationalized/date";
-import { useDateField, useLocale } from "react-aria";
-import { useDateFieldState } from "react-stately";
-
-import { cn } from "../index";
-import { DateSegment } from "./date-segment";
-
-function DateField(
-  props: AriaDatePickerProps<DateValue> & { variant?: string },
-) {
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  const { locale } = useLocale();
-  const state = useDateFieldState({
-    ...props,
-    locale,
-    createCalendar,
-  });
-  const { fieldProps } = useDateField(props, state, ref);
-
-  return (
-    <div
-      {...fieldProps}
-      ref={ref}
-      className={cn(
-        "flex w-full items-center border border-r-0 bg-transparent px-2 py-1",
-        props.variant === "filter"
-          ? "h-9 text-muted-foreground"
-          : "h-8 rounded-l-md",
-        props.isDisabled ? "cursor-not-allowed opacity-50" : "",
-      )}
-    >
-      {state.segments.map((segment, i) => (
-        <DateSegment
-          aria-label="date-segment"
-          key={i}
-          segment={segment}
-          state={state}
-          textxs
-        />
-      ))}
-      {state.validationState === "invalid" && (
-        <span aria-hidden="true">🚫</span>
-      )}
-    </div>
-  );
-}
-
-export { DateField };
diff --git a/packages/ui/src/date-time-picker/date-segment.tsx b/packages/ui/src/date-time-picker/date-segment.tsx
deleted file mode 100644
index 76f1ac42..00000000
--- a/packages/ui/src/date-time-picker/date-segment.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-
-import type {
-  DateFieldState,
-  DateSegment as IDateSegment,
-} from "react-stately";
-import { useRef } from "react";
-import { useDateSegment } from "react-aria";
-
-import { cn } from "../index";
-
-interface DateSegmentProps {
-  segment: IDateSegment;
-  state: DateFieldState;
-  textxs?: boolean;
-}
-
-function DateSegment({ segment, state, textxs }: DateSegmentProps) {
-  const ref = useRef(null);
-
-  const {
-    segmentProps: { ...segmentProps },
-  } = useDateSegment(segment, state, ref);
-
-  return (
-    <div
-      {...segmentProps}
-      ref={ref}
-      className={cn(
-        "focus:rounded-[2px] focus:bg-accent focus:text-accent-foreground focus:outline-none",
-        segment.type !== "literal" ? "px-[1px]" : "",
-        segment.isPlaceholder ? "text-muted-foreground" : "",
-        textxs ? "text-xs" : "text-sm",
-      )}
-      aria-label="date-segment-inner"
-    >
-      {segment.text}
-    </div>
-  );
-}
-
-export { DateSegment };
diff --git a/packages/ui/src/date-time-picker/date-time-picker.tsx b/packages/ui/src/date-time-picker/date-time-picker.tsx
deleted file mode 100644
index 565d1bc6..00000000
--- a/packages/ui/src/date-time-picker/date-time-picker.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-"use client";
-
-import type { DateValue } from "react-aria";
-import type { DatePickerStateOptions } from "react-stately";
-import React, { useRef, useState } from "react";
-import { IconCalendar } from "@tabler/icons-react";
-import { useButton, useDatePicker, useInteractOutside } from "react-aria";
-import { useDatePickerState } from "react-stately";
-
-import { Button } from "../button";
-import { cn } from "../index";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover";
-import { Calendar } from "./calendar";
-import { DateField } from "./date-field";
-import { TimeField } from "./time-field";
-import { useForwardedRef } from "./useForwardedRef";
-
-const DateTimePicker = React.forwardRef<
-  HTMLDivElement,
-  DatePickerStateOptions<DateValue> & { variant?: string }
->((props, forwardedRef) => {
-  const ref = useForwardedRef(forwardedRef);
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  const contentRef = useRef<HTMLDivElement | null>(null);
-
-  const [open, setOpen] = useState(false);
-
-  const state = useDatePickerState(props);
-  const {
-    groupProps,
-    fieldProps,
-    buttonProps: _buttonProps,
-    dialogProps,
-    calendarProps,
-  } = useDatePicker(props, state, ref);
-  const { buttonProps } = useButton(_buttonProps, buttonRef);
-  useInteractOutside({
-    ref: contentRef,
-    onInteractOutside: () => {
-      setOpen(false);
-    },
-  });
-
-  return (
-    <div
-      {...groupProps}
-      ref={ref}
-      className={cn(groupProps.className, "flex items-center rounded-md")}
-    >
-      <DateField {...fieldProps} variant={props.variant} />
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            {...buttonProps}
-            variant="outline"
-            className={cn(
-              "rounded-l-none",
-              props.variant === "filter" ? "h-9" : "h-8",
-            )}
-            disabled={props.isDisabled}
-            onClick={() => setOpen(true)}
-          >
-            <IconCalendar className="h-5 w-5" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent ref={contentRef} className="w-full" align="end">
-          <div {...dialogProps} className="space-y-3">
-            <Calendar {...calendarProps} />
-            {state.hasTime && (
-              <TimeField
-                aria-label="time-field"
-                value={state.timeValue}
-                onChange={(value) => state.setTimeValue(value)}
-              />
-            )}
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-});
-
-DateTimePicker.displayName = "DateTimePicker";
-
-export { DateTimePicker };
diff --git a/packages/ui/src/date-time-picker/time-field.tsx b/packages/ui/src/date-time-picker/time-field.tsx
deleted file mode 100644
index 1217dd21..00000000
--- a/packages/ui/src/date-time-picker/time-field.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-
-import type { AriaTimeFieldProps, TimeValue } from "react-aria";
-import { useRef } from "react";
-import { useLocale, useTimeField } from "react-aria";
-import { useTimeFieldState } from "react-stately";
-
-import { cn } from "../index";
-import { DateSegment } from "./date-segment";
-
-function TimeField(props: AriaTimeFieldProps<TimeValue>) {
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  const { locale } = useLocale();
-  const state = useTimeFieldState({
-    ...props,
-    locale,
-  });
-  const { fieldProps } = useTimeField(props, state, ref);
-
-  return (
-    <div
-      {...fieldProps}
-      ref={ref}
-      className={cn(
-        "inline-flex h-10 w-full flex-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        props.isDisabled ? "cursor-not-allowed opacity-50" : "",
-      )}
-    >
-      {state.segments.map((segment, i) => (
-        <DateSegment
-          aria-label={`date-segment`}
-          key={i}
-          segment={segment}
-          state={state}
-        />
-      ))}
-    </div>
-  );
-}
-
-export { TimeField };
diff --git a/packages/ui/src/date-time-picker/useForwardedRef.tsx b/packages/ui/src/date-time-picker/useForwardedRef.tsx
deleted file mode 100644
index 7160cce9..00000000
--- a/packages/ui/src/date-time-picker/useForwardedRef.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type React from "react";
-import { useEffect, useRef } from "react";
-
-export function useForwardedRef<T>(ref: React.ForwardedRef<T>) {
-  const innerRef = useRef<T>(null);
-
-  useEffect(() => {
-    if (!ref) return;
-    if (typeof ref === "function") {
-      ref(innerRef.current);
-      return;
-    }
-    ref.current = innerRef.current;
-  });
-
-  return innerRef;
-}
diff --git a/packages/ui/src/datetime-picker.tsx b/packages/ui/src/datetime-picker.tsx
index acba80d0..72d709d7 100644
--- a/packages/ui/src/datetime-picker.tsx
+++ b/packages/ui/src/datetime-picker.tsx
@@ -658,12 +658,21 @@ TimePicker.displayName = "TimePicker";
 
 type Granularity = "day" | "hour" | "minute" | "second";
 
+const getHourCycle = (): 12 | 24 => {
+  const date = new Date();
+  const options: Intl.DateTimeFormatOptions = {
+    hour: "numeric",
+  };
+  const formattedTime = new Intl.DateTimeFormat(undefined, options).format(
+    date,
+  );
+  return formattedTime.includes("AM") || formattedTime.includes("PM") ? 12 : 24;
+};
+
 type DateTimePickerProps = {
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   disabled?: boolean;
-  /** showing `AM/PM` or not. */
-  hourCycle?: 12 | 24;
   placeholder?: string;
   /**
    * The year range will be: `This year + yearRange` and `this year - yearRange`.
@@ -701,7 +710,6 @@ const DateTimePicker = React.forwardRef<
       locale = enUS,
       value,
       onChange,
-      hourCycle = 24,
       yearRange = 50,
       disabled = false,
       displayFormat,
@@ -741,6 +749,8 @@ const DateTimePicker = React.forwardRef<
       [value],
     );
 
+    const hourCycle = getHourCycle();
+
     const initHourFormat = {
       hour24:
         displayFormat?.hour24 ??
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e1c9651..70e34c1d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -498,9 +498,6 @@ importers:
       '@icons-pack/react-simple-icons':
         specifier: ^10.0.0
         version: 10.1.0(react@18.3.1)
-      '@internationalized/date':
-        specifier: ^3.5.4
-        version: 3.5.6
       '@monaco-editor/react':
         specifier: ^4.6.0
         version: 4.6.0(monaco-editor@0.52.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)