diff --git a/graph-app/package-lock.json b/graph-app/package-lock.json
index 86fb326..51a4edd 100644
--- a/graph-app/package-lock.json
+++ b/graph-app/package-lock.json
@@ -23,8 +23,8 @@
         "@ng-bootstrap/ng-bootstrap": "^15.1.1",
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.2",
-        "date-fns": "^2.30.0",
-        "date-fns-tz": "^2.0.0",
+        "date-fns": "4.1.0",
+        "date-fns-tz": "3.2.0",
         "rxjs": "^7.8.0",
         "tslib": "^2.6.2",
         "windows-iana": "^5.1.0",
@@ -5255,26 +5255,22 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0"
-      },
-      "engines": {
-        "node": ">=0.11"
-      },
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/date-fns"
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
       }
     },
     "node_modules/date-fns-tz": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.0.tgz",
-      "integrity": "sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.2.0.tgz",
+      "integrity": "sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==",
+      "license": "MIT",
       "peerDependencies": {
-        "date-fns": ">=2.0.0"
+        "date-fns": "^3.0.0 || ^4.0.0"
       }
     },
     "node_modules/date-format": {
diff --git a/graph-app/package.json b/graph-app/package.json
index c64669c..7856aae 100644
--- a/graph-app/package.json
+++ b/graph-app/package.json
@@ -27,8 +27,8 @@
     "@ng-bootstrap/ng-bootstrap": "^15.1.1",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",
-    "date-fns": "^2.30.0",
-    "date-fns-tz": "^2.0.0",
+    "date-fns": "4.1.0",
+    "date-fns-tz": "3.2.0",
     "rxjs": "^7.8.0",
     "tslib": "^2.6.2",
     "windows-iana": "^5.1.0",
diff --git a/graph-app/src/app/calendar/calendar.component.ts b/graph-app/src/app/calendar/calendar.component.ts
index 748656f..c5452b4 100644
--- a/graph-app/src/app/calendar/calendar.component.ts
+++ b/graph-app/src/app/calendar/calendar.component.ts
@@ -3,8 +3,8 @@
 
 import { Component, OnInit } from '@angular/core';
 import { parseISO } from 'date-fns';
-import { endOfWeek, startOfWeek } from 'date-fns/esm';
-import { zonedTimeToUtc } from 'date-fns-tz';
+import { endOfWeek, startOfWeek } from 'date-fns';
+import { fromZonedTime } from 'date-fns-tz';
 import { findIana } from 'windows-iana';
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 
@@ -36,8 +36,8 @@ export class CalendarComponent implements OnInit {
     // but in UTC. For example, for Pacific Standard Time, the time value would be
     // 07:00:00Z
     const now = new Date();
-    const weekStart = zonedTimeToUtc(startOfWeek(now), timeZone);
-    const weekEnd = zonedTimeToUtc(endOfWeek(now), timeZone);
+    const weekStart = fromZonedTime(startOfWeek(now), timeZone);
+    const weekEnd = fromZonedTime(endOfWeek(now), timeZone);
 
     this.events = await this.graphService.getCalendarView(
       weekStart.toISOString(),