diff --git a/packages/ui/components/form/date-range-picker/Calendar.tsx b/packages/ui/components/form/date-range-picker/Calendar.tsx
index afcd5b4d89c2af..db209ecd0abbc2 100644
--- a/packages/ui/components/form/date-range-picker/Calendar.tsx
+++ b/packages/ui/components/form/date-range-picker/Calendar.tsx
@@ -31,22 +31,24 @@ function Calendar({
         nav: "flex items-center",
         head: "",
         head_row: "flex w-full items-center justify-between",
-        head_cell: "w-8 md:w-11 h-8 text-sm font-medium text-default text-center",
+        head_cell:
+          "w-8 md:w-11 h-8 text-sm font-medium text-default text-center",
         nav_button: cn(buttonClasses({ color: "minimal", variant: "icon" })),
         table: "w-full border-collapse stack-y-1",
         row: "flex w-full mt-0.5 gap-0.5",
         cell: "w-8 h-8 md:h-11 md:w-11 text-center text-sm p-0 relative focus-within:relative focus-within:z-20",
         day: cn(
           buttonClasses({ color: "minimal" }),
-          "w-8 h-8 md:h-11 md:w-11 p-0 text-sm font-medium aria-selected:opacity-100 inline-flex items-center justify-center"
+          "w-8 h-8 md:h-11 md:w-11 p-0 text-sm font-medium aria-selected:opacity-100 inline-flex items-center justify-center",
         ),
         day_range_end: "hover:bg-inverted! text-inverted!",
         day_range_start: "hover:bg-inverted! text-inverted!",
         day_selected: "bg-inverted text-inverted",
         day_today: "",
         day_outside: "",
-        day_disabled: "text-muted opacity-50",
-        day_range_middle: "aria-selected:bg-emphasis aria-selected:text-emphasis",
+        day_disabled: "text-[#4A4E59] dark:text-[#A3A3A3]",
+        day_range_middle:
+          "aria-selected:bg-emphasis aria-selected:text-emphasis",
         day_hidden: "invisible",
         ...classNames,
       }}
diff --git a/packages/ui/components/form/datepicker/DatePicker.tsx b/packages/ui/components/form/datepicker/DatePicker.tsx
index ddf5abd8ade38d..60df582410c700 100644
--- a/packages/ui/components/form/datepicker/DatePicker.tsx
+++ b/packages/ui/components/form/datepicker/DatePicker.tsx
@@ -7,7 +7,7 @@ import { Button } from "../../button/Button";
 import { Calendar } from "../date-range-picker/Calendar";
 
 type Props = {
-  date: Date;
+  date: Date | null;
   onDatesChange?: ((date: Date) => void) | undefined;
   className?: string;
   disabled?: boolean;
@@ -15,9 +15,16 @@ type Props = {
   label?: string;
 };
 
-const DatePicker = ({ minDate, disabled, date, onDatesChange, className, label }: Props) => {
+const DatePicker = ({
+  minDate,
+  disabled,
+  date,
+  onDatesChange,
+  className,
+  label,
+}: Props) => {
   function handleDayClick(newDate: Date) {
-    onDatesChange?.(newDate ?? new Date());
+    onDatesChange?.(newDate);
   }
   const fromDate = minDate ?? new Date();
   const calender = (
@@ -26,8 +33,8 @@ const DatePicker = ({ minDate, disabled, date, onDatesChange, className, label }
       fromDate={minDate === null ? undefined : fromDate}
       // toDate={maxDate}
       mode="single"
-      defaultMonth={date}
-      selected={date}
+      defaultMonth={date ?? fromDate}
+      selected={date ?? undefined}
       onDayClick={(day) => handleDayClick(day)}
       numberOfMonths={1}
       disabled={disabled}
@@ -43,18 +50,28 @@ const DatePicker = ({ minDate, disabled, date, onDatesChange, className, label }
             data-testid="pick-date"
             color="secondary"
             EndIcon="calendar"
-            className={classNames("justify-between text-left font-normal", !date && "text-subtle")}>
-            {label ?? (date ? <>{format(date, "LLL dd, y")}</> : <span>Pick a date</span>)}
+            disabled={disabled}
+            className={classNames(
+              "justify-between text-left font-normal",
+              !date && "text-subtle",
+            )}
+          >
+            {label ??
+              (date ? (
+                <>{format(date, "LLL dd, y")}</>
+              ) : (
+                <span>Pick a date</span>
+              ))}
           </Button>
         </Popover.Trigger>
         <Popover.Portal>
-        <Popover.Content
-          className="bg-default text-emphasis z-50 w-auto rounded-md border p-0 outline-none"
-          align="start"
-          sideOffset={4}
+          <Popover.Content
+            className="bg-default text-emphasis z-50 w-auto rounded-md border p-0 outline-none"
+            align="start"
+            sideOffset={4}
           >
-          {calender}
-        </Popover.Content>
+            {calender}
+          </Popover.Content>
         </Popover.Portal>
       </Popover.Root>
     </div>
diff --git a/packages/ui/components/form/datepicker/datepicker.test.tsx b/packages/ui/components/form/datepicker/datepicker.test.tsx
index ed522f7ab17b6b..fbd3b36897ca39 100644
--- a/packages/ui/components/form/datepicker/datepicker.test.tsx
+++ b/packages/ui/components/form/datepicker/datepicker.test.tsx
@@ -1,6 +1,6 @@
 import { render, fireEvent } from "@testing-library/react";
 import { format } from "date-fns";
-import { vi } from "vitest";
+import { beforeEach, vi } from "vitest";
 
 import DatePicker from "./DatePicker";
 
@@ -9,6 +9,10 @@ const onChangeMock = vi.fn();
 describe("Tests for DatePicker Component", () => {
   const testDate = new Date("2024-02-20");
 
+  beforeEach(() => {
+    onChangeMock.mockClear();
+  });
+
   test("Should render correctly with default date", () => {
     const testDate = new Date("2024-02-20");
     const { getByTestId } = render(<DatePicker date={testDate} />);
@@ -18,46 +22,66 @@ describe("Tests for DatePicker Component", () => {
   });
 
   test("Should show placeholder when no date is provided", () => {
-    const { getByTestId } = render(<DatePicker date={null as unknown as Date} />);
+    const { getByTestId } = render(<DatePicker date={null} />);
 
     const dateButton = getByTestId("pick-date");
     expect(dateButton).toHaveTextContent("Pick a date");
   });
 
-  test("Should handle date selection correctly", async () => {
-    const testDate = new Date("2024-02-20");
-    const { getByTestId, getAllByRole } = render(<DatePicker date={testDate} onDatesChange={onChangeMock} />);
+  test("Should handle date selection correctly", () => {
+    const { getByTestId, getAllByRole } = render(
+      <DatePicker date={testDate} onDatesChange={onChangeMock} />,
+    );
 
     const dateButton = getByTestId("pick-date");
     fireEvent.click(dateButton);
+
     const gridCells = getAllByRole("gridcell");
     const selectedDate = gridCells.find((cell) => {
       return cell.getAttribute("tabindex") === "0";
     });
 
     expect(selectedDate).toBeTruthy();
-    await expect(selectedDate).not.toHaveClass("opacity-50");
+    expect(selectedDate).not.toHaveAttribute("aria-disabled", "true");
+
+    fireEvent.click(selectedDate as HTMLElement);
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    expect(onChangeMock).toHaveBeenCalledWith(expect.any(Date));
   });
-  test("Should respect minDate prop", async () => {
-    const testDate = new Date("2024-02-20");
+
+  test("Should respect minDate prop", () => {
     const minDate = new Date("2024-02-19");
-    const { getByTestId, getAllByRole } = render(
-      <DatePicker date={testDate} minDate={minDate} onDatesChange={onChangeMock} />
+    const { getByTestId, getByRole } = render(
+      <DatePicker
+        date={testDate}
+        minDate={minDate}
+        onDatesChange={onChangeMock}
+      />,
     );
 
     const dateButton = getByTestId("pick-date");
     fireEvent.click(dateButton);
 
-    const disabledDates = getAllByRole("gridcell").filter((cell) => cell.classList.contains("opacity-50"));
-    expect(disabledDates.length).toBeGreaterThan(0);
-    await expect(disabledDates[0]).toHaveAttribute("disabled");
+    const dayBeforeMinDate = getByRole("gridcell", {
+      name: /February 18.*2024/i,
+    });
+    const minDateCell = getByRole("gridcell", {
+      name: /February 19.*2024/i,
+    });
+
+    expect(dayBeforeMinDate).toHaveAttribute("aria-disabled", "true");
+    expect(minDateCell).not.toHaveAttribute("aria-disabled", "true");
   });
 
   test("Should respect disabled prop", () => {
-    const { getByTestId } = render(<DatePicker date={testDate} disabled={true} />);
+    const { getByTestId, queryByRole } = render(
+      <DatePicker date={testDate} disabled={true} />,
+    );
 
     const dateButton = getByTestId("pick-date");
-    expect(dateButton.classList.toString()).toContain("disabled:cursor-not-allowed");
-    expect(dateButton.classList.toString()).toContain("disabled:opacity-30");
+    expect(dateButton).toBeDisabled();
+
+    fireEvent.click(dateButton);
+    expect(queryByRole("grid")).not.toBeInTheDocument();
   });
 });