diff --git a/web/package.json b/web/package.json
index 10c9ff69..6b03214e 100644
--- a/web/package.json
+++ b/web/package.json
@@ -29,7 +29,7 @@
     "chart.js": "^4.4.2",
     "chartjs-adapter-moment": "^1.0.1",
     "core-js": "^3.36.1",
-    "date-fns": "^3.6.0",
+    "date-fns": "^2.30.0",
     "dotenv": "^16.4.1",
     "firebase": "^9.23.0",
     "firebaseui": "^6.1.0",
diff --git a/web/plugins/filters.ts b/web/plugins/filters.ts
index 342b21f3..5c838046 100644
--- a/web/plugins/filters.ts
+++ b/web/plugins/filters.ts
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import * as fns from 'date-fns'
+import { intervalToDuration, formatDuration } from 'date-fns'
 import { parsePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js'
 
 Vue.filter('phoneNumber', (value: string): string => {
@@ -50,9 +50,9 @@ Vue.filter('billingPeriod', (value: string): string => {
 })
 
 Vue.filter('humanizeTime', (value: string): string => {
-  const durations = fns.intervalToDuration({
+  const durations = intervalToDuration({
     start: new Date(),
     end: new Date(value),
   })
-  return fns.formatDuration(durations)
+  return formatDuration(durations)
 })
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 59eaf2f7..9f562920 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -27,8 +27,8 @@ dependencies:
     specifier: ^3.36.1
     version: 3.36.1
   date-fns:
-    specifier: ^3.6.0
-    version: 3.6.0
+    specifier: ^2.30.0
+    version: 2.30.0
   dotenv:
     specifier: ^16.4.1
     version: 16.4.1
@@ -9475,11 +9475,14 @@ packages:
       whatwg-url: 11.0.0
     dev: false
 
-  /date-fns@3.6.0:
+  /date-fns@2.30.0:
     resolution:
       {
-        integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==,
+        integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==,
       }
+    engines: { node: '>=0.11' }
+    dependencies:
+      '@babel/runtime': 7.24.5
     dev: false
 
   /de-indent@1.0.2: