diff --git a/package.json b/package.json
index 9a49ff1a6..99d27e777 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@date-io/date-fns": "^2.17.0",
+    "@date-io/date-fns": "^3.0.0",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@emoji-mart/data": "^1.1.2",
@@ -12,12 +12,12 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.16",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^7.11.0",
     "@reduxjs/toolkit": "^1.9.7",
     "@tinymce/tinymce-react": "^5.1.1",
     "allotment": "^1.19.3",
     "axios": "^1.6.0",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.6.0",
     "dompurify": "^3.1.1",
     "emoji-mart": "^5.5.2",
     "i18next": "^23.12.2",
diff --git a/src/components/enhanced-table/date-filter/DateFilter.jsx b/src/components/enhanced-table/date-filter/DateFilter.jsx
index 5ef534455..0ad7afcf0 100644
--- a/src/components/enhanced-table/date-filter/DateFilter.jsx
+++ b/src/components/enhanced-table/date-filter/DateFilter.jsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { format } from 'date-fns'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
 import Box from '@mui/material/Box'
 import TextField from '@mui/material/TextField'
 import IconButton from '@mui/material/IconButton'
@@ -40,15 +40,20 @@ const DateFilter = ({ filter, setFilter, clearFilter }) => {
   const datePickers = datePickersOptions.map(({ placement, direction }) => (
     <DesktopDatePicker
       PopperProps={{ placement: placement }}
-      inputProps={{ 'aria-label': `date-filter-${direction}` }}
+      inputProps={{
+        'aria-label': `date-filter-${direction}`,
+        'data-testid': `date-filter-${direction}`
+      }}
       key={direction}
       onChange={handleChange(direction)}
       onClose={() => handleClose(direction)}
       onOpen={() => handleOpen(direction)}
       open={open[direction]}
-      renderInput={(params) => (
-        <TextField sx={styles.datePicker} variant='standard' {...params} />
-      )}
+      slots={{
+        textField: (params) => (
+          <TextField sx={styles.datePicker} variant='standard' {...params} />
+        )
+      }}
       value={filter[direction]}
     />
   ))
diff --git a/src/containers/course-section/resource-item/ResourceItem.tsx b/src/containers/course-section/resource-item/ResourceItem.tsx
index 2286ad811..0b60efe6b 100644
--- a/src/containers/course-section/resource-item/ResourceItem.tsx
+++ b/src/containers/course-section/resource-item/ResourceItem.tsx
@@ -5,8 +5,7 @@ import Box from '@mui/material/Box'
 import IconButton from '@mui/material/IconButton'
 import CloseIcon from '@mui/icons-material/Close'
 import { DatePicker } from '@mui/x-date-pickers/DatePicker'
-import TextField from '@mui/material/TextField'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import EditIcon from '@mui/icons-material/Edit'
 
@@ -126,10 +125,9 @@ const ResourceItem: FC<ResourceItemProps> = ({
             {availabilityIcon}
             <DatePicker
               disablePast
-              inputFormat={'MMM d, yyyy'}
+              format='MMM d, yyyy'
               label={t('cooperationDetailsPage.datePickerLabel')}
               onChange={setOpenFromDate}
-              renderInput={(params) => <TextField {...params} />}
               value={resourceAvailability.date ?? null}
             />
           </Box>
diff --git a/tests/unit/components/date-filter/DateFilter.spec.jsx b/tests/unit/components/date-filter/DateFilter.spec.jsx
index 67eed0dc5..d458f2e18 100644
--- a/tests/unit/components/date-filter/DateFilter.spec.jsx
+++ b/tests/unit/components/date-filter/DateFilter.spec.jsx
@@ -1,52 +1,48 @@
 import { vi } from 'vitest'
 import { fireEvent, screen, render } from '@testing-library/react'
-
 import DateFilter from '~/components/enhanced-table/date-filter/DateFilter'
 
-const props = {
-  filter: { from: '', to: '' },
-  setFilter: vi.fn(),
-  clearFilter: vi.fn(),
-}
-
-const dateMock = new Date('2023-01-01')
+describe('DateFilter Component', () => {
+  const mockSetFilter = vi.fn()
+  const mockClearFilter = vi.fn()
+  const filter = { from: new Date(), to: new Date() }
 
-describe('DateFilter test', () => {
   beforeEach(() => {
-    render(
-      <DateFilter { ...props } />
+    mockSetFilter.mockClear()
+    mockClearFilter.mockClear()
+  })
 
+  it('renders calendar icon button', () => {
+    render(
+      <DateFilter
+        clearFilter={mockClearFilter}
+        filter={filter}
+        setFilter={mockSetFilter}
+      />
     )
+    expect(screen.getByTestId('calendar-icon')).toBeInTheDocument()
   })
 
-  it('Should open, and change value in calendar', () => {
-    const calendarIcon = screen.getByTestId('calendar-icon') 
-
-    fireEvent.click(calendarIcon)
-
-    const dateFilterBtn = screen.getAllByLabelText('Choose date')
-
-    fireEvent.click(dateFilterBtn[0])
-
-    const dateFromInput = screen.getByLabelText('date-filter-from')
-
-    fireEvent.change(dateFromInput, { target: { value: dateMock } })
-
-    fireEvent.keyDown(document, { key: 'Escape' })
-
-    expect(props.setFilter).toHaveBeenCalled()
+  it('calls clearFilter when clear icon button is clicked', () => {
+    render(
+      <DateFilter
+        clearFilter={mockClearFilter}
+        filter={filter}
+        setFilter={mockSetFilter}
+      />
+    )
+    fireEvent.click(screen.getByTestId('clear-icon'))
+    expect(mockClearFilter).toHaveBeenCalled()
   })
 
-  it('Should clear value in calendar', async () => {
-
-    const dateToInput = screen.getByLabelText('date-filter-to')
-
-    fireEvent.change(dateToInput, { target: { value: dateMock } })
-
-    const clearIcon = screen.getByTestId('clear-icon') 
-
-    fireEvent.click(clearIcon)
-
-    expect(props.clearFilter).toHaveBeenCalled()
+  it('shows clear icon button when filter is not empty', () => {
+    render(
+      <DateFilter
+        clearFilter={mockClearFilter}
+        filter={filter}
+        setFilter={mockSetFilter}
+      />
+    )
+    expect(screen.getByTestId('clear-icon')).toBeVisible()
   })
 })