diff --git a/packages/ui/src/components/calendar/option-data/months.ts b/packages/ui/src/components/calendar/option-data/months.ts
index 3c0dd3b4..8956e42e 100644
--- a/packages/ui/src/components/calendar/option-data/months.ts
+++ b/packages/ui/src/components/calendar/option-data/months.ts
@@ -5,6 +5,21 @@ export type MONTHS_OPTION = {
   text: string;
 };
 
+export const MONTH_NAMES: string[] = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
 export const MONTHS_RANGE: MONTHS_OPTION[] = [
   { value: 0, text: "January" },
   { value: 1, text: "February" },
diff --git a/packages/ui/src/components/date-picker/date-picker-calendar.test.tsx b/packages/ui/src/components/date-picker/date-picker-calendar.test.tsx
new file mode 100644
index 00000000..4c12a39f
--- /dev/null
+++ b/packages/ui/src/components/date-picker/date-picker-calendar.test.tsx
@@ -0,0 +1,91 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import DatePickerCalendar from "./date-picker-calendar";
+import { MONTH_NAMES } from "../calendar/option-data/months";
+import userEvent from "@testing-library/user-event";
+
+describe("Date Range 2 month Calendar", () => {
+  const todayDate = new Date();
+
+  beforeEach(async () => {
+    render(
+      <DatePickerCalendar
+        key="date-range-calendar-test"
+        initDate={todayDate}
+        startDate={null}
+        endDate={null}
+        setStartDate={() => {}}
+        setEndDate={() => {}}
+        handleReset={() => {}}
+      />,
+    );
+  });
+
+  test("renders Back Arrow Icon", () => {
+    expect(screen.getByTestId("ArrowBackIosNewIcon")).toBeInTheDocument();
+  });
+
+  test("renders Forward Arrow Icon", () => {
+    expect(screen.getByTestId("ArrowForwardIosIcon")).toBeInTheDocument();
+  });
+
+  test("renders current month and next month", () => {
+    const currMonthIdx = todayDate.getMonth();
+    const nextMonthIdx = (currMonthIdx + 1) % 12;
+
+    expect(screen.getByText(MONTH_NAMES[currMonthIdx])).toBeInTheDocument();
+    expect(screen.getByText(MONTH_NAMES[nextMonthIdx])).toBeInTheDocument();
+  });
+
+  test("render current month's year and next month's year", () => {
+    const currMonthIdx = todayDate.getMonth();
+    const nextMonthIdx = (currMonthIdx + 1) % 12;
+
+    expect(screen.getByText(MONTH_NAMES[currMonthIdx])).toBeInTheDocument();
+    expect(screen.getByText(MONTH_NAMES[nextMonthIdx])).toBeInTheDocument();
+  });
+});
+
+describe("Date Range Call to Action ", () => {
+  const date = new Date("11-25-2024");
+  const user = userEvent.setup();
+  beforeEach(async () => {
+    render(
+      <DatePickerCalendar
+        key="date-range-calendar-test"
+        initDate={date}
+        startDate={null}
+        endDate={null}
+        setStartDate={() => {}}
+        setEndDate={() => {}}
+        handleReset={() => {}}
+      />,
+    );
+  });
+
+  test("renders current month and next month", () => {
+    expect(screen.getByText("November")).toBeInTheDocument();
+    expect(screen.getByText("December")).toBeInTheDocument();
+    expect(screen.getByText((_, ele) => ele?.textContent === "2024")).toBeInTheDocument();
+  });
+
+  test("render December 2024 and January 2025 when Forward Arrow is pressed", async () => {
+    const nextMonthButton = screen.getByRole("button", { name: /next-months/i });
+    await user.click(nextMonthButton);
+
+    expect(screen.getByText("December")).toBeInTheDocument();
+    expect(screen.getByText("2024")).toBeInTheDocument();
+
+    expect(screen.getByText("January")).toBeInTheDocument();
+    expect(screen.getByText("2025")).toBeInTheDocument();
+  });
+
+  test("render October 2024 and November 2024 when Forward Arrow is pressed", async () => {
+    const nextMonthButton = screen.getByRole("button", { name: /prev-months/i });
+    await user.click(nextMonthButton);
+
+    expect(screen.getByText("October")).toBeInTheDocument();
+    expect(screen.getByText("November")).toBeInTheDocument();
+    expect(screen.getByText((_, ele) => ele?.textContent === "2024")).toBeInTheDocument();
+  });
+});
diff --git a/packages/ui/src/components/date-picker/date-picker-calendar.tsx b/packages/ui/src/components/date-picker/date-picker-calendar.tsx
new file mode 100644
index 00000000..25062175
--- /dev/null
+++ b/packages/ui/src/components/date-picker/date-picker-calendar.tsx
@@ -0,0 +1,200 @@
+import { useState } from "react";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import { isEmpty } from "lodash";
+
+import { Month, MONTH_NAMES } from "../calendar/option-data/months";
+import { Year } from "../calendar/option-data/years";
+import { CalendarDate } from "../calendar/utils/create-calendar";
+import { twMerge } from "tailwind-merge";
+import { createTwoMonthCalendar, CALENDAR_MONTH } from "./utils/create-two-month-calendar";
+import { isEqual } from "../calendar/utils/is-equal";
+import { addMonths } from "date-fns";
+
+interface DatePickerCalendarProps {
+  initDate?: Date;
+  endDate: Date | null;
+  startDate: Date | null;
+  setEndDate: (arg0: Date | null) => void;
+  setStartDate: (arg0: Date | null) => void;
+  handleReset: () => void;
+}
+
+export default function DatePickerCalendar(props: DatePickerCalendarProps) {
+  const { initDate = new Date(), startDate, endDate, setStartDate, setEndDate } = props;
+
+  const [date, setDate] = useState(initDate);
+  const [month, setMonth] = useState(initDate.getMonth() as Month);
+  const [year, setYear] = useState(initDate.getFullYear());
+  const [firstMonth, secondMonth] = createTwoMonthCalendar(year as Year, month);
+
+  function handleUpdateMonth(type: "prev" | "next") {
+    const modify = type === "prev" ? -1 : 1;
+    const newDate = addMonths(new Date(date), modify);
+
+    setMonth(newDate.getMonth() as Month);
+    setYear(newDate.getFullYear() as Year);
+    setDate(newDate);
+  }
+
+  const handleSelected = ({ day, month, year }: CalendarDate) => {
+    const newDate = new Date(year, month, day);
+
+    if (!startDate && !endDate) {
+      setStartDate(newDate);
+    } else if (startDate && !endDate) {
+      setEndDate(newDate);
+    } else {
+      /**
+       * This handles the edge cases when new End date comes before start date
+       *      Note: state is represent as date, but in system refer to CalendarDate interface
+       *      EG:
+       *        t-0 state:
+       *                start : July 16, 1969
+       *                end   : July 24, 1969
+       *
+       *        t-1 state:
+       *              new End : July 15, 1969 selected
+       *
+       *    t-final state:
+       *                start : July 15, 1969
+       *                end   : null
+       */
+
+      if (startDate && newDate < startDate) {
+        setStartDate(newDate);
+        setEndDate(null);
+      } else {
+        setEndDate(newDate);
+      }
+    }
+  };
+
+  return (
+    <div data-testid="date-range-calendar" className="bg-white-100 w-[512px]">
+      <div className="flex w-full items-center justify-center">
+        <div className="flex-col items-center justify-center">
+          {/*Left Calendar Nav*/}
+          <div className="flex h-[52px] flex-1 items-center justify-between space-x-4 px-4">
+            <button aria-label="prev-months" className="px-2" onClick={() => handleUpdateMonth("prev")}>
+              <ArrowBackIosNewIcon sx={{ fontSize: 8, color: "#7A7A7B" }} />
+            </button>
+            <div className="space-x-1">
+              <span aria-label="first-date-month"> {MONTH_NAMES[month]} </span>
+              <span aria-label="first-date-year">{year}</span>
+            </div>
+            <span className="invisible h-6 w-6" />
+          </div>
+
+          {/*Left Calendar*/}
+          <div className="flex justify-center px-4 pb-2">
+            <table className="border-collaspse">
+              <thead>
+                <tr>
+                  {["S", "M", "T", "W", "T", "F", "S"].map((ele: string, index: number) => (
+                    <td
+                      key={ele + index}
+                      className="text-black-400 h-8 w-8 p-px text-center text-xs font-normal leading-[16.8px]">
+                      {ele}
+                    </td>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {firstMonth.map((week: CALENDAR_MONTH[], weekIdx: number) => (
+                  <tr key={"first-month" + weekIdx}>
+                    {week.map((ele: CALENDAR_MONTH, colIdx: number) => {
+                      if (isEmpty(ele)) {
+                        return <td key={"empty" + colIdx} className="h-8 w-8" />;
+                      }
+                      const { day, month, year } = ele as CalendarDate;
+                      const key = `first-month-${month}/${day}/${year}`;
+                      const isSelected =
+                        isEqual(ele as CalendarDate, startDate) || isEqual(ele as CalendarDate, endDate);
+                      const isCurrDate = isEqual(ele as CalendarDate, initDate);
+
+                      return (
+                        <td
+                          key={key}
+                          onClick={() => handleSelected(ele as CalendarDate)}
+                          className={twMerge(
+                            "h-8 w-8 text-center text-xs font-normal leading-[18.8px]",
+                            isCurrDate && "inline-flex items-center justify-center rounded-full border-[1px]",
+                            !isSelected && "rounded-full hover:bg-blue-200",
+                            isSelected && "text-white-100 rounded-full bg-blue-500",
+                          )}>
+                          {day}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div className="flex-col items-center justify-center">
+          {/**Right Calendar Nav */}
+          <div className="flex h-[52px] flex-1 items-center justify-between space-x-4 px-4">
+            <span className="invisible h-6 w-6" />
+            <div className="space-x-1">
+              <span aria-label="second-date-month"> {MONTH_NAMES[(month + 1) % 12]} </span>
+              <span aria-label="second-date-year"> {(month + 1) % 12 === 0 ? year + 1 : year} </span>
+            </div>
+            <button aria-label="next-months" className="px-2" onClick={() => handleUpdateMonth("next")}>
+              <ArrowForwardIosIcon sx={{ fontSize: 8, color: "#7A7A7B" }} />
+            </button>
+          </div>
+
+          {/**Right Calendar*/}
+          <div className="flex justify-center px-4 pb-2">
+            <table className="border-collaspse">
+              <thead>
+                <tr>
+                  {["S", "M", "T", "W", "T", "F", "S"].map((ele: string, index: number) => (
+                    <td
+                      key={ele + index}
+                      className="text-black-400 h-8 w-8 p-px text-center text-xs font-normal leading-[16.8px]">
+                      {ele}
+                    </td>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {secondMonth.map((week: CALENDAR_MONTH[], weekIdx: number) => (
+                  <tr key={"second-month" + weekIdx}>
+                    {week.map((ele: CALENDAR_MONTH, colIdx: number) => {
+                      if (isEmpty(ele)) {
+                        return <td key={"empty" + colIdx} className="h-8 w-8" />;
+                      }
+                      const { day, month, year } = ele as CalendarDate;
+                      const key = `second-month-${month}/${day}/${year}`;
+                      const isSelected =
+                        isEqual(ele as CalendarDate, startDate) || isEqual(ele as CalendarDate, endDate);
+                      const isCurrDate = isEqual(ele as CalendarDate, initDate);
+
+                      return (
+                        <td
+                          key={key}
+                          onClick={() => handleSelected(ele as CalendarDate)}
+                          className={twMerge(
+                            "h-8 w-8 text-center text-xs font-normal leading-[18.8px]",
+                            isCurrDate && "inline-flex items-center justify-center rounded-full border-[1px]",
+                            !isSelected && "rounded-full hover:bg-blue-200",
+                            isSelected && "text-white-100 rounded-full bg-blue-500",
+                          )}>
+                          {day}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/date-picker/date-picker-suggestions.test.tsx b/packages/ui/src/components/date-picker/date-picker-suggestions.test.tsx
new file mode 100644
index 00000000..4d02564a
--- /dev/null
+++ b/packages/ui/src/components/date-picker/date-picker-suggestions.test.tsx
@@ -0,0 +1,17 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import DatePickerSuggestions from "./date-picker-suggestions";
+
+describe("Date Range Suggestions Radio Group", () => {
+  beforeEach(() => {
+    render(<DatePickerSuggestions onSuggestionChange={(value) => console.log(value)} />);
+  });
+
+  test("renders radio group and all it's options", () => {
+    expect(screen.getByLabelText("Past 1 Year"));
+    expect(screen.getByLabelText("Past 3 Months"));
+    expect(screen.getByLabelText("Past 1 Month"));
+    expect(screen.getByLabelText("Year to Date"));
+    expect(screen.queryByLabelText("It's over 9000")).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/ui/src/components/date-picker/date-picker-suggestions.tsx b/packages/ui/src/components/date-picker/date-picker-suggestions.tsx
new file mode 100644
index 00000000..e9a6ae28
--- /dev/null
+++ b/packages/ui/src/components/date-picker/date-picker-suggestions.tsx
@@ -0,0 +1,25 @@
+import _ from "lodash";
+import RadioGroup from "../radio-group";
+
+interface DatePickerSuggestion {
+  onSuggestionChange: (arg0: string) => void;
+}
+
+export enum RelativeDatePresets {
+  "YEARS_1" = "Past 1 Year",
+  "MONTHS_3" = "Past 3 Months",
+  "MONTHS_1" = "Past 1 Month",
+  "YTD" = "Year to Date",
+}
+
+const CITATION_DATE_PRESETS = _.map(RelativeDatePresets, (value) => value);
+
+export default function DatePickerSuggestions(props: DatePickerSuggestion) {
+  const { onSuggestionChange } = props;
+
+  return (
+    <div className="my-4 flex flex-1 flex-col items-start justify-center">
+      <RadioGroup name="suggested date range preset" options={CITATION_DATE_PRESETS} onChange={onSuggestionChange} />
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/date-picker/date-picker.stories.tsx b/packages/ui/src/components/date-picker/date-picker.stories.tsx
new file mode 100644
index 00000000..918edae0
--- /dev/null
+++ b/packages/ui/src/components/date-picker/date-picker.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import DatePicker from "./date-picker";
+
+const meta: Meta<typeof DatePicker> = {
+  title: "Components/Date Picker",
+  component: DatePicker,
+};
+
+type DatePickerStory = StoryObj<typeof DatePicker>;
+
+export const Default: DatePickerStory = {
+  render: (args) => <DatePicker {...args} />,
+  args: {
+    //todo
+  },
+};
+
+export default meta;
diff --git a/packages/ui/src/components/date-picker/date-picker.test.tsx b/packages/ui/src/components/date-picker/date-picker.test.tsx
new file mode 100644
index 00000000..67cd0f2c
--- /dev/null
+++ b/packages/ui/src/components/date-picker/date-picker.test.tsx
@@ -0,0 +1,74 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import DatePicker from "./date-picker";
+import userEvent from "@testing-library/user-event";
+
+describe("Date Input", () => {
+  beforeEach(() => {
+    render(
+      <DatePicker key="date-picker-init-test" onDateRangeValueChange={(value) => console.log(JSON.stringify(value))} />,
+    );
+  });
+
+  test("renders DateRangeIcon", () => {
+    expect(screen.getByTestId("DateRangeIcon")).toBeInTheDocument();
+  });
+
+  test("renders start date text", () => {
+    expect(screen.getByText("start date")).toBeInTheDocument();
+  });
+  -test("renders ChevronRightIcon", () => {
+    expect(screen.getByTestId("ChevronRightIcon")).toBeInTheDocument();
+  });
+
+  test("renders end date text", () => {
+    expect(screen.getByText("end date")).toBeInTheDocument();
+  });
+});
+
+describe("Date Input's Modal", () => {
+  const user = userEvent.setup();
+  beforeEach(async () => {
+    render(
+      <DatePicker
+        key="date-picker-modal-test"
+        onDateRangeValueChange={(value) => console.log(JSON.stringify(value))}
+      />,
+    );
+
+    const dateRangeModalTrigger = screen.getByLabelText("open-date-range-modal");
+    await user.click(dateRangeModalTrigger);
+  });
+
+  test("renders date-range-picker trigger button", () => {
+    expect(screen.getByLabelText("open-date-range-modal")).toBeInTheDocument();
+  });
+
+  test("renders Exact button", async () => {
+    expect(screen.getByRole("button", { name: /Exact/i })).toBeInTheDocument();
+  });
+
+  test("renders Suggestions button", () => {
+    expect(screen.getByRole("button", { name: /Suggestions/i })).toBeInTheDocument();
+  });
+
+  test("renders Reset button", () => {
+    expect(screen.getByRole("button", { name: /reset/i })).toBeInTheDocument();
+  });
+
+  test("renders Clear button", () => {
+    expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument();
+  });
+
+  test("renders Apply button", () => {
+    expect(screen.getByRole("button", { name: /apply/i })).toBeInTheDocument();
+  });
+
+  test("renders Start Date Label Text", () => {
+    expect(screen.getByText("Start Date")).toBeInTheDocument();
+  });
+
+  test("renders End Date Label Text", () => {
+    expect(screen.getByText("End Date")).toBeInTheDocument();
+  });
+});
diff --git a/packages/ui/src/components/date-picker/date-picker.tsx b/packages/ui/src/components/date-picker/date-picker.tsx
new file mode 100644
index 00000000..69803cc7
--- /dev/null
+++ b/packages/ui/src/components/date-picker/date-picker.tsx
@@ -0,0 +1,194 @@
+import { useState } from "react";
+import { Modal, ModalContent, ModalTrigger } from "../modal";
+
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import DateRangeIcon from "@mui/icons-material/DateRange";
+import { addMonths, addYears, startOfYear } from "date-fns";
+import { twMerge } from "tailwind-merge";
+
+import Button, { ButtonVariant } from "../button";
+import DatePickerSuggestions, { RelativeDatePresets } from "./date-picker-suggestions";
+import DatePickerCalendar from "./date-picker-calendar";
+import Input from "../input";
+import { formatToMiddleEndian } from "@lucky-parking/utilities/dist/date";
+
+interface DatePickerProps {
+  onDateRangeValueChange?: (arg0: { [key: string]: Date }) => void | null;
+}
+
+type selectedCalendar = "exact" | "suggestions";
+
+export default function DatePicker(props: DatePickerProps) {
+  const { onDateRangeValueChange = null } = props;
+
+  const [isCalendarVisible, setCalendarVisible] = useState(false);
+  const [selected, setSelected] = useState<selectedCalendar>("exact");
+  const [selectedDates, setSelectedDates] = useState<{ [key: string]: Date | null }>({
+    start: null,
+    end: null,
+  });
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const handleApply = () => {
+    if (startDate && endDate) {
+      const payload = {
+        start: startDate,
+        end: endDate,
+      };
+      setSelectedDates(payload);
+      onDateRangeValueChange && onDateRangeValueChange(payload);
+    }
+
+    setCalendarVisible(false);
+  };
+
+  const handleSuggestionChange = (value: string) => {
+    const today = new Date();
+
+    switch (value) {
+      case RelativeDatePresets.YEARS_1: {
+        const oneYearAgo = addYears(today, -1);
+        setStartDate(oneYearAgo);
+        setEndDate(today);
+        break;
+      }
+
+      case RelativeDatePresets.MONTHS_3: {
+        const threeMonthAgo = addMonths(today, -3);
+        setStartDate(threeMonthAgo);
+        setEndDate(today);
+        break;
+      }
+
+      case RelativeDatePresets.MONTHS_1: {
+        const oneMonthAgo = addMonths(today, -1);
+        setStartDate(oneMonthAgo);
+        setEndDate(today);
+        break;
+      }
+
+      case RelativeDatePresets.YTD: {
+        const firstDateOfTheYear = startOfYear(today);
+        setStartDate(firstDateOfTheYear);
+        setEndDate(today);
+        break;
+      }
+
+      default:
+        console.log("oopies mom's spaghetti o something went wrong!");
+    }
+  };
+
+  const handleReset = () => {
+    setStartDate(null);
+    setEndDate(null);
+  };
+
+  return (
+    <div className="flex space-x-1">
+      <Modal open={isCalendarVisible}>
+        <ModalTrigger asChild aria-label="open-date-range-modal">
+          <div
+            className={twMerge(
+              "flex h-[48px] w-[420px] flex-auto flex-row items-center justify-start space-x-2 px-2",
+              "bg-white-100 select-none rounded-sm outline outline-1",
+              isCalendarVisible ? "text-blue-500" : "text-black-500",
+            )}
+            onClick={() => setCalendarVisible((prevState) => !prevState)}>
+            <div className="flex flex-1 items-center justify-start space-x-1">
+              <DateRangeIcon sx={{ width: 24, height: 24 }} />
+              <div
+                className={twMerge(
+                  "text-[15.88px] font-medium leading-[18.63px]",
+                  isCalendarVisible ? "text-blue-500" : "text-black-300",
+                )}>
+                {(selectedDates.start && formatToMiddleEndian(selectedDates.start)) || "start date"}
+              </div>
+            </div>
+
+            <div className="flex flex-1 items-center justify-start space-x-1">
+              <ChevronRightIcon sx={{ width: 24, height: 24 }} />
+              <div
+                className={twMerge(
+                  "text-[15.88px] font-medium leading-[18.63px]",
+                  isCalendarVisible ? "text-blue-500" : "text-black-300",
+                )}>
+                {(selectedDates.end && formatToMiddleEndian(selectedDates.end)) || "end date"}
+              </div>
+            </div>
+          </div>
+        </ModalTrigger>
+        <ModalContent>
+          <div className="flex justify-start space-x-3">
+            <Button
+              className={selected !== "exact" ? "text-white-500" : ""}
+              variant={ButtonVariant.text}
+              onClick={() => setSelected("exact")}>
+              {" "}
+              Exact{" "}
+            </Button>
+            <Button
+              className={selected !== "suggestions" ? "text-white-500" : ""}
+              variant={ButtonVariant.text}
+              onClick={() => setSelected("suggestions")}>
+              {" "}
+              Suggestions{" "}
+            </Button>
+          </div>
+
+          <div id="border" className="border-white-400 mt-6 rounded-md border-b-2" />
+
+          <div className="h-[256px] w-[512px]">
+            {selected === "exact" ? (
+              <DatePickerCalendar
+                key="date-picker-calendar"
+                startDate={startDate}
+                endDate={endDate}
+                setStartDate={setStartDate}
+                setEndDate={setEndDate}
+                handleReset={handleReset}
+              />
+            ) : (
+              <DatePickerSuggestions onSuggestionChange={handleSuggestionChange} />
+            )}
+          </div>
+
+          <div className="flex space-x-6">
+            <div>
+              <span>Start Date</span>
+              <Input
+                id="start date"
+                className="h-8"
+                value={startDate ? formatToMiddleEndian(startDate) : "mm/dd/yyyy"}
+              />
+            </div>
+
+            <div>
+              <span>End Date</span>
+              <Input id="end date" className="h-8" value={endDate ? formatToMiddleEndian(endDate) : "mm/dd/yyyy"} />
+            </div>
+          </div>
+
+          <div id="border" className="border-white-400 mt-6 rounded-md border-b-2" />
+
+          {/** Call to Action */}
+          <div className="mt-6 flex justify-between">
+            <Button variant={ButtonVariant.text} onClick={handleReset}>
+              <p>reset</p>
+            </Button>
+
+            <div className="space-between flex space-x-3">
+              <Button variant={ButtonVariant.outline} onClick={() => setCalendarVisible(false)}>
+                <p>cancel</p>
+              </Button>
+              <Button variant={ButtonVariant.primary} onClick={handleApply}>
+                <p>apply</p>
+              </Button>
+            </div>
+          </div>
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/date-picker/index.ts b/packages/ui/src/components/date-picker/index.ts
new file mode 100644
index 00000000..bc2a5f1e
--- /dev/null
+++ b/packages/ui/src/components/date-picker/index.ts
@@ -0,0 +1 @@
+export { default } from "./date-picker.tsx";
diff --git a/packages/ui/src/components/date-picker/utils/create-two-month-calendar.ts b/packages/ui/src/components/date-picker/utils/create-two-month-calendar.ts
new file mode 100644
index 00000000..1f9fd0f9
--- /dev/null
+++ b/packages/ui/src/components/date-picker/utils/create-two-month-calendar.ts
@@ -0,0 +1,40 @@
+import { CalendarDate } from "@/components/calendar/utils/create-calendar";
+
+export type CALENDAR_MONTH = CalendarDate | object | null;
+
+export function createTwoMonthCalendar(year: number, month: number) {
+  const firstMonth = createCalendarMonth(year, month);
+  const nextMonth = (month + 1) % 12;
+  const secondMonth = createCalendarMonth(year, nextMonth);
+
+  return [firstMonth, secondMonth];
+}
+
+export function createCalendarMonth(year: number, month: number) {
+  const startDay = 0;
+  const currentDate = new Date(year, month, 1);
+
+  currentDate.setDate(currentDate.getDate() - ((currentDate.getDay() - startDay + 7) % 7));
+
+  // Initialize a two-dimensional array to hold the calendar
+  const calendar: CALENDAR_MONTH[][] = [];
+  // Populate the calendar with dates
+  for (let row = 0; row < 5; row++) {
+    calendar[row] = [];
+    for (let col = 0; col < 7; col++) {
+      //append days for current month and next month
+
+      calendar[row][col] =
+        currentDate.getMonth() === month
+          ? {
+              day: currentDate.getDate(),
+              month: currentDate.getMonth(),
+              year: currentDate.getFullYear(),
+            }
+          : {};
+
+      currentDate.setDate(currentDate.getDate() + 1);
+    }
+  }
+  return calendar;
+}