diff --git a/package.json b/package.json
index 6100c6088..f45ef3fb4 100644
--- a/package.json
+++ b/package.json
@@ -219,5 +219,6 @@
   },
   "msw": {
     "workerDirectory": "public"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/src/api/query-hooks/useConfigChangesHooks.ts b/src/api/query-hooks/useConfigChangesHooks.ts
index c3eed6d53..752a54295 100644
--- a/src/api/query-hooks/useConfigChangesHooks.ts
+++ b/src/api/query-hooks/useConfigChangesHooks.ts
@@ -1,7 +1,7 @@
 import { configChangesDefaultDateFilter } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter";
 import { useHideDeletedConfigChanges } from "@flanksource-ui/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigChangesToggledDeletedItems";
 import { useConfigChangesArbitraryFilters } from "@flanksource-ui/hooks/useConfigChangesArbitraryFilters";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
diff --git a/src/api/query-hooks/useJobsHistoryQuery.ts b/src/api/query-hooks/useJobsHistoryQuery.ts
index 825c67968..c542cc81b 100644
--- a/src/api/query-hooks/useJobsHistoryQuery.ts
+++ b/src/api/query-hooks/useJobsHistoryQuery.ts
@@ -2,7 +2,7 @@ import { durationOptions } from "@flanksource-ui/components/JobsHistory/Filters/
 import { jobHistoryDefaultDateFilter } from "@flanksource-ui/components/JobsHistory/Filters/JobsHistoryFilters";
 import { JobHistory } from "@flanksource-ui/components/JobsHistory/JobsHistoryTable";
 import { resourceTypeMap } from "@flanksource-ui/components/SchemaResourcePage/SchemaResourceEditJobsTab";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx
index 7a8a15cd1..be0ab6dc5 100644
--- a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx
+++ b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx
@@ -1,5 +1,5 @@
-import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { URLSearchParamsInit } from "react-router-dom";
 
 type Props = {
diff --git a/src/components/Forms/Formik/FormikDurationPicker.tsx b/src/components/Forms/Formik/FormikDurationPicker.tsx
index 5b44bbcfa..702b3757c 100644
--- a/src/components/Forms/Formik/FormikDurationPicker.tsx
+++ b/src/components/Forms/Formik/FormikDurationPicker.tsx
@@ -1,8 +1,8 @@
 import {
   rangeOptionsCategories,
   TimeRangeOption
-} from "@flanksource-ui/ui/TimeRangePicker/rangeOptions";
-import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker/TimeRangePicker";
+} from "@flanksource-ui/ui/Dates/TimeRangePicker/rangeOptions";
+import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker/TimeRangePicker";
 import dayjs from "dayjs";
 import { useFormikContext } from "formik";
 import { useMemo } from "react";
diff --git a/src/components/JobsHistory/Filters/JobsHistoryFilters.tsx b/src/components/JobsHistory/Filters/JobsHistoryFilters.tsx
index 27677641a..0573c6574 100644
--- a/src/components/JobsHistory/Filters/JobsHistoryFilters.tsx
+++ b/src/components/JobsHistory/Filters/JobsHistoryFilters.tsx
@@ -1,6 +1,6 @@
 import FormikFilterForm from "@flanksource-ui/components/Forms/FormikFilterForm";
-import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { URLSearchParamsInit } from "react-router-dom";
 import JobHistoryDurationDropdown from "./JobHistoryDurationDropdown";
 import JobHistoryNamesDropdown from "./JobHistoryNames";
diff --git a/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx b/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx
index bbf018df8..a22a7014d 100644
--- a/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx
+++ b/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx
@@ -3,8 +3,8 @@ import FormikFilterForm from "@flanksource-ui/components/Forms/FormikFilterForm"
 import { AuthorizationAccessCheck } from "@flanksource-ui/components/Permissions/AuthorizationAccessCheck";
 import { tables } from "@flanksource-ui/context/UserAccessContext/permissions";
 import { Button } from "@flanksource-ui/ui/Buttons/Button";
-import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { useState } from "react";
 import { FaEdit } from "react-icons/fa";
 import { URLSearchParamsInit } from "react-router-dom";
diff --git a/src/pages/playbooks/PlaybookRunsPage.tsx b/src/pages/playbooks/PlaybookRunsPage.tsx
index 501a19cdd..b2546d07c 100644
--- a/src/pages/playbooks/PlaybookRunsPage.tsx
+++ b/src/pages/playbooks/PlaybookRunsPage.tsx
@@ -12,9 +12,9 @@ import {
   BreadcrumbNav,
   BreadcrumbRoot
 } from "@flanksource-ui/ui/BreadcrumbNav";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { Head } from "@flanksource-ui/ui/Head";
 import TabbedLinks from "@flanksource-ui/ui/Tabs/TabbedLinks";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
 import { FaHome } from "react-icons/fa";
diff --git a/src/ui/Dates/DateTimeRangerPicker.stories.tsx b/src/ui/Dates/DateTimeRangerPicker.stories.tsx
deleted file mode 100644
index 0790a1ad6..000000000
--- a/src/ui/Dates/DateTimeRangerPicker.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { ComponentProps } from "react";
-import { Story, Meta } from "@storybook/react";
-import DateTimeRangerPicker from "./DateTimeRangerPicker";
-
-export default {
-  title: "DateTimeRangerPicker",
-  component: DateTimeRangerPicker
-} as Meta;
-
-const Template: Story<ComponentProps<typeof DateTimeRangerPicker>> = (args) => (
-  <div className="flex flex-col space-y-4">
-    <DateTimeRangerPicker {...args} />
-  </div>
-);
-
-export const DefaultPicker = Template.bind({});
-
-DefaultPicker.args = {
-  label: "Date Range"
-};
diff --git a/src/ui/Dates/DateTimeRangerPicker.tsx b/src/ui/Dates/DateTimeRangerPicker.tsx
deleted file mode 100644
index e6be7c77f..000000000
--- a/src/ui/Dates/DateTimeRangerPicker.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import dayjs, { Dayjs } from "dayjs";
-import { useCallback, useState } from "react";
-
-type DateRangerPickerProps = {
-  label?: string;
-  // dates are string in ISO format
-  onChange?: (from: string, to: string) => void;
-  value?: {
-    from?: string;
-    to?: string;
-  };
-  maxDate?: string;
-};
-
-export default function DateTimeRangerPicker({
-  label,
-  value,
-  onChange = () => {},
-  maxDate = dayjs().format("YYYY-MM-DDTHH:mm:ss")
-}: DateRangerPickerProps) {
-  const [from, setFrom] = useState<Dayjs | undefined>(() => {
-    if (value?.from) {
-      return dayjs(value.from);
-    }
-    return undefined;
-  });
-
-  const [to, setTo] = useState<Dayjs | undefined>(() => {
-    if (value?.to) {
-      return dayjs(value.to);
-    }
-    return undefined;
-  });
-
-  console.log({ to, from, value });
-
-  const handleOnChange = useCallback(
-    (from: Dayjs | undefined, to: Dayjs | undefined) => {
-      if (from && to) {
-        onChange?.(from.toISOString(), to.toISOString());
-      }
-    },
-    [onChange]
-  );
-
-  return (
-    <div className="flex flex-row items-center gap-2">
-      <label className="text-xs font-semibold text-gray-400">{label}</label>
-      <div className="flex flex-row items-center">
-        <div className="flex h-full flex-row items-center rounded-md rounded-r-none border border-r-0 border-gray-300 px-1 pl-2 shadow-sm focus:border-blue-500 focus:ring-blue-500">
-          <label htmlFor="starts" className="text-xs text-gray-400">
-            From:
-          </label>
-          <input
-            className="w-auto border-0 shadow-sm focus:border-0 sm:text-sm"
-            type="datetime-local"
-            max={maxDate}
-            onChange={(value) => {
-              if (value.target.value) {
-                setFrom(dayjs(value.target.value));
-                handleOnChange(dayjs(value.target.value), to);
-              }
-            }}
-            value={from ? dayjs(from).format("YYYY-MM-DDTHH:mm:ss") : undefined}
-            id="starts"
-          />
-        </div>
-        <div className="flex h-full flex-row items-center rounded-md rounded-l-none border border-l-0 border-gray-300 px-1 shadow-sm focus:border-blue-500 focus:ring-blue-500">
-          <label htmlFor="ends" className="text-xs text-gray-400">
-            To:
-          </label>
-          <input
-            disabled={!from}
-            min={dayjs(from).format("YYYY-MM-DDTHH:mm:ss")}
-            max={maxDate}
-            className="w-auto border-0 shadow-sm focus:border-0 sm:text-sm"
-            type="datetime-local"
-            value={to ? dayjs(to).format("YYYY-MM-DDTHH:mm:ss") : undefined}
-            onChange={(value) => {
-              if (value.target.value) {
-                setTo(dayjs(value.target.value));
-                handleOnChange(from, dayjs(value.target.value));
-              }
-            }}
-            id="ends"
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/ui/TimeRangePicker/RecentlyRanges.tsx b/src/ui/Dates/TimeRangePicker/RecentlyRanges.tsx
similarity index 95%
rename from src/ui/TimeRangePicker/RecentlyRanges.tsx
rename to src/ui/Dates/TimeRangePicker/RecentlyRanges.tsx
index ff9e8b24f..90004a861 100644
--- a/src/ui/TimeRangePicker/RecentlyRanges.tsx
+++ b/src/ui/Dates/TimeRangePicker/RecentlyRanges.tsx
@@ -1,4 +1,4 @@
-import { formatTimeRange } from "../../utils/date";
+import { formatTimeRange } from "../../../utils/date";
 import { TimeRangeAbsoluteOption, TimeRangeOption } from "./rangeOptions";
 
 type RecentlyRangesProps = {
diff --git a/src/ui/TimeRangePicker/TimePickerCalendar.tsx b/src/ui/Dates/TimeRangePicker/TimePickerCalendar.tsx
similarity index 100%
rename from src/ui/TimeRangePicker/TimePickerCalendar.tsx
rename to src/ui/Dates/TimeRangePicker/TimePickerCalendar.tsx
diff --git a/src/ui/TimeRangePicker/TimePickerInput.tsx b/src/ui/Dates/TimeRangePicker/TimePickerInput.tsx
similarity index 100%
rename from src/ui/TimeRangePicker/TimePickerInput.tsx
rename to src/ui/Dates/TimeRangePicker/TimePickerInput.tsx
diff --git a/src/ui/TimeRangePicker/TimeRangeList.tsx b/src/ui/Dates/TimeRangePicker/TimeRangeList.tsx
similarity index 100%
rename from src/ui/TimeRangePicker/TimeRangeList.tsx
rename to src/ui/Dates/TimeRangePicker/TimeRangeList.tsx
diff --git a/src/ui/TimeRangePicker/TimeRangePicker.stories.tsx b/src/ui/Dates/TimeRangePicker/TimeRangePicker.stories.tsx
similarity index 69%
rename from src/ui/TimeRangePicker/TimeRangePicker.stories.tsx
rename to src/ui/Dates/TimeRangePicker/TimeRangePicker.stories.tsx
index 2c5647f88..57dc2300b 100644
--- a/src/ui/TimeRangePicker/TimeRangePicker.stories.tsx
+++ b/src/ui/Dates/TimeRangePicker/TimeRangePicker.stories.tsx
@@ -1,12 +1,22 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { useState } from "react";
 import { TimeRangePicker } from "./index";
 import { TimeRangeOption } from "./rangeOptions";
 
 const TimeRangePickerContainer = () => {
+  const [value, setValue] = useState<TimeRangeOption | undefined>();
+
   const onChange = (range: TimeRangeOption) => {
     console.log("range", range);
+    setValue(range);
   };
-  return <TimeRangePicker style={{ width: "450px" }} onChange={onChange} />;
+  return (
+    <TimeRangePicker
+      style={{ width: "450px" }}
+      onChange={onChange}
+      value={value}
+    />
+  );
 };
 
 export default {
diff --git a/src/ui/TimeRangePicker/TimeRangePicker.tsx b/src/ui/Dates/TimeRangePicker/TimeRangePicker.tsx
similarity index 100%
rename from src/ui/TimeRangePicker/TimeRangePicker.tsx
rename to src/ui/Dates/TimeRangePicker/TimeRangePicker.tsx
diff --git a/src/ui/TimeRangePicker/TimeRangePickerBody.tsx b/src/ui/Dates/TimeRangePicker/TimeRangePickerBody.tsx
similarity index 99%
rename from src/ui/TimeRangePicker/TimeRangePickerBody.tsx
rename to src/ui/Dates/TimeRangePicker/TimeRangePickerBody.tsx
index 794526780..f35fd4e51 100644
--- a/src/ui/TimeRangePicker/TimeRangePickerBody.tsx
+++ b/src/ui/Dates/TimeRangePicker/TimeRangePickerBody.tsx
@@ -3,7 +3,7 @@ import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { useCallback, useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { formatTimeRange, isValidDate } from "../../utils/date";
+import { formatTimeRange, isValidDate } from "../../../utils/date";
 import { RecentlyRanges } from "./RecentlyRanges";
 import { TimePickerCalendar } from "./TimePickerCalendar";
 import { TimePickerInput } from "./TimePickerInput";
diff --git a/src/ui/TimeRangePicker/helpers.ts b/src/ui/Dates/TimeRangePicker/helpers.ts
similarity index 95%
rename from src/ui/TimeRangePicker/helpers.ts
rename to src/ui/Dates/TimeRangePicker/helpers.ts
index 4b6c1ac8e..a48ca5281 100644
--- a/src/ui/TimeRangePicker/helpers.ts
+++ b/src/ui/Dates/TimeRangePicker/helpers.ts
@@ -4,8 +4,8 @@ import {
   formatISODate,
   isValidDate,
   subtractDateFromNow
-} from "../../utils/date";
-import { getLocalItem, setLocalItem } from "../../utils/storage";
+} from "../../../utils/date";
+import { getLocalItem, setLocalItem } from "../../../utils/storage";
 
 export const getIntervalData = (interval: string): [number, string] => {
   if (interval === "now") {
diff --git a/src/ui/TimeRangePicker/index.ts b/src/ui/Dates/TimeRangePicker/index.ts
similarity index 100%
rename from src/ui/TimeRangePicker/index.ts
rename to src/ui/Dates/TimeRangePicker/index.ts
diff --git a/src/ui/TimeRangePicker/parseDateMath.ts b/src/ui/Dates/TimeRangePicker/parseDateMath.ts
similarity index 100%
rename from src/ui/TimeRangePicker/parseDateMath.ts
rename to src/ui/Dates/TimeRangePicker/parseDateMath.ts
diff --git a/src/ui/TimeRangePicker/rangeOptions.ts b/src/ui/Dates/TimeRangePicker/rangeOptions.ts
similarity index 100%
rename from src/ui/TimeRangePicker/rangeOptions.ts
rename to src/ui/Dates/TimeRangePicker/rangeOptions.ts
diff --git a/src/ui/TimeRangePicker/useTimeRangeParams.tsx b/src/ui/Dates/TimeRangePicker/useTimeRangeParams.tsx
similarity index 100%
rename from src/ui/TimeRangePicker/useTimeRangeParams.tsx
rename to src/ui/Dates/TimeRangePicker/useTimeRangeParams.tsx
diff --git a/src/ui/Dates/__tests__/DateTimeRangerPicker.unit.test.tsx b/src/ui/Dates/__tests__/DateTimeRangerPicker.unit.test.tsx
deleted file mode 100644
index dc6e48dc3..000000000
--- a/src/ui/Dates/__tests__/DateTimeRangerPicker.unit.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import DateTimeRangerPicker from "./../DateTimeRangerPicker";
-
-describe("DateTimeRangerPicker", () => {
-  const mockOnChange = jest.fn();
-
-  it("renders correctly", () => {
-    render(<DateTimeRangerPicker label="Test Label" onChange={mockOnChange} />);
-
-    expect(screen.getByText("Test Label")).toBeInTheDocument();
-  });
-
-  it("calls onChange when the From input is changed", () => {
-    render(<DateTimeRangerPicker label="Test Label" onChange={mockOnChange} />);
-
-    fireEvent.change(screen.getByLabelText("From:"), {
-      target: { value: "2022-01-01T00:00" }
-    });
-
-    fireEvent.change(screen.getByLabelText("To:"), {
-      target: { value: "2022-01-02T01:00" }
-    });
-
-    expect(mockOnChange).toHaveBeenCalled();
-  });
-
-  it("calls onChange when the To input is changed", () => {
-    render(
-      <DateTimeRangerPicker
-        label="Test Label"
-        onChange={mockOnChange}
-        value={{ from: "2022-01-01T00:00:00", to: "2022-01-01T01:00:00" }}
-      />
-    );
-
-    fireEvent.change(screen.getByLabelText("To:"), {
-      target: { value: "2022-01-02T01:00" }
-    });
-
-    expect(mockOnChange).toHaveBeenCalled();
-  });
-});