diff --git a/package.json b/package.json
index 0d2fcb3..435f532 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "astro-loading-indicator": "0.7.0",
     "better-sqlite3": "^11.1.2",
     "clsx": "^2.1.1",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "dotenv": "^16.4.5",
     "drizzle-kit": "^0.23.1",
     "drizzle-orm": "^0.32.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b55ccff..17daac9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,8 +57,8 @@ importers:
         specifier: ^2.1.1
         version: 2.1.1
       date-fns:
-        specifier: ^3.6.0
-        version: 3.6.0
+        specifier: ^4.1.0
+        version: 4.1.0
       dotenv:
         specifier: ^16.4.5
         version: 16.4.5
@@ -2044,8 +2044,8 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  date-fns@3.6.0:
-    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
 
   debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
@@ -6438,7 +6438,7 @@ snapshots:
 
   csstype@3.1.3: {}
 
-  date-fns@3.6.0: {}
+  date-fns@4.1.0: {}
 
   debug@3.2.7:
     dependencies:
diff --git a/src/components/pages/PageMain/Shoutbox/Shoutbox.tsx b/src/components/pages/PageMain/Shoutbox/Shoutbox.tsx
index 46a3042..2beb40f 100644
--- a/src/components/pages/PageMain/Shoutbox/Shoutbox.tsx
+++ b/src/components/pages/PageMain/Shoutbox/Shoutbox.tsx
@@ -1,7 +1,6 @@
 /** @jsxImportSource solid-js */
 /* eslint-disable no-alert */
 import type { ShoutsData } from '~/backend/service/shoutbox'
-import { format } from 'date-fns/format'
 
 import { createEffect, createSignal, on, onCleanup, onMount, Show } from 'solid-js'
 import { Button } from '../../../ui/Button.tsx'
@@ -11,6 +10,13 @@ import { SectionTitle } from '../../../ui/Section.tsx'
 import { TextArea } from '../../../ui/TextArea.tsx'
 import { TextComment } from '../../../ui/TextComment.tsx'
 
+const padZeros = (num: number, digits: number) => num.toString().padStart(digits, '0')
+function formatDate(date: string) {
+  const d = new Date(date)
+  // yyyy-MM-dd HH:mm
+  return `${d.getFullYear()}-${padZeros(d.getMonth() + 1, 2)}-${padZeros(d.getDate(), 2)} ${padZeros(d.getHours(), 2)}:${padZeros(d.getMinutes(), 2)}`
+}
+
 export function Shoutbox(props: {
   initPage: number
   initPageData: ShoutsData
@@ -72,7 +78,7 @@ export function Shoutbox(props: {
         <div class="flex flex-row gap-2 text-text-secondary">
           {icon}
           <time class="whitespace-nowrap" datetime={props.createdAt}>
-            {format(props.createdAt, 'yyyy-MM-dd HH:mm')}
+            {formatDate(props.createdAt)}
           </time>
         </div>
         <div class="whitespace-pre-wrap">