diff --git a/app/pages/news-detail/index.tsx b/app/pages/news-detail/index.tsx
index 632796e..bf108df 100644
--- a/app/pages/news-detail/index.tsx
+++ b/app/pages/news-detail/index.tsx
@@ -1,4 +1,5 @@
 import htmlParse from 'html-react-parser'
+import { useReadingTime } from 'react-hook-reading-time'
 import { useRouteLoaderData } from 'react-router'
 
 import type { TTagResponse } from '~/apis/common/get-tags'
@@ -19,6 +20,8 @@ export const NewsDetailPage = () => {
   const { title, content, featured_image, slug, author, live_at, tags } =
     newsDetailData || {}
 
+  const { text } = useReadingTime(content || '')
+
   return (
     <div className="sm-max:mx-5 relative">
       <Card>
@@ -45,7 +48,7 @@ export const NewsDetailPage = () => {
                 <p className="flex gap-1 text-sm">
                   <span>{live_at && `${formatDate(live_at)}`}</span>
                   <span>·</span>
-                  <span>5 min read</span>
+                  <span>{text}</span>
                 </p>
               </div>
             </div>
diff --git a/package.json b/package.json
index 707b41b..3464cf6 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "react-colorful": "^5.6.1",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
+    "react-hook-reading-time": "^1.0.0",
     "react-router": "^7.1.3",
     "remix-hook-form": "^6.1.3",
     "tailwind-merge": "^3.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c41056b..193c481 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,6 +92,9 @@ importers:
       react-hook-form:
         specifier: ^7.54.2
         version: 7.54.2(react@19.0.0)
+      react-hook-reading-time:
+        specifier: ^1.0.0
+        version: 1.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react-router:
         specifier: ^7.1.3
         version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -3888,6 +3891,13 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
+  react-hook-reading-time@1.0.0:
+    resolution: {integrity: sha512-kIudDiGHCTzBlV95WM6xPN3EBUViQynJvcul/NL+8My6fsl0BeKoCi9Dp19g69PlyF3WLA3QAyjVL99+Ucgs6A==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      react: ^16.13.1
+      react-dom: ^16.13.1
+
   react-hotkeys-hook@4.6.1:
     resolution: {integrity: sha512-XlZpbKUj9tkfgPgT9gA+1p7Ey6vFIZHttUjPqpTdyT5nqQ8mHL7elxvSbaC+dpSiHUSmr21Ya1mDxBZG3aje4Q==}
     peerDependencies:
@@ -8611,6 +8621,11 @@ snapshots:
     dependencies:
       react: 19.0.0
 
+  react-hook-reading-time@1.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   react-hotkeys-hook@4.6.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       react: 19.0.0