diff --git a/bun.lockb b/bun.lockb
index e779e91..87eef70 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index ce60e92..4da059f 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@fontsource/inter": "^5.1.1",
     "@heroicons/react": "^2.2.0",
+    "@number-flow/react": "^0.5.5",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.5",
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 25cb100..6e5d4e8 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,6 +5,7 @@ import { useBackground } from "@/hooks/use-background"
 import { useWebSocketContext } from "@/hooks/use-websocket-context"
 import { fetchLoginUser, fetchSetting } from "@/lib/nezha-api"
 import { cn } from "@/lib/utils"
+import NumberFlow, { NumberFlowGroup } from "@number-flow/react"
 import { useQuery } from "@tanstack/react-query"
 import { AnimatePresence, m } from "framer-motion"
 import { ImageMinus } from "lucide-react"
@@ -266,31 +267,35 @@ function DashboardLink() {
 
 function Overview() {
   const { t } = useTranslation()
-  const [mouted, setMounted] = useState(false)
+  const [time, setTime] = useState({
+    hh: DateTime.now().setLocale("en-US").hour,
+    mm: DateTime.now().setLocale("en-US").minute,
+    ss: DateTime.now().setLocale("en-US").second,
+  })
+
   useEffect(() => {
-    setMounted(true)
-  }, [])
-  const timeOption = DateTime.TIME_WITH_SECONDS
-  timeOption.hour12 = true
-  const [timeString, setTimeString] = useState(DateTime.now().setLocale("en-US").toLocaleString(timeOption))
-  useEffect(() => {
-    const updateTime = () => {
-      const now = DateTime.now().setLocale("en-US").toLocaleString(timeOption)
-      setTimeString(now)
-      requestAnimationFrame(updateTime)
-    }
-    requestAnimationFrame(updateTime)
+    const timer = setInterval(() => {
+      setTime({
+        hh: DateTime.now().setLocale("en-US").hour,
+        mm: DateTime.now().setLocale("en-US").minute,
+        ss: DateTime.now().setLocale("en-US").second,
+      })
+    }, 1000)
+
+    return () => clearInterval(timer)
   }, [])
   return (
     <section className={"mt-10 flex flex-col md:mt-16 header-timer"}>
       <p className="text-base font-semibold">👋 {t("overview")}</p>
       <div className="flex items-center gap-1.5">
         <p className="text-sm font-medium opacity-50">{t("whereTheTimeIs")}</p>
-        {mouted ? (
-          <p className="text-sm font-medium">{timeString}</p>
-        ) : (
-          <Skeleton className="h-[20px] w-[50px] rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
-        )}
+        <NumberFlowGroup>
+          <div style={{ fontVariantNumeric: "tabular-nums" }} className="flex text-sm font-medium mt-0.5">
+            <NumberFlow trend={1} value={time.hh} format={{ minimumIntegerDigits: 2 }} />
+            <NumberFlow prefix=":" trend={1} value={time.mm} digits={{ 1: { max: 5 } }} format={{ minimumIntegerDigits: 2 }} />
+            <NumberFlow prefix=":" trend={1} value={time.ss} digits={{ 1: { max: 5 } }} format={{ minimumIntegerDigits: 2 }} />
+          </div>
+        </NumberFlowGroup>
       </div>
     </section>
   )