diff --git a/web/core/components/core/filters/date-filter-modal.tsx b/web/core/components/core/filters/date-filter-modal.tsx
index 9fa63ad6450..1ae7ea35100 100644
--- a/web/core/components/core/filters/date-filter-modal.tsx
+++ b/web/core/components/core/filters/date-filter-modal.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Fragment } from "react";
 
-import { DayPicker } from "react-day-picker";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { Controller, useForm } from "react-hook-form";
 
 import { X } from "lucide-react";
@@ -49,6 +49,8 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
   const date1 = getDate(watch("date1"));
   const date2 = getDate(watch("date1"));
 
+  const defaultClassNames = getDefaultClassNames();
+
   const isInvalid = watch("filterType") === "range" && date1 && date2 ? date1 > date2 : false;
 
   return (
@@ -97,6 +99,8 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                         const date2Value = getDate(watch("date2"));
                         return (
                           <DayPicker
+                            classNames={{root: `${defaultClassNames.root} border border-custom-border-200 p-3 rounded-md`}}
+                            captionLayout="dropdown"
                             selected={dateValue}
                             defaultMonth={dateValue}
                             onSelect={(date) => {
@@ -105,7 +109,6 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                             }}
                             mode="single"
                             disabled={date2Value ? [{ after: date2Value }] : undefined}
-                            className="border border-custom-border-200 p-3 rounded-md"
                           />
                         );
                       }}
@@ -119,6 +122,8 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                           const date1Value = getDate(watch("date1"));
                           return (
                             <DayPicker
+                              classNames={{root: `${defaultClassNames.root} border border-custom-border-200 p-3 rounded-md`}}
+                              captionLayout="dropdown"
                               selected={dateValue}
                               defaultMonth={dateValue}
                               onSelect={(date) => {
@@ -127,7 +132,6 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                               }}
                               mode="single"
                               disabled={date1Value ? [{ before: date1Value }] : undefined}
-                              className="border border-custom-border-200 p-3 rounded-md"
                             />
                           );
                         }}
diff --git a/web/core/components/dropdowns/date-range.tsx b/web/core/components/dropdowns/date-range.tsx
index 453215e9947..aa90d887b42 100644
--- a/web/core/components/dropdowns/date-range.tsx
+++ b/web/core/components/dropdowns/date-range.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
-import { DateRange, DayPicker, Matcher } from "react-day-picker";
+import { DateRange, DayPicker, Matcher, getDefaultClassNames } from "react-day-picker";
 import { usePopper } from "react-popper";
 import { ArrowRight, CalendarDays } from "lucide-react";
 import { Combobox } from "@headlessui/react";
@@ -133,6 +133,8 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
     setDateRange(value);
   }, [value]);
 
+  const defaultClassNames = getDefaultClassNames();
+
   const comboButton = (
     <button
       ref={setReferenceElement}
@@ -198,12 +200,14 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3"
+            className="my-1 bg-custom-background-100 shadow-custom-shadow-rg overflow-hidden"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
             <DayPicker
+              captionLayout="dropdown"
+              classNames={{root: `${defaultClassNames.root} p-3 rounded-md`}}
               selected={dateRange}
               onSelect={(val) => {
                 // if both the dates are not required, immediately call onSelect
diff --git a/web/core/components/dropdowns/date.tsx b/web/core/components/dropdowns/date.tsx
index bca7ed52c80..8035825b0c0 100644
--- a/web/core/components/dropdowns/date.tsx
+++ b/web/core/components/dropdowns/date.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { DayPicker, Matcher } from "react-day-picker";
+import { DayPicker, Matcher, getDefaultClassNames } from "react-day-picker";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { CalendarDays, X } from "lucide-react";
@@ -80,6 +80,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
 
   const isDateSelected = value && value.toString().trim() !== "";
 
+  const defaultClassNames = getDefaultClassNames();
+
   const onOpen = () => {
     if (referenceElement) referenceElement.focus();
   };
@@ -166,7 +168,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
           <Combobox.Options data-prevent-outside-click static>
             <div
               className={cn(
-                "my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20",
+                "my-1 bg-custom-background-100 shadow-custom-shadow-rg overflow-hidden z-20",
                 optionsClassName
               )}
               ref={setPopperElement}
@@ -174,6 +176,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
               {...attributes.popper}
             >
               <DayPicker
+                captionLayout="dropdown"
+                classNames={{root: `${defaultClassNames.root} p-3 rounded-md`}}
                 selected={getDate(value)}
                 defaultMonth={getDate(value)}
                 onSelect={(date) => {
diff --git a/web/core/components/inbox/modals/snooze-issue-modal.tsx b/web/core/components/inbox/modals/snooze-issue-modal.tsx
index 02134d56635..8d6931438f5 100644
--- a/web/core/components/inbox/modals/snooze-issue-modal.tsx
+++ b/web/core/components/inbox/modals/snooze-issue-modal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { FC, Fragment, useState } from "react";
-import { DayPicker } from "react-day-picker";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button } from "@plane/ui";
@@ -18,6 +18,8 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
   // states
   const [date, setDate] = useState(value || new Date());
 
+  const defaultClassNames = getDefaultClassNames();
+
   return (
     <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -46,6 +48,8 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
               <Dialog.Panel className="relative flex transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <div className="flex h-full w-full flex-col gap-y-1">
                   <DayPicker
+                    captionLayout="dropdown"
+                    classNames={{root: `${defaultClassNames.root} rounded-md border border-custom-border-200 p-3`}}
                     selected={date ? new Date(date) : undefined}
                     defaultMonth={date ? new Date(date) : undefined}
                     onSelect={(date) => {
@@ -53,7 +57,6 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
                       setDate(date);
                     }}
                     mode="single"
-                    className="rounded-md border border-custom-border-200 p-3"
                     disabled={[
                       {
                         before: new Date(),
diff --git a/web/package.json b/web/package.json
index 5d2ff54e983..3537563eeb1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -55,7 +55,7 @@
     "posthog-js": "^1.131.3",
     "react": "^18.3.1",
     "react-color": "^2.19.3",
-    "react-day-picker": "^8.10.0",
+    "react-day-picker": "^9.5.0",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "7.51.5",
diff --git a/web/styles/react-day-picker.css b/web/styles/react-day-picker.css
index 4532d3a0324..5e4e42412c0 100644
--- a/web/styles/react-day-picker.css
+++ b/web/styles/react-day-picker.css
@@ -1,4 +1,4 @@
-.rdp {
+.rdp-root {
   font-size: 12px;
 
   --rdp-cell-size: 40px;
@@ -21,126 +21,112 @@
   background: transparent;
 }
 
-/* Hide elements for devices that are not screen readers */
-.rdp-vhidden {
+.rdp-root {
+  position: relative; /* Required to position the nav. */
   box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  position: absolute !important;
-  top: 0;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  border: 0 !important;
 }
 
-/* Buttons */
-.rdp-button_reset {
-  appearance: none;
-  position: relative;
-  margin: 0;
-  padding: 0;
-  cursor: default;
-  color: inherit;
-  background: none;
-  font: inherit;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
+/* ---------- */
+/* Day Buttons */
+/* ----------- */
 
-.rdp-button_reset:focus-visible {
-  /* Make sure to reset outline only when :focus-visible is supported */
-  outline: none;
+.rdp-day_button {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--rdp-cell-size);
+  max-width: var(--rdp-cell-size);
+  height: var(--rdp-cell-size);
+  margin: 0;
+  border: 2px solid transparent;
+  border-radius: 50%;
 }
 
-.rdp-button {
-  border: 2px solid transparent;
+.rdp-day.rdp-outside:not(.rdp-selected) .rdp-day_button {
+  opacity: 0.5;
 }
 
-.rdp-button[disabled]:not(.rdp-day_selected) {
+.rdp-day.rdp-disabled:not(.rdp-selected) .rdp-day_button {
   opacity: 0.25;
 }
 
-.rdp-button:not([disabled]) {
+.rdp-day:not(.rdp-disabled) .rdp-day_button {
   cursor: pointer;
 }
 
-.rdp-button:focus-visible:not([disabled]):not(.rdp-day_selected) {
+.rdp-day:not(.rdp-selected, .rdp-disabled) .rdp-day_button:focus-visible {
   color: inherit;
   background-color: var(--rdp-background-color);
 }
 
-.rdp-button:focus-visible:not([disabled]).rdp-day_selected:not(.rdp-day_range_middle) {
+.rdp-selected:not(.rdp-range_middle, .rdp-disabled) .rdp-day_button:focus-visible {
   outline: var(--rdp-outline);
   outline-offset: 2px;
   background-color: var(--rdp-dark-background-color);
   outline-width: thin;
 }
 
-.rdp-button:hover:not([disabled]).rdp-day_selected {
-  background-color: var(--rdp-dark-background-color);
-}
-
-.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
+.rdp-day:not(.rdp-disabled) .rdp-day_button:hover {
   background-color: var(--rdp-background-color);
-}
+} 
 
-.rdp-months {
-  display: flex;
+.rdp-selected .rdp-day_button {
+  background-color: var(--rdp-accent-color);
+  border-radius: 50%;
+  color: var(--rdp-selected-color);
+  z-index: 1;
 }
 
-.rdp-month {
-  margin: 0 1em;
+.rdp-selected .rdp-day_button:hover:not(.rdp-disabled) {
+  background-color: var(--rdp-dark-background-color);
 }
 
-.rdp-month:first-child {
-  margin-left: 0;
+.rdp-week {
+  margin: 0;
+  padding: 0;
 }
 
-.rdp-month:last-child {
-  margin-right: 0;
+.rdp-today:not(.rdp-outside) {
+  position: relative;
 }
 
-.rdp-table {
-  margin: 0;
-  max-width: calc(var(--rdp-cell-size) * 7);
-  border-collapse: collapse;
+.rdp-today:not(.rdp-outside)::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 2px;
+  width: 0.5em;
+  height: 0.5em;
+  background-color: var(--rdp-background-color);
+  border-radius: 100%;
+  transform: translate(-50%, 0);
 }
 
-.rdp-with_weeknumber .rdp-table {
-  max-width: calc(var(--rdp-cell-size) * 8);
-  border-collapse: collapse;
+.rdp-selected .rdp-day_button:focus-visible,
+.rdp-selected .rdp-day_button:hover {
+  color: var(--rdp-selected-color);
+  opacity: 1;
+  background-color: var(--rdp-accent-color);
 }
 
-.rdp-caption {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.rdp-weekday {
+  vertical-align: middle;
+  font-weight: 700;
+  text-align: center;
+  font-size: 0.75em;
+  height: var(--rdp-cell-size);
   padding: 0;
-  text-align: left;
-}
+  text-transform: uppercase;
 
-.rdp-multiple_months .rdp-caption {
-  position: relative;
-  display: block;
-  text-align: center;
 }
 
-.rdp-caption_dropdowns {
-  position: relative;
-  display: inline-flex;
-}
+/* ---------- */
+/* Top Nav  */
+/* ---------- */
 
 .rdp-caption_label {
-  position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
@@ -155,36 +141,43 @@
   font-weight: 600;
 }
 
-.rdp-nav {
-  white-space: nowrap;
-}
 
-.rdp-multiple_months .rdp-caption_start .rdp-nav {
+.rdp-nav {
+  box-sizing: border-box;
   position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
-}
+  padding: inherit;
 
-.rdp-multiple_months .rdp-caption_end .rdp-nav {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
+  top: 1.2em;
+  right: 1em;
+
+  display: flex;
+  align-items: center;
 }
 
-.rdp-nav_button {
+.rdp-button_next, .rdp-button_previous {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  -moz-appearance: none;
+  -webkit-appearance: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+  appearance: none;
+  
   width: var(--rdp-caption-navigation-size);
   height: var(--rdp-caption-navigation-size);
   padding: 0.25em;
   border-radius: 2px;
 }
 
-.rdp-nav_button:hover,
-.rdp-nav_button:focus-visible {
+.rdp-button_next:hover, .rdp-button_previous:hover,
+.rdp-button_next:focus-visible, .rdp-button_previous:focus-visible {
   background-color: rgba(var(--color-background-80)) !important;
 }
 
@@ -192,9 +185,9 @@
 /* Dropdowns  */
 /* ---------- */
 
-.rdp-dropdown_year,
-.rdp-dropdown_month {
+.rdp-dropdowns {
   position: relative;
+  /* width: 100%; */
   display: inline-flex;
   align-items: center;
 }
@@ -216,119 +209,52 @@
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
-}
 
-.rdp-dropdown[disabled] {
-  opacity: unset;
-  color: unset;
-}
-
-.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
-  background-color: var(--rdp-background-color);
-  border: var(--rdp-outline);
-  border-radius: 6px;
-}
-
-.rdp-dropdown_icon {
-  margin: 0 0 0 5px;
-}
-
-.rdp-head {
-  border: 0;
 }
-
-.rdp-head_row,
-.rdp-row {
-  height: 100%;
-}
-
-.rdp-head_cell {
-  vertical-align: middle;
-  font-size: 0.75em;
-  font-weight: 700;
-  text-align: center;
-  height: 100%;
-  height: var(--rdp-cell-size);
-  padding: 0;
-  text-transform: uppercase;
-}
-
-.rdp-tbody {
-  border: 0;
-}
-
-.rdp-tfoot {
-  margin: 0.5em;
+.rdp-dropdown:hover {
+  cursor: pointer;
 }
 
-.rdp-cell {
-  width: var(--rdp-cell-size);
-  height: 100%;
-  height: var(--rdp-cell-size);
-  padding: 0;
-  text-align: center;
-}
+.rdp-dropdown_root {
+  margin: 0;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
 
-.rdp-weeknumber {
-  font-size: 0.75em;
 }
 
-.rdp-weeknumber,
-.rdp-day {
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: var(--rdp-cell-size);
-  max-width: var(--rdp-cell-size);
-  height: var(--rdp-cell-size);
-  margin: 0;
-  border: 2px solid transparent;
-  border-radius: 100%;
+.rdp-months_dropdown {
+  text-transform: capitalize;
 }
 
-.rdp-day_today:not(.rdp-day_outside) {
-  position: relative;
+.rdp-dropdown[data-disabled="true"] {
+  opacity: unset;
+  color: unset;
 }
 
-.rdp-day_today:not(.rdp-day_outside)::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  bottom: 2px;
-  width: 0.5em;
-  height: 0.5em;
+.rdp-dropdown:focus-visible:not([data-disabled="true"]) + .rdp-caption_label {
   background-color: var(--rdp-background-color);
-  border-radius: 100%;
-  transform: translate(-50%, 0);
-}
-
-.rdp-day_selected,
-.rdp-day_selected:focus-visible,
-.rdp-day_selected:hover {
-  color: var(--rdp-selected-color);
-  opacity: 1;
-  background-color: var(--rdp-accent-color);
+  border: var(--rdp-outline);
+  border-radius: 6px;
 }
 
-.rdp-day_outside:not(.rdp-day_selected) {
-  opacity: 0.5;
+.rdp-dropdown_icon {
+  margin: 0 0 0 5px;
 }
 
-.rdp-day_selected:focus-visible {
-  z-index: 1;
-}
+/* --------------- */
+/* Range selection */
+/* --------------- */
 
-td:has(.rdp-day_range_start),
-td:has(.rdp-day_range_middle),
-td:has(.rdp-day_range_end) {
+.rdp-range_start,
+.rdp-range_middle,
+.rdp-range_end {
   position: relative;
 }
 
-td:has(.rdp-day_range_start)::before,
-td:has(.rdp-day_range_middle)::before,
-td:has(.rdp-day_range_end)::before {
+.rdp-range_start::before,
+.rdp-range_middle::before,
+.rdp-range_end::before {
   content: "";
   position: absolute;
   background-color: var(--rdp-background-color);
@@ -336,33 +262,35 @@ td:has(.rdp-day_range_end)::before {
   height: 100%;
   width: 50%;
   transform: translate(0, -50%);
+  z-index: -1;
 }
 
-td:has(.rdp-day_range_start)::before {
+.rdp-range_start::before {
   left: 50%;
 }
 
-td:has(.rdp-day_range_middle)::before {
+.rdp-range_middle::before {
   left: 50%;
   width: 100%;
   transform: translate(-50%, -50%);
 }
 
-td:has(.rdp-day_range_end)::before {
+.rdp-range_end::before {
   right: 50%;
 }
 
-td:has(.rdp-day_range_start.rdp-day_range_end)::before {
+.rdp-range_start.rdp-range_end::before {
   display: none;
 }
 
-.rdp-day_range_middle {
+.rdp-range_middle .rdp-day_button{
   background-color: transparent;
   color: inherit;
 }
 
-.rdp-day_range_middle:hover,
-.rdp-day_range_middle:focus-visible {
-  background-color: var(--rdp-background-color) !important;
-  color: inherit !important;
+.rdp-day.rdp-range_middle .rdp-day_button:hover,
+.rdp-day.rdp-range_middle .rdp-day_button:focus-visible {
+  background-color: var(--rdp-background-color);
+  color: inherit;
 }
+