diff --git a/api/package.json b/api/package.json
index 3baede8ecc6..19e17cc4b18 100644
--- a/api/package.json
+++ b/api/package.json
@@ -20,7 +20,7 @@
     "@types/pino": "^7.0.5",
     "ajv": "8.12.0",
     "ajv-formats": "2.1.1",
-    "date-fns": "2.30.0",
+    "date-fns": "4.1.0",
     "dotenv": "16.4.5",
     "fast-uri": "2.3.0",
     "fastify": "5.2.0",
diff --git a/client/package.json b/client/package.json
index 3e7b5db0945..a2c65545d94 100644
--- a/client/package.json
+++ b/client/package.json
@@ -66,7 +66,8 @@
     "browser-cookies": "1.2.0",
     "canvas-confetti": "^1.6.0",
     "crypto-browserify": "3.12.0",
-    "date-fns": "2.30.0",
+    "date-fns": "4.1.0",
+    "date-fns-tz": "3.2.0",
     "final-form": "4.20.10",
     "gatsby": "3.15.0",
     "gatsby-cli": "3.15.0",
diff --git a/client/src/components/profile/components/heat-map.tsx b/client/src/components/profile/components/heat-map.tsx
index 2cb8e7aa08f..3afe0d20b6f 100644
--- a/client/src/components/profile/components/heat-map.tsx
+++ b/client/src/components/profile/components/heat-map.tsx
@@ -1,18 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import CalendarHeatMap from 'react-calendar-heatmap';
-// TODO: Check if we can import { addDays, addMonths ... } from 'date-fns'
-// without bundling all of the package then we can remove the disable-next-line
-// comments.
 
-// eslint-disable-next-line import/no-duplicates
-import addDays from 'date-fns/addDays';
-// eslint-disable-next-line import/no-duplicates
-import addMonths from 'date-fns/addMonths';
-// eslint-disable-next-line import/no-duplicates
-import isEqual from 'date-fns/isEqual';
-// eslint-disable-next-line import/no-duplicates
-import startOfDay from 'date-fns/startOfDay';
+import { addDays, addMonths, isEqual, startOfDay } from 'date-fns';
 import React, { Component } from 'react';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
@@ -22,8 +12,6 @@ import { Row, Spacer } from '@freecodecamp/ui';
 import 'react-calendar-heatmap/dist/styles.css';
 import './heatmap.css';
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import envData from '../../../../config/env.json';
 import { getLangCode } from '../../../../../shared/config/i18n';
 import { User } from '../../../redux/prop-types';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 304fd1c2d66..3d8b6d974d8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -199,8 +199,8 @@ importers:
         specifier: 2.1.1
         version: 2.1.1(ajv@8.12.0)
       date-fns:
-        specifier: 2.30.0
-        version: 2.30.0
+        specifier: 4.1.0
+        version: 4.1.0
       dotenv:
         specifier: 16.4.5
         version: 16.4.5
@@ -377,8 +377,11 @@ importers:
         specifier: 3.12.0
         version: 3.12.0
       date-fns:
-        specifier: 2.30.0
-        version: 2.30.0
+        specifier: 4.1.0
+        version: 4.1.0
+      date-fns-tz:
+        specifier: 3.2.0
+        version: 3.2.0(date-fns@4.1.0)
       final-form:
         specifier: 4.20.10
         version: 4.20.10
@@ -6814,10 +6817,18 @@ packages:
   dataloader@2.0.0:
     resolution: {integrity: sha512-YzhyDAwA4TaQIhM5go+vCLmU0UikghC/t9DTQYZR2M/UvZ1MdOhPezSDZcjj9uqQJOMqjLcpWtyW2iNINdlatQ==}
 
+  date-fns-tz@3.2.0:
+    resolution: {integrity: sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==}
+    peerDependencies:
+      date-fns: ^3.0.0 || ^4.0.0
+
   date-fns@2.30.0:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   dateformat@4.6.3:
     resolution: {integrity: sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==}
 
@@ -17613,7 +17624,7 @@ snapshots:
   '@eslint/eslintrc@0.4.3':
     dependencies:
       ajv: 6.12.6
-      debug: 4.4.1
+      debug: 4.3.4(supports-color@8.1.1)
       espree: 7.3.1
       globals: 13.22.0
       ignore: 4.0.6
@@ -18024,7 +18035,7 @@ snapshots:
   '@humanwhocodes/config-array@0.5.0':
     dependencies:
       '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.4.1
+      debug: 4.3.4(supports-color@8.1.1)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -20729,7 +20740,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 4.33.0
       '@typescript-eslint/visitor-keys': 4.33.0
-      debug: 4.4.1
+      debug: 4.3.4(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
@@ -21120,7 +21131,7 @@ snapshots:
 
   agent-base@6.0.2:
     dependencies:
-      debug: 4.4.1
+      debug: 4.3.4(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -22966,10 +22977,16 @@ snapshots:
 
   dataloader@2.0.0: {}
 
+  date-fns-tz@3.2.0(date-fns@4.1.0):
+    dependencies:
+      date-fns: 4.1.0
+
   date-fns@2.30.0:
     dependencies:
       '@babel/runtime': 7.23.1
 
+  date-fns@4.1.0: {}
+
   dateformat@4.6.3: {}
 
   debounce@1.2.1: {}
@@ -23374,7 +23391,7 @@ snapshots:
     dependencies:
       base64-arraybuffer: 0.1.4
       component-emitter: 1.3.0
-      debug: 4.3.7
+      debug: 4.3.4(supports-color@8.1.1)
       engine.io-parser: 4.0.3
       has-cors: 1.1.0
       parseqs: 0.0.6
@@ -23397,7 +23414,7 @@ snapshots:
       base64id: 2.0.0
       cookie: 0.4.2
       cors: 2.8.5
-      debug: 4.3.7
+      debug: 4.3.4(supports-color@8.1.1)
       engine.io-parser: 4.0.3
       ws: 7.4.6
     transitivePeerDependencies:
@@ -30979,7 +30996,7 @@ snapshots:
     dependencies:
       '@types/component-emitter': 1.2.12
       component-emitter: 1.3.0
-      debug: 4.3.7
+      debug: 4.3.4(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color